<?php
// app/view/admin/pedagogie/inscription_module/create-edit/modal.php

// Les variables $filieresList, $modulesList, $semestresList, $anneesList sont définies avant l'inclusion
?>

<div class="modal-overlay" id="inscriptionModal">
    <div class="modal modal-lg">
        <div class="modal-header">
            <h2 id="modalTitle">Nouvelle Inscription Module</h2>
            <button class="modal-close" onclick="closeInscriptionModal()">&times;</button>
        </div>

        <div class="modal-body">
            <form id="inscriptionForm" enctype="multipart/form-data">
                <input type="hidden" id="inscriptionId">

                <!-- Informations -->
                <div class="form-section">
                    <h3 class="section-title">
                        <i class="fas fa-info-circle"></i>
                        Informations
                    </h3>

                    <div class="form-row">
                        <div class="form-group">
                            <label>Année universitaire <span class="required">*</span></label>
                            <select id="annee_universitaire" class="form-control" required>
                                <option value="">Sélectionner une année</option>
                                <?php
                                $currentYear = date('Y');
                                for ($i = 0; $i < 5; $i++) {
                                    $year = $currentYear - $i;
                                    $annee = $year . '-' . ($year + 1);
                                    echo "<option value='$annee'>$annee</option>";
                                }
                                ?>
                            </select>
                        </div>

                        <div class="form-group">
                            <label>Filière <span class="required">*</span></label>
                            <select id="filiere_id" class="form-control" required>
                                <option value="">Sélectionner une filière</option>
                                <?php
                                $filieres = isset($filieresList) ? $filieresList : [];
                                foreach ($filieres as $filiere):
                                ?>
                                    <option value="<?= $filiere['id'] ?>">
                                        <?= htmlspecialchars($filiere['libelle']) ?> (<?= htmlspecialchars($filiere['code']) ?>)
                                    </option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label>Semestre <span class="required">*</span></label>
                            <select id="semestre_id" class="form-control" required>
                                <option value="">Sélectionner un semestre</option>
                                <?php
                                $semestres = isset($semestresList) ? $semestresList : [];
                                foreach ($semestres as $semestre):
                                ?>
                                    <option value="<?= $semestre['id'] ?>">
                                        <?= htmlspecialchars($semestre['libelle']) ?> (<?= htmlspecialchars($semestre['code']) ?>)
                                    </option>
                                <?php endforeach; ?>
                            </select>
                        </div>

                        <div class="form-group">
                            <label>Module <span class="required">*</span></label>
                            <select id="module_id" class="form-control" required>
                                <option value="">Sélectionner un module</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group full-width">
                            <label>Description</label>
                            <textarea id="description" class="form-control" rows="2" placeholder="Description de l'inscription..."></textarea>
                        </div>
                    </div>
                </div>

                <!-- Import CSV -->
                <div class="form-section">
                    <h3 class="section-title">
                        <i class="fas fa-file-import"></i>
                        Importer les étudiants (CSV)
                    </h3>

                    <div class="form-row">
                        <div class="form-group full-width">
                            <label>Fichier CSV <span class="required">*</span></label>
                            <div class="file-upload-wrapper">
                                <input type="file" id="csv_file" class="file-upload-input" accept=".csv" required>
                                <label for="csv_file" class="file-upload-label">
                                    <i class="fas fa-cloud-upload-alt"></i>
                                    Choisir un fichier CSV
                                </label>
                                <small class="form-text text-muted">
                                    Format attendu: une colonne avec les CIN des étudiants
                                    <br>
                                    <a href="#" onclick="downloadTemplate()" class="template-link">
                                        <i class="fas fa-download"></i> Télécharger le template
                                    </a>
                                </small>
                            </div>
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group full-width">
                            <label>Nom de la colonne</label>
                            <input type="text" id="column_name" class="form-control" placeholder="cin" value="cin">
                            <small class="form-text text-muted">Nom de la colonne contenant les CIN des étudiants</small>
                        </div>
                    </div>

                    <div id="csvPreview" style="display:none;">
                        <h4>Aperçu du fichier</h4>
                        <div id="csvPreviewContent"></div>
                    </div>
                </div>

            </form>
        </div>

        <div class="modal-footer">
            <button class="btn btn-secondary" onclick="closeInscriptionModal()">
                <i class="fas fa-times"></i> Annuler
            </button>
            <button class="btn btn-primary" onclick="saveInscription()">
                <i class="fas fa-save"></i> Importer
            </button>
        </div>
    </div>
</div>

<script>
// =========================================
// INSCRIPTION MODAL FUNCTIONS
// =========================================

let currentEditId = null;

function openInscriptionModal(data = null) {
    const modal = document.getElementById('inscriptionModal');
    const title = document.getElementById('modalTitle');

    if (data && data.id) {
        // Mode édition (non utilisé pour l'instant)
        title.textContent = 'Modifier l\'Inscription';
        currentEditId = data.id;
        document.getElementById('inscriptionId').value = data.id;
        document.getElementById('annee_universitaire').value = data.annee_universitaire || '';
        document.getElementById('filiere_id').value = data.filiere_id || '';
        document.getElementById('semestre_id').value = data.semestre_id || '';
        document.getElementById('module_id').value = data.module_id || '';
        document.getElementById('description').value = data.description || '';
    } else {
        title.textContent = 'Nouvelle Inscription Module';
        document.getElementById('inscriptionForm').reset();
        document.getElementById('inscriptionId').value = '';
        document.getElementById('module_id').innerHTML = '<option value="">Sélectionner un module</option>';
        document.getElementById('csvPreview').style.display = 'none';
        currentEditId = null;
    }

    modal.classList.add('active');
    document.body.style.overflow = 'hidden';
    loadModules();
}

function closeInscriptionModal() {
    document.getElementById('inscriptionModal').classList.remove('active');
    document.body.style.overflow = '';
    document.getElementById('csvPreview').style.display = 'none';
}

// =========================================
// CHARGEMENT DYNAMIQUE DES MODULES
// =========================================

function loadModules() {
    const filiereId = document.getElementById('filiere_id').value;
    const semestreId = document.getElementById('semestre_id').value;

    if (!filiereId || !semestreId) {
        document.getElementById('module_id').innerHTML = '<option value="">Sélectionner un module</option>';
        return;
    }

    const url = `/est-concours/model/api/module.php?action=by_filiere_semestre&filiere_id=${filiereId}&semestre_id=${semestreId}`;

    fetch(url)
        .then(r => r.json())
        .then(result => {
            const select = document.getElementById('module_id');
            select.innerHTML = '<option value="">Sélectionner un module</option>';

            if (result.success && result.data) {
                result.data.forEach(module => {
                    const option = document.createElement('option');
                    option.value = module.id;
                    option.textContent = `${module.libelle} (${module.code})`;
                    select.appendChild(option);
                });
            }
        })
        .catch(() => console.error('Erreur chargement modules'));
}

// Événements
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('filiere_id').addEventListener('change', loadModules);
    document.getElementById('semestre_id').addEventListener('change', loadModules);

    // Aperçu CSV
    document.getElementById('csv_file').addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (!file) return;

        const reader = new FileReader();
        reader.onload = function(e) {
            const content = e.target.result;
            const lines = content.split('\n');
            const previewDiv = document.getElementById('csvPreview');
            const previewContent = document.getElementById('csvPreviewContent');

            let html = '<table class="csv-preview-table"><thead><tr>';
            const headers = lines[0].split(';');
            headers.forEach(h => {
                html += `<th>${escapeHtml(h.trim())}</th>`;
            });
            html += '</tr></thead><tbody>';

            const maxRows = Math.min(5, lines.length - 1);
            for (let i = 1; i <= maxRows; i++) {
                if (!lines[i]) continue;
                const cols = lines[i].split(';');
                html += '<tr>';
                cols.forEach(c => {
                    html += `<td>${escapeHtml(c.trim())}</td>`;
                });
                html += '</tr>';
            }

            html += '</tbody></table>';
            html += `<p><small>${Math.max(0, lines.length - 1)} ligne(s) détectée(s)</small></p>`;

            previewContent.innerHTML = html;
            previewDiv.style.display = 'block';
        };
        reader.readAsText(file);
    });
});

// =========================================
// TÉLÉCHARGER LE TEMPLATE
// =========================================

function downloadTemplate() {
    const content = 'cin\nAB123456\nFZ234567\nMA345678\nSB456789';
    const blob = new Blob([content], { type: 'text/csv;charset=utf-8;' });
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = 'template_inscription_module.csv';
    link.click();
}

// =========================================
// SAUVEGARDE
// =========================================

function saveInscription() {
    const form = document.getElementById('inscriptionForm');
    const formData = new FormData(form);

    const data = {
        filiere_id: parseInt(document.getElementById('filiere_id').value) || null,
        module_id: parseInt(document.getElementById('module_id').value) || null,
        semestre_id: parseInt(document.getElementById('semestre_id').value) || null,
        annee_universitaire: document.getElementById('annee_universitaire').value,
        description: document.getElementById('description').value.trim(),
        column_name: document.getElementById('column_name').value.trim() || 'cin'
    };

    // Validation
    if (!data.annee_universitaire) {
        showToast('Veuillez sélectionner une année universitaire', 'warning');
        return;
    }
    if (!data.filiere_id) {
        showToast('Veuillez sélectionner une filière', 'warning');
        return;
    }
    if (!data.semestre_id) {
        showToast('Veuillez sélectionner un semestre', 'warning');
        return;
    }
    if (!data.module_id) {
        showToast('Veuillez sélectionner un module', 'warning');
        return;
    }

    const csvFile = document.getElementById('csv_file').files[0];
    if (!csvFile) {
        showToast('Veuillez sélectionner un fichier CSV', 'warning');
        return;
    }

    // Vérifier le format du fichier
    if (!csvFile.name.toLowerCase().endsWith('.csv')) {
        showToast('Le fichier doit être au format CSV', 'warning');
        return;
    }

    const saveBtn = document.querySelector('#inscriptionModal .btn-primary');
    const orig = saveBtn.innerHTML;
    saveBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Importation en cours...';
    saveBtn.disabled = true;

    // Créer FormData pour l'upload
    const uploadData = new FormData();
    uploadData.append('csv_file', csvFile);
    uploadData.append('filiere_id', data.filiere_id);
    uploadData.append('module_id', data.module_id);
    uploadData.append('annee_universitaire', data.annee_universitaire);
    uploadData.append('description', data.description || '');
    uploadData.append('column_name', data.column_name);

    fetch('/est-concours/model/api/inscription_module.php?action=import_csv', {
        method: 'POST',
        body: uploadData
    })
    .then(r => r.json())
    .then(result => {
        saveBtn.innerHTML = orig;
        saveBtn.disabled = false;

        if (result.success) {
            const importResult = result.data;
            let message = `✅ ${importResult.inserted || 0} étudiant(s) importé(s) avec succès`;
            if (importResult.skipped > 0) {
                message += `, ${importResult.skipped} déjà inscrit(s) ignoré(s)`;
            }
            if (importResult.not_found && importResult.not_found.length > 0) {
                message += `<br>⚠️ ${importResult.not_found.length} étudiant(s) non trouvé(s): ${importResult.not_found.join(', ')}`;
            }
            showToast(message, 'success');
            closeInscriptionModal();
            if (typeof loadInscriptions === 'function') loadInscriptions();
            if (typeof loadStats === 'function') loadStats();
        } else {
            showToast('Erreur: ' + result.message, 'error');
        }
    })
    .catch(error => {
        saveBtn.innerHTML = orig;
        saveBtn.disabled = false;
        showToast('Erreur de connexion: ' + error.message, 'error');
    });
}

function escapeHtml(text) {
    if (!text) return '';
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}
</script>

<style>
.file-upload-wrapper {
    position: relative;
    width: 100%;
}

.file-upload-input {
    position: absolute;
    opacity: 0;
    width: 0.1px;
    height: 0.1px;
}

.file-upload-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    border: 2px dashed #ced4da;
    border-radius: 8px;
    background: #f8f9fa;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #6c757d;
    font-weight: 500;
}

.file-upload-label:hover {
    border-color: #27ae60;
    background: #f0f2f5;
    color: #27ae60;
}

.file-upload-label i {
    font-size: 24px;
}

.template-link {
    color: #27ae60;
    text-decoration: none;
    font-weight: 500;
}

.template-link:hover {
    text-decoration: underline;
}

.csv-preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-top: 10px;
}

.csv-preview-table th,
.csv-preview-table td {
    padding: 8px 12px;
    border: 1px solid #dee2e6;
    text-align: left;
}

.csv-preview-table th {
    background: #f8f9fa;
    font-weight: 600;
}
</style>