@extends('layouts.app')

@section('title', 'Buku Induk')

@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',
    ];
    $perPage = $perPage ?? '50';
    $offset = $perPage !== 'all' ? ($page - 1) * (int) $perPage : 0;
    // Preserve current filters when building pagination / cetak links.
    $baseQuery = array_filter([
        'cari' => $cari,
        'jenjang' => $filterJenjang,
        'tahun' => $filterTahun,
        'per_page' => $perPage,
    ], fn ($v) => $v !== '' && $v !== null);
@endphp

@section('content')
<div class="pkbm-master-page mx-auto max-w-[1400px] space-y-5">
    <header class="pkbm-dashboard__heading">
        <div class="min-w-0">
            <p class="pkbm-dashboard__breadcrumb"><span>Data Utama</span><i class="bi bi-chevron-right" aria-hidden="true"></i>Buku Induk</p>
            <h1 class="pkbm-dashboard__title">Buku Induk Siswa</h1>
            <p class="pkbm-dashboard__subtitle">Arsip master lintas angkatan sekaligus sistem penomoran nomor induk (NIS). Baris diurutkan berdasarkan NIS.</p>
        </div>
        <div class="rounded-xl border border-slate-200 bg-white px-4 py-2 text-right shadow-sm">
            <span class="block text-xs text-slate-500">Total terdaftar</span>
            <strong class="text-lg font-bold text-slate-800">{{ number_format($total, 0, ',', '.') }}</strong>
            <span class="block text-xs text-slate-500">siswa · urut NIS</span>
        </div>
    </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

    {{-- Kartu aksi: pola nomor induk, generate, cetak (diletakkan di atas filter) --}}
    <section class="sp-card overflow-hidden">
        <div class="sp-card-header flex flex-wrap items-center justify-between gap-3">
            <div>
                <h2 class="sp-section-title"><i class="bi bi-magic me-1" aria-hidden="true"></i>Aksi Buku Induk</h2>
                <p class="mt-1 text-xs text-slate-500">Atur pola NIS, buat nomor induk otomatis, atau cetak buku induk per angkatan maupun keseluruhan.</p>
            </div>
        </div>
        <div class="flex flex-wrap items-center gap-2 p-4">
            <a href="{{ route('pkbm.buku-induk.pengaturan') }}" class="sp-btn-secondary"><i class="bi bi-gear-fill" aria-hidden="true"></i>Pola Nomor Induk</a>
            <a href="{{ route('pkbm.buku-induk.pengaturan-tahun') }}" class="sp-btn-primary">
                <i class="bi bi-magic" aria-hidden="true"></i>Pengaturan NIS &amp; Angkatan
                @if ($totalEmptyNis > 0)<span class="ms-1 rounded-full bg-white/25 px-2 py-0.5 text-xs">{{ $totalEmptyNis }} kosong</span>@endif
            </a>
            <a href="{{ route('pkbm.buku-induk.cetak', $baseQuery) }}" target="_blank" rel="noopener" class="sp-btn-secondary">
                <i class="bi bi-printer-fill" aria-hidden="true"></i>Cetak {{ $filterTahun !== 'all' ? 'Angkatan '.$filterTahun : 'Keseluruhan' }}
            </a>
        </div>
    </section>

    {{-- Kartu filter data --}}
    <section class="sp-card overflow-hidden">
        <div class="sp-card-header flex flex-wrap items-center justify-between gap-3">
            <h2 class="sp-section-title"><i class="bi bi-funnel me-1" aria-hidden="true"></i>Filter data</h2>
        </div>
        <form method="GET" action="{{ route('pkbm.buku-induk.index') }}" class="grid items-end gap-3 p-4 sm:grid-cols-2 xl:grid-cols-3">
            <input type="hidden" name="per_page" value="{{ $perPage }}">
            <div>
                <label for="bi-cari" class="sp-form-label">Cari siswa</label>
                <input id="bi-cari" type="text" name="cari" value="{{ $cari }}" placeholder="Nama / NIS / NISN" class="sp-form-control w-full px-3 py-2.5 text-sm">
            </div>
            <div>
                <label for="bi-tahun" class="sp-form-label">Tahun Angkatan</label>
                <select id="bi-tahun" name="tahun" class="sp-form-control w-full px-3 py-2.5 text-sm">
                    <option value="all" @selected($filterTahun === 'all')>Semua Tahun (Lintas Angkatan)</option>
                    @foreach ($years as $y)
                        <option value="{{ $y }}" @selected($filterTahun === (string) $y)>{{ $y }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label for="bi-jenjang" class="sp-form-label">Jenjang</label>
                <select id="bi-jenjang" name="jenjang" class="sp-form-control w-full px-3 py-2.5 text-sm">
                    <option value="" @selected($filterJenjang === '')>Semua Jenjang</option>
                    @foreach (['Paket A', 'Paket B', 'Paket C', 'Belum Ada Kelas'] as $j)
                        <option value="{{ $j }}" @selected($filterJenjang === $j)>{{ $j }}</option>
                    @endforeach
                </select>
            </div>
            <div class="sm:col-span-2 xl:col-span-3">
                <button type="submit" class="sp-btn-primary"><i class="bi bi-search" aria-hidden="true"></i>Terapkan filter</button>
            </div>
        </form>
    </section>

    <section class="sp-card overflow-hidden">
        <div class="flex flex-wrap items-center justify-between gap-3 border-b border-slate-100 p-4">
            <form method="GET" action="{{ route('pkbm.buku-induk.index') }}" class="flex items-center gap-2">
                @foreach (['cari' => $cari, 'tahun' => $filterTahun, 'jenjang' => $filterJenjang] as $key => $val)
                    <input type="hidden" name="{{ $key }}" value="{{ $val }}">
                @endforeach
                <label for="bi-perpage" class="text-xs font-semibold text-slate-500">Tampilkan</label>
                <select id="bi-perpage" name="per_page" onchange="this.form.submit()" class="sp-form-control w-auto px-2 py-1.5 text-xs">
                    @foreach (['25', '50', '100', 'all'] as $size)
                        <option value="{{ $size }}" @selected($perPage === $size)>{{ $size === 'all' ? 'Semua baris' : $size }}</option>
                    @endforeach
                </select>
                <span class="text-xs text-slate-500">· <strong>{{ count($order) }}</strong> baris @if ($perPage !== 'all') · halaman {{ $page }}/{{ $pages }} @endif @if ($totalEmptyNis > 0) · <span class="font-semibold text-amber-600">{{ $totalEmptyNis }} belum punya NIS</span> @endif</span>
            </form>
            @if ($perPage !== 'all' && $pages > 1)
                <div class="flex items-center gap-2" aria-label="Navigasi halaman">
                    <a href="{{ route('pkbm.buku-induk.index', $baseQuery + ['page' => max(1, $page - 1)]) }}" @class(['sp-btn-secondary', 'pointer-events-none opacity-50' => $page <= 1]) aria-label="Halaman sebelumnya"><i class="bi bi-chevron-left" aria-hidden="true"></i></a>
                    <span class="min-w-16 text-center text-xs font-semibold text-slate-600">{{ $page }} / {{ $pages }}</span>
                    <a href="{{ route('pkbm.buku-induk.index', $baseQuery + ['page' => min($pages, $page + 1)]) }}" @class(['sp-btn-secondary', 'pointer-events-none opacity-50' => $page >= $pages]) aria-label="Halaman berikutnya"><i class="bi bi-chevron-right" aria-hidden="true"></i></a>
                </div>
            @endif
        </div>
        <div class="overflow-x-auto">
            <table class="sp-table min-w-[1150px]" id="buku-induk-table">
                <thead>
                    <tr>
                        <th scope="col" class="w-12">No</th>
                        <th scope="col" class="text-center">Foto</th>
                        <th scope="col" class="w-40 text-center">NIS</th>
                        <th scope="col">NISN</th>
                        <th scope="col">Nama Siswa</th>
                        <th scope="col" class="text-center">Jenjang</th>
                        <th scope="col" class="text-center">L/P</th>
                        <th scope="col">Tempat, Tanggal Lahir</th>
                        <th scope="col">Nama Ayah / Ibu</th>
                        <th scope="col">No. HP</th>
                        <th scope="col" class="text-center">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($order as $index => $id)
                        @php
                            $row = $records[$id] ?? null;
                            $jenjang = $row ? ($jenjangMap[$id] ?? null) : null;
                            $nis = $row ? trim((string) $row->nis) : '';
                            $ttl = $row ? trim(($row->tempat_lahir ?: '-') . ', ' . ($row->tanggal_lahir ? \Illuminate\Support\Carbon::parse($row->tanggal_lahir)->format('d-m-Y') : '-')) : '-';
                        @endphp
                        @if ($row)
                        <tr>
                            <td class="text-slate-500">{{ $offset + $index + 1 }}</td>
                            <td class="text-center">
                                @if ($row->foto)
                                    <img src="{{ route('pkbm.siswa.photo', $row->id) }}" alt="Foto {{ $row->nama_siswa }}" loading="lazy" class="mx-auto size-10 rounded-lg border border-slate-200 object-cover">
                                @else
                                    <i class="bi bi-person-circle text-2xl text-slate-400" aria-hidden="true"></i>
                                @endif
                            </td>
                            <td class="text-center">
                                <span class="nis-display inline-flex min-w-[110px] 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="{{ $row->id }}" title="Klik untuk edit NIS">
                                    @if ($nis !== '')
                                        {{ $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>
                            <td class="text-slate-600">{{ $row->nisn ?: '-' }}</td>
                            <td><strong class="text-slate-900">{{ strtoupper($row->nama_siswa) }}</strong></td>
                            <td class="text-center">
                                @if ($jenjang)
                                    <span class="rounded-full border px-2.5 py-1 text-[11px] font-semibold {{ $badge[$jenjang] ?? 'border-slate-200 bg-slate-100 text-slate-600' }}">{{ $jenjang }}</span>
                                @else
                                    <span class="rounded-full border border-slate-200 bg-slate-100 px-2.5 py-1 text-[11px] font-semibold text-slate-500">Belum Ada Kelas</span>
                                @endif
                            </td>
                            <td class="text-center">{{ in_array($row->jenis_kelamin, ['L', 'Laki-laki'], true) ? 'L' : ($row->jenis_kelamin ? 'P' : '-') }}</td>
                            <td class="text-slate-600">{{ $ttl }}</td>
                            <td class="text-slate-600">{{ $row->nama_ayah ?: '-' }} / {{ $row->nama_ibu ?: '-' }}</td>
                            <td class="text-slate-600">{{ $row->hp ?: '-' }}</td>
                            <td class="text-center">
                                <a href="{{ route('pkbm.buku-induk.cetak-siswa', $row->id) }}" target="_blank" rel="noopener" class="sp-btn-secondary px-2.5 py-1.5 text-xs">
                                    <i class="bi bi-printer" aria-hidden="true"></i>Cetak
                                </a>
                            </td>
                        </tr>
                        @endif
                    @empty
                        <tr>
                            <td colspan="11" class="border-b-0 px-4 py-12 text-center text-sm text-slate-500">
                                {{ ($cari !== '' || $filterJenjang !== '' || $filterTahun !== 'all') ? 'Data siswa tidak ditemukan untuk filter yang dipilih.' : 'Belum ada data siswa.' }}
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </section>
</div>
@endsection

@push('scripts')
<script>
(function () {
    var csrf = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

    // Inline edit NIS: klik badge -> input -> simpan AJAX saat blur/Enter (Escape batal).
    function renderBadge(id, nis) {
        var span = document.createElement('span');
        span.className = 'nis-display inline-flex min-w-[110px] 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 || el.dataset.editing) 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-xs font-semibold text-slate-700 focus:outline-none focus:ring-2 focus:ring-blue-500';
        input.style.width = '130px';
        input.style.textAlign = 'center';
        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(@json(route('pkbm.buku-induk.simpan-nis')), {
                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) {
                    var badge;
                    if (data.status === 'success') {
                        badge = renderBadge(id, data.nis);
                    } else {
                        alert(data.message || 'Gagal menyimpan NIS.');
                        badge = renderBadge(id, lama);
                    }
                    input.replaceWith(badge);
                })
                .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