

<?php $__env->startSection('content'); ?>
<div class="max-w-7xl mx-auto px-4 sm:px-6 py-8 grid md:grid-cols-2 gap-6 lg:gap-8">

    
    <div class="space-y-4"
        x-data="successPager({ hasWali: <?php echo \Illuminate\Support\Js::from($siswa->tinggal_bersama === 'wali')->toHtml() ?> })"
        x-init="init()">
        <div class="card">
            <h2 class="font-semibold text-xl text-slate-800 mb-4">
                ✅ Pendaftaran Berhasil
            </h2>

            <div class="bg-green-50 border border-green-200 rounded-xl p-4 mb-4 text-sm text-green-800 leading-relaxed">
                Data calon peserta didik berhasil disimpan.
                Silakan lakukan pembayaran biaya pendaftaran.
            </div>

            <div class="flex flex-wrap items-center justify-between gap-3 text-sm text-slate-600">
                <p>
                    Data <span class="font-semibold text-slate-800" x-text="currentIndex + 1"></span>
                    dari <span class="font-semibold text-slate-800" x-text="steps.length"></span>
                </p>
                <div class="flex items-center gap-1">
                    <template x-for="(step, idx) in steps" :key="step.key">
                        <button
                            type="button"
                            @click="goTo(idx)"
                            class="h-2.5 w-2.5 rounded-full transition"
                            :class="idx === currentIndex ? 'bg-blue-600 scale-110' : 'bg-slate-300 hover:bg-slate-400'"
                            :title="step.title"
                        ></button>
                    </template>
                </div>
            </div>
        </div>

        
        <div x-show="isCurrent('siswa')" x-cloak
            class="card overflow-x-auto rounded-xl border border-slate-200 bg-white shadow-sm text-slate-700">
            <h3 class="font-semibold px-4 py-3 border-b border-slate-200 bg-slate-50">Data Peserta Didik</h3>
            <div class="p-4 text-sm text-slate-900">
                <div class="[&>div]:grid [&>div]:grid-cols-1 sm:[&>div]:grid-cols-[180px_1fr] [&>div]:gap-1 sm:[&>div]:gap-4 [&>div]:py-3 [&>div]:border-b [&>div]:border-dashed [&>div]:border-slate-200 [&>div:last-child]:border-b-0">
                    <div><p class="text-slate-500">Nama Peserta Didik</p><p><?php echo e($siswa->nama); ?></p></div>
                    <div><p class="text-slate-500">No Registrasi</p><p><?php echo e(optional($siswa->registration)->nomor_registrasi ?? '-'); ?></p></div>
                    <div><p class="text-slate-500">Jenis Kelamin</p><p><?php echo e(ui_label($siswa->jenis_kelamin)); ?></p></div>
                    <div><p class="text-slate-500">NIK</p><p><?php echo e($siswa->nik ?? '-'); ?></p></div>
                    <div><p class="text-slate-500">No KK</p><p><?php echo e($siswa->no_kk ?? '-'); ?></p></div>
                    <div><p class="text-slate-500">Tempat / Tgl Lahir</p><p><?php echo e($siswa->tempat_lahir); ?>, <?php echo e(\Carbon\Carbon::parse($siswa->tanggal_lahir)->format('d-m-Y')); ?></p></div>
                    <div><p class="text-slate-500">No Akta Lahir</p><p><?php echo e($siswa->akta_no ?? '-'); ?></p></div>
                    <div><p class="text-slate-500">Agama</p><p><?php echo e($siswa->agama ?? 'Islam'); ?></p></div>
                    <div><p class="text-slate-500">Kewarganegaraan</p><p><?php echo e($siswa->kewarganegaraan ?? 'Indonesia'); ?></p></div>
                    <div><p class="text-slate-500">Berkebutuhan Khusus</p><p><?php echo e($siswa->berkebutuhan_khusus ?? '-'); ?></p></div>
                    <div><p class="text-slate-500">Tinggal Bersama</p><p><?php echo e(ui_label($siswa->tinggal_bersama ?? '-')); ?></p></div>
                    <div><p class="text-slate-500">No KKS</p><p><?php echo e($siswa->no_kks ?? '-'); ?></p></div>
                    <div><p class="text-slate-500">Penerima KPS/PKH</p><p><?php echo e($siswa->kps ?? '-'); ?></p></div>
                    <div><p class="text-slate-500">Apakah Punya KIP</p><p><?php echo e($siswa->kip ?? '-'); ?></p></div>
                    <div><p class="text-slate-500">Apakah Peserta Layak Mendapatkan PIP</p><p><?php echo e($siswa->layak_pip ?? '-'); ?></p></div>
                    <div><p class="text-slate-500">Transportasi</p><p><?php echo e(ui_label($siswa->transportasi ?? '-')); ?></p></div>
                    <div><p class="text-slate-500">Hasil Tes</p><p><span class="badge-success"><?php echo e($siswa->hasil_tes); ?></span></p></div>
                </div>
            </div>
        </div>

        
        <div x-show="isCurrent('alamat')" x-cloak
            class="card overflow-x-auto rounded-xl border border-slate-200 bg-white shadow-sm text-slate-700">
            <h3 class="font-semibold px-4 py-3 border-b border-slate-200 bg-slate-50">Data Alamat</h3>
            <div class="p-4 text-sm text-slate-900">
                <div class="[&>div]:grid [&>div]:grid-cols-1 sm:[&>div]:grid-cols-[180px_1fr] [&>div]:gap-1 sm:[&>div]:gap-4 [&>div]:py-3 [&>div]:border-b [&>div]:border-dashed [&>div]:border-slate-200 [&>div:last-child]:border-b-0">
                    <div><p class="text-slate-500">Alamat Lengkap</p><p><?php echo e(optional($siswa->alamat)->alamat ?? '-'); ?></p></div>
                    <div><p class="text-slate-500">Provinsi</p><p><?php echo e(optional($siswa->alamat)->provinsi ?? '-'); ?></p></div>
                    <div><p class="text-slate-500">Kabupaten</p><p><?php echo e(optional($siswa->alamat)->kabupaten ?? '-'); ?></p></div>
                    <div><p class="text-slate-500">Kecamatan</p><p><?php echo e(optional($siswa->alamat)->kecamatan ?? '-'); ?></p></div>
                    <div><p class="text-slate-500">Kelurahan</p><p><?php echo e(optional($siswa->alamat)->kelurahan ?? '-'); ?></p></div>
                    <div><p class="text-slate-500">RT / RW</p><p><?php echo e(optional($siswa->alamat)->rt ?? '-'); ?> / <?php echo e(optional($siswa->alamat)->rw ?? '-'); ?></p></div>
                    <div><p class="text-slate-500">Kode Pos</p><p><?php echo e(optional($siswa->alamat)->kode_pos ?? '-'); ?></p></div>
                </div>
            </div>
        </div>

        
        <div x-show="isCurrent('ibu')" x-cloak
            class="card overflow-x-auto rounded-xl border border-slate-200 bg-white shadow-sm text-slate-700">
            <h3 class="font-semibold px-4 py-3 border-b border-slate-200 bg-slate-50">Data Ibu</h3>
            <div class="p-4 text-sm text-slate-900">
                <div class="[&>div]:grid [&>div]:grid-cols-1 sm:[&>div]:grid-cols-[180px_1fr] [&>div]:gap-1 sm:[&>div]:gap-4 [&>div]:py-3 [&>div]:border-b [&>div]:border-dashed [&>div]:border-slate-200 [&>div:last-child]:border-b-0">
                    <div><p class="text-slate-500">Nama Ibu</p><p><?php echo e(optional($siswa->ibu)->nama ?? '-'); ?></p></div>
                    <div><p class="text-slate-500">No HP</p><p><?php echo e(optional($siswa->ibu)->no_hp ?? '-'); ?></p></div>
                    <div><p class="text-slate-500">NIK</p><p><?php echo e(optional($siswa->ibu)->nik ?? '-'); ?></p></div>
                    <div><p class="text-slate-500">Tahun Lahir</p><p><?php echo e(optional($siswa->ibu)->tahun_lahir ?? '-'); ?></p></div>
                    <div><p class="text-slate-500">Pendidikan</p><p><?php echo e(optional($siswa->ibu)->pendidikan ?? '-'); ?></p></div>
                    <div><p class="text-slate-500">Pekerjaan</p><p><?php echo e(optional($siswa->ibu)->pekerjaan ?? '-'); ?></p></div>
                    <div><p class="text-slate-500">Penghasilan</p><p><?php echo e(optional($siswa->ibu)->penghasilan ?? '-'); ?></p></div>
                </div>
            </div>
        </div>

        
        <div x-show="isCurrent('ayah')" x-cloak
            class="card overflow-x-auto rounded-xl border border-slate-200 bg-white shadow-sm text-slate-700">
            <h3 class="font-semibold px-4 py-3 border-b border-slate-200 bg-slate-50">Data Ayah</h3>
            <div class="p-4 text-sm text-slate-900">
                <div class="[&>div]:grid [&>div]:grid-cols-1 sm:[&>div]:grid-cols-[180px_1fr] [&>div]:gap-1 sm:[&>div]:gap-4 [&>div]:py-3 [&>div]:border-b [&>div]:border-dashed [&>div]:border-slate-200 [&>div:last-child]:border-b-0">
                    <div><p class="text-slate-500">Nama Ayah</p><p><?php echo e(optional($siswa->ayah)->nama ?? '-'); ?></p></div>
                    <div><p class="text-slate-500">NIK</p><p><?php echo e(optional($siswa->ayah)->nik ?? '-'); ?></p></div>
                    <div><p class="text-slate-500">Tahun Lahir</p><p><?php echo e(optional($siswa->ayah)->tahun_lahir ?? '-'); ?></p></div>
                    <div><p class="text-slate-500">Pendidikan</p><p><?php echo e(optional($siswa->ayah)->pendidikan ?? '-'); ?></p></div>
                    <div><p class="text-slate-500">Pekerjaan</p><p><?php echo e(optional($siswa->ayah)->pekerjaan ?? '-'); ?></p></div>
                    <div><p class="text-slate-500">Penghasilan</p><p><?php echo e(optional($siswa->ayah)->penghasilan ?? '-'); ?></p></div>
                </div>
            </div>
        </div>

        
        <div x-show="isCurrent('wali')" x-cloak
            class="card overflow-x-auto rounded-xl border border-slate-200 bg-white shadow-sm text-slate-700">
            <h3 class="font-semibold px-4 py-3 border-b border-slate-200 bg-slate-50">Data Wali</h3>
            <div class="p-4 text-sm text-slate-900">
                <div class="[&>div]:grid [&>div]:grid-cols-1 sm:[&>div]:grid-cols-[180px_1fr] [&>div]:gap-1 sm:[&>div]:gap-4 [&>div]:py-3 [&>div]:border-b [&>div]:border-dashed [&>div]:border-slate-200 [&>div:last-child]:border-b-0">
                    <div><p class="text-slate-500">Nama Wali</p><p><?php echo e($siswa->wali_nama ?? '-'); ?></p></div>
                    <div><p class="text-slate-500">No HP Wali</p><p><?php echo e($siswa->hp_wali ?? '-'); ?></p></div>
                    <div><p class="text-slate-500">Hubungan</p><p><?php echo e($siswa->wali_hubungan ?? '-'); ?></p></div>
                </div>
            </div>
        </div>

        
        <div x-show="isCurrent('pendukung')" x-cloak
            class="card overflow-x-auto rounded-xl border border-slate-200 bg-white shadow-sm text-slate-700">
            <h3 class="font-semibold px-4 py-3 border-b border-slate-200 bg-slate-50">Data Pendukung</h3>
            <div class="p-4 text-sm text-slate-900">
                <div class="[&>div]:grid [&>div]:grid-cols-1 sm:[&>div]:grid-cols-[180px_1fr] [&>div]:gap-1 sm:[&>div]:gap-4 [&>div]:py-3 [&>div]:border-b [&>div]:border-dashed [&>div]:border-slate-200 [&>div:last-child]:border-b-0">
                    <div><p class="text-slate-500">Tinggi / Berat</p><p><?php echo e(optional($siswa->dataPendukung)->tinggi ?? '-'); ?> cm / <?php echo e(optional($siswa->dataPendukung)->berat ?? '-'); ?> kg</p></div>
                    <div><p class="text-slate-500">Jarak Rumah</p><p><?php echo e(optional($siswa->dataPendukung)->jarak ?? '-'); ?> km</p></div>
                    <div><p class="text-slate-500">Jumlah Saudara</p><p><?php echo e(optional($siswa->dataPendukung)->jumlah_saudara ?? '-'); ?></p></div>
                    <div><p class="text-slate-500">Anak Ke (berdasarkan KK)</p><p><?php echo e(optional($siswa->dataPendukung)->anak_ke ?? '-'); ?></p></div>
                    <?php
                        $dp = $siswa->dataPendukung;
                        $isManual = optional($dp)->is_tk_manual;
                        $tkNama = $isManual ? $dp->nama_tk_manual : optional(optional($dp)->paudTk)->nama;
                        $tkAlamat = $isManual ? $dp->alamat_tk : optional(optional($dp)->paudTk)->alamat;
                    ?>
                    <div><p class="text-slate-500">Asal PAUD / TK</p><p><?php echo e($tkNama ?? '-'); ?></p></div>
                    <div><p class="text-slate-500">Alamat TK</p><p><?php echo e($tkAlamat ?? '-'); ?></p></div>
                    <div><p class="text-slate-500">Hobi / Cita-cita</p><p><?php echo e(optional($siswa->dataPendukung)->hobi ?? '-'); ?> / <?php echo e(optional($siswa->dataPendukung)->cita_cita ?? '-'); ?></p></div>
                </div>
            </div>
        </div>

        <div class="card flex flex-wrap items-center justify-between gap-3">
            <button
                type="button"
                @click="prev()"
                :disabled="currentIndex === 0"
                class="px-4 py-2 rounded-lg border border-slate-300 text-slate-700 hover:bg-slate-100 disabled:opacity-50 disabled:cursor-not-allowed transition focus:outline-none focus:ring-2 focus:ring-blue-300"
            >
                ← Sebelumnya
            </button>
            <p class="text-sm text-slate-600" x-text="currentTitle()"></p>
            <button
                type="button"
                @click="next()"
                :disabled="currentIndex === steps.length - 1"
                class="px-4 py-2 rounded-lg bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition focus:outline-none focus:ring-2 focus:ring-blue-300"
            >
                Berikutnya →
            </button>
        </div>
    </div>

    
    <div class="card space-y-4 h-fit md:sticky md:top-4">

        
        <div class="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
            <h3 class="font-semibold px-4 py-3 border-b border-slate-200 bg-slate-50">Rincian Biaya Pendaftaran</h3>
            <div class="p-3 space-y-3 text-sm text-slate-700">
                <?php $grandTotal = 0; ?>
                <?php $__currentLoopData = $siswa->tagihan; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $t): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <div class="rounded-lg border border-slate-200 bg-white p-3">
                        <div class="flex items-start justify-between gap-3">
                            <p class="font-semibold text-slate-800"><?php echo e($t->biaya->nama_biaya ?? '-'); ?></p>
                            <span class="badge-<?php echo e($t->status === 'lunas' ? 'success' : 'warning'); ?>"><?php echo e(ui_label($t->status)); ?></span>
                        </div>
                        <div class="mt-3 grid grid-cols-2 gap-x-4 gap-y-2 text-xs sm:text-sm">
                            <p class="text-slate-500">Nominal</p>
                            <p class="text-slate-900 text-right"><?php echo e(number_format($t->nominal,0,',','.')); ?></p>
                            <p class="text-slate-500">Diskon</p>
                            <p class="text-slate-900 text-right"><?php echo e(number_format($t->diskon,0,',','.')); ?></p>
                            <p class="text-slate-500">Nama Voucher</p>
                            <p class="text-slate-900 text-right"><?php echo e($t->kode_voucher ?? '-'); ?></p>
                            <p class="text-slate-500">Sub Total</p>
                            <p class="font-semibold text-slate-900 text-right"><?php echo e(number_format($t->total,0,',','.')); ?></p>
                        </div>
                    </div>
                    <?php $grandTotal += $t->total; ?>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

                <div class="rounded-lg border border-green-200 bg-green-50/70 p-3">
                    <div class="flex items-center justify-between gap-3">
                        <p class="font-semibold text-slate-700">Total Bayar</p>
                        <p class="text-base font-bold text-slate-900"><?php echo e(number_format($grandTotal,0,',','.')); ?></p>
                    </div>
                </div>
            </div>
        </div>

        
        <div class="flex flex-row flex-nowrap gap-2 w-full">
            <button onclick="openModalPetugas(<?php echo e($siswa->id); ?>)"
                class="basis-1/3 min-w-0 inline-flex items-center justify-center gap-1 rounded-lg bg-blue-600 px-2 py-2 text-white text-[11px] leading-tight font-semibold hover:bg-blue-700 transition focus:outline-none focus:ring-2 focus:ring-blue-300 text-center overflow-hidden">
                <span>🖨️</span>
                <span class="truncate">Cetak Formulir</span>
            </button>

            <button onclick="bukaPasswordModal('<?php echo e(route('pendaftaran.biaya', $siswa)); ?>')"
                class="basis-1/3 min-w-0 inline-flex items-center justify-center gap-1 rounded-lg bg-green-600 border border-green-700 px-2 py-2 text-white text-[11px] leading-tight font-semibold shadow-sm hover:bg-green-700 transition focus:outline-none focus:ring-2 focus:ring-green-300 text-center overflow-hidden">
                <span>💰</span>
                <span class="truncate">Input & Cetak Nota</span>
            </button>

            <button onclick="window.location='<?php echo e(route('pendaftaran.public')); ?>'"
                class="basis-1/3 min-w-0 inline-flex items-center justify-center gap-1 rounded-lg bg-slate-700 px-2 py-2 text-white text-[11px] leading-tight font-semibold hover:bg-slate-800 transition focus:outline-none focus:ring-2 focus:ring-slate-300 text-center overflow-hidden">
                <span>➕</span>
                <span class="truncate">Daftarkan Lagi</span>
            </button>
        </div>

        <?php echo $__env->make('pendaftaran.modal-cetak-formulir', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>

    </div>

</div>

<div id="modalPassword"
    onclick="closePasswordModal()"
    class="fixed inset-0 bg-black bg-opacity-40 hidden items-center justify-center z-50">

    <div class="bg-white p-6 rounded w-80 relative" onclick="event.stopPropagation()">

        <button
            type="button"
            onclick="closePasswordModal()"
            class="absolute top-2 right-2 text-slate-500 hover:text-slate-700 p-1"
            aria-label="Tutup modal"
        >
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
        </button>

        <h3 class="font-semibold mb-3">
            Password Panitia
        </h3>

        <form method="POST" action="<?php echo e(route('verifikasi.password.panitia')); ?>">
            <?php echo csrf_field(); ?>

            <input type="hidden" name="redirect_url" id="redirectUrl">

            <input
                type="password"
                name="password"
                class="w-full border rounded px-3 py-2 mb-3"
                placeholder="Masukkan password"
                required
            >

            <div class="flex gap-2">
                <button
                    type="button"
                    onclick="closePasswordModal()"
                    class="w-1/2 bg-slate-200 text-slate-700 px-4 py-2 rounded hover:bg-slate-300"
                >
                    Batal
                </button>
                <button class="w-1/2 bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
                    Verifikasi
                </button>
            </div>
        </form>

    </div>

</div>

<script>
    function bukaPasswordModal(url) {
        document.getElementById('redirectUrl').value = url;

        const modal = document.getElementById('modalPassword');
        modal.classList.remove('hidden');
        modal.classList.add('flex');
    }

    function closePasswordModal() {
        const modal = document.getElementById('modalPassword');
        modal.classList.add('hidden');
        modal.classList.remove('flex');
    }

    document.addEventListener('alpine:init', () => {
        Alpine.data('successPager', ({ hasWali }) => ({
            currentIndex: 0,
            steps: [],
            init() {
                this.steps = [
                    { key: 'siswa', title: 'Data Siswa' },
                    { key: 'alamat', title: 'Data Alamat' },
                    { key: 'ibu', title: 'Data Ibu' },
                    { key: 'ayah', title: 'Data Ayah' },
                    ...(hasWali ? [{ key: 'wali', title: 'Data Wali' }] : []),
                    { key: 'pendukung', title: 'Data Pendukung' },
                ];
            },
            isCurrent(key) {
                return this.steps[this.currentIndex]?.key === key;
            },
            currentTitle() {
                return this.steps[this.currentIndex]?.title || '';
            },
            goTo(index) {
                if (index < 0 || index >= this.steps.length) {
                    return;
                }
                this.currentIndex = index;
            },
            next() {
                if (this.currentIndex < this.steps.length - 1) {
                    this.currentIndex += 1;
                }
            },
            prev() {
                if (this.currentIndex > 0) {
                    this.currentIndex -= 1;
                }
            }
        }));
    });
</script>
<?php $__env->stopSection(); ?>



<?php echo $__env->make('layouts.public', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/sdmk4757/public_html/ppdb.sdmuhwonorejo.com/resources/views/pendaftaran/sukses.blade.php ENDPATH**/ ?>