@extends('layouts.app')

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

@section('content')
<div class="mx-auto max-w-6xl space-y-5">
    <header class="pkbm-dashboard__heading">
        <div class="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
            <div>
                <p class="pkbm-dashboard__breadcrumb"><a class="text-blue-700" href="{{ route('student.dashboard') }}">Ruang Belajar</a><i class="bi bi-chevron-right" aria-hidden="true"></i>Papan Kreasi</p>
                <h1 class="pkbm-dashboard__title">Papan Kreasi Siswa</h1>
                <p class="pkbm-dashboard__subtitle">Galeri karya peserta didik {{ $student->className ? '· '.$student->className : '' }} yang diunggah oleh pengajar</p>
            </div>
            <a class="sp-btn-secondary" href="{{ route('student.dashboard') }}"><i class="bi bi-house-door" aria-hidden="true"></i>Ruang belajar</a>
        </div>
    </header>

    @if ($errors->any())<div role="alert" class="settings-notice settings-notice--error">{{ $errors->first() }}</div>@endif

    <section class="grid grid-cols-2 gap-3 sm:grid-cols-3">
        <article class="sp-card p-4"><p class="text-xs font-semibold uppercase text-slate-500">Total karya</p><p class="mt-1 text-xl font-extrabold text-slate-900">{{ $total }}</p></article>
        <article class="sp-card p-4"><p class="text-xs font-semibold uppercase text-slate-500">Karya Anda</p><p class="mt-1 text-xl font-extrabold text-blue-600">{{ $mine }}</p></article>
        <article class="sp-card p-4"><p class="text-xs font-semibold uppercase text-slate-500">Kategori</p><p class="mt-1 text-xl font-extrabold text-slate-900">{{ $kategoriList->count() }}</p></article>
    </section>

    <form method="GET" action="{{ route('student.kreasi.index') }}" class="sp-card grid gap-3 p-4 sm:grid-cols-12 sm:items-end">
        <div class="sm:col-span-5">
            <label class="sp-form-label" for="kreasi-q">Cari karya</label>
            <input class="sp-form-control px-3 py-2" id="kreasi-q" type="search" name="q" value="{{ $search }}" placeholder="Judul, nama siswa, atau kelas">
        </div>
        <div class="sm:col-span-4">
            <label class="sp-form-label" for="kreasi-kategori">Kategori</label>
            <select class="sp-form-control px-3 py-2" id="kreasi-kategori" name="kategori">
                <option value="">Semua kategori</option>
                @foreach ($kategoriList as $option)
                    <option value="{{ $option }}" @selected($kategori === $option)>{{ $option }}</option>
                @endforeach
            </select>
        </div>
        <div class="flex gap-2 sm:col-span-3">
            <button type="submit" class="sp-btn-primary flex-1 justify-center"><i class="bi bi-search" aria-hidden="true"></i>Terapkan</button>
            @if ($search !== '' || $kategori !== '')
                <a class="sp-btn-secondary px-3" href="{{ route('student.kreasi.index') }}" title="Reset filter"><i class="bi bi-arrow-counterclockwise" aria-hidden="true"></i></a>
            @endif
        </div>
    </form>

    @if ($items->isEmpty())
        <div class="sp-card p-12 text-center text-slate-400">
            <div class="mb-3 inline-flex h-16 w-16 items-center justify-center rounded-2xl bg-slate-100 text-slate-400"><i class="bi bi-images text-3xl" aria-hidden="true"></i></div>
            <h2 class="text-base font-bold text-slate-700">Belum Ada Karya</h2>
            <p class="mx-auto mt-1 max-w-sm text-sm text-slate-500">Karya siswa akan muncul di sini setelah diunggah oleh administrator atau guru melalui Papan Kreasi.</p>
        </div>
    @else
        <section class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            @foreach ($items as $item)
                <article class="sp-card overflow-hidden">
                    <div class="flex aspect-[4/3] items-center justify-center bg-slate-100">
                        <img src="{{ route('student.kreasi.image', $item->id) }}" alt="{{ $item->judul }}" loading="lazy" class="h-full w-full object-cover">
                    </div>
                    <div class="space-y-2 p-4">
                        <div class="flex flex-wrap items-center justify-between gap-2">
                            <span class="rounded-full bg-blue-50 px-3 py-1 text-xs font-bold text-blue-700">{{ $item->kategori ?: 'Lainnya' }}</span>
                            @if (mb_strtolower(trim((string) $item->nama_siswa)) === mb_strtolower($student->name))
                                <span class="rounded-full bg-emerald-50 px-3 py-1 text-xs font-bold text-emerald-700">Karya Anda</span>
                            @endif
                        </div>
                        <h2 class="text-base font-bold leading-snug text-slate-900">{{ $item->judul }}</h2>
                        <p class="text-xs text-slate-500">{{ $item->nama_siswa }} · {{ $item->kelas_saat_dibuat ?: '-' }}</p>
                        @if ($item->deskripsi)
                            <p class="line-clamp-3 text-sm text-slate-600">{{ $item->deskripsi }}</p>
                        @endif
                        <p class="text-[11px] text-slate-400">
                            <i class="bi bi-person-check me-1" aria-hidden="true"></i>{{ $item->walikelas_saat_dibuat ?: 'Wali kelas belum tercatat' }}
                            @if ($item->created_at) · {{ \Illuminate\Support\Carbon::parse($item->created_at)->timezone('Asia/Jakarta')->format('d/m/Y') }}@endif
                        </p>
                    </div>
                </article>
            @endforeach
        </section>

        <div>{{ $items->links() }}</div>
    @endif
</div>
@endsection