@extends('layouts.dashboard')

@section('content')
<div class="max-w-7xl mx-auto p-6 space-y-6">

    @if(session('success'))
        <div class="rounded-2xl bg-emerald-50 border border-emerald-200 text-emerald-800 px-5 py-4 shadow-sm">
            {{ session('success') }}
        </div>
    @endif

    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
        <div>
            <h1 class="text-3xl font-black flex items-center gap-2">
                Catalogs
            </h1>
            <p class="text-sm opacity-60 mt-1">
                Manage generated product catalogs.
            </p>
        </div>

        @if(auth()->user()->isAdmin())
            <a href="{{ route('catalogs.create') }}"
               class="inline-flex items-center justify-center gap-2 rounded-xl bg-indigo-600 px-5 py-3 text-sm font-bold text-white shadow hover:bg-indigo-700 transition">
                <span>➕</span>
                <span>New Catalog</span>
            </a>
        @endif
    </div>

    @if(isset($stats))
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
            <div class="rounded-2xl bg-white border p-5 shadow-sm">
                <div class="text-xs opacity-60">Catalogs</div>
                <div class="text-3xl font-black text-indigo-600">{{ number_format($stats['catalogs']) }}</div>
            </div>

            <div class="rounded-2xl bg-white border p-5 shadow-sm">
                <div class="text-xs opacity-60">PDF Files</div>
                <div class="text-3xl font-black text-emerald-600">{{ number_format($stats['pdfs']) }}</div>
            </div>

            <div class="rounded-2xl bg-white border p-5 shadow-sm">
                <div class="text-xs opacity-60">Products</div>
                <div class="text-3xl font-black text-blue-600">{{ number_format($stats['products']) }}</div>
            </div>

            <div class="rounded-2xl bg-white border p-5 shadow-sm">
                <div class="text-xs opacity-60">Van Catalogs</div>
                <div class="text-3xl font-black text-orange-600">{{ number_format($stats['van']) }}</div>
            </div>
        </div>
    @endif

    <form method="GET" class="rounded-2xl bg-white border border-gray-200 shadow-sm p-4">
        <div class="grid grid-cols-1 lg:grid-cols-4 gap-3">
            <input
                type="text"
                name="search"
                value="{{ request('search') }}"
                placeholder="Search catalog name, source, status..."
                class="input input-bordered lg:col-span-2">

            <select name="filter" class="select select-bordered">
                <option value="">All Catalogs</option>
                <option value="regular" {{ request('filter') == 'regular' ? 'selected' : '' }}>Regular Catalogs</option>
                <option value="clearance" {{ request('filter') == 'clearance' ? 'selected' : '' }}>Clearance Catalogs</option>
                <option value="van" {{ request('filter') == 'van' ? 'selected' : '' }}>Van Stock Catalogs</option>
            </select>

            <button class="btn btn-primary">
                🔍 Search
            </button>
        </div>
    </form>

    <form method="POST"
          action="{{ route('catalogs.bulk-delete') }}"
          onsubmit="return confirm('Delete selected catalogs?');"
          class="space-y-5">

        @csrf
        @method('DELETE')

        @if(auth()->user()->isAdmin())
        <div class="rounded-2xl bg-white border border-gray-200 shadow-sm p-4 flex flex-col md:flex-row md:items-center md:justify-between gap-3">

            <div>
                <div class="font-black text-lg">
                    Catalog Library
                </div>
                <div class="text-xs opacity-60">
                    Select multiple catalogs and delete test versions quickly.
                </div>
            </div>

            <div class="flex flex-wrap gap-2">
                <button type="button"
                        id="selectAllCatalogs"
                        class="inline-flex items-center gap-2 rounded-xl border border-gray-300 bg-white px-4 py-2 text-sm font-bold hover:bg-gray-50 transition">
                    ☑️ Select All
                </button>

                <button class="inline-flex items-center gap-2 rounded-xl bg-red-600 px-4 py-2 text-sm font-bold text-white shadow hover:bg-red-700 transition">
                    🗑 Delete Selected
                </button>
            </div>
        </div>
        @endif

        @if($catalogs->count())

            <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-5">

                @foreach($catalogs as $catalog)

                    <div class="group rounded-3xl bg-white border border-gray-200 shadow-sm hover:shadow-xl transition overflow-hidden">

                        <div class="relative bg-slate-100 border-b border-gray-200 h-48 overflow-hidden">
                            @if($catalog->thumbnail_file)
                                <img src="{{ asset('storage/' . $catalog->thumbnail_file) }}"
                                     class="w-full h-full object-cover"
                                     alt="Catalog thumbnail">
                            @else
                                <div class="w-full h-full flex items-center justify-center">
                                    <div class="text-center">
                                        <div class="text-5xl mb-2">📄</div>
                                        <div class="text-sm font-bold opacity-60">No Preview</div>
                                    </div>
                                </div>
                            @endif

                            @if(auth()->user()->isAdmin())
                                <div class="absolute top-3 left-3">
                                    <input type="checkbox"
                                           name="catalog_ids[]"
                                           value="{{ $catalog->id }}"
                                           class="checkbox checkbox-error catalog-checkbox bg-white">
                                </div>
                            @endif

                            <div class="absolute top-3 right-3">
                                <span class="rounded-full px-3 py-1 text-xs font-bold shadow
                                    {{ $catalog->status === 'pdf_generated'
                                        ? 'bg-emerald-100 text-emerald-700'
                                        : 'bg-indigo-100 text-indigo-700' }}">
                                    {{ str_replace('_', ' ', $catalog->status) }}
                                </span>
                            </div>
                        </div>

                        <div class="p-5 space-y-4">

                            <div>
                                <h2 class="font-black text-lg leading-tight">
                                    {{ $catalog->title }}
                                </h2>

                                <p class="text-xs opacity-60 mt-1">
                                    #{{ $catalog->id }} • {{ $catalog->created_at->format('d M Y h:i A') }}
                                </p>
                            </div>

                            <div class="grid grid-cols-3 gap-3">

                                <div class="rounded-2xl bg-gray-50 border border-gray-100 p-3">
                                    <div class="text-xs opacity-60">Products</div>
                                    <div class="text-xl font-black">
                                        {{ $catalog->items()->count() }}
                                    </div>
                                </div>

                                <div class="rounded-2xl bg-gray-50 border border-gray-100 p-3">
                                    <div class="text-xs opacity-60">PDF</div>
                                    <div class="text-xl font-black {{ $catalog->pdf_file ? 'text-emerald-600' : 'text-gray-400' }}">
                                        {{ $catalog->pdf_file ? 'Yes' : 'No' }}
                                    </div>
                                </div>

                                <div class="rounded-2xl bg-gray-50 border border-gray-100 p-3">
                                    <div class="text-xs opacity-60">Source</div>
                                    <div class="text-sm font-black truncate">
                                        @if(in_array($catalog->source_type, ['latest_regular', 'regular']))
                                            Regular
                                        @elseif(in_array($catalog->source_type, ['latest_clearance', 'clearance']))
                                            Clearance
                                        @elseif($catalog->source_type === 'van_stock')
                                            Van
                                        @else
                                            {{ $catalog->source_type ?: '-' }}
                                        @endif
                                    </div>
                                </div>

                            </div>

                            <div class="flex flex-wrap gap-2 pt-2">

                                <a href="{{ route('catalogs.show',$catalog) }}"
                                   class="inline-flex items-center justify-center gap-2 rounded-xl bg-slate-900 px-4 py-2 text-sm font-bold text-white hover:bg-slate-700 transition">
                                    👁 View
                                </a>

                                @if($catalog->pdf_file)
                                    <a href="{{ asset('storage/' . $catalog->pdf_file) . '?v=' . (file_exists(public_path('storage/'.$catalog->pdf_file)) ? filemtime(public_path('storage/'.$catalog->pdf_file)) : time()) }}"
                                       target="_blank"
                                       class="inline-flex items-center justify-center gap-2 rounded-xl bg-emerald-600 px-4 py-2 text-sm font-bold text-white hover:bg-emerald-700 transition">
                                        📄 PDF
                                    </a>
                                @endif

                                @if(auth()->user()->isAdmin())
                                    <form method="POST"
                                          action="{{ route('catalogs.destroy', $catalog) }}"
                                          onsubmit="return confirm('Delete this catalog?');">
                                        @csrf
                                        @method('DELETE')

                                        <button class="inline-flex items-center justify-center gap-2 rounded-xl border border-red-200 bg-red-50 px-4 py-2 text-sm font-bold text-red-700 hover:bg-red-100 transition">
                                            🗑 Delete
                                        </button>
                                    </form>
                                @endif

                            </div>

                        </div>

                    </div>

                @endforeach

            </div>

            <div>
                {{ $catalogs->links() }}
            </div>

        @else

            <div class="rounded-3xl bg-white border border-gray-200 shadow-sm p-12 text-center">
                <div class="text-5xl mb-4">📚</div>
                <h2 class="text-2xl font-black">No catalogs found</h2>
                <p class="opacity-60 mt-2">
                    Create your first product catalog.
                </p>

                @if(auth()->user()->isAdmin())
                    <a href="{{ route('catalogs.create') }}"
                       class="inline-flex items-center justify-center gap-2 rounded-xl bg-indigo-600 px-5 py-3 mt-6 text-sm font-bold text-white shadow hover:bg-indigo-700 transition">
                        ➕ New Catalog
                    </a>
                @endif
            </div>

        @endif

    </form>

</div>

<script>
    const selectAllCatalogs = document.getElementById('selectAllCatalogs');
    const catalogCheckboxes = document.querySelectorAll('.catalog-checkbox');

    if (selectAllCatalogs) {
        selectAllCatalogs.addEventListener('click', function () {
            const allChecked = [...catalogCheckboxes].every(cb => cb.checked);

            catalogCheckboxes.forEach(cb => {
                cb.checked = !allChecked;
            });
        });
    }
</script>
@endsection