@extends('pmb.public.layout', [
    'title' => 'PMB UNDARMA',
    'pageTitle' => 'Pendaftaran Mahasiswa Baru UNDARMA',
    'pageSubtitle' => 'Mulai registrasi online, unggah dokumen wajib, lalu pantau proses seleksi sampai registrasi ulang dari satu portal yang sama.',
])

@php
    $programCount = $programs->count();
    $facultyCount = $programs->pluck('fakultas_id')->filter()->unique()->count();
    $featuredPrograms = $programs->take(6);
@endphp

@push('styles')
    <style>
        .hero-panel {
            background:
                radial-gradient(circle at top right, rgba(99, 179, 255, .2), transparent 32%),
                linear-gradient(135deg, #102b52 0%, #143c73 45%, #0f243b 100%);
            border: 1px solid rgba(255, 255, 255, .08);
            border-radius: 1.4rem;
            box-shadow: 0 28px 54px rgba(7, 24, 57, .16);
        }

        .hero-stat {
            backdrop-filter: blur(10px);
            background: rgba(255, 255, 255, .08);
            border: 1px solid rgba(255, 255, 255, .12);
            border-radius: 1.1rem;
            min-height: 100%;
            padding: 1.1rem;
        }

        .pmb-quick-panel {
            background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(246, 249, 253, .96));
            border: 1px solid rgba(18, 58, 121, .08);
            border-radius: 1.25rem;
            box-shadow: 0 18px 36px rgba(15, 37, 56, .06);
        }

        .pmb-admission-layout {
            display: grid;
            gap: 1.5rem;
            grid-template-columns: minmax(0, 1.65fr) minmax(320px, .88fr);
        }

        .admission-form-panel,
        .admission-side-panel {
            background: rgba(255, 255, 255, .98);
            border: 1px solid rgba(18, 58, 121, .08);
            border-radius: 1.4rem;
            box-shadow: 0 24px 48px rgba(12, 31, 60, .08);
        }

        .admission-form-intro {
            background:
                radial-gradient(circle at top right, rgba(111, 182, 255, .18), transparent 30%),
                linear-gradient(135deg, #ffffff 0%, #eef5ff 58%, #f8fbff 100%);
            border-bottom: 1px solid rgba(18, 58, 121, .08);
            padding: 1.55rem 1.6rem 1.45rem;
            position: relative;
        }

        .admission-form-intro::before {
            background: linear-gradient(180deg, #2f82ff, #18c391);
            border-radius: 999px;
            content: "";
            height: 3rem;
            left: 1.6rem;
            position: absolute;
            top: 1.6rem;
            width: .32rem;
        }

        .admission-form-intro-copy {
            padding-left: 1rem;
        }

        .admission-eyebrow {
            color: #2f82ff;
            display: inline-block;
            font-size: .78rem;
            font-weight: 800;
            letter-spacing: .18em;
            margin-bottom: .85rem;
            text-transform: uppercase;
        }

        .admission-form-intro h2,
        .admission-side-panel h3 {
            color: #112e59;
            font-weight: 700;
        }

        .admission-form-intro h2 {
            font-size: clamp(1.6rem, 2.6vw, 2.15rem);
            margin-bottom: .55rem;
        }

        .admission-form-intro p {
            color: #5f7391;
            line-height: 1.7;
            margin: 0;
            max-width: 46rem;
        }

        .admission-highlight-row {
            display: flex;
            flex-wrap: wrap;
            gap: .7rem;
            margin-top: 1rem;
        }

        .admission-highlight {
            align-items: center;
            background: rgba(255, 255, 255, .72);
            border: 1px solid rgba(47, 130, 255, .12);
            border-radius: 999px;
            color: #20416f;
            display: inline-flex;
            font-size: .88rem;
            font-weight: 700;
            gap: .5rem;
            padding: .55rem .85rem;
        }

        .admission-form-body {
            padding: 1.6rem;
        }

        .admission-meta-grid {
            display: grid;
            gap: .85rem;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            margin-bottom: 1.35rem;
        }

        .admission-meta-card {
            background: linear-gradient(180deg, #f7fbff, #ffffff);
            border: 1px solid rgba(18, 58, 121, .08);
            border-radius: 1.05rem;
            min-height: 100%;
            padding: 1rem;
        }

        .admission-meta-label {
            color: #6d809a;
            display: block;
            font-size: .78rem;
            font-weight: 800;
            letter-spacing: .12em;
            margin-bottom: .45rem;
            text-transform: uppercase;
        }

        .admission-meta-value {
            color: #14345f;
            display: block;
            font-family: 'Sora', sans-serif;
            font-size: 1.45rem;
            font-weight: 700;
            line-height: 1;
            margin-bottom: .25rem;
        }

        .admission-meta-copy {
            color: #6d809a;
            display: block;
            font-size: .88rem;
            line-height: 1.55;
        }

        .form-frame-note {
            align-items: center;
            background: linear-gradient(135deg, #eef6ff, #f7fbff);
            border: 1px solid rgba(47, 130, 255, .14);
            border-radius: 1rem;
            color: #20416f;
            display: flex;
            gap: .8rem;
            margin-bottom: 1.2rem;
            padding: .95rem 1rem;
        }

        .form-frame-note i {
            align-items: center;
            background: #dcebff;
            border-radius: .9rem;
            color: #2f82ff;
            display: inline-flex;
            flex: 0 0 2.5rem;
            height: 2.5rem;
            justify-content: center;
            width: 2.5rem;
        }

        .form-frame-note strong {
            color: #14345f;
            display: block;
            font-size: .96rem;
            margin-bottom: .1rem;
        }

        .form-frame-note span {
            color: #6780a2;
            display: block;
            font-size: .87rem;
            line-height: 1.55;
        }

        .admission-side-stack {
            display: grid;
            gap: 1rem;
        }

        .admission-side-panel {
            overflow: hidden;
            padding: 1.3rem;
        }

        .admission-side-panel h3 {
            font-size: 1.15rem;
            margin-bottom: .3rem;
        }

        .admission-side-panel p {
            color: #667a97;
            line-height: 1.6;
            margin-bottom: 1rem;
        }

        .journey-list {
            display: grid;
            gap: .85rem;
            margin: 0;
        }

        .journey-step {
            column-gap: .95rem;
            display: grid;
            grid-template-columns: 3rem minmax(0, 1fr);
            position: relative;
        }

        .journey-step:not(:last-child)::before {
            background: linear-gradient(180deg, rgba(47, 130, 255, .28), rgba(29, 191, 140, .18));
            content: "";
            left: 1.42rem;
            position: absolute;
            top: 3rem;
            bottom: -.85rem;
            width: 2px;
        }

        .journey-step-badge {
            align-items: center;
            border-radius: 1rem;
            color: #fff;
            display: inline-flex;
            font-size: 1rem;
            height: 3rem;
            justify-content: center;
            width: 3rem;
        }

        .journey-step:nth-child(1) .journey-step-badge {
            background: linear-gradient(135deg, #3f93ff, #1f6feb);
        }

        .journey-step:nth-child(2) .journey-step-badge {
            background: linear-gradient(135deg, #20c997, #109f6d);
        }

        .journey-step:nth-child(3) .journey-step-badge {
            background: linear-gradient(135deg, #ffb648, #ff8b14);
        }

        .journey-step-card {
            background: #f8fbff;
            border: 1px solid rgba(18, 58, 121, .08);
            border-radius: 1rem;
            padding: .95rem 1rem;
        }

        .journey-step-title {
            color: #14345f;
            font-size: 1rem;
            font-weight: 700;
            margin-bottom: .35rem;
        }

        .journey-step-copy {
            color: #667a97;
            font-size: .92rem;
            line-height: 1.65;
            margin: 0;
        }

        .document-checklist {
            display: grid;
            gap: .7rem;
        }

        .program-grid {
            display: grid;
            gap: .75rem;
        }

        .program-card {
            background: linear-gradient(180deg, #ffffff, #f8fbff);
            border: 1px solid rgba(18, 58, 121, .08);
            border-radius: 1rem;
            padding: .95rem 1rem;
        }

        .program-pill {
            background: #edf4ff;
            border-radius: 999px;
            color: #2f82ff;
            display: inline-flex;
            font-size: .72rem;
            font-weight: 800;
            letter-spacing: .08em;
            margin-bottom: .55rem;
            padding: .35rem .6rem;
            text-transform: uppercase;
        }

        .program-card strong {
            color: #17355d;
            display: block;
            font-size: .98rem;
            margin-bottom: .2rem;
        }

        .program-card span {
            color: #6a7d98;
            display: block;
            font-size: .86rem;
            line-height: 1.5;
        }

        .document-check {
            align-items: flex-start;
            background: #fbfcfe;
            border: 1px solid rgba(18, 58, 121, .08);
            border-radius: 1rem;
            display: flex;
            gap: .8rem;
            padding: .85rem .95rem;
        }

        .document-check-icon {
            align-items: center;
            background: #edf5ff;
            border-radius: .85rem;
            color: #2f82ff;
            display: inline-flex;
            height: 2.55rem;
            justify-content: center;
            width: 2.55rem;
        }

        .document-check strong {
            color: #17355d;
            display: block;
            font-size: .94rem;
            margin-bottom: .1rem;
        }

        .document-check span {
            color: #6a7d98;
            display: block;
            font-size: .86rem;
            line-height: 1.5;
        }

        .admission-support {
            background:
                linear-gradient(135deg, rgba(18, 58, 121, .98), rgba(11, 34, 72, .96)),
                url('{{ asset('images/undarma-campus-photo.jpg') }}');
            background-position: center center;
            background-size: cover;
            color: #fff;
            position: relative;
        }

        .admission-support::before {
            background: linear-gradient(180deg, rgba(6, 26, 66, .24), rgba(6, 26, 66, .62));
            content: "";
            inset: 0;
            position: absolute;
        }

        .admission-support > * {
            position: relative;
            z-index: 1;
        }

        .admission-support h3,
        .admission-support p {
            color: #fff;
        }

        .support-actions {
            display: grid;
            gap: .7rem;
        }

        .support-action {
            align-items: center;
            background: rgba(255, 255, 255, .08);
            border: 1px solid rgba(255, 255, 255, .14);
            border-radius: .95rem;
            color: #fff;
            display: flex;
            font-weight: 700;
            gap: .7rem;
            justify-content: space-between;
            padding: .9rem 1rem;
        }

        .support-action:hover,
        .support-action:focus {
            background: rgba(255, 255, 255, .14);
            color: #fff;
            text-decoration: none;
        }

        @media (max-width: 1199.98px) {
            .pmb-admission-layout {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 991.98px) {
            .admission-meta-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 767.98px) {
            .admission-form-intro {
                padding: 1.3rem 1.1rem 1.25rem;
            }

            .admission-form-intro::before {
                left: 1.1rem;
                top: 1.25rem;
            }

            .admission-form-intro-copy {
                padding-left: .7rem;
            }

            .admission-form-body,
            .admission-side-panel {
                padding: 1.1rem;
            }

            .form-frame-note {
                align-items: flex-start;
            }
        }
    </style>
@endpush

@section('content')
    <div class="pmb-admission-layout">
        <section class="admission-form-panel">
            <div class="admission-form-intro">
                <div class="admission-form-intro-copy">
                    <span class="admission-eyebrow">PMB {{ date('Y') }}/{{ date('Y') + 1 }}</span>
                    <h2>Mulai Pendaftaran Dalam Satu Alur yang Jelas</h2>
                    <p>Portal ini dirancang supaya calon mahasiswa bisa menyelesaikan pengisian biodata, unggah dokumen, dan menyimpan nomor pendaftaran tanpa perlu berpindah halaman yang membingungkan.</p>

                    <div class="admission-highlight-row">
                        <span class="admission-highlight"><i class="fas fa-layer-group"></i> {{ $programCount }} Program Studi</span>
                        <span class="admission-highlight"><i class="fas fa-university"></i> {{ max($facultyCount, 1) }} Fakultas Aktif</span>
                        <span class="admission-highlight"><i class="fas fa-id-badge"></i> Status & kartu ujian online</span>
                    </div>
                </div>
            </div>

            <div class="admission-form-body">
                <div class="admission-meta-grid">
                    <div class="admission-meta-card">
                        <span class="admission-meta-label">Alur</span>
                        <span class="admission-meta-value">3 Tahap</span>
                        <span class="admission-meta-copy">Registrasi online, verifikasi dan seleksi, lalu registrasi ulang setelah dinyatakan lulus.</span>
                    </div>
                    <div class="admission-meta-card">
                        <span class="admission-meta-label">Dokumen</span>
                        <span class="admission-meta-value">5 Berkas</span>
                        <span class="admission-meta-copy">Pas foto, ijazah, raport, KTP atau KK, dan bukti pembayaran pendaftaran.</span>
                    </div>
                    <div class="admission-meta-card">
                        <span class="admission-meta-label">Akses</span>
                        <span class="admission-meta-value">24/7</span>
                        <span class="admission-meta-copy">Form, cek status, dan cetak dokumen bisa diakses kapan saja selama portal PMB dibuka.</span>
                    </div>
                </div>

                <div class="form-frame-note">
                    <i class="fas fa-shield-alt"></i>
                    <div>
                        <strong>Isi data sekali, verifikasi lebih cepat</strong>
                        <span>Pastikan nama, email, dan dokumen yang diunggah sudah sesuai dokumen resmi agar proses seleksi tidak tertunda.</span>
                    </div>
                </div>

                <div class="mb-3">
                    <h3 class="h5 font-weight-bold text-dark mb-1">Form Pendaftaran</h3>
                    <p class="text-muted mb-0">Lengkapi seluruh field dengan teliti lalu simpan nomor pendaftaran yang muncul setelah form berhasil dikirim.</p>
                </div>

                <div class="registration-form-wrapper">
                    @include('pmb.public._registration-form')
                </div>
            </div>
        </section>

        <aside class="admission-side-stack">
            <section class="admission-side-panel">
                <h3>Pilihan Program Studi</h3>
                <p>Beberapa pilihan prodi yang bisa langsung dipilih calon mahasiswa pada form pendaftaran PMB UNDARMA.</p>

                <div class="program-grid">
                    @foreach ($featuredPrograms as $program)
                        <div class="program-card">
                            <span class="program-pill">{{ $program->jenjang ?? 'Prodi' }}</span>
                            <strong>{{ $program->nama_prodi }}</strong>
                            <span>{{ $program->fakultas?->nama_fakultas ?? 'Universitas Karyadarma Kupang' }}</span>
                        </div>
                    @endforeach
                </div>
            </section>

            <section class="admission-side-panel">
                <h3>Alur PMB</h3>
                <p>Pahami tahapan utama pendaftaran supaya setiap dokumen dan proses seleksi bisa disiapkan dari awal.</p>

                <div class="journey-list">
                    <div class="journey-step">
                        <span class="journey-step-badge"><i class="fas fa-file-signature"></i></span>
                        <div class="journey-step-card">
                            <div class="journey-step-title">1. Registrasi Online</div>
                            <p class="journey-step-copy">Lengkapi biodata, pilih prodi, dan unggah semua dokumen wajib PMB.</p>
                        </div>
                    </div>
                    <div class="journey-step">
                        <span class="journey-step-badge"><i class="fas fa-search"></i></span>
                        <div class="journey-step-card">
                            <div class="journey-step-title">2. Verifikasi dan Seleksi</div>
                            <p class="journey-step-copy">Panitia memeriksa berkas, menjadwalkan ujian, lalu mengumumkan hasil seleksi.</p>
                        </div>
                    </div>
                    <div class="journey-step">
                        <span class="journey-step-badge"><i class="fas fa-user-check"></i></span>
                        <div class="journey-step-card">
                            <div class="journey-step-title">3. Registrasi Ulang</div>
                            <p class="journey-step-copy">Peserta yang lulus melanjutkan registrasi ulang sampai diverifikasi kampus.</p>
                        </div>
                    </div>
                </div>
            </section>

            <section class="admission-side-panel">
                <h3>Dokumen Wajib</h3>
                <p>Siapkan seluruh dokumen berikut sebelum mengisi form agar proses pendaftaran tidak terputus di tengah jalan.</p>

                <div class="document-checklist">
                    <div class="document-check">
                        <span class="document-check-icon"><i class="fas fa-image"></i></span>
                        <div>
                            <strong>Pas Foto Terbaru</strong>
                            <span>Format JPG atau PNG dengan ukuran maksimal 2 MB.</span>
                        </div>
                    </div>
                    <div class="document-check">
                        <span class="document-check-icon"><i class="fas fa-file-pdf"></i></span>
                        <div>
                            <strong>Ijazah</strong>
                            <span>Scan atau foto dokumen yang masih jelas dan mudah dibaca.</span>
                        </div>
                    </div>
                    <div class="document-check">
                        <span class="document-check-icon"><i class="fas fa-file-alt"></i></span>
                        <div>
                            <strong>Raport</strong>
                            <span>Unggah file raport sesuai format yang diminta oleh panitia PMB.</span>
                        </div>
                    </div>
                    <div class="document-check">
                        <span class="document-check-icon"><i class="fas fa-id-card"></i></span>
                        <div>
                            <strong>KTP atau KK</strong>
                            <span>Dokumen identitas calon mahasiswa atau keluarga yang masih berlaku.</span>
                        </div>
                    </div>
                    <div class="document-check">
                        <span class="document-check-icon"><i class="fas fa-receipt"></i></span>
                        <div>
                            <strong>Bukti Pembayaran Pendaftaran</strong>
                            <span>Simpan bukti transfer atau pembayaran untuk proses verifikasi panitia.</span>
                        </div>
                    </div>
                </div>
            </section>

            <section class="admission-side-panel admission-support">
                <h3>Butuh Bantuan?</h3>
                <p>Kalau ada kendala saat mengisi form, cek status pendaftaran atau hubungi tim PMB dari jalur cepat berikut.</p>

                <div class="support-actions">
                    <a href="{{ route('pmb.status') }}" class="support-action">
                        <span><i class="fas fa-search mr-2"></i> Cek Status Pendaftaran</span>
                        <i class="fas fa-arrow-right"></i>
                    </a>
                    <a href="{{ route('public.contact') }}" class="support-action">
                        <span><i class="fas fa-phone-alt mr-2"></i> Kontak Kampus</span>
                        <i class="fas fa-arrow-right"></i>
                    </a>
                </div>
            </section>
        </aside>
    </div>
@endsection

@push('scripts')
    <script>
        document.querySelectorAll('[data-upload-tile]').forEach(function (tile) {
            var input = tile.querySelector('input[type="file"]');
            var status = tile.querySelector('[data-upload-status]');

            if (!input || !status) {
                return;
            }

            input.addEventListener('change', function () {
                if (input.files && input.files.length > 0) {
                    status.textContent = input.files[0].name;
                    tile.classList.add('has-file');
                } else {
                    status.textContent = status.dataset.placeholder || 'Belum ada file dipilih';
                    tile.classList.remove('has-file');
                }
            });
        });
    </script>
@endpush