@extends('frontend.layout')

@section('content')
    <section class="bg-gradient-to-r from-blue-700 to-blue-800 text-white py-12 md:py-16">
        <div class="container mx-auto px-4">
            <div class="max-w-3xl">
                <h1 class="text-3xl md:text-4xl font-bold mb-4">Produk Jadi Laundry Siap Pakai</h1>
                <p class="text-xl">Produk berkualitas tinggi seperti Parfum, Handsoap, dan Sabun Cuci Piring untuk hasil maksimal.</p>
            </div>
        </div>
    </section>

    <section class="py-12">
        <div class="container mx-auto px-4">
            <form action="{{ route('fproduk-jadi') }}" method="GET" class="bg-white rounded-xl shadow-lg p-6 mb-8">
                <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
                    <div class="flex-grow">
                        <div class="relative">
                            <input type="text" name="search" value="{{ request('search') }}" placeholder="Cari parfum, sabun, dll..." class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                            <button type="submit" class="absolute right-3 top-3 text-gray-400">
                                <i class="fas fa-search"></i>
                            </button>
                        </div>
                    </div>
                    
                    <div class="flex gap-4">
                        <select name="kategori" onchange="this.form.submit()" class="px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                            <option value="">Semua Kategori</option>
                            @foreach($categories as $cat)
                                <option value="{{ $cat->slug }}" {{ request('kategori') == $cat->slug ? 'selected' : '' }}>
                                    {{ $cat->nama_produk }}
                                </option>
                            @endforeach
                        </select>
                        
                        @if(request('search') || request('kategori'))
                            <a href="{{ route('fproduk-jadi') }}" class="px-4 py-3 bg-red-100 text-red-600 rounded-lg flex items-center">
                                <i class="fas fa-times"></i>
                            </a>
                        @endif
                    </div>
                </div>
            </form>
            
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-12">
                @foreach($categories as $cat)
                <a href="{{ route('fproduk-jadi', ['kategori' => $cat->slug]) }}" class="bg-white rounded-xl shadow p-6 text-center hover:shadow-lg transition {{ request('kategori') == $cat->slug ? 'ring-2 ring-blue-500' : '' }}">
                    <div class="w-12 h-12 {{ $cat->warna ?? 'bg-blue-100' }} rounded-full flex items-center justify-center mx-auto mb-3">
                        <i class="{{ $cat->icon ?? 'fas fa-box' }} text-blue-800 text-xl"></i>
                    </div>
                    <h3 class="font-bold text-gray-800 text-sm">{{ $cat->nama_produk }}</h3>
                </a>
                @endforeach
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                @forelse($produks as $item)
                <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-100 hover:shadow-2xl transition-all">
                    <div class="relative h-56 bg-gray-100 flex items-center justify-center">
                        @if($item->gambar)
                            <img src="{{ asset('images/'.$item->gambar) }}" class="object-cover w-full h-full">
                        @else
                            <i class="fas fa-image text-gray-300 text-6xl"></i>
                        @endif
                        
                        @if($item->harga_diskon)
                            <span class="absolute top-4 left-4 bg-red-500 text-white px-3 py-1 rounded-full text-xs font-bold">Promo</span>
                        @endif
                    </div>
                    
                    <div class="p-6">
                        <span class="text-xs font-semibold text-blue-600 uppercase tracking-wider">
                            {{ $item->kategori->nama_produk ?? 'Produk' }}
                        </span>
                        <h3 class="text-xl font-bold text-gray-800 mt-1 mb-2 h-14 line-clamp-2">{{ $item->nama_produk }}</h3>
                        
                        <div class="flex items-center mb-4">
                            <div class="text-yellow-400 text-sm">
                                @for($i=1; $i<=5; $i++)
                                    <i class="fas fa-star {{ $i <= $item->rating ? '' : 'text-gray-200' }}"></i>
                                @endfor
                            </div>
                            <span class="text-gray-400 text-xs ml-2">({{ $item->total_ulasan ?? 0 }} Review)</span>
                        </div>
                        
                        <div class="flex justify-between items-center">
                            <div>
                                <p class="text-xl font-bold text-blue-800">Rp {{ number_format($item->harga, 0, ',', '.') }}</p>
                                @if($item->harga_diskon)
                                    <p class="text-sm text-gray-400 line-through">Rp {{ number_format($item->harga_diskon, 0, ',', '.') }}</p>
                                @endif
                            </div>
                            <a href="{{ route('fproduk-jadi.detail', $item->slug) }}" class="bg-blue-800 hover:bg-blue-900 text-white p-2 rounded-lg">
                                <i class="fas fa-arrow-right"></i>
                            </a>
                        </div>
                    </div>
                </div>
                @empty
                <div class="col-span-full text-center py-20 bg-gray-50 rounded-2xl">
                    <i class="fas fa-search text-gray-300 text-5xl mb-4"></i>
                    <p class="text-gray-500">Produk tidak ditemukan. Coba gunakan kata kunci lain.</p>
                </div>
                @endforelse
            </div>

            <div class="mt-12">
                {{ $produks->appends(request()->query())->links() }}
            </div>
        </div>
    </section>
@endsection