<!-- Modal Create/Edit Avancement -->
<div class="modal-overlay" id="createEditModal">
    <div class="modal-content" style="max-width: 700px;">
        <div class="modal-header">
            <h2 id="modalTitle">Nouvel Avancement</h2>
            <button type="button" class="modal-close" onclick="closeModal()">&times;</button>
        </div>
        <div class="modal-body">
            <form id="avancementForm">
                <input type="hidden" id="avancementId" value="">

                <div class="form-group">
                    <label for="libelle">Libellé <span class="required">*</span></label>
                    <input type="text" id="libelle" name="libelle"
                           placeholder="Ex: Avancement d'échelon 2026" required>
                </div>

                <div class="form-group">
                    <label for="employee_id">employee <span class="required">*</span></label>
                    <select id="employee_id" name="employee_id" required onchange="onemployeeChange()">
                        <option value="">Sélectionner un employee</option>
                        <option value="ZOUANI">ZOUANI</option>
                        <option value="BENJELLOUN">BENJELLOUN</option>
                        <option value="ELAMRANI">ELAMRANI</option>
                        <option value="BADAOUI">BADAOUI</option>
                        <option value="CHAKIR">CHAKIR</option>
                        <option value="RAJI">RAJI</option>
                        <option value="BENNANI">BENNANI</option>
                        <option value="ELHASSANI">ELHASSANI</option>
                        <option value="TAZI">TAZI</option>
                        <option value="BOUSSAID">BOUSSAID</option>
                        <option value="FENNANE">FENNANE</option>
                        <option value="ZEROUAL">ZEROUAL</option>
                        <option value="CHBANI">CHBANI</option>
                        <option value="MANSOURI">MANSOURI</option>
                        <option value="NACIRI">NACIRI</option>
                        <option value="GHANNAM">GHANNAM</option>
                        <option value="BENCHARAIF">BENCHARAIF</option>
                        <option value="AITOUAZZO">AITOUAZZO</option>
                        <option value="ZOUINE">ZOUINE</option>
                        <option value="ELMOKHTARI">ELMOKHTARI</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="avancement_type_id">Type <span class="required">*</span></label>
                    <select id="avancement_type_id" name="avancement_type_id" required>
                        <option value="">Sélectionner un type</option>
                        <option value="Avancement d'échelon">Avancement d'échelon</option>
                        <option value="Avancement de grade">Avancement de grade</option>
                        <option value="Avancement exceptionnel">Avancement exceptionnel</option>
                        <option value="Reclassement">Reclassement</option>
                    </select>
                </div>

                <!-- Current Echelon (Read-only) -->
                <div class="form-group">
                    <label for="current_echellon">Échelon actuel du employee</label>
                    <input type="text" id="current_echellon" readonly style="background-color: #f3f4f6; cursor: not-allowed;">
                    <small style="color: #6b7280; display: block; margin-top: 4px;">Cet échelon est automatiquement récupéré du employee</small>
                </div>

                <div class="form-group">
                    <label for="echellon_source_id">Échelon source <span class="required">*</span></label>
                    <select id="echellon_source_id" name="echellon_source_id" required onchange="onEchelonSourceChange()">
                        <option value="">Sélectionner un échellon</option>
                        <option value="CODE-705">CODE-705</option>
                        <option value="CODE-706">CODE-706</option>
                        <option value="CODE-1003">CODE-1003</option>
                        <option value="CODE-1004">CODE-1004</option>
                        <option value="CODE-1005">CODE-1005</option>
                         <option value="CODE-1006">CODE-1006</option>
                        <option value="CODE-1007">CODE-1007</option>
                        <option value="CODE-1101">CODE-1101</option>
                        <option value="CODE-1102">CODE-1102</option>
                        <option value="CODE-1107">CODE-1107</option>
                        <option value="CODE-1204">CODE-1204</option>
                        <option value="CODE-1208">CODE-1208</option>
                    </select>
                    <small style="color: #6b7280; display: block; margin-top: 4px;">Doit correspondre à l'échelon actuel du employee</small>
                </div>

                <div class="form-group">
                    <label for="echellon_destination_id">Échelon destination <span class="required">*</span></label>
                    <select id="echellon_destination_id" name="echellon_destination_id" required>
                        <option value="">Sélectionner un échelon</option>
                        <option value="CODE-705">CODE-705</option>
                        <option value="CODE-706">CODE-706</option>
                        <option value="CODE-1003">CODE-1003</option>
                        <option value="CODE-1004">CODE-1004</option>
                        <option value="CODE-1005">CODE-1005</option>
                         <option value="CODE-1006">CODE-1006</option>
                        <option value="CODE-1007">CODE-1007</option>
                        <option value="CODE-1101">CODE-1101</option>
                        <option value="CODE-1102">CODE-1102</option>
                        <option value="CODE-1107">CODE-1107</option>
                        <option value="CODE-1204">CODE-1204</option>
                        <option value="CODE-1208">CODE-1208</option>
                    </select>
                    <small style="color: #6b7280; display: block; margin-top: 4px;">Prochain échelon automatiquement proposé</small>
                </div>

                <div class="form-group">
                    <label for="etat_avancement_id">État <span class="required">*</span></label>
                    <select id="etat_avancement_id" name="etat_avancement_id" required>
                        <option value="">Sélectionner un état</option>
                        <option value="En attente">En attente</option>
                        <option value="En cours">En cours</option>
                        <option value="Approuvée ">Approuvée</option>
                        <option value="Rejetée ">Rejetée</option>
                        <option value="En révision">En révision</option>
                    </select>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label for="date_demande">Date de demande</label>
                        <input type="date" id="date_demande" name="date_demande">
                    </div>
                    <div class="form-group">
                        <label for="date_decision">Date de décision</label>
                        <input type="date" id="date_decision" name="date_decision">
                    </div>
                </div>

                <div class="form-group">
                    <label for="description">Description</label>
                    <textarea id="description" name="description" rows="3"
                              placeholder="Description détaillée de l'avancement..."></textarea>
                </div>

                <div class="form-actions">
                    <button type="button" class="btn btn-secondary" onclick="closeModal()">
                        <i class="fas fa-times"></i> Annuler
                    </button>
                    <button type="button" class="btn btn-primary" id="saveBtn" onclick="saveAvancement()">
                        <i class="fas fa-save"></i> Enregistrer
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>