<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Data Diri - E-Recruitment</title>
    <link rel="icon" type="image/png" href="{{ asset('assets/images/logo.png') }}">
    <link rel="stylesheet" href="{{ asset('css/style.css?v=1779407811') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .form-section { display: none; }
        .form-section.active { display: block; }
        
        /* Table styles for Family section */
        .family-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
            margin-bottom: 25px;
            font-size: 0.85rem;
        }
        .family-table th, .family-table td {
            border: 1px solid var(--border-color);
            padding: 8px;
            text-align: left;
        }
        .family-table th {
            background-color: #F8F9FA;
            font-weight: 600;
        }
        .family-table input, .family-table select {
            width: 100%;
            padding: 6px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        .section-subtitle {
            font-size: 1rem;
            font-weight: 600;
            margin-top: 20px;
            margin-bottom: 10px;
            color: var(--primary-green);
            border-bottom: 2px solid var(--light-green);
            padding-bottom: 5px;
        }
    </style>
</head>
<body style="background-color: #E8F5E9;">

    <div class="top-bar">
        <div class="top-bar-left" style="display: flex; align-items: center; gap: 8px;">
            <div style="width: 20px; height: 20px; background-image: url('{{ asset('assets/images/logo.png') }}'); background-size: cover; border-radius: 2px;"></div>
            PT Brahma Bina Bakti
        </div>
                <div class="top-bar-right">
            <a href="{{ route('panduan') }}"><i class="fas fa-book"></i> Panduan</a>
            @guest
                <a href="{{ route('login') }}" class="btn-logout" style="background-color: #1976D2;"><i class="fas fa-sign-in-alt"></i> Login</a>
            @else
                <span style="color: #fff; margin-right: 15px;"><i class="fas fa-user"></i> {{ Auth::user()->nama_depan }}</span>
                <a href="#" onclick="event.preventDefault(); document.getElementById('logout-form').submit();" class="btn-logout"><i class="fas fa-sign-out-alt"></i> Logout</a>
            @endguest
        </div>
    </div>

    <div class="form-container">
        <div class="form-header-top">
            <div class="form-logo">
                <div style="width: 50px; height: 50px; background-image: url('{{ asset('assets/images/logo.png') }}'); background-size: cover; border-radius: 4px;">
                </div>
                <div class="logo-text">
                <h1 style="margin:0; font-size: 1.2rem; font-weight: 700; color: #333;">E-Recruitment PT BBB Sekernan</h1>
                <p style="margin:0; font-size: 0.9rem; color: #666;">Recruitment Online</p>
            </div>
            </div>
            <div class="user-info">
                <span class="badge">Data Diri Pelamar</span>
                <span class="name">{{ strtoupper(Auth::user()->name) }}</span>
            </div>
        </div>

        <div class="stepper" id="formStepper">
            <div class="step active" data-step="1">
                <div class="step-number">1</div>
                <span>Identitas Diri</span>
            </div>
            <div class="step" data-step="2">
                <div class="step-number">2</div>
                <span>Identitas Keluarga</span>
            </div>
            <div class="step" data-step="3">
                <div class="step-number">3</div>
                <span>Pendidikan</span>
            </div>
            <div class="step" data-step="4">
                <div class="step-number">4</div>
                <span>Pekerjaan</span>
            </div>
            <div class="step" data-step="5">
                <div class="step-number">5</div>
                <span>Lain-lain</span>
            </div>
            <div class="step" data-step="6">
                <div class="step-number">6</div>
                <span style="background: white; padding-right: 10px;">Submit</span>
            </div>
        </div>

        @if(session('success'))
            <div style="background-color: #D4EDDA; color: #155724; padding: 15px; margin-bottom: 20px; border: 1px solid #C3E6CB; border-radius: 5px;">
                <strong>Berhasil!</strong> {{ session('success') }}
            </div>
        @endif

        <form id="recruitmentForm" action="{{ route('apply.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="vacancy_id" value="{{ $vacancy->id ?? '' }}">

            {{-- Info Lowongan yang Dipilih --}}
            <div style="background: linear-gradient(135deg, #E8F5E9, #C8E6C9); padding: 14px 20px; border-radius: 8px; margin-bottom: 20px; display: flex; align-items: center; gap: 12px; border: 1px solid #A5D6A7;">
                <i class="fas fa-briefcase" style="color: #2E7D32; font-size: 1.2rem;"></i>
                <div>
                    <div style="font-size: 0.75rem; color: #388E3C; text-transform: uppercase; letter-spacing: 0.5px;">Melamar untuk posisi</div>
                    <div style="font-weight: 700; color: #1B5E20; font-size: 1.05rem;">
                        {{ $vacancy->title ?? '-' }} — {{ $vacancy->location ?? '' }}
                        @if(!empty($vacancy->department))
                            <span style="font-size: 0.9rem; font-weight: normal; color: #2E7D32; background: rgba(255,255,255,0.6); padding: 2px 8px; border-radius: 12px; margin-left: 8px;">
                                <i class="fas fa-building"></i> {{ $vacancy->department }}
                            </span>
                        @endif
                    </div>
                </div>
            </div>
            
            <!-- STEP 1: Identitas Diri -->
            <div class="form-section active" id="step-1">
                <h4 class="form-section-title">1. Identitas Diri</h4>
                
                <div class="form-grid">

                    <div class="form-group full-width">
                        <label>Nama Lengkap *</label>
                        <input type="text" name="full_name" required>
                    </div>
                    
                    <div class="form-group">
                        <label>Jenis Kelamin *</label>
                        <select name="gender" required>
                            <option value="">Pilih</option>
                            <option>Laki-Laki</option>
                            <option>Perempuan</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label>Golongan Darah</label>
                        <select name="blood_type">
                            <option value="">Pilih</option>
                            <option>A</option>
                            <option>B</option>
                            <option>AB</option>
                            <option>O</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label>Tempat Lahir *</label>
                        <input type="text" name="birth_place" required>
                    </div>

                    <div class="form-group">
                        <label>Tanggal Lahir *</label>
                        <input type="date" name="birth_date" required>
                    </div>

                    <div class="form-group">
                        <label>Agama *</label>
                        <select name="religion" required>
                            <option value="">Pilih</option>
                            <option>Islam</option>
                            <option>Kristen Protestan</option>
                            <option>Katolik</option>
                            <option>Hindu</option>
                            <option>Buddha</option>
                            <option>Konghucu</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label>Tinggi Badan (cm)</label>
                        <input type="number" name="height">
                    </div>
                    <div class="form-group">
                        <label>Berat Badan (kg)</label>
                        <input type="number" name="weight">
                    </div>

                    <div class="form-group full-width">
                        <label>Alamat sesuai KTP *</label>
                        <input type="text" name="address" placeholder="Jalan / Detail Alamat" required style="margin-bottom: 10px;">
                        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px;">
                            <input type="text" name="kelurahan" placeholder="Kelurahan" required>
                            <input type="text" name="kecamatan" placeholder="Kecamatan" required>
                            <input type="text" name="kota" placeholder="Kota/Kabupaten" required>
                            <input type="text" name="kode_pos" placeholder="Kode Pos" required>
                        </div>
                    </div>

                    <div class="form-group">
                        <label>Email *</label>
                        <input type="email" name="email" required>
                    </div>

                    <div class="form-group">
                        <label>No Handphone *</label>
                        <input type="text" name="phone" required>
                    </div>

                    <div class="form-group">
                        <label>Nomor KK *</label>
                        <input type="text" name="nomor_kk" required>
                    </div>

                    <div class="form-group">
                        <label>Nomor KTP *</label>
                        <input type="text" name="nik" required>
                    </div>

                    <div class="form-group full-width">
                        <label>Alamat tempat tinggal saat ini *</label>
                        <input type="text" name="current_address" required>
                    </div>

                    <div class="form-group">
                        <label>No Telepon (Rumah/Kerabat)</label>
                        <input type="text" name="emergency_phone">
                    </div>

                    <div class="form-group">
                        <label>Tempat tinggal saat ini milik *</label>
                        <select name="residence_ownership" required>
                            <option value="">Pilih</option>
                            <option>Sendiri</option>
                            <option>Orang Tua</option>
                            <option>Kos</option>
                            <option>Lainnya</option>
                        </select>
                    </div>

                    <div class="form-group full-width" style="border: 1px solid #eee; padding: 15px; border-radius: 5px;">
                        <label style="font-weight: 600; color: #333; margin-bottom: 10px;">Status Pernikahan *</label>
                        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px;">
                            <select name="marital_status" required>
                                <option value="">Pilih Status</option>
                                <option>Belum Menikah</option>
                                <option>Bertunangan</option>
                                <option>Menikah</option>
                                <option>Bercerai</option>
                            </select>
                            <input type="date" name="marriage_date" placeholder="Sejak Tanggal (jika Bertunangan/Menikah/Cerai)" title="Sejak Tanggal">
                        </div>
                    </div>
                </div>
            </div>

            <!-- STEP 2: Identitas Keluarga -->
            <div class="form-section" id="step-2">
                <h4 class="form-section-title">2. Identitas Keluarga</h4>
                
                <div class="section-subtitle">Susunan Keluarga (Istri/Suami dan anak-anak)</div>
                <div style="overflow-x: auto;">
                    <table class="family-table">
                        <thead>
                            <tr>
                                <th style="width: 15%;">Keluarga</th>
                                <th>Nama</th>
                                <th style="width: 10%;">L/P</th>
                                <th>Tempat/Tgl Lahir</th>
                                <th>Pendidikan</th>
                                <th>Pekerjaan</th>
                                <th>No Telepon</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Suami/Istri</td>
                                <td><input type="text" name="family_data[core][suami_istri][name]"></td>
                                <td><select name="family_data[core][suami_istri][gender]"><option></option><option>L</option><option>P</option></select></td>
                                <td><input type="text" name="family_data[core][suami_istri][birth_info]"></td>
                                <td><input type="text" name="family_data[core][suami_istri][education]"></td>
                                <td><input type="text" name="family_data[core][suami_istri][occupation]"></td>
                                <td><input type="text" name="family_data[core][suami_istri][phone]"></td>
                            </tr>
                            <tr>
                                <td>Anak 1</td>
                                <td><input type="text" name="family_data[core][anak_1][name]"></td>
                                <td><select name="family_data[core][anak_1][gender]"><option></option><option>L</option><option>P</option></select></td>
                                <td><input type="text" name="family_data[core][anak_1][birth_info]"></td>
                                <td><input type="text" name="family_data[core][anak_1][education]"></td>
                                <td><input type="text" name="family_data[core][anak_1][occupation]"></td>
                                <td><input type="text" name="family_data[core][anak_1][phone]"></td>
                            </tr>
                            <tr>
                                <td>Anak 2</td>
                                <td><input type="text" name="family_data[core][anak_2][name]"></td>
                                <td><select name="family_data[core][anak_2][gender]"><option></option><option>L</option><option>P</option></select></td>
                                <td><input type="text" name="family_data[core][anak_2][birth_info]"></td>
                                <td><input type="text" name="family_data[core][anak_2][education]"></td>
                                <td><input type="text" name="family_data[core][anak_2][occupation]"></td>
                                <td><input type="text" name="family_data[core][anak_2][phone]"></td>
                            </tr>
                            <tr>
                                <td>Anak 3</td>
                                <td><input type="text" name="family_data[core][anak_3][name]"></td>
                                <td><select name="family_data[core][anak_3][gender]"><option></option><option>L</option><option>P</option></select></td>
                                <td><input type="text" name="family_data[core][anak_3][birth_info]"></td>
                                <td><input type="text" name="family_data[core][anak_3][education]"></td>
                                <td><input type="text" name="family_data[core][anak_3][occupation]"></td>
                                <td><input type="text" name="family_data[core][anak_3][phone]"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div class="section-subtitle">Susunan Keluarga (Ayah, Ibu, Saudara Kandung, termasuk Anda)</div>
                <div style="overflow-x: auto;">
                    <table class="family-table">
                        <thead>
                            <tr>
                                <th style="width: 15%;">Keluarga</th>
                                <th>Nama</th>
                                <th style="width: 10%;">L/P</th>
                                <th>Tempat/Tgl Lahir</th>
                                <th>Pendidikan</th>
                                <th>Pekerjaan</th>
                                <th>No Telepon</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Ayah</td>
                                <td><input type="text" name="family_data[parents][ayah][name]"></td>
                                <td><select name="family_data[parents][ayah][gender]"><option></option><option>L</option><option>P</option></select></td>
                                <td><input type="text" name="family_data[parents][ayah][birth_info]"></td>
                                <td><input type="text" name="family_data[parents][ayah][education]"></td>
                                <td><input type="text" name="family_data[parents][ayah][occupation]"></td>
                                <td><input type="text" name="family_data[parents][ayah][phone]"></td>
                            </tr>
                            <tr>
                                <td>Ibu</td>
                                <td><input type="text" name="family_data[parents][ibu][name]"></td>
                                <td><select name="family_data[parents][ibu][gender]"><option></option><option>L</option><option>P</option></select></td>
                                <td><input type="text" name="family_data[parents][ibu][birth_info]"></td>
                                <td><input type="text" name="family_data[parents][ibu][education]"></td>
                                <td><input type="text" name="family_data[parents][ibu][occupation]"></td>
                                <td><input type="text" name="family_data[parents][ibu][phone]"></td>
                            </tr>
                            <tr>
                                <td>Anak 1</td>
                                <td><input type="text" name="family_data[parents][saudara_1][name]"></td>
                                <td><select name="family_data[parents][saudara_1][gender]"><option></option><option>L</option><option>P</option></select></td>
                                <td><input type="text" name="family_data[parents][saudara_1][birth_info]"></td>
                                <td><input type="text" name="family_data[parents][saudara_1][education]"></td>
                                <td><input type="text" name="family_data[parents][saudara_1][occupation]"></td>
                                <td><input type="text" name="family_data[parents][saudara_1][phone]"></td>
                            </tr>
                            <tr>
                                <td>Anak 2</td>
                                <td><input type="text" name="family_data[parents][saudara_2][name]"></td>
                                <td><select name="family_data[parents][saudara_2][gender]"><option></option><option>L</option><option>P</option></select></td>
                                <td><input type="text" name="family_data[parents][saudara_2][birth_info]"></td>
                                <td><input type="text" name="family_data[parents][saudara_2][education]"></td>
                                <td><input type="text" name="family_data[parents][saudara_2][occupation]"></td>
                                <td><input type="text" name="family_data[parents][saudara_2][phone]"></td>
                            </tr>
                            <tr>
                                <td>Anak 3</td>
                                <td><input type="text" name="family_data[parents][saudara_3][name]"></td>
                                <td><select name="family_data[parents][saudara_3][gender]"><option></option><option>L</option><option>P</option></select></td>
                                <td><input type="text" name="family_data[parents][saudara_3][birth_info]"></td>
                                <td><input type="text" name="family_data[parents][saudara_3][education]"></td>
                                <td><input type="text" name="family_data[parents][saudara_3][occupation]"></td>
                                <td><input type="text" name="family_data[parents][saudara_3][phone]"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- STEP 3: Riwayat Pendidikan -->
            <div class="form-section" id="step-3">
                <h4 class="form-section-title">3. Riwayat Pendidikan</h4>
                
                <div class="section-subtitle">Pendidikan Formal (tuliskan 2 tingkat pendidikan formal terakhir)</div>
                <div style="overflow-x: auto;">
                    <table class="family-table">
                        <thead>
                            <tr>
                                <th rowspan="2" style="width: 10%;">Tingkat</th>
                                <th rowspan="2">Nama Sekolah</th>
                                <th rowspan="2">Jurusan</th>
                                <th rowspan="2">Tempat</th>
                                <th colspan="2" style="text-align: center;">Tahun</th>
                                <th rowspan="2" style="width: 10%;">Lulus / Tidak</th>
                                <th rowspan="2" style="width: 8%;">IPK</th>
                            </tr>
                            <tr>
                                <th>Dari</th>
                                <th>Sampai</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>SMA/SMK</td>
                                <td><input type="text" name="education_data[formal][sma][school]"></td>
                                <td><input type="text" name="education_data[formal][sma][major]"></td>
                                <td><input type="text" name="education_data[formal][sma][location]"></td>
                                <td><input type="text" name="education_data[formal][sma][year_start]"></td>
                                <td><input type="text" name="education_data[formal][sma][year_end]"></td>
                                <td><select name="education_data[formal][sma][status]"><option></option><option>Lulus</option><option>Tidak</option></select></td>
                                <td><input type="text" name="education_data[formal][sma][gpa]"></td>
                            </tr>
                            <tr>
                                <td>D3</td>
                                <td><input type="text" name="education_data[formal][d3][school]"></td>
                                <td><input type="text" name="education_data[formal][d3][major]"></td>
                                <td><input type="text" name="education_data[formal][d3][location]"></td>
                                <td><input type="text" name="education_data[formal][d3][year_start]"></td>
                                <td><input type="text" name="education_data[formal][d3][year_end]"></td>
                                <td><select name="education_data[formal][d3][status]"><option></option><option>Lulus</option><option>Tidak</option></select></td>
                                <td><input type="text" name="education_data[formal][d3][gpa]"></td>
                            </tr>
                            <tr>
                                <td>S1</td>
                                <td><input type="text" name="education_data[formal][s1][school]"></td>
                                <td><input type="text" name="education_data[formal][s1][major]"></td>
                                <td><input type="text" name="education_data[formal][s1][location]"></td>
                                <td><input type="text" name="education_data[formal][s1][year_start]"></td>
                                <td><input type="text" name="education_data[formal][s1][year_end]"></td>
                                <td><select name="education_data[formal][s1][status]"><option></option><option>Lulus</option><option>Tidak</option></select></td>
                                <td><input type="text" name="education_data[formal][s1][gpa]"></td>
                            </tr>
                            <tr>
                                <td>S2</td>
                                <td><input type="text" name="education_data[formal][s2][school]"></td>
                                <td><input type="text" name="education_data[formal][s2][major]"></td>
                                <td><input type="text" name="education_data[formal][s2][location]"></td>
                                <td><input type="text" name="education_data[formal][s2][year_start]"></td>
                                <td><input type="text" name="education_data[formal][s2][year_end]"></td>
                                <td><select name="education_data[formal][s2][status]"><option></option><option>Lulus</option><option>Tidak</option></select></td>
                                <td><input type="text" name="education_data[formal][s2][gpa]"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div class="section-subtitle">Pendidikan Non Formal</div>
                <div style="overflow-x: auto;">
                    <table class="family-table">
                        <thead>
                            <tr>
                                <th rowspan="2" style="width: 25%;">Kursus/Seminar</th>
                                <th rowspan="2" style="width: 25%;">Penyelenggara</th>
                                <th rowspan="2">Tempat</th>
                                <th colspan="2" style="text-align: center;">Waktu</th>
                            </tr>
                            <tr>
                                <th>Dari</th>
                                <th>Sampai</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><input type="text" name="education_data[non_formal][0][course]"></td>
                                <td><input type="text" name="education_data[non_formal][0][organizer]"></td>
                                <td><input type="text" name="education_data[non_formal][0][location]"></td>
                                <td><input type="text" name="education_data[non_formal][0][year_start]"></td>
                                <td><input type="text" name="education_data[non_formal][0][year_end]"></td>
                            </tr>
                            <tr>
                                <td><input type="text" name="education_data[non_formal][1][course]"></td>
                                <td><input type="text" name="education_data[non_formal][1][organizer]"></td>
                                <td><input type="text" name="education_data[non_formal][1][location]"></td>
                                <td><input type="text" name="education_data[non_formal][1][year_start]"></td>
                                <td><input type="text" name="education_data[non_formal][1][year_end]"></td>
                            </tr>
                            <tr>
                                <td><input type="text" name="education_data[non_formal][2][course]"></td>
                                <td><input type="text" name="education_data[non_formal][2][organizer]"></td>
                                <td><input type="text" name="education_data[non_formal][2][location]"></td>
                                <td><input type="text" name="education_data[non_formal][2][year_start]"></td>
                                <td><input type="text" name="education_data[non_formal][2][year_end]"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- STEP 4: Riwayat Pekerjaan -->
            <div class="form-section" id="step-4">
                <h4 class="form-section-title">4. Riwayat Pekerjaan</h4>
                <p style="font-size: 0.85rem; color: #666; margin-bottom: 15px;">Uraikan riwayat pekerjaan Anda mulai dari pekerjaan terakhir</p>
                
                <!-- Block 1 -->
                <div class="experience-card" style="border: 1px solid var(--border-color); border-radius: 8px; padding: 20px; margin-bottom: 20px; background: #fff;">
                    <h5 style="margin-top:0; border-bottom: 2px solid var(--primary-green); padding-bottom: 10px; margin-bottom: 15px; color: var(--primary-green);">Pekerjaan 1 (Terakhir)</h5>
                    <div class="form-group full-width">
                        <label>Nama & Alamat Perusahaan</label>
                        <textarea name="experience_data[0][company_info]" style="width: 100%; height: 60px; border: 1px solid #ddd; border-radius: 4px; padding: 10px; resize: none;"></textarea>
                    </div>
                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin-bottom: 15px;">
                        <div class="form-group">
                            <label>Jabatan</label>
                            <input type="text" name="experience_data[0][jabatan][awal]" placeholder="Awal" style="margin-bottom: 5px;">
                            <input type="text" name="experience_data[0][jabatan][akhir]" placeholder="Akhir" style="margin-bottom: 5px;">
                            <input type="text" name="experience_data[0][jabatan][ket]" placeholder="Keterangan">
                        </div>
                        <div class="form-group">
                            <label>Periode</label>
                            <input type="text" name="experience_data[0][periode][awal]" placeholder="Awal" style="margin-bottom: 5px;">
                            <input type="text" name="experience_data[0][periode][akhir]" placeholder="Akhir" style="margin-bottom: 5px;">
                            <input type="text" name="experience_data[0][periode][ket]" placeholder="Keterangan">
                        </div>
                    </div>
                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin-bottom: 15px;">
                        <div class="form-group">
                            <label>Gaji</label>
                            <input type="text" name="experience_data[0][gaji][awal]" placeholder="Awal" style="margin-bottom: 5px;">
                            <input type="text" name="experience_data[0][gaji][akhir]" placeholder="Akhir" style="margin-bottom: 5px;">
                            <input type="text" name="experience_data[0][gaji][ket]" placeholder="Keterangan">
                        </div>
                        <div class="form-group">
                            <label>Jumlah Bawahan</label>
                            <input type="text" name="experience_data[0][bawahan][awal]" placeholder="Awal" style="margin-bottom: 5px;">
                            <input type="text" name="experience_data[0][bawahan][akhir]" placeholder="Akhir" style="margin-bottom: 5px;">
                            <input type="text" name="experience_data[0][bawahan][ket]" placeholder="Keterangan">
                        </div>
                    </div>
                    <div class="form-group full-width">
                        <label>Alasan Berhenti</label>
                        <input type="text" name="experience_data[0][alasan_berhenti]" style="width: 100%;">
                    </div>
                    <div class="form-group full-width">
                        <label>Uraian Tugas dan Tanggung Jawab</label>
                        <textarea name="experience_data[0][uraian_tugas]" style="width: 100%; height: 60px; border: 1px solid #ddd; border-radius: 4px; padding: 10px; resize: none;"></textarea>
                    </div>
                </div>

                <!-- Block 2 -->
                <div class="experience-card" style="border: 1px solid var(--border-color); border-radius: 8px; padding: 20px; margin-bottom: 20px; background: #fff;">
                    <h5 style="margin-top:0; border-bottom: 2px solid var(--primary-green); padding-bottom: 10px; margin-bottom: 15px; color: var(--primary-green);">Pekerjaan 2</h5>
                    <div class="form-group full-width">
                        <label>Nama & Alamat Perusahaan</label>
                        <textarea name="experience_data[1][company_info]" style="width: 100%; height: 60px; border: 1px solid #ddd; border-radius: 4px; padding: 10px; resize: none;"></textarea>
                    </div>
                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin-bottom: 15px;">
                        <div class="form-group">
                            <label>Jabatan</label>
                            <input type="text" name="experience_data[1][jabatan][awal]" placeholder="Awal" style="margin-bottom: 5px;">
                            <input type="text" name="experience_data[1][jabatan][akhir]" placeholder="Akhir" style="margin-bottom: 5px;">
                            <input type="text" name="experience_data[1][jabatan][ket]" placeholder="Keterangan">
                        </div>
                        <div class="form-group">
                            <label>Periode</label>
                            <input type="text" name="experience_data[1][periode][awal]" placeholder="Awal" style="margin-bottom: 5px;">
                            <input type="text" name="experience_data[1][periode][akhir]" placeholder="Akhir" style="margin-bottom: 5px;">
                            <input type="text" name="experience_data[1][periode][ket]" placeholder="Keterangan">
                        </div>
                    </div>
                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin-bottom: 15px;">
                        <div class="form-group">
                            <label>Gaji</label>
                            <input type="text" name="experience_data[1][gaji][awal]" placeholder="Awal" style="margin-bottom: 5px;">
                            <input type="text" name="experience_data[1][gaji][akhir]" placeholder="Akhir" style="margin-bottom: 5px;">
                            <input type="text" name="experience_data[1][gaji][ket]" placeholder="Keterangan">
                        </div>
                        <div class="form-group">
                            <label>Jumlah Bawahan</label>
                            <input type="text" name="experience_data[1][bawahan][awal]" placeholder="Awal" style="margin-bottom: 5px;">
                            <input type="text" name="experience_data[1][bawahan][akhir]" placeholder="Akhir" style="margin-bottom: 5px;">
                            <input type="text" name="experience_data[1][bawahan][ket]" placeholder="Keterangan">
                        </div>
                    </div>
                    <div class="form-group full-width">
                        <label>Alasan Berhenti</label>
                        <input type="text" name="experience_data[1][alasan_berhenti]" style="width: 100%;">
                    </div>
                    <div class="form-group full-width">
                        <label>Uraian Tugas dan Tanggung Jawab</label>
                        <textarea name="experience_data[1][uraian_tugas]" style="width: 100%; height: 60px; border: 1px solid #ddd; border-radius: 4px; padding: 10px; resize: none;"></textarea>
                    </div>
                </div>
                

            </div>

            <!-- STEP 5: Lain-lain -->
            <div class="form-section" id="step-5">
                <h4 class="form-section-title">5. Lain-lain</h4>
                
                <div class="section-subtitle">AKTIVITAS SOSIAL & HOBBY</div>
                <div style="overflow-x: auto;">
                    <table class="family-table">
                        <thead>
                            <tr>
                                <th>NAMA ORGANISASI</th>
                                <th>JENIS KEGIATAN</th>
                                <th>JABATAN</th>
                                <th>TAHUN</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><input type="text" name="other_data[aktivitas][0][organisasi]"></td>
                                <td><input type="text" name="other_data[aktivitas][0][kegiatan]"></td>
                                <td><input type="text" name="other_data[aktivitas][0][jabatan]"></td>
                                <td><input type="text" name="other_data[aktivitas][0][tahun]"></td>
                            </tr>
                            <tr>
                                <td><input type="text" name="other_data[aktivitas][1][organisasi]"></td>
                                <td><input type="text" name="other_data[aktivitas][1][kegiatan]"></td>
                                <td><input type="text" name="other_data[aktivitas][1][jabatan]"></td>
                                <td><input type="text" name="other_data[aktivitas][1][tahun]"></td>
                            </tr>
                            <tr>
                                <td><input type="text" name="other_data[aktivitas][2][organisasi]"></td>
                                <td><input type="text" name="other_data[aktivitas][2][kegiatan]"></td>
                                <td><input type="text" name="other_data[aktivitas][2][jabatan]"></td>
                                <td><input type="text" name="other_data[aktivitas][2][tahun]"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="form-group full-width" style="margin-top: 15px;">
                    <label style="position: static; padding: 0; font-size: 0.85rem; font-weight: 600; color: #333; margin-bottom: 5px;">Sebutkan hobby dan kegiatan di waktu luang :</label>
                    <textarea name="other_data[hobby]" style="width: 100%; border: 1px solid #ccc; padding: 10px; border-radius: 4px; resize: none; font-family: inherit; font-size: 0.95rem; height: 60px;"></textarea>
                </div>

                <div class="section-subtitle">REFERENSI</div>
                <div style="overflow-x: auto;">
                    <table class="family-table">
                        <thead>
                            <tr>
                                <th>NAMA</th>
                                <th>ALAMAT LENGKAP & NO. TELEPON</th>
                                <th>JABATAN</th>
                                <th>HUBUNGAN</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><input type="text" name="other_data[referensi][0][nama]"></td>
                                <td><input type="text" name="other_data[referensi][0][alamat]"></td>
                                <td><input type="text" name="other_data[referensi][0][jabatan]"></td>
                                <td><input type="text" name="other_data[referensi][0][hubungan]"></td>
                            </tr>
                            <tr>
                                <td><input type="text" name="other_data[referensi][1][nama]"></td>
                                <td><input type="text" name="other_data[referensi][1][alamat]"></td>
                                <td><input type="text" name="other_data[referensi][1][jabatan]"></td>
                                <td><input type="text" name="other_data[referensi][1][hubungan]"></td>
                            </tr>
                            <tr>
                                <td><input type="text" name="other_data[referensi][2][nama]"></td>
                                <td><input type="text" name="other_data[referensi][2][alamat]"></td>
                                <td><input type="text" name="other_data[referensi][2][jabatan]"></td>
                                <td><input type="text" name="other_data[referensi][2][hubungan]"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div class="section-subtitle">YANG DAPAT DIHUBUNGI DALAM KONDISI DARURAT</div>
                <div style="overflow-x: auto;">
                    <table class="family-table" style="background: white;">
                        <tbody>
                            <tr>
                                <th style="width: 25%; background-color: #E0E0E0; text-align: left; padding: 10px; border: 1px solid #999;">NAMA</th>
                                <td style="border: 1px solid #999;"><input type="text" name="other_data[darurat][nama][1]"></td>
                                <td style="border: 1px solid #999;"><input type="text" name="other_data[darurat][nama][2]"></td>
                            </tr>
                            <tr>
                                <th style="background-color: #E0E0E0; text-align: left; padding: 10px; border: 1px solid #999;">ALAMAT</th>
                                <td style="border: 1px solid #999;"><input type="text" name="other_data[darurat][alamat][1]"></td>
                                <td style="border: 1px solid #999;"><input type="text" name="other_data[darurat][alamat][2]"></td>
                            </tr>
                            <tr>
                                <th style="background-color: #E0E0E0; text-align: left; padding: 10px; border: 1px solid #999;">NO. TELEPON</th>
                                <td style="border: 1px solid #999;"><input type="text" name="other_data[darurat][telepon][1]"></td>
                                <td style="border: 1px solid #999;"><input type="text" name="other_data[darurat][telepon][2]"></td>
                            </tr>
                            <tr>
                                <th style="background-color: #E0E0E0; text-align: left; padding: 10px; border: 1px solid #999;">HUBUNGAN</th>
                                <td style="border: 1px solid #999;"><input type="text" name="other_data[darurat][hubungan][1]"></td>
                                <td style="border: 1px solid #999;"><input type="text" name="other_data[darurat][hubungan][2]"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="section-subtitle">PERTANYAAN LAIN-LAIN</div>
                <div style="overflow-x: auto;">
                    <table class="family-table" style="background: white;">
                        <thead>
                            <tr>
                                <th rowspan="2" style="width: 50%; border: 1px solid #999; text-align: center;">PERTANYAAN</th>
                                <th colspan="2" style="border: 1px solid #999; text-align: center;">CENTANG YANG SESUAI</th>
                                <th rowspan="2" style="width: 30%; border: 1px solid #999; text-align: center;">KETERANGAN</th>
                            </tr>
                            <tr>
                                <th style="border: 1px solid #999; text-align: center; width: 10%;">YA</th>
                                <th style="border: 1px solid #999; text-align: center; width: 10%;">TIDAK</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td style="border: 1px solid #999; padding: 10px;">Apakah Anda sebelumnya pernah melamar di Triputra Agro Persada?</td>
                                <td style="border: 1px solid #999; text-align: center;"><input type="radio" name="other_data[q1]" value="ya"></td>
                                <td style="border: 1px solid #999; text-align: center;"><input type="radio" name="other_data[q1]" value="tidak"></td>
                                <td style="border: 1px solid #999;"><input type="text" name="other_data[q1_keterangan]"></td>
                            </tr>
                            <tr>
                                <td style="border: 1px solid #999; padding: 10px;">Apakah Anda pernah bekerja di Triputra Agro Persada atau Triputra Group?</td>
                                <td style="border: 1px solid #999; text-align: center;"><input type="radio" name="other_data[q2]" value="ya"></td>
                                <td style="border: 1px solid #999; text-align: center;"><input type="radio" name="other_data[q2]" value="tidak"></td>
                                <td style="border: 1px solid #999;"><input type="text" name="other_data[q2_keterangan]"></td>
                            </tr>
                            <tr>
                                <td style="border: 1px solid #999; padding: 10px;">Apakah Anda masih aktif bekerja di Triputra Group?</td>
                                <td style="border: 1px solid #999; text-align: center;"><input type="radio" name="other_data[q3]" value="ya"></td>
                                <td style="border: 1px solid #999; text-align: center;"><input type="radio" name="other_data[q3]" value="tidak"></td>
                                <td style="border: 1px solid #999;"><input type="text" name="other_data[q3_keterangan]"></td>
                            </tr>
                            <tr>
                                <td style="border: 1px solid #999; padding: 10px;">Apakah Anda memiliki kenalan/teman/keluarga di Triputra Agro Persada ini?<br>Jika ya, mohon tuliskan nama kenalan/teman/keluarga Anda</td>
                                <td style="border: 1px solid #999; text-align: center;"><input type="radio" name="other_data[q4]" value="ya"></td>
                                <td style="border: 1px solid #999; text-align: center;"><input type="radio" name="other_data[q4]" value="tidak"></td>
                                <td style="border: 1px solid #999;"><input type="text" name="other_data[q4_keterangan]"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- STEP 6: Submit Data -->
            <div class="form-section" id="step-6">
                <h4 class="form-section-title">6. SUBMIT DATA</h4>
                
                <div class="section-subtitle">Upload Dokumen</div>
                <div class="form-grid">
                    <div class="form-group full-width" style="border: 1px solid #e0e0e0; padding: 15px; border-radius: 8px; background: white;">
                        <ul style="margin-left: 20px; color: #444; font-size: 0.95rem; list-style-type: disc;">
                            <li style="display: flex; flex-direction: column; gap: 8px; margin-bottom: 15px; border-bottom: 1px dashed #eee; padding-bottom: 10px;">
                                <span>Scan/Foto Kartu Keluarga (KK)</span>
                                <input type="file" name="documents[kartu_keluarga]" accept="image/*,.pdf" style="width: 100%;">
                            </li>
                            <li style="display: flex; flex-direction: column; gap: 8px; margin-bottom: 15px; border-bottom: 1px dashed #eee; padding-bottom: 10px;">
                                <span>Scan/Foto Kartu Tanda Penduduk (KTP)</span>
                                <input type="file" name="documents[ktp]" accept="image/*,.pdf" style="width: 100%;">
                            </li>
                            <li style="display: flex; flex-direction: column; gap: 8px; margin-bottom: 15px; border-bottom: 1px dashed #eee; padding-bottom: 10px;">
                                <span>Scan/Foto Ijazah Terakhir</span>
                                <input type="file" name="documents[ijazah_terakhir]" accept="image/*,.pdf" style="width: 100%;">
                            </li>
                            <li style="display: flex; flex-direction: column; gap: 8px; margin-bottom: 15px; border-bottom: 1px dashed #eee; padding-bottom: 10px;">
                                <span>Scan/Foto Surat Lamaran Pekerjaan</span>
                                <input type="file" name="documents[surat_lamaran]" accept="image/*,.pdf" style="width: 100%;">
                            </li>
                            <li style="display: flex; flex-direction: column; gap: 8px; margin-bottom: 15px; border-bottom: 1px dashed #eee; padding-bottom: 10px;">
                                <span>Scan/Foto Kartu NPWP</span>
                                <input type="file" name="documents[npwp]" accept="image/*,.pdf" style="width: 100%;">
                            </li>
                            <li style="display: flex; flex-direction: column; gap: 8px; margin-bottom: 15px; border-bottom: 1px dashed #eee; padding-bottom: 10px;">
                                <span>Scan/Foto Buku Rekening BNI</span>
                                <input type="file" name="documents[buku_rekening_bni]" accept="image/*,.pdf" style="width: 100%;">
                            </li>
                            <li style="display: flex; flex-direction: column; gap: 8px; margin-bottom: 15px;">
                                <span>Scan Foto Diri 3X4</span>
                                <input type="file" name="documents[foto_3x4]" accept="image/*" style="width: 100%;">
                            </li>
                        </ul>
                    </div>
                </div>

                <div style="background: #F1F8E9; padding: 20px; border-radius: 8px; border: 1px solid #C8E6C9; margin-top: 25px;">
                    <p style="margin-bottom: 15px; font-weight: 500;"><i class="fas fa-check-circle" style="color: #4CAF50;"></i> Pernyataan Persetujuan</p>
                    <p style="font-size: 0.9rem; color: #444; line-height: 1.5; text-align: justify;">
                        Dengan ini Saya menyatakan bahwa keterangan yang saya tuliskan dalam "Formulir Data Pribadi Pelamar" adalah sesuai dengan keadaaan sebenarnya. Jika di kemudian hari ternyata terdapat ketidakbenaran, maka saya bertanggung jawab penuh atas akibatnya dan bersedia menerima konsekuensinya sesuai ketentuan yang berlaku.
                    </p>
                    
                    <div style="margin-top: 20px; border-top: 1px solid #C8E6C9; padding-top: 20px;">
                        <div class="form-group" style="margin-bottom: 15px;">
                            <label>Kota, Tanggal *</label>
                            <input type="text" name="other_data[signature_date]" placeholder="Contoh: Jakarta, 20 Mei 2026" required style="max-width: 300px;">
                        </div>
                        <div class="form-group" style="margin-bottom: 15px;">
                            <label>Nama Lengkap (Sebagai Tanda Tangan Digital) *</label>
                            <input type="text" name="other_data[signature_name]" required style="max-width: 300px;">
                        </div>
                        <div style="display: flex; align-items: flex-start; gap: 10px; margin-top: 20px;">
                            <input type="checkbox" id="agreement" required style="width: 20px; height: 20px; margin-top: 2px;">
                            <label for="agreement" style="font-weight: 600; cursor: pointer; color: #2E7D32;">Ya, saya menyetujui pernyataan di atas dan siap mensubmit lamaran.</label>
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-actions">
                <button type="button" class="btn btn-secondary" id="btnPrev" style="display: none;">Kembali</button>
                <button type="button" class="btn btn-primary" id="btnNext">Selanjutnya</button>
                <button type="submit" class="btn btn-primary" id="btnSubmit" style="display: none; background-color: #4CAF50;">Submit Lamaran</button>
            </div>
        </form>

    </div>

    <script src="{{ asset('js/script.js?v=1779407539') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/browser-image-compression@2.0.2/dist/browser-image-compression.js"></script>
    <script>
        document.querySelectorAll('input[type="file"]').forEach(input => {
            input.addEventListener('change', async function(event) {
                const file = event.target.files[0];
                if (!file) return;
                
                // Only compress images
                if (!file.type.startsWith('image/')) return;

                const labelSpan = input.previousElementSibling;
                const originalText = labelSpan.innerHTML.replace(/ <span class="compress-msg".*<\/span>/, '');
                labelSpan.innerHTML = originalText + ' <span class="compress-msg" style="color:#FF9800;font-size:0.8rem;">(Mengkompresi gambar HD...)</span>';
                
                const options = {
                    maxSizeMB: 1,
                    maxWidthOrHeight: 1920,
                    useWebWorker: true,
                    initialQuality: 0.85
                };

                try {
                    const compressedFile = await imageCompression(file, options);
                    
                    const dataTransfer = new DataTransfer();
                    dataTransfer.items.add(new File([compressedFile], file.name, {
                        type: compressedFile.type,
                        lastModified: Date.now()
                    }));
                    input.files = dataTransfer.files;

                    labelSpan.innerHTML = originalText + ' <span class="compress-msg" style="color:#4CAF50;font-size:0.8rem;">(Kompresi Selesai ✓)</span>';
                } catch (error) {
                    console.error('Error compressing image:', error);
                    labelSpan.innerHTML = originalText + ' <span class="compress-msg" style="color:red;font-size:0.8rem;">(Gagal kompresi, menggunakan ukuran asli)</span>';
                }
            });
        });
    </script>
</body>
</html>
