@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">
                    <!-- Add Filter Form -->
                    <form method="GET" class="mb-4" id="filterForm">
                        <div class="row g-3">
                            <div class="col-12 col-md-3">
                                <input type="text" name="search" class="form-control" placeholder="Cari Produk..." value="{{ request('search') }}">
                            </div>
                            <div class="col-12 col-md-3">
                                <select name="shipping" class="form-select">
                                    <option value="">Semua Area</option>
                                    <option value="local" {{ request('shipping') == 'local' ? 'selected' : '' }}>Kurir Lokal</option>
                                    <option value="nationwide" {{ request('shipping') == 'nationwide' ? 'selected' : '' }}>Seluruh Indonesia</option>
                                </select>
                            </div>
                            <div class="col-12 col-md-4">
                                <div class="row g-2">
                                    <div class="col-6">
                                        <input type="number" name="min_price" class="form-control" placeholder="Harga Min" value="{{ request('min_price') }}">
                                    </div>
                                    <div class="col-6">
                                        <input type="number" name="max_price" class="form-control" placeholder="Harga Max" value="{{ request('max_price') }}">
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-md-2">
                                <button type="submit" class="btn btn-primary w-100">Filter</button>
                            </div>
                        </div>
                    </form>

                    <!-- 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($subcategories))
                            @if(count($subcategories) > 0)
                            <div class="row mt-5">
                                @foreach($subcategories as $subcat)
                                <div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-4">
                                    <a href="{{ route('home', ['category' => $category, 'subcategory' => $subcat->slug]) }}" class="text-decoration-none">
                                        <div class="card h-100">
                                            <img src="{{ asset($subcat->photo ?? 'placeholder.jpg') }}" class="card-img-top" alt="{{ $subcat->name }}" style="height: 200px; object-fit: cover;">
                                            <div class="card-body text-center">
                                                <h5 class="card-title text-dark">{{ $subcat->name }}</h5>
                                                <p class="card-text text-muted small">{{ $subcat->description ?? '' }}</p>
                                            </div>
                                        </div>
                                    </a>
                                </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">Data Tidak Tersedia</h5>
                                    <p class="text-muted">Silahkan pilih kategori lain untuk belanja.</p>
                                </div>
                            </div>
                            @endif
                            @else
                            @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>

                            <!-- Update Pagination -->
                            @if($products->hasPages())
                            <div class="d-flex justify-content-center mt-4">
                                <nav class="{{ $is_mobile ? 'w-100' : '' }}">
                                    <ul class="pagination {{ $is_mobile ? 'pagination-sm justify-content-between' : '' }}">
                                        {{-- Previous Page Link --}}
                                        @if ($products->onFirstPage())
                                        <li class="page-item disabled"><span class="page-link">←</span></li>
                                        @else
                                        <li class="page-item">
                                            <a class="page-link" href="{{ $products->previousPageUrl() }}&{{ http_build_query(request()->except('page')) }}" rel="prev">←</a>
                                        </li>
                                        @endif

                                        @if(!$is_mobile)
                                        @foreach ($products->getUrlRange(1, $products->lastPage()) as $page => $url)
                                        <li class="page-item {{ $page == $products->currentPage() ? 'active' : '' }}">
                                            <a class="page-link" href="{{ $url }}&{{ http_build_query(request()->except('page')) }}">{{ $page }}</a>
                                        </li>
                                        @endforeach
                                        @else
                                        <li class="page-item">
                                            <span class="page-link border-0 bg-transparent">
                                                Halaman {{ $products->currentPage() }} dari {{ $products->lastPage() }}
                                            </span>
                                        </li>
                                        @endif

                                        {{-- Next Page Link --}}
                                        @if ($products->hasMorePages())
                                        <li class="page-item">
                                            <a class="page-link" href="{{ $products->nextPageUrl() }}&{{ http_build_query(request()->except('page')) }}" rel="next">→</a>
                                        </li>
                                        @else
                                        <li class="page-item disabled"><span class="page-link">→</span></li>
                                        @endif
                                    </ul>
                                </nav>
                            </div>
                            @endif
                            @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
                            @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')
    <script>
        // Add mobile filter toggle
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('filterForm');
            const mobileToggle = document.createElement('button');

            if (window.innerWidth < 768) {
                form.classList.add('collapse');
                mobileToggle.type = 'button';
                mobileToggle.className = 'btn btn-outline-primary w-100 mb-3';
                mobileToggle.setAttribute('data-bs-toggle', 'collapse');
                mobileToggle.setAttribute('data-bs-target', '#filterForm');
                mobileToggle.innerHTML = '<i class="ri-filter-line me-1"></i> Filter Produk';
                form.parentNode.insertBefore(mobileToggle, form);
            }
        });
    </script>
    @endsection