<?php
require_once '../includes/header.php';
require_once '../includes/navbar.php';

// Ambil data tahun ajaran yang aktif untuk dropdown
$query_tahun = "SELECT * FROM bind_tahunajaran WHERE aktif = TRUE ORDER BY tahun_ajaran DESC";
$result_tahun = mysqli_query($conn, $query_tahun);
$tahun_aktif = mysqli_fetch_assoc($result_tahun);

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    // Ambil data dari form
    $id_tahunajaran = $_POST['id_tahunajaran'];
    $nisn = $_POST['nisn'];
    $nis = $_POST['nis'];
    $nama_lengkap = $_POST['nama_lengkap'];
    // ... [data lainnya tetap sama]
    
    // 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 ke bind_siswa (TANPA id_tahunajaran)
    $sql = "INSERT INTO bind_siswa (nisn, 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 ('$nisn', '$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;
        
        // Insert ke bind_datasiswa untuk relasi tahun ajaran
        $sql_datasiswa = "INSERT INTO bind_datasiswa (id_tahunajaran, id_siswa, status) 
                          VALUES ('$id_tahunajaran', '$last_id', 'Aktif')";
        $conn->query($sql_datasiswa);
        
        // 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>";
    }
}
?>


<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2><i class="fas fa-user-plus me-2"></i>Tambah Data Siswa</h2>
        <a href="index.php" class="btn btn-secondary">
            <i class="fas fa-arrow-left me-1"></i> Kembali
        </a>
    </div>
    
    <div class="card border-0 shadow-lg">
        <div class="card-header bg-primary text-white py-3">
            <h5 class="card-title mb-0"><i class="fas fa-info-circle me-2"></i>Formulir Data Siswa</h5>
        </div>
        <div class="card-body p-4">
            <form method="POST" enctype="multipart/form-data" id="formTambahSiswa">
                <!-- Progress Bar -->
                <div class="row mb-4">
                    <div class="col-12">
                        <div class="progress-steps">
                            <div class="step active" data-step="1">
                                <span class="step-number">1</span>
                                <span class="step-text">Data Pribadi</span>
                            </div>
                            <div class="step" data-step="2">
                                <span class="step-number">2</span>
                                <span class="step-text">Data Keluarga</span>
                            </div>
                            <div class="step" data-step="3">
                                <span class="step-number">3</span>
                                <span class="step-text">Data Lainnya</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Step 1: Data Pribadi -->
                <div class="step-content" id="step1">
                    <h4 class="text-primary mb-4"><i class="fas fa-user me-2"></i>Data Pribadi</h4>
                    
                    <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>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fas fa-calendar-alt"></i></span>
                                    <select class="form-select" id="id_tahunajaran" name="id_tahunajaran" required disabled>
                                        <option value="<?php echo $tahun_aktif['id_tahunajaran']; ?>" selected>
                                            <?php echo $tahun_aktif['tahun_ajaran']; ?> (Aktif)
                                        </option>
                                    </select>
                                </div>
                                <input type="hidden" name="id_tahunajaran" value="<?php echo $tahun_aktif['id_tahunajaran']; ?>">
                                <small class="form-text text-muted">Tahun ajaran aktif tidak dapat diubah</small>
                            </div>
                            
                            <div class="mb-3">
                                <label for="nisn" class="form-label">NISN <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fas fa-id-card"></i></span>
                                    <input type="text" class="form-control" id="nisn" name="nisn" required placeholder="Masukkan NISN">
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <label for="nis" class="form-label">NIS <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fas fa-id-card-alt"></i></span>
                                    <input type="text" class="form-control" id="nis" name="nis" required placeholder="Masukkan NIS">
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <label for="nama_lengkap" class="form-label">Nama Lengkap <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fas fa-user"></i></span>
                                    <input type="text" class="form-control" id="nama_lengkap" name="nama_lengkap" required placeholder="Masukkan nama lengkap">
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <label for="nama_panggilan" class="form-label">Nama Panggilan</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fas fa-signature"></i></span>
                                    <input type="text" class="form-control" id="nama_panggilan" name="nama_panggilan" placeholder="Masukkan nama panggilan">
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <label for="jenis_kelamin" class="form-label">Jenis Kelamin <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fas fa-venus-mars"></i></span>
                                    <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>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="tempat_lahir" class="form-label">Tempat Lahir</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fas fa-map-marker-alt"></i></span>
                                    <input type="text" class="form-control" id="tempat_lahir" name="tempat_lahir" required placeholder="Masukkan tempat lahir">
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <label for="tanggal_lahir" class="form-label">Tanggal Lahir</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fas fa-calendar"></i></span>
                                    <input type="date" class="form-control" id="tanggal_lahir" name="tanggal_lahir" required>
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <label for="agama" class="form-label">Agama</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fas fa-pray"></i></span>
                                    <select class="form-select" id="agama" name="agama" required>
                                        <option value="">Pilih Agama</option>
                                        <option value="Islam">Islam</option>
                                        <option value="Kristen">Kristen</option>
                                        <option value="Katolik">Katolik</option>
                                        <option value="Hindu">Hindu</option>
                                        <option value="Buddha">Buddha</option>
                                        <option value="Konghucu">Konghucu</option>
                                    </select>
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <label for="kewarganegaraan" class="form-label">Kewarganegaraan</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fas fa-globe"></i></span>
                                    <input type="text" class="form-control" id="kewarganegaraan" name="kewarganegaraan" value="Indonesia" required>
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <label for="no_hp" class="form-label">No. HP</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fas fa-phone"></i></span>
                                    <input type="text" class="form-control" id="no_hp" name="no_hp" required placeholder="Masukkan nomor handphone">
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <label for="alamat" class="form-label">Alamat</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fas fa-home"></i></span>
                                    <textarea class="form-control" id="alamat" name="alamat" rows="3" required placeholder="Masukkan alamat lengkap"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="d-flex justify-content-between mt-4">
                        <div></div> <!-- Spacer -->
                        <button type="button" class="btn btn-primary next-step" data-next="2">
                            Selanjutnya <i class="fas fa-arrow-right ms-1"></i>
                        </button>
                    </div>
                </div>
                
                <!-- Step 2: Data Keluarga -->
                <div class="step-content d-none" id="step2">
                    <h4 class="text-primary mb-4"><i class="fas fa-users me-2"></i>Data Keluarga</h4>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="anak_ke" class="form-label">Anak Ke-</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fas fa-child"></i></span>
                                    <input type="number" class="form-control" id="anak_ke" name="anak_ke" min="1" required placeholder="Contoh: 2">
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <label for="jumlah_saudara_kandung" class="form-label">Jumlah Saudara Kandung</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fas fa-user-friends"></i></span>
                                    <input type="number" class="form-control" id="jumlah_saudara_kandung" name="jumlah_saudara_kandung" min="0" required placeholder="Jumlah saudara kandung">
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <label for="jumlah_saudara_tiri" class="form-label">Jumlah Saudara Tiri</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fas fa-user-friends"></i></span>
                                    <input type="number" class="form-control" id="jumlah_saudara_tiri" name="jumlah_saudara_tiri" min="0" required placeholder="Jumlah saudara tiri">
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <label for="jumlah_saudara_angkat" class="form-label">Jumlah Saudara Angkat</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fas fa-user-friends"></i></span>
                                    <input type="number" class="form-control" id="jumlah_saudara_angkat" name="jumlah_saudara_angkat" min="0" required placeholder="Jumlah saudara angkat">
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="status_anak" class="form-label">Status Anak</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fas fa-heart"></i></span>
                                    <select class="form-select" id="status_anak" name="status_anak" required>
                                        <option value="">Pilih Status</option>
                                        <option value="Kandung">Kandung</option>
                                        <option value="Tiri">Tiri</option>
                                        <option value="Angkat">Angkat</option>
                                    </select>
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <label for="bahasa_sehari_hari" class="form-label">Bahasa Sehari-hari</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fas fa-language"></i></span>
                                    <input type="text" class="form-control" id="bahasa_sehari_hari" name="bahasa_sehari_hari" value="Indonesia" required placeholder="Bahasa yang digunakan sehari-hari">
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <label for="tinggal_dengan" class="form-label">Tinggal Dengan</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fas fa-house-user"></i></span>
                                    <select class="form-select" id="tinggal_dengan" name="tinggal_dengan" required>
                                        <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="mb-3">
                                <label for="jarak_ke_sekolah" class="form-label">Jarak ke Sekolah</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fas fa-road"></i></span>
                                    <input type="text" class="form-control" id="jarak_ke_sekolah" name="jarak_ke_sekolah" required placeholder="Contoh: 5 km">
                                    <span class="input-group-text">km</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="d-flex justify-content-between mt-4">
                        <button type="button" class="btn btn-secondary prev-step" data-prev="1">
                            <i class="fas fa-arrow-left me-1"></i> Sebelumnya
                        </button>
                        <button type="button" class="btn btn-primary next-step" data-next="3">
                            Selanjutnya <i class="fas fa-arrow-right ms-1"></i>
                        </button>
                    </div>
                </div>
                
                <!-- Step 3: Data Lainnya -->
                <div class="step-content d-none" id="step3">
                    <h4 class="text-primary mb-4"><i class="fas fa-info-circle me-2"></i>Data Lainnya</h4>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="golongan_darah" class="form-label">Golongan Darah</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fas fa-tint"></i></span>
                                    <select class="form-select" id="golongan_darah" name="golongan_darah" required>
                                        <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>
                                    </select>
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <label for="tinggi_cm" class="form-label">Tinggi Badan</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fas fa-text-height"></i></span>
                                    <input type="number" class="form-control" id="tinggi_cm" name="tinggi_cm" min="0" required placeholder="Tinggi dalam cm">
                                    <span class="input-group-text">cm</span>
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <label for="berat_kg" class="form-label">Berat Badan</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fas fa-weight"></i></span>
                                    <input type="number" class="form-control" id="berat_kg" name="berat_kg" min="0" step="0.1" required placeholder="Berat dalam kg">
                                    <span class="input-group-text">kg</span>
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <label for="riwayat_penyakit" class="form-label">Riwayat Penyakit</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fas fa-file-medical"></i></span>
                                    <textarea class="form-control" id="riwayat_penyakit" name="riwayat_penyakit" rows="3" required placeholder="Riwayat penyakit yang pernah diderita"></textarea>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="kelainan_jasmani" class="form-label">Kelainan Jasmani</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fas fa-wheelchair"></i></span>
                                    <textarea class="form-control" id="kelainan_jasmani" name="kelainan_jasmani" rows="3" required placeholder="Kelainan jasmani yang dimiliki"></textarea>
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <label for="foto_masuk" class="form-label">Foto Siswa</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fas fa-camera"></i></span>
                                    <input type="file" class="form-control" id="foto_masuk" name="foto_masuk" accept="image/*" required>
                                </div>
                                <small class="form-text text-muted">Format: JPG, PNG, GIF. Maksimal 2MB</small>
                                <div class="mt-2" id="preview-container" style="display: none;">
                                    <img id="preview-image" src="#" alt="Preview" class="img-thumbnail mt-2" style="max-height: 150px;">
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <label for="tanggal_diterima" class="form-label">Tanggal Diterima</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fas fa-calendar-check"></i></span>
                                    <input type="date" class="form-control" id="tanggal_diterima" name="tanggal_diterima" value="<?php echo date('Y-m-d'); ?>" required>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="d-flex justify-content-between mt-4">
                        <button type="button" class="btn btn-secondary prev-step" data-prev="2">
                            <i class="fas fa-arrow-left me-1"></i> Sebelumnya
                        </button>
                        <button type="submit" class="btn btn-success">
                            <i class="fas fa-save me-1"></i> Simpan Data
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Multi-step form functionality
    const nextButtons = document.querySelectorAll('.next-step');
    const prevButtons = document.querySelectorAll('.prev-step');
    const steps = document.querySelectorAll('.step');
    const stepContents = document.querySelectorAll('.step-content');
    
    nextButtons.forEach(button => {
        button.addEventListener('click', function() {
            const currentStep = this.closest('.step-content').id.replace('step', '');
            const nextStep = this.getAttribute('data-next');
            
            // Validate current step before proceeding
            let isValid = true;
            const currentInputs = document.querySelectorAll(`#step${currentStep} [required]`);
            
            currentInputs.forEach(input => {
                if (!input.value.trim()) {
                    isValid = false;
                    input.classList.add('is-invalid');
                } else {
                    input.classList.remove('is-invalid');
                }
            });
            
            if (!isValid) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Perhatian',
                    text: 'Harap isi semua field yang wajib diisi!',
                    confirmButtonColor: '#3085d6'
                });
                return;
            }
            
            // Move to next step
            document.getElementById(`step${currentStep}`).classList.add('d-none');
            document.getElementById(`step${nextStep}`).classList.remove('d-none');
            
            // Update progress steps
            steps.forEach(step => {
                step.classList.remove('active');
                if (parseInt(step.getAttribute('data-step')) <= parseInt(nextStep)) {
                    step.classList.add('active');
                }
            });
            
            // Scroll to top of form
            document.querySelector('.card-body').scrollTop = 0;
        });
    });
    
    prevButtons.forEach(button => {
        button.addEventListener('click', function() {
            const currentStep = this.closest('.step-content').id.replace('step', '');
            const prevStep = this.getAttribute('data-prev');
            
            document.getElementById(`step${currentStep}`).classList.add('d-none');
            document.getElementById(`step${prevStep}`).classList.remove('d-none');
            
            // Update progress steps
            steps.forEach(step => {
                step.classList.remove('active');
                if (parseInt(step.getAttribute('data-step')) <= parseInt(prevStep)) {
                    step.classList.add('active');
                }
            });
            
            // Scroll to top of form
            document.querySelector('.card-body').scrollTop = 0;
        });
    });
    
    // Image preview functionality
    const fotoInput = document.getElementById('foto_masuk');
    const previewContainer = document.getElementById('preview-container');
    const previewImage = document.getElementById('preview-image');
    
    fotoInput.addEventListener('change', function() {
        const file = this.files[0];
        if (file) {
            const reader = new FileReader();
            
            reader.addEventListener('load', function() {
                previewImage.setAttribute('src', this.result);
                previewContainer.style.display = 'block';
            });
            
            reader.readAsDataURL(file);
        } else {
            previewContainer.style.display = 'none';
        }
    });
    
    // Form validation before submit
    document.getElementById('formTambahSiswa').addEventListener('submit', function(e) {
        let isValid = true;
        const requiredInputs = this.querySelectorAll('[required]');
        
        requiredInputs.forEach(input => {
            if (!input.value.trim()) {
                isValid = false;
                input.classList.add('is-invalid');
            }
        });
        
        if (!isValid) {
            e.preventDefault();
            Swal.fire({
                icon: 'error',
                title: 'Oops...',
                text: 'Harap isi semua field yang wajib diisi!',
                confirmButtonColor: '#3085d6'
            });
        }
    });
});
</script>

<style>
.progress-steps {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    position: relative;
}

.progress-steps::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    height: 4px;
    background-color: #e9ecef;
    z-index: 1;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
}

.step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #e9ecef;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-bottom: 8px;
    transition: all 0.3s ease;
}

.step-text {
    font-size: 0.85rem;
    color: #6c757d;
    text-align: center;
    transition: all 0.3s ease;
}

.step.active .step-number {
    background-color: #0d6efd;
    color: white;
}

.step.active .step-text {
    color: #0d6efd;
    font-weight: 500;
}

.step-content {
    transition: all 0.3s ease;
}

.card {
    border-radius: 12px;
    overflow: hidden;
}

.card-header {
    border-radius: 12px 12px 0 0 !important;
}

.input-group-text {
    background-color: #f8f9fa;
    border-right: none;
}

.form-control:focus + .input-group-text,
.form-select:focus + .input-group-text {
    border-color: #86b7fe;
}

.btn {
    border-radius: 6px;
    padding: 10px 20px;
    font-weight: 500;
}

.form-label {
    font-weight: 500;
    margin-bottom: 8px;
    color: #495057;
}

.text-danger {
    color: #dc3545 !important;
}
</style>

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