@extends('adminlte::page')

@php
    use App\Models\SpmbSetting;
    use App\Models\Biodata;
    use App\Models\PpdbCandidate;

    // 1. Ambil Pengaturan Tema dari Database (Fallback ke Tema Puruhita: Teal & Amber)
    $pColor = SpmbSetting::get('spmb_primary_color', '#0f766e'); 
    $aColor = SpmbSetting::get('spmb_accent_color', '#f59e0b');
    
    // Menghilangkan tanda '#' untuk keperluan API Avatar
    $pColorNoHash = str_replace('#', '', $pColor);
    $aColorNoHash = str_replace('#', '', $aColor);

    // 2. Ambil Data Candidate & Biodata
    $dataCandidate = PpdbCandidate::where('user_id', Auth::id())->first();
    
    $biodata = null;
    if ($dataCandidate) {
        $biodata = Biodata::where('candidate_id', $dataCandidate->id)->first();
    }

    $pendaftar = $dataCandidate;

    // Tentukan Langkah Progres (Timeline)
    $cStep = 1;
    if ($biodata) $cStep = 2;
    if ($pendaftar && $pendaftar->status_verifikasi == 'verified') $cStep = 3;
    if ($pendaftar && $pendaftar->status_kelulusan == 'lulus') $cStep = 4;
@endphp

@section('title', 'Dashboard Peserta PPDB | Smart Cendekia')

@section('content_header')
    <div class="d-flex justify-content-between align-items-center pt-4 px-3 mb-2 animate__animated animate__fadeInDown">
        <div>
            <h1 class="text-dark font-weight-bolder mb-1" style="font-family: 'Poppins', sans-serif; letter-spacing: -0.5px;">Dashboard Peserta</h1>
            <p class="text-muted mb-0 font-weight-medium" style="font-size: 0.9rem;">Portal Penerimaan Peserta Didik Baru - Smart Cendekia</p>
        </div>
        <div class="d-none d-md-block">
            <div class="bg-white px-4 py-2 shadow-sm d-flex align-items-center" style="border-radius: 12px; border: 1px solid #f1f5f9;">
                <div class="bg-brand-light text-brand-green rounded p-2 mr-3 d-flex align-items-center justify-content-center">
                    <i class="fas fa-calendar-day"></i>
                </div>
                <span class="font-weight-bold text-dark" style="font-size: 0.9rem;">
                    {{ \Carbon\Carbon::now()->translatedFormat('l, d F Y') }}
                </span>
            </div>
        </div>
    </div>
@stop

@section('content')
<div class="container-fluid pb-5 px-3">
    <div class="row">
        
        {{-- KOLOM KIRI: STATUS & TIMELINE --}}
        <div class="col-lg-8 animate__animated animate__fadeInUp">
            
            {{-- 1. KARTU SAMBUTAN (WELCOME CARD) --}}
            <div class="card card-modern mb-4 shadow-sm border-0 overflow-hidden">
                <div class="card-body p-0">
                    <div class="row no-gutters h-100">
                        {{-- Kolom Avatar Kiri --}}
                        <div class="col-md-3 bg-brand-light d-flex align-items-center justify-content-center py-5 py-md-4 position-relative" style="border-radius: 20px 0 0 20px;">
                            {{-- Decorative pattern --}}
                            <div class="position-absolute w-100 h-100" style="background-image: radial-gradient(var(--brand-green) 1px, transparent 1px); background-size: 15px 15px; opacity: 0.1;"></div>
                            
                            <img src="https://ui-avatars.com/api/?name={{ urlencode(Auth::user()->name) }}&background={{ $pColorNoHash }}&color=fff&size=150&bold=true" 
                                 class="img-fluid rounded-circle shadow avatar-pulse position-relative z-10" alt="User Image" style="width: 100px; height: 100px; border: 4px solid white;">
                        </div>
                        
                        {{-- Kolom Teks Kanan --}}
                        <div class="col-md-9 p-4 d-flex flex-column justify-content-center bg-white" style="border-radius: 0 20px 20px 0;">
                            <span class="text-uppercase font-weight-bold tracking-widest mb-1 text-brand-green" style="font-size: 10px; letter-spacing: 2px;">Ahlan wa Sahlan</span>
                            <h3 class="font-weight-black mb-2 text-dark" style="font-family: 'Poppins', sans-serif; letter-spacing: -0.5px;">
                                {{ Auth::user()->name }}
                            </h3>
                            <p class="text-secondary mb-4" style="font-size: 0.95rem; line-height: 1.5;">
                                Selamat datang di portal PPDB. Mohon pastikan seluruh tahapan dan informasi pendaftaran Anda telah dilengkapi dengan benar.
                            </p>
                            
                            <div class="d-flex align-items-center flex-wrap gap-2">
                                <div class="bg-gray-50 border px-3 py-2 rounded-lg d-inline-flex align-items-center shadow-sm">
                                    <i class="fas fa-hashtag text-brand-gold mr-2"></i>
                                    <span class="text-muted small mr-2">No. Daftar:</span>
                                    <strong class="text-dark font-weight-bolder" style="font-size: 1rem;">{{ $pendaftar->no_daftar ?? 'BELUM ADA' }}</strong>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- 2. SMART STATUS ALERT (BIODATA) --}}
            @if(!$biodata)
                <div class="card card-modern mb-4 border-0 shadow-sm animate__animated animate__fadeIn" style="background: linear-gradient(135deg, #fffbeb 0%, #ffffff 100%); border-left: 6px solid #f59e0b !important;">
                    <div class="card-body d-flex align-items-center justify-content-between flex-wrap p-4">
                        <div class="d-flex align-items-center mb-3 mb-md-0">
                            <div class="icon-circle bg-warning text-white mr-4 shadow-sm" style="box-shadow: 0 5px 15px rgba(245,158,11,0.3) !important;">
                                <i class="fas fa-user-edit"></i>
                            </div>
                            <div>
                                <h5 class="font-weight-bolder text-dark mb-1">Lengkapi Biodata Anda!</h5>
                                <p class="text-muted mb-0 font-weight-medium" style="font-size: 0.9rem;">Anda belum mengisi rincian data diri & orang tua. Data ini wajib untuk verifikasi.</p>
                            </div>
                        </div>
                        <a href="{{ route('ppdb.siswa.biodata') }}" class="btn btn-warning font-weight-bold px-4 py-2 rounded-pill shadow-sm text-dark hover-lift">
                            Isi Sekarang <i class="fas fa-arrow-right ml-2"></i>
                        </a>
                    </div>
                </div>
            @else
                <div class="card card-modern mb-4 border-0 shadow-sm animate__animated animate__fadeIn" style="background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%); border-left: 6px solid #10b981 !important;">
                    <div class="card-body d-flex align-items-center p-3 px-4">
                        <div class="icon-circle-sm bg-success text-white mr-3 shadow-sm">
                            <i class="fas fa-check"></i>
                        </div>
                        <div>
                            <h6 class="font-weight-bolder text-dark mb-0">Biodata Lengkap & Tersimpan</h6>
                            <p class="text-success mb-0 font-weight-medium" style="font-size: 12px;">Alhamdulillah, data lengkap Anda telah berhasil kami terima dan masuk ke sistem seleksi.</p>
                        </div>
                    </div>
                </div>
            @endif

            {{-- 3. STATUS PENDAFTARAN & STEPPER --}}
            <div class="card card-modern mb-4 border-0 shadow-sm">
                <div class="card-header bg-white py-4 border-0 d-flex align-items-center">
                    <div class="icon-box-sm bg-brand-light text-brand-green mr-3 rounded-lg d-flex align-items-center justify-content-center" style="width: 40px; height: 40px; font-size: 1.2rem;">
                        <i class="fas fa-satellite-dish"></i>
                    </div>
                    <h3 class="card-title font-weight-bolder text-dark mb-0" style="font-size: 1.2rem;">Progres & Status Seleksi</h3>
                </div>
                
                <div class="card-body pt-2 pb-5 px-md-5">
                    
                    {{-- Alert Box Dinamis --}}
                    @if($pendaftar && $pendaftar->status_kelulusan == 'lulus')
                        <div class="alert border-0 shadow-sm mb-5 p-4 d-flex align-items-center" role="alert" style="border-radius: 20px; background-color: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0 !important;">
                            <i class="fas fa-check-circle fa-3x text-success mr-4"></i>
                            <div>
                                <h4 class="alert-heading font-weight-black mb-1">SELAMAT! ANDA DINYATAKAN LULUS</h4>
                                <p class="mb-0 font-weight-medium">Selamat bergabung di <strong>{{ $pendaftar->sekolah->nama_sekolah }}</strong>. Segera cetak bukti kelulusan untuk proses daftar ulang.</p>
                            </div>
                        </div>
                    @elseif($pendaftar && $pendaftar->status_verifikasi == 'rejected')
                        <div class="alert border-0 shadow-sm mb-5 p-4 d-flex align-items-center" role="alert" style="border-radius: 20px; background-color: #fef2f2; color: #991b1b; border: 1px solid #fecaca !important;">
                            <i class="fas fa-exclamation-triangle fa-3x text-danger mr-4"></i>
                            <div>
                                <h4 class="alert-heading font-weight-black mb-1">PERBAIKAN BERKAS DIBUTUHKAN</h4>
                                <p class="mb-0 font-weight-medium">Catatan Panitia: <strong class="text-danger">{{ $pendaftar->catatan_verifikator ?? 'Mohon lengkapi dan cek kembali data Anda.' }}</strong></p>
                            </div>
                        </div>
                    @else
                        <div class="alert border-0 shadow-sm mb-5 p-4 d-flex align-items-center" role="alert" style="border-radius: 20px; background-color: #f0f9ff; color: #0369a1; border: 1px solid #bae6fd !important;">
                            <i class="fas fa-info-circle fa-3x text-info mr-4"></i>
                            <div>
                                <h4 class="alert-heading font-weight-black mb-1">TAHAP VERIFIKASI BERJALAN</h4>
                                <p class="mb-0 font-weight-medium">Tim panitia sedang meninjau dokumen pendaftaran Anda. Pantau terus halaman ini untuk pembaruan status.</p>
                            </div>
                        </div>
                    @endif

                    {{-- Horizontal Stepper --}}
                    <div class="mt-5 position-relative">
                        {{-- Background Line --}}
                        <div class="position-absolute" style="top: 25px; left: 10%; width: 80%; height: 6px; background-color: #f1f5f9; z-index: 0; border-radius: 10px;"></div>
                        
                        {{-- Progress Line Dinamis --}}
                        @php 
                            $progressWidth = (($cStep - 1) / 3) * 80; 
                            if($progressWidth > 80) $progressWidth = 80;
                        @endphp
                        <div class="position-absolute" style="top: 25px; left: 10%; width: {{ $progressWidth }}%; height: 6px; background-color: var(--brand-green); z-index: 1; border-radius: 10px; transition: width 1.5s cubic-bezier(0.2, 1, 0.3, 1);"></div>
                        
                        <div class="d-flex justify-content-between text-center position-relative z-10">
                            @foreach(['Registrasi Akun', 'Pengisian Biodata', 'Verifikasi Berkas', 'Hasil Kelulusan'] as $index => $label)
                                @php $stepNum = $index + 1; @endphp
                                <div class="step-item" style="width: 25%;">
                                    <div class="rounded-circle d-flex align-items-center justify-content-center mx-auto mb-3 shadow-sm step-circle {{ $cStep >= $stepNum ? 'active' : '' }}">
                                        @if($cStep > $stepNum) <i class="fas fa-check"></i> @else {{ $stepNum }} @endif
                                    </div>
                                    <span class="font-weight-bolder {{ $cStep >= $stepNum ? 'text-brand-green' : 'text-secondary' }} d-block px-1" style="font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px;">{{ $label }}</span>
                                </div>
                            @endforeach
                        </div>
                    </div>

                </div>
            </div>
        </div>

        {{-- KOLOM KANAN: INFO SEKOLAH & MENU AKSI --}}
        <div class="col-lg-4 animate__animated animate__fadeInUp animate__delay-1s">
            
            {{-- INFO PILIHAN SEKOLAH (Premium Gradient Card) --}}
            <div class="card card-modern border-0 shadow-lg mb-4 bg-brand-gradient overflow-hidden">
                <div class="card-body text-white text-center py-5 position-relative">
                    <div class="position-absolute" style="top: -30px; right: -30px; opacity: 0.05; font-size: 180px;"><i class="fas fa-university"></i></div>
                    
                    <div class="bg-white rounded-circle mx-auto mb-4 d-flex align-items-center justify-content-center shadow-lg position-relative z-10" style="width: 80px; height: 80px;">
                        <i class="fas fa-school fa-2x text-brand-green"></i>
                    </div>
                    
                    <h6 class="text-brand-gold mb-2 text-uppercase small font-weight-black tracking-widest position-relative z-10">Lembaga Pilihan</h6>
                    <h4 class="font-weight-black mb-0 position-relative z-10" style="font-family: 'Poppins', sans-serif;">{{ $pendaftar->sekolah->nama_sekolah ?? 'Belum Dipilih' }}</h4>
                    
                    <div class="mt-4 position-relative z-10">
                        <span class="badge px-4 py-2 bg-white/20 text-white rounded-pill border border-white/30" style="font-size: 11px; font-weight: 800; backdrop-filter: blur(4px);">
                            JALUR: {{ strtoupper($pendaftar->jalur_pendaftaran ?? 'REGULER') }}
                        </span>
                    </div>
                </div>
            </div>

            {{-- MENU UTAMA PESERTA (Interactive List) --}}
            <div class="card card-modern border-0 shadow-sm mb-4">
                <div class="card-header bg-white py-4 border-0 border-bottom">
                    <h3 class="card-title font-weight-bolder text-dark mb-0">
                        <i class="fas fa-th-large mr-2 text-brand-gold"></i> Menu Aksi
                    </h3>
                </div>
                <div class="card-body p-4">
                    
                    {{-- 1. TOMBOL BIODATA --}}
                    <div class="form-group mb-3">
                        <a href="{{ route('ppdb.siswa.biodata') }}" class="btn btn-outline-brand btn-block rounded-xl font-weight-bold py-3 shadow-sm text-left custom-btn-hover d-flex align-items-center">
                            <div class="btn-icon {{ $biodata ? 'bg-success-light text-success' : 'bg-warning-light text-warning' }} rounded-lg mr-3 d-flex align-items-center justify-content-center flex-shrink-0" style="width: 48px; height: 48px; font-size: 1.25rem;">
                                <i class="fas fa-user-edit"></i>
                            </div>
                            <div class="flex-grow-1">
                                <span class="d-block text-dark font-weight-bolder" style="font-size: 15px;">Data & Biodata</span>
                                <small class="{{ $biodata ? 'text-success' : 'text-danger' }} font-weight-bold" style="font-size: 12px;">
                                    {{ $biodata ? '✓ Sudah Lengkap' : '⚠ Wajib Dilengkapi' }}
                                </small>
                            </div>
                            <i class="fas fa-chevron-right text-muted small"></i>
                        </a>
                    </div>

                    {{-- 2. TOMBOL CETAK BUKTI DAFTAR AWAL --}}
                    <div class="form-group mb-3">
                        <a href="{{ route('ppdb.siswa.cetak.bukti') }}" target="_blank" class="btn btn-outline-brand btn-block rounded-xl font-weight-bold py-3 shadow-sm text-left custom-btn-hover d-flex align-items-center">
                            <div class="btn-icon rounded-lg mr-3 d-flex align-items-center justify-content-center flex-shrink-0" style="width: 48px; height: 48px; font-size: 1.25rem; background-color: #e0f2fe; color: #0284c7;">
                                <i class="fas fa-file-invoice"></i>
                            </div>
                            <div class="flex-grow-1">
                                <span class="d-block text-dark font-weight-bolder" style="font-size: 15px;">Bukti Pendaftaran</span>
                                <small class="text-muted font-weight-medium" style="font-size: 12px;">Cetak Tanda Terima Awal</small>
                            </div>
                            <i class="fas fa-external-link-alt text-muted small"></i>
                        </a>
                    </div>

                    {{-- 3. TOMBOL CETAK BIODATA FULL --}}
                    <div class="form-group mb-3">
                        @if($biodata)
                            <a href="{{ route('ppdb.siswa.cetak.biodata') }}" target="_blank" class="btn btn-outline-brand btn-block rounded-xl font-weight-bold py-3 shadow-sm text-left custom-btn-hover d-flex align-items-center">
                                <div class="btn-icon bg-brand-light text-brand-green rounded-lg mr-3 d-flex align-items-center justify-content-center flex-shrink-0" style="width: 48px; height: 48px; font-size: 1.25rem;">
                                    <i class="fas fa-file-pdf"></i>
                                </div>
                                <div class="flex-grow-1">
                                    <span class="d-block text-dark font-weight-bolder" style="font-size: 15px;">Formulir Biodata</span>
                                    <small class="text-success font-weight-medium" style="font-size: 12px;">Cetak Berkas Lengkap</small>
                                </div>
                                <i class="fas fa-external-link-alt text-muted small"></i>
                            </a>
                        @else
                            <button class="btn btn-light btn-block rounded-xl font-weight-bold py-3 text-left text-muted border d-flex align-items-center" disabled style="cursor: not-allowed; opacity: 0.6;">
                                <div class="btn-icon bg-secondary text-white rounded-lg mr-3 d-flex align-items-center justify-content-center flex-shrink-0" style="width: 48px; height: 48px; font-size: 1.25rem;">
                                    <i class="fas fa-lock"></i>
                                </div>
                                <div class="flex-grow-1">
                                    <span class="d-block font-weight-bolder" style="font-size: 15px;">Formulir Biodata</span>
                                    <small class="text-danger font-weight-medium" style="font-size: 12px;">Lengkapi data dahulu</small>
                                </div>
                            </button>
                        @endif
                    </div>

                    {{-- 4. TOMBOL KARTU UJIAN (Primary Call to Action if Verified) --}}
                    <div class="form-group mb-0 mt-4 pt-4 border-top">
                        @if($pendaftar && $pendaftar->status_verifikasi == 'verified')
                            <a href="{{ route('ppdb.siswa.cetak.kartu') }}" target="_blank" class="btn btn-brand btn-block rounded-xl font-weight-bold py-3 shadow-md text-left text-white custom-btn-hover-solid d-flex align-items-center" style="background: linear-gradient(to right, var(--brand-green), color-mix(in srgb, var(--brand-green) 80%, black));">
                                <div class="btn-icon bg-white text-brand-green rounded-lg mr-3 d-flex align-items-center justify-content-center shadow-sm flex-shrink-0" style="width: 48px; height: 48px; font-size: 1.25rem;">
                                    <i class="fas fa-id-badge"></i>
                                </div>
                                <div class="flex-grow-1">
                                    <span class="d-block font-weight-black" style="font-size: 15px;">KARTU UJIAN (CBT)</span>
                                    <small class="text-white-50 font-weight-medium" style="font-size: 12px;">Cetak untuk mengikuti seleksi</small>
                                </div>
                                <i class="fas fa-print"></i>
                            </a>
                        @else
                            <button class="btn btn-light btn-block rounded-xl font-weight-bold py-3 text-left text-muted border d-flex align-items-center" disabled style="cursor: not-allowed;">
                                <div class="btn-icon bg-secondary text-white rounded-lg mr-3 d-flex align-items-center justify-content-center flex-shrink-0" style="width: 48px; height: 48px; font-size: 1.25rem;">
                                    <i class="fas fa-lock"></i>
                                </div>
                                <div class="flex-grow-1">
                                    <span class="d-block font-weight-bolder" style="font-size: 15px;">KARTU UJIAN (CBT)</span>
                                    <small class="text-danger font-weight-medium" style="font-size: 12px;">Menunggu verifikasi panitia</small>
                                </div>
                            </button>
                        @endif
                    </div>

                </div>
            </div>

        </div>
    </div>
</div>
@stop

@section('css')
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<style>
    :root {
        --brand-green: {{ $pColor }};
        --brand-gold: {{ $aColor }};
        /* Mix warna dinamis yang aman */
        --brand-green-light: color-mix(in srgb, var(--brand-green) 10%, white);
        --brand-green-rgb: {{ hexdec(substr($pColor,1,2)) }}, {{ hexdec(substr($pColor,3,2)) }}, {{ hexdec(substr($pColor,5,2)) }};
    }

    body { font-family: 'Poppins', sans-serif !important; background-color: #f8fafc; }
    
    .font-weight-medium { font-weight: 500 !important; }
    .font-weight-bolder { font-weight: 700 !important; }
    .font-weight-black { font-weight: 900 !important; }
    
    .text-brand-green { color: var(--brand-green) !important; }
    .text-brand-gold { color: var(--brand-gold) !important; }
    .bg-brand-light { background-color: var(--brand-green-light) !important; }
    .border-brand-green { border-color: var(--brand-green) !important; }
    
    .bg-brand-gradient {
        background: linear-gradient(135deg, var(--brand-green) 0%, color-mix(in srgb, var(--brand-green) 60%, black) 100%);
    }
    
    .bg-gray-50 { background-color: #f9fafb !important; }
    .bg-success-light { background-color: #ecfdf5 !important; }
    .bg-warning-light { background-color: #fffbeb !important; }

    /* Component Styling */
    .card-modern { border-radius: 1.5rem; overflow: hidden; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); border: 1px solid rgba(0,0,0,0.03); }
    .hover-lift { transition: transform 0.3s ease; }
    .hover-lift:hover { transform: translateY(-3px); }

    .icon-circle { width: 55px; height: 55px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; }
    .icon-circle-sm { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }

    /* Stepper Styling */
    .step-circle { 
        width: 56px; height: 56px; font-weight: 900; font-size: 1.25rem; 
        background-color: #ffffff; color: #cbd5e1; border: 4px solid #f1f5f9; 
        transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); 
    }
    .step-circle.active { 
        background-color: var(--brand-green); color: var(--brand-gold); 
        border-color: var(--brand-green); 
        box-shadow: 0 0 0 8px var(--brand-green-light); 
        transform: scale(1.15); 
    }

    .rounded-xl { border-radius: 1rem !important; }

    /* Button Styling */
    .btn-outline-brand { border: 2px solid #f1f5f9; background: #ffffff; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
    .custom-btn-hover:hover { border-color: var(--brand-green); transform: translateY(-4px); box-shadow: 0 10px 25px rgba(0,0,0,0.05) !important; background: white; }
    
    .btn-brand { background-color: var(--brand-green); color: white; border: none; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
    .custom-btn-hover-solid:hover { transform: translateY(-4px); box-shadow: 0 15px 30px rgba(var(--brand-green-rgb), 0.3) !important; filter: brightness(1.05); }

    /* Custom Avatar Pulse */
    .avatar-pulse { animation: pulse-border 2.5s infinite; }
    @keyframes pulse-border {
        0% { box-shadow: 0 0 0 0 rgba(var(--brand-green-rgb), 0.4); }
        70% { box-shadow: 0 0 0 15px rgba(var(--brand-green-rgb), 0); }
        100% { box-shadow: 0 0 0 0 rgba(var(--brand-green-rgb), 0); }
    }
</style>
@stop