@extends('layouts.content')

@section('content')
    <main class="py-4 py-md-5">
        <div class="container px-3 px-md-4" style="max-width: 1280px">
            <div class="d-lg-none mb-3">
                <button class="btn-product-detail filter-toggle-mobile py-2 rounded-pill" type="button"
                    data-bs-toggle="collapse" data-bs-target="#filterSidebar" aria-expanded="false"
                    aria-controls="filterSidebar">
                    <span class="material-symbols-outlined me-1">filter_list</span>
                    Filter & Kategori
                </button>
            </div>

            <div class="row g-4">
                <div class="col-lg-3 filter-sidebar" id="filterSidebar">
                    <div class="bg-surface-lowest p-4 rounded-xl shadow-soft sticky-top-custom">
                        <h2 class="fs-4 fw-bold text-primary-custom mb-4">
                            Filter Produk
                        </h2>

                        <div class="position-relative mb-4">
                            <form action="{{ route('product-catalog', ['token' => request()->route('token')]) }}" method="GET">
                                <span
                                    class="material-symbols-outlined position-absolute top-50 start-0 translate-middle-y ms-3 text-on-surface-variant">search</span>
                                <input type="text" name="search" value="{{ request('search') }}"
                                    class="search-input w-100 ps-5" placeholder="Cari hasil panen..." />
                                @if (request('category'))
                                    <input type="hidden" name="category" value="{{ request('category') }}">
                                @endif
                            </form>
                        </div>

                        <div class="mb-4">
                            <p class="text-on-surface-variant text-uppercase small fw-semibold tracking-wide mb-2">
                                Kategori
                            </p>
                            <div class="d-flex flex-column gap-2">
                                <a href="{{ route('product-catalog', ['token' => request()->route('token')]) }}{{ request('search') ? '?search=' . request('search') : '' }}"
                                    class="btn btn-sm w-100 d-flex justify-content-between align-items-center rounded-pill px-3 py-2 filter-category-btn {{ !request('category') ? 'active' : 'text-on-surface-variant bg-transparent' }} text-decoration-none">
                                    <span>Semua Produk</span>
                                </a>
                                @foreach ($categories as $cat)
                                    <a href="{{ route('product-catalog', ['token' => request()->route('token')]) }}?category={{ $cat->category_id }}{{ request('search') ? '&search=' . request('search') : '' }}"
                                        class="btn btn-sm w-100 d-flex justify-content-between align-items-center rounded-pill px-3 py-2 filter-category-btn {{ request('category') == $cat->category_id ? 'active' : 'text-on-surface-variant bg-transparent' }} text-decoration-none">
                                        <span>{{ $cat->category_name }}</span>
                                        <span class="ms-2">{{ $cat->products_count }}</span>
                                    </a>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-9">
                    <div
                        class="d-flex flex-wrap justify-content-between align-items-center bg-surface-lowest p-3 rounded-xl shadow-soft mb-4">
                        <p class="mb-0 text-on-surface-variant">
                            Menampilkan
                            <span class="fw-bold text-primary-custom">{{ $products->count() }} dari
                                {{ $products->total() }}</span>
                            produk
                        </p>
                    </div>

                    <div class="row g-3 g-md-4">
                        @forelse($products as $product)
                            <div class="col-6 col-md-4">
                                <div class="product-card">
                                    <div class="product-image-wrapper">
                                        @php
                                            $photoExtensions = ['jpg', 'jpeg', 'png', 'webp', 'gif', 'heic'];
                                            $productPhotos = $product->media->filter(function ($mediaItem) use (
                                                $photoExtensions,
                                            ) {
                                                $ext = strtolower(pathinfo($mediaItem->file_url, PATHINFO_EXTENSION));
                                                return in_array($ext, $photoExtensions);
                                            });
                                            $displayPhoto =
                                                $productPhotos->firstWhere('is_main', true) ?? $productPhotos->first();
                                        @endphp

                                        @if ($displayPhoto)
                                            <img src="{{ $displayPhoto->file_url }}"
                                                alt="{{ $product->product_name }}" class="product-image" />
                                        @endif
                                    </div>

                                    <div class="p-2 p-md-3 d-flex flex-column flex-grow-1">
                                        <h3 class="product-title">{{ $product->product_name }}</h3>
                                        <p class="product-description">
                                            {{ $product->category ? $product->category->category_name : '' }}
                                        </p>
                                        <div class="mt-auto">
                                            <p class="product-price">
                                                @if ($product->packages->isNotEmpty())
                                                    Rp{{ number_format($product->packages->min('price'), 0, ',', '.') }}
                                                @else
                                                    Rp-
                                                @endif
                                            </p>
                                            @php
                                                $totalStock = $product->packages->sum('stock');
                                            @endphp
                                            <a href="{{ $totalStock > 0 ? route('product.show', $product->product_id) : 'javascript:void(0)' }}"
                                                class="text-decoration-none" {!! $totalStock == 0 ? 'style="pointer-events: none; opacity: 0.7;"' : '' !!}>
                                                <button
                                                    class="btn-product-detail w-100 rounded-pill py-1 py-md-2 d-flex align-items-center justify-content-center gap-1"
                                                    {{ $totalStock <= 0 ? 'disabled' : '' }}>
                                                    <span class="small">{{ $totalStock > 0 ? 'Detail' : 'Habis' }}</span>
                                                    @if($totalStock > 0)
                                                    <span class="material-symbols-outlined fs-6">arrow_forward</span>
                                                    @endif
                                                </button>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @empty
                            <div class="col-12 text-center py-5">
                                <p class="text-on-surface-variant">Tidak ada produk yang ditemukan.</p>
                            </div>
                        @endforelse
                    </div>

                    <div class="d-flex justify-content-center mt-5 w-100">
                        <div class="custom-pagination-catalog">
                            @if ($products->total() > 12)
                                {{-- Jika produk asli lebih dari 12, gunakan pagination bawaan Laravel --}}
                                {{ $products->links('pagination::bootstrap-5') }}
                            @else
                                {{-- Jika produk <= 12, render komponen dinamis agar angka menyesuaikan jumlah data --}}
                                <ul class="pagination">
                                    <li class="page-item {{ $products->onFirstPage() ? 'disabled' : '' }}">
                                        @if ($products->onFirstPage())
                                            <span class="page-link">
                                                <span class="material-symbols-outlined fs-5"
                                                    style="vertical-align: middle;">chevron_left</span>
                                            </span>
                                        @else
                                            <a class="page-link" href="{{ $products->previousPageUrl() }}">
                                                <span class="material-symbols-outlined fs-5"
                                                    style="vertical-align: middle;">chevron_left</span>
                                            </a>
                                        @endif
                                    </li>

                                    @php
                                        $totalPages = $products->lastPage();
                                    @endphp

                                    @for ($i = 1; $i <= $totalPages; $i++)
                                        <li class="page-item {{ $products->currentPage() == $i ? 'active' : '' }}">
                                            @if ($products->currentPage() == $i)
                                                <span class="page-link">{{ $i }}</span>
                                            @else
                                                <a class="page-link"
                                                    href="{{ $products->url($i) }}">{{ $i }}</a>
                                            @endif
                                        </li>
                                    @endfor

                                    <li
                                        class="page-item {{ $products->currentPage() == $products->lastPage() ? 'disabled' : '' }}">
                                        @if ($products->currentPage() == $products->lastPage())
                                            <span class="page-link">
                                                <span class="material-symbols-outlined fs-5"
                                                    style="vertical-align: middle;">chevron_right</span>
                                            </span>
                                        @else
                                            <a class="page-link" href="{{ $products->nextPageUrl() }}">
                                                <span class="material-symbols-outlined fs-5"
                                                    style="vertical-align: middle;">chevron_right</span>
                                            </a>
                                        @endif
                                    </li>
                                </ul>
                            @endif
                        </div>
                    </div>

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

    <script>
        // Inject Otomatis Icon Panah Bootstrap bawaan Laravel agar konsisten menggunakan Material Symbols ber-border
        document.addEventListener("DOMContentLoaded", function() {
            document.querySelectorAll('.custom-pagination-catalog .page-link').forEach(link => {
                if (link.innerHTML.includes('Previous') || link.innerHTML.includes('«')) {
                    link.innerHTML =
                        '<span class="material-symbols-outlined fs-5" style="vertical-align: middle;">chevron_left</span>';
                }
                if (link.innerHTML.includes('Next') || link.innerHTML.includes('»')) {
                    link.innerHTML =
                        '<span class="material-symbols-outlined fs-5" style="vertical-align: middle;">chevron_right</span>';
                }
            });
        });

        // Filter kategori aktif (visual)
        const filterBtns = document.querySelectorAll(".filter-category-btn");
        filterBtns.forEach((btn) => {
            btn.addEventListener("click", function() {
                filterBtns.forEach((b) => {
                    b.classList.remove("active");
                    b.classList.add("text-on-surface-variant", "bg-transparent");
                });
                this.classList.add("active");
                this.classList.remove("text-on-surface-variant", "bg-transparent");
            });
        });

        // Tutup sidebar otomatis di mobile
        const filterSidebar = document.getElementById("filterSidebar");
        if (filterSidebar && window.innerWidth < 992) {
            filterBtns.forEach((btn) => {
                btn.addEventListener("click", () => {
                    const bsCollapse = bootstrap.Collapse.getInstance(filterSidebar);
                    if (bsCollapse) bsCollapse.hide();
                });
            });
        }
    </script>
@endsection