{% load tags_personnaliser %}
<div class="modal fade" id="modalDetailProjet{{ activite.id }}" tabindex="-1">
    <div class="modal-dialog  ">
        <div class="modal-content">
            <div class="modal-header ">
                <h5 class="modal-title">Détails du projet </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row g-3">
                    <div class="col" id="detail-projet-container">
                        <form method='post' action="{% url 'gestion_projet:mises-a-jour-projet' %}" id="detail-projet-form">
                            {% csrf_token %}
                            <div class="form-group mb-2">
                                <label>Id projet:</label>
                                <input type="text" class="form-control" id="detail_id_projet" name='id_projet' readonly>
                            </div>
                            <div class="form-group mb-2">
                                <label> Nom projet :</label>
                                <input type="text" class="form-control" id="detail_nom_projet" name='nom_projet'>
                            </div>
                            <div class="form-group mb-2">
                                <label>Numero de convention:</label>
                                <input type="text" class="form-control" id="detail_numero_convention" name="numero_convention">
                            </div>
                            <div class="form-group mb-2">
                                <label>Date de début :</label>
                                <input type="date" class="form-control" id="detail_date_debut" name='date_debut'>
                            </div>
                            <div class="form-group mb-2">
                                <label>Date de fin :</label>
                                <input type="date" class="form-control" id="detail_date_fin" name='date_fin'>
                            </div>
                            <div class="form-group mb-2">
                                <label> Type de  projet </label>
                                <select class="form-select" id="detail_type_projet" name='type_projet'>
                                    <option value="laboratoire">Laboratoire</option>
                                    <option value="épidémiologie">Épidémiologie</option>
                                    <option value="sciences sociales">Sciences sociales</option>
                                    <option value="cliniques">Cliniques</option>
                                    <option value="autre">Autre</option>
                                </select>
                            </div>
                            <div class="form-group mb-2">
                                <label> Domaine de recherche </label>
                                <select class="form-select" multiple id="detail_domaine_recherche" name="domaine_recherche">
                                    <option value="sciences_sociales">Sciences sociales</option>
                                    <option value="naturelles">Naturelles</option>
                                    <option value="humaines">Humaines</option>
                                    <option value="veterinaires">Vétérinaires</option>
                                </select>
                            </div>
                            <div class="form-group mb-2">
                                <label>Budget :</label>
                                <input type="number" class="form-control" id="detail_budget" name='budget'>
                            </div>
                            <div class="form-group mb-2">
                                <label>Budget RH:</label>
                                <input type="number" class="form-control" id="detail_budget_rh" name='budget_RH'>
                            </div>
                            <div class="form-group mb-2">
                                <label>Description :</label>
                                <textarea class="form-control" id="detail_description" name='description'></textarea>
                            </div>
                            <div class="form-check-group mb-2">
                                <label class="form-check-label">Statut :</label>
                                <input type="text" class="form-control" id="detail_statut" readonly>
                            </div>
                            <button type='submit' class="btn btn-warning">
                                <i class="bi bi-pencil"></i> Modifier Projet
                            </button>
                        </form>
                        <hr class="my-4"> 
                        <div class="accordion" id="accordionDetailProjet">
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="employesAffectes">
                                    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                        Employés Affectés
                                    </button>
                                </h2>
                                <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="employesAffectes" data-bs-parent="#accordionDetailProjet">
                                    <div class="accordion-body">
                                        <div id="employes_affectes_projet"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="bailleursProjet">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                        Liste des bailleurs
                                    </button>
                                </h2>
                                <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="bailleursProjet" data-bs-parent="#accordionDetailProjet">
                                    <div class="accordion-body">
                                        <div id="bailleurs_projet"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                {% if user|has_group:"ressource_humaine"  %}
                    <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#modal_ajout_financement">
                        <i class="bi bi-plus-circle"></i> Ajouter un financement 
                    </button>
                {% endif %}
                <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>