@extends('layouts.app')

@section('content')
<div class="bg-gray-50 min-h-screen py-12">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">

        <!-- HEADER -->
        <div class="text-center max-w-3xl mx-auto mb-12">
            <span class="text-blue-600 font-bold tracking-wider uppercase text-sm">Etalase UMKM</span>
            <h1 class="text-4xl font-extrabold text-gray-900 mt-2 mb-4">Produk Binaan Kami</h1>
            <p class="text-gray-600 text-lg">
                Temukan berbagai produk unggulan hasil karya tangan-tangan terampil mitra binaan.
            </p>

            <!-- SEARCH -->
            <div class="mt-8 relative max-w-md mx-auto">
                <form action="{{ url()->current() }}" method="GET">
                    <input type="text" 
                        name="search"
                        value="{{ request('search') }}"
                        class="w-full pl-12 pr-12 py-3 rounded-full border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 shadow-sm" 
                        placeholder="Cari produk...">

                    <div class="absolute left-4 top-3.5 text-gray-400">
                        🔍
                    </div>

                    @if(request('search'))
                        <a href="{{ url()->current() }}" class="absolute right-4 top-3.5 text-gray-400 hover:text-red-500">
                            ✖
                        </a>
                    @endif
                </form>
            </div>
        </div>

        <!-- RESULT INFO -->
        @if(request('search'))
        <div class="mb-8 text-center text-gray-600">
            Hasil pencarian: 
            <span class="font-bold text-blue-600">"{{ request('search') }}"</span>
        </div>
        @endif

        <!-- GRID -->
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">

            @forelse($produks as $item)
            <div class="group bg-white rounded-2xl shadow-sm border overflow-hidden hover:shadow-xl hover:-translate-y-1 transition-all flex flex-col">

                <!-- IMAGE -->
                <div class="relative h-56 bg-gray-100 overflow-hidden">

                    <!-- BADGE -->
                    <div class="absolute top-3 left-3 z-10 flex gap-2">
                        {{-- <span class="bg-blue-600 text-white text-xs px-3 py-1 rounded-full">
                            Unggulan
                        </span> --}}

                        @if($item->status == 'tersedia')
                            <span style="background:#10b981;color:white;padding:4px 10px;border-radius:999px;font-size:11px;">
                                TERSEDIA
                            </span>
                        @else
                            <span style="background:#f43f5e;color:white;padding:4px 10px;border-radius:999px;font-size:11px;">
                                HABIS
                            </span>
                        @endif
                    </div>

                    <a href="{{ route('produk.show', $item->id) }}">
                        @if($item->gambar)
                            <img src="{{ asset('storage/' . $item->gambar) }}"
                                 class="w-full h-full object-cover transition duration-500
                                 {{ $item->status == 'habis' ? 'opacity-50 grayscale' : 'group-hover:scale-110' }}">
                        @else
                            <div class="flex items-center justify-center h-full text-gray-400">
                                No Image
                            </div>
                        @endif
                    </a>
                </div>

                <!-- CONTENT -->
                <div class="p-5 flex flex-col flex-grow">

                    <h3 class="text-lg font-bold text-gray-800 mb-2 line-clamp-1">
                        {{ $item->nama_produk }}
                    </h3>

                    <p class="text-sm text-gray-500 mb-4 line-clamp-2 flex-grow">
                        {{ $item->deskripsi }}
                    </p>

                    <div class="pt-4 border-t flex justify-between items-center">

                        <!-- PRICE -->
                        <span class="text-lg font-bold text-green-600">
                            Rp {{ number_format($item->harga, 0, ',', '.') }}
                        </span>

                        <!-- BUTTON -->
                        @if($item->status == 'tersedia')
                            <a href="{{ route('produk.show', $item->id) }}"
                               class="px-3 py-2 bg-blue-600 text-white text-xs rounded-lg hover:bg-blue-700">
                                Detail
                            </a>
                        @else
                            <span class="px-3 py-2 bg-gray-300 text-gray-600 text-xs rounded-lg">
                                Habis
                            </span>
                        @endif

                    </div>

                </div>
            </div>

            @empty
            <div class="col-span-full text-center py-16 bg-white rounded-2xl border-2 border-dashed">
                <p class="text-gray-500">Produk tidak ditemukan</p>
            </div>
            @endforelse

        </div>

        <!-- PAGINATION -->
        @if($produks->hasPages())
        <div class="mt-12 flex justify-center">
            {{ $produks->links() }}
        </div>
        @endif

    </div>
</div>
@endsection