@extends('layouts.app')

@section('title', 'Galeri Kegiatan Website')

@section('content')
<div class="pkbm-master-page mx-auto max-w-7xl space-y-5">
    <header class="pkbm-dashboard__heading">
        <div>
            <p class="pkbm-dashboard__breadcrumb"><span>Manajemen Website</span><i class="bi bi-chevron-right" aria-hidden="true"></i>Galeri Kegiatan</p>
            <h1 class="pkbm-dashboard__title">Galeri Kegiatan</h1>
            <p class="pkbm-dashboard__subtitle">Dokumentasi visual aktivitas belajar mengajar, ekstrakurikuler, dan fasilitas PKBM.</p>
        </div>
    </header>

    @include('pkbm.website.partials.navigation', ['menus' => $menus])

    @if (session('success') || session('status'))
        <div role="status" class="settings-notice settings-notice--success">
            <i class="bi bi-check-circle-fill" aria-hidden="true"></i>
            <span>{{ session('success') ?? session('status') }}</span>
        </div>
    @endif

    @if (session('error'))
        <div role="alert" class="settings-notice settings-notice--error">
            <i class="bi bi-exclamation-circle-fill" aria-hidden="true"></i>
            <span>{{ session('error') }}</span>
        </div>
    @endif

    @if ($errors->any())
        <div role="alert" class="settings-notice settings-notice--error">
            <i class="bi bi-exclamation-circle-fill" aria-hidden="true"></i>
            <div>
                <p class="font-semibold">Terjadi kesalahan validasi:</p>
                <ul class="mt-1 list-inside list-disc text-sm">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        </div>
    @endif

    <!-- Statistik -->
    <div class="grid gap-4 sm:grid-cols-2">
        <div class="sp-card flex items-center gap-4 p-4">
            <span class="flex size-12 shrink-0 items-center justify-center rounded-xl bg-blue-100 text-xl text-blue-700">
                <i class="bi bi-camera" aria-hidden="true"></i>
            </span>
            <div>
                <span class="block text-xs font-semibold uppercase tracking-wider text-slate-500">Total Foto Dokumentasi</span>
                <span class="text-2xl font-bold text-slate-800">{{ number_format($totalFoto, 0, ',', '.') }}</span>
            </div>
        </div>
        <div class="sp-card flex items-center gap-4 p-4">
            <span class="flex size-12 shrink-0 items-center justify-center rounded-xl bg-purple-100 text-xl text-purple-700">
                <i class="bi bi-tag" aria-hidden="true"></i>
            </span>
            <div>
                <span class="block text-xs font-semibold uppercase tracking-wider text-slate-500">Kategori Terbanyak</span>
                <span class="text-2xl font-bold text-slate-800 truncate">{{ $topCategory }}</span>
            </div>
        </div>
    </div>

    @php
        $galeriIcons = [
            'Kegiatan Pembelajaran' => 'bi-book',
            'Ekstrakurikuler'       => 'bi-trophy',
            'Kegiatan Luar Kelas'   => 'bi-compass',
            'Kegiatan PKBM'         => 'bi-building',
            'Kegiatan Tutor'        => 'bi-person-workspace',
        ];
    @endphp

    <style>
        .galeri-cat-pill {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.45rem 1rem;
            font-size: 0.8125rem;
            font-weight: 500;
            line-height: 1.25rem;
            border-radius: 9999px;
            border: 1px solid #d1d5db;
            background-color: #ffffff;
            color: #475569 !important;
            text-decoration: none !important;
            transition: all 160ms ease-in-out;
            box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.04);
            white-space: nowrap;
        }
        .galeri-cat-pill:hover {
            background-color: #f1f5f9;
            border-color: #94a3b8;
            color: #0f172a !important;
            text-decoration: none !important;
            transform: translateY(-1px);
            box-shadow: 0 2px 4px 0 rgb(0 0 0 / 0.08);
        }
        .galeri-cat-pill--active {
            background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%) !important;
            border-color: #1d4ed8 !important;
            color: #ffffff !important;
            font-weight: 600;
            box-shadow: 0 4px 8px -1px rgb(37 99 235 / 0.3) !important;
        }
        .galeri-cat-pill--active:hover {
            background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%) !important;
            border-color: #1e40af !important;
            color: #ffffff !important;
            text-decoration: none !important;
            transform: translateY(-1px);
        }
        .galeri-cat-pill--active i {
            color: #ffffff !important;
        }
        .galeri-search-input {
            padding-left: 3rem !important;
            padding-right: 1.25rem !important;
            height: 2.75rem;
            font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
        }
        .galeri-grid-card {
            font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif !important;
        }
        .galeri-grid-card__title {
            font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif !important;
            font-size: 0.96rem !important;
            font-weight: 700 !important;
            color: #103c70 !important;
            letter-spacing: -0.015em !important;
            line-height: 1.35 !important;
            margin: 0 !important;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            transition: color 140ms ease;
        }
        .galeri-grid-card:hover .galeri-grid-card__title {
            color: #1d4ed8 !important;
        }
    </style>

    <!-- Filter & Aksi Bar -->
    <div class="sp-card p-4 space-y-4">
        <div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
            <!-- Filter Kategori Pills Modern -->
            <div class="flex flex-wrap items-center gap-2 overflow-x-auto pb-1">
                <a href="{{ route('pkbm.website.galeri', array_merge(request()->query(), ['kategori' => ''])) }}"
                   class="galeri-cat-pill {{ empty($kategori) || $kategori === 'all' ? 'galeri-cat-pill--active' : '' }}">
                    <i class="bi bi-grid-fill text-[11px]" aria-hidden="true"></i>
                    <span>Semua Kategori</span>
                </a>
                @foreach ($categories as $cat)
                    <a href="{{ route('pkbm.website.galeri', array_merge(request()->query(), ['kategori' => $cat])) }}"
                       class="galeri-cat-pill {{ $kategori === $cat ? 'galeri-cat-pill--active' : '' }}">
                        <i class="bi {{ $galeriIcons[$cat] ?? 'bi-tag' }} text-[12px]" aria-hidden="true"></i>
                        <span>{{ $cat }}</span>
                    </a>
                @endforeach
            </div>

            <!-- Tombol Aksi & Mode Tampilan -->
            <div class="flex items-center gap-2 shrink-0">
                <!-- Toggle View Mode -->
                <div class="inline-flex rounded-lg border border-slate-200 bg-slate-100 p-0.5 text-xs">
                    <a href="{{ route('pkbm.website.galeri', array_merge(request()->query(), ['view' => 'grid'])) }}"
                       class="rounded-md px-2.5 py-1.5 font-medium transition-colors !no-underline {{ $view !== 'table' ? 'bg-white text-blue-700 shadow-sm' : 'text-slate-600 hover:text-slate-900' }}"
                       title="Tampilan Grid">
                        <i class="bi bi-grid-3x3-gap" aria-hidden="true"></i>
                    </a>
                    <a href="{{ route('pkbm.website.galeri', array_merge(request()->query(), ['view' => 'table'])) }}"
                       class="rounded-md px-2.5 py-1.5 font-medium transition-colors !no-underline {{ $view === 'table' ? 'bg-white text-blue-700 shadow-sm' : 'text-slate-600 hover:text-slate-900' }}"
                       title="Tampilan Tabel">
                        <i class="bi bi-table" aria-hidden="true"></i>
                    </a>
                </div>

                <button type="button" data-open-create class="sp-btn-primary inline-flex items-center gap-2">
                    <i class="bi bi-plus-lg" aria-hidden="true"></i>
                    <span>Tambah Foto</span>
                </button>
            </div>
        </div>

        <!-- Pencarian Bersih (Tanpa Teks Menumpuk) -->
        <form method="GET" action="{{ route('pkbm.website.galeri') }}" class="flex flex-col sm:flex-row items-center gap-2.5 pt-1 border-t border-slate-100">
            @if (!empty($kategori) && $kategori !== 'all')
                <input type="hidden" name="kategori" value="{{ $kategori }}">
            @endif
            @if ($view === 'table')
                <input type="hidden" name="view" value="table">
            @endif

            <div class="relative flex-1 w-full">
                <span class="pointer-events-none absolute inset-y-0 left-4 flex items-center text-slate-400" aria-hidden="true">
                    <i class="bi bi-search text-sm"></i>
                </span>
                <input type="text"
                       name="q"
                       value="{{ $search }}"
                       placeholder="Cari foto dokumentasi berdasarkan judul kegiatan..."
                       class="sp-form-control w-full galeri-search-input text-sm">
            </div>

            <div class="flex items-center gap-2 w-full sm:w-auto shrink-0">
                <button type="submit" class="sp-btn-secondary w-full sm:w-auto inline-flex items-center justify-center gap-1.5 text-sm px-4">
                    <i class="bi bi-search" aria-hidden="true"></i> Cari
                </button>
                @if ($search !== '' || (!empty($kategori) && $kategori !== 'all'))
                    <a href="{{ route('pkbm.website.galeri', ['view' => $view]) }}" class="sp-btn-secondary w-full sm:w-auto inline-flex items-center justify-center gap-1.5 text-sm text-slate-500 hover:text-rose-600 !no-underline">
                        <i class="bi bi-x-circle" aria-hidden="true"></i> Reset
                    </a>
                @endif
            </div>
        </form>
    </div>

    <!-- Konten Galeri -->
    @if ($view === 'table')
        <!-- Tabel Galeri -->
        <section class="sp-card overflow-hidden">
            <div class="sp-card-header">
                <h2 class="sp-section-title">Daftar Dokumentasi Foto</h2>
                <p class="mt-1 text-xs text-slate-500">Tampilan data tabular koleksi dokumentasi foto PKBM.</p>
            </div>
            <div class="overflow-x-auto">
                <table class="sp-table min-w-[50rem]">
                    <thead>
                        <tr>
                            <th class="w-14 text-center">No.</th>
                            <th class="w-24">Foto</th>
                            <th>Judul Kegiatan</th>
                            <th>Kategori</th>
                            <th>Tanggal Upload</th>
                            <th class="text-right w-32">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($galeri as $index => $item)
                            <tr>
                                <td class="text-center">{{ $index + 1 }}</td>
                                <td>
                                    @if ($item->foto && file_exists(public_path('uploads/galeri/' . $item->foto)))
                                        <a href="{{ asset('uploads/galeri/' . $item->foto) }}" target="_blank" rel="noopener">
                                            <img src="{{ asset('uploads/galeri/' . $item->foto) }}" alt="{{ $item->judul }}" class="size-14 rounded-xl object-cover border border-slate-200 shadow-sm hover:opacity-90 transition-opacity">
                                        </a>
                                    @else
                                        <div class="size-14 rounded-xl bg-slate-100 border border-slate-200 flex items-center justify-center text-slate-400">
                                            <i class="bi bi-image text-xl" aria-hidden="true"></i>
                                        </div>
                                    @endif
                                </td>
                                <td>
                                    <span class="sp-section-title !text-sm block leading-snug">{{ $item->judul }}</span>
                                </td>
                                <td>
                                    <span class="inline-flex items-center rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold text-slate-700 border border-slate-200">
                                        {{ $item->kategori }}
                                    </span>
                                </td>
                                <td class="text-slate-600 text-xs font-medium">
                                    {{ \Carbon\Carbon::parse($item->created_at)->translatedFormat('d M Y') }}
                                </td>
                                <td class="text-right">
                                    <div class="inline-flex items-center gap-1 justify-end">
                                        @if ($item->foto && file_exists(public_path('uploads/galeri/' . $item->foto)))
                                            <a href="{{ asset('uploads/galeri/' . $item->foto) }}" target="_blank" rel="noopener" class="sp-btn-secondary px-2.5 py-1 text-xs" title="Lihat Foto Ukuran Penuh">
                                                <i class="bi bi-eye" aria-hidden="true"></i>
                                            </a>
                                        @endif
                                        <form method="POST" action="{{ route('pkbm.website.galeri.destroy', $item->id) }}" class="inline" onsubmit="return confirm('Hapus foto kegiatan ini?');">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="sp-btn-secondary px-2.5 py-1 text-xs text-rose-600 hover:border-rose-200 hover:bg-rose-50" title="Hapus Foto">
                                                <i class="bi bi-trash" aria-hidden="true"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="px-4 py-8 text-center text-slate-500">
                                    <i class="bi bi-images text-3xl text-slate-300 block mb-2" aria-hidden="true"></i>
                                    Belum ada dokumentasi foto yang diunggah.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </section>
    @else
        <!-- Grid View Galeri Modern -->
        <div class="grid gap-5 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
            @forelse ($galeri as $item)
                <div class="sp-card galeri-grid-card group relative flex flex-col overflow-hidden rounded-2xl border border-slate-200/90 bg-white shadow-sm hover:shadow-md transition-all duration-200">
                    <!-- Foto Thumbnail -->
                    <div class="relative aspect-[4/3] w-full overflow-hidden bg-slate-100">
                        @if ($item->foto && file_exists(public_path('uploads/galeri/' . $item->foto)))
                            <img src="{{ asset('uploads/galeri/' . $item->foto) }}" alt="{{ $item->judul }}" class="size-full object-cover transition-transform duration-300 group-hover:scale-105">
                        @else
                            <div class="size-full flex items-center justify-center text-slate-400">
                                <i class="bi bi-image text-3xl" aria-hidden="true"></i>
                            </div>
                        @endif

                        <!-- Category Floating Badge -->
                        <span class="absolute top-2.5 left-2.5 inline-flex items-center gap-1.5 rounded-full bg-slate-900/75 backdrop-blur-md px-3 py-1 text-[11px] font-semibold text-white shadow-sm">
                            <i class="bi bi-tag-fill text-[9px] text-blue-300" aria-hidden="true"></i>
                            {{ $item->kategori }}
                        </span>
                    </div>

                    <!-- Card Body -->
                    <div class="flex flex-1 flex-col justify-between p-4 space-y-3">
                        <div>
                            <h2 class="sp-section-title galeri-grid-card__title" title="{{ $item->judul }}">
                                {{ $item->judul }}
                            </h2>
                            <div class="mt-2 flex items-center gap-1.5 text-xs text-slate-500 font-medium">
                                <i class="bi bi-calendar3 text-slate-400 text-[11px]" aria-hidden="true"></i>
                                <span>{{ \Carbon\Carbon::parse($item->created_at)->translatedFormat('d M Y') }}</span>
                            </div>
                        </div>

                        <!-- Card Footer Actions -->
                        <div class="pt-2 border-t border-slate-100 flex items-center justify-between gap-2">
                            @if ($item->foto && file_exists(public_path('uploads/galeri/' . $item->foto)))
                                <a href="{{ asset('uploads/galeri/' . $item->foto) }}" target="_blank" rel="noopener" class="sp-btn-secondary px-2.5 py-1 text-xs text-slate-600 hover:text-blue-700 hover:border-blue-200">
                                    <i class="bi bi-arrows-fullscreen text-[10px]" aria-hidden="true"></i>Lihat
                                </a>
                            @else
                                <span></span>
                            @endif

                            <form method="POST" action="{{ route('pkbm.website.galeri.destroy', $item->id) }}" onsubmit="return confirm('Hapus foto ini dari galeri?');" class="inline">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="sp-btn-secondary px-2.5 py-1 text-xs text-rose-600 hover:border-rose-200 hover:bg-rose-50" title="Hapus Foto">
                                    <i class="bi bi-trash text-[10px]" aria-hidden="true"></i>Hapus
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            @empty
                <div class="sm:col-span-2 md:col-span-3 lg:col-span-4 sp-card p-12 text-center text-slate-500">
                    <i class="bi bi-images text-4xl text-slate-300 block mb-2" aria-hidden="true"></i>
                    Belum ada dokumentasi foto kegiatan. Klik tombol <strong>Tambah Foto</strong> untuk mulai mengunggah.
                </div>
            @endforelse
        </div>
    @endif
</div>

<!-- Modal Tambah Galeri (Multi-Upload dengan Desain Tailwind) -->
<dialog id="modal-create-galeri" class="pkbm-master-dialog pkbm-class-form-dialog pkbm-spp-payment-dialog" aria-labelledby="modal-create-galeri-title">
    <form method="POST" action="{{ route('pkbm.website.galeri.store') }}" enctype="multipart/form-data">
        @csrf
        <div class="pkbm-class-form-dialog__header flex items-start justify-between gap-3 border-b border-slate-100 p-5">
            <div class="flex items-start gap-3">
                <span class="pkbm-class-form-dialog__icon" aria-hidden="true"><i class="bi bi-camera"></i></span>
                <div>
                    <h2 id="modal-create-galeri-title" class="sp-section-title">Tambah Foto Galeri</h2>
                    <p class="mt-1 text-xs text-slate-500">Unggah satu atau beberapa foto dokumentasi sekaligus ke dalam kategori yang sama.</p>
                </div>
            </div>
            <button type="button" data-close-dialog class="pkbm-class-form-dialog__close grid size-8 shrink-0 place-items-center rounded-lg text-slate-500" aria-label="Tutup"><i class="bi bi-x-lg" aria-hidden="true"></i></button>
        </div>

        <div class="grid gap-4 p-5 sm:grid-cols-2">
            <div class="sm:col-span-2">
                <label for="create-judul" class="sp-form-label">Judul / Keterangan Kegiatan <span class="text-rose-500">*</span></label>
                <input id="create-judul" name="judul" type="text" required maxlength="255" placeholder="Contoh: Praktik Keterampilan Menjahit Paket C" class="sp-form-control mt-1 px-3 py-2 text-sm">
            </div>

            <div class="sm:col-span-2">
                <label for="create-kategori" class="sp-form-label">Kategori Kegiatan <span class="text-rose-500">*</span></label>
                <select id="create-kategori" name="kategori" required class="sp-form-control mt-1 px-3 py-2 text-sm">
                    <option value="">-- Pilih Kategori --</option>
                    @foreach ($categories as $cat)
                        <option value="{{ $cat }}">{{ $cat }}</option>
                    @endforeach
                </select>
            </div>

            <!-- Upload Area dengan Desain Tailwind -->
            <div class="sm:col-span-2">
                <label class="sp-form-label">Pilih Foto Dokumentasi <span class="text-rose-500">*</span></label>
                <div id="dropzone-box" class="relative mt-1 flex flex-col items-center justify-center rounded-2xl border-2 border-dashed border-blue-200 bg-blue-50/40 p-6 text-center transition-all hover:border-blue-400 hover:bg-blue-50/70">
                    <div class="flex size-14 items-center justify-center rounded-2xl bg-blue-100 text-2xl text-blue-600 mb-3 shadow-sm">
                        <i class="bi bi-cloud-arrow-up" aria-hidden="true"></i>
                    </div>

                    <p class="text-sm font-bold text-slate-800">
                        <span class="text-blue-600 underline underline-offset-2">Klik untuk memilih foto</span> atau seret file ke sini
                    </p>
                    <p class="text-xs text-slate-500 mt-1">Bisa memilih lebih dari 1 file sekaligus (Tahan tombol <kbd class="px-1.5 py-0.5 rounded bg-slate-100 border text-[10px] font-mono">Ctrl</kbd> / <kbd class="px-1.5 py-0.5 rounded bg-slate-100 border text-[10px] font-mono">Shift</kbd>)</p>
                    <p class="text-[11px] text-slate-400 mt-0.5">Format: JPG, JPEG, PNG, WEBP · Maks. 5 MB per foto</p>

                    <!-- Native File Input Overlaid -->
                    <input id="create-foto" name="foto[]" type="file" accept="image/jpeg,image/png,image/jpg,image/webp" multiple required class="absolute inset-0 size-full cursor-pointer opacity-0">

                    <!-- Selected Files Preview Box -->
                    <div id="selected-files-preview" class="mt-4 hidden w-full rounded-xl bg-white p-3.5 border border-blue-200/80 text-left shadow-sm">
                        <div class="flex items-center justify-between text-xs font-bold text-blue-900 border-b border-slate-100 pb-2 mb-2">
                            <span class="inline-flex items-center gap-1.5 text-blue-700">
                                <i class="bi bi-images" aria-hidden="true"></i>
                                <span id="selected-count-text">0 foto dipilih</span>
                            </span>
                            <span class="text-emerald-700 bg-emerald-50 border border-emerald-200 rounded-full px-2 py-0.5 text-[11px] font-semibold">Siap diunggah</span>
                        </div>
                        <ul id="selected-files-list" class="space-y-1.5 max-h-32 overflow-y-auto text-xs text-slate-700 divide-y divide-slate-50"></ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="pkbm-class-form-dialog__footer flex justify-end gap-2 border-t border-slate-100 p-5">
            <button type="button" data-close-dialog class="sp-btn-secondary">Batal</button>
            <button type="submit" class="sp-btn-primary">
                <i class="bi bi-upload" aria-hidden="true"></i>Unggah Foto Kegiatan
            </button>
        </div>
    </form>
</dialog>

@push('scripts')
<script>
(() => {
    const createModal = document.getElementById('modal-create-galeri');
    const fileInput = document.getElementById('create-foto');
    const previewBox = document.getElementById('selected-files-preview');
    const countText = document.getElementById('selected-count-text');
    const filesList = document.getElementById('selected-files-list');

    // Handle file input changes for interactive preview
    fileInput?.addEventListener('change', (e) => {
        const files = Array.from(e.target.files || []);
        if (files.length > 0) {
            previewBox?.classList.remove('hidden');
            if (countText) {
                countText.textContent = `${files.length} foto dipilih`;
            }
            if (filesList) {
                filesList.innerHTML = files.map((file, idx) => `
                    <li class="pt-1 flex items-center justify-between gap-2">
                        <span class="truncate font-medium flex items-center gap-1.5">
                            <i class="bi bi-file-earmark-image text-blue-500"></i>${file.name}
                        </span>
                        <span class="text-slate-400 text-[11px] shrink-0 font-mono">${(file.size / (1024 * 1024)).toFixed(2)} MB</span>
                    </li>
                `).join('');
            }
        } else {
            previewBox?.classList.add('hidden');
        }
    });

    document.querySelector('[data-open-create]')?.addEventListener('click', () => {
        createModal?.showModal();
    });

    document.querySelectorAll('[data-close-dialog]').forEach((btn) => {
        btn.addEventListener('click', () => {
            btn.closest('dialog')?.close();
        });
    });

    createModal?.addEventListener('click', (event) => {
        if (event.target === createModal) {
            createModal.close();
        }
    });
})();
</script>
@endpush
@endsection