<div class="modal-overlay" id="professeurModal">
    <div class="modal modal-large">
        <div class="modal-header">
            <h2 id="modalTitle">Nouveau Professeur</h2>
            <button class="modal-close" onclick="closeModal()">&times;</button>
        </div>
        <div class="modal-body">
            <form id="professeurForm">
                <input type="hidden" id="professeurId">

                <div class="form-row">
                    <div class="form-group">
                        <label for="code">Code</label>
                        <input type="text" id="code" placeholder="Ex: PR2024001">
                        <small class="help-text">Laissez vide pour génération automatique</small>
                    </div>
                    <div class="form-group">
                        <label for="status">Statut</label>
                        <select id="status">
                            <option value="active">Actif</option>
                            <option value="inactive">Inactif</option>
                        </select>
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label for="nom">Nom <span class="required">*</span></label>
                        <input type="text" id="nom" required placeholder="Entrez le nom">
                    </div>
                    <div class="form-group">
                        <label for="prenom">Prénom <span class="required">*</span></label>
                        <input type="text" id="prenom" required placeholder="Entrez le prénom">
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label for="cin">CIN <span class="required">*</span></label>
                        <input type="text" id="cin" required placeholder="Entrez le CIN">
                    </div>
                    <div class="form-group">
                        <label for="email">Email <span class="required">*</span></label>
                        <input type="email" id="email" required placeholder="exemple@est.ma">
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label for="login">Login <span class="required">*</span></label>
                        <input type="text" id="login" required placeholder="Nom d'utilisateur">
                    </div>
                    <div class="form-group">
                        <label for="phone">Téléphone</label>
                        <input type="text" id="phone" placeholder="Entrez le numéro de téléphone">
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label for="specialite">Spécialité</label>
                        <input type="text" id="specialite" placeholder="Ex: Informatique, Mathématiques...">
                    </div>
                    <div class="form-group">
                        <label for="grade">Grade</label>
                        <select id="grade">
                            <option value="">Sélectionner un grade</option>
                            <option value="Professeur">Professeur</option>
                            <option value="Maître de Conférences">Maître de Conférences</option>
                            <option value="Professeur Assistant">Professeur Assistant</option>
                            <option value="Professeur Agrégé">Professeur Agrégé</option>
                        </select>
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label for="password">Mot de passe</label>
                        <div class="password-input">
                            <input type="password" id="password" placeholder="Laissez vide pour conserver l'actuel">
                            <button type="button" class="toggle-password" onclick="togglePassword('password')">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                        <small class="help-text">Minimum 6 caractères</small>
                    </div>
                    <div class="form-group">
                        <label for="password_confirm">Confirmer le mot de passe</label>
                        <div class="password-input">
                            <input type="password" id="password_confirm" placeholder="Confirmer le mot de passe">
                            <button type="button" class="toggle-password" onclick="togglePassword('password_confirm')">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" onclick="closeModal()">Annuler</button>
            <button type="button" class="btn btn-primary" onclick="saveProfesseur()">
                <i class="fas fa-save"></i> Enregistrer
            </button>
        </div>
    </div>
</div>
