@extends('layouts.frontend')

@section('title', 'Belanja Padi & Beras')

@section('content')
{{-- Header Halaman --}}
<div class="container-fluid py-5 bg-light border-bottom mb-5">
    <div class="container text-center">
        <h1 class="display-5 fw-bold text-dark mb-3">Belanja Produk Kami</h1>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb justify-content-center mb-0">
                <li class="breadcrumb-item"><a href="{{ route('home') }}" class="text-decoration-none">Home</a></li>
                <li class="breadcrumb-item active text-muted">Shop</li>
            </ol>
        </nav>
    </div>
</div>

{{-- Konten Utama --}}
<div class="container pb-5">
    <div class="row g-4">

        {{-- SIDEBAR FILTER --}}
        <div class="col-lg-3">

            {{-- Filter Wilayah Lengkap--}}
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-body p-4">
                    <h6 class="fw-bold mb-3 text-uppercase small text-muted">Filter Wilayah Lengkap</h6>
                    <form action="{{ route('shop') }}" method="GET">
                        @foreach(request()->only(['search', 'kategori', 'sort']) as $key => $val)
                        <input type="hidden" name="{{ $key }}" value="{{ $val }}">
                        @endforeach

                        <div class="mb-2">
                            <label class="small fw-bold">Provinsi</label>
                            <select name="provinsi" id="filter_provinsi" class="form-select form-select-sm">
                                <option value="">Semua Provinsi</option>
                                @foreach(\Laravolt\Indonesia\Models\Province::all() as $prov)
                                <option value="{{ $prov->code }}" {{ request('provinsi')==$prov->code ? 'selected' : ''
                                    }}>{{ $prov->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="mb-2">
                            <label class="small fw-bold">Kota/Kabupaten</label>
                            <select name="kota" id="filter_kota" class="form-select form-select-sm" {{
                                !request('provinsi') ? 'disabled' : '' }}>
                                <option value="">Semua Kota</option>
                            </select>
                        </div>

                        <div class="mb-2">
                            <label class="small fw-bold">Kecamatan</label>
                            <select name="kecamatan" id="filter_kecamatan" class="form-select form-select-sm" {{
                                !request('kota') ? 'disabled' : '' }}>
                                <option value="">Semua Kecamatan</option>
                            </select>
                        </div>

                        <div class="mb-3">
                            <label class="small fw-bold">Desa</label>
                            <select name="desa" id="filter_desa" class="form-select form-select-sm" {{
                                !request('kecamatan') ? 'disabled' : '' }}>
                                <option value="">Semua Desa</option>
                            </select>
                        </div>

                        <button type="submit" class="btn btn-primary btn-sm w-100 rounded-pill shadow-sm">
                            <i class="fas fa-search me-1"></i> Cari Produk
                        </button>
                    </form>
                </div>
            </div>

            {{-- Card Kategori --}}
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-body p-4">
                    <h6 class="fw-bold mb-3 text-uppercase small text-muted">Kategori</h6>
                    <div class="d-flex flex-column gap-2">

                        @php
                        $kategoriList = \App\Models\Kategori::all();
                        $currentKat = request('kategori');
                        @endphp

                        {{-- Tombol Semua Kategori --}}
                        <a href="{{ route('shop', array_merge(request()->query(), ['kategori' => null])) }}"
                            class="d-flex justify-content-between align-items-center text-decoration-none {{ !$currentKat ? 'fw-bold text-primary' : 'text-secondary' }}">
                            <span>Semua Kategori</span>
                        </a>

                        {{-- Looping Kategori Database --}}
                        @foreach($kategoriList as $kat)
                        <a href="{{ route('shop', array_merge(request()->query(), ['kategori' => $kat->slug])) }}"
                            class="d-flex justify-content-between align-items-center text-decoration-none {{ $currentKat == $kat->slug ? 'fw-bold text-primary' : 'text-secondary' }}">

                            <span>{{ $kat->nama_kategori }}</span>

                            @if($currentKat == $kat->slug)
                            <i class="fas fa-check small"></i>
                            @endif
                        </a>
                        @endforeach

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

            {{-- Banner Info Kecil --}}
            <div class="card border-0 shadow-sm bg-primary text-white">
                <div class="card-body p-4">
                    <h5 class="fw-bold mb-2"><i class="fas fa-leaf me-2"></i>Produk Segar</h5>
                    <p class="small mb-0 opacity-75">Semua produk kami diambil langsung dari petani lokal terpercaya.
                    </p>
                </div>
            </div>
        </div>

        {{-- LIST PRODUK --}}
        <div class="col-lg-9">

            {{-- Top Bar (Info Jumlah & Sorting) --}}
            <div class="d-flex justify-content-between align-items-center mb-4 bg-white p-3 rounded shadow-sm border">
                <div class="d-none d-md-block text-muted small">
                    Menampilkan <span class="fw-bold text-dark">{{ $produks->firstItem() ?? 0 }}-{{ $produks->lastItem()
                        ?? 0 }}</span>
                    dari <span class="fw-bold text-dark">{{ $produks->total() }}</span> produk
                </div>

                <div class="d-flex align-items-center">
                    <label class="small text-muted me-2 text-nowrap">Urutkan:</label>
                    <form id="sortForm" action="{{ route('shop') }}" method="GET">
                        @foreach(request()->except('sort') as $key => $value)
                        <input type="hidden" name="{{ $key }}" value="{{ $value }}">
                        @endforeach

                        <select name="sort" class="form-select form-select-sm border-0 bg-light fw-bold text-dark"
                            onchange="document.getElementById('sortForm').submit()"
                            style="width: 160px; cursor: pointer;">
                            <option value="terbaru" {{ request('sort')=='terbaru' ? 'selected' : '' }}>Paling Baru
                            </option>
                            <option value="termurah" {{ request('sort')=='termurah' ? 'selected' : '' }}>Harga Terendah
                            </option>
                            <option value="termahal" {{ request('sort')=='termahal' ? 'selected' : '' }}>Harga Tertinggi
                            </option>
                            <option value="terlaris" {{ request('sort')=='terlaris' ? 'selected' : '' }}>Paling Laris
                            </option>
                        </select>
                    </form>
                </div>
            </div>

            {{-- Grid Produk --}}
            <div class="row g-4">
                @forelse($produks as $produk)
                <div class="col-md-6 col-lg-4">
                    <a href="{{ route('produk.detail', $produk->id) }}" class="text-decoration-none">
                        <div class="card border-0 shadow-sm h-100 product-card">
                            <div class="position-absolute top-0 end-0 m-2 z-1">
                                <span class="badge bg-warning text-dark">
                                    Stok: {{ $produk->stok }} Kg
                                </span>
                            </div>

                            <div class="overflow-hidden" style="height: 200px;">
                                <img src="{{ $produk->foto_produk ? asset('storage/' . $produk->foto_produk) : 'https://images.unsplash.com/photo-1586201375761-83865001e31c?q=80&w=800&auto=format&fit=crop' }}"
                                    class="card-img-top w-100 h-100" alt="{{ $produk->nama_produk }}"
                                    style="object-fit: cover;">
                            </div>

                            <div class="card-body d-flex justify-content-between flex-column p-3">
                                <div>
                                    <span class="badge bg-primary mb-2">{{ $produk->kategori->nama_kategori ?? 'Umum'
                                        }}</span>
                                    <h6 class="fw-bold mb-2 text-dark text-truncate" style="max-width: 100%;">{{
                                        $produk->nama_produk }}</h6>
                                    <small class="text-muted d-block mb-2" style="font-size: 0.8rem;">
                                        <i class="fas fa-map-marker-alt text-danger me-1"></i>
                                        {{ Str::limit($produk->petani->alamat ?? 'Alamat tidak tersedia', 35) }}
                                    </small>
                                    <p class="text-muted small mb-3">{{ Str::limit($produk->deskripsi, 60) }}</p>
                                </div>

                                <div class="d-flex justify-content-between align-items-center pt-2 border-top">
                                    <div>
                                        <small class="text-muted">Harga/Kg</small>
                                        <h6 class="fw-bold text-primary mb-0">
                                            Rp {{ number_format($produk->harga, 0, ',', '.') }}
                                        </h6>
                                    </div>
                                    <button class="btn btn-primary btn-sm rounded-pill">
                                        <i class="fa fa-eye"></i> Detail
                                    </button>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                @empty
                <div class="col-12">
                    <div class="text-center py-5 bg-white rounded-3 shadow-sm border border-dashed">
                        <i class="fas fa-search fa-3x text-muted opacity-50 mb-3"></i>
                        <h5 class="fw-bold text-dark">Produk Tidak Ditemukan</h5>
                        <p class="text-muted mb-4">Coba ubah kata kunci pencarian atau reset filter Anda.</p>
                        <a href="{{ route('shop') }}" class="btn btn-outline-primary rounded-pill px-4">
                            <i class="fas fa-sync-alt me-2"></i> Reset Filter
                        </a>
                    </div>
                </div>
                @endforelse
            </div>

            {{-- Pagination --}}
            @if ($produks->hasPages())
            <div class="d-flex justify-content-center mt-5">
                {{ $produks->withQueryString()->links() }}
            </div>
            @endif
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
    $(document).ready(function() {
        function setupCascading(source, target, routeName, placeholder) {
            $(source).on('change', function() {
                let code = $(this).val();
                $(target).html('<option value="">Memuat...</option>').prop('disabled', true);
                
                if(target === '#filter_kota') {
                    $('#filter_kecamatan, #filter_desa').html('<option value="">Semua...</option>').prop('disabled', true);
                } else if(target === '#filter_kecamatan') {
                    $('#filter_desa').html('<option value="">Semua...</option>').prop('disabled', true);
                }

                if (code) {
                    $.post("{{ url('/') }}/" + routeName, {code: code, _token: '{{ csrf_token() }}'}, function(data) {
                        $(target).html('<option value="">' + placeholder + '</option>').prop('disabled', false);
                        $.each(data, function(key, val) {
                            $(target).append(`<option value="${val.code}">${val.name}</option>`);
                        });
                    });
                }
            });
        }

        setupCascading('#filter_provinsi', '#filter_kota', 'get-kota', 'Semua Kota');
        setupCascading('#filter_kota', '#filter_kecamatan', 'get-kecamatan', 'Semua Kecamatan');
        setupCascading('#filter_kecamatan', '#filter_desa', 'get-desa', 'Semua Desa');

        let oldProv = "{{ request('provinsi') }}";
        let oldKota = "{{ request('kota') }}";
        let oldKec = "{{ request('kecamatan') }}";
        let oldDesa = "{{ request('desa') }}";

        if (oldProv) {
            $('#filter_kota').html('<option value="">Memuat...</option>').prop('disabled', true);
            $.post("{{ url('/') }}/get-kota", {code: oldProv, _token: '{{ csrf_token() }}'}, function(data) {
                $('#filter_kota').html('<option value="">Semua Kota</option>').prop('disabled', false);
                $.each(data, function(key, val) {
                    let selected = (val.code == oldKota) ? 'selected' : '';
                    $('#filter_kota').append(`<option value="${val.code}" ${selected}>${val.name}</option>`);
                });

                if (oldKota) {
                    $('#filter_kecamatan').html('<option value="">Memuat...</option>').prop('disabled', true);
                    $.post("{{ url('/') }}/get-kecamatan", {code: oldKota, _token: '{{ csrf_token() }}'}, function(data) {
                        $('#filter_kecamatan').html('<option value="">Semua Kecamatan</option>').prop('disabled', false);
                        $.each(data, function(key, val) {
                            let selected = (val.code == oldKec) ? 'selected' : '';
                            $('#filter_kecamatan').append(`<option value="${val.code}" ${selected}>${val.name}</option>`);
                        });

                        if (oldKec) {
                            $('#filter_desa').html('<option value="">Memuat...</option>').prop('disabled', true);
                            $.post("{{ url('/') }}/get-desa", {code: oldKec, _token: '{{ csrf_token() }}'}, function(data) {
                                $('#filter_desa').html('<option value="">Semua Desa</option>').prop('disabled', false);
                                $.each(data, function(key, val) {
                                    let selected = (val.code == oldDesa) ? 'selected' : '';
                                    $('#filter_desa').append(`<option value="${val.code}" ${selected}>${val.name}</option>`);
                                });
                            });
                        }
                    });
                }
            });
        }
    });
</script>

<style>
    /* Hover Effect */
    .product-card {
        transition: all 0.3s ease;
    }

    .product-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
    }

    /* Zoom Image on Hover */
    .product-card:hover img {
        transform: scale(1.05);
    }

    .overflow-hidden img {
        transition: transform 0.5s ease;
    }
</style>
@endsection