{% load tags_personnaliser %}
<div class="modal fade" id="modalDetailEmploye" tabindex="-1" aria-labelledby="modalDetailEmployeLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header ">
                <h5 class="modal-title bi-pencil-square" id="modalDetailEmployeLabel">
                    Détails de l'employé <span id="detail-employe"></span>
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="modalDetailEmployeBody" data-url="{% url 'gestion_employe:enregistrer-detail-employe' %}">
                <div class="row g-3">
                    <input type="hidden" id="detail-id">
                    <div class="col-md-6">
                        {% csrf_token %}
                        <div class="form-group mb-2">
                            <label>Matricule :</label>
                            <input type="text" class="form-control" id="detail-matricule">
                        </div>
                        <div class="form-group mb-2">
                            <label>Date d'embauche :</label>
                            <input type="date" class="form-control" id="detail-dateEmbauche">
                        </div>
                        <div class="form-group mb-2">
                            <label>Département :</label>
                                <input type="text" class="form-control" id="detail-departement">
                        </div>
                        <div class="form-group mb-2">
                            <label>Sexe :</label>
                            <select id="detail-sexe" class="form-select">
                                <option value="">-- Sélectionner --</option>
                                <option value="h">Masculin</option>
                                <option value="f">Féminin</option>
                            </select>
                        </div>
                        <div class="form-group mb-2">
                            <label>Date de naissance :</label>
                            <input type="date" class="form-control" id="detail-dateNaissance">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group mb-2">
                            <label>Fonction :</label>
                            <select class="form-select" id='detail-fonction'>
                                <option value='chauffeur'>Chauffeur</option>
                                <option value='technicien_surface'>Technicien de surface</option>
                                <option value='qualiticien'>Qualiticien</option>
                                <option value='post_doctorant'>Post-Doctorant</option>
                                <option value='logisticien'>Logisticien</option>
                                <option value='data_manager'>Data Manager</option>
                                <option value='raf'>RAF</option>
                                <option value='comptable'>Comptable</option>
                                <option value='assistant_direction'>Assistante de direction</option>
                                <option value='directeur'>Directeur</option>
                            </select>
                        </div>
                        <div class="form-group mb-2">
                            <label>Email :</label>
                            <input type="email" class="form-control" id="detail-email">
                        </div>
                        <div class="form-group mb-2">
                            <label>Téléphone :</label>
                            <input type="text" class="form-control" id="detail-telephone">
                        </div>
                        <div class="form-group mb-2">
                            <label>Adresse :</label>
                            <input type="text" class="form-control" id="detail-adresse">
                        </div>
                    </div>
                </div>
                <div class="row">
                    {% if user|has_group:"ressource_humaine"  %}
                        <div class="col">
                            <button type="button" class="btn btn-success d-block m-auto" id="enregistrerDetail">
                                <i class="bi bi-save"></i> Enregistrer
                            </button>
                        </div>
                    {% endif %}
                </div>
                <div class="row">
                    <div class="col text-end">
                        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalDocuments">
                            <i class="bi bi-folder2-open"></i> Voir les documents RH
                        </button>
                    </div>
                </div>
                <hr class="my-4">
                <div class="row">
                    <div class="col">
                        <div class="d-flex justify-content-between">
                            <h5>
                                <i class="bi bi-file-earmark-text me-2"></i> Liste des Contrats
                            </h5>
                            {% if user|has_group:"ressource_humaine"  %}
                                <div>
                                    <button class="btn btn-secondary" disabled>
                                        <i class="bi bi-file-earmark-lock"></i> Contrat actif
                                    </button>
                                    <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#modalContrat{{ item.employe.id }}">
                                        <i class="bi bi-file-earmark-text"></i> Créer contrat
                                    </button>
                                </div>
                            {% endif %}
                        </div>
                        {% csrf_token %}
                        <div class="row" id="contrats-list"></div>
                    </div>
                </div>
                <hr class="my-4">
                <div class="row d-flex g-3">
                    <div class="d-flex justify-content-between">
                        <h5><i class="bi bi-pin-angle me-2"></i> Affectations</h5>
                        {% if user|has_group:"ressource_humaine"  %}
                            <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#modalAffectation" onclick="setEmployeId()">
                                <i class="bi bi-file-earmark-text"></i>Affecter 
                            </button>
                      {% endif %}
                    </div>
                    <div class="row">
                        <div id="affectations-list"></div>
                    </div>
                </div>
                <hr class="my-4">
                <div class="row g-3">
                    <h5 class="mb-3"><i class="bi bi-award-fill me-2"></i> Formations</h5>
                    <div class="row" id="formations-list"></div>
                </div>
            </div>
            <div class="modal-footer bg-light">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                    <i class="bi bi-x-circle"></i> Fermer
                </button>
            </div>
        </div>
    </div>
</div>