@extends('frontend.layouts.main')
@section('title', 'Pendaftaran Berhasil — ' . ($seoSetting->site_name ?? 'PT Bumenjaya Praduta Abadi'))

@section('content')
<section style="padding:80px 0;background:var(--c-50);min-height:70vh;display:flex;align-items:center;">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-6 text-center" data-aos="fade-up">
                {{-- Success Icon --}}
                <div style="width:90px;height:90px;background:#dcfce7;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 24px;box-shadow:0 0 0 16px rgba(16,185,129,.1);">
                    <i class="fas fa-check-circle" style="color:#16a34a;font-size:2.5rem;"></i>
                </div>

                <h1 style="font-size:1.75rem;font-weight:800;color:var(--c-900);margin-bottom:10px;">Pendaftaran Berhasil!</h1>
                <p style="font-size:15.5px;color:var(--c-500);margin-bottom:28px;">
                    Terima kasih, <strong>{{ $reg->full_name }}</strong>! Formulir pendaftaran Anda telah diterima.
                </p>

                {{-- Registration Card --}}
                <div style="background:var(--white);border:1px solid var(--c-200);border-radius:20px;padding:28px;margin-bottom:24px;text-align:left;">
                    <div style="text-align:center;margin-bottom:20px;">
                        <div style="font-size:11px;color:var(--c-400);text-transform:uppercase;letter-spacing:.07em;margin-bottom:6px;">Nomor Registrasi</div>
                        <div style="font-family:var(--ff-display);font-size:1.6rem;font-weight:800;color:var(--c-blue);letter-spacing:.05em;">{{ $reg->registration_number }}</div>
                        <div style="font-size:12px;color:var(--c-400);margin-top:4px;">Simpan nomor ini untuk mengecek status pendaftaran Anda</div>
                    </div>

                    <div style="border-top:1px solid var(--c-100);padding-top:18px;">
                        @foreach([
                            ['fas fa-book-open','Program', $reg->program->title],
                            ['fas fa-user','Nama', $reg->full_name],
                            ['fas fa-envelope','Email', $reg->email],
                            ['fas fa-phone','Telepon', $reg->phone],
                            ['fas fa-calendar','Tanggal Daftar', $reg->created_at->format('d M Y, H:i').' WIB'],
                        ] as $info)
                        <div style="display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--c-100);">
                            <i class="{{ $info[0] }}" style="color:var(--c-400);font-size:12px;margin-top:2px;width:14px;flex-shrink:0;"></i>
                            <span style="font-size:13px;color:var(--c-500);width:100px;flex-shrink:0;">{{ $info[1] }}</span>
                            <span style="font-size:13.5px;font-weight:600;color:var(--c-900);">{{ $info[2] }}</span>
                        </div>
                        @endforeach
                        <div style="display:flex;gap:10px;align-items:center;padding-top:10px;">
                            <i class="fas fa-circle" style="color:#f59e0b;font-size:10px;flex-shrink:0;"></i>
                            <span style="font-size:13px;color:var(--c-500);">Status</span>
                            <span style="font-size:13.5px;font-weight:700;color:#d97706;background:#fef3c7;border:1px solid #fde68a;padding:3px 10px;border-radius:100px;">Menunggu Review</span>
                        </div>
                    </div>
                </div>

                {{-- Next Steps --}}
                <div style="background:var(--c-blue-xs);border:1px solid var(--c-blue-sm);border-radius:14px;padding:20px;margin-bottom:24px;text-align:left;">
                    <div style="font-size:13.5px;font-weight:700;color:var(--c-navy);margin-bottom:12px;">
                        <i class="fas fa-list-check me-2" style="color:var(--c-blue);"></i>Langkah Selanjutnya
                    </div>
                    @foreach([
                        ['1','Tim kami akan mereview berkas pendaftaran Anda dalam 2-3 hari kerja'],
                        ['2','Jika memenuhi syarat, Anda akan dihubungi via WhatsApp untuk jadwal interview'],
                        ['3','Cek status pendaftaran kapan saja menggunakan nomor registrasi Anda'],
                    ] as $step)
                    <div style="display:flex;gap:10px;margin-bottom:9px;font-size:13.5px;color:var(--c-700);">
                        <div style="width:22px;height:22px;border-radius:50%;background:var(--c-blue);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;flex-shrink:0;margin-top:1px;">{{ $step[0] }}</div>
                        {{ $step[1] }}
                    </div>
                    @endforeach
                </div>

                <div class="d-flex gap-3 justify-content-center flex-wrap">
                    <a href="{{ route('frontend.registration.check') }}" class="btn-corp btn-blue">
                        <i class="fas fa-search"></i> Cek Status Pendaftaran
                    </a>
                    <a href="{{ route('frontend.index') }}" class="btn-corp btn-outline">
                        <i class="fas fa-home"></i> Kembali ke Beranda
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection