@extends('layouts.main')
@section('style')
<!--Swiper slider css-->
<link href="assets/libs/swiper/swiper-bundle.min.css" rel="stylesheet" type="text/css" />
<!-- jsvectormap css -->
<link href="assets/libs/jsvectormap/jsvectormap.min.css" rel="stylesheet" type="text/css" />
<style>
    .product-card-table {
        width: 100%;
        font-size: clamp(0.7rem, 0.9vw, 0.85rem);
        table-layout: fixed;
    }

    .product-card-table th,
    .product-card-table td {
        padding: 0.25rem;
        white-space: normal;
        word-wrap: break-word;
        overflow: visible;
        line-height: 1.3;
    }

    .product-card-table td:last-child {
        text-align: right;
    }

    .shipping-icon {
        font-size: clamp(1.1rem, 1.3vw, 1.4rem);
        flex-shrink: 0;
    }

    #spec_shipment td:first-child {
        width: 15%;
        vertical-align: top;
    }

    #spec_shipment td:last-child {
        width: 85%;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .shipping-text {
        font-size: clamp(0.7rem, 0.9vw, 0.85rem);
        line-height: 1.3;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .card-footer {
        padding: 0.75rem;
        display: flex;
        justify-content: space-between;
        gap: 0.5rem;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
    }

    .card-footer .btn {
        flex: 1;
        padding: 0.75rem;
        font-size: 0.9rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        border-radius: 4px;
    }

    .card-footer .btn i {
        font-size: 1.1rem;
    }

    .ribbon-box.card {
        height: auto !important;
        min-height: 200px;
        border-radius: 8px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }

    .card-body {
        padding: 1.25rem;
    }

    .product-info {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .location-info,
    .shipping-info {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: #6c757d;
        font-size: 0.85rem;
    }

    .product-image {
        width: 40%;
        height: 160px;
        border-radius: 6px;
        overflow: hidden;
    }

    .product-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .product-details {
        flex: 1;
        padding-left: 1rem;
    }

    .product-title {
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
        color: #2c3e50;
    }

    .product-category {
        display: inline-block;
        padding: 0.25rem 0.75rem;
        border-radius: 20px;
        font-size: 0.85rem;
        margin-bottom: 1rem;
    }

    .product-price {
        font-size: 1.25rem;
        font-weight: 700;
        color: #2563eb;
        margin-bottom: 0.5rem;
    }

    .product-meta {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin-top: 1rem;
    }

    .meta-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: #64748b;
    }

    .meta-item i {
        font-size: 1.1rem;
    }

    @media (max-width: 576px) {
        .card-footer {
            padding: 0.75rem;
        }

        .card-footer .btn {
            padding: 0.5rem;
            font-size: 0.85rem;
        }

        .product-image {
            width: 35%;
            height: 140px;
        }

        .product-title {
            font-size: 1rem;
        }

        .product-price {
            font-size: 1.1rem;
        }
    }
</style>
@endsection

@section('content')
@include('pages.home.modal')
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between bg-galaxy-transparent">
            @if($is_mobile && isset($categories))
            <select name="category" class="form-control" id="category">
                <option value="semua-produk">Semua Produk</option>
                @foreach($categories as $k => $v)
                <option value="{{ $v->slug }}" {{ $category == $v->slug ? 'selected=selected' : '' }}>{{ $v->name }}</option>
                @endforeach
            </select>
            @else
            <h4 class="mb-sm-0">Beranda</h4>
            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="javascript: void(0);">Reseller</a></li>
                    <li class="breadcrumb-item active">Beranda</li>
                </ol>
                @endif
            </div>
        </div>
    </div>
    @include('components.message')
    <div class="row">
        <div class="col-xxl-12">
            <div class="card">
                <div class="card-body">
                    <!-- Nav tabs -->
                    @if(isset($categories) && !$is_mobile)
                    <ul class="nav nav-pills nav-primary mb-3" role="tablist">
                        <li class="nav-item waves-effect waves-light">
                            <a class="nav-link {{ $category == 'semua-produk' ? 'active' : '' }}" href="{{ route('home', ['category' => 'semua-produk']) }}" role="tab">Semua Produk</a>
                        </li>
                        @foreach($categories as $k => $v)
                        <li class="nav-item waves-effect waves-light">
                            <a class="nav-link {{ $category == $v->slug ? 'active' : '' }}" href="{{ route('home', ['category' => $v->slug]) }}" role="tab">{{ $v->name }}</a>
                        </li>
                        @endforeach
                    </ul>
                    @endif
                    <!-- Tab panes -->
                    <div class="tab-content text-muted">
                        <div class="tab-pane active" id="home-1" role="tabpanel">
                            @if(isset($products) && count($products)>0)
                            <div class="row">
                                @foreach($products as $k => $v)
                                <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4 mb-3">
                                    <div class="card ribbon-box border shadow-none mb-lg-0 right material-shadow">
                                        <div class="card-body p-0">
                                            <!-- <div class="position-relative">
                                                <img src="{{ asset($v->photo) }}" alt="Product" class="img-fluid rounded-top" style="width:100%; height:200px; object-fit:cover;">
                                                @if($v->featured)
                                                <span class="badge bg-warning text-dark position-absolute top-0 end-0 m-2">Featured</span>
                                                @endif
                                            </div> -->
                                            <div class="p-3">
                                                <div class="d-flex flex-column">
                                                    <div class="d-flex align-items-start mb-2">
                                                        <div class="product-image-small me-3" style="width: 120px; height: 120px; flex-shrink: 0;">
                                                            <img src="{{ asset($v->photo) }}" alt="Product" class="img-fluid rounded" style="width: 100%; height: 100%; object-fit: cover;">
                                                        </div>
                                                        <div>
                                                            <h6 class="mb-1" style="font-size: 1rem;">
                                                                {{ \Illuminate\Support\Str::limit($v->name ?? '-', 30, '...') }}
                                                            </h6>
                                                            <span class="badge bg-light text-dark">{{ $v->categories->name ?? '' }}</span>
                                                        </div>
                                                    </div>
                                                    <div class="d-flex justify-content-between align-items-center mt-2">
                                                        <span class="text-dark font-weight-bold">Harga</span>
                                                        <span class="text-dark font-weight-bold">Min.Qty</span>
                                                    </div>
                                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                                        <span class="text-dark">Rp. {{ number_format($v->sell_price) }}</span>
                                                        <span class="badge bg-light text-dark">{{ $v->minimum_order }} units</span>
                                                    </div>
                                                    <div class="d-flex justify-content-between align-items-start gap-2 mb-3">
                                                        <div class="d-flex align-items-center" style="width: 50%; min-width: 50%;">
                                                            <i class="ri-map-pin-line me-2 text-primary fs-15"></i>
                                                            <small class="text-dark" style="white-space: normal; word-wrap: break-word; line-height: -1.2;">{{ $v->sellers->city_name ?? 'Kota Medan' }}</small>
                                                        </div>
                                                        <div class="d-flex align-items-start" style="width: 50%; min-width: 50%;">
                                                            <i class="ri-truck-line me-2 text-warning fs-15"></i>
                                                            <small class="text-dark" style="white-space: normal; word-wrap: break-word; line-height: -1.2;">{{ $v->shipping_method=="INTERNAL" ? str_replace(',', ', ', $v->shipping_coverage) : 'Seluruh Wilayah Indonesia' }}</small>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="card-footer">
                                            <div class="d-flex justify-content-between gap-2 w-100">
                                                @if($v->stock > 0)
                                                <a href="{{ route('home.checkout', ['id'=> $v->id]) }}" class="btn btn-success w-50">Beli <i class="ri-shopping-cart-line ms-1"></i></a>
                                                <a href="javascript:void(0);" class="btn btn-warning link-toko w-50" data-bs-toggle="modal" data-id="{{ $v->id }}" data-bs-target="#linkModal">Link <i class="ri-link ms-1"></i></a>
                                                @else
                                                <button class="btn btn-outline-danger w-100" disabled>Habis</button>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                            @else
                            <div class="noresult">
                                <div class="text-center">
                                    <lord-icon src="https://cdn.lordicon.com/msoeawqm.json" trigger="loop" colors="primary:#405189,secondary:#0ab39c" style="width:75px;height:75px"></lord-icon>
                                    <h5 class="mt-2">Maaf data tidak ditemukan</h5>
                                    <p class="text-muted">Supplier belum menambahkan data pada kategori ini.</p>
                                </div>
                            </div>
                            @endif
                        </div>
                    </div>
                </div><!-- end card-body -->
            </div><!-- end card -->
        </div>
        <!--end col-->
    </div>
    @endsection

    @section('script')
    <script src="assets/libs/swiper/swiper-bundle.min.js"></script>
    @include('pages.home.script')
    @endsection