<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
session_start();
include 'config.php';

// ============================================
// CEK LOGIN PENDAFTARAN ULANG
// ============================================
if (!isset($_SESSION['ulang_login']) || $_SESSION['ulang_login'] !== true) {
    header('Location: login_ulang.php');
    exit;
}

// Ambil data dari session
$siswa_id = $_SESSION['ulang_id'];
$nisn_session = $_SESSION['ulang_nisn'];
$nama = $_SESSION['ulang_nama'];
$no_pendaftaran = $_SESSION['ulang_no_pendaftaran'];
$kelas = $_SESSION['ulang_kelas'] ?? 'XI';

// ============================================
// FUNGSI KOMPRESI GAMBAR
// ============================================
function compressImage($source, $destination, $quality = 70) {
    $info = getimagesize($source);
    $mime = $info['mime'];
    
    if ($mime == 'image/jpeg') {
        $image = imagecreatefromjpeg($source);
        $image = fixImageOrientation($image, $source);
    } elseif ($mime == 'image/png') {
        $image = imagecreatefrompng($source);
    } elseif ($mime == 'image/gif') {
        $image = imagecreatefromgif($source);
    } else {
        copy($source, $destination);
        return;
    }
    
    if (!$image) {
        copy($source, $destination);
        return;
    }
    
    if ($mime == 'image/jpeg') {
        imagejpeg($image, $destination, $quality);
    } elseif ($mime == 'image/png') {
        imagepng($image, $destination, 6);
    } elseif ($mime == 'image/gif') {
        imagegif($image, $destination);
    }
    
    imagedestroy($image);
}

function fixImageOrientation($image, $filename) {
    if (!function_exists('exif_read_data')) {
        return $image;
    }
    
    $exif = @exif_read_data($filename);
    if (!$exif || !isset($exif['Orientation'])) {
        return $image;
    }
    
    $orientation = $exif['Orientation'];
    
    switch ($orientation) {
        case 3: $image = imagerotate($image, 180, 0); break;
        case 6: $image = imagerotate($image, -90, 0); break;
        case 8: $image = imagerotate($image, 90, 0); break;
        case 2: imageflip($image, IMG_FLIP_HORIZONTAL); break;
        case 4: imageflip($image, IMG_FLIP_VERTICAL); break;
        case 5: imageflip($image, IMG_FLIP_HORIZONTAL); $image = imagerotate($image, 90, 0); break;
        case 7: imageflip($image, IMG_FLIP_HORIZONTAL); $image = imagerotate($image, -90, 0); break;
        default: break;
    }
    
    return $image;
}

function uploadFile($file, $upload_dir, $allowed_types = ['jpg','jpeg','png','pdf'], $max_size = 5242880) {
    $errors = [];
    
    if (empty($file['name'])) {
        return ['success' => false, 'errors' => ['Tidak ada file yang diupload']];
    }
    
    $ext = strtolower(pathinfo($file['name'], PATHINFO_EXTENSION));
    
    if (!in_array($ext, $allowed_types)) {
        $errors[] = "Format file tidak diizinkan. Gunakan: " . implode(', ', $allowed_types);
        return ['success' => false, 'errors' => $errors];
    }
    
    if ($file['size'] > $max_size) {
        $errors[] = "Ukuran file maksimal " . ($max_size / 1048576) . "MB";
        return ['success' => false, 'errors' => $errors];
    }
    
    $new_filename = date('Ymd_His') . '_' . uniqid() . '.' . $ext;
    $temp_path = $upload_dir . 'temp_' . $new_filename;
    $final_path = $upload_dir . $new_filename;
    
    if (!move_uploaded_file($file['tmp_name'], $temp_path)) {
        $errors[] = "Gagal mengupload file";
        return ['success' => false, 'errors' => $errors];
    }
    
    $is_image = in_array($ext, ['jpg', 'jpeg', 'png']);
    if ($is_image && function_exists('imagecreatefromjpeg')) {
        compressImage($temp_path, $final_path, 70);
        unlink($temp_path);
    } else {
        rename($temp_path, $final_path);
    }
    
    return ['success' => true, 'filename' => $new_filename];
}

// ============================================
// DATA WILAYAH
// ============================================
$data_wilayah = [
    'LOHIA' => [
        'desa' => [
            'Desa Kondongia', 'Desa Korihi', 'Desa Lakarinta',
            'Desa Lohia', 'Desa Mabholu', 'Desa Mantobua',
            'Desa Liangkabori', 'Desa Waara', 'Desa Loghiya'
        ]
    ],
    'DURUKA' => [
        'desa' => [
            'Desa Ghonsume', 'Desa Lagasa', 'Desa Ghone Bhalano',
            'Desa Lasunapa', 'Desa Banggai', 'Kelurahan Palangga',
            'Kelurahan Wapunto'
        ]
    ],
    'KONTUNAGA' => [
        'desa' => ['Desa Masalili']
    ]
];

$daftar_kecamatan = array_keys($data_wilayah);
sort($daftar_kecamatan);

// ============================================
// DAFTAR SEKOLAH
// ============================================
$daftar_sekolah = [
    'SMP Negeri 1 Loghia',
    'SMP Negeri 2 Loghia',
    'SMP Negeri 3 Loghia',
    'SMP Negeri 4 Loghia',
    'SMP Negeri 1 Duruka',
    'SMP Swasta Teknologi',
    'SMP Swasta Nauval Aqiilah',
    'MTs Subulussalam',
    'MTsN 1 Muna',
    'SMP Swasta Sinar Nunu',
    'SMPN 1 Tikep',
    'SMP Islam Terpadu Al-Ishlah',
    'UPTD SMP Negeri Satu Atap 2 Lasalepa'
];
sort($daftar_sekolah);

// ============================================
// CEK DATA ULANG DARI TABEL regisulang
// ============================================
$query_ulang = "SELECT * FROM regisulang WHERE siswa_id = $siswa_id";
$result_ulang = mysqli_query($conn, $query_ulang);
$data_ulang = mysqli_fetch_assoc($result_ulang);
$is_edit = $data_ulang ? true : false;

// ============================================
// DATA DISPLAY
// ============================================
$data_display = [];
if ($data_ulang) {
    foreach ($data_ulang as $key => $value) {
        if (!empty($value) || $value === '0' || $value === 0) {
            $data_display[$key] = $value;
        }
    }
}

// ============================================
// FUNGSI-FUNGSI
// ============================================
function getFieldValue($data_display, $field) {
    if (isset($data_display[$field])) {
        if ($data_display[$field] !== '' && $data_display[$field] !== null) {
            return $data_display[$field];
        }
    }
    return '';
}

function selected($value, $compare) {
    if ($value == $compare) return 'selected';
    $compare_clean = preg_replace('/[^0-9]/', '', $compare);
    $value_clean = preg_replace('/[^0-9]/', '', $value);
    if ($compare_clean == $value_clean && !empty($compare_clean)) return 'selected';
    return '';
}

function selected_normal($value, $compare) {
    return $value == $compare ? 'selected' : '';
}

// ============================================
// STATUS ULANG
// ============================================
$status_ulang = 'Belum';
$status_warna = '#f39c12';

if ($is_edit) {
    if ($data_ulang['is_draft'] == 1) {
        $status_ulang = '💾 Draft';
        $status_warna = '#f39c12';
    } elseif ($data_ulang['step_completed'] >= 4) {
        $status_ulang = '✅ Selesai';
        $status_warna = '#2ecc71';
    } else {
        $status_ulang = '⏳ Proses';
        $status_warna = '#3498db';
    }
}

$is_complete = ($is_edit && $data_ulang['step_completed'] >= 4);
$edit_mode = isset($_GET['edit']) && $_GET['edit'] == 'true' ? true : false;

if ($edit_mode) {
    $is_complete = false;
}

// ============================================
// HANDLE AJAX - GET DESA
// ============================================
if (isset($_GET['get_desa']) && isset($_GET['kecamatan'])) {
    $kec = strtoupper($_GET['kecamatan']);
    if (isset($data_wilayah[$kec])) {
        echo json_encode(['success' => true, 'desa' => $data_wilayah[$kec]['desa']]);
    } else {
        echo json_encode(['success' => false, 'desa' => []]);
    }
    exit;
}

// ============================================
// HANDLE FORM SUBMISSION
// ============================================
$step = isset($_POST['step']) ? intval($_POST['step']) : 1;

if ($edit_mode && !isset($_POST['action'])) {
    $step = 1;
}

$errors = [];
$success = false;
$message = '';
$is_draft = isset($_POST['simpan_draft']) ? true : false;
$upload_errors = [];

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    
    // ============================================
    // HANDLE UPLOAD BERKAS (STEP 4) - PERBAIKAN
    // ============================================
    if (isset($_POST['action']) && $_POST['action'] == 'upload_berkas') {
        $upload_errors = [];
        $file_paths = [];
        
        $upload_dir = 'uploads/ulang/';
        if (!file_exists($upload_dir)) {
            mkdir($upload_dir, 0777, true);
        }

        // Definisikan file yang boleh diupload
        $file_configs = [
            'ijazah' => ['label' => 'IJAZAH', 'allowed' => ['pdf','jpg','jpeg','png'], 'maxsize' => 5242880, 'wajib' => true],
            'kk' => ['label' => 'KARTU KELUARGA', 'allowed' => ['pdf','jpg','jpeg','png'], 'maxsize' => 5242880, 'wajib' => true],
            'akta' => ['label' => 'AKTA KELAHIRAN', 'allowed' => ['pdf','jpg','jpeg','png'], 'maxsize' => 5242880, 'wajib' => true],
            'kip_pkh' => ['label' => 'KIP/PKH', 'allowed' => ['pdf','jpg','jpeg','png'], 'maxsize' => 5242880, 'wajib' => false],
            'pas_foto' => ['label' => 'PAS FOTO', 'allowed' => ['jpg','jpeg','png'], 'maxsize' => 5242880, 'wajib' => true]
        ];

        foreach ($file_configs as $key => $config) {
            $file = $_FILES['file_' . $key];
            $existing_file = $data_ulang ? ($data_ulang['file_' . $key] ?? '') : '';
            
            // CEK: Apakah ada file yang diupload?
            if (!empty($file['name']) && $file['size'] > 0) {
                // Ada file baru -> upload
                $result = uploadFile($file, $upload_dir, $config['allowed'], $config['maxsize']);
                if ($result['success']) {
                    $file_paths[$key] = $result['filename'];
                    // Hapus file lama jika ada
                    if (!empty($existing_file) && file_exists($upload_dir . $existing_file)) {
                        @unlink($upload_dir . $existing_file);
                    }
                } else {
                    $upload_errors = array_merge($upload_errors, $result['errors']);
                }
            } else {
                // TIDAK ADA file baru -> pertahankan file lama
                if (!empty($existing_file)) {
                    $file_paths[$key] = $existing_file;
                } elseif ($config['wajib'] && !$edit_mode) {
                    // Hanya wajib diupload jika BUKAN mode edit
                    $upload_errors[] = "File {$config['label']} wajib diupload!";
                }
                // Jika mode edit dan tidak ada file, biarkan kosong (NULL)
            }
        }
        
        // Cek apakah ada error upload
        if (!empty($upload_errors)) {
            $errors = array_merge($errors, $upload_errors);
        }
        
        // Proses simpan jika tidak ada error
        if (empty($errors) && $siswa_id > 0) {
            $set_clauses = [];
            $fields = ['ijazah', 'kk', 'akta', 'kip_pkh', 'pas_foto'];
            foreach ($fields as $field) {
                if (isset($file_paths[$field])) {
                    $set_clauses[] = "file_$field = '" . mysqli_real_escape_string($conn, $file_paths[$field]) . "'";
                }
            }
            
            // Selalu update step_completed dan status
            $set_clauses[] = "step_completed = 4";
            $set_clauses[] = "is_draft = 0";
            $set_clauses[] = "updated_at = NOW()";
            $set_string = implode(', ', $set_clauses);
            
            if ($is_edit) {
                $query = "UPDATE regisulang SET $set_string WHERE siswa_id = $siswa_id";
            } else {
                $fields = ['siswa_id', 'no_pendaftaran', 'kelas', 'nama_lengkap', 'nisn', 'created_at', 'step_completed'];
                $values = [
                    $siswa_id, 
                    "'$no_pendaftaran'", 
                    "'" . mysqli_real_escape_string($conn, $kelas) . "'",
                    "'" . mysqli_real_escape_string($conn, $nama) . "'",
                    "'" . mysqli_real_escape_string($conn, $nisn_session) . "'",
                    "NOW()", 
                    "4"
                ];
                foreach ($file_paths as $key => $path) {
                    $fields[] = "file_$key";
                    $values[] = "'" . mysqli_real_escape_string($conn, $path) . "'";
                }
                $query = "INSERT INTO regisulang (" . implode(', ', $fields) . ") VALUES (" . implode(', ', $values) . ")";
            }
            
            if (mysqli_query($conn, $query)) {
                $success = true;
                $message = '✅ Data berhasil diperbarui!';
                if (!empty($upload_errors)) {
                    $message .= ' Namun ada beberapa file yang gagal upload.';
                } else {
                    $message = '✅ Semua data berhasil diperbarui!';
                }
                $is_complete = true;
                
                $query_ulang = "SELECT * FROM regisulang WHERE siswa_id = $siswa_id";
                $result_ulang = mysqli_query($conn, $query_ulang);
                $data_ulang = mysqli_fetch_assoc($result_ulang);
                $is_edit = true;
            } else {
                $errors[] = "Gagal menyimpan data upload: " . mysqli_error($conn);
            }
        }
    }
    
    // ============================================
    // HANDLE FORM DATA DIRI (STEP 1-3)
    // ============================================
    if (isset($_POST['action']) && $_POST['action'] == 'simpan_data') {
        
        $query_existing = "SELECT * FROM regisulang WHERE siswa_id = $siswa_id";
        $result_existing = mysqli_query($conn, $query_existing);
        $existing_data = mysqli_fetch_assoc($result_existing);
        
        $merged_data = $existing_data ?: [];
        
        // NAMA, NISN, KELAS DARI SESSION
        $merged_data['nama_lengkap'] = $nama;
        $merged_data['nisn'] = $nisn_session;
        $merged_data['kelas'] = $kelas;
        
        // Field yang boleh diupdate
        $allowed_fields = [
            'jenis_kelamin', 'nik', 'no_kk', 'tempat_lahir', 'tanggal_lahir',
            'agama', 'berkebutuhan_khusus', 'alamat', 'dusun', 'rt', 'rw',
            'kelurahan', 'kode_pos', 'kecamatan', 'jenis_tinggal', 'transportasi',
            'no_hp', 'email', 'asal_sekolah', 'alamat_sekolah_asal',
            'ayah_nama', 'ayah_nik', 'ayah_tahun_lahir', 'ayah_pendidikan',
            'ayah_pekerjaan', 'ayah_penghasilan', 'ibu_nama', 'ibu_nik',
            'ibu_tahun_lahir', 'ibu_pendidikan', 'ibu_pekerjaan', 'ibu_penghasilan',
            'wali_nama', 'wali_tahun_lahir', 'wali_pendidikan', 'wali_pekerjaan',
            'wali_penghasilan', 'tinggi_badan', 'berat_badan', 'jarak_sekolah',
            'waktu_tempuh_jam', 'waktu_tempuh_menit', 'jumlah_saudara', 'anak_ke',
            'kip_penerima', 'kip_no'
        ];
        
        foreach ($_POST as $key => $value) {
            if (in_array($key, $allowed_fields)) {
                if (!empty($value) || $value === '0' || $value === 0) {
                    $merged_data[$key] = $value;
                }
            }
        }
        
        // ============================================
        // VALIDASI
        // ============================================
        $step = intval($_POST['step'] ?? 1);
        
        // STEP 1 - IDENTITAS
        if ($step == 1) {
            if (empty($merged_data['jenis_kelamin'])) {
                $errors[] = "Jenis kelamin wajib dipilih!";
            }
            $nik = trim($_POST['nik'] ?? $merged_data['nik'] ?? '');
            if (empty($nik)) {
                $errors[] = "NIK wajib diisi!";
            } elseif (!preg_match('/^[0-9]{16}$/', $nik)) {
                $errors[] = "NIK harus 16 digit angka!";
            }
            $no_kk = trim($_POST['no_kk'] ?? $merged_data['no_kk'] ?? '');
            if (empty($no_kk)) {
                $errors[] = "Nomor Kartu Keluarga wajib diisi!";
            } elseif (!preg_match('/^[0-9]{16}$/', $no_kk)) {
                $errors[] = "Nomor KK harus 16 digit angka!";
            }
            if (empty($_POST['tempat_lahir']) && empty($merged_data['tempat_lahir'])) {
                $errors[] = "Tempat lahir wajib diisi!";
            }
            if (empty($_POST['tanggal_lahir']) && empty($merged_data['tanggal_lahir'])) {
                $errors[] = "Tanggal lahir wajib diisi!";
            }
            if (empty($_POST['agama']) && empty($merged_data['agama'])) {
                $errors[] = "Agama wajib dipilih!";
            }
        }
        
        // STEP 2 - ALAMAT & KONTAK
        if ($step == 2) {
            if (empty($_POST['alamat']) && empty($merged_data['alamat'])) {
                $errors[] = "Alamat wajib diisi!";
            }
            if (empty($_POST['kelurahan']) && empty($merged_data['kelurahan'])) {
                $errors[] = "Kelurahan/Desa wajib diisi!";
            }
            if (empty($_POST['kecamatan']) && empty($merged_data['kecamatan'])) {
                $errors[] = "Kecamatan wajib diisi!";
            }
            if (empty($_POST['jenis_tinggal']) && empty($merged_data['jenis_tinggal'])) {
                $errors[] = "Jenis tinggal wajib dipilih!";
            }
            if (empty($_POST['transportasi']) && empty($merged_data['transportasi'])) {
                $errors[] = "Transportasi wajib dipilih!";
            }
            $no_hp = trim($_POST['no_hp'] ?? $merged_data['no_hp'] ?? '');
            if (empty($no_hp)) {
                $errors[] = "No HP wajib diisi!";
            } elseif (!preg_match('/^[0-9]{10,15}$/', $no_hp)) {
                $errors[] = "No HP harus 10-15 digit angka!";
            }
            if (empty($_POST['asal_sekolah']) && empty($merged_data['asal_sekolah'])) {
                $errors[] = "Asal sekolah wajib dipilih!";
            }
        }
        
        // STEP 3 - ORANG TUA & PERIODIK
        if ($step == 3) {
            if (empty($_POST['ayah_nama']) && empty($merged_data['ayah_nama'])) {
                $errors[] = "Nama Ayah wajib diisi!";
            }
            if (empty($_POST['ayah_pendidikan']) && empty($merged_data['ayah_pendidikan'])) {
                $errors[] = "Pendidikan Ayah wajib dipilih!";
            }
            if (empty($_POST['ayah_pekerjaan']) && empty($merged_data['ayah_pekerjaan'])) {
                $errors[] = "Pekerjaan Ayah wajib dipilih!";
            }
            if (empty($_POST['ayah_penghasilan']) && empty($merged_data['ayah_penghasilan'])) {
                $errors[] = "Penghasilan Ayah wajib dipilih!";
            }
            if (empty($_POST['ibu_nama']) && empty($merged_data['ibu_nama'])) {
                $errors[] = "Nama Ibu wajib diisi!";
            }
            if (empty($_POST['ibu_pendidikan']) && empty($merged_data['ibu_pendidikan'])) {
                $errors[] = "Pendidikan Ibu wajib dipilih!";
            }
            if (empty($_POST['ibu_pekerjaan']) && empty($merged_data['ibu_pekerjaan'])) {
                $errors[] = "Pekerjaan Ibu wajib dipilih!";
            }
            if (empty($_POST['ibu_penghasilan']) && empty($merged_data['ibu_penghasilan'])) {
                $errors[] = "Penghasilan Ibu wajib dipilih!";
            }
            if (empty($_POST['tinggi_badan']) && empty($merged_data['tinggi_badan'])) {
                $errors[] = "Tinggi badan wajib diisi!";
            }
            if (empty($_POST['berat_badan']) && empty($merged_data['berat_badan'])) {
                $errors[] = "Berat badan wajib diisi!";
            }
            if (empty($_POST['jarak_sekolah']) && empty($merged_data['jarak_sekolah'])) {
                $errors[] = "Jarak tempat tinggal ke sekolah wajib diisi!";
            }
            if (empty($_POST['jumlah_saudara']) && empty($merged_data['jumlah_saudara'])) {
                $errors[] = "Jumlah saudara kandung wajib diisi!";
            }
            if (empty($_POST['anak_ke']) && empty($merged_data['anak_ke'])) {
                $errors[] = "Anak ke- wajib diisi!";
            }
            
            $kip_penerima = $_POST['kip_penerima'] ?? $merged_data['kip_penerima'] ?? '';
            $kip_no = trim($_POST['kip_no'] ?? $merged_data['kip_no'] ?? '');
            if ($kip_penerima == 'Ya' && empty($kip_no)) {
                $errors[] = "Nomor KIP wajib diisi jika Anda penerima KIP!";
            }
        }
        
        // ============================================
        // SIMPAN DATA KE TABEL regisulang
        // ============================================
        if (empty($errors) || $is_draft) {
            
            $escaped_data = [];
            foreach ($merged_data as $key => $value) {
                if (is_string($value)) {
                    $escaped_data[$key] = mysqli_real_escape_string($conn, $value);
                } else {
                    $escaped_data[$key] = $value;
                }
            }
            
            $set_clauses = [];
            $db_fields = [
                'nama_lengkap', 'jenis_kelamin', 'nisn', 'nik', 'no_kk', 'kelas',
                'tempat_lahir', 'tanggal_lahir', 'agama', 'berkebutuhan_khusus',
                'alamat', 'dusun', 'rt', 'rw', 'kelurahan', 'kode_pos',
                'kecamatan', 'jenis_tinggal', 'transportasi', 'no_hp',
                'email', 'asal_sekolah', 'alamat_sekolah_asal',
                'ayah_nama', 'ayah_nik', 'ayah_tahun_lahir', 'ayah_pendidikan',
                'ayah_pekerjaan', 'ayah_penghasilan', 'ibu_nama', 'ibu_nik',
                'ibu_tahun_lahir', 'ibu_pendidikan', 'ibu_pekerjaan',
                'ibu_penghasilan', 'wali_nama', 'wali_tahun_lahir',
                'wali_pendidikan', 'wali_pekerjaan', 'wali_penghasilan',
                'tinggi_badan', 'berat_badan', 'jarak_sekolah',
                'waktu_tempuh_jam', 'waktu_tempuh_menit', 'jumlah_saudara',
                'anak_ke', 'kip_penerima', 'kip_no'
            ];
            
            foreach ($db_fields as $field) {
                if (isset($escaped_data[$field]) && !empty($escaped_data[$field])) {
                    $set_clauses[] = "$field = '" . $escaped_data[$field] . "'";
                }
            }
            
            $set_clauses[] = "step_completed = $step";
            $set_clauses[] = "is_draft = " . ($is_draft ? '1' : '0');
            $set_clauses[] = "updated_at = NOW()";
            $set_clauses[] = "draft_data = '" . mysqli_real_escape_string($conn, json_encode($_POST)) . "'";
            
            $set_string = implode(', ', $set_clauses);
            
            if ($is_edit) {
                $query = "UPDATE regisulang SET $set_string WHERE siswa_id = $siswa_id";
            } else {
                $fields = $db_fields;
                $fields[] = 'siswa_id';
                $fields[] = 'no_pendaftaran';
                $fields[] = 'created_at';
                $fields[] = 'draft_data';
                $fields[] = 'is_draft';
                $fields[] = 'step_completed';
                
                $values = [];
                foreach ($db_fields as $field) {
                    $values[] = isset($escaped_data[$field]) ? "'" . $escaped_data[$field] . "'" : "''";
                }
                $values[] = $siswa_id;
                $values[] = "'$no_pendaftaran'";
                $values[] = "NOW()";
                $values[] = "'" . mysqli_real_escape_string($conn, json_encode($_POST)) . "'";
                $values[] = ($is_draft ? '1' : '0');
                $values[] = $step;
                
                $query = "INSERT INTO regisulang (" . implode(', ', $fields) . ") VALUES (" . implode(', ', $values) . ")";
            }
            
            if (mysqli_query($conn, $query)) {
                $query_ulang_refresh = "SELECT * FROM regisulang WHERE siswa_id = $siswa_id";
                $result_ulang_refresh = mysqli_query($conn, $query_ulang_refresh);
                $data_ulang = mysqli_fetch_assoc($result_ulang_refresh);
                $is_edit = true;
                
                $data_display = [];
                if ($data_ulang) {
                    foreach ($data_ulang as $key => $value) {
                        if (!empty($value) || $value === '0' || $value === 0) {
                            $data_display[$key] = $value;
                        }
                    }
                }
                
                if ($is_draft) {
                    $message = '💾 Draft berhasil disimpan! Lanjutkan nanti.';
                    $success = true;
                    $status_ulang = '💾 Draft';
                    $status_warna = '#f39c12';
                } elseif ($step == 3) {
                    $message = '✅ Data pendaftaran ulang berhasil disimpan! Silakan upload berkas.';
                    $success = true;
                    $status_ulang = '⏳ Upload Berkas';
                    $status_warna = '#3498db';
                    $step = 4;
                } else {
                    $step++;
                    $message = '✅ Data berhasil disimpan, lanjut ke tahap berikutnya!';
                    $success = true;
                }
            } else {
                $errors[] = "Gagal menyimpan data: " . mysqli_error($conn);
            }
        }
    }
}

// ============================================
// CEK STATUS UPLOAD BERKAS
// ============================================
$file_uploaded = false;
if ($data_ulang) {
    $file_fields = ['file_ijazah', 'file_kk', 'file_akta', 'file_pas_foto'];
    $file_uploaded = true;
    foreach ($file_fields as $field) {
        if (empty($data_ulang[$field])) {
            $file_uploaded = false;
            break;
        }
    }
}

if ($is_edit && $data_ulang['step_completed'] >= 4 && $file_uploaded) {
    $is_complete = true;
    $status_ulang = '✅ Selesai';
    $status_warna = '#2ecc71';
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pendaftaran Ulang - SMA Negeri 1 Loghia</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: 'Segoe UI', Arial, sans-serif;
            background: #f0f2f8;
            min-height: 100vh;
            padding: 20px;
        }
        .container {
            max-width: 900px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            padding: 35px;
            box-shadow: 0 15px 40px rgba(0,0,0,0.1);
        }
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            border-bottom: 3px solid #667eea;
            padding-bottom: 15px;
            margin-bottom: 25px;
        }
        .header h1 { color: #333; font-size: 24px; }
        .header .school-name { font-size: 14px; color: #667eea; font-weight: 600; }
        .header .user-info {
            background: #f0f2ff;
            padding: 8px 18px;
            border-radius: 30px;
            color: #667eea;
            font-weight: 600;
            font-size: 14px;
        }
        .header .user-info span { color: #333; }
        .header-actions {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            align-items: center;
        }
        .btn-logout {
            background: #e74c3c;
            color: white;
            border: none;
            padding: 8px 20px;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 600;
            text-decoration: none;
            font-size: 13px;
            transition: 0.3s;
        }
        .btn-logout:hover { background: #c0392b; }
        .btn-back {
            background: #6c757d;
            color: white;
            border: none;
            padding: 8px 20px;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 600;
            text-decoration: none;
            font-size: 13px;
            transition: 0.3s;
        }
        .btn-back:hover { background: #5a6268; }

        .btn-cetak-formulir {
            background: #3498db;
            color: white;
            border: none;
            padding: 8px 20px;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 600;
            text-decoration: none;
            font-size: 13px;
            transition: 0.3s;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .btn-cetak-formulir:hover {
            background: #2980b9;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(52,152,219,0.4);
        }
        .btn-cetak-kartu {
            background: #2ecc71;
            color: white;
            border: none;
            padding: 8px 20px;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 600;
            text-decoration: none;
            font-size: 13px;
            transition: 0.3s;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .btn-cetak-kartu:hover {
            background: #27ae60;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(46,204,113,0.4);
        }
        .btn-cetak-kartu-besar {
            background: #2ecc71;
            color: white;
            border: none;
            padding: 14px 40px;
            border-radius: 10px;
            cursor: pointer;
            font-weight: 700;
            text-decoration: none;
            font-size: 18px;
            transition: 0.3s;
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }
        .btn-cetak-kartu-besar:hover {
            background: #27ae60;
            transform: translateY(-3px);
            box-shadow: 0 10px 30px rgba(46,204,113,0.4);
        }
        .btn-cetak-formulir-besar {
            background: #3498db;
            color: white;
            border: none;
            padding: 14px 40px;
            border-radius: 10px;
            cursor: pointer;
            font-weight: 700;
            text-decoration: none;
            font-size: 18px;
            transition: 0.3s;
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }
        .btn-cetak-formulir-besar:hover {
            background: #2980b9;
            transform: translateY(-3px);
            box-shadow: 0 10px 30px rgba(52,152,219,0.4);
        }

        .step-indicator {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-bottom: 30px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 10px;
            flex-wrap: wrap;
        }
        .step-indicator .step-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 600;
            color: #999;
            background: #e9ecef;
            transition: 0.3s;
        }
        .step-indicator .step-item.active { color: white; background: #667eea; }
        .step-indicator .step-item.done { color: white; background: #2ecc71; }
        .step-indicator .step-item .num {
            display: inline-block;
            width: 24px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            border-radius: 50%;
            background: rgba(255,255,255,0.3);
            font-size: 12px;
        }
        .step-arrow { color: #ccc; font-size: 20px; display: flex; align-items: center; }

        .info-box {
            background: #e8ecff;
            padding: 15px 20px;
            border-radius: 10px;
            margin-bottom: 25px;
            border-left: 4px solid #667eea;
        }
        .info-box .label { font-weight: 600; color: #555; }
        .info-box .value { font-weight: 700; color: #333; }

        .form-group { margin-bottom: 18px; }
        label {
            display: block;
            font-weight: 600;
            margin-bottom: 4px;
            color: #555;
            font-size: 14px;
        }
        label .required { color: #e74c3c; }
        label .optional { color: #888; font-weight: 400; font-size: 12px; }
        input, select, textarea {
            width: 100%;
            padding: 10px 14px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            font-size: 14px;
            transition: all 0.3s;
            background: #fafafa;
        }
        input:focus, select:focus, textarea:focus {
            border-color: #667eea;
            outline: none;
            background: white;
            box-shadow: 0 0 0 3px rgba(102,126,234,0.15);
        }
        textarea { height: 60px; resize: vertical; }
        .row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

        input[readonly] {
            background: #f5f5f5 !important;
            color: #333 !important;
            cursor: not-allowed !important;
            border-color: #ddd !important;
        }

        .btn-submit {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            padding: 14px 40px;
            border: none;
            border-radius: 10px;
            font-size: 16px;
            font-weight: 700;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
            margin-top: 10px;
        }
        .btn-submit:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(102,126,234,0.4);
        }
        .btn-draft {
            background: #f39c12;
            color: white;
            padding: 14px 30px;
            border: none;
            border-radius: 10px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            transition: 0.3s;
            margin-top: 10px;
        }
        .btn-draft:hover { background: #d68910; transform: translateY(-2px); }
        .btn-success { background: #2ecc71; }
        .btn-success:hover { background: #27ae60; }
        .btn-group-form {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            margin-top: 10px;
        }
        .btn-group-form .btn-submit { flex: 2; min-width: 150px; }
        .btn-group-form .btn-draft { flex: 1; min-width: 120px; }

        .alert {
            padding: 14px 18px;
            border-radius: 8px;
            margin-bottom: 20px;
            font-weight: 500;
        }
        .alert-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
        .alert-danger { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
        .alert-info { background: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; }

        .section-title {
            font-size: 18px;
            font-weight: 700;
            color: #333;
            margin: 25px 0 15px 0;
            padding-bottom: 8px;
            border-bottom: 2px solid #eee;
        }

        .file-input-wrapper {
            position: relative;
            border: 2px dashed #d0d0d0;
            padding: 18px;
            text-align: center;
            border-radius: 10px;
            transition: all 0.3s;
            background: #fafafa;
            cursor: pointer;
        }
        .file-input-wrapper:hover {
            border-color: #667eea;
            background: #f0f3ff;
        }
        .file-input-wrapper input[type="file"] {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
        }
        .file-input-wrapper .icon { font-size: 30px; display: block; }
        .file-input-wrapper .file-name {
            display: block;
            margin-top: 5px;
            color: #888;
            font-size: 12px;
        }
        .file-input-wrapper .file-label {
            display: block;
            font-weight: 600;
            color: #555;
            margin-bottom: 3px;
            font-size: 13px;
        }

        /* ============================================
           PREVIEW FILE
        ============================================ */
        .file-preview {
            margin-top: 8px;
            padding: 10px;
            border-radius: 8px;
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            display: none;
            align-items: center;
            gap: 12px;
        }
        .file-preview.has-file { display: flex; }
        .file-preview img {
            max-width: 50px;
            max-height: 50px;
            border-radius: 5px;
            object-fit: cover;
            border: 1px solid #ddd;
        }
        .file-preview .file-info { flex: 1; text-align: left; }
        .file-preview .file-info .name { font-weight: 600; font-size: 13px; color: #333; word-break: break-all; }
        .file-preview .file-info .size { font-size: 11px; color: #888; }
        .file-preview .file-info .size.exists { color: #2ecc71; font-weight: 600; }
        .file-preview .btn-remove {
            background: #e74c3c;
            color: white;
            border: none;
            border-radius: 50%;
            width: 24px;
            height: 24px;
            cursor: pointer;
            font-size: 14px;
            line-height: 24px;
            text-align: center;
            flex-shrink: 0;
            transition: 0.2s;
        }
        .file-preview .btn-remove:hover { background: #c0392b; }
        .file-preview .file-icon-pdf { font-size: 36px; color: #e74c3c; }
        .file-preview .file-icon-doc { font-size: 36px; color: #3498db; }
        .file-preview .file-icon-unknown { font-size: 36px; color: #95a5a6; }

        .info-opsional {
            background: #f8f9fa;
            border-left: 4px solid #667eea;
            padding: 10px 15px;
            border-radius: 5px;
            margin-bottom: 15px;
            font-size: 13px;
            color: #666;
        }
        .info-tips { background: #fff3cd; border-left-color: #ffc107; }
        .camera-badge {
            color: #667eea;
            font-size: 11px;
            font-weight: 400;
            background: #e8ecff;
            padding: 2px 10px;
            border-radius: 12px;
            margin-left: 5px;
        }

        /* TOMBOL KAMERA */
        .btn-camera {
            background: linear-gradient(135deg, #e74c3c, #c0392b);
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .btn-camera:hover {
            transform: translateY(-2px) scale(1.02);
            box-shadow: 0 5px 20px rgba(231,76,60,0.4);
        }
        
        /* CAMERA OVERLAY */
        #cameraContainerGlobal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.92);
            z-index: 10000;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        #cameraContainerGlobal .camera-wrapper {
            width: 100%;
            max-width: 500px;
            background: #000;
            border-radius: 16px;
            overflow: hidden;
            position: relative;
            box-shadow: 0 20px 60px rgba(0,0,0,0.8);
        }
        #cameraContainerGlobal .camera-wrapper video {
            width: 100%;
            display: block;
            background: #000;
            max-height: 70vh;
            object-fit: cover;
        }
        #cameraContainerGlobal .camera-controls {
            display: flex;
            gap: 12px;
            justify-content: center;
            padding: 15px;
            background: rgba(0,0,0,0.6);
            backdrop-filter: blur(15px);
            width: 100%;
            max-width: 500px;
            border-radius: 0 0 16px 16px;
            flex-wrap: wrap;
        }
        #cameraContainerGlobal .camera-controls button {
            padding: 12px 24px;
            border: none;
            border-radius: 10px;
            font-size: 15px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: 'Segoe UI', Arial, sans-serif;
            flex: 1;
            min-width: 100px;
        }
        #cameraContainerGlobal .camera-controls button:hover {
            transform: scale(1.05);
        }
        #cameraContainerGlobal .camera-controls .btn-capture-camera {
            background: linear-gradient(135deg, #2ecc71, #27ae60);
            color: white;
        }
        #cameraContainerGlobal .camera-controls .btn-capture-camera:hover {
            box-shadow: 0 5px 25px rgba(46,204,113,0.5);
        }
        #cameraContainerGlobal .camera-controls .btn-switch-camera {
            background: rgba(255,255,255,0.15);
            color: white;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.1);
        }
        #cameraContainerGlobal .camera-controls .btn-switch-camera:hover {
            background: rgba(255,255,255,0.25);
        }
        #cameraContainerGlobal .camera-controls .btn-close-camera {
            background: linear-gradient(135deg, #e74c3c, #c0392b);
            color: white;
        }
        #cameraContainerGlobal .camera-controls .btn-close-camera:hover {
            box-shadow: 0 5px 25px rgba(231,76,60,0.5);
        }

        /* TOAST NOTIFICATION */
        .toast-notification {
            position: fixed;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            background: #2ecc71;
            color: white;
            padding: 14px 28px;
            border-radius: 12px;
            font-weight: 600;
            z-index: 99999;
            box-shadow: 0 10px 40px rgba(46,204,113,0.4);
            animation: slideUpToast 0.5s ease;
            font-size: 15px;
            max-width: 90%;
            text-align: center;
        }
        @keyframes slideUpToast {
            from { opacity: 0; transform: translateX(-50%) translateY(30px); }
            to { opacity: 1; transform: translateX(-50%) translateY(0); }
        }

        /* ============================================
           LOADING OVERLAY UNTUK UPLOAD
        ============================================ */
        #loadingOverlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.75);
            z-index: 99999;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }
        #loadingOverlay.active {
            display: flex;
        }
        #loadingOverlay .loader-box {
            background: white;
            border-radius: 20px;
            padding: 40px 50px;
            max-width: 420px;
            width: 90%;
            text-align: center;
            box-shadow: 0 30px 80px rgba(0,0,0,0.5);
            animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        @keyframes popIn {
            from { opacity: 0; transform: scale(0.8); }
            to { opacity: 1; transform: scale(1); }
        }
        #loadingOverlay .loader-icon {
            font-size: 56px;
            margin-bottom: 10px;
        }
        #loadingOverlay .loader-title {
            font-size: 20px;
            font-weight: 700;
            color: #1a237e;
            margin-bottom: 5px;
        }
        #loadingOverlay .loader-sub {
            font-size: 14px;
            color: #888;
            margin-bottom: 20px;
        }
        #loadingOverlay .progress-container {
            width: 100%;
            height: 10px;
            background: #f0f2f8;
            border-radius: 10px;
            overflow: hidden;
            position: relative;
        }
        #loadingOverlay .progress-container .progress-bar {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, #667eea, #764ba2);
            border-radius: 10px;
            transition: width 0.5s ease;
        }
        #loadingOverlay .progress-text {
            font-size: 14px;
            font-weight: 700;
            color: #667eea;
            margin-top: 10px;
        }
        #loadingOverlay .file-status {
            font-size: 12px;
            color: #999;
            margin-top: 8px;
        }
        #loadingOverlay .spinner {
            display: inline-block;
            width: 40px;
            height: 40px;
            border: 4px solid #f0f2f8;
            border-top: 4px solid #667eea;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
            margin-bottom: 15px;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .edit-mode-badge {
            background: #fff3e0;
            color: #e65100;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 600;
            border: 2px solid #ffb74d;
            display: inline-block;
            margin-bottom: 15px;
        }

        .btn-cetak {
            background: #2ecc71;
            color: white;
            border: none;
            padding: 12px 30px;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 700;
            text-decoration: none;
            font-size: 15px;
            transition: 0.3s;
            display: inline-block;
        }
        .btn-cetak:hover {
            background: #27ae60;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(46,204,113,0.4);
        }
        .btn-edit {
            background: #f39c12;
            color: white;
            border: none;
            padding: 12px 30px;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 700;
            text-decoration: none;
            font-size: 15px;
            transition: 0.3s;
            display: inline-block;
        }
        .btn-edit:hover {
            background: #d68910;
            transform: translateY(-2px);
        }

        .action-section {
            margin-top: 30px;
            padding: 30px;
            background: linear-gradient(135deg, #f8f9fa, #e9ecef);
            border-radius: 15px;
            border: 2px solid #dee2e6;
            text-align: center;
        }
        .action-section h3 {
            color: #333;
            font-size: 20px;
            margin-bottom: 10px;
        }
        .action-section p {
            color: #666;
            margin-bottom: 20px;
            font-size: 15px;
        }
        .action-section .btn-group-cetak {
            display: flex;
            gap: 20px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .file-exists-badge {
            font-size: 11px;
            color: #2ecc71;
            font-weight: 400;
            margin-left: 5px;
        }

        @media (max-width: 600px) {
            .row { grid-template-columns: 1fr; gap: 0; }
            .container { padding: 20px; }
            .header { flex-direction: column; text-align: center; gap: 15px; }
            .header-actions { justify-content: center; }
            .step-indicator { flex-direction: column; align-items: center; }
            .step-arrow { display: none; }
            .btn-group-form { flex-direction: column; }
            .btn-group-form .btn-submit, .btn-group-form .btn-draft { width: 100%; }
            .action-section .btn-group-cetak { flex-direction: column; align-items: center; }
            .action-section .btn-group-cetak .btn-cetak-formulir-besar,
            .action-section .btn-group-cetak .btn-cetak-kartu-besar { width: 100%; justify-content: center; }
            #cameraContainerGlobal .camera-controls button { font-size: 13px; padding: 10px 16px; min-width: 70px; }
            .toast-notification { font-size: 13px; padding: 10px 18px; bottom: 20px; }
            #loadingOverlay .loader-box { padding: 30px 25px; }
        }
    </style>
</head>
<body>
<div class="container">
    
    <!-- HEADER -->
    <div class="header">
        <div>
            <h1>📝 Pendaftaran Ulang</h1>
            <span class="school-name">SMA Negeri 1 Loghia</span>
        </div>
        <div>
            <span class="user-info">👋 <?= htmlspecialchars($nama) ?> <span>(<?= htmlspecialchars($nisn_session) ?>)</span></span>
        </div>
        <div class="header-actions">
            <?php if ($is_complete): ?>
                <a href="cetak_formulir.php?siswa_id=<?= $siswa_id ?>" target="_blank" class="btn-cetak-formulir">
                    📄 Cetak Formulir
                </a>
                <a href="cetak_kartu_pelajar.php?siswa_id=<?= $siswa_id ?>" target="_blank" class="btn-cetak-kartu">
                    🪪 Cetak Kartu Pelajar
                </a>
                <a href="?edit=true" class="btn-edit" style="padding:8px 20px; font-size:13px;">
                    ✏️ Edit
                </a>
            <?php endif; ?>
            <a href="login_ulang.php" class="btn-back">← Kembali</a>
            <a href="logout_ulang.php" class="btn-logout">🚪 Logout</a>
        </div>
    </div>

    <!-- INFO -->
    <div class="info-box">
        <span class="label">No Pendaftaran:</span> <span class="value"><?= htmlspecialchars($no_pendaftaran) ?></span>
        &nbsp;|&nbsp;
        <span class="label">Kelas:</span> <span class="value"><?= htmlspecialchars($kelas) ?></span>
        &nbsp;|&nbsp;
        <span class="label">Status:</span> 
        <span class="value" style="color: <?= $status_warna ?>">
            <?= $status_ulang ?>
        </span>
        <span style="display:block; font-size:12px; color:#f5576c; margin-top:3px;">
            ⏰ Deadline: 11 Juli 2026
        </span>
        <?php if ($edit_mode): ?>
            <span style="font-size:12px; color:#e65100; display:block; margin-top:5px;">
                ✏️ Mode Perbaikan Data
            </span>
        <?php endif; ?>
    </div>

    <!-- NOTIFIKASI -->
    <?php if ($success && !$is_draft): ?>
        <div class="alert alert-success" id="successAlert">
            ✅ <?= $message ?>
            <button onclick="document.getElementById('successAlert').style.display='none'" style="float:right;background:none;border:none;font-size:18px;cursor:pointer;">✕</button>
        </div>
    <?php endif; ?>

    <?php if (!empty($errors)): ?>
        <div class="alert alert-danger">
            <strong>❌ Terjadi Kesalahan:</strong><br>
            <?php foreach($errors as $err): ?>
                • <?= $err ?><br>
            <?php endforeach; ?>
        </div>
    <?php endif; ?>

    <?php if (!empty($upload_errors)): ?>
        <div class="alert alert-danger">
            <strong>❌ Upload Gagal:</strong><br>
            <?php foreach($upload_errors as $err): ?>
                • <?= $err ?><br>
            <?php endforeach; ?>
        </div>
    <?php endif; ?>

    <?php if ($edit_mode): ?>
        <div class="edit-mode-badge">
            ✏️ MODE PERBAIKAN DATA
        </div>
    <?php endif; ?>

    <!-- STEP INDICATOR -->
    <div class="step-indicator">
        <div class="step-item <?= $step >= 1 ? 'active' : '' ?> <?= $step > 1 ? 'done' : '' ?>">
            <span class="num">1</span> Identitas
        </div>
        <span class="step-arrow">→</span>
        <div class="step-item <?= $step >= 2 ? 'active' : '' ?> <?= $step > 2 ? 'done' : '' ?>">
            <span class="num">2</span> Alamat
        </div>
        <span class="step-arrow">→</span>
        <div class="step-item <?= $step >= 3 ? 'active' : '' ?> <?= $step > 3 ? 'done' : '' ?>">
            <span class="num">3</span> Orang Tua
        </div>
        <span class="step-arrow">→</span>
        <div class="step-item <?= $step >= 4 ? 'active' : '' ?> <?= $step > 4 ? 'done' : '' ?>">
            <span class="num">4</span> Upload
        </div>
        <span class="step-arrow">→</span>
        <div class="step-item <?= $is_complete ? 'done' : '' ?>">
            <span class="num">✅</span> Selesai
        </div>
    </div>

    <!-- ============================================
         STEP 4: UPLOAD BERKAS (DENGAN KAMERA UNTUK SEMUA)
         ============================================ -->
    <?php if (($step == 4 || $is_complete) && (!$is_complete || $edit_mode)): ?>
        
        <?php if ($is_complete && !$edit_mode): ?>
            <div class="alert alert-success" style="text-align:center; padding:30px;">
                <h3>✅ Pendaftaran Ulang Selesai!</h3>
                <p style="margin:10px 0;">Semua data dan berkas telah lengkap.</p>
                
                <div class="action-section" style="margin-top:15px;">
                    <h3>📄 Cetak Dokumen</h3>
                    <p>Silakan cetak dokumen-dokumen berikut untuk keperluan administrasi.</p>
                    <div class="btn-group-cetak">
                        <a href="cetak_formulir.php?siswa_id=<?= $siswa_id ?>" target="_blank" class="btn-cetak-formulir-besar">
                            📄 Cetak Formulir
                        </a>
                        <a href="cetak_kartu_pelajar.php?siswa_id=<?= $siswa_id ?>" target="_blank" class="btn-cetak-kartu-besar">
                            🪪 Cetak Kartu Pelajar
                        </a>
                    </div>
                </div>
            </div>
        <?php else: ?>
            
            <div class="info-opsional info-tips">
                <strong>📱 Tips Upload dari HP:</strong><br>
                • Gunakan koneksi <strong>Wi-Fi</strong> untuk upload file besar<br>
                • Pastikan file tidak lebih dari <strong>5MB</strong> per berkas<br>
                • Klik tombol <strong>📸 Ambil Foto</strong> untuk foto langsung dari HP<br>
                • Jika upload lama, <strong>jangan tutup</strong> halaman ini
            </div>
            
            <form method="POST" enctype="multipart/form-data" id="formUpload" onsubmit="showLoading()">
                <input type="hidden" name="action" value="upload_berkas">
                <input type="hidden" name="step" value="4">
                
                <div class="section-title">📎 Upload Berkas Pendukung</div>
                
                <div class="info-opsional">
                    <span class="required">*</span> Wajib diupload | 
                    <span style="color:#888;">(Opsional)</span> Tidak wajib
                    <span class="camera-badge">📱 Klik "Ambil Foto" untuk foto langsung</span>
                </div>

                <?php 
                $file_list = [
                    'ijazah' => ['label' => 'Ijazah', 'icon' => '🎓', 'info' => 'PDF/JPG/PNG, max 5MB', 'wajib' => true, 'camera' => true],
                    'kk' => ['label' => 'Kartu Keluarga', 'icon' => '🏠', 'info' => 'PDF/JPG/PNG, max 5MB', 'wajib' => true, 'camera' => true],
                    'akta' => ['label' => 'Akta Kelahiran', 'icon' => '📜', 'info' => 'PDF/JPG/PNG, max 5MB', 'wajib' => true, 'camera' => true],
                    'kip_pkh' => ['label' => 'KIP atau PKH', 'icon' => '💳', 'info' => 'PDF/JPG/PNG, max 5MB', 'wajib' => false, 'camera' => true],
                    'pas_foto' => ['label' => 'Pas Foto', 'icon' => '📷', 'info' => 'JPG/PNG, max 5MB', 'wajib' => true, 'camera' => true, 'camera_only' => true]
                ];
                
                foreach($file_list as $key => $data): 
                    $accept = 'accept=".pdf,.jpg,.jpeg,.png,image/*"';
                    $wajib = $data['wajib'] ? 'required' : '';
                    $camera_badge = isset($data['camera']) && $data['camera'] ? '<span class="camera-badge">📱 Bisa foto langsung</span>' : '';
                    $existing_file = $data_ulang ? ($data_ulang['file_' . $key] ?? '') : '';
                    $is_image_only = isset($data['camera_only']) && $data['camera_only'] === true;
                    
                    if ($is_image_only) {
                        $accept = 'accept="image/*" capture="user"';
                    }
                    
                    // Cek apakah file benar-benar ada di folder
                    $file_exists = false;
                    $file_path = '';
                    if (!empty($existing_file)) {
                        $file_path = 'uploads/ulang/' . $existing_file;
                        $file_exists = file_exists($file_path);
                    }
                ?>
                <div class="form-group" id="group_<?= $key ?>">
                    <label>
                        <?= $data['icon'] ?> <?= $data['label'] ?> 
                        <?php if ($data['wajib']): ?>
                            <span class="required">*</span>
                        <?php else: ?>
                            <span class="optional">(Opsional)</span>
                        <?php endif; ?>
                        <?= $camera_badge ?>
                        <?php if ($file_exists): ?>
                            <span class="file-exists-badge">✅ File terupload</span>
                        <?php endif; ?>
                    </label>
                    
                    <?php if (isset($data['camera']) && $data['camera']): ?>
                    <div style="display:flex; gap:8px; margin-bottom:8px; flex-wrap:wrap; align-items:center;">
                        <button type="button" class="btn-camera" data-target="file_<?= $key ?>" data-preview="preview_<?= $key ?>" data-content="preview_content_<?= $key ?>" data-filename="filename_<?= $key ?>">
                            📸 Ambil Foto
                        </button>
                        <span style="font-size:11px; color:#888;">atau pilih file dari galeri</span>
                    </div>
                    <?php endif; ?>
                    
                    <div class="file-input-wrapper">
                        <input type="file" 
                               name="file_<?= $key ?>" 
                               <?= $wajib ?> 
                               <?= $accept ?>
                               data-key="<?= $key ?>"
                               id="file_<?= $key ?>">
                        <span class="icon">📁</span>
                        <span class="file-label">Klik untuk pilih file</span>
                        <span class="file-name" id="filename_<?= $key ?>">
                            <?php if ($file_exists): ?>
                                ✅ <?= htmlspecialchars($existing_file) ?>
                            <?php else: ?>
                                <?= $data['info'] ?>
                            <?php endif; ?>
                        </span>
                    </div>
                    
                    <?php if ($file_exists): ?>
                        <div style="margin-top:5px; font-size:12px; color:#2ecc71;">
                            ✅ File saat ini: <?= htmlspecialchars($existing_file) ?>
                            <?php if (file_exists($file_path)): ?>
                                <span style="font-size:11px; color:#888; margin-left:10px;">(<?= round(filesize($file_path) / 1024) ?> KB)</span>
                            <?php endif; ?>
                        </div>
                    <?php endif; ?>
                    
                    <div class="file-preview <?= $file_exists ? 'has-file' : '' ?>" id="preview_<?= $key ?>">
                        <div class="preview-content" id="preview_content_<?= $key ?>">
                            <?php if ($file_exists): ?>
                                <?php 
                                $ext = strtolower(pathinfo($existing_file, PATHINFO_EXTENSION));
                                $isImage = in_array($ext, ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg', 'webp']);
                                ?>
                                <?php if ($isImage): ?>
                                    <img src="<?= $file_path ?>" alt="<?= htmlspecialchars($existing_file) ?>" style="max-width:50px; max-height:50px; border-radius:5px; object-fit:cover; border:1px solid #ddd;">
                                    <div class="file-info">
                                        <div class="name"><?= htmlspecialchars($existing_file) ?></div>
                                        <div class="size exists">✅ File sudah ada</div>
                                    </div>
                                <?php else: ?>
                                    <span style="font-size:36px; color:#e74c3c;">📄</span>
                                    <div class="file-info">
                                        <div class="name"><?= htmlspecialchars($existing_file) ?></div>
                                        <div class="size exists">✅ File sudah ada</div>
                                    </div>
                                <?php endif; ?>
                            <?php endif; ?>
                        </div>
                        <button type="button" class="btn-remove" onclick="removeFile('<?= $key ?>')" title="Hapus file">✕</button>
                    </div>
                </div>
                <?php endforeach; ?>

                <div class="btn-group-form">
                    <button type="submit" class="btn-submit btn-success" id="btnUpload">
                        📤 Upload & Selesai
                    </button>
                    <?php if ($edit_mode): ?>
                        <a href="?edit=false" class="btn-draft" style="text-decoration:none; text-align:center;">
                            ↩️ Kembali
                        </a>
                    <?php endif; ?>
                </div>
            </form>
        <?php endif; ?>
        
    <?php endif; ?>

    <!-- ============================================
         STEP 1-3: FORM DATA DIRI
         ============================================ -->
    <?php if ($step < 4 && (!$is_complete || $edit_mode)): ?>
    <form method="POST" action="" id="formUlang">
        <input type="hidden" name="step" value="<?= $step ?>">
        <input type="hidden" name="action" value="simpan_data">
        <?php if ($edit_mode): ?>
            <input type="hidden" name="edit_mode" value="true">
        <?php endif; ?>
        
        <!-- STEP 1: IDENTITAS -->
        <?php if ($step == 1): ?>
        <div class="section-title">📋 Identitas Peserta Didik</div>

        <div class="form-group">
            <label>1. Nama Lengkap <span class="required">*</span></label>
            <input type="text" name="nama_lengkap" value="<?= htmlspecialchars($nama) ?>" readonly>
        </div>

        <div class="form-group">
            <label>2. Kelas <span class="required">*</span></label>
            <input type="text" name="kelas" value="<?= htmlspecialchars($kelas) ?>" readonly>
        </div>

        <div class="form-group">
            <label>3. Jenis Kelamin <span class="required">*</span></label>
            <select name="jenis_kelamin" required>
                <option value="">-- Pilih --</option>
                <option value="Laki-laki" <?= selected_normal('Laki-laki', getFieldValue($data_display, 'jenis_kelamin')) ?>>Laki-laki</option>
                <option value="Perempuan" <?= selected_normal('Perempuan', getFieldValue($data_display, 'jenis_kelamin')) ?>>Perempuan</option>
            </select>
        </div>

        <div class="form-group">
            <label>4. NISN <span class="required">*</span></label>
            <input type="text" name="nisn" value="<?= htmlspecialchars($nisn_session) ?>" readonly>
        </div>

        <div class="form-group">
            <label>5. NIK <span class="required">*</span></label>
            <input type="text" name="nik" placeholder="16 digit angka" required maxlength="16" 
                   pattern="[0-9]{16}" title="16 digit angka"
                   value="<?= htmlspecialchars(getFieldValue($data_display, 'nik')) ?>">
        </div>

        <div class="form-group">
            <label>6. Nomor Kartu Keluarga <span class="required">*</span></label>
            <input type="text" name="no_kk" placeholder="16 digit angka" required maxlength="16" 
                   pattern="[0-9]{16}" title="16 digit angka"
                   value="<?= htmlspecialchars(getFieldValue($data_display, 'no_kk')) ?>">
        </div>

        <div class="row">
            <div class="form-group">
                <label>7. Tempat Lahir <span class="required">*</span></label>
                <input type="text" name="tempat_lahir" placeholder="Kota/Kabupaten lahir" required 
                       value="<?= htmlspecialchars(getFieldValue($data_display, 'tempat_lahir')) ?>">
            </div>
            <div class="form-group">
                <label>Tanggal Lahir <span class="required">*</span></label>
                <input type="date" name="tanggal_lahir" required 
                       value="<?= htmlspecialchars(getFieldValue($data_display, 'tanggal_lahir')) ?>">
            </div>
        </div>

        <div class="form-group">
            <label>8. Agama <span class="required">*</span></label>
            <select name="agama" required>
                <option value="">-- Pilih --</option>
                <?php
                $agama_list = ['Islam','Kristen','Katolik','Hindu','Budha','Konghucu','Lainnya'];
                foreach($agama_list as $a):
                ?>
                <option value="<?= $a ?>" <?= selected_normal($a, getFieldValue($data_display, 'agama')) ?>><?= $a ?></option>
                <?php endforeach; ?>
            </select>
        </div>

        <div class="form-group">
            <label>9. Berkebutuhan Khusus</label>
            <select name="berkebutuhan_khusus">
                <option value="01) Tidak" <?= selected_normal('01) Tidak', getFieldValue($data_display, 'berkebutuhan_khusus')) ?>>01) Tidak</option>
                <option value="02) Netra (A)" <?= selected_normal('02) Netra (A)', getFieldValue($data_display, 'berkebutuhan_khusus')) ?>>02) Netra (A)</option>
                <option value="03) Rungu (B)" <?= selected_normal('03) Rungu (B)', getFieldValue($data_display, 'berkebutuhan_khusus')) ?>>03) Rungu (B)</option>
                <option value="04) Grahita Ringan (C)" <?= selected_normal('04) Grahita Ringan (C)', getFieldValue($data_display, 'berkebutuhan_khusus')) ?>>04) Grahita Ringan (C)</option>
                <option value="05) Grahita Sedang (C1)" <?= selected_normal('05) Grahita Sedang (C1)', getFieldValue($data_display, 'berkebutuhan_khusus')) ?>>05) Grahita Sedang (C1)</option>
                <option value="06) Daksa Ringan (D)" <?= selected_normal('06) Daksa Ringan (D)', getFieldValue($data_display, 'berkebutuhan_khusus')) ?>>06) Daksa Ringan (D)</option>
                <option value="07) Daksa Sedang (D1)" <?= selected_normal('07) Daksa Sedang (D1)', getFieldValue($data_display, 'berkebutuhan_khusus')) ?>>07) Daksa Sedang (D1)</option>
                <option value="08) Laras (E)" <?= selected_normal('08) Laras (E)', getFieldValue($data_display, 'berkebutuhan_khusus')) ?>>08) Laras (E)</option>
                <option value="09) Wicara (F)" <?= selected_normal('09) Wicara (F)', getFieldValue($data_display, 'berkebutuhan_khusus')) ?>>09) Wicara (F)</option>
                <option value="10) Tuna Ganda (G)" <?= selected_normal('10) Tuna Ganda (G)', getFieldValue($data_display, 'berkebutuhan_khusus')) ?>>10) Tuna Ganda (G)</option>
                <option value="11) Hyperaktif (H)" <?= selected_normal('11) Hyperaktif (H)', getFieldValue($data_display, 'berkebutuhan_khusus')) ?>>11) Hyperaktif (H)</option>
                <option value="12) Cerdas Istimewa (I)" <?= selected_normal('12) Cerdas Istimewa (I)', getFieldValue($data_display, 'berkebutuhan_khusus')) ?>>12) Cerdas Istimewa (I)</option>
                <option value="13) Bakat Istimewa (J)" <?= selected_normal('13) Bakat Istimewa (J)', getFieldValue($data_display, 'berkebutuhan_khusus')) ?>>13) Bakat Istimewa (J)</option>
                <option value="14) Kesulitan Belajar (K)" <?= selected_normal('14) Kesulitan Belajar (K)', getFieldValue($data_display, 'berkebutuhan_khusus')) ?>>14) Kesulitan Belajar (K)</option>
                <option value="15) Narkoba (N)" <?= selected_normal('15) Narkoba (N)', getFieldValue($data_display, 'berkebutuhan_khusus')) ?>>15) Narkoba (N)</option>
                <option value="16) Indigo (0)" <?= selected_normal('16) Indigo (0)', getFieldValue($data_display, 'berkebutuhan_khusus')) ?>>16) Indigo (0)</option>
                <option value="17) Down Syndrome (P)" <?= selected_normal('17) Down Syndrome (P)', getFieldValue($data_display, 'berkebutuhan_khusus')) ?>>17) Down Syndrome (P)</option>
                <option value="18) Autis (Q)" <?= selected_normal('18) Autis (Q)', getFieldValue($data_display, 'berkebutuhan_khusus')) ?>>18) Autis (Q)</option>
                <option value="19) Terpencil/Terbelakang" <?= selected_normal('19) Terpencil/Terbelakang', getFieldValue($data_display, 'berkebutuhan_khusus')) ?>>19) Terpencil/Terbelakang</option>
                <option value="20) Bencana Alam/Sosial" <?= selected_normal('20) Bencana Alam/Sosial', getFieldValue($data_display, 'berkebutuhan_khusus')) ?>>20) Bencana Alam/Sosial</option>
                <option value="21) Tidak Mampu Ekonomi" <?= selected_normal('21) Tidak Mampu Ekonomi', getFieldValue($data_display, 'berkebutuhan_khusus')) ?>>21) Tidak Mampu Ekonomi</option>
            </select>
        </div>

        <div class="btn-group-form">
            <button type="submit" class="btn-submit">📝 Lanjut ke Alamat</button>
            <button type="submit" name="simpan_draft" value="1" class="btn-draft">💾 Simpan Draft</button>
        </div>
        <?php endif; ?>

        <!-- STEP 2: ALAMAT -->
        <?php if ($step == 2): ?>
        <div class="section-title">🏠 Alamat & Kontak</div>

        <div class="form-group">
            <label>10. Alamat <span class="required">*</span></label>
            <input type="text" name="alamat" placeholder="Jl. ..." required 
                   value="<?= htmlspecialchars(getFieldValue($data_display, 'alamat')) ?>">
        </div>

        <div class="row">
            <div class="form-group">
                <label>Nama Dusun</label>
                <input type="text" name="dusun" placeholder="Nama dusun" 
                       value="<?= htmlspecialchars(getFieldValue($data_display, 'dusun')) ?>">
            </div>
            <div class="form-group">
                <label>RT</label>
                <input type="text" name="rt" placeholder="RT" maxlength="3" 
                       value="<?= htmlspecialchars(getFieldValue($data_display, 'rt')) ?>">
            </div>
            <div class="form-group">
                <label>RW</label>
                <input type="text" name="rw" placeholder="RW" maxlength="3" 
                       value="<?= htmlspecialchars(getFieldValue($data_display, 'rw')) ?>">
            </div>
        </div>

        <div class="row">
            <div class="form-group wilayah-group">
                <label>Kecamatan <span class="required">*</span></label>
                <select name="kecamatan" id="kecamatan" required>
                    <option value="">-- Pilih Kecamatan --</option>
                    <?php 
                    $selected_kec = getFieldValue($data_display, 'kecamatan');
                    $selected_kec_normalized = strtoupper($selected_kec);
                    foreach ($daftar_kecamatan as $kec): 
                        $is_selected = (strtoupper($kec) == $selected_kec_normalized);
                    ?>
                        <option value="<?= htmlspecialchars($kec) ?>" <?= $is_selected ? 'selected' : '' ?>>
                            <?= htmlspecialchars($kec) ?>
                        </option>
                    <?php endforeach; ?>
                </select>
            </div>
            
            <div class="form-group wilayah-group">
                <label>Kelurahan / Desa <span class="required">*</span></label>
                <select name="kelurahan" id="kelurahan" required>
                    <option value="">-- Pilih Kecamatan Terlebih Dahulu --</option>
                    <?php 
                    if (!empty($selected_kec) && isset($data_wilayah[strtoupper($selected_kec)])) {
                        $selected_desa = getFieldValue($data_display, 'kelurahan');
                        foreach ($data_wilayah[strtoupper($selected_kec)]['desa'] as $desa) {
                            $is_selected = (strtoupper($desa) == strtoupper($selected_desa));
                            echo "<option value='" . htmlspecialchars($desa) . "' " . ($is_selected ? 'selected' : '') . ">" . htmlspecialchars($desa) . "</option>";
                        }
                    }
                    ?>
                </select>
                <div class="loading-desa" id="loadingDesa">⏳ Memuat daftar desa...</div>
            </div>
        </div>

        <div class="form-group">
            <label>Kode Pos</label>
            <input type="text" name="kode_pos" placeholder="Kode Pos" maxlength="5" 
                   value="<?= htmlspecialchars(getFieldValue($data_display, 'kode_pos')) ?>">
        </div>

        <div class="form-group">
            <label>11. Jenis Tinggal <span class="required">*</span></label>
            <select name="jenis_tinggal" required>
                <option value="">-- Pilih --</option>
                <?php 
                $jenis_tinggal_options = [
                    '1) Bersama Orang Tua', '2) Wali', '3) Kost',
                    '4) Asrama', '5) Panti Asuhan', '9) Lainnya'
                ];
                $db_jenis_tinggal = getFieldValue($data_display, 'jenis_tinggal');
                foreach ($jenis_tinggal_options as $option): 
                ?>
                <option value="<?= htmlspecialchars($option) ?>" <?= selected($option, $db_jenis_tinggal) ?>>
                    <?= htmlspecialchars($option) ?>
                </option>
                <?php endforeach; ?>
            </select>
        </div>

        <div class="form-group">
            <label>12. Alat Transportasi ke Sekolah <span class="required">*</span></label>
            <select name="transportasi" required>
                <option value="">-- Pilih --</option>
                <?php 
                $transportasi_options = [
                    '01) Jalan Kaki', '02) Kendaraan Pribadi', '03) Kendaraan Umum',
                    '04) Jemputan Sekolah', '05) Kereta Api', '06) Ojek',
                    '07) Andong/Bendi/Sado', '08) Perahu', '99) Lainnya'
                ];
                $db_transportasi = getFieldValue($data_display, 'transportasi');
                foreach ($transportasi_options as $option): 
                ?>
                <option value="<?= htmlspecialchars($option) ?>" <?= selected($option, $db_transportasi) ?>>
                    <?= htmlspecialchars($option) ?>
                </option>
                <?php endforeach; ?>
            </select>
        </div>

        <div class="form-group">
            <label>13. No HP <span class="required">*</span></label>
            <input type="text" name="no_hp" placeholder="081234567890" required maxlength="15" 
                   pattern="[0-9]{10,15}" title="10-15 digit angka"
                   value="<?= htmlspecialchars(getFieldValue($data_display, 'no_hp')) ?>">
        </div>

        <div class="form-group">
            <label>14. Email</label>
            <input type="email" name="email" placeholder="email@example.com" 
                   value="<?= htmlspecialchars(getFieldValue($data_display, 'email')) ?>">
        </div>

        <div class="form-group">
            <label>15. Asal Sekolah <span class="required">*</span></label>
            <select name="asal_sekolah" id="asal_sekolah" required>
                <option value="">-- Pilih Asal Sekolah --</option>
                <?php 
                $selected_sekolah = getFieldValue($data_display, 'asal_sekolah');
                foreach ($daftar_sekolah as $sekolah): 
                ?>
                    <option value="<?= htmlspecialchars($sekolah) ?>" <?= selected_normal($sekolah, $selected_sekolah) ?>>
                        <?= htmlspecialchars($sekolah) ?>
                    </option>
                <?php endforeach; ?>
                <option value="Lainnya" <?= $selected_sekolah && !in_array($selected_sekolah, $daftar_sekolah) ? 'selected' : '' ?>>
                    ✏️ Lainnya (Tulis sendiri)
                </option>
            </select>
            <div class="sekolah-lain-input" id="sekolahLainInput" style="<?= $selected_sekolah && !in_array($selected_sekolah, $daftar_sekolah) ? '' : 'display:none;' ?>">
                <input type="text" name="asal_sekolah_lain" id="asal_sekolah_lain" 
                       placeholder="Tulis nama sekolah asal Anda..." 
                       value="<?= htmlspecialchars((!in_array($selected_sekolah, $daftar_sekolah) && $selected_sekolah) ? $selected_sekolah : '') ?>">
            </div>
        </div>

        <div class="form-group">
            <label>Alamat Sekolah Asal</label>
            <textarea name="alamat_sekolah_asal" placeholder="Alamat lengkap sekolah asal"><?= htmlspecialchars(getFieldValue($data_display, 'alamat_sekolah_asal')) ?></textarea>
        </div>

        <div class="btn-group-form">
            <button type="submit" class="btn-submit">📝 Lanjut ke Orang Tua</button>
            <button type="submit" name="simpan_draft" value="1" class="btn-draft">💾 Simpan Draft</button>
        </div>
        <?php endif; ?>

        <!-- STEP 3: ORANG TUA & PERIODIK -->
        <?php if ($step == 3): ?>
        <div class="section-title">👨‍👩‍👧‍👦 Identitas Orang Tua</div>

        <!-- Ayah -->
        <h4 style="color:#333; margin-bottom:10px;">a. Ayah</h4>
        <div class="row">
            <div class="form-group">
                <label>Nama Ayah <span class="required">*</span></label>
                <input type="text" name="ayah_nama" placeholder="Nama lengkap ayah" required 
                       value="<?= htmlspecialchars(getFieldValue($data_display, 'ayah_nama')) ?>">
            </div>
            <div class="form-group">
                <label>NIK Ayah</label>
                <input type="text" name="ayah_nik" placeholder="16 digit angka" maxlength="16" 
                       pattern="[0-9]{16}" title="16 digit angka"
                       value="<?= htmlspecialchars(getFieldValue($data_display, 'ayah_nik')) ?>">
            </div>
        </div>
        <div class="row">
            <div class="form-group">
                <label>Tahun Lahir</label>
                <input type="text" name="ayah_tahun_lahir" placeholder="Tahun lahir" maxlength="4" 
                       value="<?= htmlspecialchars(getFieldValue($data_display, 'ayah_tahun_lahir')) ?>">
            </div>
            <div class="form-group">
                <label>Pendidikan <span class="required">*</span></label>
                <select name="ayah_pendidikan" required>
                    <option value="">-- Pilih --</option>
                    <option value="01) Tidak Sekolah" <?= selected_normal('01) Tidak Sekolah', getFieldValue($data_display, 'ayah_pendidikan')) ?>>01) Tidak Sekolah</option>
                    <option value="02) Putus SD" <?= selected_normal('02) Putus SD', getFieldValue($data_display, 'ayah_pendidikan')) ?>>02) Putus SD</option>
                    <option value="03) SD Sederajat" <?= selected_normal('03) SD Sederajat', getFieldValue($data_display, 'ayah_pendidikan')) ?>>03) SD Sederajat</option>
                    <option value="04) SMP Sederajat" <?= selected_normal('04) SMP Sederajat', getFieldValue($data_display, 'ayah_pendidikan')) ?>>04) SMP Sederajat</option>
                    <option value="05) SMA Sederajat" <?= selected_normal('05) SMA Sederajat', getFieldValue($data_display, 'ayah_pendidikan')) ?>>05) SMA Sederajat</option>
                    <option value="06) D1" <?= selected_normal('06) D1', getFieldValue($data_display, 'ayah_pendidikan')) ?>>06) D1</option>
                    <option value="07) D2" <?= selected_normal('07) D2', getFieldValue($data_display, 'ayah_pendidikan')) ?>>07) D2</option>
                    <option value="08) D3" <?= selected_normal('08) D3', getFieldValue($data_display, 'ayah_pendidikan')) ?>>08) D3</option>
                    <option value="09) D4/S1" <?= selected_normal('09) D4/S1', getFieldValue($data_display, 'ayah_pendidikan')) ?>>09) D4/S1</option>
                    <option value="10) S2" <?= selected_normal('10) S2', getFieldValue($data_display, 'ayah_pendidikan')) ?>>10) S2</option>
                    <option value="11) S3" <?= selected_normal('11) S3', getFieldValue($data_display, 'ayah_pendidikan')) ?>>11) S3</option>
                </select>
            </div>
        </div>
        <div class="row">
            <div class="form-group">
                <label>Pekerjaan <span class="required">*</span></label>
                <select name="ayah_pekerjaan" required>
                    <option value="">-- Pilih --</option>
                    <option value="01) Tidak bekerja" <?= selected_normal('01) Tidak bekerja', getFieldValue($data_display, 'ayah_pekerjaan')) ?>>01) Tidak bekerja</option>
                    <option value="02) Nelayan" <?= selected_normal('02) Nelayan', getFieldValue($data_display, 'ayah_pekerjaan')) ?>>02) Nelayan</option>
                    <option value="03) Petani" <?= selected_normal('03) Petani', getFieldValue($data_display, 'ayah_pekerjaan')) ?>>03) Petani</option>
                    <option value="04) Peternak" <?= selected_normal('04) Peternak', getFieldValue($data_display, 'ayah_pekerjaan')) ?>>04) Peternak</option>
                    <option value="05) PNS/TNI/Polri" <?= selected_normal('05) PNS/TNI/Polri', getFieldValue($data_display, 'ayah_pekerjaan')) ?>>05) PNS/TNI/Polri</option>
                    <option value="06) Karyawan Swasta" <?= selected_normal('06) Karyawan Swasta', getFieldValue($data_display, 'ayah_pekerjaan')) ?>>06) Karyawan Swasta</option>
                    <option value="07) Pedagang Kecil" <?= selected_normal('07) Pedagang Kecil', getFieldValue($data_display, 'ayah_pekerjaan')) ?>>07) Pedagang Kecil</option>
                    <option value="08) Pedagang Besar" <?= selected_normal('08) Pedagang Besar', getFieldValue($data_display, 'ayah_pekerjaan')) ?>>08) Pedagang Besar</option>
                    <option value="09) Wiraswasta" <?= selected_normal('09) Wiraswasta', getFieldValue($data_display, 'ayah_pekerjaan')) ?>>09) Wiraswasta</option>
                    <option value="10) Wirausaha" <?= selected_normal('10) Wirausaha', getFieldValue($data_display, 'ayah_pekerjaan')) ?>>10) Wirausaha</option>
                    <option value="11) Buruh" <?= selected_normal('11) Buruh', getFieldValue($data_display, 'ayah_pekerjaan')) ?>>11) Buruh</option>
                    <option value="12) Pensiunan" <?= selected_normal('12) Pensiunan', getFieldValue($data_display, 'ayah_pekerjaan')) ?>>12) Pensiunan</option>
                    <option value="99) Lainnya" <?= selected_normal('99) Lainnya', getFieldValue($data_display, 'ayah_pekerjaan')) ?>>99) Lainnya</option>
                </select>
            </div>
            <div class="form-group">
                <label>Penghasilan Bulanan <span class="required">*</span></label>
                <select name="ayah_penghasilan" required>
                    <option value="">-- Pilih --</option>
                    <option value="1) Kurang dari Rp 500.000" <?= selected_normal('1) Kurang dari Rp 500.000', getFieldValue($data_display, 'ayah_penghasilan')) ?>>1) Kurang dari Rp 500.000</option>
                    <option value="2) Rp 500.000 - Rp 999.999" <?= selected_normal('2) Rp 500.000 - Rp 999.999', getFieldValue($data_display, 'ayah_penghasilan')) ?>>2) Rp 500.000 - Rp 999.999</option>
                    <option value="3) Rp 1.000.000 - Rp 1.999.999" <?= selected_normal('3) Rp 1.000.000 - Rp 1.999.999', getFieldValue($data_display, 'ayah_penghasilan')) ?>>3) Rp 1.000.000 - Rp 1.999.999</option>
                    <option value="4) Rp 2.000.000 - Rp 4.999.999" <?= selected_normal('4) Rp 2.000.000 - Rp 4.999.999', getFieldValue($data_display, 'ayah_penghasilan')) ?>>4) Rp 2.000.000 - Rp 4.999.999</option>
                    <option value="5) Lebih dari Rp 5.000.000" <?= selected_normal('5) Lebih dari Rp 5.000.000', getFieldValue($data_display, 'ayah_penghasilan')) ?>>5) Lebih dari Rp 5.000.000</option>
                </select>
            </div>
        </div>

        <!-- Ibu -->
        <h4 style="color:#333; margin:20px 0 10px 0;">b. Ibu</h4>
        <div class="row">
            <div class="form-group">
                <label>Nama Ibu <span class="required">*</span></label>
                <input type="text" name="ibu_nama" placeholder="Nama lengkap ibu" required 
                       value="<?= htmlspecialchars(getFieldValue($data_display, 'ibu_nama')) ?>">
            </div>
            <div class="form-group">
                <label>NIK Ibu</label>
                <input type="text" name="ibu_nik" placeholder="16 digit angka" maxlength="16" 
                       pattern="[0-9]{16}" title="16 digit angka"
                       value="<?= htmlspecialchars(getFieldValue($data_display, 'ibu_nik')) ?>">
            </div>
        </div>
        <div class="row">
            <div class="form-group">
                <label>Tahun Lahir</label>
                <input type="text" name="ibu_tahun_lahir" placeholder="Tahun lahir" maxlength="4" 
                       value="<?= htmlspecialchars(getFieldValue($data_display, 'ibu_tahun_lahir')) ?>">
            </div>
            <div class="form-group">
                <label>Pendidikan <span class="required">*</span></label>
                <select name="ibu_pendidikan" required>
                    <option value="">-- Pilih --</option>
                    <option value="01) Tidak Sekolah" <?= selected_normal('01) Tidak Sekolah', getFieldValue($data_display, 'ibu_pendidikan')) ?>>01) Tidak Sekolah</option>
                    <option value="02) Putus SD" <?= selected_normal('02) Putus SD', getFieldValue($data_display, 'ibu_pendidikan')) ?>>02) Putus SD</option>
                    <option value="03) SD Sederajat" <?= selected_normal('03) SD Sederajat', getFieldValue($data_display, 'ibu_pendidikan')) ?>>03) SD Sederajat</option>
                    <option value="04) SMP Sederajat" <?= selected_normal('04) SMP Sederajat', getFieldValue($data_display, 'ibu_pendidikan')) ?>>04) SMP Sederajat</option>
                    <option value="05) SMA Sederajat" <?= selected_normal('05) SMA Sederajat', getFieldValue($data_display, 'ibu_pendidikan')) ?>>05) SMA Sederajat</option>
                    <option value="06) D1" <?= selected_normal('06) D1', getFieldValue($data_display, 'ibu_pendidikan')) ?>>06) D1</option>
                    <option value="07) D2" <?= selected_normal('07) D2', getFieldValue($data_display, 'ibu_pendidikan')) ?>>07) D2</option>
                    <option value="08) D3" <?= selected_normal('08) D3', getFieldValue($data_display, 'ibu_pendidikan')) ?>>08) D3</option>
                    <option value="09) D4/S1" <?= selected_normal('09) D4/S1', getFieldValue($data_display, 'ibu_pendidikan')) ?>>09) D4/S1</option>
                    <option value="10) S2" <?= selected_normal('10) S2', getFieldValue($data_display, 'ibu_pendidikan')) ?>>10) S2</option>
                    <option value="11) S3" <?= selected_normal('11) S3', getFieldValue($data_display, 'ibu_pendidikan')) ?>>11) S3</option>
                </select>
            </div>
        </div>
        <div class="row">
            <div class="form-group">
                <label>Pekerjaan <span class="required">*</span></label>
                <select name="ibu_pekerjaan" required>
                    <option value="">-- Pilih --</option>
                    <option value="01) Tidak bekerja" <?= selected_normal('01) Tidak bekerja', getFieldValue($data_display, 'ibu_pekerjaan')) ?>>01) Tidak bekerja</option>
                    <option value="02) Nelayan" <?= selected_normal('02) Nelayan', getFieldValue($data_display, 'ibu_pekerjaan')) ?>>02) Nelayan</option>
                    <option value="03) Petani" <?= selected_normal('03) Petani', getFieldValue($data_display, 'ibu_pekerjaan')) ?>>03) Petani</option>
                    <option value="04) Peternak" <?= selected_normal('04) Peternak', getFieldValue($data_display, 'ibu_pekerjaan')) ?>>04) Peternak</option>
                    <option value="05) PNS/TNI/Polri" <?= selected_normal('05) PNS/TNI/Polri', getFieldValue($data_display, 'ibu_pekerjaan')) ?>>05) PNS/TNI/Polri</option>
                    <option value="06) Karyawan Swasta" <?= selected_normal('06) Karyawan Swasta', getFieldValue($data_display, 'ibu_pekerjaan')) ?>>06) Karyawan Swasta</option>
                    <option value="07) Pedagang Kecil" <?= selected_normal('07) Pedagang Kecil', getFieldValue($data_display, 'ibu_pekerjaan')) ?>>07) Pedagang Kecil</option>
                    <option value="08) Pedagang Besar" <?= selected_normal('08) Pedagang Besar', getFieldValue($data_display, 'ibu_pekerjaan')) ?>>08) Pedagang Besar</option>
                    <option value="09) Wiraswasta" <?= selected_normal('09) Wiraswasta', getFieldValue($data_display, 'ibu_pekerjaan')) ?>>09) Wiraswasta</option>
                    <option value="10) Wirausaha" <?= selected_normal('10) Wirausaha', getFieldValue($data_display, 'ibu_pekerjaan')) ?>>10) Wirausaha</option>
                    <option value="11) Buruh" <?= selected_normal('11) Buruh', getFieldValue($data_display, 'ibu_pekerjaan')) ?>>11) Buruh</option>
                    <option value="12) Pensiunan" <?= selected_normal('12) Pensiunan', getFieldValue($data_display, 'ibu_pekerjaan')) ?>>12) Pensiunan</option>
                    <option value="99) Lainnya" <?= selected_normal('99) Lainnya', getFieldValue($data_display, 'ibu_pekerjaan')) ?>>99) Lainnya</option>
                </select>
            </div>
            <div class="form-group">
                <label>Penghasilan Bulanan <span class="required">*</span></label>
                <select name="ibu_penghasilan" required>
                    <option value="">-- Pilih --</option>
                    <option value="1) Kurang dari Rp 500.000" <?= selected_normal('1) Kurang dari Rp 500.000', getFieldValue($data_display, 'ibu_penghasilan')) ?>>1) Kurang dari Rp 500.000</option>
                    <option value="2) Rp 500.000 - Rp 999.999" <?= selected_normal('2) Rp 500.000 - Rp 999.999', getFieldValue($data_display, 'ibu_penghasilan')) ?>>2) Rp 500.000 - Rp 999.999</option>
                    <option value="3) Rp 1.000.000 - Rp 1.999.999" <?= selected_normal('3) Rp 1.000.000 - Rp 1.999.999', getFieldValue($data_display, 'ibu_penghasilan')) ?>>3) Rp 1.000.000 - Rp 1.999.999</option>
                    <option value="4) Rp 2.000.000 - Rp 4.999.999" <?= selected_normal('4) Rp 2.000.000 - Rp 4.999.999', getFieldValue($data_display, 'ibu_penghasilan')) ?>>4) Rp 2.000.000 - Rp 4.999.999</option>
                    <option value="5) Lebih dari Rp 5.000.000" <?= selected_normal('5) Lebih dari Rp 5.000.000', getFieldValue($data_display, 'ibu_penghasilan')) ?>>5) Lebih dari Rp 5.000.000</option>
                </select>
            </div>
        </div>

        <!-- Wali (Opsional) -->
        <h4 style="color:#333; margin:20px 0 10px 0;">c. Wali <span class="optional">(Opsional)</span></h4>
        <div class="row">
            <div class="form-group">
                <label>Nama Wali</label>
                <input type="text" name="wali_nama" placeholder="Nama lengkap wali" 
                       value="<?= htmlspecialchars(getFieldValue($data_display, 'wali_nama')) ?>">
            </div>
            <div class="form-group">
                <label>Tahun Lahir</label>
                <input type="text" name="wali_tahun_lahir" placeholder="Tahun lahir" maxlength="4" 
                       value="<?= htmlspecialchars(getFieldValue($data_display, 'wali_tahun_lahir')) ?>">
            </div>
        </div>
        <div class="row">
            <div class="form-group">
                <label>Pendidikan</label>
                <select name="wali_pendidikan">
                    <option value="">-- Pilih --</option>
                    <option value="01) Tidak Sekolah" <?= selected_normal('01) Tidak Sekolah', getFieldValue($data_display, 'wali_pendidikan')) ?>>01) Tidak Sekolah</option>
                    <option value="02) Putus SD" <?= selected_normal('02) Putus SD', getFieldValue($data_display, 'wali_pendidikan')) ?>>02) Putus SD</option>
                    <option value="03) SD Sederajat" <?= selected_normal('03) SD Sederajat', getFieldValue($data_display, 'wali_pendidikan')) ?>>03) SD Sederajat</option>
                    <option value="04) SMP Sederajat" <?= selected_normal('04) SMP Sederajat', getFieldValue($data_display, 'wali_pendidikan')) ?>>04) SMP Sederajat</option>
                    <option value="05) SMA Sederajat" <?= selected_normal('05) SMA Sederajat', getFieldValue($data_display, 'wali_pendidikan')) ?>>05) SMA Sederajat</option>
                    <option value="06) D1" <?= selected_normal('06) D1', getFieldValue($data_display, 'wali_pendidikan')) ?>>06) D1</option>
                    <option value="07) D2" <?= selected_normal('07) D2', getFieldValue($data_display, 'wali_pendidikan')) ?>>07) D2</option>
                    <option value="08) D3" <?= selected_normal('08) D3', getFieldValue($data_display, 'wali_pendidikan')) ?>>08) D3</option>
                    <option value="09) D4/S1" <?= selected_normal('09) D4/S1', getFieldValue($data_display, 'wali_pendidikan')) ?>>09) D4/S1</option>
                    <option value="10) S2" <?= selected_normal('10) S2', getFieldValue($data_display, 'wali_pendidikan')) ?>>10) S2</option>
                    <option value="11) S3" <?= selected_normal('11) S3', getFieldValue($data_display, 'wali_pendidikan')) ?>>11) S3</option>
                </select>
            </div>
            <div class="form-group">
                <label>Pekerjaan</label>
                <select name="wali_pekerjaan">
                    <option value="">-- Pilih --</option>
                    <option value="01) Tidak bekerja" <?= selected_normal('01) Tidak bekerja', getFieldValue($data_display, 'wali_pekerjaan')) ?>>01) Tidak bekerja</option>
                    <option value="02) Nelayan" <?= selected_normal('02) Nelayan', getFieldValue($data_display, 'wali_pekerjaan')) ?>>02) Nelayan</option>
                    <option value="03) Petani" <?= selected_normal('03) Petani', getFieldValue($data_display, 'wali_pekerjaan')) ?>>03) Petani</option>
                    <option value="04) Peternak" <?= selected_normal('04) Peternak', getFieldValue($data_display, 'wali_pekerjaan')) ?>>04) Peternak</option>
                    <option value="05) PNS/TNI/Polri" <?= selected_normal('05) PNS/TNI/Polri', getFieldValue($data_display, 'wali_pekerjaan')) ?>>05) PNS/TNI/Polri</option>
                    <option value="06) Karyawan Swasta" <?= selected_normal('06) Karyawan Swasta', getFieldValue($data_display, 'wali_pekerjaan')) ?>>06) Karyawan Swasta</option>
                    <option value="07) Pedagang Kecil" <?= selected_normal('07) Pedagang Kecil', getFieldValue($data_display, 'wali_pekerjaan')) ?>>07) Pedagang Kecil</option>
                    <option value="08) Pedagang Besar" <?= selected_normal('08) Pedagang Besar', getFieldValue($data_display, 'wali_pekerjaan')) ?>>08) Pedagang Besar</option>
                    <option value="09) Wiraswasta" <?= selected_normal('09) Wiraswasta', getFieldValue($data_display, 'wali_pekerjaan')) ?>>09) Wiraswasta</option>
                    <option value="10) Wirausaha" <?= selected_normal('10) Wirausaha', getFieldValue($data_display, 'wali_pekerjaan')) ?>>10) Wirausaha</option>
                    <option value="11) Buruh" <?= selected_normal('11) Buruh', getFieldValue($data_display, 'wali_pekerjaan')) ?>>11) Buruh</option>
                    <option value="12) Pensiunan" <?= selected_normal('12) Pensiunan', getFieldValue($data_display, 'wali_pekerjaan')) ?>>12) Pensiunan</option>
                    <option value="99) Lainnya" <?= selected_normal('99) Lainnya', getFieldValue($data_display, 'wali_pekerjaan')) ?>>99) Lainnya</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label>Penghasilan Bulanan Wali</label>
            <select name="wali_penghasilan">
                <option value="">-- Pilih --</option>
                <option value="1) Kurang dari Rp 500.000" <?= selected_normal('1) Kurang dari Rp 500.000', getFieldValue($data_display, 'wali_penghasilan')) ?>>1) Kurang dari Rp 500.000</option>
                <option value="2) Rp 500.000 - Rp 999.999" <?= selected_normal('2) Rp 500.000 - Rp 999.999', getFieldValue($data_display, 'wali_penghasilan')) ?>>2) Rp 500.000 - Rp 999.999</option>
                <option value="3) Rp 1.000.000 - Rp 1.999.999" <?= selected_normal('3) Rp 1.000.000 - Rp 1.999.999', getFieldValue($data_display, 'wali_penghasilan')) ?>>3) Rp 1.000.000 - Rp 1.999.999</option>
                <option value="4) Rp 2.000.000 - Rp 4.999.999" <?= selected_normal('4) Rp 2.000.000 - Rp 4.999.999', getFieldValue($data_display, 'wali_penghasilan')) ?>>4) Rp 2.000.000 - Rp 4.999.999</option>
                <option value="5) Lebih dari Rp 5.000.000" <?= selected_normal('5) Lebih dari Rp 5.000.000', getFieldValue($data_display, 'wali_penghasilan')) ?>>5) Lebih dari Rp 5.000.000</option>
            </select>
        </div>

        <!-- KIP/KKS -->
        <div class="section-title">💳 KIP / KKS</div>
        <div class="row">
            <div class="form-group">
                <label>Apakah sebagai penerima KIP/KKS? <span class="required">*</span></label>
                <select name="kip_penerima" id="kip_penerima" required>
                    <option value="">-- Pilih --</option>
                    <option value="Ya" <?= selected_normal('Ya', getFieldValue($data_display, 'kip_penerima')) ?>>Ya</option>
                    <option value="Tidak" <?= selected_normal('Tidak', getFieldValue($data_display, 'kip_penerima')) ?>>Tidak</option>
                </select>
            </div>
            <div class="form-group" id="kip_no_group">
                <label>No. KIP/KKS <span class="required" id="kip_required" style="display:none;">*</span></label>
                <input type="text" name="kip_no" id="kip_no" placeholder="Nomor KIP/KKS" 
                       value="<?= htmlspecialchars(getFieldValue($data_display, 'kip_no')) ?>">
            </div>
        </div>

        <!-- DATA PERIODIK -->
        <div class="section-title">📊 Data Periodik</div>

        <div class="row">
            <div class="form-group">
                <label>a. Tinggi Badan <span class="required">*</span></label>
                <input type="text" name="tinggi_badan" placeholder="Contoh: 165" required 
                       value="<?= htmlspecialchars(getFieldValue($data_display, 'tinggi_badan')) ?>">
                <span style="display:block; font-size:11px; color:#888; margin-top:3px;">cm</span>
            </div>
            <div class="form-group">
                <label>Berat Badan <span class="required">*</span></label>
                <input type="text" name="berat_badan" placeholder="Contoh: 55" required 
                       value="<?= htmlspecialchars(getFieldValue($data_display, 'berat_badan')) ?>">
                <span style="display:block; font-size:11px; color:#888; margin-top:3px;">kg</span>
            </div>
        </div>

        <div class="row">
            <div class="form-group">
                <label>b. Jarak tempat tinggal ke sekolah <span class="required">*</span></label>
                <input type="text" name="jarak_sekolah" placeholder="Contoh: 2.5" required 
                       value="<?= htmlspecialchars(getFieldValue($data_display, 'jarak_sekolah')) ?>">
                <span style="display:block; font-size:11px; color:#888; margin-top:3px;">km</span>
            </div>
            <div class="form-group">
                <label>c. Waktu tempuh ke sekolah <span class="required">*</span></label>
                <div style="display:grid; grid-template-columns:1fr 1fr; gap:10px;">
                    <input type="text" name="waktu_tempuh_jam" placeholder="Jam" 
                           value="<?= htmlspecialchars(getFieldValue($data_display, 'waktu_tempuh_jam')) ?>">
                    <input type="text" name="waktu_tempuh_menit" placeholder="Menit" 
                           value="<?= htmlspecialchars(getFieldValue($data_display, 'waktu_tempuh_menit')) ?>">
                </div>
                <span style="display:block; font-size:11px; color:#888; margin-top:3px;">Jam : Menit</span>
            </div>
        </div>

        <div class="row">
            <div class="form-group">
                <label>d. Jumlah Saudara Kandung <span class="required">*</span></label>
                <input type="text" name="jumlah_saudara" placeholder="Contoh: 3" required 
                       value="<?= htmlspecialchars(getFieldValue($data_display, 'jumlah_saudara')) ?>">
                <span style="display:block; font-size:11px; color:#888; margin-top:3px;">Orang</span>
            </div>
            <div class="form-group">
                <label>Anak Ke- <span class="required">*</span></label>
                <input type="text" name="anak_ke" placeholder="Contoh: 1" required 
                       value="<?= htmlspecialchars(getFieldValue($data_display, 'anak_ke')) ?>">
                <span style="display:block; font-size:11px; color:#888; margin-top:3px;">Anak ke-berapa</span>
            </div>
        </div>

        <div class="btn-group-form">
            <button type="submit" class="btn-submit">✅ Simpan & Upload Berkas</button>
            <button type="submit" name="simpan_draft" value="1" class="btn-draft">💾 Simpan Draft</button>
        </div>
        <?php endif; ?>

    </form>
    <?php endif; ?>

</div>

<!-- ============================================
     LOADING OVERLAY UNTUK UPLOAD
     ============================================ -->
<div id="loadingOverlay">
    <div class="loader-box">
        <div class="spinner"></div>
        <div class="loader-icon">📤</div>
        <div class="loader-title">Mengupload Berkas...</div>
        <div class="loader-sub">Mohon tunggu, proses upload sedang berjalan</div>
        <div class="progress-container">
            <div class="progress-bar" id="progressBar"></div>
        </div>
        <div class="progress-text" id="progressText">0%</div>
        <div class="file-status" id="fileStatus">Mempersiapkan upload...</div>
    </div>
</div>

<!-- CAMERA OVERLAY -->
<div id="cameraContainerGlobal">
    <div class="camera-wrapper">
        <video id="cameraVideoGlobal" autoplay playsinline></video>
    </div>
    <div class="camera-controls">
        <button class="btn-capture-camera" id="btnCaptureCamera">📸 Ambil Foto</button>
        <button class="btn-switch-camera" id="btnSwitchCamera">🔄 Balik Kamera</button>
        <button class="btn-close-camera" id="btnCloseCamera">✕ Tutup</button>
    </div>
</div>

<!-- SCRIPT -->
<script>
    // ============================================
    // LOADING OVERLAY UNTUK UPLOAD
    // ============================================
    function showLoading() {
        const overlay = document.getElementById('loadingOverlay');
        const progressBar = document.getElementById('progressBar');
        const progressText = document.getElementById('progressText');
        const fileStatus = document.getElementById('fileStatus');
        
        overlay.classList.add('active');
        progressBar.style.width = '0%';
        progressText.textContent = '0%';
        fileStatus.textContent = 'Mempersiapkan upload...';
        
        let progress = 0;
        let interval = setInterval(() => {
            progress += Math.random() * 8 + 2;
            if (progress > 95) progress = 95;
            progressBar.style.width = progress + '%';
            progressText.textContent = Math.round(progress) + '%';
            
            if (progress < 20) {
                fileStatus.textContent = '📤 Mengupload file...';
            } else if (progress < 40) {
                fileStatus.textContent = '📦 Mengkompres file...';
            } else if (progress < 60) {
                fileStatus.textContent = '💾 Menyimpan ke server...';
            } else if (progress < 80) {
                fileStatus.textContent = '🔄 Memproses data...';
            } else {
                fileStatus.textContent = '✅ Hampir selesai...';
            }
        }, 600);
        
        window.uploadInterval = interval;
    }
    
    function hideLoading() {
        const overlay = document.getElementById('loadingOverlay');
        const progressBar = document.getElementById('progressBar');
        const progressText = document.getElementById('progressText');
        
        if (window.uploadInterval) {
            clearInterval(window.uploadInterval);
            window.uploadInterval = null;
        }
        
        progressBar.style.width = '100%';
        progressText.textContent = '100%';
        document.getElementById('fileStatus').textContent = '✅ Upload selesai!';
        
        setTimeout(() => {
            overlay.classList.remove('active');
        }, 800);
    }

    // ============================================
    // DATA WILAYAH
    // ============================================
    const dataWilayah = <?= json_encode($data_wilayah) ?>;

    document.addEventListener('DOMContentLoaded', function() {
        // KECAMATAN - DESA
        const selectKecamatan = document.getElementById('kecamatan');
        const selectDesa = document.getElementById('kelurahan');
        const loadingDesa = document.getElementById('loadingDesa');
        
        if (selectKecamatan && selectDesa) {
            function loadDesa(kecamatan, selectedDesa = null) {
                selectDesa.innerHTML = '<option value="">-- Pilih Desa --</option>';
                selectDesa.disabled = true;
                
                if (!kecamatan || kecamatan === '') {
                    selectDesa.innerHTML = '<option value="">-- Pilih Kecamatan Terlebih Dahulu --</option>';
                    selectDesa.disabled = true;
                    if (loadingDesa) loadingDesa.classList.remove('show');
                    return;
                }
                
                if (loadingDesa) loadingDesa.classList.add('show');
                
                setTimeout(function() {
                    const key = kecamatan.toUpperCase();
                    if (dataWilayah[key]) {
                        const desaList = dataWilayah[key].desa;
                        if (desaList.length > 0) {
                            selectDesa.innerHTML = '<option value="">-- Pilih Desa --</option>';
                            desaList.forEach(function(desa) {
                                const option = document.createElement('option');
                                option.value = desa;
                                option.textContent = desa;
                                if (selectedDesa && selectedDesa === desa) {
                                    option.selected = true;
                                }
                                selectDesa.appendChild(option);
                            });
                            selectDesa.disabled = false;
                        } else {
                            selectDesa.innerHTML = '<option value="">-- Tidak ada desa --</option>';
                            selectDesa.disabled = true;
                        }
                    } else {
                        selectDesa.innerHTML = '<option value="">-- Kecamatan tidak ditemukan --</option>';
                        selectDesa.disabled = true;
                    }
                    if (loadingDesa) loadingDesa.classList.remove('show');
                }, 300);
            }
            
            selectKecamatan.addEventListener('change', function() {
                loadDesa(this.value);
            });
            
            const initialKec = selectKecamatan.value;
            const initialDesa = '<?= getFieldValue($data_display, 'kelurahan') ?>';
            if (initialKec) {
                loadDesa(initialKec, initialDesa);
            }
        }

        // SEKOLAH - OPSI LAINNYA
        const selectSekolah = document.getElementById('asal_sekolah');
        const inputLain = document.getElementById('sekolahLainInput');
        const inputLainField = document.getElementById('asal_sekolah_lain');
        
        if (selectSekolah) {
            function toggleLainnya() {
                if (selectSekolah.value === 'Lainnya') {
                    inputLain.style.display = 'block';
                    inputLainField.setAttribute('required', 'required');
                } else {
                    inputLain.style.display = 'none';
                    inputLainField.removeAttribute('required');
                    if (selectSekolah.value !== '') {
                        inputLainField.value = '';
                    }
                }
            }
            
            selectSekolah.addEventListener('change', toggleLainnya);
            toggleLainnya();
        }

        // KIP VALIDASI
        const kipSelect = document.getElementById('kip_penerima');
        const kipNo = document.getElementById('kip_no');
        const kipRequired = document.getElementById('kip_required');
        
        if (kipSelect) {
            function toggleKipRequired() {
                if (kipSelect.value === 'Ya') {
                    kipRequired.style.display = 'inline';
                    kipNo.setAttribute('required', 'required');
                } else {
                    kipRequired.style.display = 'none';
                    kipNo.removeAttribute('required');
                }
            }
            
            kipSelect.addEventListener('change', toggleKipRequired);
            toggleKipRequired();
        }
        
        // ============================================
        // HIDE LOADING SAAT PAGE LOAD
        // ============================================
        hideLoading();
    });

    // ============================================
    // KAMERA UNTUK SEMUA BERKAS GAMBAR
    // ============================================
    (function() {
        let cameraStream = null;
        let isCameraOpen = false;
        let currentTarget = null;
        let currentPreview = null;
        let currentContent = null;
        let currentFilename = null;
        let facingMode = 'environment';

        const cameraContainer = document.getElementById('cameraContainerGlobal');
        const video = document.getElementById('cameraVideoGlobal');
        const btnCapture = document.getElementById('btnCaptureCamera');
        const btnSwitch = document.getElementById('btnSwitchCamera');
        const btnClose = document.getElementById('btnCloseCamera');

        async function openCamera(targetId, previewId, contentId, filenameId) {
            if (isCameraOpen) return;
            
            currentTarget = document.getElementById(targetId);
            currentPreview = document.getElementById(previewId);
            currentContent = document.getElementById(contentId);
            currentFilename = document.getElementById(filenameId);
            
            if (!currentTarget) {
                alert('Target file tidak ditemukan!');
                return;
            }
            
            const accept = currentTarget.getAttribute('accept') || '';
            if (!accept.includes('image') && !accept.includes('jpg') && !accept.includes('png')) {
                alert('⚠️ File ini hanya support PDF. Silakan upload file PDF dari galeri.');
                return;
            }
            
            try {
                if (cameraStream) {
                    cameraStream.getTracks().forEach(track => track.stop());
                }
                
                cameraStream = await navigator.mediaDevices.getUserMedia({
                    video: { 
                        facingMode: facingMode,
                        width: { ideal: 1280 },
                        height: { ideal: 720 }
                    },
                    audio: false
                });
                
                video.srcObject = cameraStream;
                cameraContainer.style.display = 'flex';
                isCameraOpen = true;
                
            } catch (err) {
                alert('❌ Gagal mengakses kamera: ' + err.message + '\n\nSilakan gunakan tombol "Pilih File" untuk upload dari galeri.');
                console.error('Camera error:', err);
            }
        }

        function closeCamera() {
            if (cameraStream) {
                cameraStream.getTracks().forEach(track => track.stop());
                cameraStream = null;
            }
            video.srcObject = null;
            cameraContainer.style.display = 'none';
            isCameraOpen = false;
        }

        function capturePhoto() {
            if (!cameraStream || !video.videoWidth) {
                alert('❌ Kamera belum siap. Silakan coba lagi.');
                return;
            }
            
            const canvas = document.createElement('canvas');
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
            const ctx = canvas.getContext('2d');
            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
            
            canvas.toBlob(function(blob) {
                if (!blob) {
                    alert('❌ Gagal mengambil foto. Silakan coba lagi.');
                    return;
                }
                
                const file = new File([blob], 'foto_' + Date.now() + '.jpg', { type: 'image/jpeg' });
                const dataTransfer = new DataTransfer();
                dataTransfer.items.add(file);
                
                if (currentTarget) {
                    currentTarget.files = dataTransfer.files;
                    
                    const event = new Event('change', { bubbles: true });
                    currentTarget.dispatchEvent(event);
                    
                    if (currentFilename) {
                        currentFilename.textContent = file.name + ' ✅';
                        currentFilename.style.color = '#2ecc71';
                        currentFilename.style.fontWeight = '600';
                    }
                    
                    const wrapper = currentTarget.closest('.file-input-wrapper');
                    if (wrapper) {
                        const icon = wrapper.querySelector('.icon');
                        if (icon) icon.textContent = '✅';
                    }
                }
                
                closeCamera();
                showToast('✅ Foto berhasil diambil! Klik "Upload & Selesai" untuk menyimpan.');
                
            }, 'image/jpeg', 0.9);
        }

        function showToast(message) {
            const existing = document.querySelector('.toast-notification');
            if (existing) existing.remove();
            
            const toast = document.createElement('div');
            toast.className = 'toast-notification';
            toast.textContent = message;
            document.body.appendChild(toast);
            
            setTimeout(() => {
                toast.style.opacity = '0';
                toast.style.transition = 'opacity 0.5s';
                setTimeout(() => toast.remove(), 500);
            }, 4000);
        }

        document.querySelectorAll('.btn-camera').forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.preventDefault();
                const targetId = this.getAttribute('data-target');
                const previewId = this.getAttribute('data-preview');
                const contentId = this.getAttribute('data-content');
                const filenameId = this.getAttribute('data-filename');
                
                if (targetId) {
                    openCamera(targetId, previewId, contentId, filenameId);
                }
            });
        });

        btnCapture.addEventListener('click', capturePhoto);
        btnClose.addEventListener('click', closeCamera);

        btnSwitch.addEventListener('click', function() {
            if (facingMode === 'environment') {
                facingMode = 'user';
                this.textContent = '🔄 Kamera Depan';
            } else {
                facingMode = 'environment';
                this.textContent = '🔄 Kamera Belakang';
            }
            
            if (isCameraOpen && currentTarget) {
                const targetId = currentTarget.id;
                const previewId = currentPreview ? currentPreview.id : null;
                const contentId = currentContent ? currentContent.id : null;
                const filenameId = currentFilename ? currentFilename.id : null;
                closeCamera();
                setTimeout(() => {
                    openCamera(targetId, previewId, contentId, filenameId);
                }, 300);
            }
        });

        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape' && isCameraOpen) {
                closeCamera();
            }
        });

        // ============================================
        // PREVIEW FILE SAAT DIPILIH
        // ============================================
        document.querySelectorAll('input[type="file"]').forEach(input => {
            if (input.dataset.listenerAdded) return;
            input.dataset.listenerAdded = 'true';
            
            input.addEventListener('change', function() {
                const key = this.getAttribute('data-key');
                const file = this.files[0];
                const preview = document.getElementById('preview_' + key);
                const content = document.getElementById('preview_content_' + key);
                const label = document.getElementById('filename_' + key);
                const removeBtn = preview ? preview.querySelector('.btn-remove') : null;
                
                if (file) {
                    preview.classList.add('has-file');
                    if (removeBtn) removeBtn.style.display = 'inline-block';
                    
                    let size = file.size;
                    let sizeText = '';
                    if (size < 1024) {
                        sizeText = size + ' B';
                    } else if (size < 1048576) {
                        sizeText = (size / 1024).toFixed(1) + ' KB';
                    } else {
                        sizeText = (size / 1048576).toFixed(1) + ' MB';
                    }
                    
                    const ext = file.name.split('.').pop().toLowerCase();
                    const isImage = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg', 'webp'].includes(ext);
                    
                    let html = '';
                    
                    if (isImage) {
                        const reader = new FileReader();
                        reader.onload = function(e) {
                            html = `<img src="${e.target.result}" alt="${file.name}">`;
                            html += `<div class="file-info">
                                <div class="name">${file.name}</div>
                                <div class="size">${sizeText}</div>
                            </div>`;
                            content.innerHTML = html;
                        };
                        reader.readAsDataURL(file);
                        return;
                    } else {
                        const iconMap = {
                            'pdf': '📄',
                            'doc': '📄',
                            'docx': '📄',
                            'xls': '📊',
                            'xlsx': '📊',
                            'ppt': '📽️',
                            'pptx': '📽️'
                        };
                        const icon = iconMap[ext] || '📁';
                        html = `<span style="font-size:36px;">${icon}</span>`;
                    }
                    
                    html += `<div class="file-info">
                        <div class="name">${file.name}</div>
                        <div class="size">${sizeText}</div>
                    </div>`;
                    
                    content.innerHTML = html;
                    
                    if (label) {
                        label.textContent = file.name + ' ✅ (baru)';
                        label.style.color = '#2ecc71';
                        label.style.fontWeight = '600';
                    }
                    
                    const wrapper = this.closest('.file-input-wrapper');
                    const icon = wrapper.querySelector('.icon');
                    if (icon) {
                        icon.textContent = '✅';
                    }
                }
            });
        });
    })();

    // ============================================
    // FUNGSI REMOVE FILE (GLOBAL)
    // ============================================
    function removeFile(key) {
        const input = document.querySelector(`input[type="file"][data-key="${key}"]`);
        const preview = document.getElementById('preview_' + key);
        const content = document.getElementById('preview_content_' + key);
        const label = document.getElementById('filename_' + key);
        
        if (input) {
            input.value = '';
        }
        if (preview) {
            preview.classList.remove('has-file');
        }
        if (content) {
            content.innerHTML = '';
        }
        if (label) {
            const info = {
                'ijazah': 'PDF/JPG/PNG, max 5MB',
                'kk': 'PDF/JPG/PNG, max 5MB',
                'akta': 'PDF/JPG/PNG, max 5MB',
                'kip_pkh': 'PDF/JPG/PNG, max 5MB',
                'pas_foto': 'JPG/PNG, max 5MB'
            };
            label.textContent = info[key] || 'File';
            label.style.color = '#888';
            label.style.fontWeight = '400';
        }
        
        const wrapper = input ? input.closest('.file-input-wrapper') : null;
        const icon = wrapper ? wrapper.querySelector('.icon') : null;
        if (icon) {
            icon.textContent = '📁';
        }
        
        if (preview) {
            const removeBtn = preview.querySelector('.btn-remove');
            if (removeBtn) removeBtn.style.display = 'inline-block';
        }
    }
    
    // ============================================
    // CEK SUBMIT UPLOAD UNTUK HIDE LOADING
    // ============================================
    document.addEventListener('DOMContentLoaded', function() {
        const formUpload = document.getElementById('formUpload');
        if (formUpload) {
            formUpload.addEventListener('submit', function(e) {
                // Loading sudah ditampilkan oleh onsubmit di form
            });
        }
        
        <?php if (!empty($upload_errors) || $success): ?>
        setTimeout(function() {
            hideLoading();
        }, 1000);
        <?php endif; ?>
    });
</script>
</body>
</html>