@extends('layouts.landing-page.index', ['title' => 'Produk'])

@section('main')
    <section id="product" class="product section mt-5">

        <div class="container mt-3 mb-5" data-aos="fade-up" data-aos-delay="100">

            {{-- <div class="container section-title pb-0 mb-5" data-aos="fade-up">
      <h2>Produk</h2>
      <p>Produk</p>
    </div> --}}

            <div class="row">

                <!-- Sidebar Desktop -->
                <aside class="col-lg-3 d-none d-lg-block">
                    <form id="filterForm" method="GET" action="{{ route('product.search') }}">
                        <div class="filter-box shadow">
                            <h5 class="filter-title"> Filter Produk </h5>
                            <hr>

                            <div class="filter-section">
                                <label class="mb-2"><b> Kategori </b></label>
                                @if (count($categories) > 0)
                                    @foreach ($categories as $category)
                                        <div class="form-check">
                                            <input class="form-check-input category-checkbox" type="checkbox"
                                                value="{{ $category->name }}" name="categories[]"
                                                id="kategori-{{ $loop->iteration }}"
                                                {{ in_array($category->name, $selectedCategories ?? []) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="kategori-{{ $loop->iteration }}">
                                                {{ $category->name }}
                                            </label>
                                        </div>
                                    @endforeach
                                @else
                                    <div class="text-center font-medium" data-aos="fade-up" style="opacity: 50%;">
                                        Belum ada data
                                    </div>
                                @endif
                            </div>

                            <input type="hidden" name="search" value="{{ request('search') }}">
                            <input type="hidden" name="sort" value="{{ request('sort') }}">


                        </div>
                    </form>
                </aside>

                <!-- Content -->
                <main class="col-lg-9">

                    <!-- Search Produk -->
                    <div class="mb-4">
                        <form class="row g-2 align-items-center" method="GET" action="{{ route('product.search') }}">
                            <!-- Search -->
                            <div class="col-12 col-md-7">
                                <div class="search-wrapper shadow-sm">
                                    <i class="bi bi-search search-icon"></i>
                                    <input type="text" class="search-input-elegant" name="search"
                                        placeholder="Cari produk..." aria-label="Cari produk"
                                        value="{{ request('search') }}">
                                </div>
                            </div>

                            @foreach ($selectedCategories ?? [] as $categoryId)
                                <input type="hidden" name="categories[]" value="{{ $categoryId }}">
                            @endforeach
                            <!-- Sort Dropdown -->
                            <div class="col-12 col-md-3">
                                <div class="sort-wrapper shadow-sm">
                                    <i class="bi bi-filter sort-icon"></i>
                                    <select class="sort-select" name="sort">
                                        <option value="">Default</option>
                                        <option value="terbaru" {{ request('sort') == 'terbaru' ? 'selected' : '' }}>
                                            Terbaru
                                        </option>
                                        <option value="termurah" {{ request('sort') == 'termurah' ? 'selected' : '' }}>
                                            Harga
                                            Termurah</option>
                                        <option value="termahal" {{ request('sort') == 'termahal' ? 'selected' : '' }}>
                                            Harga
                                            Termahal</option>
                                        <option value="nama_asc" {{ request('sort') == 'nama_asc' ? 'selected' : '' }}>Nama
                                            A - Z</option>
                                        <option value="nama_desc" {{ request('sort') == 'nama_desc' ? 'selected' : '' }}>
                                            Nama Z - A</option>
                                    </select>
                                </div>
                            </div>

                            <button type="submit" class="btn btn-outline-primary col-md-2 col-12">
                                <i class="bi bi-search"></i> Cari
                            </button>
                        </form>
                    </div>

                    <div class="d-flex justify-content-between align-items-center mb-3">
                        {{-- <ul class="nav nav-tabs">
            <li class="nav-item">
              <a class="nav-link active">Produk</a>
            </li>
            <li class="nav-item">
              <a class="nav-link">Toko</a>
            </li>
          </ul> --}}

                        <!-- Mobile Filter Button -->
                        <button class="btn btn-outline-secondary d-lg-none" data-bs-toggle="offcanvas"
                            data-bs-target="#filterMobile">
                            Filter
                        </button>
                    </div>

                    <!-- Produk Grid -->
                    <div class="row g-3">
                        @if (count($catalogs) > 0)
                            @foreach ($catalogs as $catalog)
                                <div class="col-6 col-md-4 col-xl-3">
                                    <a href="{{ route('product.detail', ['slug' => $catalog->slug]) }}"
                                        class="product-link">
                                        <div class="product-card shadow position-relative">
                                            <span
                                                class="badge badge-voucher text-white">{{ $catalog->category_name }}</span>
                                            <img src="{{ asset('storage') }}/{{ $catalog->thumbnail }}"
                                                alt="Cerutu Don Juan">
                                            <div class="product-body">
                                                <div class="product-title">
                                                    {{ $catalog->name }}
                                                    {{-- {!! $catalog->description !!} --}}
                                                </div>
                                                <div class="product-price">{{ format_rupiah((int) $catalog->price) }}</div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            @endforeach
                        @else
                            <div class="text-center font-medium" data-aos="fade-up" style="opacity: 50%;">
                                Belum ada data
                            </div>
                        @endisset


                </div>
            </main>
        </div>
    </div>

    <!-- Offcanvas Filter Mobile -->
    <div class="offcanvas offcanvas-start" id="filterMobile">
        <div class="offcanvas-header">
            <h5>Filter</h5>
            <button class="btn-close" data-bs-dismiss="offcanvas"></button>
        </div>
        <div class="offcanvas-body">
            <div class="filter-section">
                <form id="filterMobileForm" method="GET" action="{{ route('product.search') }}">
                    <label class="mb-2">Kategori</label>
                    {{ implode(', ', $selectedCategories ?? []) }}

                    @if (count($categories) > 0)
                        @foreach ($categories as $category)
                            <div class="form-check">
                                <input class="form-check-input category-mobile-checkbox" type="checkbox"
                                    value="{{ $category->name }}" name="categories[]"
                                    id="kategori-mobile-{{ $loop->iteration }}"
                                    {{ in_array($category->name, $selectedCategories ?? []) ? 'checked' : '' }}>
                                <label class="form-check-label" for="kategori-mobile-{{ $loop->iteration }}">
                                    {{ $category->name }}
                                </label>
                            </div>
                        @endforeach
                    @else
                        <div class="text-center font-medium" data-aos="fade-up" style="opacity: 50%;">
                            Belum ada data
                        </div>
                    @endif
                    <input type="hidden" name="search" value="{{ request('search') }}">
                    <input type="hidden" name="sort" value="{{ request('sort') }}">

                </form>
            </div>
        </div>
    </div>

</section>
@endsection

@push('styles')
<style>
    /* Sidebar */
    .offcanvas {
        border-left: 5px solid #CE9F34 !important;
    }

    .filter-box {
        background: #fff;
        border-radius: 8px;
        padding: 16px;
        border-left: 3px solid #CE9F34 !important;
    }

    .filter-title {
        font-weight: 600;
        margin-bottom: 12px;
    }

    .filter-section {
        /* border-bottom: 1px solid #eee; */
        padding-bottom: 12px;
        margin-bottom: 12px;
    }

    /* Produk Card */
    .product-card {
        background: #fff;
        border-radius: 8px;
        overflow: hidden;
        transition: 0.2s;
        height: 100%;
    }

    .product-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    }

    .product-card img {
        width: 100%;
        height: 300px;
        object-fit: cover;
    }

    .product-body {
        padding: 12px;
    }

    .product-title {
        font-size: 14px;
        font-weight: 600;
        line-height: 1.3;
        margin-bottom: 6px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        /* Batasi teks menjadi 2 baris */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        height: 40px
    }

    .product-price {
        color: #CE9F34;
        font-weight: 700;
    }

    .product-meta {
        font-size: 12px;
        color: #777;
    }

    .badge-voucher {
        position: absolute;
        top: 8px;
        left: 8px;
        background: #CE9F34;
        font-size: 11px;
    }

    .product-link {
        text-decoration: none;
        color: inherit;
        display: block;
        height: 100%;
    }

    .product-link:hover {
        color: inherit;
    }

    .product-link:focus {
        outline: none;
    }


    /* Mobile */
    @media (max-width: 768px) {
        .product-card img {
            height: 300px;
        }
    }

    /* Elegant Search */
    .search-wrapper {
        position: relative;
        background: #fff;
        border-radius: 50px;
        padding: 10px 18px 10px 46px;
        border: 1px solid #eee;
        transition: all 0.3s ease;
    }

    .search-wrapper:hover {
        border-color: rgba(201, 164, 76, 0.6);
    }

    .search-wrapper:focus-within {
        border-color: #c9a44c;
        box-shadow: 0 0 0 4px rgba(201, 164, 76, 0.18);
    }

    .search-icon {
        position: absolute;
        left: 18px;
        top: 50%;
        transform: translateY(-50%);
        color: #c9a44c;
        font-size: 16px;
    }

    .search-input-elegant {
        width: 100%;
        border: none;
        outline: none;
        font-size: 14px;
        background: transparent;
    }

    .search-input-elegant::placeholder {
        color: #aaa;
    }

    /* SORT DROPDOWN */
    .sort-wrapper {
        position: relative;
        background: #fff;
        border-radius: 50px;
        padding: 10px 18px 10px 42px;
        border: 1px solid #eee;
        transition: all 0.3s ease;
        height: 100%;
    }

    .sort-wrapper:hover {
        border-color: rgba(201, 164, 76, 0.6);
    }

    .sort-wrapper:focus-within {
        border-color: #c9a44c;
        box-shadow: 0 0 0 4px rgba(201, 164, 76, 0.18);
    }

    .sort-icon {
        position: absolute;
        left: 18px;
        top: 50%;
        transform: translateY(-50%);
        color: #c9a44c;
        font-size: 16px;
    }

    .sort-select {
        width: 100%;
        border: none;
        outline: none;
        background: transparent;
        font-size: 14px;
        appearance: none;
        cursor: pointer;
        color: #555;
    }

    /* Mobile spacing */
    @media (max-width: 768px) {
        .sort-wrapper {
            margin-top: 4px;
        }
    }
</style>
@endpush

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const checkboxes = document.querySelectorAll('.category-checkbox');

        checkboxes.forEach(checkbox => {
            checkbox.addEventListener('change', function() {
                // Submit form secara otomatis ketika checkbox diubah
                document.getElementById('filterForm').submit();
            });
        });
    });
    document.addEventListener('DOMContentLoaded', function() {
        const checkboxes = document.querySelectorAll('.category-mobile-checkbox');

        checkboxes.forEach(checkbox => {
            checkbox.addEventListener('change', function() {
                // Submit form secara otomatis ketika checkbox diubah
                document.getElementById('filterMobileForm').submit();
            });
        });
    });
</script>
@endpush