@extends('layouts.ppdb')

@php
    use App\Models\SpmbSetting;

    // --- SINKRONISASI PENGATURAN DARI DATABASE ---
    $pColor = SpmbSetting::get('spmb_primary_color', '#0f766e'); // Default Teal-700
    $aColor = SpmbSetting::get('spmb_accent_color', '#f59e0b');  // Default Amber-500
    
    // Cek keberadaan file gambar hero (brosur)
    $dbPath = SpmbSetting::get('spmb_hero_image', '');
    $imageExists = !empty($dbPath) && file_exists(public_path($dbPath));
    $heroImg = $imageExists ? asset($dbPath) : asset('assets/img/landing/header.jpeg');
@endphp

@section('title', 'Alur Pendaftaran & Persyaratan | Smart Cendekia')

@section('content')
    <style>
        /* --- CORE VARIABLES --- */
        :root {
            --brand-green: {{ $pColor }};
            --brand-gold: {{ $aColor }};
            --brand-green-light: color-mix(in srgb, var(--brand-green) 12%, white);
            --brand-green-dark: color-mix(in srgb, var(--brand-green) 85%, black);
        }

        body { font-family: 'Inter', sans-serif; background-color: #FAFAFA; }

        /* =========================================
            FORCE DYNAMIC COLORS (SINKRONISASI DATABASE)
        ========================================= */
        .tw-bg-brandGreen { background-color: var(--brand-green) !important; }
        .tw-text-brandGreen { color: var(--brand-green) !important; }
        .tw-border-brandGreen { border-color: var(--brand-green) !important; }
        
        .tw-bg-brandGold { background-color: var(--brand-gold) !important; }
        .tw-text-brandGold { color: var(--brand-gold) !important; }
        .tw-border-brandGold { border-color: var(--brand-gold) !important; }
        
        .tw-bg-brandGreen-dark { background-color: var(--brand-green-dark) !important; }

        /* --- FLUID TYPOGRAPHY --- */
        .fluid-title { font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.1; letter-spacing: -0.03em; }

        /* --- TIMELINE CUSTOM STYLES --- */
        .timeline-wrapper { position: relative; padding-left: 2rem; margin-top: 1rem;}
        
        /* Garis Vertikal */
        .timeline-wrapper::before {
            content: ''; position: absolute;
            left: 15px; top: 10px; bottom: 0; width: 2px;
            background: linear-gradient(to bottom, var(--brand-green), #e2e8f0 30%); 
        }
        
        .timeline-item { position: relative; margin-bottom: 2.5rem; }
        
        /* Bulatan Angka Dinamis */
        .timeline-marker {
            position: absolute; left: -33px; top: 16px;
            width: 32px; height: 32px; border-radius: 50%;
            background-color: var(--brand-green); 
            color: white; display: flex; align-items: center; justify-content: center;
            font-weight: 900; font-size: 0.875rem; z-index: 10;
            border: 4px solid #FAFAFA; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }
        
        .timeline-item:hover .timeline-marker {
            transform: scale(1.15);
            background-color: var(--brand-gold);
            color: var(--brand-green-dark);
        }
        
        .timeline-marker.finish { 
            background-color: #10B981; 
        } 

        /* Card Hover Effect */
        .hover-lift { 
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease; 
            border: 1px solid #f1f5f9; 
        }
        .hover-lift:hover { 
            transform: translateY(-5px); 
            box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.08); 
            border-color: var(--brand-green); 
        }

        /* Animasi Masuk */
        .stagger-up { opacity: 0; transform: translateY(30px); animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        .delay-1 { animation-delay: 0.1s; } 
        .delay-2 { animation-delay: 0.2s; }
        .delay-3 { animation-delay: 0.3s; }
        @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
    </style>

    {{-- 
        ===============================================================
        1. HEADER IMAGE (FULL WIDTH)
        ===============================================================
    --}}
    @if($imageExists)
    <div class="tw-w-full tw-pt-[70px] md:tw-pt-[80px] tw-bg-white">
        <img src="{{ $heroImg }}" 
             class="tw-w-full tw-h-auto tw-max-h-[60vh] tw-object-cover tw-block tw-shadow-sm" 
             alt="Header Panduan PPDB">
    </div>
    @endif

    {{-- 
        ===============================================================
        2. JUDUL HALAMAN (DINAMIS & ELEGAN)
        ===============================================================
    --}}
    <section class="tw-relative tw-bg-brandGreen-dark tw-py-16 md:tw-py-20 tw-text-center tw-overflow-hidden {{ !$imageExists ? 'tw-pt-[120px]' : '' }}">
        {{-- Background Effects --}}
        <div class="tw-absolute tw-inset-0 tw-bg-[url('https://www.transparenttextures.com/patterns/stardust.png')] tw-opacity-10 mix-blend-overlay"></div>
        <div class="tw-absolute tw-top-[-50px] tw-left-[-50px] tw-w-64 tw-h-64 tw-bg-brandGold tw-rounded-full tw-blur-[80px] tw-opacity-20 tw-animate-pulse"></div>
        <div class="tw-absolute tw-bottom-[-100px] tw-right-[-50px] tw-w-96 tw-h-96 tw-bg-brandGreen tw-rounded-full tw-blur-[100px] tw-opacity-50"></div>

        <div class="tw-max-w-4xl tw-mx-auto tw-px-6 tw-relative tw-z-10 stagger-up">
            <span class="tw-inline-block tw-py-1.5 tw-px-4 tw-rounded-full tw-bg-white/10 tw-text-brandGold tw-text-[10px] md:tw-text-xs tw-font-black tw-uppercase tw-tracking-widest tw-mb-6 tw-border tw-border-white/20 tw-backdrop-blur-md tw-shadow-sm">
                Panduan Sistem
            </span>
            <h1 class="fluid-title tw-font-black tw-text-white tw-mb-4 tw-drop-shadow-2xl">Alur & Syarat <span class="tw-text-transparent tw-bg-clip-text tw-bg-gradient-to-r tw-from-brandGold tw-to-orange-400">Pendaftaran</span></h1>
            
            <nav class="tw-flex tw-justify-center stagger-up delay-1 tw-mt-6" aria-label="Breadcrumb">
                <ol class="tw-inline-flex tw-items-center tw-space-x-2">
                    <li class="tw-inline-flex tw-items-center">
                        <a href="{{ url('/') }}" class="tw-text-white/60 hover:tw-text-brandGold tw-text-xs md:tw-text-sm tw-font-medium tw-transition-colors">Beranda</a>
                    </li>
                    <li>
                        <div class="tw-flex tw-items-center">
                            <span class="tw-mx-2 tw-text-white/30">/</span>
                            <span class="tw-text-white tw-text-xs md:tw-text-sm tw-font-bold">Panduan PPDB</span>
                        </div>
                    </li>
                </ol>
            </nav>
        </div>
        
        {{-- Pita Emas Bawah --}}
        <div class="tw-absolute tw-bottom-0 tw-left-0 tw-w-full tw-h-1.5 tw-bg-gradient-to-r tw-from-orange-400 tw-to-brandGold"></div>
    </section>

    {{-- 
        ===============================================================
        3. KONTEN UTAMA (GRID LAYOUT)
        ===============================================================
    --}}
    <div class="tw-max-w-7xl tw-mx-auto tw-px-6 tw-py-16 md:tw-py-24">
        <div class="tw-grid lg:tw-grid-cols-12 tw-gap-12 lg:tw-gap-16">
            
            {{-- KOLOM KIRI: TIMELINE (7/12 Lebar) --}}
            <div class="lg:tw-col-span-8 stagger-up delay-1">
                <div class="tw-mb-10">
                    <h4 class="tw-text-brandGold tw-font-black tw-tracking-widest tw-uppercase tw-text-[11px] tw-mb-2">Langkah Mudah</h4>
                    <h3 class="tw-text-3xl md:tw-text-4xl tw-font-black tw-text-slate-900 tw-mb-3 tw-tracking-tight">Tahapan Seleksi Masuk</h3>
                    <p class="tw-text-slate-500 tw-font-medium tw-text-base md:tw-text-lg">Ikuti 5 langkah mudah berikut untuk bergabung menjadi bagian dari Puruhita Islamic School.</p>
                </div>

                <div class="timeline-wrapper tw-ml-4">
                    {{-- Step 1 --}}
                    <div class="timeline-item">
                        <div class="timeline-marker">1</div>
                        <div class="timeline-content tw-bg-white tw-p-8 tw-rounded-[1.5rem] tw-shadow-sm hover-lift">
                            <h5 class="tw-font-black tw-text-slate-900 tw-text-xl tw-mb-3 tw-flex tw-items-center">
                                <div class="tw-w-10 tw-h-10 tw-rounded-lg tw-bg-slate-50 tw-flex tw-items-center tw-justify-center tw-mr-4 dyn-text-green tw-border tw-border-slate-100"><i class="fas fa-user-plus"></i></div> 
                                Pembuatan Akun
                            </h5>
                            <p class="tw-text-slate-500 tw-text-sm md:tw-text-base tw-leading-relaxed tw-font-medium">
                                Klik tombol <strong>"Mulai Pendaftaran"</strong>. Isi NIK, Nama Lengkap, Email, dan Nomor WhatsApp aktif untuk membuat akun akses portal PPDB. Password akan dikirimkan otomatis.
                            </p>
                        </div>
                    </div>

                    {{-- Step 2 --}}
                    <div class="timeline-item">
                        <div class="timeline-marker">2</div>
                        <div class="timeline-content tw-bg-white tw-p-8 tw-rounded-[1.5rem] tw-shadow-sm hover-lift">
                            <h5 class="tw-font-black tw-text-slate-900 tw-text-xl tw-mb-3 tw-flex tw-items-center">
                                <div class="tw-w-10 tw-h-10 tw-rounded-lg tw-bg-slate-50 tw-flex tw-items-center tw-justify-center tw-mr-4 dyn-text-green tw-border tw-border-slate-100"><i class="fas fa-file-invoice-dollar"></i></div> 
                                Pembayaran Formulir
                            </h5>
                            <p class="tw-text-slate-500 tw-text-sm md:tw-text-base tw-leading-relaxed tw-font-medium">
                                Login menggunakan Akun yang didaftarkan. Lakukan transfer biaya pendaftaran ke Virtual Account atau Rekening resmi yayasan yang tertera di dashboard sistem.
                            </p>
                        </div>
                    </div>

                    {{-- Step 3 --}}
                    <div class="timeline-item">
                        <div class="timeline-marker">3</div>
                        <div class="timeline-content tw-bg-white tw-p-8 tw-rounded-[1.5rem] tw-shadow-sm hover-lift">
                            <h5 class="tw-font-black tw-text-slate-900 tw-text-xl tw-mb-3 tw-flex tw-items-center">
                                <div class="tw-w-10 tw-h-10 tw-rounded-lg tw-bg-slate-50 tw-flex tw-items-center tw-justify-center tw-mr-4 dyn-text-green tw-border tw-border-slate-100"><i class="fas fa-edit"></i></div> 
                                Lengkapi Biodata & Berkas
                            </h5>
                            <p class="tw-text-slate-500 tw-text-sm md:tw-text-base tw-leading-relaxed tw-font-medium">
                                Lengkapi data diri calon santri, data orang tua/wali, dan data asal sekolah. Selanjutnya, unggah dokumen persyaratan wajib (KK, Akta, Rapor) dalam format JPG atau PDF.
                            </p>
                        </div>
                    </div>

                    {{-- Step 4 --}}
                    <div class="timeline-item">
                        <div class="timeline-marker">4</div>
                        <div class="timeline-content tw-bg-white tw-p-8 tw-rounded-[1.5rem] tw-shadow-sm hover-lift">
                            <h5 class="tw-font-black tw-text-slate-900 tw-text-xl tw-mb-3 tw-flex tw-items-center">
                                <div class="tw-w-10 tw-h-10 tw-rounded-lg tw-bg-slate-50 tw-flex tw-items-center tw-justify-center tw-mr-4 dyn-text-green tw-border tw-border-slate-100"><i class="fas fa-laptop-code"></i></div> 
                                Ujian Seleksi / CBT
                            </h5>
                            <p class="tw-text-slate-500 tw-text-sm md:tw-text-base tw-leading-relaxed tw-font-medium">
                                Setelah berkas diverifikasi, cetak Kartu Ujian. Ikuti tes akademik (CBT) dan tes wawancara sesuai jadwal gelombang yang ditentukan oleh panitia pusat.
                            </p>
                        </div>
                    </div>

                    {{-- Step 5 --}}
                    <div class="timeline-item">
                        <div class="timeline-marker finish"><i class="fas fa-check"></i></div>
                        <div class="timeline-content tw-bg-emerald-50 tw-p-8 tw-rounded-[1.5rem] tw-border-2 tw-border-emerald-200 tw-shadow-md">
                            <h5 class="tw-font-black tw-text-emerald-800 tw-text-xl tw-mb-3 tw-flex tw-items-center">
                                <div class="tw-w-10 tw-h-10 tw-rounded-lg tw-bg-emerald-100 tw-flex tw-items-center tw-justify-center tw-mr-4 tw-text-emerald-600"><i class="fas fa-bullhorn"></i></div> 
                                Pengumuman Kelulusan
                            </h5>
                            <p class="tw-text-emerald-800/80 tw-text-sm md:tw-text-base tw-leading-relaxed tw-font-medium">
                                Hasil seleksi diumumkan via WhatsApp & Dashboard Portal. Santri yang dinyatakan LULUS wajib melakukan Pembayaran Daftar Ulang untuk mengunci kuota kursi.
                            </p>
                        </div>
                    </div>
                </div>

                {{-- TOMBOL CALL TO ACTION BAWAH TIMELINE --}}
                <div class="tw-mt-12 md:tw-mt-16 tw-text-center md:tw-text-left tw-ml-4 md:tw-ml-14">
                    <a href="{{ route('ppdb.register') }}" class="tw-inline-flex tw-items-center tw-justify-center tw-px-10 tw-py-4 tw-text-sm md:tw-text-base tw-font-black tw-text-brandGreen tw-bg-brandGold tw-rounded-full hover:tw-opacity-90 tw-shadow-[0_10px_20px_rgba(245,158,11,0.3)] hover:tw-shadow-[0_15px_30px_rgba(245,158,11,0.4)] tw-transition-all tw-duration-300 tw-transform hover:tw--translate-y-1 tw-group">
                        Mulai Pendaftaran Anda
                        <i class="fas fa-arrow-right tw-ml-3 tw-group-hover:tw-translate-x-2 tw-transition-transform"></i>
                    </a>
                </div>
            </div>

            {{-- KOLOM KANAN: PERSYARATAN & BANTUAN (5/12 Lebar) --}}
            <div class="lg:tw-col-span-4 stagger-up delay-2">
                <div class="tw-sticky tw-top-28 tw-space-y-8">
                    
                    {{-- Card Persyaratan --}}
                    <div class="tw-bg-white tw-rounded-[2rem] tw-shadow-[0_20px_40px_rgba(0,0,0,0.06)] tw-overflow-hidden tw-border tw-border-gray-100">
                        <div class="tw-bg-brandGreen tw-px-8 tw-py-6 tw-relative tw-overflow-hidden">
                            <div class="tw-absolute tw-top-0 tw-right-0 tw-w-32 tw-h-32 tw-bg-white/10 tw-rounded-full tw-translate-x-10 tw--translate-y-10 tw-blur-xl"></div>
                            <h4 class="tw-text-brandGold tw-font-black tw-text-lg tw-flex tw-items-center tw-tracking-wide tw-relative tw-z-10">
                                <i class="fas fa-folder-open tw-mr-3"></i> BERKAS WAJIB
                            </h4>
                        </div>
                        <div class="tw-p-8">
                            <ul class="tw-space-y-5">
                                <li class="tw-flex tw-items-start">
                                    <div class="tw-w-6 tw-h-6 tw-rounded-full dyn-bg-green-light dyn-text-green tw-flex tw-items-center tw-justify-center tw-mr-4 tw-mt-0.5 tw-flex-shrink-0"><i class="fas fa-check tw-text-[10px]"></i></div>
                                    <span class="tw-text-slate-600 tw-text-sm md:tw-text-base tw-font-medium tw-leading-snug">Scan Kartu Keluarga (KK) Asli</span>
                                </li>
                                <li class="tw-flex tw-items-start">
                                    <div class="tw-w-6 tw-h-6 tw-rounded-full dyn-bg-green-light dyn-text-green tw-flex tw-items-center tw-justify-center tw-mr-4 tw-mt-0.5 tw-flex-shrink-0"><i class="fas fa-check tw-text-[10px]"></i></div>
                                    <span class="tw-text-slate-600 tw-text-sm md:tw-text-base tw-font-medium tw-leading-snug">Scan Akta Kelahiran Asli</span>
                                </li>
                                <li class="tw-flex tw-items-start">
                                    <div class="tw-w-6 tw-h-6 tw-rounded-full dyn-bg-green-light dyn-text-green tw-flex tw-items-center tw-justify-center tw-mr-4 tw-mt-0.5 tw-flex-shrink-0"><i class="fas fa-check tw-text-[10px]"></i></div>
                                    <span class="tw-text-slate-600 tw-text-sm md:tw-text-base tw-font-medium tw-leading-snug">File Pas Foto (Latar Merah/Biru)</span>
                                </li>
                                <li class="tw-flex tw-items-start">
                                    <div class="tw-w-6 tw-h-6 tw-rounded-full dyn-bg-green-light dyn-text-green tw-flex tw-items-center tw-justify-center tw-mr-4 tw-mt-0.5 tw-flex-shrink-0"><i class="fas fa-check tw-text-[10px]"></i></div>
                                    <span class="tw-text-slate-600 tw-text-sm md:tw-text-base tw-font-medium tw-leading-snug">Scan Rapor 2 Semester Terakhir</span>
                                </li>
                                <li class="tw-flex tw-items-start">
                                    <div class="tw-w-6 tw-h-6 tw-rounded-full dyn-bg-green-light dyn-text-green tw-flex tw-items-center tw-justify-center tw-mr-4 tw-mt-0.5 tw-flex-shrink-0"><i class="fas fa-check tw-text-[10px]"></i></div>
                                    <span class="tw-text-slate-600 tw-text-sm md:tw-text-base tw-font-medium tw-leading-snug">Nomor Induk Siswa Nasional (NISN) Aktif</span>
                                </li>
                            </ul>
                        </div>
                    </div>

                    {{-- Card Bantuan Dinamis --}}
                    <div class="tw-bg-white tw-rounded-[2rem] tw-p-8 tw-text-center tw-border tw-border-gray-100 tw-shadow-[0_15px_30px_rgba(0,0,0,0.04)] relative overflow-hidden group">
                        <div class="tw-absolute tw-bottom-0 tw-right-0 tw-opacity-5 tw-text-9xl tw-translate-x-1/4 tw-translate-y-1/4 tw-pointer-events-none group-hover:tw-scale-110 tw-transition-transform tw-duration-500">
                            <i class="fab fa-whatsapp"></i>
                        </div>
                        
                        <div class="tw-relative tw-z-10">
                            <div class="tw-w-16 tw-h-16 tw-bg-[#f8fafc] tw-border-2 tw-border-brandGreen tw-rounded-2xl tw-flex tw-items-center tw-justify-center tw-mx-auto tw-mb-5 tw-transform tw-rotate-3">
                                <i class="fas fa-headset tw-text-2xl tw-text-brandGreen"></i>
                            </div>
                            <h5 class="tw-text-slate-900 tw-font-black tw-text-xl tw-mb-2">Butuh Bantuan CS?</h5>
                            <p class="tw-text-slate-500 tw-text-sm tw-mb-8 tw-font-medium tw-leading-relaxed">Jika Ayah/Bunda mengalami kendala teknis dalam mengisi formulir, tim panitia kami siap membantu via WhatsApp.</p>
                            
                            @php
                                $rawTelp = SpmbSetting::get('spmb_no_telp', '085179743232');
                                $waLink = 'https://wa.me/' . preg_replace('/[^0-9]/', '', $rawTelp);
                            @endphp

                            <a href="{{ $waLink }}" target="_blank" class="tw-inline-flex tw-items-center tw-justify-center tw-w-full tw-py-3.5 tw-border-2 tw-border-brandGreen tw-rounded-xl tw-text-brandGreen tw-font-bold tw-text-sm hover:tw-bg-brandGreen hover:tw-text-brandGold tw-transition-all tw-duration-300">
                                <i class="fab fa-whatsapp tw-text-xl tw-mr-2"></i> Chat Tim Panitia
                            </a>
                        </div>
                    </div>

                </div>
            </div>

        </div>
    </div>
@endsection