@extends('frontend.layouts.main')
@section('title', 'Daftar Program: ' . $program->title)

@push('styles')
<style>
.reg-hero { background:var(--c-navy); padding:52px 0; position:relative; overflow:hidden; }
.reg-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 70% at 80% 40%, rgba(37,99,235,.2), transparent); }
.reg-hero-inner { position:relative; z-index:1; }
.step-indicator { display:flex; align-items:center; gap:0; margin-bottom:32px; }
.step-dot { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex-shrink:0; }
.step-dot.done { background:var(--c-green); color:#fff; }
.step-dot.current { background:var(--c-blue); color:#fff; box-shadow:0 0 0 4px rgba(37,99,235,.2); }
.step-dot.todo { background:var(--c-100); color:var(--c-400); }
.step-line { flex:1; height:2px; background:var(--c-200); }
.step-line.done { background:var(--c-green); }
.form-section { background:var(--white); border:1px solid var(--c-200); border-radius:16px; padding:28px; margin-bottom:20px; }
.form-section-title { font-size:14.5px; font-weight:700; color:var(--c-900); display:flex; align-items:center; gap:8px; margin-bottom:20px; padding-bottom:12px; border-bottom:1px solid var(--c-100); }
.form-section-title i { color:var(--c-blue); font-size:13px; }
.inp {
    width:100%; padding:10px 13px;
    border:1.5px solid var(--c-200); border-radius:9px;
    font-size:14px; font-family:var(--ff-body);
    outline:none; background:var(--c-50); color:var(--c-900);
    transition:border-color .18s, box-shadow .18s;
}
.inp:focus { border-color:var(--c-blue); box-shadow:0 0 0 3px rgba(37,99,235,.1); background:#fff; }
.inp.is-error { border-color:#ef4444; }
.inp-label { font-size:13px; font-weight:600; color:var(--c-700); display:block; margin-bottom:5px; }
.inp-hint { font-size:11.5px; color:var(--c-400); margin-top:4px; }
.inp-error { font-size:12px; color:#dc2626; margin-top:4px; display:flex; align-items:center; gap:4px; }
</style>
@endpush

@section('content')

{{-- HERO --}}
<div class="reg-hero">
    <div class="container reg-hero-inner">
        <nav aria-label="breadcrumb" class="mb-3">
            <ol class="breadcrumb" style="background:transparent;padding:0;margin:0;">
                <li class="breadcrumb-item"><a href="{{ route('frontend.index') }}" style="color:rgba(255,255,255,.5);font-size:13px;">Beranda</a></li>
                <li class="breadcrumb-item"><a href="{{ route('frontend.programs') }}" style="color:rgba(255,255,255,.5);font-size:13px;">Program</a></li>
                <li class="breadcrumb-item active" style="color:rgba(255,255,255,.8);font-size:13px;">Pendaftaran</li>
            </ol>
        </nav>
        <div class="row align-items-center g-4">
            <div class="col-lg-7">
                <div class="eyebrow eyebrow-light mb-3"><i class="fas fa-user-plus" style="font-size:9px;"></i> Form Pendaftaran</div>
                <h1 style="font-size:clamp(1.5rem,3.5vw,2.2rem);font-weight:800;color:#fff;margin-bottom:10px;">{{ $program->title }}</h1>
                <p style="color:rgba(255,255,255,.65);font-size:15px;margin:0;">Isi formulir di bawah dengan data yang benar dan lengkap</p>
            </div>
            <div class="col-lg-5">
                <div style="background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:20px;">
                    <div style="display:flex;flex-wrap:wrap;gap:14px;">
                        <div style="display:flex;align-items:center;gap:8px;">
                            <i class="fas fa-clock" style="color:#60a5fa;font-size:13px;"></i>
                            <div>
                                <div style="font-size:10.5px;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.05em;">Durasi</div>
                                <div style="font-size:13.5px;font-weight:700;color:#fff;">{{ $program->duration_months }} Bulan</div>
                            </div>
                        </div>
                        <div style="display:flex;align-items:center;gap:8px;">
                            <i class="fas fa-users" style="color:#34d399;font-size:13px;"></i>
                            <div>
                                <div style="font-size:10.5px;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.05em;">Kapasitas</div>
                                <div style="font-size:13.5px;font-weight:700;color:#fff;">Maks. {{ $program->max_students }} Siswa</div>
                            </div>
                        </div>
                        <div style="display:flex;align-items:center;gap:8px;">
                            <i class="fas fa-tag" style="color:#fbbf24;font-size:13px;"></i>
                            <div>
                                <div style="font-size:10.5px;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.05em;">Biaya</div>
                                <div style="font-size:13.5px;font-weight:700;color:#fff;">Rp {{ number_format($program->fee) }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- FORM --}}
<section style="padding:48px 0 72px;background:var(--c-50);">
    <div class="container">
        <div class="row g-5 justify-content-center">
            <div class="col-lg-8">

                @if($errors->any())
                <div style="background:#fef2f2;border:1px solid #fecaca;border-radius:12px;padding:14px 18px;margin-bottom:20px;display:flex;gap:10px;align-items:flex-start;">
                    <i class="fas fa-exclamation-circle" style="color:#dc2626;margin-top:2px;flex-shrink:0;"></i>
                    <div>
                        <div style="font-size:13.5px;font-weight:700;color:#dc2626;margin-bottom:4px;">Terdapat kesalahan:</div>
                        <ul style="margin:0;padding-left:16px;font-size:13px;color:#dc2626;">
                            @foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach
                        </ul>
                    </div>
                </div>
                @endif

                <form action="{{ route('frontend.register.store', $program->slug) }}" method="POST" enctype="multipart/form-data">
                    @csrf

                    {{-- Data Pribadi --}}
                    <div class="form-section">
                        <div class="form-section-title"><i class="fas fa-user"></i> Data Pribadi</div>
                        <div class="row g-3">
                            <div class="col-md-12">
                                <label class="inp-label">Nama Lengkap <span style="color:#ef4444;">*</span></label>
                                <input type="text" name="full_name" class="inp {{ $errors->has('full_name') ? 'is-error' : '' }}" value="{{ old('full_name') }}" placeholder="Masukkan nama lengkap sesuai KTP" required>
                                @error('full_name')<div class="inp-error"><i class="fas fa-exclamation-circle" style="font-size:10px;"></i>{{ $message }}</div>@enderror
                            </div>
                            <div class="col-md-6">
                                <label class="inp-label">Email <span style="color:#ef4444;">*</span></label>
                                <input type="email" name="email" class="inp {{ $errors->has('email') ? 'is-error' : '' }}" value="{{ old('email') }}" placeholder="email@contoh.com" required>
                                @error('email')<div class="inp-error"><i class="fas fa-exclamation-circle" style="font-size:10px;"></i>{{ $message }}</div>@enderror
                            </div>
                            <div class="col-md-6">
                                <label class="inp-label">No. Telepon / WA <span style="color:#ef4444;">*</span></label>
                                <input type="tel" name="phone" class="inp {{ $errors->has('phone') ? 'is-error' : '' }}" value="{{ old('phone') }}" placeholder="08xx xxxx xxxx" required>
                                @error('phone')<div class="inp-error"><i class="fas fa-exclamation-circle" style="font-size:10px;"></i>{{ $message }}</div>@enderror
                            </div>
                            <div class="col-md-6">
                                <label class="inp-label">NIK (Nomor KTP)</label>
                                <input type="text" name="nik" class="inp" value="{{ old('nik') }}" placeholder="16 digit NIK" maxlength="20">
                            </div>
                            <div class="col-md-3">
                                <label class="inp-label">Tanggal Lahir</label>
                                <input type="date" name="birth_date" class="inp" value="{{ old('birth_date') }}">
                            </div>
                            <div class="col-md-3">
                                <label class="inp-label">Jenis Kelamin</label>
                                <select name="gender" class="inp">
                                    <option value="">Pilih</option>
                                    <option value="Laki-laki" {{ old('gender')=='Laki-laki' ? 'selected' : '' }}>Laki-laki</option>
                                    <option value="Perempuan" {{ old('gender')=='Perempuan' ? 'selected' : '' }}>Perempuan</option>
                                </select>
                            </div>
                            <div class="col-12">
                                <label class="inp-label">Alamat Lengkap</label>
                                <textarea name="address" class="inp" rows="2" placeholder="Jl. ...">{{ old('address') }}</textarea>
                            </div>
                            <div class="col-md-6">
                                <label class="inp-label">Kota/Kabupaten</label>
                                <input type="text" name="city" class="inp" value="{{ old('city') }}" placeholder="Jakarta Selatan">
                            </div>
                            <div class="col-md-6">
                                <label class="inp-label">Provinsi</label>
                                <input type="text" name="province" class="inp" value="{{ old('province') }}" placeholder="DKI Jakarta">
                            </div>
                        </div>
                    </div>

                    {{-- Pendidikan --}}
                    <div class="form-section">
                        <div class="form-section-title"><i class="fas fa-graduation-cap"></i> Riwayat Pendidikan</div>
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label class="inp-label">Pendidikan Terakhir</label>
                                <select name="education_level" class="inp">
                                    <option value="">Pilih</option>
                                    @foreach(['SMP','SMA/SMK','D3','D4','S1','S2','S3'] as $edu)
                                    <option value="{{ $edu }}" {{ old('education_level')==$edu ? 'selected' : '' }}>{{ $edu }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-5">
                                <label class="inp-label">Nama Sekolah/Universitas</label>
                                <input type="text" name="school_name" class="inp" value="{{ old('school_name') }}" placeholder="Universitas Indonesia">
                            </div>
                            <div class="col-md-3">
                                <label class="inp-label">Tahun Lulus</label>
                                <input type="number" name="graduation_year" class="inp" value="{{ old('graduation_year') }}" min="1990" max="{{ date('Y') }}" placeholder="{{ date('Y') }}">
                            </div>
                        </div>
                    </div>

                    {{-- Dokumen --}}
                    <div class="form-section">
                        <div class="form-section-title"><i class="fas fa-paperclip"></i> Upload Dokumen</div>
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label class="inp-label">CV / Resume</label>
                                <input type="file" name="cv_file" class="inp" accept=".pdf,.doc,.docx" style="padding:8px;">
                                <div class="inp-hint">PDF, DOC, DOCX · Maks. 5MB</div>
                            </div>
                            <div class="col-md-4">
                                <label class="inp-label">Foto 3×4 (JPG/PNG)</label>
                                <input type="file" name="photo_file" class="inp" accept=".jpg,.jpeg,.png" style="padding:8px;">
                                <div class="inp-hint">JPG, PNG · Maks. 2MB</div>
                            </div>
                            <div class="col-md-4">
                                <label class="inp-label">Scan Ijazah</label>
                                <input type="file" name="ijazah_file" class="inp" accept=".pdf,.jpg,.jpeg,.png" style="padding:8px;">
                                <div class="inp-hint">PDF, JPG, PNG · Maks. 5MB</div>
                            </div>
                        </div>
                    </div>

                    {{-- Motivasi --}}
                    <div class="form-section">
                        <div class="form-section-title"><i class="fas fa-pen"></i> Motivasi</div>
                        <label class="inp-label">Mengapa Anda ingin mengikuti program ini?</label>
                        <textarea name="motivation" class="inp" rows="5"
                            placeholder="Ceritakan motivasi Anda dan apa yang ingin Anda capai setelah mengikuti program ini...">{{ old('motivation') }}</textarea>
                        <div class="inp-hint">Minimal 50 kata — Maks. 2000 karakter</div>
                    </div>

                    {{-- Submit --}}
                    <div style="display:flex;gap:14px;align-items:center;flex-wrap:wrap;">
                        <button type="submit" class="btn-corp btn-corp-lg btn-blue" style="flex:1;justify-content:center;">
                            <i class="fas fa-paper-plane"></i> Kirim Pendaftaran
                        </button>
                        <a href="{{ route('frontend.programs') }}" class="btn-corp btn-outline">
                            <i class="fas fa-arrow-left"></i> Batal
                        </a>
                    </div>
                    <p style="font-size:12px;color:var(--c-400);margin-top:10px;text-align:center;">
                        <i class="fas fa-lock me-1"></i> Data Anda aman dan hanya digunakan untuk keperluan seleksi.
                    </p>
                </form>
            </div>

            {{-- Sidebar Info --}}
            <div class="col-lg-4 d-none d-lg-block">
                <div style="position:sticky;top:76px;">
                    <div style="background:var(--white);border:1px solid var(--c-200);border-radius:16px;overflow:hidden;margin-bottom:16px;">
                        <div style="background:var(--c-navy);padding:20px;">
                            <div style="font-size:11px;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.07em;margin-bottom:6px;">Program Dipilih</div>
                            <div style="font-size:1rem;font-weight:800;color:#fff;margin-bottom:8px;">{{ $program->title }}</div>
                            <div style="font-size:1.3rem;font-weight:800;color:#60a5fa;">Rp {{ number_format($program->fee) }}</div>
                        </div>
                        <div style="padding:18px;">
                            @foreach([
                                ['fas fa-clock','Durasi', $program->duration_months.' Bulan'],
                                ['fas fa-users','Kapasitas','Maks. '.$program->max_students.' Siswa'],
                                ['fas fa-certificate','Sertifikat','BNSP Resmi'],
                                ['fas fa-briefcase','Penempatan','Job Placement'],
                            ] 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-blue);font-size:12px;width:14px;flex-shrink:0;"></i>
                                <span style="font-size:13px;color:var(--c-600);flex:1;">{{ $info[1] }}</span>
                                <span style="font-size:13px;font-weight:600;color:var(--c-900);">{{ $info[2] }}</span>
                            </div>
                            @endforeach
                        </div>
                    </div>

                    <div style="background:var(--c-50);border:1px solid var(--c-200);border-radius:14px;padding:18px;">
                        <div style="font-size:13.5px;font-weight:700;color:var(--c-900);margin-bottom:10px;">
                            <i class="fas fa-info-circle me-2" style="color:var(--c-blue);"></i>Alur Seleksi
                        </div>
                        @php $steps = [
                            ['Pendaftaran Online','Isi form & upload dokumen'],
                            ['Review Administrasi','Tim kami memverifikasi berkas'],
                            ['Interview','Jadwal akan dihubungi via WA'],
                            ['Pengumuman','Hasil seleksi via email & WA'],
                        ]; @endphp
                        @foreach($steps as $idx => $step)
                        <div style="display:flex;gap:10px;align-items:flex-start;margin-bottom:10px;">
                            <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;">{{ $idx+1 }}</div>
                            <div>
                                <div style="font-size:13px;font-weight:600;color:var(--c-900);">{{ $step[0] }}</div>
                                <div style="font-size:12px;color:var(--c-500);">{{ $step[1] }}</div>
                            </div>
                        </div>
                        @endforeach
                    </div>

                    <div style="margin-top:12px;text-align:center;">
                        <a href="{{ route('frontend.registration.check') }}" style="font-size:13px;color:var(--c-blue);font-weight:600;display:inline-flex;align-items:center;gap:5px;">
                            <i class="fas fa-search" style="font-size:11px;"></i> Sudah daftar? Cek status
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection