@extends('layouts.app')

@section('title', 'Pengaturan NIS & Tahun Angkatan')

@php
    $badge = [
        'Paket A' => 'border-indigo-100 bg-indigo-50 text-indigo-700',
        'Paket B' => 'border-sky-100 bg-sky-50 text-sky-700',
        'Paket C' => 'border-purple-100 bg-purple-50 text-purple-700',
    ];
    $target = (string) request('tingkatan', '');
@endphp

@section('content')
<div class="pkbm-master-page mx-auto max-w-5xl space-y-5">
    <header class="pkbm-dashboard__heading">
        <div class="min-w-0">
            <p class="pkbm-dashboard__breadcrumb"><a href="{{ route('pkbm.buku-induk.index') }}">Buku Induk</a><i class="bi bi-chevron-right" aria-hidden="true"></i>Pengaturan NIS</p>
            <h1 class="pkbm-dashboard__title">Pengaturan NIS &amp; Tahun Angkatan</h1>
            <p class="pkbm-dashboard__subtitle">Tangani siswa yang belum punya NIS (NIS valid dari Dapodik sudah terisi otomatis). Pilih tahun angkatan per tingkatan, lalu <strong>Generate</strong> sesuai pola atau isi NIS manual. Generate terkunci atas-ke-bawah: selesaikan tingkatan teratas tiap jenjang dulu.</p>
        </div>
        <a href="{{ route('pkbm.buku-induk.index') }}" class="sp-btn-secondary"><i class="bi bi-arrow-left" aria-hidden="true"></i>Kembali ke Buku Induk</a>
    </header>

    @if (session('status'))
        <div role="status" class="settings-notice settings-notice--success">
            <i class="bi bi-check-circle-fill" aria-hidden="true"></i><span>{!! session('status') !!}</span>
        </div>
    @endif
    @if (session('nis_error'))
        <div role="alert" class="settings-notice settings-notice--error">
            <i class="bi bi-exclamation-circle-fill" aria-hidden="true"></i><span>{!! session('nis_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">Periksa kembali isian.</p>
                <ul class="mt-1 list-inside list-disc">
                    @foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach
                </ul>
            </div>
        </div>
    @endif

    <div class="rounded-xl border border-blue-100 bg-blue-50 px-4 py-3 text-sm text-blue-800">
        <i class="bi bi-info-circle me-1" aria-hidden="true"></i>
        Periode aktif: <strong>{{ $activeTp ?: 'belum diatur' }}</strong>@if ($period) &middot; {{ $period->semester }}@endif.
        Opsi tahun: <strong>{{ implode(', ', $options) }}</strong>.
        Total siswa sudah ber-NIS angkatan: <strong>{{ number_format($totalTersimpan, 0, ',', '.') }}</strong>.
    </div>

    @forelse ($cards as $card)
        @php
            if ($card->complete) { $pill = ['Lengkap', 'border-emerald-200 bg-emerald-50 text-emerald-700', 'check2-circle']; }
            elseif ($card->current === null) { $pill = ['Angkatan belum dipilih', 'border-amber-200 bg-amber-50 text-amber-700', 'exclamation-triangle']; }
            elseif ($card->canGenerate) { $pill = ['Siap di-generate', 'border-blue-200 bg-blue-50 text-blue-700', 'lightning-charge']; }
            else { $pill = ['Terkunci', 'border-slate-200 bg-slate-100 text-slate-500', 'lock']; }
        @endphp

        <details class="sp-card overflow-hidden" @if ((string) $card->tingkatan === $target) open @endif>
            <summary class="flex cursor-pointer list-none items-center justify-between gap-3 p-4 hover:bg-slate-50">
                <div class="flex flex-wrap items-center gap-2">
                    <i class="bi bi-chevron-down text-slate-400 transition" aria-hidden="true"></i>
                    <strong class="text-slate-900">Tingkatan {{ $card->tingkatan }}</strong>
                    <span class="rounded-full border px-2 py-0.5 text-[11px] font-semibold {{ $badge[$card->jenjang] ?? 'border-slate-200 bg-slate-100 text-slate-600' }}">{{ $card->jenjang ?: '—' }}</span>
                    <span class="text-xs text-slate-500">{{ $card->filled }}/{{ $card->total }} NIS @if($card->empty > 0)· <span class="font-semibold text-amber-600">{{ $card->empty }} kosong</span>@endif</span>
                </div>
                <span class="inline-flex items-center gap-1 rounded-full border px-2.5 py-0.5 text-[11px] font-semibold {{ $pill[1] }}">
                    <i class="bi bi-{{ $pill[2] }}" aria-hidden="true"></i>{{ $pill[0] }}
                </span>
            </summary>

            <div class="border-t border-slate-100">
                <div class="flex flex-wrap items-end gap-3 bg-slate-50/60 p-4">
                    <form method="POST" action="{{ route('pkbm.buku-induk.tahun.simpan-tingkatan') }}" class="flex flex-wrap items-end gap-2">
                        @csrf
                        <input type="hidden" name="tingkatan" value="{{ $card->tingkatan }}">
                        <div>
                            <label class="sp-form-label" for="ang-{{ $card->tingkatan }}">Tahun Angkatan</label>
                            <select id="ang-{{ $card->tingkatan }}" name="angkatan" class="sp-form-control w-auto px-2 py-1.5 text-sm">
                                @foreach ($options as $opt)
                                    <option value="{{ $opt }}" @selected($opt === $card->default)>{{ $opt }}</option>
                                @endforeach
                            </select>
                        </div>
                        <button type="submit" class="sp-btn-secondary"><i class="bi bi-save" aria-hidden="true"></i>Simpan Angkatan</button>
                    </form>

                    <form method="POST" action="{{ route('pkbm.buku-induk.generate-tingkatan') }}" class="flex items-end">
                        @csrf
                        <input type="hidden" name="tingkatan" value="{{ $card->tingkatan }}">
                        <button type="submit" class="sp-btn-primary" @disabled(! $card->canGenerate)>
                            <i class="bi bi-magic" aria-hidden="true"></i>Generate NIS @if ($card->empty > 0)({{ $card->empty }})@endif
                        </button>
                    </form>
                </div>
                @if ($card->reason !== '')
                    <p class="px-4 pb-3 text-[11px] text-slate-500"><i class="bi bi-info-circle me-1" aria-hidden="true"></i>{{ $card->reason }}</p>
                @endif

                <div class="overflow-x-auto">
                    <table class="sp-table min-w-[560px]">
                        <thead>
                            <tr>
                                <th class="w-12">No</th>
                                <th>Nama Siswa</th>
                                <th class="w-44 text-center">NIS (klik untuk edit)</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($card->siswa as $i => $siswa)
                                <tr>
                                    <td class="text-slate-500">{{ $i + 1 }}</td>
                                    <td><strong class="text-slate-900">{{ strtoupper($siswa->nama_siswa) }}</strong></td>
                                    <td class="text-center">
                                        <span class="nis-display inline-flex min-w-[130px] cursor-pointer items-center justify-center rounded-lg border border-slate-200 bg-slate-50 px-2 py-1 text-xs font-semibold text-slate-700 hover:border-blue-400"
                                              data-id="{{ $siswa->id }}" title="Klik untuk edit NIS">
                                            @if (trim((string) $siswa->nis) !== '')
                                                {{ $siswa->nis }}
                                            @else
                                                <i class="bi bi-pencil-square text-slate-400" aria-hidden="true"></i><span class="ms-1 text-slate-400">Isi NIS</span>
                                            @endif
                                        </span>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </details>
    @empty
        <div class="sp-card p-8 text-center text-sm text-slate-500">
            <i class="bi bi-inbox mb-2 block text-2xl" aria-hidden="true"></i>
            Belum ada siswa yang memiliki kelas pada periode aktif.
        </div>
    @endforelse

    @if (! empty($unknown))
        <details class="sp-card overflow-hidden">
            <summary class="flex cursor-pointer list-none items-center justify-between gap-3 p-4 hover:bg-slate-50">
                <div class="flex flex-wrap items-center gap-2">
                    <i class="bi bi-chevron-down text-slate-400" aria-hidden="true"></i>
                    <strong class="text-slate-900">Belum Ada Kelas</strong>
                    <span class="text-xs text-slate-500">({{ count($unknown) }} siswa di luar periode aktif)</span>
                </div>
                <span class="inline-flex items-center gap-1 rounded-full border border-slate-200 bg-slate-100 px-2.5 py-0.5 text-[11px] font-semibold text-slate-500">
                    <i class="bi bi-pencil" aria-hidden="true"></i>Isi manual
                </span>
            </summary>
            <div class="border-t border-slate-100 p-4">
                <p class="mb-3 text-xs text-slate-500"><i class="bi bi-info-circle me-1" aria-hidden="true"></i>Siswa ini tidak punya penempatan kelas pada periode aktif, jadi tidak bisa di-generate otomatis. Isi NIS secara manual bila perlu.</p>
                <div class="overflow-x-auto">
                    <table class="sp-table min-w-[560px]">
                        <thead>
                            <tr>
                                <th class="w-12">No</th>
                                <th>Nama Siswa</th>
                                <th class="w-44 text-center">NIS (klik untuk edit)</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($unknown as $i => $siswa)
                                <tr>
                                    <td class="text-slate-500">{{ $i + 1 }}</td>
                                    <td><strong class="text-slate-900">{{ strtoupper($siswa->nama_siswa) }}</strong></td>
                                    <td class="text-center">
                                        <span class="nis-display inline-flex min-w-[130px] cursor-pointer items-center justify-center rounded-lg border border-slate-200 bg-slate-50 px-2 py-1 text-xs font-semibold text-slate-700 hover:border-blue-400"
                                              data-id="{{ $siswa->id }}" title="Klik untuk edit NIS">
                                            @if (trim((string) $siswa->nis) !== '')
                                                {{ $siswa->nis }}
                                            @else
                                                <i class="bi bi-pencil-square text-slate-400" aria-hidden="true"></i><span class="ms-1 text-slate-400">Isi NIS</span>
                                            @endif
                                        </span>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </details>
    @endif
</div>
@endsection

@push('scripts')
<script>
(function () {
    var csrf = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
    var endpoint = @json(route('pkbm.buku-induk.simpan-nis'));

    function renderBadge(id, nis) {
        var span = document.createElement('span');
        span.className = 'nis-display inline-flex min-w-[130px] cursor-pointer items-center justify-center rounded-lg border border-slate-200 bg-slate-50 px-2 py-1 text-xs font-semibold text-slate-700 hover:border-blue-400';
        span.dataset.id = id;
        span.title = 'Klik untuk edit NIS';
        if (nis) {
            span.textContent = nis;
        } else {
            span.innerHTML = '<i class="bi bi-pencil-square text-slate-400"></i><span class="ms-1 text-slate-400">Isi NIS</span>';
        }
        return span;
    }

    document.addEventListener('click', function (e) {
        var el = e.target.closest('.nis-display');
        if (!el) return;
        var id = el.dataset.id;
        var lama = el.textContent.trim() === 'Isi NIS' ? '' : el.textContent.trim();

        var input = document.createElement('input');
        input.type = 'text';
        input.value = lama;
        input.className = 'rounded-lg border border-blue-300 px-2 py-1 text-center text-xs font-semibold text-slate-700 focus:outline-none focus:ring-2 focus:ring-blue-500';
        input.style.width = '150px';
        el.replaceWith(input);
        input.focus();
        input.select();

        var done = false;
        function simpan() {
            if (done) return;
            done = true;
            var baru = input.value.trim();
            var body = new URLSearchParams();
            body.set('id', id);
            body.set('nis', baru);
            fetch(endpoint, {
                method: 'POST',
                headers: { 'X-CSRF-TOKEN': csrf, 'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/x-www-form-urlencoded' },
                body: body.toString()
            })
                .then(function (r) { return r.json(); })
                .then(function (data) {
                    if (data.status === 'success') {
                        input.replaceWith(renderBadge(id, data.nis));
                    } else {
                        alert(data.message || 'Gagal menyimpan NIS.');
                        input.replaceWith(renderBadge(id, lama));
                    }
                })
                .catch(function () {
                    alert('Terjadi kesalahan koneksi saat menyimpan NIS.');
                    input.replaceWith(renderBadge(id, lama));
                });
        }
        input.addEventListener('blur', simpan);
        input.addEventListener('keydown', function (ev) {
            if (ev.key === 'Enter') { ev.preventDefault(); input.blur(); }
            if (ev.key === 'Escape') { done = true; input.replaceWith(renderBadge(id, lama)); }
        });
    });
})();
</script>
@endpush