@extends('layouts.app')

@section('title', 'Papan Kreasi Siswa')

@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>Standar Isi</span><i class="bi bi-chevron-right" aria-hidden="true"></i>Papan Kreasi Siswa</p>
            <h1 class="pkbm-dashboard__title">Papan Kreasi Siswa</h1>
            <p class="pkbm-dashboard__subtitle">Apresiasi dan galeri virtual hasil karya kreatif, inovasi, serta proyek belajar siswa PKBM.</p>
        </div>
    </header>

    @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 Ringkasan -->
    <div class="grid gap-4 sm:grid-cols-3">
        <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-palette" aria-hidden="true"></i>
            </span>
            <div>
                <span class="block text-xs font-semibold uppercase tracking-wider text-slate-500">Total Karya Siswa</span>
                <span class="text-2xl font-bold text-slate-800">{{ number_format($stats['total'] ?? 0, 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-emerald-100 text-xl text-emerald-700">
                <i class="bi bi-globe2" aria-hidden="true"></i>
            </span>
            <div>
                <span class="block text-xs font-semibold uppercase tracking-wider text-slate-500">Dipublikasi ke Web</span>
                <span class="text-2xl font-bold text-slate-800">{{ number_format($stats['publik'] ?? 0, 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-slate-100 text-xl text-slate-700">
                <i class="bi bi-lock" aria-hidden="true"></i>
            </span>
            <div>
                <span class="block text-xs font-semibold uppercase tracking-wider text-slate-500">Arsip Internal</span>
                <span class="text-2xl font-bold text-slate-800">{{ number_format($stats['internal'] ?? 0, 0, ',', '.') }}</span>
            </div>
        </div>
    </div>

    @php
        $catIcons = [
            'Seni Lukis'       => 'bi-palette',
            'Kerajinan Tangan' => 'bi-scissors',
            'Puisi/Sastra'     => 'bi-journal-richtext',
            'Teknologi/IT'     => 'bi-laptop',
            'Lainnya'          => 'bi-stars',
        ];
    @endphp

    <style>
        .kreasi-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;
        }
        .kreasi-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);
        }
        .kreasi-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;
        }
        .kreasi-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);
        }
        .kreasi-cat-pill--active i {
            color: #ffffff !important;
        }
        .kreasi-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;
        }
        .kreasi-grid-card {
            font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif !important;
        }
        .kreasi-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;
        }
        .kreasi-grid-card:hover .kreasi-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.papan-kreasi.index', array_merge(request()->query(), ['kategori' => ''])) }}"
                   class="kreasi-cat-pill {{ empty($currentKat) ? 'kreasi-cat-pill--active' : '' }}">
                    <i class="bi bi-grid-fill text-[11px]" aria-hidden="true"></i>
                    <span>Semua</span>
                </a>
                @foreach ($kategoriList as $kat)
                    <a href="{{ route('pkbm.papan-kreasi.index', array_merge(request()->query(), ['kategori' => $kat])) }}"
                       class="kreasi-cat-pill {{ $currentKat === $kat ? 'kreasi-cat-pill--active' : '' }}">
                        <i class="bi {{ $catIcons[$kat] ?? 'bi-tag' }} text-[12px]" aria-hidden="true"></i>
                        <span>{{ $kat }}</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.papan-kreasi.index', array_merge(request()->query(), ['view' => 'grid'])) }}"
                       class="rounded-md px-2.5 py-1.5 font-medium transition-colors !no-underline {{ $viewMode !== 'table' ? 'bg-white text-blue-700 shadow-sm' : 'text-slate-600 hover:text-slate-900' }}"
                       title="Tampilan Galeri">
                        <i class="bi bi-grid-3x3-gap" aria-hidden="true"></i>
                    </a>
                    <a href="{{ route('pkbm.papan-kreasi.index', array_merge(request()->query(), ['view' => 'table'])) }}"
                       class="rounded-md px-2.5 py-1.5 font-medium transition-colors !no-underline {{ $viewMode === '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-dialog="modal-create-kreasi" class="sp-btn-primary inline-flex items-center gap-2">
                    <i class="bi bi-plus-lg" aria-hidden="true"></i>
                    <span>Tambah Karya</span>
                </button>
            </div>
        </div>

        <!-- Pencarian Bersih (Tanpa Teks Menumpuk) -->
        <form method="GET" action="{{ route('pkbm.papan-kreasi.index') }}" class="flex flex-col sm:flex-row items-center gap-2.5 pt-1 border-t border-slate-100">
            @if (!empty($currentKat))
                <input type="hidden" name="kategori" value="{{ $currentKat }}">
            @endif
            @if ($viewMode === '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 karya siswa berdasarkan judul, nama siswa, atau kelas..."
                       class="sp-form-control w-full kreasi-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 || $currentKat)
                    <a href="{{ route('pkbm.papan-kreasi.index') }}" 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>

    @if ($viewMode === 'table')
        <!-- Tabel View -->
        <section class="sp-card overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full border-collapse text-left text-sm text-slate-700">
                    <thead class="border-b border-slate-200 bg-slate-50 text-xs font-semibold uppercase text-slate-600">
                        <tr>
                            <th scope="col" class="px-4 py-3 w-12 text-center">No</th>
                            <th scope="col" class="px-4 py-3 w-28">Karya</th>
                            <th scope="col" class="px-4 py-3">Judul & Kreator</th>
                            <th scope="col" class="px-4 py-3">Kelas & Wali Kelas</th>
                            <th scope="col" class="px-4 py-3">Kategori</th>
                            <th scope="col" class="px-4 py-3">Publikasi</th>
                            <th scope="col" class="px-4 py-3 text-right">Aksi</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100">
                        @forelse ($items as $idx => $item)
                            <tr class="hover:bg-slate-50/75 transition-colors">
                                <td class="px-4 py-3 text-center text-slate-500 font-medium">
                                    {{ $items->firstItem() + $idx }}
                                </td>
                                <td class="px-4 py-3">
                                    @if ($item->gambar && file_exists(public_path('uploads/papan_kreasi/' . $item->gambar)))
                                        <img src="{{ asset('uploads/papan_kreasi/' . $item->gambar) }}" alt="{{ $item->judul }}" class="size-16 rounded-lg object-cover border border-slate-200 shadow-xs">
                                    @else
                                        <div class="size-16 rounded-lg 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 class="px-4 py-3">
                                    <div class="sp-section-title !text-sm !leading-snug">{{ $item->judul }}</div>
                                    <div class="mt-0.5 text-xs text-blue-600 font-medium flex items-center gap-1">
                                        <i class="bi bi-person-fill text-slate-400" aria-hidden="true"></i>
                                        {{ $item->nama_siswa }}
                                    </div>
                                    @if ($item->deskripsi)
                                        <p class="mt-1 text-xs text-slate-500 line-clamp-1 italic">{{ strip_tags($item->deskripsi) }}</p>
                                    @endif
                                </td>
                                <td class="px-4 py-3">
                                    <div class="font-medium text-slate-800 text-xs">{{ $item->kelas_saat_dibuat ?: '-' }}</div>
                                    <div class="text-[11px] text-slate-500">Wali: {{ $item->walikelas_saat_dibuat ?: '-' }}</div>
                                </td>
                                <td class="px-4 py-3">
                                    <span class="inline-flex items-center rounded-full bg-slate-100 px-2.5 py-0.5 text-xs font-medium text-slate-700 border border-slate-200">
                                        {{ $item->kategori }}
                                    </span>
                                </td>
                                <td class="px-4 py-3">
                                    @if ($item->post_web === 'ya')
                                        <span class="inline-flex items-center gap-1 rounded-full bg-emerald-50 px-2.5 py-1 text-xs font-semibold text-emerald-700 border border-emerald-200">
                                            <i class="bi bi-globe" aria-hidden="true"></i> Publik
                                        </span>
                                    @else
                                        <span class="inline-flex items-center gap-1 rounded-full bg-slate-100 px-2.5 py-1 text-xs font-medium text-slate-600 border border-slate-200">
                                            <i class="bi bi-lock" aria-hidden="true"></i> Internal
                                        </span>
                                    @endif
                                </td>
                                <td class="px-4 py-3 text-right">
                                    <div class="inline-flex items-center gap-1">
                                        <button type="button"
                                                class="btn-edit-kreasi sp-btn-secondary px-2 py-1 text-xs text-blue-600 hover:text-blue-800 hover:bg-blue-50"
                                                title="Edit Karya"
                                                data-id="{{ $item->id }}"
                                                data-judul="{{ $item->judul }}"
                                                data-siswa="{{ $item->nama_siswa }}"
                                                data-kategori="{{ $item->kategori }}"
                                                data-post="{{ $item->post_web }}"
                                                data-kelas="{{ $item->kelas_saat_dibuat }}"
                                                data-wali="{{ $item->walikelas_saat_dibuat }}"
                                                data-deskripsi="{{ $item->deskripsi }}">
                                            <i class="bi bi-pencil" aria-hidden="true"></i>
                                        </button>
                                        <form method="POST" action="{{ route('pkbm.papan-kreasi.destroy', $item->id) }}" onsubmit="return confirm('Hapus karya siswa ini?');" class="inline">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="sp-btn-secondary px-2 py-1 text-xs text-rose-600 hover:bg-rose-50" title="Hapus Karya">
                                                <i class="bi bi-trash" aria-hidden="true"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="p-8 text-center text-slate-500">
                                    <i class="bi bi-palette text-3xl text-slate-300 block mb-2" aria-hidden="true"></i>
                                    Belum ada karya siswa yang diunggah. Klik <strong>Tambah Karya</strong> untuk memulai.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            @if ($items->hasPages())
                <div class="border-t border-slate-100 p-4">
                    {{ $items->links() }}
                </div>
            @endif
        </section>
    @else
        <!-- Grid Mading View -->
        <div class="grid gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
            @forelse ($items as $item)
                <div class="sp-card kreasi-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">
                    <!-- Thumbnail Karya -->
                    <div class="relative aspect-[4/3] w-full overflow-hidden bg-slate-100">
                        @if ($item->gambar && file_exists(public_path('uploads/papan_kreasi/' . $item->gambar)))
                            <img src="{{ asset('uploads/papan_kreasi/' . $item->gambar) }}" 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 rounded-full bg-slate-900/80 backdrop-blur-md px-2.5 py-0.5 text-[11px] font-semibold text-white shadow-xs">
                            <i class="bi bi-tag-fill text-[9px] text-blue-300" aria-hidden="true"></i>
                            {{ $item->kategori }}
                        </span>

                        <!-- Public / Internal floating badge -->
                        <span class="absolute top-2.5 right-2.5 inline-flex items-center gap-1 rounded-full {{ $item->post_web === 'ya' ? 'bg-emerald-600/90' : 'bg-slate-700/80' }} backdrop-blur-md px-2 py-0.5 text-[10px] font-medium text-white shadow-xs">
                            @if ($item->post_web === 'ya')
                                <i class="bi bi-globe text-[9px]" aria-hidden="true"></i> Publik
                            @else
                                <i class="bi bi-lock text-[9px]" aria-hidden="true"></i> Internal
                            @endif
                        </span>
                    </div>

                    <!-- Body Karya -->
                    <div class="flex flex-1 flex-col justify-between p-4 space-y-3">
                        <div>
                            <h2 class="sp-section-title kreasi-grid-card__title" title="{{ $item->judul }}">
                                {{ $item->judul }}
                            </h2>

                            <!-- Info Kreator Siswa -->
                            <div class="mt-2.5 flex items-center gap-2.5">
                                <div class="size-7 rounded-full bg-blue-100 text-blue-700 font-bold text-xs flex items-center justify-center shrink-0 border border-blue-200">
                                    {{ strtoupper(mb_substr($item->nama_siswa, 0, 1)) }}
                                </div>
                                <div class="min-w-0 flex-1">
                                    <p class="text-xs font-semibold text-slate-800 truncate">{{ $item->nama_siswa }}</p>
                                    <p class="text-[11px] text-slate-500 truncate">{{ $item->kelas_saat_dibuat ?: 'Kelas -' }} @if($item->walikelas_saat_dibuat) &bull; Wali: {{ $item->walikelas_saat_dibuat }} @endif</p>
                                </div>
                            </div>

                            @if ($item->deskripsi)
                                <div class="mt-2.5 rounded-lg bg-slate-50 p-2 text-xs text-slate-600 line-clamp-2 italic border border-slate-100">
                                    {{ strip_tags($item->deskripsi) }}
                                </div>
                            @endif
                        </div>

                        <!-- Footer Info & Aksi -->
                        <div class="pt-2 border-t border-slate-100 flex items-center justify-between text-xs">
                            <span class="text-[11px] text-slate-400 flex items-center gap-1">
                                <i class="bi bi-calendar3 text-[10px]" aria-hidden="true"></i>
                                {{ \Carbon\Carbon::parse($item->created_at)->translatedFormat('d M Y') }}
                            </span>

                            <div class="inline-flex items-center gap-1">
                                @if ($item->gambar && file_exists(public_path('uploads/papan_kreasi/' . $item->gambar)))
                                    <a href="{{ asset('uploads/papan_kreasi/' . $item->gambar) }}" target="_blank" rel="noopener" class="sp-btn-secondary px-2 py-1 text-[11px] text-slate-600 hover:text-blue-700" title="Lihat Foto Penuh">
                                        <i class="bi bi-arrows-fullscreen text-[10px]" aria-hidden="true"></i>
                                    </a>
                                @endif

                                <button type="button"
                                        class="btn-edit-kreasi sp-btn-secondary px-2 py-1 text-[11px] text-blue-600 hover:text-blue-800 hover:bg-blue-50"
                                        title="Edit Karya"
                                        data-id="{{ $item->id }}"
                                        data-judul="{{ $item->judul }}"
                                        data-siswa="{{ $item->nama_siswa }}"
                                        data-kategori="{{ $item->kategori }}"
                                        data-post="{{ $item->post_web }}"
                                        data-kelas="{{ $item->kelas_saat_dibuat }}"
                                        data-wali="{{ $item->walikelas_saat_dibuat }}"
                                        data-deskripsi="{{ $item->deskripsi }}">
                                    <i class="bi bi-pencil" aria-hidden="true"></i>
                                </button>

                                <form method="POST" action="{{ route('pkbm.papan-kreasi.destroy', $item->id) }}" onsubmit="return confirm('Hapus karya siswa ini?');" class="inline">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="sp-btn-secondary px-2 py-1 text-[11px] text-rose-600 hover:bg-rose-50" title="Hapus Karya">
                                        <i class="bi bi-trash" aria-hidden="true"></i>
                                    </button>
                                </form>
                            </div>
                        </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-palette text-4xl text-slate-300 block mb-2" aria-hidden="true"></i>
                    Belum ada karya siswa yang diunggah. Klik <strong>Tambah Karya</strong> untuk memulai membuat galeri mading.
                </div>
            @endforelse
        </div>

        @if ($items->hasPages())
            <div class="sp-card p-4">
                {{ $items->links() }}
            </div>
        @endif
    @endif
</div>

<!-- Modal Tambah Karya Siswa -->
<dialog id="modal-create-kreasi" class="pkbm-master-dialog pkbm-class-form-dialog pkbm-spp-payment-dialog" aria-labelledby="modal-create-kreasi-title">
    <form method="POST" action="{{ route('pkbm.papan-kreasi.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-palette"></i></span>
                <div>
                    <h2 id="modal-create-kreasi-title" class="sp-section-title">Tambah Karya Siswa</h2>
                    <p class="mt-1 text-xs text-slate-500">Unggah karya kreatif dan hasil kreasi projek siswa ke galeri papan kreasi.</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 Karya / Nama Projek <span class="text-rose-500">*</span></label>
                <input id="create-judul" name="judul" type="text" required maxlength="255" placeholder="Contoh: Lukisan Digital Harmoni Alam" class="sp-form-control mt-1 px-3 py-2 text-sm">
            </div>

            <div>
                <label for="create-nama-siswa" class="sp-form-label">Nama Siswa (Kreator) <span class="text-rose-500">*</span></label>
                <input id="create-nama-siswa" name="nama_siswa" list="list-siswa-create" type="text" required maxlength="150" placeholder="Ketik atau pilih nama siswa" class="sp-form-control mt-1 px-3 py-2 text-sm">
                <datalist id="list-siswa-create">
                    @foreach ($siswaList as $s)
                        <option value="{{ $s->nama_siswa }}">{{ $s->tingkatan ?? '' }} {{ $s->nama_kelas ?? '' }}</option>
                    @endforeach
                </datalist>
            </div>

            <div>
                <label for="create-kategori" class="sp-form-label">Kategori Karya <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">
                    @foreach ($kategoriList as $kat)
                        <option value="{{ $kat }}">{{ $kat }}</option>
                    @endforeach
                </select>
            </div>

            <div>
                <label for="create-walikelas-relasi" class="sp-form-label">Kelas & Wali Kelas Saat Dibuat</label>
                <select id="create-walikelas-relasi" name="id_walikelas_relasi" class="sp-form-control mt-1 px-3 py-2 text-sm">
                    <option value="">-- Pilih Kelas & Wali Kelas --</option>
                    @foreach ($waliKelasList as $wk)
                        <option value="{{ $wk->id }}">
                            {{ $wk->tingkatan }} {{ $wk->nama_kelas }} (Wali: {{ $wk->nama_guru }})
                        </option>
                    @endforeach
                </select>
                <p class="mt-1 text-[11px] text-slate-400">Atau isi manual jika tidak ada dalam daftar di bawah ini.</p>
            </div>

            <div>
                <label for="create-post-web" class="sp-form-label">Status Publikasi <span class="text-rose-500">*</span></label>
                <select id="create-post-web" name="post_web" required class="sp-form-control mt-1 px-3 py-2 text-sm">
                    <option value="tidak">Hanya Internal PKBM</option>
                    <option value="ya">Publikasikan ke Website</option>
                </select>
            </div>

            <div class="sm:col-span-2 grid gap-3 sm:grid-cols-2">
                <div>
                    <label for="create-kelas-manual" class="sp-form-label">Kelas (Manual jika tanpa relasi)</label>
                    <input id="create-kelas-manual" name="kelas_manual" type="text" maxlength="100" placeholder="Contoh: Paket C - Tingkat VI" class="sp-form-control mt-1 px-3 py-2 text-sm">
                </div>
                <div>
                    <label for="create-wali-manual" class="sp-form-label">Wali Kelas (Manual)</label>
                    <input id="create-wali-manual" name="walikelas_manual" type="text" maxlength="150" placeholder="Contoh: Budi Santoso, S.Pd" class="sp-form-control mt-1 px-3 py-2 text-sm">
                </div>
            </div>

            <div class="sm:col-span-2">
                <label for="create-gambar" class="sp-form-label">Unggah Foto Karya <span class="text-rose-500">*</span></label>
                <input id="create-gambar" name="gambar" type="file" required accept="image/jpeg,image/png,image/webp" class="sp-form-control mt-1 px-3 py-2 text-sm">
                <p class="mt-1 text-[11px] text-slate-400">Format: JPG, PNG, atau WEBP. Ukuran maksimal 4MB.</p>
            </div>

            <div class="sm:col-span-2">
                <label for="create-deskripsi" class="sp-form-label">Deskripsi / Cerita di Balik Karya</label>
                <textarea id="create-deskripsi" name="deskripsi" rows="3" placeholder="Ceritakan konsep, media yang digunakan, atau latar belakang pembuatan karya..." class="sp-form-control mt-1 px-3 py-2 text-sm"></textarea>
            </div>
        </div>

        <div class="flex items-center justify-end gap-3 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">Simpan Karya</button>
        </div>
    </form>
</dialog>

<!-- Modal Edit Karya Siswa -->
<dialog id="modal-edit-kreasi" class="pkbm-master-dialog pkbm-class-form-dialog pkbm-spp-payment-dialog" aria-labelledby="modal-edit-kreasi-title">
    <form id="form-edit-kreasi" method="POST" action="" enctype="multipart/form-data">
        @csrf
        @method('PUT')
        <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-pencil-square"></i></span>
                <div>
                    <h2 id="modal-edit-kreasi-title" class="sp-section-title">Edit Karya Siswa</h2>
                    <p class="mt-1 text-xs text-slate-500">Perbarui informasi, status publikasi, atau ganti foto karya siswa.</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="edit-judul" class="sp-form-label">Judul Karya / Nama Projek <span class="text-rose-500">*</span></label>
                <input id="edit-judul" name="judul" type="text" required maxlength="255" class="sp-form-control mt-1 px-3 py-2 text-sm">
            </div>

            <div>
                <label for="edit-nama-siswa" class="sp-form-label">Nama Siswa (Kreator) <span class="text-rose-500">*</span></label>
                <input id="edit-nama-siswa" name="nama_siswa" list="list-siswa-edit" type="text" required maxlength="150" class="sp-form-control mt-1 px-3 py-2 text-sm">
                <datalist id="list-siswa-edit">
                    @foreach ($siswaList as $s)
                        <option value="{{ $s->nama_siswa }}">{{ $s->tingkatan ?? '' }} {{ $s->nama_kelas ?? '' }}</option>
                    @endforeach
                </datalist>
            </div>

            <div>
                <label for="edit-kategori" class="sp-form-label">Kategori Karya <span class="text-rose-500">*</span></label>
                <select id="edit-kategori" name="kategori" required class="sp-form-control mt-1 px-3 py-2 text-sm">
                    @foreach ($kategoriList as $kat)
                        <option value="{{ $kat }}">{{ $kat }}</option>
                    @endforeach
                </select>
            </div>

            <div>
                <label for="edit-walikelas-relasi" class="sp-form-label">Ganti Kelas & Wali Kelas</label>
                <select id="edit-walikelas-relasi" name="id_walikelas_relasi" class="sp-form-control mt-1 px-3 py-2 text-sm">
                    <option value="">-- Tetap Gunakan yang Ada --</option>
                    @foreach ($waliKelasList as $wk)
                        <option value="{{ $wk->id }}">
                            {{ $wk->tingkatan }} {{ $wk->nama_kelas }} (Wali: {{ $wk->nama_guru }})
                        </option>
                    @endforeach
                </select>
            </div>

            <div>
                <label for="edit-post-web" class="sp-form-label">Status Publikasi <span class="text-rose-500">*</span></label>
                <select id="edit-post-web" name="post_web" required class="sp-form-control mt-1 px-3 py-2 text-sm">
                    <option value="tidak">Hanya Internal PKBM</option>
                    <option value="ya">Publikasikan ke Website</option>
                </select>
            </div>

            <div class="sm:col-span-2 grid gap-3 sm:grid-cols-2">
                <div>
                    <label for="edit-kelas-manual" class="sp-form-label">Kelas Saat Ini</label>
                    <input id="edit-kelas-manual" name="kelas_manual" type="text" maxlength="100" class="sp-form-control mt-1 px-3 py-2 text-sm">
                </div>
                <div>
                    <label for="edit-wali-manual" class="sp-form-label">Wali Kelas Saat Ini</label>
                    <input id="edit-wali-manual" name="walikelas_manual" type="text" maxlength="150" class="sp-form-control mt-1 px-3 py-2 text-sm">
                </div>
            </div>

            <div class="sm:col-span-2">
                <label for="edit-gambar" class="sp-form-label">Ganti Foto Karya (Opsional)</label>
                <input id="edit-gambar" name="gambar" type="file" accept="image/jpeg,image/png,image/webp" class="sp-form-control mt-1 px-3 py-2 text-sm">
                <p class="mt-1 text-[11px] text-slate-400">Biarkan kosong jika tidak ingin mengganti foto yang sudah ada.</p>
            </div>

            <div class="sm:col-span-2">
                <label for="edit-deskripsi" class="sp-form-label">Deskripsi / Cerita di Balik Karya</label>
                <textarea id="edit-deskripsi" name="deskripsi" rows="3" class="sp-form-control mt-1 px-3 py-2 text-sm"></textarea>
            </div>
        </div>

        <div class="flex items-center justify-end gap-3 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">Simpan Perubahan</button>
        </div>
    </form>
</dialog>

<script>
document.addEventListener('DOMContentLoaded', function () {
    // Dialog triggers
    document.querySelectorAll('[data-open-dialog]').forEach(function (btn) {
        btn.addEventListener('click', function () {
            const targetId = this.getAttribute('data-open-dialog');
            const dialog = document.getElementById(targetId);
            if (dialog && typeof dialog.showModal === 'function') {
                dialog.showModal();
            }
        });
    });

    document.querySelectorAll('[data-close-dialog]').forEach(function (btn) {
        btn.addEventListener('click', function () {
            const dialog = this.closest('dialog');
            if (dialog && typeof dialog.close === 'function') {
                dialog.close();
            }
        });
    });

    // Close on clicking backdrop
    document.querySelectorAll('dialog').forEach(function (dialog) {
        dialog.addEventListener('click', function (e) {
            const rect = dialog.getBoundingClientRect();
            const isInDialog = (
                rect.top <= e.clientY &&
                e.clientY <= rect.top + rect.height &&
                rect.left <= e.clientX &&
                e.clientX <= rect.left + rect.width
            );
            if (!isInDialog) {
                dialog.close();
            }
        });
    });

    // Edit button click handler
    const editModal = document.getElementById('modal-edit-kreasi');
    const formEdit = document.getElementById('form-edit-kreasi');

    document.querySelectorAll('.btn-edit-kreasi').forEach(function (btn) {
        btn.addEventListener('click', function () {
            const id = this.getAttribute('data-id');
            const judul = this.getAttribute('data-judul') || '';
            const siswa = this.getAttribute('data-siswa') || '';
            const kategori = this.getAttribute('data-kategori') || '';
            const post = this.getAttribute('data-post') || 'tidak';
            const kelas = this.getAttribute('data-kelas') || '';
            const wali = this.getAttribute('data-wali') || '';
            const deskripsi = this.getAttribute('data-deskripsi') || '';

            if (formEdit) {
                formEdit.action = '{{ url("/pkbm/papan-kreasi") }}/' + id;
                document.getElementById('edit-judul').value = judul;
                document.getElementById('edit-nama-siswa').value = siswa;
                document.getElementById('edit-kategori').value = kategori;
                document.getElementById('edit-post-web').value = post;
                document.getElementById('edit-kelas-manual').value = kelas;
                document.getElementById('edit-wali-manual').value = wali;
                document.getElementById('edit-deskripsi').value = deskripsi;
            }

            if (editModal && typeof editModal.showModal === 'function') {
                editModal.showModal();
            }
        });
    });
});
</script>
@endsection