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

{% block title %}Mon Profil - Portail Enseignant{% endblock %}

{# Configuration spécifique à l'enseignant #}
{% set header_icon = 'fa-user-circle' %}
{% set header_title = 'Centre Informatique' %}
{% set notification_count = '2' %}
{% set user_role = 'Enseignant' %}
{% set offcanvas_title = 'EnseignantPortal' %}
{% set notifications_url = path('app_teacher_notifications') %}

{% 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 teacher.profilePhotoUrl %}
                                <img src="{{ asset(teacher.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-tie"></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">{{ teacher.firstName }} {{ teacher.lastName }}</h1>
                        <p class="profile-title">{{ teacher.teacherRoleLabel }}</p>
                        {% if teacher.grade %}
                            <p class="profile-grade">{{ teacher.grade.name }}</p>
                        {% endif %}
                        <div class="profile-badges">
                            <span class="badge badge-status status-{{ teacher.status }}">{{ teacher.statusLabel }}</span>
                            {% if teacher.hasPhd %}
                                <span class="badge badge-phd">PhD</span>
                            {% endif %}
                            {% if teacher.managedDepartment %}
                                <span class="badge badge-department">{{ teacher.managedDepartment.name }}</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="professional">
                    <i class="fas fa-briefcase"></i>
                    Informations Professionnelles
                </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="{{ teacher.firstName }}" readonly>
                                </div>
                                <div class="form-group">
                                    <label>Nom *</label>
                                    <input type="text" name="lastName" value="{{ teacher.lastName }}" readonly>
                                </div>
                                <div class="form-group">
                                    <label>Matricule</label>
                                    <input type="text" value="{{ teacher.matricule }}" readonly disabled>
                                </div>
                                <div class="form-group">
                                    <label>Email *</label>
                                    <input type="email" name="email" value="{{ teacher.email }}" readonly>
                                </div>
                                <div class="form-group">
                                    <label>Téléphone</label>
                                    <input type="tel" name="phone" value="{{ teacher.phone ?? '' }}" readonly>
                                </div>
                                <div class="form-group">
                                    <label>Date de naissance</label>
                                    <input type="date" name="birthDate" value="{{ teacher.birthDate ? teacher.birthDate.format('Y-m-d') : '' }}" readonly>
                                </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 Professionnelles -->
            <div class="tab-content" id="professional-tab">
                <div class="card profile-card">
                    <div class="card-header">
                        <h3><i class="fas fa-briefcase"></i> Informations Professionnelles</h3>
                        <button class="btn btn-edit" onclick="toggleEdit('professional')">
                            <i class="fas fa-edit"></i> Modifier
                        </button>
                    </div>
                    <div class="card-body">
                        <form id="professional-form" class="profile-form">
                            <div class="form-grid">
                                <div class="form-group">
                                    <label>Grade</label>
                                    <select name="gradeId" readonly disabled>
                                        <option value="">Sélectionner un grade</option>
                                        {% for grade in grades %}
                                            <option value="{{ grade.id }}" {{ teacher.grade and teacher.grade.id == grade.id ? 'selected' : '' }}>
                                                {{ grade.name }} ({{ grade.contractStatusLabel }})
                                            </option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>Années d'expérience</label>
                                    <input type="number" name="experienceYears" value="{{ teacher.experienceYears ?? '' }}" readonly min="0" max="50">
                                </div>
                                <div class="form-group">
                                    <label>Date d'embauche</label>
                                    <input type="date" name="hiredAt" value="{{ teacher.hiredAt ? teacher.hiredAt.format('Y-m-d') : '' }}" readonly>
                                </div>
                                <div class="form-group">
                                    <label>Statut</label>
                                    <select name="status" readonly disabled>
                                        {% for value, label in status_choices %}
                                            <option value="{{ value }}" {{ teacher.status == value ? 'selected' : '' }}>{{ label }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>Rôle enseignant</label>
                                    <select name="teacherRole" readonly disabled>
                                        {% for label, value in teacher_role_choices %}
                                            <option value="{{ value }}" {{ teacher.teacherRole == value ? 'selected' : '' }}>{{ label }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="form-group form-group-checkbox">
                                    <label class="checkbox-label">
                                        <input type="checkbox" name="hasPhd" {{ teacher.hasPhd ? 'checked' : '' }} disabled>
                                        <span class="checkmark"></span>
                                        Possède un PhD
                                    </label>
                                </div>
                            </div>
                            {% if teacher.managedDepartment %}
                                <div class="info-section">
                                    <h4>Département géré</h4>
                                    <div class="department-info">
                                        <span class="department-name">{{ teacher.managedDepartment.name }}</span>
                                        <span class="department-code">{{ teacher.managedDepartment.code }}</span>
                                    </div>
                                </div>
                            {% endif %}
                            <div class="form-actions" style="display: none;">
                                <button type="button" class="btn btn-secondary" onclick="cancelEdit('professional')">Annuler</button>
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save"></i> Sauvegarder
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- Statistiques -->
                <div class="card profile-card">
                    <div class="card-header">
                        <h3><i class="fas fa-chart-bar"></i> Statistiques</h3>
                    </div>
                    <div class="card-body">
                        <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">{{ teacher.assignedCourses|length }}</span>
                                    <span class="stat-label">Cours assignés</span>
                                </div>
                            </div>
                            <div class="stat-item">
                                <div class="stat-icon">
                                    <i class="fas fa-calendar"></i>
                                </div>
                                <div class="stat-details">
                                    <span class="stat-value">{{ teacher.experienceYears ?? 0 }}</span>
                                    <span class="stat-label">Années d'expérience</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">{{ teacher.grade ? teacher.grade.name : 'N/A' }}</span>
                                    <span class="stat-label">Grade actuel</span>
                                </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> Curriculum Vitae</h3>
                    </div>
                    <div class="card-body">
                        <div class="document-upload">
                            {% if teacher.cv %}
                                <div class="current-document">
                                    <div class="document-info">
                                        <i class="fas fa-file-pdf"></i>
                                        <div>
                                            <h4>CV actuel</h4>
                                            <p>Dernière mise à jour: {{ teacher.updatedAt.format('d/m/Y H:i') }}</p>
                                        </div>
                                    </div>
                                    <div class="document-actions">
                                        <a href="{{ asset('uploads/cv/' ~ teacher.cv) }}" target="_blank" class="btn btn-outline">
                                            <i class="fas fa-eye"></i> Voir
                                        </a>
                                        <a href="{{ asset('uploads/cv/' ~ teacher.cv) }}" download class="btn btn-outline">
                                            <i class="fas fa-download"></i> Télécharger
                                        </a>
                                    </div>
                                </div>
                            {% endif %}
                            
                            <div class="upload-area" id="cv-upload-area">
                                <input type="file" id="cv-upload" accept=".pdf,.doc,.docx" style="display: none;">
                                <div class="upload-content">
                                    <i class="fas fa-cloud-upload-alt"></i>
                                    <h4>{{ teacher.cv ? 'Mettre à jour le CV' : 'Télécharger un CV' }}</h4>
                                    <p>Formats acceptés: PDF, DOC, DOCX (max 10MB)</p>
                                    <button type="button" class="btn btn-primary" onclick="document.getElementById('cv-upload').click()">
                                        <i class="fas fa-upload"></i> Choisir un fichier
                                    </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 spécialisations, vos centres d'intérêt...">{{ teacher.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>Langue</label>
                                    <select name="language" readonly disabled>
                                        <option value="fr" {{ teacher.language == 'fr' ? 'selected' : '' }}>Français</option>
                                        <option value="en" {{ teacher.language == 'en' ? 'selected' : '' }}>English</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>Thème</label>
                                    <select name="theme" readonly disabled>
                                        <option value="light" {{ teacher.theme == 'light' ? 'selected' : '' }}>Clair</option>
                                        <option value="dark" {{ teacher.theme == 'dark' ? 'selected' : '' }}>Sombre</option>
                                        <option value="auto" {{ teacher.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 teacher.notificationPreferences ? 'checked' : '' }} disabled>
                                        <span class="checkmark"></span>
                                        Notifications par email
                                    </label>
                                    <label class="checkbox-label">
                                        <input type="checkbox" name="notificationPreferences[]" value="sms" 
                                               {{ 'sms' in teacher.notificationPreferences ? 'checked' : '' }} disabled>
                                        <span class="checkmark"></span>
                                        Notifications par SMS
                                    </label>
                                    <label class="checkbox-label">
                                        <input type="checkbox" name="notificationPreferences[]" value="push" 
                                               {{ 'push' in teacher.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/teacher-profile.js') }}"></script>
{% endblock %}