@extends('layouts.frontend')

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

@section('content')
    <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>

    <div class="container pb-5">
        <div class="row g-4">

            <div class="col-lg-3">

                <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">Cari Produk</h6>
                        <form action="{{ route('shop') }}" method="GET">
                            @if(request('kategori')) <input type="hidden" name="kategori" value="{{ request('kategori') }}">
                            @endif
                            @if(request('sort')) <input type="hidden" name="sort" value="{{ request('sort') }}"> @endif

                            <div class="input-group">
                                <input type="search" name="search" class="form-control bg-light border-0"
                                    placeholder="Nama produk..." value="{{ request('search') }}">
                                <button class="btn btn-primary" type="submit">
                                    <i class="fas fa-search"></i>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

                <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

                            <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 Data 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>

                <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>

            <div class="col-lg-9">

                <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">
                            {{-- Pertahankan query lain saat sorting --}}
                            @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>

                <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">
                                    <!-- Stock Badge -->
                                    <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>

                                    <!-- Image -->
                                    <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-success mb-2">{{ $produk->kategori->nama_kategori ?? 'Umum' }}</span>
                                            <h6 class="fw-bold mb-2">{{ $produk->nama_produk }}</h6>
                                            <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-success mb-0">
                                                    Rp {{ number_format($produk->harga, 0, ',', '.') }}
                                                </h6>
                                            </div>
                                            <a href="{{ route('produk.detail', $produk->id) }}"
                                                class="btn btn-success btn-sm rounded-pill">
                                                <i class="fa fa-eye"></i> Detail
                                            </a>
                                        </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>

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

    <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);
        }

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