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

// Ambil tahun ajaran yang aktif
$query_tahun_aktif = "SELECT id_tahunajaran FROM bind_tahunajaran WHERE aktif = TRUE LIMIT 1";
$result_tahun_aktif = mysqli_query($conn, $query_tahun_aktif);
$tahun_aktif = mysqli_fetch_assoc($result_tahun_aktif);

// Query untuk mengambil data siswa yang belum memiliki data perkembangan berdasarkan tahun ajaran aktif
if ($tahun_aktif) {
    $id_tahun_aktif = $tahun_aktif['id_tahunajaran'];
    $query_siswa = "SELECT s.id_siswa, s.nisn, s.nis, s.nama_lengkap, t.tahun_ajaran 
                    FROM bind_siswa s 
                    JOIN bind_datasiswa ds ON s.id_siswa = ds.id_siswa
                    JOIN bind_tahunajaran t ON ds.id_tahunajaran = t.id_tahunajaran 
                    WHERE ds.id_tahunajaran = '$id_tahun_aktif'
                    AND s.id_siswa NOT IN (SELECT id_siswa FROM bind_perkembangan_siswa)
                    ORDER BY s.nama_lengkap";
} else {
    // Jika tidak ada tahun ajaran aktif, tampilkan semua siswa yang belum memiliki data perkembangan
    $query_siswa = "SELECT s.id_siswa, s.nisn, s.nis, s.nama_lengkap, t.tahun_ajaran 
                    FROM bind_siswa s 
                    JOIN bind_datasiswa ds ON s.id_siswa = ds.id_siswa
                    JOIN bind_tahunajaran t ON ds.id_tahunajaran = t.id_tahunajaran 
                    WHERE s.id_siswa NOT IN (SELECT id_siswa FROM bind_perkembangan_siswa)
                    ORDER BY s.nama_lengkap";
}

$result_siswa = mysqli_query($conn, $query_siswa);

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    // Ambil data dari form
    $id_siswa = $_POST['id_siswa'];
    $tanggal_keluar = $_POST['tanggal_keluar'];
    $alasan_keluar = $_POST['alasan_keluar'];
    $lulus = isset($_POST['lulus']) ? 1 : 0;
    $no_ijazah = $_POST['no_ijazah'];
    $tgl_ijazah = $_POST['tgl_ijazah'];
    $no_skhun = $_POST['no_skhun'];
    $tgl_skhun = $_POST['tgl_skhun'];
    
    // Upload foto keluar jika ada
    $foto_lulus = '';
    if ($_FILES['foto_lulus']['name']) {
        $target_dir = "../uploads/foto-lulus/";
        if (!is_dir($target_dir)) {
            mkdir($target_dir, 0777, true);
        }
        
        $file_extension = pathinfo($_FILES['foto_lulus']['name'], PATHINFO_EXTENSION);
        $foto_lulus = "lulus_" . time() . "." . $file_extension;
        $target_file = $target_dir . $foto_lulus;
        
        move_uploaded_file($_FILES['foto_lulus']['tmp_name'], $target_file);
    }
    
    // Query insert
    $sql = "INSERT INTO bind_perkembangan_siswa (id_siswa, tanggal_keluar, alasan_keluar, lulus, 
            no_ijazah, tgl_ijazah, no_skhun, tgl_skhun, foto_lulus) 
            VALUES ('$id_siswa', " . 
            ($tanggal_keluar ? "'$tanggal_keluar'" : "NULL") . ", 
            '$alasan_keluar', '$lulus', 
            " . ($no_ijazah ? "'$no_ijazah'" : "NULL") . ", 
            " . ($tgl_ijazah ? "'$tgl_ijazah'" : "NULL") . ", 
            " . ($no_skhun ? "'$no_skhun'" : "NULL") . ", 
            " . ($tgl_skhun ? "'$tgl_skhun'" : "NULL") . ", 
            " . ($foto_lulus ? "'$foto_lulus'" : "NULL") . ")";
    
    if ($conn->query($sql)) {
        echo "<script>
            Swal.fire({
                icon: 'success',
                title: 'Berhasil',
                text: 'Data perkembangan 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-plus-circle me-2"></i>Tambah Data Perkembangan 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 Perkembangan Siswa</h5>
            <?php if ($tahun_aktif): ?>
            <small class="d-block mt-1">Menampilkan siswa dari tahun ajaran aktif yang belum memiliki data perkembangan</small>
            <?php else: ?>
            <small class="d-block mt-1 text-warning">Tidak ada tahun ajaran aktif, menampilkan semua siswa yang belum memiliki data perkembangan</small>
            <?php endif; ?>
        </div>
        <div class="card-body p-4">
            <form method="POST" enctype="multipart/form-data" id="formTambahPerkembangan">
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="id_siswa" class="form-label">Siswa <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fas fa-user-graduate"></i></span>
                                <select class="form-select select2" id="id_siswa" name="id_siswa" required>
                                    <option value="">Pilih Siswa</option>
                                    <?php 
                                    // Reset pointer result siswa
                                    mysqli_data_seek($result_siswa, 0);
                                    while ($siswa = mysqli_fetch_assoc($result_siswa)): 
                                    ?>
                                    <option value="<?= $siswa['id_siswa'] ?>">
                                        <?= $siswa['nisn'] . ' - ' . $siswa['nama_lengkap'] . ' (' . $siswa['nis'] . ') - ' . $siswa['tahun_ajaran'] ?>
                                    </option>
                                    <?php endwhile; ?>
                                </select>
                            </div>
                            <?php if ($tahun_aktif): ?>
                            <small class="form-text text-muted">Hanya menampilkan siswa dari tahun ajaran aktif yang belum memiliki data perkembangan</small>
                            <?php else: ?>
                            <small class="form-text text-warning">Tidak ada tahun ajaran aktif, menampilkan semua siswa yang belum memiliki data perkembangan</small>
                            <?php endif; ?>
                        </div>
                        
                        <div class="mb-3">
                            <label for="tanggal_keluar" class="form-label">Tanggal Keluar</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fas fa-calendar-times"></i></span>
                                <input type="date" class="form-control" id="tanggal_keluar" name="tanggal_keluar">
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label for="alasan_keluar" class="form-label">Alasan Keluar</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fas fa-comment-dots"></i></span>
                                <textarea class="form-control" id="alasan_keluar" name="alasan_keluar" rows="3" placeholder="Alasan keluar dari sekolah"></textarea>
                            </div>
                        </div>
                        
                        <div class="mb-3 form-check">
                            <input type="checkbox" class="form-check-input" id="lulus" name="lulus" value="1">
                            <label class="form-check-label" for="lulus"><small><b>Cek Jika Siswa Lulus</b></small></label>
                        </div>
                         <div class="mb-3">
                            <label for="no_ijazah" class="form-label">Nomor Ijazah</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fas fa-file-certificate"></i></span>
                                <input type="text" class="form-control" id="no_ijazah" name="no_ijazah" placeholder="Nomor ijazah">
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-6">
                        
                        <div class="mb-3">
                            <label for="tgl_ijazah" class="form-label">Tanggal Ijazah</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="tgl_ijazah" name="tgl_ijazah">
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label for="no_skhun" class="form-label">Nomor SKHUN</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fas fa-file-alt"></i></span>
                                <input type="text" class="form-control" id="no_skhun" name="no_skhun" placeholder="Nomor SKHUN">
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label for="tgl_skhun" class="form-label">Tanggal SKHUN</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fas fa-calendar-day"></i></span>
                                <input type="date" class="form-control" id="tgl_skhun" name="tgl_skhun">
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label for="foto_lulus" class="form-label">Foto Keluar/Lulus</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_lulus" name="foto_lulus" accept="image/*">
                            </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>
                </div>
                
                <div class="d-flex justify-content-end mt-4">
                    <button type="submit" class="btn btn-success">
                        <i class="fas fa-save me-1"></i> Simpan Data
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- jQuery (required for Select2) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Select2 CSS -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<!-- Select2 JS -->
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Image preview functionality
    const fotoInput = document.getElementById('foto_lulus');
    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('formTambahPerkembangan').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');
            } else {
                input.classList.remove('is-invalid');
            }
        });
        
        if (!isValid) {
            e.preventDefault();
            Swal.fire({
                icon: 'error',
                title: 'Oops...',
                text: 'Harap isi semua field yang wajib diisi!',
                confirmButtonColor: '#3085d6'
            });
        }
    });
});

$(document).ready(function() {
    // Inisialisasi Select2
    $('#id_siswa').select2({
        theme: 'bootstrap4',
        placeholder: "Pilih Siswa",
        allowClear: true
    });
});
</script>

<style>
.select2-container--bootstrap4 .select2-selection--single {
    height: 38px;
    padding: 4px 12px;
    font-size: 1rem;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
    padding-left: 0;
}

.select2-container--bootstrap4 .select2-dropdown {
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
}

.select2-container--bootstrap4 .select2-search--dropdown .select2-search__field {
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
}

.select2-container--bootstrap4 .select2-results__option--highlighted {
    background-color: #0d6efd;
    color: white;
}

.input-group .select2-container--bootstrap4 {
    flex: 1 1 auto;
    width: 1% !important;
}

.input-group .select2-container--bootstrap4 .select2-selection {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 0;
}

.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';
?>