{{-- resources/views/public/ppdb/success.blade.php --}}
@extends('layouts.public')
@section('title', 'Pendaftaran Berhasil')

@section('content')
<div class="container py-5 mt-5">
    <div class="row justify-content-center">
        <div class="col-lg-6 text-center">
            <div class="card border-0 shadow-lg rounded-4 overflow-hidden pt-5 pb-4 px-4">
                <i class="bi bi-check-circle-fill text-success" style="font-size: 5rem;"></i>
                <h2 class="fw-bold text-dark mt-3">Alhamdulillah!</h2>
                <p class="text-muted lead mb-4">Formulir pendaftaran Anda telah berhasil kami terima dan masuk ke dalam sistem.</p>
                
                <div class="bg-light p-4 rounded-3 mb-4 border border-secondary border-opacity-25">
                    <p class="mb-1 text-muted fw-bold" style="font-size: 13px; letter-spacing: 1px;">NOMOR PENDAFTARAN ANDA</p>
                    <h3 class="fw-black text-primary mb-0" style="letter-spacing: 2px;">{{ $ppdb->no_pendaftaran }}</h3>
                </div>

                <div class="text-start bg-primary bg-opacity-10 p-3 rounded mb-4" style="font-size: 14px;">
                    <strong>Data Singkat:</strong>
                    <ul class="mb-0 mt-2 list-unstyled text-dark">
                        <li class="mb-1"><strong>Nama:</strong> {{ $ppdb->nama_lengkap }}</li>
                        <li class="mb-1"><strong>Kelas Tujuan:</strong> {{ $ppdb->kelas->nama_kelas ?? '-' }}</li>
                        <li><strong>Status:</strong> <span class="badge bg-warning text-dark">{{ $ppdb->status }}</span></li>
                    </ul>
                </div>

                <p class="text-muted small mb-4">Simpan baik-baik nomor pendaftaran di atas. Silakan tangkap layar (*screenshot*) halaman ini sebagai bukti pendaftaran fisik jika diperlukan saat verifikasi ke madrasah.</p>

                <a href="{{ route('home') }}" class="btn btn-primary rounded-pill px-4 fw-bold shadow-sm">Kembali ke Beranda</a>
            </div>
        </div>
    </div>
</div>
@endsection