@extends('layouts.app')

@section('content')
<div class="container mx-auto px-4 py-10">
    {{-- 🔔 Flash Message --}}
    @if(session('message'))
        <div class="mb-6 px-4 py-2 bg-green-100 text-green-800 rounded shadow">
            {{ session('message') }}
        </div>
    @endif

    {{-- 🔍 Filter Kategori & Pencarian --}}
    <form method="GET" class="mb-6 flex flex-wrap gap-4 items-center justify-between">
        {{-- Kategori --}}
        <select name="category" onchange="this.form.submit()"
                class="border dark:border-gray-700 rounded px-4 py-2 bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-100">
            <option value="">Semua Kategori</option>
            @foreach ($categories as $category)
                <option value="{{ $category->id }}" @selected(request('category') == $category->id)>
                    {{ $category->name }}
                </option>
            @endforeach
        </select>

        {{-- Pencarian --}}
        <input type="text" name="search" placeholder="Cari katalog..."
               value="{{ request('search') }}"
               class="border dark:border-gray-700 rounded px-4 py-2 bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-100">

        {{-- Favorit --}}
        <label class="flex items-center gap-2">
            <input type="checkbox" name="favorite_only" value="1"
                   onchange="this.form.submit()" @checked(request('favorite_only'))>
            <span class="text-gray-800 dark:text-gray-100">Favorit Saya</span>
        </label>
    </form>

    {{-- 🖼️ Katalog Grid --}}
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-6">
        @foreach ($catalogs as $catalog)
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-4 flex flex-col justify-between h-full transition hover:scale-[1.02] hover:shadow-lg duration-300">

                {{-- Link ke Detail Produk --}}
                <a href="{{ route('catalog.detail', $catalog->slug) }}">
                    <img src="{{ $catalog->image_path ? asset('storage/' . $catalog->image_path) : asset('default.jpg') }}"
                         alt="{{ $catalog->name }}"
                         class="w-full h-40 object-cover rounded-lg mb-3">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-white">{{ $catalog->name }}</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">
                        {{ Str::limit(strip_tags($catalog->description), 60) }}
                    </p>
                    <div class="text-primary font-bold mb-3">Rp {{ number_format($catalog->price, 0, ',', '.') }}</div>
                </a>

                {{-- Aksi: Favorit + Keranjang --}}
                <div class="flex justify-between items-center mt-auto pt-3">
                    {{-- Toggle Favorit --}}
                    @auth
                        <form method="POST" action="{{ route('catalog.toggleFavorite', $catalog->id) }}">
                            @csrf
                            @php
                                $fav = $catalog->allFavorites->firstWhere('user_id', auth()->id());
                                $isFavorited = $fav && $fav->status;
                            @endphp
                            <button type="submit"
                                    class="w-10 h-6 rounded-full bg-gray-300 dark:bg-gray-600 relative transition-all duration-300">
                                <span class="absolute top-0.5 left-0.5 w-5 h-5 rounded-full transition-all duration-300
                                    {{ $isFavorited ? 'translate-x-4 bg-red-500' : 'bg-white' }}">
                                </span>
                            </button>
                        </form>
                    @endauth

                    {{-- Tambah ke Keranjang --}}
                    @auth
                        <form method="POST" action="{{ route('cart.add', $catalog->id) }}">
                            @csrf
                            <button type="submit" class="px-3 py-1 bg-blue-600 hover:bg-blue-700 text-white rounded text-sm">
                                Tambah
                            </button>
                        </form>
                    @endauth
                </div>
            </div>
        @endforeach
    </div>

    {{-- Pagination --}}
    <div class="mt-8">
        {{ $catalogs->links() }}
    </div>
</div>
@endsection