@extends('frontend.layouts.main')
@section('title','Registrasi 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">
                <div style="width:88px;height:88px;background:#dcfce7;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 22px;box-shadow:0 0 0 16px rgba(22,163,74,.1);">
                    <i class="fas fa-check-circle" style="color:#16a34a;font-size:2.4rem;"></i>
                </div>
                <h1 style="font-size:1.75rem;font-weight:800;color:var(--c-900);margin-bottom:10px;">Registrasi Berhasil!</h1>
                <p style="font-size:15.5px;color:var(--c-500);margin-bottom:28px;">
                    Terima kasih, <strong>{{ $app->full_name }}</strong>! Formulir registrasi TKI Anda telah berhasil dikirim.
                </p>

                <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:22px;padding-bottom:18px;border-bottom:1px solid var(--c-100);">
                        <div style="font-size:11px;color:var(--c-400);text-transform:uppercase;letter-spacing:.07em;margin-bottom:6px;">Nomor Aplikasi</div>
                        <div style="font-family:var(--ff-display);font-size:1.8rem;font-weight:800;color:var(--c-blue);letter-spacing:.05em;">{{ $app->application_number }}</div>
                        <div style="font-size:12px;color:var(--c-400);margin-top:4px;">Simpan nomor ini untuk mengecek status Anda</div>
                    </div>
                    @foreach([
                        ['fas fa-globe','Negara Tujuan', $app->target_country.' '.($app->target_position ? '('.$app->target_position.')' : '')],
                        ['fas fa-user','Nama', $app->full_name],
                        ['fab fa-whatsapp','WhatsApp', $app->whatsapp],
                        ['fas fa-map-marker-alt','Domisili', $app->domicile_city],
                        ['fas fa-graduation-cap','Pendidikan', $app->education_level],
                        ['fas fa-calendar','Tanggal Daftar', $app->created_at->format('d M Y, H:i').' WIB'],
                    ] as $info)
                    <div style="display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--c-100);">
                        <i class="{{ $info[0] }}" style="color:var(--c-400);font-size:12px;width:14px;flex-shrink:0;"></i>
                        <span style="font-size:13px;color:var(--c-500);width:110px;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;align-items:center;gap:10px;padding-top:10px;">
                        <i class="fas fa-circle" style="color:#f59e0b;font-size:10px;"></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 style="background:var(--c-blue-xs);border:1px solid var(--c-blue-sm);border-radius:14px;padding:18px;margin-bottom:24px;text-align:left;">
                    <div style="font-size:13.5px;font-weight:700;color:var(--c-blue);margin-bottom:10px;">
                        <i class="fas fa-list-check me-2"></i>Proses Selanjutnya
                    </div>
                    @foreach([
                        ['1','Tim kami akan mereview data registrasi Anda dalam 2-3 hari kerja'],
                        ['2','Jika lolos seleksi awal, tim kami akan menghubungi via WhatsApp untuk jadwal interview'],
                        ['3','Gunakan nomor aplikasi di atas untuk mengecek status kapan saja'],
                    ] 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.job-application.check') }}" class="btn-corp btn-blue">
                        <i class="fas fa-search"></i> Cek Status Aplikasi
                    </a>
                    <a href="{{ route('frontend.jobs') }}" class="btn-corp btn-outline">
                        <i class="fas fa-briefcase"></i> Lihat Lowongan Lain
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection