@extends('layouts.app')

@section('title', 'Pola Nomor Induk')

@php
    $tingkatKet = ['Paket A' => 'Tingkatan 1–6', 'Paket B' => 'Tingkatan 7–9', 'Paket C' => 'Tingkatan 10–12'];
@endphp

@section('content')
<div class="pkbm-master-page mx-auto max-w-7xl 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>Pola Nomor Induk</p>
            <h1 class="pkbm-dashboard__title">Pengaturan Pola Nomor Induk</h1>
            <p class="pkbm-dashboard__subtitle">Atur format nomor induk (NIS) untuk tiap jenjang pendidikan kesetaraan. Placeholder: <code>{kode}</code>, <code>{urut}</code>, <code>{tahun}</code>.</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 ($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 pola.</p>
                <ul class="mt-1 list-inside list-disc">
                    @foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach
                </ul>
            </div>
        </div>
    @endif

    <form method="POST" action="{{ route('pkbm.buku-induk.pengaturan.save') }}" class="space-y-5">
        @csrf
        <div class="grid gap-4 md:grid-cols-3">
            @foreach (['Paket A', 'Paket B', 'Paket C'] as $j)
                @php($p = $pengaturan[$j])
                <section class="sp-card p-4">
                    <h2 class="sp-section-title flex items-center gap-2 text-blue-700"><i class="bi bi-mortarboard-fill" aria-hidden="true"></i>{{ $j }}</h2>
                    <p class="mt-1 text-xs text-slate-500">{{ $tingkatKet[$j] }}@unless ($p->persisted) · <span class="text-amber-600">(belum disimpan, memakai default)</span>@endunless</p>

                    <div class="mt-3 space-y-3">
                        <div>
                            <label class="sp-form-label" for="kode-{{ $loop->index }}">Kode Jenjang</label>
                            <input type="text" id="kode-{{ $loop->index }}" name="kode[{{ $j }}]" value="{{ $p->kode_jenjang }}" maxlength="10" required class="kode-input sp-form-control w-full px-3 py-2 text-sm" data-jenjang="{{ $j }}">
                        </div>
                        <div>
                            <label class="sp-form-label" for="format-{{ $loop->index }}">Format Pola</label>
                            <input type="text" id="format-{{ $loop->index }}" name="format[{{ $j }}]" value="{{ $p->format_pola }}" required class="format-input sp-form-control w-full px-3 py-2 text-sm" data-jenjang="{{ $j }}">
                            <small class="mt-1 block text-xs text-slate-400">Contoh: <code>{kode}{tahun}{urut}</code> &rarr; PC2026001</small>
                        </div>
                        <div>
                            <label class="sp-form-label" for="digit-{{ $loop->index }}">Jumlah Digit Urut</label>
                            <input type="number" id="digit-{{ $loop->index }}" name="digit[{{ $j }}]" value="{{ $p->digit_urut }}" min="1" max="10" required class="digit-input sp-form-control w-full px-3 py-2 text-sm" data-jenjang="{{ $j }}">
                        </div>
                        <label class="flex items-center gap-2 text-sm text-slate-600">
                            <input type="hidden" name="tahun[{{ $j }}]" value="0">
                            <input type="checkbox" name="tahun[{{ $j }}]" value="1" @checked($p->reset_tahunan) class="size-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500">
                            Reset nomor urut tiap tahun masuk baru
                        </label>
                        <div class="rounded-lg border border-slate-200 bg-slate-50 p-3">
                            <span class="block text-xs font-bold text-slate-500">Contoh hasil:</span>
                            <div class="preview-text mt-1 text-base font-bold text-blue-700" data-jenjang="{{ $j }}">-</div>
                        </div>
                    </div>
                </section>
            @endforeach
        </div>

        <div class="flex justify-end">
            <button type="submit" class="sp-btn-primary"><i class="bi bi-save" aria-hidden="true"></i>Simpan Pengaturan</button>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
(function () {
    function update(jenjang) {
        var kode = document.querySelector('.kode-input[data-jenjang="' + jenjang + '"]').value || '';
        var format = document.querySelector('.format-input[data-jenjang="' + jenjang + '"]').value || '';
        var digit = parseInt(document.querySelector('.digit-input[data-jenjang="' + jenjang + '"]').value, 10) || 3;
        var tahun = new Date().getFullYear();
        var urut = '1'.padStart(digit, '0');
        var hasil = format.split('{kode}').join(kode).split('{urut}').join(urut).split('{tahun}').join(tahun);
        document.querySelector('.preview-text[data-jenjang="' + jenjang + '"]').textContent = hasil || '-';
    }
    document.querySelectorAll('.kode-input, .format-input, .digit-input').forEach(function (el) {
        el.addEventListener('input', function () { update(el.dataset.jenjang); });
        update(el.dataset.jenjang);
    });
})();
</script>
@endpush