@extends('layouts.app')

@section('title', 'Borang Permohonan — ' . $job->getText('position', $lang))

@push('styles')
<style>
    .ja { color: #0f172a; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; max-width: 800px; margin: 0 auto; }
    .ja * { box-sizing: border-box; }
    .ja-back { display: inline-flex; align-items: center; gap: 6px; color: #003c5d; text-decoration: none; font-size: 14px; font-weight: 500; margin-bottom: 16px; }
    .ja-back:hover { text-decoration: underline; color: #003c5d; }
    .ja-header { background: #003c5d; color: #fff; border-radius: 8px; padding: 28px 32px; margin-bottom: 24px; }
    .ja-header h2 { font-size: 22px; font-weight: 600; margin: 0 0 6px; }
    .ja-header p { opacity: 0.8; font-size: 14px; margin: 0; }
    .ja-section { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 28px; margin-bottom: 20px; }
    .ja-section__title { font-size: 18px; font-weight: 600; color: #003c5d; margin: 0 0 20px; display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 2px solid #e9eef3; }
    .ja-section__icon { width: 28px; height: 28px; border-radius: 6px; background: #e0f2fe; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .ja-section__icon svg { width: 16px; height: 16px; color: #003c5d; }
    .ja-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .ja-full { grid-column: 1 / -1; }
    .ja-field { margin-bottom: 0; }
    .ja-label { display: block; font-size: 13px; font-weight: 500; color: #334155; margin-bottom: 6px; }
    .ja-label .req { color: #ef4444; margin-left: 2px; }
    .ja-input, .ja-select, .ja-textarea { width: 100%; padding: 10px 14px; border: 1.5px solid #d1d5db; border-radius: 6px; font-size: 14px; color: #0f172a; background: #fff; font-family: inherit; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
    .ja-uppercase { text-transform: uppercase; }
    .ja-input:focus, .ja-select:focus, .ja-textarea:focus { outline: none; border-color: #003c5d; box-shadow: 0 0 0 3px rgba(0, 60, 93, 0.08); }
    .ja-input::placeholder, .ja-textarea::placeholder { color: #94a3b8; }
    .ja-select { appearance: auto; cursor: pointer; }
    .ja-textarea { resize: vertical; min-height: 100px; line-height: 1.6; }
    .ja-file-wrap { position: relative; border: 1.5px solid #d1d5db; border-radius: 6px; padding: 10px 14px; background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: space-between; transition: border-color 0.15s ease; }
    .ja-file-wrap:hover { border-color: #003c5d; }
    .ja-file-wrap input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
    .ja-file-label { font-size: 14px; color: #94a3b8; }
    .ja-file-btn { padding: 4px 12px; background: #f1f5f9; border-radius: 4px; font-size: 12px; color: #003c5d; font-weight: 500; }
    .ja-file-hint { font-size: 11px; color: #94a3b8; margin-top: 4px; }
    .ja-sub-title { font-size: 15px; font-weight: 600; color: #003c5d; margin: 20px 0 14px; padding-top: 14px; border-top: 1px solid #e9eef3; }
    .ja-sub-title:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }
    .ja-perakuan { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 22px 28px; margin-bottom: 20px; }
    .ja-perakuan h4 { font-size: 16px; font-weight: 600; color: #003c5d; margin: 0 0 14px; }
    .ja-check-row { display: flex; align-items: flex-start; gap: 12px; }
    .ja-check-row input[type="checkbox"] { width: 18px; height: 18px; margin-top: 3px; flex-shrink: 0; accent-color: #003c5d; cursor: pointer; }
    .ja-check-text { font-size: 13px; color: #334155; line-height: 1.6; }
    .ja-check-text .req { color: #ef4444; }
    .ja-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 30px; }
    .ja-btn { padding: 14px 24px; font-size: 14px; border-radius: 8px; font-weight: 600; cursor: pointer; border: 1.5px solid #d1d5db; text-align: center; text-decoration: none; font-family: inherit; transition: all 0.15s ease; }
    .ja-btn--cancel { background: #fff; color: #334155; }
    .ja-btn--cancel:hover { background: #f1f5f9; }
    .ja-btn--submit { background: #003c5d; color: #fff; border-color: #003c5d; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
    .ja-btn--submit:hover { background: #004d7a; }
    .ja-alert { padding: 14px 20px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; display: flex; align-items: center; gap: 10px; }
    .ja-alert--success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
    .ja-alert--error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
    @media (max-width: 640px) { .ja-grid { grid-template-columns: 1fr; } .ja-buttons { grid-template-columns: 1fr; } .ja-header { padding: 22px; } .ja-section { padding: 22px; } }
    @keyframes ja-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
    .ja-spin { animation: ja-spin 1s linear infinite; }
</style>
@endpush

@section('content')
@php
    $p = old() ?: [];
    $pv = function($key, $default = '') use ($p) { return e($p[$key] ?? request()->old($key, $default)); };
    $psel = function($key, $val) use ($p) { return (isset($p[$key]) && (string)$p[$key] === $val) ? ' selected' : ''; };
    $negeriList = ['Johor','Kedah','Kelantan','Melaka','Negeri Sembilan','Pahang','Perak','Perlis','Pulau Pinang','Sabah','Sarawak','Selangor','Terengganu','W.P. Kuala Lumpur','W.P. Labuan','W.P. Putrajaya'];
    
    $bangsaList = ['Melayu', 'Cina', 'India', 'Orang Asli', 'Lain-lain'];
    $agamaList = ['Islam', 'Kristian', 'Buddha', 'Hindu', 'Sikhism', 'Tao', 'Konfusianisma', 'Bahai', 'Tiada Agama', 'Lain-lain Agama', 'Tiada Maklumat'];
    $oldAkademikJson = old('akademik_json', '[]');
@endphp

<div class="ja">
    <a href="{{ route('jawatan.show', $job->id) }}" class="ja-back">← Kembali ke Maklumat Jawatan</a>

    <div class="ja-header">
        <h2>Borang Permohonan Jawatan ({{ $job->type === 'kontrak' ? 'Kontrak' : 'Tetap' }})</h2>
        <p>{{ $job->getText('position', $lang) }} – {{ $job->ref_no }}</p>
        <p style="margin-top: 8px; font-size: 13px; font-weight: 500; opacity: 0.95;">
            Taraf Jawatan: {{ $job->type === 'kontrak' ? 'KONTRAK' : 'TETAP' }}
        </p>
    </div>

    @if($applySuccess ?? false)
        <div style="background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 40px; text-align: center; margin-bottom: 20px;">
            <div style="width: 64px; height: 64px; border-radius: 50%; background: #ecfdf5; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px;">
                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="color: #059669;"><path d="M5 13l4 4L19 7" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
            </div>
            <h3 style="font-size: 22px; color: #003c5d; margin-bottom: 12px; font-weight: 600;">Permohonan Berjaya Dihantar!</h3>
            <p style="color: #64748b; font-size: 15px; margin-bottom: 24px; max-width: 400px; margin-left: auto; margin-right: auto; line-height: 1.6;">
                Terima kasih kerana berminat menyertai kami. Permohonan anda untuk jawatan {{ $job->getText('position', $lang) }} telah berjaya direkodkan. Sekiranya terpilih, anda akan dihubungi melalui e-mel.
            </p>
            <a href="{{ route('jawatan.index') }}" class="ja-btn" style="background: #003c5d; color: #fff; padding: 12px 24px; border: none; font-weight: 500; text-decoration: none; display: inline-block;">Kembali ke Senarai Jawatan</a>
        </div>
    @else
        @if($applyError ?? false)
            <div class="ja-alert ja-alert--error">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.6"/><path d="M15 9l-6 6M9 9l6 6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>
                {{ $applyError }}
            </div>
        @endif

        <form method="POST" action="{{ route('jawatan.submit', $job->id) }}" enctype="multipart/form-data" id="applyForm">
            @csrf
            <input type="hidden" name="job_id" value="{{ $job->id }}">

            {{-- 1. MAKLUMAT PERIBADI --}}
            <div class="ja-section">
                <h3 class="ja-section__title"><span class="ja-section__icon"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" stroke="currentColor" stroke-width="1.6"/><circle cx="12" cy="7" r="4" stroke="currentColor" stroke-width="1.6"/></svg></span>1. Maklumat Peribadi</h3>
                
                <div class="ja-field ja-full" style="margin-bottom: 20px; border-bottom: 1px solid #f1f5f9; padding-bottom: 20px;">
                    <label class="ja-label">Gambar Passport <span class="req">*</span></label>
                    <div style="display: flex; gap: 16px; align-items: center;">
                        <div id="passport-preview" style="width: 100px; height: 120px; border: 1.5px dashed #cbd5e1; display: flex; align-items: center; justify-content: center; background: #f8fafc; border-radius: 6px; font-size: 11px; color: #94a3b8; text-align: center; padding: 4px; overflow: hidden;">
                            Tiada Gambar
                        </div>
                        <div style="flex: 1;">
                            <div class="ja-file-wrap">
                                <span class="ja-file-label" id="passport-file-label">Pilih gambar (.jpg, .jpeg, .png)</span>
                                <span class="ja-file-btn">Browse</span>
                                <input type="file" name="gambar_passport" accept=".jpg,.jpeg,.png" required id="passport-input">
                            </div>
                            <div class="ja-file-hint">Format: JPG, PNG sahaja (Maks: 2MB)</div>
                        </div>
                    </div>
                </div>

                <div class="ja-grid">
                    <div class="ja-field ja-full"><label class="ja-label">Nama Penuh (seperti dalam Kad Pengenalan) <span class="req">*</span></label><input type="text" name="nama_penuh" class="ja-input ja-uppercase" value="{{ old('nama_penuh') }}" required oninput="this.value = this.value.toUpperCase()"></div>
                    
                    <div class="ja-field"><label class="ja-label">No. Kad Pengenalan <span class="req">*</span></label><input type="text" name="no_kp" id="ic_input" class="ja-input" placeholder="000000-00-0000" value="{{ old('no_kp') }}" required></div>
                    <div class="ja-field"><label class="ja-label">Umur <span class="req">*</span></label><input type="number" name="umur" id="umur_input" class="ja-input" min="15" max="100" value="{{ old('umur') }}" required readonly style="background-color: #f1f5f9; cursor: not-allowed;"></div>
                    
                    <div class="ja-field ja-full" style="margin: 10px 0;">
                        <label class="ja-label">Warganegara Malaysia? <span class="req">*</span></label>
                        <div style="display: flex; gap: 24px; margin-top: 8px;">
                            <label style="display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer;">
                                <input type="radio" name="warganegara_malaysia" value="1" style="width:16px; height:16px; accent-color:#003c5d;" checked> Ya
                            </label>
                            <label style="display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer;">
                                <input type="radio" name="warganegara_malaysia" value="0" style="width:16px; height:16px; accent-color:#003c5d;"> Tidak
                            </label>
                        </div>
                    </div>

                    <div class="ja-field"><label class="ja-label">Bangsa <span class="req">*</span></label>
                        <select name="bangsa" class="ja-select" required>
                            <option value="">Pilih Keturunan/Bangsa</option>
                            @foreach($bangsaList as $b)
                                <option value="{{ $b }}" {{ old('bangsa') === $b ? 'selected' : '' }}>{{ $b }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="ja-field"><label class="ja-label">Agama <span class="req">*</span></label>
                        <select name="agama" class="ja-select" required>
                            <option value="">Pilih Agama</option>
                            @foreach($agamaList as $a)
                                <option value="{{ $a }}" {{ old('agama') === $a ? 'selected' : '' }}>{{ $a }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="ja-field ja-full">
                        <label class="ja-label">E-mel <span class="req">*</span></label>
                        <input type="email" name="email" class="ja-input" value="{{ old('email') }}" required>
                        <div style="font-size: 11px; color: #475569; margin-top: 4px; font-style: italic; line-height: 1.4;">
                            * Sila pastikan alamat e-mel yang didaftarkan adalah sah, tepat dan masih aktif bagi memastikan segala urusan komunikasi dapat dilaksanakan dengan lancar.
                        </div>
                    </div>

                    <div class="ja-field"><label class="ja-label">No. Telefon <span class="req">*</span></label><input type="tel" name="no_telefon" class="ja-input" placeholder="01X-XXX XXXX" value="{{ old('no_telefon') }}" required></div>
                    <div class="ja-field"><label class="ja-label">Tarikh Lahir</label><input type="date" name="tarikh_lahir" id="dob_input" class="ja-input" value="{{ old('tarikh_lahir') }}" readonly style="background-color: #f1f5f9; cursor: not-allowed;"></div>
                    <div class="ja-field"><label class="ja-label">Jantina</label><select name="jantina" id="jantina_input" class="ja-select" readonly style="background-color: #f1f5f9; pointer-events: none;"><option value="">Pilih Jantina</option><option value="L" {{ old('jantina') == 'L' ? 'selected' : '' }}>Lelaki</option><option value="P" {{ old('jantina') == 'P' ? 'selected' : '' }}>Perempuan</option></select></div>
                    <div class="ja-field"><label class="ja-label">Status Perkahwinan <span class="req">*</span></label><select name="status_perkahwinan" id="marriage_select" class="ja-select" required><option value="">Pilih Status</option><option value="Bujang" {{ old('status_perkahwinan') == 'Bujang' ? 'selected' : '' }}>Bujang</option><option value="Berkahwin" {{ old('status_perkahwinan') == 'Berkahwin' ? 'selected' : '' }}>Berkahwin</option><option value="Duda/Janda" {{ old('status_perkahwinan') == 'Duda/Janda' ? 'selected' : '' }}>Duda/Janda</option></select></div>
                    
                    <div class="ja-field ja-full"><label class="ja-label">Alamat Surat Menyurat <span class="req">*</span></label><textarea name="alamat" class="ja-textarea ja-uppercase" rows="3" required oninput="this.value = this.value.toUpperCase()">{{ old('alamat') }}</textarea></div>
                    <div class="ja-field"><label class="ja-label">Poskod</label><input type="text" name="poskod" class="ja-input" maxlength="10" value="{{ old('poskod') }}"></div>
                    <div class="ja-field"><label class="ja-label">Bandar</label><input type="text" name="bandar" class="ja-input ja-uppercase" value="{{ old('bandar') }}" oninput="this.value = this.value.toUpperCase()"></div>
                    <div class="ja-field"><label class="ja-label">Negeri</label><select name="negeri" class="ja-select"><option value="">Pilih Negeri</option>@foreach($negeriList as $n)<option value="{{ $n }}" {{ old('negeri') == $n ? 'selected' : '' }}>{{ $n }}</option>@endforeach</select></div>
                </div>
            </div>

            {{-- 2. MAKLUMAT PASANGAN --}}
            <div class="ja-section" id="section_pasangan" style="display: none;">
                <h3 class="ja-section__title">
                    <span class="ja-section__icon">
                        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" fill="currentColor"/>
                        </svg>
                    </span>
                    2. Maklumat Pasangan
                </h3>
                <div class="ja-grid">
                    <div class="ja-field ja-full">
                        <label class="ja-label">Nama Pasangan <span class="req">*</span></label>
                        <input type="text" name="pasangan_nama" id="pasangan_nama_input" class="ja-input ja-uppercase" value="{{ old('pasangan_nama') }}" oninput="this.value = this.value.toUpperCase()">
                    </div>
                    <div class="ja-field">
                        <label class="ja-label">No. Kad Pengenalan Pasangan <span class="req">*</span></label>
                        <input type="text" name="pasangan_no_kp" id="pasangan_no_kp_input" class="ja-input" placeholder="000000-00-0000" value="{{ old('pasangan_no_kp') }}">
                    </div>
                    <div class="ja-field">
                        <label class="ja-label">Pekerjaan Pasangan <span class="req">*</span></label>
                        <input type="text" name="pasangan_pekerjaan" id="pasangan_pekerjaan_input" class="ja-input ja-uppercase" placeholder="cth: KERANI, GURU" value="{{ old('pasangan_pekerjaan') }}" oninput="this.value = this.value.toUpperCase()">
                    </div>
                </div>
            </div>

            {{-- 3. MAKLUMAT IBU BAPA --}}
            <div class="ja-section">
                <h3 class="ja-section__title">
                    <span class="ja-section__icon">
                        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" stroke="currentColor" stroke-width="1.6"/><circle cx="9" cy="7" r="4" stroke="currentColor" stroke-width="1.6"/>
                        </svg>
                    </span>
                    3. Maklumat Ibu Bapa
                </h3>
                <p style="font-size: 12px; color: #475569; margin-bottom: 20px; font-style: italic;">(Sila nyatakan butiran walaupun ibu/bapa telah meninggal dunia)</p>
                
                <h4 class="ja-sub-title" style="margin-top: 0;">Bapa</h4>
                <div class="ja-grid" style="margin-bottom: 20px;">
                    <div class="ja-field ja-full">
                        <label class="ja-label">Nama Bapa <span class="req">*</span></label>
                        <input type="text" name="bapa_nama" class="ja-input ja-uppercase" value="{{ old('bapa_nama') }}" required oninput="this.value = this.value.toUpperCase()">
                    </div>
                    <div class="ja-field">
                        <label class="ja-label">No. Kad Pengenalan Bapa <span class="req">*</span></label>
                        <input type="text" name="bapa_no_kp" class="ja-input" placeholder="000000-00-0000" value="{{ old('bapa_no_kp') }}" required>
                    </div>
                    <div class="ja-field">
                        <label class="ja-label">Pekerjaan Bapa <span class="req">*</span></label>
                        <input type="text" name="bapa_pekerjaan" class="ja-input ja-uppercase" placeholder="cth: PESARA, PENIAGA" value="{{ old('bapa_pekerjaan') }}" required oninput="this.value = this.value.toUpperCase()">
                    </div>
                    <div class="ja-field ja-full" style="margin-top: 8px;">
                        <label style="display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; font-weight: 500; color: #334155;">
                            <input type="checkbox" name="bapa_angkat" value="1" style="width:16px; height:16px; accent-color:#003c5d;" {{ old('bapa_angkat') ? 'checked' : '' }}>
                            Bapa Angkat
                        </label>
                    </div>
                </div>

                <h4 class="ja-sub-title">Ibu</h4>
                <div class="ja-grid">
                    <div class="ja-field ja-full">
                        <label class="ja-label">Nama Ibu <span class="req">*</span></label>
                        <input type="text" name="ibu_nama" class="ja-input ja-uppercase" value="{{ old('ibu_nama') }}" required oninput="this.value = this.value.toUpperCase()">
                    </div>
                    <div class="ja-field">
                        <label class="ja-label">No. Kad Pengenalan Ibu <span class="req">*</span></label>
                        <input type="text" name="ibu_no_kp" class="ja-input" placeholder="000000-00-0000" value="{{ old('ibu_no_kp') }}" required>
                    </div>
                    <div class="ja-field">
                        <label class="ja-label">Pekerjaan Ibu <span class="req">*</span></label>
                        <input type="text" name="ibu_pekerjaan" class="ja-input ja-uppercase" placeholder="cth: SURI RUMAH, PESARA" value="{{ old('ibu_pekerjaan') }}" required oninput="this.value = this.value.toUpperCase()">
                    </div>
                    <div class="ja-field ja-full" style="margin-top: 8px;">
                        <label style="display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; font-weight: 500; color: #334155;">
                            <input type="checkbox" name="ibu_angkat" value="1" style="width:16px; height:16px; accent-color:#003c5d;" {{ old('ibu_angkat') ? 'checked' : '' }}>
                            Mak Angkat
                        </label>
                    </div>
                </div>
            </div>

            {{-- 4. MAKLUMAT FIZIKAL --}}
            <div class="ja-section">
                <h3 class="ja-section__title">
                    <span class="ja-section__icon">
                        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M22 12h-4l-3 9L9 3l-3 9H2" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </span>
                    4. Maklumat Fizikal
                </h3>
                <div class="ja-grid">
                    <div class="ja-field">
                        <label class="ja-label">Ketinggian (CM) <span class="req">*</span></label>
                        <input type="number" step="0.1" name="tinggi" id="tinggi_input" class="ja-input" placeholder="cth: 169.0" required>
                    </div>
                    <div class="ja-field">
                        <label class="ja-label">Berat (KG) <span class="req">*</span></label>
                        <input type="number" step="0.1" name="berat" id="berat_input" class="ja-input" placeholder="cth: 65.0" required>
                    </div>
                    <div class="ja-field">
                        <label class="ja-label">BMI</label>
                        <input type="text" name="bmi" id="bmi_input" class="ja-input" readonly placeholder="Auto-Kira" style="background-color: #f1f5f9; cursor: not-allowed; font-weight:600; color:#0f172a;">
                    </div>
                    <div class="ja-field">
                        <label class="ja-label">Adakah Anda Merokok? <span class="req">*</span></label>
                        <select name="merokok" class="ja-select" required>
                            <option value="Tidak">Tidak</option>
                            <option value="Ya">Ya</option>
                        </select>
                    </div>
                </div>
            </div>

            {{-- 5. LATAR BELAKANG PENDIDIKAN --}}
            <div class="ja-section">
                <h3 class="ja-section__title">
                    <span class="ja-section__icon">
                        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M12 3L1 9l11 6 9-4.91V17M5 13.18v4L12 21l7-3.82v-4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </span>
                    5. Kelayakan Akademik
                </h3>
                
                <div id="academic-list">
                    <!-- Dynamic education cards will be appended here via JavaScript -->
                </div>
                
                <div style="margin-top: 15px; text-align: right;">
                    <button type="button" id="btn-add-education" class="ja-btn" style="background: #0ea5e9; color: #fff; border-color: #0ea5e9; font-size: 13px; padding: 8px 16px; display: inline-flex; align-items: center; gap: 6px;">
                        <span>+</span> Tambah Tahap Pendidikan
                    </button>
                </div>

                <input type="hidden" name="akademik_json" id="akademik_json_input">
            </div>

            {{-- 6. MAKLUMAT BUKAN AKADEMIK --}}
            <div class="ja-section">
                <h3 class="ja-section__title">
                    <span class="ja-section__icon">
                        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </span>
                    6. Maklumat Bukan Akademik
                </h3>
                <div class="ja-grid">
                    <div class="ja-field ja-full">
                        <label class="ja-label">Kebolehan Bahasa <span class="req">*</span></label>
                        <input type="text" name="bukan_akademik_bahasa" class="ja-input" placeholder="cth: Bahasa Melayu (Sangat Baik), English (Baik)" required value="{{ old('bukan_akademik_bahasa') }}">
                    </div>
                    <div class="ja-field">
                        <label class="ja-label">Kurang Upaya? <span class="req">*</span></label>
                        <select name="bukan_akademik_kurang_upaya" id="kurang_upaya_select" class="ja-select" required>
                            <option value="Tidak">Tidak</option>
                            <option value="Ya">Ya</option>
                        </select>
                    </div>
                    <div class="ja-field">
                        <label class="ja-label">Butiran Kurang Upaya (Jika Ya)</label>
                        <input type="text" name="bukan_akademik_kurang_upaya_details" id="kurang_upaya_details" class="ja-input" placeholder="Sila nyatakan jika ada" value="{{ old('bukan_akademik_kurang_upaya_details') }}">
                    </div>
                    <div class="ja-field ja-full" style="margin-top: 10px;">
                        <label class="ja-label">Lesen Memandu <span class="req">*</span> (Sila tanda semua yang berkenaan)</label>
                        <div style="display: flex; gap: 20px; flex-wrap: wrap; margin-top: 6px;">
                            @foreach(['B2', 'B', 'D', 'DA', 'E', 'GDL'] as $l)
                                <label style="display: flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer;">
                                    <input type="checkbox" name="bukan_akademik_lesen_memandu[]" value="{{ $l }}" style="width:16px; height:16px; accent-color:#003c5d;"> {{ $l }}
                                </label>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>

            {{-- 7. PENGALAMAN BEKERJA --}}
            <div class="ja-section">
                <h3 class="ja-section__title">
                    <span class="ja-section__icon">
                        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M3 10h18v10H3V10z" stroke="currentColor" stroke-width="1.6"/>
                            <path d="M7 10V6a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v4" stroke="currentColor" stroke-width="1.6"/>
                        </svg>
                    </span>
                    7. Pengalaman Bekerja
                </h3>

                {{-- Sub-section A: PSB/PSL --}}
                <div style="background:#f8fafc; border:1px solid #cbd5e1; border-radius:8px; padding:16px; margin-bottom:16px;">
                    <div class="ja-field ja-full" style="margin-bottom: 0;">
                        <label class="ja-label" style="font-weight:600;">Adakah anda seorang Pegawai Sedang Berkhidmat (PSB) atau memohon secara Lantikan Lintas (PSL)? <span class="req">*</span></label>
                        <select name="is_psb" id="psb_toggle" class="ja-select" required>
                            <option value="0">Tidak</option>
                            <option value="1">Ya (Sila lengkapkan maklumat di bawah)</option>
                        </select>
                    </div>

                    <div id="psb_section" style="display: none; border-top: 1px dashed #cbd5e1; padding-top: 16px; margin-top: 12px;">
                        <div class="ja-grid">
                            <div class="ja-field"><label class="ja-label">Jenis Perkhidmatan</label><input type="text" name="psb_jenis_perkhidmatan" class="ja-input" placeholder="cth: Pentadbiran Dan Sokongan"></div>
                            <div class="ja-field"><label class="ja-label">Jenis Lantikan</label><input type="text" name="psb_jenis_lantikan" class="ja-input" placeholder="cth: Am"></div>
                            <div class="ja-field"><label class="ja-label">Tarikh Lantikan Pertama ke Perkhidmatan Awam</label><input type="date" name="psb_tarikh_lantikan_pertama" class="ja-input"></div>
                            <div class="ja-field"><label class="ja-label">Skim Perkhidmatan Sekarang</label><input type="text" name="psb_skim_sekarang" class="ja-input" placeholder="cth: N19"></div>
                            <div class="ja-field"><label class="ja-label">Tarikh Lantikan ke Skim Perkhidmatan Sekarang</label><input type="date" name="psb_tarikh_lantikan_skim" class="ja-input"></div>
                            <div class="ja-field"><label class="ja-label">Kementerian/Jabatan Tempat Bertugas</label><input type="text" name="psb_kementerian" class="ja-input"></div>
                            <div class="ja-field"><label class="ja-label">Negeri Tempat Bertugas</label><select name="psb_negeri" class="ja-select"><option value="">Pilih Negeri</option>@foreach($negeriList as $n)<option value="{{ $n }}">{{ $n }}</option>@endforeach</select></div>
                            <div class="ja-field"><label class="ja-label">Bahagian/Daerah/Jajahan Tempat Bertugas</label><input type="text" name="psb_bahagian" class="ja-input"></div>
                        </div>
                    </div>
                </div>

                {{-- Sub-section B: Bekas Tentera --}}
                <div style="background:#f8fafc; border:1px solid #cbd5e1; border-radius:8px; padding:16px; margin-bottom:16px;">
                    <div class="ja-field ja-full" style="margin-bottom: 0;">
                        <label class="ja-label" style="font-weight:600;">Adakah anda seorang Bekas Tentera/Polis? <span class="req">*</span></label>
                        <select name="is_tentera" id="tentera_toggle" class="ja-select" required>
                            <option value="0">Tidak</option>
                            <option value="1">Ya (Sila lengkapkan maklumat di bawah)</option>
                        </select>
                    </div>

                    <div id="tentera_section" style="display: none; border-top: 1px dashed #cbd5e1; padding-top: 16px; margin-top: 12px;">
                        <div class="ja-grid">
                            <div class="ja-field"><label class="ja-label">Kategori</label><select name="tentera_kategori" class="ja-select"><option value="">Pilih Kategori</option><option value="Bekas Tentera Darat">Bekas Tentera Darat</option><option value="Bekas Tentera Laut">Bekas Tentera Laut</option><option value="Bekas Tentera Udara">Bekas Tentera Udara</option><option value="Polis">Polis/PDRM</option></select></div>
                            <div class="ja-field"><label class="ja-label">Pangkat Terakhir</label><input type="text" name="tentera_pangkat" class="ja-input"></div>
                            <div class="ja-field ja-full"><label class="ja-label">Kategori Bekas Tentera Yang Ditamatkan Perkhidmatan</label><input type="text" name="tentera_kategori_tamat" class="ja-input"></div>
                            <div class="ja-field ja-full">
                                <label class="ja-label">Menerima Pencen? *</label>
                                <select name="tentera_pencen" class="ja-select"><option value="Tidak">Tidak</option><option value="Ya">Ya</option></select>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Sub-section C: Pekerjaan Semasa --}}
                <div style="background:#f8fafc; border:1px solid #cbd5e1; border-radius:8px; padding:16px;">
                    <div class="ja-field ja-full" style="margin-bottom: 12px;">
                        <label class="ja-label" style="font-weight:600;">Maklumat Pekerjaan Semasa & Sejarah Pekerjaan</label>
                        <div style="display: flex; gap: 24px; margin-top: 8px;">
                            <label style="display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer;">
                                <input type="radio" name="kategori_pekerjaan" value="Swasta" style="width:16px; height:16px; accent-color:#003c5d;" {{ old('kategori_pekerjaan','Swasta') == 'Swasta' ? 'checked' : '' }}> Swasta
                            </label>
                            <label style="display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer;">
                                <input type="radio" name="kategori_pekerjaan" value="Kerajaan" style="width:16px; height:16px; accent-color:#003c5d;" {{ old('kategori_pekerjaan') == 'Kerajaan' ? 'checked' : '' }}> Kerajaan
                            </label>
                        </div>
                    </div>

                    <div class="ja-grid" style="border-top: 1px dashed #cbd5e1; padding-top: 16px; margin-top: 12px;">
                        <div class="ja-field">
                            <label class="ja-label">Tempat Berkhidmat (Majikan/Jabatan)</label>
                            <input type="text" name="majikan_semasa" class="ja-input ja-uppercase" value="{{ old('majikan_semasa') }}" placeholder="NAMA MAJIKAN / JABATAN" oninput="this.value = this.value.toUpperCase()">
                        </div>
                        <div class="ja-field">
                            <label class="ja-label">Jawatan Semasa / Jawatan (Pegawai / Bekas Tentera / dll)</label>
                            <input type="text" name="jawatan_semasa" class="ja-input ja-uppercase" value="{{ old('jawatan_semasa') }}" oninput="this.value = this.value.toUpperCase()">
                        </div>
                        <div class="ja-field">
                            <label class="ja-label">Taraf Jawatan Semasa</label>
                            <input type="text" name="taraf_jawatan_semasa" class="ja-input ja-uppercase" value="{{ old('taraf_jawatan_semasa') }}" placeholder="cth: TETAP / KONTRAK" oninput="this.value = this.value.toUpperCase()">
                        </div>
                        <div class="ja-field">
                            <label class="ja-label">Tarikh Lantikan</label>
                            <input type="date" name="tarikh_lantikan" class="ja-input" value="{{ old('tarikh_lantikan') }}">
                        </div>
                        <div class="ja-field">
                            <label class="ja-label">Tarikh Tamat Perkhidmatan</label>
                            <input type="date" name="tarikh_tamat_perkhidmatan" class="ja-input" value="{{ old('tarikh_tamat_perkhidmatan') }}">
                        </div>
                        <div class="ja-field">
                            <label class="ja-label">Gaji Semasa (jika ada)</label>
                            <input type="text" name="gaji_semasa" class="ja-input" placeholder="RM 3,000" value="{{ old('gaji_semasa') }}">
                        </div>
                        <div class="ja-field">
                            <label class="ja-label">Tempoh Notis Berhenti (jika bekerja)</label>
                            <select name="tempoh_notis" class="ja-select">
                                <option value="">Pilih</option>
                                <option value="Segera" {{ old('tempoh_notis') == 'Segera' ? 'selected' : '' }}>Segera</option>
                                <option value="2 minggu" {{ old('tempoh_notis') == '2 minggu' ? 'selected' : '' }}>2 minggu</option>
                                <option value="1 bulan" {{ old('tempoh_notis') == '1 bulan' ? 'selected' : '' }}>1 bulan</option>
                                <option value="2 bulan" {{ old('tempoh_notis') == '2 minggu' ? 'selected' : '' }}>2 bulan</option>
                                <option value="3 bulan" {{ old('tempoh_notis') == '3 bulan' ? 'selected' : '' }}>3 bulan</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            {{-- 8. DOKUMEN SOKONGAN --}}
            <div class="ja-section">
                <h3 class="ja-section__title"><span class="ja-section__icon"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 3v12M12 15l-4-4M12 15l4-4M5 21h14" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></span>8. Dokumen Sokongan</h3>
                <div class="ja-grid">
                    <div class="ja-field ja-full">
                        <label class="ja-label">Resume / CV <span class="req">*</span></label>
                        <div class="ja-file-wrap"><span class="ja-file-label">Choose File No file chosen</span><span class="ja-file-btn">Browse</span><input type="file" name="resume" accept=".pdf" required onchange="this.parentNode.querySelector('.ja-file-label').textContent = this.files[0]?.name || 'Choose File No file chosen'"></div>
                        <div class="ja-file-hint">Format: PDF sahaja (Max: 2MB)</div>
                    </div>
                    <div class="ja-field ja-full">
                        <label class="ja-label">Sijil Pengangkatan JPN / Sijil Pendaftaran Pengangkatan <span style="font-size:11px;color:#94a3b8;">(jika berkenaan)</span></label>
                        <div class="ja-file-wrap"><span class="ja-file-label">Choose File No file chosen</span><span class="ja-file-btn">Browse</span><input type="file" name="sijil_pengangkatan" accept=".pdf" onchange="this.parentNode.querySelector('.ja-file-label').textContent = this.files[0]?.name || 'Choose File No file chosen'"></div>
                        <div class="ja-file-hint">Format: PDF sahaja (Max: 2MB)</div>
                    </div>
                    <div class="ja-field ja-full">
                        <label class="ja-label">Sijil Kelayakan Akademik</label>
                        <div class="ja-file-wrap"><span class="ja-file-label">Choose File No file chosen</span><span class="ja-file-btn">Browse</span><input type="file" name="sijil" accept=".pdf" onchange="this.parentNode.querySelector('.ja-file-label').textContent = this.files[0]?.name || 'Choose File No file chosen'"></div>
                        <div class="ja-file-hint">Format: PDF sahaja (Max: 2MB)</div>
                    </div>
                    <div class="ja-field ja-full">
                        <label class="ja-label">Salinan Kad Pengenalan Pemohon <span class="req">*</span></label>
                        <div class="ja-file-wrap"><span class="ja-file-label">Choose File No file chosen</span><span class="ja-file-btn">Browse</span><input type="file" name="kp_pemohon" accept=".pdf" required onchange="this.parentNode.querySelector('.ja-file-label').textContent = this.files[0]?.name || 'Choose File No file chosen'"></div>
                        <div class="ja-file-hint">Format: PDF sahaja (Max: 2MB)</div>
                    </div>
                    <div class="ja-field ja-full">
                        <label class="ja-label">Salinan Kad Pengenalan Bapa <span class="req">*</span></label>
                        <div class="ja-file-wrap"><span class="ja-file-label">Choose File No file chosen</span><span class="ja-file-btn">Browse</span><input type="file" name="kp_bapa" accept=".pdf" required onchange="this.parentNode.querySelector('.ja-file-label').textContent = this.files[0]?.name || 'Choose File No file chosen'"></div>
                        <div class="ja-file-hint">Format: PDF sahaja (Max: 2MB)</div>
                    </div>
                    <div class="ja-field ja-full">
                        <label class="ja-label">Dokumen Sokongan Lain</label>
                        <div class="ja-file-wrap"><span class="ja-file-label">Choose File No file chosen</span><span class="ja-file-btn">Browse</span><input type="file" name="dokumen_lain" accept=".pdf" onchange="this.parentNode.querySelector('.ja-file-label').textContent = this.files[0]?.name || 'Choose File No file chosen'"></div>
                        <div class="ja-file-hint">Format: PDF sahaja (Max: 2MB)</div>
                    </div>
                </div>
            </div>

            {{-- 9. SURAT IRINGAN --}}
            <div class="ja-section">
                <h3 class="ja-section__title"><span class="ja-section__icon"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z" stroke="currentColor" stroke-width="1.6"/><path d="M14 2v6h6M16 13H8M16 17H8M10 9H8" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg></span>9. Surat Iringan</h3>
                <p style="font-size:13px;color:#64748b;margin:0 0 10px;">Nyatakan sebab anda berminat dan sesuai untuk jawatan ini</p>
                <textarea name="surat_iringan" class="ja-textarea" rows="6" placeholder="Saya berminat untuk memohon jawatan ini kerana...">{{ old('surat_iringan') }}</textarea>
            </div>

            {{-- Perakuan --}}
            <div class="ja-perakuan">
                <h4>Perakuan</h4>
                <div class="ja-check-row">
                    <input type="checkbox" name="perakuan" id="perakuanCheck" value="1" required>
                    <label for="perakuanCheck" class="ja-check-text">Saya mengesahkan bahawa semua maklumat yang diberikan adalah benar dan tepat. Saya memahami bahawa sebarang maklumat palsu boleh menyebabkan permohonan saya dibatalkan atau tindakan tatatertib diambil sekiranya saya telah dilantik. <span class="req">*</span></label>
                </div>
            </div>

            {{-- BUTTONS --}}
            <div class="ja-buttons">
                <a href="{{ route('jawatan.show', $job->id) }}" class="ja-btn ja-btn--cancel" id="btnCancel">Batal</a>
                <button type="submit" class="ja-btn ja-btn--submit" id="btnSubmit">
                    <span id="btnIconSubmit" style="display: flex; align-items: center;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
                    <span id="btnIconLoading" style="display: none; align-items: center;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="ja-spin"><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
                    <span id="btnText">Hantar Permohonan</span>
                </button>
            </div>
        </form>
    @endif
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Universal Auto-Uppercase hardening for Name and Text Inputs
    document.querySelectorAll('.ja-uppercase, input[name="nama_penuh"], input[name="bapa_nama"], input[name="ibu_nama"], input[name="pasangan_nama"], input[name="bandar"], textarea[name="alamat"]').forEach(function(el) {
        el.addEventListener('input', function() {
            var start = this.selectionStart;
            var end = this.selectionEnd;
            this.value = this.value.toUpperCase();
            if (start !== null && end !== null) {
                this.setSelectionRange(start, end);
            }
        });
    });

    // Dynamic Toggles for Experience Section
    var psbToggle = document.getElementById('psb_toggle');
    var psbSection = document.getElementById('psb_section');
    var psbInputs = psbSection?.querySelectorAll('input, select');

    function togglePSB() {
        if (psbToggle && psbSection) {
            if (psbToggle.value === '1') {
                psbSection.style.display = 'block';
                psbInputs.forEach(function(input) {
                    if (input.name !== 'psb_tarikh_lantikan_skim' && input.name !== 'psb_tarikh_lantikan_pertama') {
                        input.required = true;
                    }
                });
            } else {
                psbSection.style.display = 'none';
                psbInputs.forEach(function(input) {
                    input.required = false;
                    input.value = '';
                });
            }
        }
    }
    psbToggle?.addEventListener('change', togglePSB);
    togglePSB();

    var tenteraToggle = document.getElementById('tentera_toggle');
    var tenteraSection = document.getElementById('tentera_section');
    var tenteraInputs = tenteraSection?.querySelectorAll('input, select');

    function toggleTentera() {
        if (tenteraToggle && tenteraSection) {
            if (tenteraToggle.value === '1') {
                tenteraSection.style.display = 'block';
                tenteraInputs.forEach(function(input) {
                    if (input.name === 'tentera_kategori' || input.name === 'tentera_pencen') {
                        input.required = true;
                    }
                });
            } else {
                tenteraSection.style.display = 'none';
                tenteraInputs.forEach(function(input) {
                    input.required = false;
                    input.value = '';
                });
            }
        }
    }
    tenteraToggle?.addEventListener('change', toggleTentera);
    toggleTentera();

    // Spouse section based on marriage status
    var marriageSelect = document.getElementById('marriage_select');
    var sectionPasangan = document.getElementById('section_pasangan');
    var pasanganInputs = sectionPasangan?.querySelectorAll('input');

    function togglePasangan() {
        if (marriageSelect && sectionPasangan) {
            if (marriageSelect.value === 'Berkahwin') {
                sectionPasangan.style.display = 'block';
                pasanganInputs.forEach(function(input) {
                    input.required = true;
                });
            } else {
                sectionPasangan.style.display = 'none';
                pasanganInputs.forEach(function(input) {
                    input.required = false;
                    input.value = '';
                });
            }
        }
    }
    marriageSelect?.addEventListener('change', togglePasangan);
    togglePasangan();

    // Kurang Upaya details toggle
    var kurangUpayaSelect = document.getElementById('kurang_upaya_select');
    var kurangUpayaDetails = document.getElementById('kurang_upaya_details');

    function toggleKurangUpaya() {
        if (kurangUpayaSelect && kurangUpayaDetails) {
            if (kurangUpayaSelect.value === 'Ya') {
                kurangUpayaDetails.required = true;
                kurangUpayaDetails.disabled = false;
            } else {
                kurangUpayaDetails.required = false;
                kurangUpayaDetails.disabled = true;
                kurangUpayaDetails.value = '';
            }
        }
    }
    kurangUpayaSelect?.addEventListener('change', toggleKurangUpaya);
    toggleKurangUpaya();

    // Auto calculate Age, DOB, Jantina from IC
    var icInput = document.getElementById('ic_input');
    var dobInput = document.getElementById('dob_input');
    var umurInput = document.getElementById('umur_input');
    var jantinaInput = document.getElementById('jantina_input');

    if (icInput) {
        icInput.addEventListener('input', function() {
            var val = this.value.replace(/[^0-9]/g, '');
            if (val.length > 6) {
                val = val.substring(0, 6) + '-' + val.substring(6);
            }
            if (val.length > 9) {
                val = val.substring(0, 9) + '-' + val.substring(9, 13);
            }
            this.value = val;

            var rawIc = val.replace(/-/g, '');
            if (rawIc.length === 12) {
                // DOB
                var yy = rawIc.substring(0, 2);
                var mm = rawIc.substring(2, 4);
                var dd = rawIc.substring(4, 6);
                
                var currentYear = new Date().getFullYear();
                var currentCentury = Math.floor(currentYear / 100) * 100;
                var year = parseInt(yy);
                if (currentCentury + year > currentYear) {
                    year = currentCentury - 100 + year;
                } else {
                    year = currentCentury + year;
                }

                var dob = year + '-' + mm + '-' + dd;
                dobInput.value = dob;

                // Age
                var age = currentYear - year;
                umurInput.value = age;

                // Gender (odd/even of last digit)
                var lastDigit = parseInt(rawIc.substring(11, 12));
                jantinaInput.value = lastDigit % 2 === 0 ? 'P' : 'L';
            }
        });
    }

    // BMI auto calculation
    var tinggiInput = document.getElementById('tinggi_input');
    var beratInput = document.getElementById('berat_input');
    var bmiInput = document.getElementById('bmi_input');

    function calcBMI() {
        var tinggiVal = parseFloat(tinggiInput.value);
        var beratVal = parseFloat(beratInput.value);
        if (tinggiVal > 0 && beratVal > 0) {
            var tinggiM = tinggiVal / 100;
            var bmi = beratVal / (tinggiM * tinggiM);
            bmiInput.value = bmi.toFixed(2);
        } else {
            bmiInput.value = '';
        }
    }
    tinggiInput?.addEventListener('input', calcBMI);
    beratInput?.addEventListener('input', calcBMI);

    // Passport photo preview
    var passportInput = document.getElementById('passport-input');
    var passportPreview = document.getElementById('passport-preview');
    var passportLabel = document.getElementById('passport-file-label');

    passportInput?.addEventListener('change', function() {
        var file = this.files[0];
        if (file) {
            passportLabel.textContent = file.name;
            if (file.size > 2 * 1024 * 1024) {
                alert('Gambar passport mestilah kurang daripada 2MB!');
                this.value = '';
                passportPreview.innerHTML = 'Tiada Gambar';
                passportLabel.textContent = 'Pilih gambar (.jpg, .jpeg, .png)';
                return;
            }
            var reader = new FileReader();
            reader.onload = function(e) {
                passportPreview.innerHTML = '<img src="' + e.target.result + '" style="width: 100%; height: 100%; object-fit: cover;">';
            };
            reader.readAsDataURL(file);
        } else {
            passportPreview.innerHTML = 'Tiada Gambar';
            passportLabel.textContent = 'Pilih gambar (.jpg, .jpeg, .png)';
        }
    });

    // Dynamic Academic Cards Logic
    var academicList = document.getElementById('academic-list');
    var btnAddEducation = document.getElementById('btn-add-education');
    var akademikJsonInput = document.getElementById('akademik_json_input');

    var defaultSpmSubjects = [
        'BAHASA MELAYU', 'BAHASA INGGERIS', 'SEJARAH', 
        'MATEMATIK', 'SAINS', 'PENDIDIKAN ISLAM / PENDIDIKAN MORAL'
    ];
    var spmGrades = ['A+', 'A', 'A-', 'B+', 'B', 'C+', 'C', 'D', 'E', 'G', '-'];

    function createAcademicCard(data) {
        var card = document.createElement('div');
        card.className = 'academic-card';
        card.style.cssText = 'border: 1px solid #cbd5e1; border-radius: 8px; padding: 18px; margin-bottom: 16px; background: #f8fafc; position: relative;';

        card.innerHTML = '<button type="button" class="btn-remove-academic" style="position: absolute; right: 12px; top: 12px; background: none; border: none; color: #ef4444; font-weight: bold; cursor: pointer; font-size: 13px;">Hapus</button>' + 
            '<div class="ja-grid" style="margin-top: 10px;">' +
            '    <div class="ja-field ja-full">' +
            '        <label class="ja-label">Tahap Pendidikan <span class="req">*</span></label>' +
            '        <select class="academic-level ja-select" required>' +
            '            <option value="">Pilih Tahap</option>' +
            '            <option value="SPM">Sijil Pelajaran Malaysia (SPM)</option>' +
            '            <option value="SPMV">Sijil Pelajaran Malaysia Vokasional (SPMV)</option>' +
            '            <option value="Diploma">Diploma</option>' +
            '            <option value="Ijazah Sarjana Muda">Ijazah Sarjana Muda</option>' +
            '            <option value="Ijazah Sarjana">Ijazah Sarjana</option>' +
            '            <option value="PhD">PhD</option>' +
            '            <option value="Profesional">Profesional</option>' +
            '            <option value="Ikhtisas">Ikhtisas</option>' +
            '        </select>' +
            '    </div>' +
            '</div>' +
            '<div class="academic-fields-container" style="margin-top: 16px;"></div>';

        var levelSelect = card.querySelector('.academic-level');
        var container = card.querySelector('.academic-fields-container');

        levelSelect.addEventListener('change', function() {
            var val = this.value;
            container.innerHTML = '';
            if (val === 'SPM' || val === 'SPMV') {
                container.innerHTML = 
                    '<div class="ja-grid" style="margin-bottom: 16px;">' +
                    '    <div class="ja-field"><label class="ja-label">No. Angka Giliran <span class="req">*</span></label><input type="text" class="spm-angka-giliran ja-input" required placeholder="cth: AA123456"></div>' +
                    '    <div class="ja-field"><label class="ja-label">Tahun <span class="req">*</span></label><input type="number" class="spm-tahun ja-input" required placeholder="cth: 2015"></div>' +
                    '</div>' +
                    '<div class="ja-field ja-full">' +
                    '    <label class="ja-label" style="font-weight: 600;">Keputusan Subjek ' + val + '</label>' +
                    '    <div style="max-height: 250px; overflow-y: auto; border: 1.5px solid #d1d5db; border-radius: 6px; padding: 12px; background: #fff;">' +
                    '        <table style="width: 100%; border-collapse: collapse; font-size: 13px;">' +
                    '            <thead>' +
                    '                <tr style="border-bottom: 2px solid #e2e8f0; text-align: left;">' +
                    '                    <th style="padding: 6px 4px; color: #003c5d;">Bil</th>' +
                    '                    <th style="padding: 6px 4px; color: #003c5d;">Subjek</th>' +
                    '                    <th style="padding: 6px 4px; color: #003c5d;">Gred <span class="req">*</span></th>' +
                    '                </tr>' +
                    '            </thead>' +
                    '            <tbody class="spm-subjects-body"></tbody>' +
                    '        </table>' +
                    '    </div>' +
                    '</div>';

                var tbody = container.querySelector('.spm-subjects-body');
                defaultSpmSubjects.forEach(function(subj, idx) {
                    var tr = document.createElement('tr');
                    tr.style.cssText = 'border-bottom: 1px solid #e2e8f0;';
                    
                    var optionsHtml = '<option value="">Pilih Gred</option>';
                    spmGrades.forEach(function(g) {
                        optionsHtml += '<option value="' + g + '">' + g + '</option>';
                    });

                    tr.innerHTML = 
                        '<td style="padding: 6px 4px; font-weight: 600; width: 30px;">' + (idx + 1) + '</td>' +
                        '<td style="padding: 6px 4px; font-weight: 500; color:#334155;" class="spm-subject-name">' + subj + '</td>' +
                        '<td style="padding: 6px 4px;">' +
                        '    <select class="spm-subject-grade ja-select" required style="padding: 4px 8px; width: 120px;">' +
                        optionsHtml +
                        '    </select>' +
                        '</td>';
                    tbody.appendChild(tr);
                });
            } else if (val !== '') {
                container.innerHTML = 
                    '<div class="ja-grid">' +
                    '    <div class="ja-field"><label class="ja-label">Nama Institusi <span class="req">*</span></label><input type="text" class="acad-institusi ja-input" required></div>' +
                    '    <div class="ja-field"><label class="ja-label">Bidang Pengajian / Jurusan <span class="req">*</span></label><input type="text" class="acad-bidang ja-input" required></div>' +
                    '    <div class="ja-field"><label class="ja-label">Tahun <span class="req">*</span></label><input type="number" class="acad-tahun ja-input" required placeholder="cth: 2020"></div>' +
                    '    <div class="ja-field"><label class="ja-label">CGPA / Keputusan <span class="req">*</span></label><input type="text" class="acad-cgpa ja-input" required placeholder="cth: 3.50"></div>' +
                    '</div>';
            }
        });

        if (data) {
            levelSelect.value = data.tahap;
            levelSelect.dispatchEvent(new Event('change'));

            if (data.tahap === 'SPM' || data.tahap === 'SPMV') {
                card.querySelector('.spm-angka-giliran').value = data.angka_giliran || '';
                card.querySelector('.spm-tahun').value = data.tahun || '';
                var rows = card.querySelectorAll('.spm-subjects-body tr');
                if (data.subjek && data.gred) {
                    rows.forEach(function(row) {
                        var subName = row.querySelector('.spm-subject-name').textContent;
                        var mapIdx = data.subjek.indexOf(subName);
                        if (mapIdx !== -1 && data.gred[mapIdx]) {
                            row.querySelector('.spm-subject-grade').value = data.gred[mapIdx];
                        }
                    });
                }
            } else {
                card.querySelector('.acad-institusi').value = data.institusi || '';
                card.querySelector('.acad-bidang').value = data.bidang || '';
                card.querySelector('.acad-tahun').value = data.tahun || '';
                card.querySelector('.acad-cgpa').value = data.cgpa || '';
            }
        }

        card.querySelector('.btn-remove-academic').addEventListener('click', function() {
            if (academicList.querySelectorAll('.academic-card').length > 1) {
                card.remove();
            } else {
                alert('Anda perlu mempunyai sekurang-kurangnya satu kelayakan akademik.');
            }
        });

        academicList.appendChild(card);
    }

    // Populate old education data or default SPM
    var oldAkademik = {!! $oldAkademikJson !!};
    if (oldAkademik && oldAkademik.length > 0) {
        oldAkademik.forEach(function(data) {
            createAcademicCard(data);
        });
    } else {
        createAcademicCard({ tahap: 'SPM', subjek: defaultSpmSubjects, gred: [] });
    }

    btnAddEducation?.addEventListener('click', function() {
        createAcademicCard(null);
    });

    // Form submit logic
    document.getElementById('applyForm')?.addEventListener('submit', function(e) {
        if (!this.checkValidity()) return;

        // Serialize dynamic academic cards to JSON
        var cards = academicList.querySelectorAll('.academic-card');
        var academicData = [];

        cards.forEach(function(card) {
            var level = card.querySelector('.academic-level').value;
            if (!level) return;

            var entry = { tahap: level };
            if (level === 'SPM' || level === 'SPMV') {
                entry.angka_giliran = card.querySelector('.spm-angka-giliran').value;
                entry.tahun = card.querySelector('.spm-tahun').value;
                entry.subjek = [];
                entry.gred = [];
                card.querySelectorAll('.spm-subjects-body tr').forEach(function(row) {
                    entry.subjek.push(row.querySelector('.spm-subject-name').textContent);
                    entry.gred.push(row.querySelector('.spm-subject-grade').value);
                });
            } else {
                entry.institusi = card.querySelector('.acad-institusi').value;
                entry.bidang = card.querySelector('.acad-bidang').value;
                entry.tahun = card.querySelector('.acad-tahun').value;
                entry.cgpa = card.querySelector('.acad-cgpa').value;
            }
            academicData.push(entry);
        });

        akademikJsonInput.value = JSON.stringify(academicData);

        var btnSubmit = document.getElementById('btnSubmit');
        var btnCancel = document.getElementById('btnCancel');
        btnSubmit.disabled = true;
        btnSubmit.style.opacity = '0.85';
        btnSubmit.style.cursor = 'not-allowed';
        btnCancel.style.pointerEvents = 'none';
        btnCancel.style.opacity = '0.5';
        document.getElementById('btnIconSubmit').style.display = 'none';
        document.getElementById('btnIconLoading').style.display = 'flex';
        document.getElementById('btnText').textContent = 'Menghantar...';
    });
});
</script>
@endpush