<div class="modal fade" id="detailsCongeModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-orange-dark"> 
            <h5 class="modal-title">Détails de la demande de congés</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
            <form method="post" id="form-detail-conge" action="{% url 'gestion_conges:validation-des-conges' %}">
                {% csrf_token %}
                <input type="hidden" id="id_conge" value="">
                <div class="form-group mb-2">
                    <label for="motif_refus">Employé :</label>
                    <input type="text" class="form-control" id="employe" value="" readonly>
                </div>
                <div class="form-group mb-2">
                    <label for="type_conge">Type de congé :</label>
                    <select class="form-select" id="type_conge" readonly>
                        {% comment %} <option value="maladie">Maladie</option> {% endcomment %}
                        <option value="Conge Annuel">Conge Annuel</option>
                        {% comment %} <option value="conge_maternite">Conge Maternité</option> {% endcomment %}
                        {% comment %} <option value="conge_mariage">Conge Mariage</option>
                        <option value="conge_naissance">Conge Naissance</option>
                        <option value="conge_deces_proche">Conge de décès d'un proche</option>
                        <option value="conge_mariage_proche">Conge de mariage d'un proche</option>
                        <option value="autre">Autre</option> {% endcomment %}
                    </select>
                </div>
                <div class="form-group mb-2">
                    <label for="date_debut">Date début :</label>
                    <input type="date" class="form-control" id="date_debut" value="" readonly>
                </div>
                <div class="form-group mb-2">
                    <label for="date_fin">Date fin :</label>
                    <input type="date" class="form-control" id="date_fin" value="" readonly>
                </div>
                <div class="form-group mb-2">
                    <label for="nombre_jours">Nombre de jours :</label>
                    <input type="number" class="form-control" id="nombre_jours" value="" readonly>
                </div>
                <div class="form-group mb-2">
                    <label for="solde_restant">Solde restant :</label>
                    <input type="number" class="form-control" id="solde_restant" value="" readonly>
                </div>
                <div class="form-group mb-2">
                    <label for="date_demande">Date de la demande :</label>
                    <input type="text" class="form-control" id="date_demande" value="" readonly>
                </div>
                {% if employe_est_il_chef or est_chef_projet %}
                <hr>
                <h5 class="text-center">Validation par le supérieur hiérarchique</h5>
                <div class="d-flex align-items-center justify-content-center mb-2">
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="validation_hierarchique" id="validation_hierarchique_valide" value="valide">
                        <label class="form-check-label" for="validation_hierarchique_valide">Valide</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="validation_hierarchique" id="validation_hierarchique_refuse" value="refuse" {% if conge.validation_hierarchique == False %}checked{% endif %}>
                        <label class="form-check-label" for="validation_hierarchique_refuse">Refusé</label>
                    </div>
                </div>
                {% endif %}
                {% if membre_de_la_direction %}
                <hr>
                <h5 class="text-center">Validation par le directeur</h5>
                <div class="d-flex align-items-center justify-content-center mb-2">
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="validation_direction" id="validation_direction_valide" value="valide" {% if conge.validation_direction == True %}checked{% endif %}>
                        <label class="form-check-label" for="validation_direction_valide">Valide</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="validation_direction" id="validation_direction_refuse" value="refuse" {% if conge.validation_direction == False %}checked{% endif %}>
                        <label class="form-check-label" for="validation_direction_refuse">Refusé</label>
                    </div>
                </div>
                {% endif %}
                <hr>
                <div class="d-none form-group mt-3" id="motif_refus_container">
                    <label for="motif_refus">Motif de refus (si applicable) :</label>
                    <textarea class="form-control" id="motif_refus" rows="3"></textarea>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
            {% if employe_est_il_chef or membre_de_la_direction or est_chef_projet %}
                <button type="button" class="btn btn-success" id="bouton-enregistrer-detail-conge">Enregistrer</button>
            {% endif %}
        </div>
        </div>
    </div>
</div>