<?php
include 'includes/header.php';
include 'config/database.php';

// Query untuk mendapatkan tahun ajaran
$sql_tahun = "SELECT * FROM bind_tahunajaran WHERE aktif = 1";
$result_tahun = $conn->query($sql_tahun);

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    // Ambil data dari form
    $id_tahunajaran = $_POST['id_tahunajaran'];
    $nish = $_POST['nish'];
    $nis = $_POST['nis'];
    $nama_lengkap = $_POST['nama_lengkap'];
    $nama_panggilan = $_POST['nama_panggilan'];
    $jenis_kelamin = $_POST['jenis_kelamin'];
    $tempat_lahir = $_POST['tempat_lahir'];
    $tanggal_lahir = $_POST['tanggal_lahir'];
    $agama = $_POST['agama'];
    $kewarganegaraan = $_POST['kewarganegaraan'];
    $anak_ke = $_POST['anak_ke'];
    $jumlah_saudara_kandung = $_POST['jumlah_saudara_kandung'];
    $jumlah_saudara_tiri = $_POST['jumlah_saudara_tiri'];
    $jumlah_saudara_angkat = $_POST['jumlah_saudara_angkat'];
    $status_anak = $_POST['status_anak'];
    $bahasa_sehari_hari = $_POST['bahasa_sehari_hari'];
    $alamat = $_POST['alamat'];
    $no_hp = $_POST['no_hp'];
    $tinggal_dengan = $_POST['tinggal_dengan'];
    $jarak_ke_sekolah = $_POST['jarak_ke_sekolah'];
    $golongan_darah = $_POST['golongan_darah'];
    $riwayat_penyakit = $_POST['riwayat_penyakit'];
    $kelainan_jasmani = $_POST['kelainan_jasmani'];
    $tinggi_cm = $_POST['tinggi_cm'];
    $berat_kg = $_POST['berat_kg'];
    $tanggal_diterima = $_POST['tanggal_diterima'];
    
    // Upload foto
    $foto_masuk = '';
    if ($_FILES['foto_masuk']['name']) {
        $target_dir = "../uploads/foto-siswa/";
        if (!is_dir($target_dir)) {
            mkdir($target_dir, 0777, true);
        }
        
        $file_extension = pathinfo($_FILES['foto_masuk']['name'], PATHINFO_EXTENSION);
        $foto_masuk = "siswa_" . time() . "." . $file_extension;
        $target_file = $target_dir . $foto_masuk;
        
        move_uploaded_file($_FILES['foto_masuk']['tmp_name'], $target_file);
    }
    
    // Query insert
    $sql = "INSERT INTO bind_siswa (id_tahunajaran, nish, nis, nama_lengkap, nama_panggilan, jenis_kelamin, 
            tempat_lahir, tanggal_lahir, agama, kewarganegaraan, anak_ke, jumlah_saudara_kandung, 
            jumlah_saudara_tiri, jumlah_saudara_angkat, status_anak, bahasa_sehari_hari, alamat, no_hp, 
            tinggal_dengan, jarak_ke_sekolah, golongan_darah, riwayat_penyakit, kelainan_jasmani, 
            tinggi_cm, berat_kg, foto_masuk, tanggal_diterima) 
            VALUES ('$id_tahunajaran', '$nish', '$nis', '$nama_lengkap', '$nama_panggilan', '$jenis_kelamin', 
            '$tempat_lahir', '$tanggal_lahir', '$agama', '$kewarganegaraan', '$anak_ke', '$jumlah_saudara_kandung', 
            '$jumlah_saudara_tiri', '$jumlah_saudara_angkat', '$status_anak', '$bahasa_sehari_hari', '$alamat', '$no_hp', 
            '$tinggal_dengan', '$jarak_ke_sekolah', '$golongan_darah', '$riwayat_penyakit', '$kelainan_jasmani', 
            '$tinggi_cm', '$berat_kg', '$foto_masuk', '$tanggal_diterima')";
    
    if ($conn->query($sql)) {
        $last_id = $conn->insert_id;
        
        // Jika berhasil, simpan juga data orang tua jika ada
        if (isset($_POST['nama_orangtua'])) {
            foreach ($_POST['nama_orangtua'] as $index => $nama) {
                if (!empty($nama)) {
                    $hubungan = $_POST['hubungan'][$index];
                    $tempat_lahir_ortu = $_POST['tempat_lahir_ortu'][$index];
                    $tanggal_lahir_ortu = $_POST['tanggal_lahir_ortu'][$index];
                    $agama_ortu = $_POST['agama_ortu'][$index];
                    $kewarganegaraan_ortu = $_POST['kewarganegaraan_ortu'][$index];
                    $pendidikan_terakhir = $_POST['pendidikan_terakhir'][$index];
                    $pekerjaan = $_POST['pekerjaan'][$index];
                    $penghasilan_bulanan = $_POST['penghasilan_bulanan'][$index];
                    $alamat_ortu = $_POST['alamat_ortu'][$index];
                    $no_hp_ortu = $_POST['no_hp_ortu'][$index];
                    $status_hidup = $_POST['status_hidup'][$index];
                    
                    $sql_ortu = "INSERT INTO bind_orang_tua (id_siswa, hubungan, nama, tempat_lahir, tanggal_lahir, 
                                agama, kewarganegaraan, pendidikan_terakhir, pekerjaan, penghasilan_bulanan, 
                                alamat, no_hp, status_hidup) 
                                VALUES ('$last_id', '$hubungan', '$nama', '$tempat_lahir_ortu', '$tanggal_lahir_ortu', 
                                '$agama_ortu', '$kewarganegaraan_ortu', '$pendidikan_terakhir', '$pekerjaan', 
                                '$penghasilan_bulanan', '$alamat_ortu', '$no_hp_ortu', '$status_hidup')";
                    $conn->query($sql_ortu);
                }
            }
        }
        
        echo "<script>
            Swal.fire({
                icon: 'success',
                title: 'Berhasil',
                text: 'Data siswa berhasil ditambahkan'
            }).then(() => {
                window.location.href = 'index.php';
            });
        </script>";
    } else {
        echo "<script>
            Swal.fire({
                icon: 'error',
                title: 'Gagal',
                text: 'Terjadi kesalahan: " . $conn->error . "'
            });
        </script>";
    }
}
?>

<h2 class="mb-4">Tambah Data Siswa</h2>

<div class="card">
    <div class="card-header">
        <h5 class="mb-0">Form Input Data Siswa</h5>
        <p class="text-muted mb-0">Isi data siswa sesuai dengan tab yang tersedia</p>
    </div>
    <div class="card-body">
        <form method="POST" action="" enctype="multipart/form-data" id="formSiswa">
            <!-- Tab Navigation -->
            <ul class="nav nav-tabs mb-4" id="siswaTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="data-pribadi-tab" data-bs-toggle="tab" data-bs-target="#data-pribadi" type="button" role="tab">Data Pribadi</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="data-orangtua-tab" data-bs-toggle="tab" data-bs-target="#data-orangtua" type="button" role="tab">Data Orang Tua</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="kesehatan-tab" data-bs-toggle="tab" data-bs-target="#kesehatan" type="button" role="tab">Kesehatan</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="pendidikan-tab" data-bs-toggle="tab" data-bs-target="#pendidikan" type="button" role="tab">Pendidikan</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="prestasi-tab" data-bs-toggle="tab" data-bs-target="#prestasi" type="button" role="tab">Prestasi</button>
                </li>
            </ul>
            
            <!-- Tab Content -->
            <div class="tab-content" id="siswaTabsContent">
                <!-- Tab 1: Data Pribadi -->
                <div class="tab-pane fade show active" id="data-pribadi" role="tabpanel">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="id_tahunajaran" class="form-label">Tahun Ajaran <span class="text-danger">*</span></label>
                                <select class="form-select" id="id_tahunajaran" name="id_tahunajaran" required>
                                    <option value="">Pilih Tahun Ajaran</option>
                                    <?php while($tahun = $result_tahun->fetch_assoc()): ?>
                                        <option value="<?php echo $tahun['id_tahunajaran']; ?>"><?php echo $tahun['tahun_ajaran']; ?></option>
                                    <?php endwhile; ?>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="nish" class="form-label">NISH <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="nish" name="nish" required>
                            </div>
                            <div class="mb-3">
                                <label for="nis" class="form-label">NIS <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="nis" name="nis" required>
                            </div>
                            <div class="mb-3">
                                <label for="nama_lengkap" class="form-label">Nama Lengkap <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="nama_lengkap" name="nama_lengkap" required>
                            </div>
                            <div class="mb-3">
                                <label for="nama_panggilan" class="form-label">Nama Panggilan</label>
                                <input type="text" class="form-control" id="nama_panggilan" name="nama_panggilan">
                            </div>
                            <div class="mb-3">
                                <label for="jenis_kelamin" class="form-label">Jenis Kelamin <span class="text-danger">*</span></label>
                                <select class="form-select" id="jenis_kelamin" name="jenis_kelamin" required>
                                    <option value="">Pilih Jenis Kelamin</option>
                                    <option value="L">Laki-laki</option>
                                    <option value="P">Perempuan</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="tempat_lahir" class="form-label">Tempat Lahir</label>
                                <input type="text" class="form-control" id="tempat_lahir" name="tempat_lahir">
                            </div>
                            <div class="mb-3">
                                <label for="tanggal_lahir" class="form-label">Tanggal Lahir</label>
                                <input type="date" class="form-control" id="tanggal_lahir" name="tanggal_lahir">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="agama" class="form-label">Agama</label>
                                <input type="text" class="form-control" id="agama" name="agama">
                            </div>
                            <div class="mb-3">
                                <label for="kewarganegaraan" class="form-label">Kewarganegaraan</label>
                                <input type="text" class="form-control" id="kewarganegaraan" name="kewarganegaraan" value="Indonesia">
                            </div>
                            <div class="mb-3">
                                <label for="anak_ke" class="form-label">Anak Ke</label>
                                <input type="number" class="form-control" id="anak_ke" name="anak_ke" min="1">
                            </div>
                            <div class="mb-3">
                                <label for="status_anak" class="form-label">Status Anak</label>
                                <select class="form-select" id="status_anak" name="status_anak">
                                    <option value="">Pilih Status</option>
                                    <option value="Kandung">Kandung</option>
                                    <option value="Tiri">Tiri</option>
                                    <option value="Angkat">Angkat</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="jumlah_saudara_kandung" class="form-label">Jumlah Saudara Kandung</label>
                                <input type="number" class="form-control" id="jumlah_saudara_kandung" name="jumlah_saudara_kandung" min="0">
                            </div>
                            <div class="mb-3">
                                <label for="jumlah_saudara_tiri" class="form-label">Jumlah Saudara Tiri</label>
                                <input type="number" class="form-control" id="jumlah_saudara_tiri" name="jumlah_saudara_tiri" min="0">
                            </div>
                            <div class="mb-3">
                                <label for="jumlah_saudara_angkat" class="form-label">Jumlah Saudara Angkat</label>
                                <input type="number" class="form-control" id="jumlah_saudara_angkat" name="jumlah_saudara_angkat" min="0">
                            </div>
                            <div class="mb-3">
                                <label for="bahasa_sehari_hari" class="form-label">Bahasa Sehari-hari</label>
                                <input type="text" class="form-control" id="bahasa_sehari_hari" name="bahasa_sehari_hari" value="Indonesia">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="alamat" class="form-label">Alamat</label>
                                <textarea class="form-control" id="alamat" name="alamat" rows="3"></textarea>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="no_hp" class="form-label">No. HP</label>
                                <input type="text" class="form-control" id="no_hp" name="no_hp">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="tinggal_dengan" class="form-label">Tinggal Dengan</label>
                                <select class="form-select" id="tinggal_dengan" name="tinggal_dengan">
                                    <option value="">Pilih</option>
                                    <option value="Orang Tua">Orang Tua</option>
                                    <option value="Saudara">Saudara</option>
                                    <option value="Asrama">Asrama</option>
                                    <option value="Kos">Kos</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="jarak_ke_sekolah" class="form-label">Jarak ke Sekolah</label>
                                <input type="text" class="form-control" id="jarak_ke_sekolah" name="jarak_ke_sekolah" placeholder="Contoh: 5 km">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="foto_masuk" class="form-label">Foto</label>
                                <input type="file" class="form-control" id="foto_masuk" name="foto_masuk" accept="image/*">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="tanggal_diterima" class="form-label">Tanggal Diterima <span class="text-danger">*</span></label>
                                <input type="date" class="form-control" id="tanggal_diterima" name="tanggal_diterima" required>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex justify-content-between mt-4">
                        <div></div>
                        <button type="button" class="btn btn-primary next-tab" data-next-tab="data-orangtua-tab">
                            Selanjutnya <i class="ms-1 bi bi-arrow-right"></i>
                        </button>
                    </div>
                </div>
                
                <!-- Tab 2: Data Orang Tua -->
                <div class="tab-pane fade" id="data-orangtua" role="tabpanel">
                    <div id="orangtua-container">
                        <div class="orangtua-item card mb-3">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h6 class="mb-0">Data Orang Tua/Wali</h6>
                                <button type="button" class="btn btn-sm btn-danger remove-orangtua" style="display: none;">
                                    <i class="bi bi-trash"></i> Hapus
                                </button>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label">Hubungan <span class="text-danger">*</span></label>
                                            <select class="form-select" name="hubungan[]" required>
                                                <option value="">Pilih Hubungan</option>
                                                <option value="Ayah">Ayah</option>
                                                <option value="Ibu">Ibu</option>
                                                <option value="Wali">Wali</option>
                                            </select>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">Nama Lengkap <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" name="nama_orangtua[]" required>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">Tempat Lahir</label>
                                            <input type="text" class="form-control" name="tempat_lahir_ortu[]">
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">Tanggal Lahir</label>
                                            <input type="date" class="form-control" name="tanggal_lahir_ortu[]">
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">Agama</label>
                                            <input type="text" class="form-control" name="agama_ortu[]">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label">Kewarganegaraan</label>
                                            <input type="text" class="form-control" name="kewarganegaraan_ortu[]" value="Indonesia">
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">Pendidikan Terakhir</label>
                                            <input type="text" class="form-control" name="pendidikan_terakhir[]" placeholder="Contoh: S1, SMA, dll">
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">Pekerjaan</label>
                                            <input type="text" class="form-control" name="pekerjaan[]">
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">Penghasilan Bulanan (Rp)</label>
                                            <input type="number" class="form-control" name="penghasilan_bulanan[]" min="0">
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">Status</label>
                                            <select class="form-select" name="status_hidup[]">
                                                <option value="Hidup">Hidup</option>
                                                <option value="Meninggal">Meninggal</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label">Alamat</label>
                                            <textarea class="form-control" name="alamat_ortu[]" rows="2"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label">No. HP</label>
                                            <input type="text" class="form-control" name="no_hp_ortu[]">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <button type="button" class="btn btn-outline-primary mb-4" id="tambah-orangtua">
                        <i class="bi bi-plus-circle"></i> Tambah Data Orang Tua/Wali
                    </button>
                    
                    <div class="d-flex justify-content-between mt-4">
                        <button type="button" class="btn btn-secondary prev-tab" data-prev-tab="data-pribadi-tab">
                            <i class="me-1 bi bi-arrow-left"></i> Sebelumnya
                        </button>
                        <button type="button" class="btn btn-primary next-tab" data-next-tab="kesehatan-tab">
                            Selanjutnya <i class="ms-1 bi bi-arrow-right"></i>
                        </button>
                    </div>
                </div>
                
                <!-- Tab 3: Kesehatan -->
                <div class="tab-pane fade" id="kesehatan" role="tabpanel">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="golongan_darah" class="form-label">Golongan Darah</label>
                                <select class="form-select" id="golongan_darah" name="golongan_darah">
                                    <option value="">Pilih Golongan Darah</option>
                                    <option value="A">A</option>
                                    <option value="B">B</option>
                                    <option value="AB">AB</option>
                                    <option value="O">O</option>
                                    <option value="A+">A+</option>
                                    <option value="A-">A-</option>
                                    <option value="B+">B+</option>
                                    <option value="B-">B-</option>
                                    <option value="AB+">AB+</option>
                                    <option value="AB-">AB-</option>
                                    <option value="O+">O+</option>
                                    <option value="O-">O-</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="tinggi_cm" class="form-label">Tinggi Badan (cm)</label>
                                <input type="number" class="form-control" id="tinggi_cm" name="tinggi_cm" min="0">
                            </div>
                            <div class="mb-3">
                                <label for="berat_kg" class="form-label">Berat Badan (kg)</label>
                                <input type="number" class="form-control" id="berat_kg" name="berat_kg" min="0" step="0.1">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="riwayat_penyakit" class="form-label">Riwayat Penyakit</label>
                                <textarea class="form-control" id="riwayat_penyakit" name="riwayat_penyakit" rows="3" placeholder="Jenis penyakit yang pernah diderita"></textarea>
                            </div>
                            <div class="mb-3">
                                <label for="kelainan_jasmani" class="form-label">Kelainan Jasmani/Cacat Tubuh</label>
                                <textarea class="form-control" id="kelainan_jasmani" name="kelainan_jasmani" rows="3" placeholder="Jenis kelainan atau cacat tubuh"></textarea>
                            </div>
                        </div>
                    </div>
                    
                    <div class="d-flex justify-content-between mt-4">
                        <button type="button" class="btn btn-secondary prev-tab" data-prev-tab="data-orangtua-tab">
                            <i class="me-1 bi bi-arrow-left"></i> Sebelumnya
                        </button>
                        <button type="button" class="btn btn-primary next-tab" data-next-tab="pendidikan-tab">
                            Selanjutnya <i class="ms-1 bi bi-arrow-right"></i>
                        </button>
                    </div>
                </div>
                
                <!-- Tab 4: Pendidikan -->
                <div class="tab-pane fade" id="pendidikan" role="tabpanel">
                    <div class="alert alert-info">
                        <i class="bi bi-info-circle"></i> Data pendidikan dapat ditambahkan setelah data siswa tersimpan.
                    </div>
                    
                    <div class="d-flex justify-content-between mt-4">
                        <button type="button" class="btn btn-secondary prev-tab" data-prev-tab="kesehatan-tab">
                            <i class="me-1 bi bi-arrow-left"></i> Sebelumnya
                        </button>
                        <button type="button" class="btn btn-primary next-tab" data-next-tab="prestasi-tab">
                            Selanjutnya <i class="ms-1 bi bi-arrow-right"></i>
                        </button>
                    </div>
                </div>
                
                <!-- Tab 5: Prestasi -->
                <div class="tab-pane fade" id="prestasi" role="tabpanel">
                    <div class="alert alert-info">
                        <i class="bi bi-info-circle"></i> Data prestasi dan beasiswa dapat ditambahkan setelah data siswa tersimpan.
                    </div>
                    
                    <div class="d-flex justify-content-between mt-4">
                        <button type="button" class="btn btn-secondary prev-tab" data-prev-tab="pendidikan-tab">
                            <i class="me-1 bi bi-arrow-left"></i> Sebelumnya
                        </button>
                        <button type="submit" class="btn btn-success">
                            <i class="me-1 bi bi-check-circle"></i> Simpan Data
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<?php include 'includes/footer.php'; ?>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Navigasi tab
    const nextButtons = document.querySelectorAll('.next-tab');
    const prevButtons = document.querySelectorAll('.prev-tab');
    
    nextButtons.forEach(button => {
        button.addEventListener('click', function() {
            const nextTabId = this.getAttribute('data-next-tab');
            const nextTab = document.querySelector('#' + nextTabId);
            const tab = new bootstrap.Tab(nextTab);
            tab.show();
        });
    });
    
    prevButtons.forEach(button => {
        button.addEventListener('click', function() {
            const prevTabId = this.getAttribute('data-prev-tab');
            const prevTab = document.querySelector('#' + prevTabId);
            const tab = new bootstrap.Tab(prevTab);
            tab.show();
        });
    });
    
    // Tambah data orang tua
    const tambahOrangtuaBtn = document.getElementById('tambah-orangtua');
    const orangtuaContainer = document.getElementById('orangtua-container');
    
    tambahOrangtuaBtn.addEventListener('click', function() {
        const newItem = document.querySelector('.orangtua-item').cloneNode(true);
        
        // Clear values
        const inputs = newItem.querySelectorAll('input, select, textarea');
        inputs.forEach(input => {
            if (input.type !== 'button') {
                input.value = '';
            }
        });
        
        // Show remove button
        newItem.querySelector('.remove-orangtua').style.display = 'block';
        
        // Add remove functionality
        newItem.querySelector('.remove-orangtua').addEventListener('click', function() {
            this.closest('.orangtua-item').remove();
        });
        
        orangtuaContainer.appendChild(newItem);
    });
    
    // Add remove functionality to initial remove button if it exists
    const initialRemoveBtn = document.querySelector('.remove-orangtua');
    if (initialRemoveBtn) {
        initialRemoveBtn.addEventListener('click', function() {
            this.closest('.orangtua-item').remove();
        });
    }
    
    // Form validation before submission
    const form = document.getElementById('formSiswa');
    form.addEventListener('submit', function(e) {
        // Basic validation - you can add more specific validation here
        const requiredFields = form.querySelectorAll('[required]');
        let valid = true;
        
        requiredFields.forEach(field => {
            if (!field.value.trim()) {
                valid = false;
                field.classList.add('is-invalid');
            } else {
                field.classList.remove('is-invalid');
            }
        });
        
        if (!valid) {
            e.preventDefault();
            Swal.fire({
                icon: 'error',
                title: 'Oops...',
                text: 'Harap isi semua field yang wajib diisi!'
            });
            
            // Switch to the first tab with errors
            const firstInvalid = form.querySelector('.is-invalid');
            if (firstInvalid) {
                const tabPane = firstInvalid.closest('.tab-pane');
                if (tabPane) {
                    const tabId = tabPane.id + '-tab';
                    const tab = document.querySelector('#' + tabId);
                    if (tab) {
                        const bsTab = new bootstrap.Tab(tab);
                        bsTab.show();
                    }
                }
            }
        }
    });
});
</script>

<style>
.nav-tabs .nav-link {
    font-weight: 500;
    color: #6c757d;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 0.75rem 1rem;
}

.nav-tabs .nav-link.active {
    color: #0052d4;
    background: none;
    border-color: #0052d4;
}

.nav-tabs .nav-link:hover {
    border-color: #dee2e6;
}

.tab-content {
    padding: 1.5rem 0;
}

.orangtua-item {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
}

.orangtua-item .card-header {
    background-color: #f8f9fa;
}

.form-label {
    font-weight: 500;
}

.text-danger {
    color: #dc3545 !important;
}

.is-invalid {
    border-color: #dc3545 !important;
}
</style>