@extends('layouts.app')
@section('title', 'Pendaftaran Berhasil – SD Negeri 4 Keling')

@section('content')
<style>
@keyframes sdPopIn{
  0%{opacity:0;transform:scale(.85) translateY(10px)}
  100%{opacity:1;transform:scale(1) translateY(0)}
}
@keyframes sdCheckPop{
  0%{transform:scale(0)}
  60%{transform:scale(1.25)}
  100%{transform:scale(1)}
}
.sd-sukses-wrap{animation:sdPopIn .5s ease both}
.sd-sukses-check{animation:sdCheckPop .6s cubic-bezier(.34,1.56,.64,1) .15s both}
</style>

<div class="sd-page-hero" style="background:linear-gradient(90deg,rgba(0,0,0,.65),rgba(0,0,0,.30),rgba(0,0,0,.05)), url('{{ (isset($heroImages['pendaftaran']) ? $heroImages['pendaftaran']->url : asset('images/buatpendaftaran.jpeg')) }}');background-size:cover;background-position:center;">
  <div class="sd-page-hero-inner">
    <p class="sd-page-breadcrumb">
      <a href="{{ route('home') }}">Beranda</a> &nbsp;/&nbsp;
      <span>Pendaftaran Berhasil</span>
    </p>
    <h1 class="sd-page-title">Pendaftaran Berhasil Dikirim</h1>
    <div class="sd-page-accent"></div>
  </div>
</div>

<div class="sd-page-body">
  <div class="sd-sukses-wrap" style="max-width:600px;margin:0 auto;text-align:center;padding:40px 20px">
    <i class="bi bi-check-circle-fill sd-sukses-check" style="font-size:3.5rem;color:#27ae60;margin-bottom:16px;display:block"></i>
    <h2 style="font-size:1.3rem;font-weight:700;color:var(--teks);margin-bottom:10px">Terima kasih, {{ $pendaftaran->nama_lengkap }}!</h2>
    <p style="font-size:.9rem;color:var(--teks-abu);line-height:1.8;margin-bottom:24px">
      Formulir pendaftaran Anda telah kami terima dan akan segera diverifikasi oleh panitia.
      Simpan nomor pendaftaran di bawah ini untuk memantau status seleksi.
    </p>

    <div style="background:var(--biru);color:var(--putih);padding:24px;margin-bottom:24px">
      <p style="font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--kuning);margin-bottom:6px">Nomor Pendaftaran Anda</p>
      <p style="font-size:1.6rem;font-weight:800;letter-spacing:.03em">{{ $pendaftaran->nomor_pendaftaran }}</p>
    </div>

    <div style="text-align:left;background:#fafcff;border:1px solid var(--abu);padding:20px;margin-bottom:24px;font-size:.85rem">
      <p style="margin-bottom:8px"><strong>Nama:</strong> {{ $pendaftaran->nama_lengkap }}</p>
      <p style="margin-bottom:8px"><strong>Tanggal Lahir:</strong> {{ $pendaftaran->tanggal_lahir->format('d F Y') }}</p>
      <p style="margin-bottom:8px"><strong>Jalur Pendaftaran:</strong> {{ $pendaftaran->jalur_pendaftaran }}</p>
      <p><strong>Status:</strong> {{ $pendaftaran->status_pendaftaran }}</p>
    </div>

    <p style="font-size:.8rem;color:var(--teks-abu);margin-bottom:24px">
      Gunakan nomor pendaftaran di atas beserta tanggal lahir calon siswa untuk mengecek status kapan saja di halaman
      <a href="{{ route('pendaftaran.cek-status.form') }}" style="color:var(--biru);font-weight:600">Cek Status Pendaftaran</a>.
    </p>

    <a href="{{ route('home') }}" class="sd-form-submit" style="text-decoration:none">Kembali ke Beranda</a>
  </div>
</div>
@endsection