@extends('layouts.app')

@section('content')
<style>
    /* Custom blue shadow for modern hover effect on product cards */
    .product-card-hover:hover {
        box-shadow: 0 10px 25px -3px rgba(59, 130, 246, 0.4), 0 4px 10px -2px rgba(59, 130, 246, 0.2);
    }

    /* Animation for the favorite button */
    .favorite-toggle.favorited {
        animation: favorite-pulse 0.5s ease-out;
    }

    @keyframes favorite-pulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.2); }
        100% { transform: scale(1); }
    }

    /* Modern checkbox style */
    input[type="checkbox"] {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        width: 1.25rem; /* 20px */
        height: 1.25rem; /* 20px */
        border: 2px solid #D1D5DB; /* gray-300 */
        border-radius: 0.375rem; /* rounded-md */
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease-in-out;
        vertical-align: middle; /* Align with text */
    }

    input[type="checkbox"]:checked {
        background-color: #3B82F6; /* blue-500 */
        border-color: #3B82F6; /* blue-500 */
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="white"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>');
        background-size: 80%;
        background-position: center;
        background-repeat: no-repeat;
    }

    input[type="checkbox"]:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5); /* blue-500 with opacity */
    }

    .dark input[type="checkbox"] {
        border-color: #4B5563; /* gray-600 */
        background-color: #1F2937; /* gray-800 */
    }

    .dark input[type="checkbox"]:checked {
        background-color: #60A5FA; /* blue-400 */
        border-color: #60A5FA; /* blue-400 */
    }

    .dark input[type="checkbox"]:focus {
        box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.5); /* blue-400 with opacity */
    }

    /* Flash message animation */
    .flash-message {
        animation: fadeOut 0.5s ease-out 3s forwards; /* Fade out after 3 seconds */
    }

    @keyframes fadeOut {
        from { opacity: 1; }
        to { opacity: 0; display: none; }
    }
</style>

<div class="container mx-auto px-4 py-12">
    {{-- 🔔 Flash Message (Modernized) --}}
    @if(session('message'))
        <div class="flash-message mb-8 px-6 py-4 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-lg shadow-md flex items-center justify-between" role="alert">
            <div class="flex items-center">
                <svg class="w-6 h-6 mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
                <p class="font-medium">{{ session('message') }}</p>
            </div>
            <button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-blue-100 text-blue-500 rounded-lg p-1.5 hover:bg-blue-200 inline-flex h-8 w-8 dark:bg-blue-900 dark:text-blue-300 dark:hover:bg-blue-800" data-dismiss="alert" aria-label="Close">
                <span class="sr-only">Tutup</span>
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
            </button>
        </div>
    @endif

    {{-- 🔍 Filter Kategori & Pencarian (Modernized) --}}
    <form method="GET" class="mb-10 flex flex-col md:flex-row gap-4 items-center justify-between bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg">
        <div class="flex flex-col md:flex-row gap-4 w-full md:w-auto">
            {{-- Kategori --}}
            <select name="category" onchange="this.form.submit()" aria-label="Filter kategori"
                    class="block w-full md:w-auto px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100
                           focus:ring-blue-500 focus:border-blue-500 transition duration-150 ease-in-out shadow-sm">
                <option value="">Semua Kategori</option>
                @foreach ($categories as $category)
                    <option value="{{ $category->id }}" @selected(request('category') == $category->id)>
                        {{ $category->name }}
                    </option>
                @endforeach
            </select>

            {{-- Pencarian --}}
            <div class="relative w-full md:w-auto flex-grow">
                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                    <svg class="w-5 h-5 text-gray-400 dark:text-gray-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg>
                </div>
                <input type="text" name="search" placeholder="Cari katalog..." aria-label="Kolom pencarian"
                       value="{{ request('search') }}"
                       class="block w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100
                              focus:ring-blue-500 focus:border-blue-500 transition duration-150 ease-in-out shadow-sm">
            </div>

            {{-- Tombol Reset/Cari (opsional, bisa dihilangkan jika onchange sudah cukup) --}}
            <button type="submit" class="w-full md:w-auto px-5 py-2 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg shadow-md
                                         focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition duration-150 ease-in-out">
                Terapkan Filter
            </button>
        </div>

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

    {{-- 🖼️ Katalog Grid (Disesuaikan) --}}
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8 justify-center">
        @forelse ($catalogs as $catalog)
            @php
                $fallback = asset('storage/defaults/catalog-default.png');
                $imgPath = $catalog->image_path ? asset('storage/' . $catalog->image_path) : $fallback;
                $fav = auth()->check() ? $catalog->allFavorites->firstWhere('user_id', auth()->id()) : null;
                $isFavorited = $fav && $fav->status;
                // Pastikan $catalog memiliki atribut 'favorites_count' dari controller (menggunakan withCount)
                $totalFavorites = $catalog->favorites_count ?? 0;
            @endphp
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-5 flex flex-col justify-between h-full
                        transition-all duration-300 ease-in-out transform hover:-translate-y-1 product-card-hover relative">

                {{-- Badge Jumlah Like/Favorit --}}
                <div class="absolute top-4 left-4 z-10 px-3 py-1 bg-red-500 text-white text-sm font-semibold rounded-full shadow-md
                            flex items-center space-x-1">
                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
                    <span class="favorite-count-value">{{ $totalFavorites }}</span> {{-- Tambahkan class untuk JS --}}
                </div>

                {{-- Link ke Detail Produk --}}
                <a href="{{ route('catalog.detail', $catalog->slug) }}" class="block">
                    <img src="{{ $imgPath }}"
                         onerror="this.onerror=null;this.src='{{ $fallback }}';"
                         alt="{{ $catalog->name }}"
                         class="w-full h-48 object-cover rounded-lg mb-4 shadow-sm">
                    <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">{{ $catalog->name }}</h3>
                    <p class="text-sm text-blue-700 dark:text-blue-400 mb-1 flex items-center">
                        <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 4a1 1 0 011-1h12a1 1 0 011 1v12a1 1 0 01-1 1H4a1 1 0 01-1-1V4zm2 2a1 1 0 00-1 1v6a1 1 0 102 0V7a1 1 0 00-1-1zm5 0a1 1 0 00-1 1v6a1 1 0 102 0V7a1 1 0 00-1-1zm5 0a1 1 0 00-1 1v6a1 1 0 102 0V7a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg>
                        {{ $catalog->category->name ?? 'Tanpa Kategori' }}
                    </p>
                    <p class="text-sm text-gray-600 dark:text-gray-300 mb-3 line-clamp-2">
                        {{ Str::limit(strip_tags($catalog->description), 80) }}
                    </p>
                    <div class="text-2xl text-blue-600 dark:text-blue-400 font-extrabold mb-4">
                        Rp {{ number_format($catalog->price, 0, ',', '.') }}
                    </div>
                </a>

                {{-- Toggle Favorit --}}
                <div class="absolute top-4 right-4">
                    @auth
                        <button
                            data-catalog-id="{{ $catalog->id }}"
                            class="favorite-toggle text-3xl transition-colors duration-200
                                   {{ $isFavorited ? 'text-red-500 favorited' : 'text-gray-400 hover:text-red-500' }}"
                            title="Favoritkan Produk" aria-label="Favoritkan Produk">
                            ♥
                        </button>
                    @else
                        <a href="{{ route('login') }}"
                           class="text-3xl text-gray-400 hover:text-red-500 transition-colors duration-200"
                           title="Login untuk favoritkan" aria-label="Login untuk favoritkan">
                            ♥
                        </a>
                    @endauth
                </div>

                {{-- Tambah ke Keranjang --}}
                <div class="flex items-center justify-between mt-auto pt-4 border-t border-gray-100 dark:border-gray-700">
                    @auth
                        <form method="POST" action="{{ route('cart.add', $catalog->id) }}" class="flex items-center gap-3">
                            @csrf
                            <input type="number" name="quantity" value="1" min="1" aria-label="Jumlah produk"
                                   class="w-20 px-3 py-2 text-sm border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500
                                          dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400">
                            <button type="submit"
                                    class="flex-shrink-0 px-4 py-2 bg-blue-600 text-white rounded-md
                                           hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
                                           transition ease-in-out duration-150 text-base">
                                Tambah ke Keranjang
                            </button>
                        </form>
                    @else
                        <div class="flex items-center gap-3">
                            <input type="number" disabled value="1" aria-label="Jumlah produk tidak bisa diubah tanpa login"
                                   class="w-20 px-3 py-2 text-sm border border-gray-300 rounded-md bg-gray-100 text-gray-500 cursor-not-allowed
                                          dark:bg-gray-700 dark:border-gray-600 dark:text-gray-400">
                            <a href="{{ route('login') }}"
                               class="flex-shrink-0 px-4 py-2 bg-blue-100 text-blue-700 rounded-md
                                      hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
                                      transition ease-in-out duration-150 text-base">
                                Login untuk Tambah
                            </a>
                        </div>
                    @endauth
                </div>
            </div>
        @empty
            <div class="col-span-full text-center py-10 text-gray-500 dark:text-gray-400 text-lg">
                <p>Maaf, tidak ada katalog yang ditemukan.</p>
                <p class="mt-2">Coba sesuaikan filter Anda atau cari produk lain!</p>
            </div>
        @endforelse
    </div>

    {{-- Pagination --}}
    <div class="mt-12 flex justify-center">
        {{ $catalogs->links() }}
    </div>
</div>

{{-- AJAX Toggle Favorit & Flash Message Script --}}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Favorite Toggle Logic
        document.querySelectorAll('.favorite-toggle').forEach(button => {
            button.addEventListener('click', function (e) {
                e.preventDefault();

                const catalogId = this.getAttribute('data-catalog-id');
                const csrf = '{{ csrf_token() }}';
                const el = this;
                // Temukan badge favorit yang terkait dengan kartu ini
                const parentCard = el.closest('.product-card-hover');
                // Target span di dalam badge untuk update jumlah
                const favoriteCountSpan = parentCard ? parentCard.querySelector('.favorite-count-value') : null;


                fetch(`/catalog/${catalogId}/favorite`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': csrf
                    },
                    body: JSON.stringify({})
                })
                .then(res => {
                    if (res.status === 401) {
                        window.location.href = '{{ route("login") }}';
                        return;
                    }
                    if (!res.ok) {
                        throw new Error(`HTTP error! status: ${res.status}`);
                    }
                    return res.json();
                })
                .then(data => {
                    if (data.success) {
                        if (data.favorited) {
                            el.classList.add('text-red-500', 'favorited');
                            el.classList.remove('text-gray-400', 'hover:text-red-500');
                        } else {
                            el.classList.remove('text-red-500', 'favorited');
                            el.classList.add('text-gray-400', 'hover:text-red-500');
                        }

                        // Update jumlah favorit pada badge
                        if (favoriteCountSpan && data.favorites_count !== undefined) {
                            favoriteCountSpan.textContent = data.favorites_count;
                        }
                    }
                })
                .catch(err => {
                    console.error('Gagal toggle favorit:', err);
                    alert('Terjadi kesalahan saat mengubah status favorit. Mohon coba lagi.');
                });
            });
        });

        // Flash Message Dismissal (for the close button)
        const flashMessage = document.querySelector('.flash-message');
        if (flashMessage) {
            const dismissButton = flashMessage.querySelector('[data-dismiss="alert"]');
            if (dismissButton) {
                dismissButton.addEventListener('click', () => {
                    flashMessage.style.display = 'none';
                });
            }
        }
    });
</script>
@endsection