<?php
// app/view/admin/pedagogie/inscription-module-detail/view/modal.php
?>

<div id="detailModal" class="modal-overlay">
    <div class="modal-content" style="max-width: 750px;">
        <div class="modal-header">
            <h2><i class="fas fa-user-graduate" style="color: #2e86c1;"></i> Détails de l'Étudiant</h2>
            <button type="button" class="modal-close" onclick="closeDetailModal()">&times;</button>
        </div>
        <div class="modal-body">
            <div id="detailContent">
                <div class="loading active">
                    <div class="spinner"></div>
                    <p style="margin-top: 10px;">Chargement des détails...</p>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" onclick="closeDetailModal()">
                <i class="fas fa-times"></i> Fermer
            </button>
        </div>
    </div>
</div>

<script>
// =========================================
// DETAIL MODAL FUNCTIONS
// =========================================

let currentDetailStudentId = null;
let currentDetailInscriptionId = null;

function viewStudentDetail(inscriptionModuleId, studentId) {
    currentDetailStudentId = studentId;
    currentDetailInscriptionId = inscriptionModuleId;

    const modal = document.getElementById('detailModal');
    modal.classList.add('active');
    document.body.style.overflow = 'hidden';

    document.getElementById('detailContent').innerHTML =
        '<div class="loading active"><div class="spinner"></div><p style="margin-top:10px;">Chargement...</p></div>';

    // Récupérer les détails de l'étudiant
    fetch(`/est-concours/model/api/student.php?action=get&id=${studentId}`)
        .then(r => r.json())
        .then(result => {
            if (result.success) {
                renderStudentDetail(result.data);
            } else {
                document.getElementById('detailContent').innerHTML =
                    `<div class="alert alert-error">❌ ${result.message}</div>`;
            }
        })
        .catch(() => {
            document.getElementById('detailContent').innerHTML =
                '<div class="alert alert-error">❌ Erreur de connexion</div>';
        });
}

function renderStudentDetail(student) {
    document.getElementById('detailContent').innerHTML = `
        <div class="detail-section">
            <div class="detail-header">
                <div class="detail-avatar" style="background: linear-gradient(135deg, #2e86c1, #3498db);">
                    <i class="fas fa-user"></i>
                </div>
                <div class="detail-title">
                    <h2>${escapeHtml(student.prenom || '')} ${escapeHtml(student.nom || '')}</h2>
                    <div class="detail-meta">
                        ${student.cin ? `<span class="badge badge-secondary">${escapeHtml(student.cin)}</span>` : ''}
                        ${student.email ? `<span class="badge badge-primary">${escapeHtml(student.email)}</span>` : ''}
                    </div>
                </div>
            </div>

            <div class="detail-grid">
                <div class="detail-item">
                    <span class="label">ID</span>
                    <span class="value">${student.id}</span>
                </div>
                <div class="detail-item">
                    <span class="label">CIN</span>
                    <span class="value"><span class="badge badge-secondary">${escapeHtml(student.cin || '-')}</span></span>
                </div>
                <div class="detail-item">
                    <span class="label">Nom</span>
                    <span class="value"><strong>${escapeHtml(student.nom || '-')}</strong></span>
                </div>
                <div class="detail-item">
                    <span class="label">Prénom</span>
                    <span class="value">${escapeHtml(student.prenom || '-')}</span>
                </div>
                <div class="detail-item">
                    <span class="label">Email</span>
                    <span class="value"><a href="mailto:${escapeHtml(student.email)}">${escapeHtml(student.email || '-')}</a></span>
                </div>
                <div class="detail-item">
                    <span class="label">Téléphone</span>
                    <span class="value">${escapeHtml(student.phone || '-')}</span>
                </div>
                <div class="detail-item">
                    <span class="label">Statut</span>
                    <span class="value">${student.blocked ? '<span class="badge badge-danger">Bloqué</span>' : '<span class="badge badge-success">Actif</span>'}</span>
                </div>
                <div class="detail-item">
                    <span class="label">Date d'inscription</span>
                    <span class="value">${student.created_at ? new Date(student.created_at).toLocaleString('fr-FR') : '-'}</span>
                </div>
            </div>

            <div style="margin-top:20px;display:flex;gap:10px;flex-wrap:wrap;justify-content:center;">
                ${student.email ? `<a href="mailto:${escapeHtml(student.email)}" class="btn btn-primary btn-sm"><i class="fas fa-envelope"></i> Envoyer un email</a>` : ''}
                ${student.phone ? `<a href="tel:${escapeHtml(student.phone)}" class="btn btn-secondary btn-sm"><i class="fas fa-phone"></i> Appeler</a>` : ''}
            </div>
        </div>
    `;
}

function closeDetailModal() {
    document.getElementById('detailModal').classList.remove('active');
    document.body.style.overflow = '';
    currentDetailStudentId = null;
    currentDetailInscriptionId = null;
}

// Fermeture du modal
document.addEventListener('DOMContentLoaded', function() {
    const modal = document.getElementById('detailModal');
    if (modal) {
        modal.addEventListener('click', function(e) {
            if (e.target === this) {
                closeDetailModal();
            }
        });
    }

    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            closeDetailModal();
        }
    });
});

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

<style>
.detail-section { padding: 5px 0; }
.detail-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 15px 20px;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-radius: 12px;
    margin-bottom: 20px;
}
.detail-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2e86c1, #3498db);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 4px 15px rgba(46, 134, 193, 0.3);
}
.detail-title { flex: 1; }
.detail-title h2 { margin: 0 0 8px 0; font-size: 22px; color: #2c3e50; }
.detail-meta { display: flex; gap: 10px; flex-wrap: wrap; }
.detail-meta .badge { padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; }

.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.detail-item {
    display: flex;
    flex-direction: column;
    padding: 10px 15px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    transition: all 0.2s ease;
}
.detail-item:hover {
    background: #f0f2f5;
    border-color: #2e86c1;
}
.detail-item .label {
    font-size: 11px;
    font-weight: 600;
    color: #7f8c8d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.detail-item .value {
    font-size: 15px;
    font-weight: 500;
    color: #2c3e50;
    word-break: break-word;
}
.detail-item .value a {
    color: #2e86c1;
    text-decoration: none;
}
.detail-item .value a:hover { text-decoration: underline; }

.badge-secondary { background: #e9ecef; color: #495057; }
.badge-primary { background: #cce5ff; color: #004085; }
.badge-success { background: #d4edda; color: #155724; }
.badge-danger { background: #f8d7da; color: #721c24; }

.btn-sm { padding: 8px 16px; font-size: 13px; }

@media (max-width: 768px) {
    .detail-grid { grid-template-columns: 1fr; }
    .detail-header { flex-direction: column; text-align: center; }
    .detail-meta { justify-content: center; }
}
@media (max-width: 480px) {
    .modal-content { max-width: 95% !important; margin: 10px; }
    .modal-body { padding: 15px; }
    .detail-header { padding: 10px 15px; }
    .detail-avatar { width: 55px; height: 55px; font-size: 24px; }
    .detail-title h2 { font-size: 18px; }
}
</style>