{% extends 'core/dashboard-layout.html.twig' %}

{% block title %}Mon Profil - Portail Étudiant{% endblock %}

{# Configuration spécifique à l'étudiant #}
{% set header_icon = 'fa-user-graduate' %}
{% set header_title = 'Centre Informatique' %}
{% set notification_count = '1' %}
{% set user_role = 'Étudiant' %}
{% set offcanvas_title = 'ÉtudiantPortal' %}
{% set notifications_url = path('app_student_dashboard') %}

{% block stylesheets %}
    {{ parent() }}
    <link href="{{ asset('css/teacher-profile.css') }}" rel="stylesheet">
{% endblock %}

{% block dashboard_content %}
    <div class="profile-container">
        <!-- Header du profil -->
        <div class="profile-header animate-slide-in">
            <div class="profile-cover">
                <div class="profile-overlay"></div>
                <div class="profile-info">
                    <div class="avatar-container">
                        <div class="avatar-wrapper">
                            {% if student.profilePhotoUrl %}
                                <img src="{{ asset(student.profilePhotoUrl) }}" alt="Photo de profil" class="profile-avatar" id="profile-avatar">
                            {% else %}
                                <div class="profile-avatar-default" id="profile-avatar">
                                    <i class="fas fa-user-graduate"></i>
                                </div>
                            {% endif %}
                            <div class="avatar-upload-overlay">
                                <i class="fas fa-camera"></i>
                                <span>Changer</span>
                            </div>
                            <input type="file" id="photo-upload" accept="image/*" style="display: none;">
                        </div>
                    </div>
                    <div class="profile-details">
                        <h1 class="profile-name">{{ student.firstName }} {{ student.lastName }}</h1>
                        <p class="profile-title">Étudiant(e)</p>
                        <div class="profile-badges">
                            <span class="badge badge-status status-{{ student.status.value }}">{{ student.statusLabel }}</span>
                            {% if student.department %}
                                <span class="badge badge-department">{{ student.department }}</span>
                            {% endif %}
                            {% if student.level %}
                                <span class="badge badge-level">{{ student.level.cycle }} {{ student.level.number }}</span>
                            {% endif %}
                            {% if student.cohorte %}
                                <span class="badge badge-cohorte">Promotion {{ student.cohorte }}</span>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Navigation des onglets -->
        <div class="profile-tabs animate-slide-in-delayed">
            <nav class="tab-nav">
                <button class="tab-btn active" data-tab="personal">
                    <i class="fas fa-user"></i>
                    Informations Personnelles
                </button>
                <button class="tab-btn" data-tab="academic">
                    <i class="fas fa-graduation-cap"></i>
                    Informations Académiques
                </button>
                <button class="tab-btn" data-tab="documents">
                    <i class="fas fa-file-alt"></i>
                    Documents
                </button>
                <button class="tab-btn" data-tab="bio">
                    <i class="fas fa-pen"></i>
                    Biographie
                </button>
                <button class="tab-btn" data-tab="preferences">
                    <i class="fas fa-cog"></i>
                    Préférences
                </button>
                <button class="tab-btn" data-tab="security">
                    <i class="fas fa-shield-alt"></i>
                    Sécurité
                </button>
            </nav>
        </div>

        <!-- Contenu des onglets -->
        <div class="profile-content animate-fade-in">
            
            <!-- Onglet Informations Personnelles -->
            <div class="tab-content active" id="personal-tab">
                <div class="card profile-card">
                    <div class="card-header">
                        <h3><i class="fas fa-user"></i> Informations Personnelles</h3>
                        <button class="btn btn-edit" onclick="toggleEdit('personal')">
                            <i class="fas fa-edit"></i> Modifier
                        </button>
                    </div>
                    <div class="card-body">
                        <form id="personal-form" class="profile-form">
                            <div class="form-grid">
                                <div class="form-group">
                                    <label>Prénom *</label>
                                    <input type="text" name="firstName" value="{{ student.firstName }}" readonly>
                                </div>
                                <div class="form-group">
                                    <label>Nom *</label>
                                    <input type="text" name="lastName" value="{{ student.lastName }}" readonly>
                                </div>
                                <div class="form-group">
                                    <label>Matricule</label>
                                    <input type="text" value="{{ student.matricule }}" readonly disabled>
                                </div>
                                <div class="form-group">
                                    <label>Email *</label>
                                    <input type="email" name="email" value="{{ student.email }}" readonly>
                                </div>
                                <div class="form-group">
                                    <label>Téléphone</label>
                                    <input type="tel" name="phone" value="{{ student.phone ?? '' }}" readonly>
                                </div>
                                <div class="form-group">
                                    <label>Genre</label>
                                    <select name="gender" readonly disabled>
                                        <option value="M" {{ student.gender == 'M' ? 'selected' : '' }}>Masculin</option>
                                        <option value="F" {{ student.gender == 'F' ? 'selected' : '' }}>Féminin</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>Langue</label>
                                    <select name="language" readonly disabled>
                                        <option value="fr" {{ student.language == 'fr' ? 'selected' : '' }}>Français</option>
                                        <option value="en" {{ student.language == 'en' ? 'selected' : '' }}>English</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-actions" style="display: none;">
                                <button type="button" class="btn btn-secondary" onclick="cancelEdit('personal')">Annuler</button>
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save"></i> Sauvegarder
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Onglet Informations Académiques -->
            <div class="tab-content" id="academic-tab">
                <div class="card profile-card">
                    <div class="card-header">
                        <h3><i class="fas fa-graduation-cap"></i> Informations Académiques</h3>
                        <button class="btn btn-edit" onclick="toggleEdit('academic')">
                            <i class="fas fa-edit"></i> Modifier
                        </button>
                    </div>
                    <div class="card-body">
                        <form id="academic-form" class="profile-form">
                            <div class="form-grid">
                                <div class="form-group">
                                    <label>INE *</label>
                                    <input type="text" name="INE" value="{{ student.INE }}" readonly>
                                </div>
                                <div class="form-group">
                                    <label>Nom du père *</label>
                                    <input type="text" name="dad" value="{{ student.dad }}" readonly>
                                </div>
                                <div class="form-group">
                                    <label>Nom de la mère *</label>
                                    <input type="text" name="mum" value="{{ student.mum }}" readonly>
                                </div>
                                <div class="form-group">
                                    <label>Date de naissance *</label>
                                    <input type="date" name="birthday" value="{{ student.birthday ? student.birthday.format('Y-m-d') : '' }}" readonly>
                                </div>
                                <div class="form-group">
                                    <label>Lieu de naissance *</label>
                                    <input type="text" name="placeOfBirth" value="{{ student.placeOfBirth }}" readonly>
                                </div>
                                <div class="form-group">
                                    <label>Département *</label>
                                    <input type="text" name="department" value="{{ student.department }}" readonly>
                                </div>
                                <div class="form-group">
                                    <label>Niveau d'étude *</label>
                                    <select name="levelId" readonly disabled>
                                        {% for level in levels %}
                                            <option value="{{ level.id }}" {{ level.id == student.level.id ? 'selected' : '' }}>
                                                {{ level.cycle }} {{ level.number }} - {{ level.department.name }}
                                            </option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>Cohorte *</label>
                                    <input type="text" name="cohorte" value="{{ student.cohorte }}" readonly>
                                </div>
                            </div>
                            <div class="form-actions" style="display: none;">
                                <button type="button" class="btn btn-secondary" onclick="cancelEdit('academic')">Annuler</button>
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save"></i> Sauvegarder
                                </button>
                            </div>
                        </form>

                        <!-- Statistiques académiques -->
                        <div class="stats-section">
                            <h4>Statistiques</h4>
                            <div class="stats-grid">
                                <div class="stat-item">
                                    <div class="stat-icon">
                                        <i class="fas fa-book"></i>
                                    </div>
                                    <div class="stat-details">
                                        <span class="stat-value">{{ student.courseEnrollments|length }}</span>
                                        <span class="stat-label">Cours inscrits</span>
                                    </div>
                                </div>
                                <div class="stat-item">
                                    <div class="stat-icon">
                                        <i class="fas fa-star"></i>
                                    </div>
                                    <div class="stat-details">
                                        <span class="stat-value">{{ student.grades|length }}</span>
                                        <span class="stat-label">Notes</span>
                                    </div>
                                </div>
                                <div class="stat-item">
                                    <div class="stat-icon">
                                        <i class="fas fa-trophy"></i>
                                    </div>
                                    <div class="stat-details">
                                        <span class="stat-value">{{ student.level ? student.level.cycle ~ ' ' ~ student.level.number : 'N/A' }}</span>
                                        <span class="stat-label">Niveau actuel</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Onglet Documents -->
            <div class="tab-content" id="documents-tab">
                <div class="card profile-card">
                    <div class="card-header">
                        <h3><i class="fas fa-file-alt"></i> Mes Documents</h3>
                    </div>
                    <div class="card-body">
                        <div class="document-upload">
                            <div class="upload-area" id="photo-upload-area">
                                <input type="file" id="photo-upload" accept="image/*" style="display: none;">
                                <div class="upload-content">
                                    <i class="fas fa-cloud-upload-alt"></i>
                                    <h4>Photo de profil</h4>
                                    <p>Formats acceptés: JPG, PNG, GIF (max 5MB)</p>
                                    <button type="button" class="btn btn-primary" onclick="document.getElementById('photo-upload').click()">
                                        <i class="fas fa-upload"></i> Choisir une photo
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Onglet Biographie -->
            <div class="tab-content" id="bio-tab">
                <div class="card profile-card">
                    <div class="card-header">
                        <h3><i class="fas fa-pen"></i> Biographie</h3>
                        <button class="btn btn-edit" onclick="toggleEdit('bio')">
                            <i class="fas fa-edit"></i> Modifier
                        </button>
                    </div>
                    <div class="card-body">
                        <form id="bio-form" class="profile-form">
                            <div class="form-group">
                                <label>Présentez-vous en quelques mots (max 1000 caractères)</label>
                                <textarea name="bio" rows="8" readonly placeholder="Parlez de votre parcours, vos aspirations, vos centres d'intérêt...">{{ student.bio ?? '' }}</textarea>
                                <div class="char-counter">
                                    <span class="current">0</span> / 1000 caractères
                                </div>
                            </div>
                            <div class="form-actions" style="display: none;">
                                <button type="button" class="btn btn-secondary" onclick="cancelEdit('bio')">Annuler</button>
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save"></i> Sauvegarder
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Onglet Préférences -->
            <div class="tab-content" id="preferences-tab">
                <div class="card profile-card">
                    <div class="card-header">
                        <h3><i class="fas fa-cog"></i> Préférences</h3>
                        <button class="btn btn-edit" onclick="toggleEdit('preferences')">
                            <i class="fas fa-edit"></i> Modifier
                        </button>
                    </div>
                    <div class="card-body">
                        <form id="preferences-form" class="profile-form">
                            <div class="form-grid">
                                <div class="form-group">
                                    <label>Thème</label>
                                    <select name="theme" readonly disabled>
                                        <option value="light" {{ student.theme == 'light' ? 'selected' : '' }}>Clair</option>
                                        <option value="dark" {{ student.theme == 'dark' ? 'selected' : '' }}>Sombre</option>
                                        <option value="auto" {{ student.theme == 'auto' ? 'selected' : '' }}>Automatique</option>
                                    </select>
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <label>Préférences de notification</label>
                                <div class="checkbox-group">
                                    <label class="checkbox-label">
                                        <input type="checkbox" name="notificationPreferences[]" value="email" 
                                               {{ 'email' in student.notificationPreferences ? 'checked' : '' }} disabled>
                                        <span class="checkmark"></span>
                                        Notifications par email
                                    </label>
                                    <label class="checkbox-label">
                                        <input type="checkbox" name="notificationPreferences[]" value="sms" 
                                               {{ 'sms' in student.notificationPreferences ? 'checked' : '' }} disabled>
                                        <span class="checkmark"></span>
                                        Notifications par SMS
                                    </label>
                                    <label class="checkbox-label">
                                        <input type="checkbox" name="notificationPreferences[]" value="push" 
                                               {{ 'push' in student.notificationPreferences ? 'checked' : '' }} disabled>
                                        <span class="checkmark"></span>
                                        Notifications push
                                    </label>
                                </div>
                            </div>
                            
                            <div class="form-actions" style="display: none;">
                                <button type="button" class="btn btn-secondary" onclick="cancelEdit('preferences')">Annuler</button>
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save"></i> Sauvegarder
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Onglet Sécurité -->
            <div class="tab-content" id="security-tab">
                <div class="card profile-card">
                    <div class="card-header">
                        <h3><i class="fas fa-shield-alt"></i> Sécurité</h3>
                    </div>
                    <div class="card-body">
                        <form id="password-form" class="profile-form">
                            <div class="form-group">
                                <label>Mot de passe actuel *</label>
                                <input type="password" name="currentPassword" required>
                            </div>
                            <div class="form-group">
                                <label>Nouveau mot de passe *</label>
                                <input type="password" name="newPassword" required minlength="8">
                                <div class="password-strength">
                                    <div class="strength-bar"></div>
                                    <span class="strength-text"></span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label>Confirmer le nouveau mot de passe *</label>
                                <input type="password" name="confirmPassword" required>
                            </div>
                            <div class="form-actions">
                                <button type="submit" class="btn btn-danger">
                                    <i class="fas fa-key"></i> Changer le mot de passe
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Loading Overlay -->
    <div class="loading-overlay" id="loading-overlay">
        <div class="spinner"></div>
        <p>Mise à jour en cours...</p>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('js/student-profile.js') }}"></script>
{% endblock %}