@section('title', 'Konfirmasi')
@extends('Frontend.Layouts.app2')

@section('content')
<br><br>
    <x-header-section-page title="Konfirmasi Pendaftaran {{ $settings['nama kampus'] ?? 'Nama kampus tidak tersedia' }}" breadcrumb-home="Home"
        breadcrumb-current="Konfirmasi Pendaftaran" />

    <div class="bg-gray-50 py-10">
        <div class="container mx-auto px-4 lg:px-20 max-w-screen-lg">
            <div class="bg-white shadow-lg rounded-lg overflow-hidden border-t-4 border-primary">
                <!-- Header -->
                <div class="bg-primary  p-6 text-center"  style="color:#fff">
                    <h1 class="text-2xl font-poppins font-bold">Terima Kasih Telah Mendaftar</h1>
                    <p class="text-sm mt-2 font-dmsans">
                        Kami telah mengirimkan email konfirmasi ke alamat Anda. Silakan periksa Inbox atau folder Spam.
                    </p>
                </div>

                <!-- Body Content -->
                <div class="p-8 font-dmsans text-primary">
                    <!-- Nomor Pendaftaran -->
                    <div class="text-center mb-6">
                        <p class="text-lg font-poppins">Nomor Pendaftaran Anda:</p>
                        <p class="text-3xl font-bold text-accent">PO_{{ $registration->daftar_id }}</p>
                    </div>

                    <!-- Informasi Biaya -->
                    <div class="mb-6">
                        <h3 class="text-lg font-semibold font-poppins">Informasi Biaya Pendaftaran:</h3>
                        <ul class="list-disc list-inside text-sm mt-2">
                        <li><strong>S1:</strong>  {{ $settings['s1'] ?? 'tidak tersedia' }},-</li>    
                        <li><strong>S1 RPL:</strong>  {{ $settings['s1rpl'] ?? 'tidak tersedia' }},-</li>           
                        <li><strong>S2 RPL:</strong>  {{ $settings['rpl'] ?? 'tidak tersedia' }},-</li>           

                        <li><strong>S2:</strong>  {{ $settings['s2'] ?? 'tidak tersedia' }},-</li>           
                        </ul>
                    </div>

                    <!-- Pembayaran -->
                    <div class="mb-6">
                        <h3 class="text-lg font-semibold font-poppins">Rekening Pembayaran:</h3>
                        <p class="mt-2 text-sm">
                            <strong>Bank BNI</strong><br>
                            No Rekening: <strong>8282823875</strong><br>
                            a.n. <strong>Edukasi Indonesia Jaya</strong>
                        </p>
                    </div>

                    <!-- Cara Konfirmasi -->
                    <div class="mb-6">
                        <h3 class="text-lg font-semibold font-poppins">Cara Konfirmasi Pembayaran:</h3>
                        <div class="bg-gray-100 p-4 rounded-lg mt-2">
                            <p class="text-sm font-medium">1. Simpan bukti transfer Anda.</p>
                            <p class="text-sm font-medium mt-2">2. Pilih salah satu cara konfirmasi:</p>
                            <ul class="list-disc list-inside mt-2 text-sm">
                                <li class="mt-3">
                                    <a href="https://api.whatsapp.com/send?phone=6287890198284&text=Halo%20Admin%20Saya%20Sudah%20Daftar%20Online%20di%20{{ $settings['nama kampus'] ?? 'Nama kampus tidak tersedia' }}." 
                                       data-aos="fade-up"  
                                       style="color:#fff; background-color:#40c351; display: inline-block;"
                                       class="text-xs font-poppins py-1 px-3 rounded shadow-sm hover:bg-accent transition decoration-none">
                                        Konfirmasi Via WhatsApp
                                    </a>
                                </li>
                                <li class="mt-2">Hubungi petugas di kampus.</li>
                            </ul>
                        </div>
                    </div>

                    <div class="mb-6">
                        <h3 class="text-lg font-semibold font-poppins">Cetak Formulir Pendaftaran:</h3>
                        <div class="bg-gray-100 p-4 rounded-lg mt-2">
                            <div class="flex flex-col sm:flex-row items-center justify-between gap-4">
                                <p data-aos="fade-up" class="text-sm font-medium text-center sm:text-left">
                                    Klik tombol di bawah ini untuk mencetak formulir pendaftaran Anda.
                                </p>
                                <a href="{{ route('cetak.confirm', $registration->daftar_id) }}" 
                                   data-aos="fade-up" 
                                   style="color:#fff"
                                   class="bg-primary text-sm font-poppins py-2 px-4 rounded-lg shadow-md hover:bg-accent transition whitespace-nowrap">
                                    Cetak Formulir
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="text-center mt-6 border-t pt-6">
                        <p class="text-sm font-dmsans">
                            Kami akan menghubungi Anda untuk wawancara melalui nomor WhatsApp:
                            <span class="font-semibold text-accent">{{ $registration->no_wa }}</span>
                        </p>
                    </div>
                </div>

                <div class="bg-gray-100 p-6 text-center">
                    <img src="{{ asset('./images/logo/logo1.png') }}" alt="{{ $settings['nama kampus'] ?? 'Nama kampus tidak tersedia' }}" class="mx-auto w-32 mb-2" >
                    <p class="text-sm font-poppins text-gray-600">{{ $settings['nama kampus'] ?? 'Nama kampus tidak tersedia' }}</p>
                </div>
            </div>
        </div>
    </div>
@endsection