@extends('layouts.app')

@section('title', 'Pendaftaran SPMB')

@section('content')
<main class="public-spmb min-h-screen bg-slate-50 px-4 py-5 sm:px-6 sm:py-8">
<div class="pkbm-master-page mx-auto max-w-5xl space-y-5">
    <div class="flex items-center justify-between gap-4 rounded-2xl border border-blue-100 bg-white px-4 py-3 shadow-sm sm:px-5">
        <div class="flex min-w-0 items-center gap-3">
            <span class="grid size-11 shrink-0 place-items-center overflow-hidden rounded-xl border border-slate-100 bg-white">
                <img src="{{ asset('images/logo.png') }}" alt="" class="size-full object-contain p-1">
            </span>
            <div class="min-w-0">
                <p class="truncate text-sm font-extrabold tracking-wide text-[#173b67]">SMARTPenF</p>
                <p class="mt-0.5 truncate text-[11px] text-slate-500">Manajemen pendidikan nonformal</p>
            </div>
        </div>
        <span class="inline-flex shrink-0 items-center gap-2 rounded-full border border-blue-100 bg-blue-50 px-3 py-1.5 text-xs font-semibold text-blue-700">
            <i class="bi bi-globe2" aria-hidden="true"></i><span class="hidden sm:inline">Portal pendaftaran</span><span class="sm:hidden">SPMB</span>
        </span>
    </div>

    <header class="public-spmb__hero rounded-2xl px-5 py-5 text-white shadow-md sm:px-7 sm:py-6">
        <p class="flex items-center gap-2 text-xs font-semibold text-blue-100"><span>SPMB</span><i class="bi bi-chevron-right text-[9px]" aria-hidden="true"></i><span>Pendaftaran peserta didik baru</span></p>
        <h1 class="mt-2 text-xl font-bold tracking-tight sm:text-2xl">{{ $school->nama_pkbm }}</h1>
        <div class="mt-3 flex flex-wrap items-center gap-x-5 gap-y-2 text-xs font-medium text-blue-50 sm:text-sm">
            @if ($scheduleDisplayed)
                <span><i class="bi bi-calendar-range mr-1.5" aria-hidden="true"></i>{{ \Carbon\CarbonImmutable::parse($settings->tgl_buka)->translatedFormat('d M Y') }} – {{ \Carbon\CarbonImmutable::parse($settings->tgl_tutup)->translatedFormat('d M Y') }}</span>
            @endif
            @if ((int) $settings->kuota_pendaftaran > 0)
                <span><i class="bi bi-people mr-1.5" aria-hidden="true"></i>{{ max(0, (int) $settings->kuota_pendaftaran - $registered) }} dari {{ (int) $settings->kuota_pendaftaran }} kuota tersisa</span>
            @endif
        </div>
    </header>

    @if (!$online)
        <section class="sp-card p-6 text-center sm:p-9" role="status">
            <span class="mx-auto grid size-12 place-items-center rounded-xl bg-amber-50 text-xl text-amber-600"><i class="bi {{ $quotaReached ? 'bi-people' : 'bi-calendar-x' }}" aria-hidden="true"></i></span>
            <h2 class="sp-section-title mt-3">{{ $quotaReached ? 'Kuota Pendaftaran Terpenuhi' : 'Pendaftaran Tidak Tersedia Saat Ini' }}</h2>
            <p class="mx-auto mt-2 max-w-xl text-sm leading-6 text-slate-600">{{ $message }}</p>
        </section>
    @else
        @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 data pendaftaran:</p>
                    <ul class="mt-2 list-inside list-disc space-y-1">@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>
                </div>
            </div>
        @endif
        <form method="POST" action="{{ route('public.spmb.submit', $slug) }}" class="space-y-5">
            @csrf
            <div hidden aria-hidden="true">
                <label for="website">Website</label>
                <input id="website" type="text" name="website" tabindex="-1" autocomplete="off" aria-hidden="true">
            </div>

            <section class="sp-card overflow-hidden">
                <div class="sp-card-header">
                    <h2 class="sp-section-title"><i class="bi bi-person-vcard mr-1.5 text-blue-600" aria-hidden="true"></i>Identitas calon peserta</h2>
                    <p class="mt-1 text-xs text-slate-500">Isi data sesuai dokumen kependudukan dan ijazah terakhir.</p>
                </div>
                <div class="grid gap-4 p-5 sm:grid-cols-2 sm:p-7">
                    <div class="sm:col-span-2"><label for="jenjang" class="sp-form-label">Jenjang paket <span class="text-rose-600">*</span></label><select id="jenjang" name="jenjang" required class="sp-form-control w-full px-3 py-2.5 text-sm"><option value="">Pilih jenjang</option>@foreach (['Paket A' => 'Paket A (setara SD)', 'Paket B' => 'Paket B (setara SMP)', 'Paket C' => 'Paket C (setara SMA)'] as $value => $label)<option value="{{ $value }}" @selected(old('jenjang') === $value)>{{ $label }}</option>@endforeach</select></div>
                    <div class="sm:col-span-2"><label for="nama-siswa" class="sp-form-label">Nama lengkap <span class="text-rose-600">*</span></label><input id="nama-siswa" name="nama_siswa" value="{{ old('nama_siswa') }}" maxlength="100" autocomplete="name" required class="sp-form-control w-full px-3 py-2.5 text-sm" placeholder="Sesuai ijazah terakhir"></div>
                    <div><label for="nik" class="sp-form-label">NIK <span class="text-rose-600">*</span></label><input id="nik" name="nik" value="{{ old('nik') }}" type="text" inputmode="numeric" pattern="[0-9]{16}" maxlength="16" minlength="16" required class="sp-form-control w-full px-3 py-2.5 text-sm" placeholder="16 digit"></div>
                    <div><label for="nisn" class="sp-form-label">NISN</label><input id="nisn" name="nisn" value="{{ old('nisn') }}" type="text" inputmode="numeric" pattern="[0-9]{10}" maxlength="10" minlength="10" class="sp-form-control w-full px-3 py-2.5 text-sm" placeholder="10 digit (jika ada)"></div>
                    <div><label for="tempat-lahir" class="sp-form-label">Tempat lahir <span class="text-rose-600">*</span></label><input id="tempat-lahir" name="tempat_lahir" value="{{ old('tempat_lahir') }}" maxlength="50" required class="sp-form-control w-full px-3 py-2.5 text-sm"></div>
                    <div><label for="tanggal-lahir" class="sp-form-label">Tanggal lahir <span class="text-rose-600">*</span></label><input id="tanggal-lahir" name="tanggal_lahir" value="{{ old('tanggal_lahir') }}" type="date" max="{{ now()->toDateString() }}" required class="sp-form-control w-full px-3 py-2.5 text-sm"></div>
                    <div><label for="jenis-kelamin" class="sp-form-label">Jenis kelamin <span class="text-rose-600">*</span></label><select id="jenis-kelamin" name="jenis_kelamin" required class="sp-form-control w-full px-3 py-2.5 text-sm"><option value="">Pilih jenis kelamin</option>@foreach (['Laki-laki', 'Perempuan'] as $value)<option value="{{ $value }}" @selected(old('jenis_kelamin') === $value)>{{ $value }}</option>@endforeach</select></div>
                    <div><label for="agama" class="sp-form-label">Agama <span class="text-rose-600">*</span></label><select id="agama" name="agama" required class="sp-form-control w-full px-3 py-2.5 text-sm"><option value="">Pilih agama</option>@foreach (['Islam', 'Kristen', 'Katolik', 'Hindu', 'Budha', 'Konghucu'] as $value)<option value="{{ $value }}" @selected(old('agama') === $value)>{{ $value }}</option>@endforeach</select></div>
                    <div><label for="kewarganegaraan" class="sp-form-label">Kewarganegaraan <span class="text-rose-600">*</span></label><input id="kewarganegaraan" name="kewarganegaraan" value="{{ old('kewarganegaraan', 'WNI') }}" maxlength="30" required class="sp-form-control w-full px-3 py-2.5 text-sm"></div>
                    <div><label for="anak-ke" class="sp-form-label">Anak ke-</label><input id="anak-ke" name="anak_ke" value="{{ old('anak_ke') }}" type="number" min="1" max="100" class="sp-form-control w-full px-3 py-2.5 text-sm"></div>
                    <div><label for="jumlah-saudara" class="sp-form-label">Jumlah saudara</label><input id="jumlah-saudara" name="jumlah_saudara" value="{{ old('jumlah_saudara') }}" type="number" min="0" max="100" class="sp-form-control w-full px-3 py-2.5 text-sm"></div>
                </div>
            </section>

            <section class="sp-card overflow-hidden">
                <div class="sp-card-header">
                    <h2 class="sp-section-title"><i class="bi bi-mortarboard mr-1.5 text-blue-600" aria-hidden="true"></i>Pendidikan dan kontak</h2>
                </div>
                <div class="grid gap-4 p-5 sm:grid-cols-2 sm:p-7">
                    <div><label for="asal-sekolah" class="sp-form-label">Asal sekolah <span class="text-rose-600">*</span></label><input id="asal-sekolah" name="asal_sekolah" value="{{ old('asal_sekolah') }}" maxlength="100" required class="sp-form-control w-full px-3 py-2.5 text-sm"></div>
                    <div><label for="tahun-lulus" class="sp-form-label">Tahun lulus <span class="text-rose-600">*</span></label><input id="tahun-lulus" name="tahun_lulus" value="{{ old('tahun_lulus') }}" type="number" min="1901" max="2100" required class="sp-form-control w-full px-3 py-2.5 text-sm"></div>
                    <div class="sm:col-span-2"><label for="alamat" class="sp-form-label">Alamat lengkap <span class="text-rose-600">*</span></label><textarea id="alamat" name="alamat" rows="3" maxlength="2000" required class="sp-form-control w-full px-3 py-2.5 text-sm">{{ old('alamat') }}</textarea></div>
                    <div class="sm:col-span-2"><label for="hp" class="sp-form-label">Nomor HP/WhatsApp aktif <span class="text-rose-600">*</span></label><input id="hp" name="hp" value="{{ old('hp') }}" type="tel" maxlength="15" autocomplete="tel" required class="sp-form-control w-full px-3 py-2.5 text-sm" placeholder="Contoh: 08xxxxxxxxxx"></div>
                </div>
            </section>

            <section class="sp-card overflow-hidden">
                <div class="sp-card-header">
                    <h2 class="sp-section-title"><i class="bi bi-people mr-1.5 text-blue-600" aria-hidden="true"></i>Data orang tua dan wali</h2>
                </div>
                <div class="grid gap-5 p-5 sm:grid-cols-2 sm:p-7">
                    @foreach (['ayah' => 'Ayah', 'ibu' => 'Ibu'] as $parent => $parentLabel)
                        <fieldset class="space-y-3 rounded-xl border border-slate-200 p-4">
                            <legend class="px-1 text-sm font-bold text-blue-800">Data {{ $parentLabel }}</legend>
                            <div><label for="nama-{{ $parent }}" class="sp-form-label">Nama {{ strtolower($parentLabel) }} <span class="text-rose-600">*</span></label><input id="nama-{{ $parent }}" name="nama_{{ $parent }}" value="{{ old('nama_'.$parent) }}" maxlength="100" required class="sp-form-control w-full px-3 py-2.5 text-sm"></div>
                            <div><label for="nik-{{ $parent }}" class="sp-form-label">NIK {{ strtolower($parentLabel) }}</label><input id="nik-{{ $parent }}" name="nik_{{ $parent }}" value="{{ old('nik_'.$parent) }}" type="text" inputmode="numeric" maxlength="16" minlength="16" class="sp-form-control w-full px-3 py-2.5 text-sm"></div>
                            <div><label for="tahun-lahir-{{ $parent }}" class="sp-form-label">Tahun lahir</label><input id="tahun-lahir-{{ $parent }}" name="tahun_lahir_{{ $parent }}" value="{{ old('tahun_lahir_'.$parent) }}" type="number" min="1900" max="{{ now()->year }}" class="sp-form-control w-full px-3 py-2.5 text-sm"></div>
                            <div><label for="pendidikan-{{ $parent }}" class="sp-form-label">Pendidikan terakhir</label><select id="pendidikan-{{ $parent }}" name="pendidikan_{{ $parent }}" class="sp-form-control w-full px-3 py-2.5 text-sm"><option value="">Pilih pendidikan</option>@foreach (['Tidak sekolah', 'SD', 'SMP', 'SMA/SMK', 'D1', 'D2', 'D3', 'S1', 'S2', 'S3'] as $value)<option value="{{ $value }}" @selected(old('pendidikan_'.$parent) === $value)>{{ $value }}</option>@endforeach</select></div>
                            <div><label for="pekerjaan-{{ $parent }}" class="sp-form-label">Pekerjaan</label><input id="pekerjaan-{{ $parent }}" name="pekerjaan_{{ $parent }}" value="{{ old('pekerjaan_'.$parent) }}" maxlength="100" class="sp-form-control w-full px-3 py-2.5 text-sm"></div>
                        </fieldset>
                    @endforeach
                    <fieldset class="space-y-3 rounded-xl border border-slate-200 p-4 sm:col-span-2">
                        <legend class="px-1 text-sm font-bold text-blue-800">Data wali (opsional)</legend>
                        <div class="grid gap-3 sm:grid-cols-2">
                            <div><label for="wali" class="sp-form-label">Nama wali</label><input id="wali" name="wali" value="{{ old('wali') }}" maxlength="150" class="sp-form-control w-full px-3 py-2.5 text-sm"></div>
                            <div><label for="tahun-lahir-wali" class="sp-form-label">Tahun lahir wali</label><input id="tahun-lahir-wali" name="tahun_lahir_wali" value="{{ old('tahun_lahir_wali') }}" type="number" min="1900" max="{{ now()->year }}" class="sp-form-control w-full px-3 py-2.5 text-sm"></div>
                            <div><label for="pendidikan-wali" class="sp-form-label">Pendidikan wali</label><input id="pendidikan-wali" name="pendidikan_wali" value="{{ old('pendidikan_wali') }}" maxlength="100" class="sp-form-control w-full px-3 py-2.5 text-sm"></div>
                            <div><label for="pekerjaan-wali" class="sp-form-label">Pekerjaan wali</label><input id="pekerjaan-wali" name="pekerjaan_wali" value="{{ old('pekerjaan_wali') }}" maxlength="100" class="sp-form-control w-full px-3 py-2.5 text-sm"></div>
                        </div>
                    </fieldset>
                </div>
            </section>

            <section class="sp-card p-5 sm:p-7">
                <label for="agreement" class="flex cursor-pointer items-start gap-3 text-sm leading-6 text-slate-700">
                    <input id="agreement" type="checkbox" name="agreement" value="1" required @checked(old('agreement')) class="mt-1 size-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500">
                    <span>Saya menyatakan bahwa data yang diisi benar dan sesuai dengan dokumen asli. <span class="text-rose-600">*</span></span>
                </label>
                <button type="submit" class="sp-btn-primary mt-5 w-full justify-center sm:w-auto"><i class="bi bi-send-check" aria-hidden="true"></i>Kirim pendaftaran</button>
                <p class="mt-3 text-xs text-slate-500">Data pendaftaran akan diverifikasi oleh {{ $school->nama_pkbm }}.</p>
            </section>
        </form>
    @endif
</div>
</main>
@endsection