{% extends 'base.html' %}
{% block content %}
<div class="main-content">
	<section class="section">
		{% block entete %}
		<div class="row">
			<div class="col-12 col-sm-12 col-lg-5">
				<div class="card card-primary">
					<div class="card-header">
						<div class="table-responsive">
							<table class="table upper-case"  style="width:100%;">
								<tr>
									<th>TYPE DE REUNION :</th>
									<th>lieu :</th>
									<th>DATE :</th>
								</tr>
								<tr>
									<td>{{reunion.type_reunion}}</td>
									<td>{{ reunion.lieu }}</td>
									<td>{{ reunion.date }}</td>
								</tr>
								<tr>
									<th>INTITULE :</th>
									<th>modérateur :</th>
									<th>Durée :</th>
								</tr>
								<tr>
									<td>{{ reunion.titre_reunion }}</td>
									<td>{{ reunion.modérateur }}</td>
									<td>{{ reunion.duree }} H</td>
								</tr>
								<tr>
									<th>theme :</th>
									<th>budget :</th>
									<th>statut :</th>
								</tr>
								<tr>
									<td>{{ reunion.theme }}</td>
									<td>{{ reunion.budget }}</td>
									<td>{{ reunion.statut }}</td>
								</tr>

							</table>
						</div>
					</div>

					<div class="card-footer">
						{% if reunion.statut == 'En cours' %}
						<a class="btn btn-primary btn-lg btn-block  text-white" href="{% url 'reunion:ajout_compte_rendu' id=reunion.id %}" >Ajouter compte rendu</a>
						<hr>
						<button class="btn btn-danger btn-lg btn-block" data-toggle="modal" data-target="#treminerModal">Terminer la reuniont</button>
						{% endif %}
						{% if reunion %}
						<hr>
						<a class="btn btn-success btn-lg btn-block" href="{% url 'reunion:resume_reunion' id=reunion.id %}">Voir resumé executif</a>

						{% else %}

						{% endif %}
						<hr>
						<!--button-- class="btn btn-warning btn-lg btn-block" data-toggle="modal" data-target="#ajoutenqueteModal">Lier une enquete à la reuniont</button-->
					</div>

					<canvas id="genderChart" width="100" height="100"></canvas>
				</div>

			</div>
			<hr>
			<div class="col-12 col-sm-12 col-lg-7">
				<div class="card card-warning">
					<div class="card-header upper-case">
						<h4>Liste des participants</h4>
						<div class="card-header-action">
							<div class=" row justify-content-center text-center">
								<button class="btn btn-primary btn-lg btn-block" data-toggle="modal" data-target="#addparticipantModal">Ajouter nouveau participant</button>
							</div>
						</div>
					</div>
					<div class="card-body  upper-case">
						<div class="table-responsive">
							<table class="table table-striped table-hover" id="tableExport" style="width:100%;">
								<thead>
								<tr>
									<th>prenom</th>
									<th>nom</th>
									<th>sexe</th>
									<th>age</th>
									<th>provenance</th>
									<th>activite</th>
								</tr>
								</thead>
								<tbody>
								{% for participant in participants %}
								<tr>
									<td>
										{{participant.prenom}}
									</td>
									<td>{{participant.nom}}</td>
									<td>{{participant.sexe}}</td>
									<td>{{participant.age}}</td>
									<td>{{participant.provenance}}</td>
									<td>{{participant.activite}}</td>
								</tr>
								{% endfor %}
								</tbody>
							</table>
							<nav aria-label="Page navigation">
								<ul class="pagination justify-content-end">
									{% if page_obj.has_previous %}
									<li class="page-item">
										<a class="page-link" href="?page={{ page_obj.previous_page_number }}">Prec</a>
									</li>
									{% endif %}

									<!-- Affiche les numéros de page -->
									{% for num in paginator.page_range %}
									{% if page_obj.number == num %}
									<!-- Page actuelle (lien désactivé) -->
									<li class="page-item active">
										<a class="page-link" href="#">{{ num }}</a>
									</li>
									{% elif num > page_obj.number|add:'-5' and num < page_obj.number|add:'5' %}
									<!-- Lien pour d'autres pages -->
									<li class="page-item">
										<a class="page-link" href="?page={{ num }}">{{ num }}</a>
									</li>
									{% endif %}
									{% endfor %}

									{% if page_obj.has_next %}
									<li class="page-item">
										<a class="page-link" href="?page={{ page_obj.next_page_number }}">Suiv</a>
									</li>
									{% endif %}
								</ul>
							</nav>

						</div>
					</div>
				</div>
			</div>
		</div>
		{% endblock %}
		{% block board %}
		<div class="row">

		</div>
		{% endblock %}
		{% block chart %}

		{% endblock %}
		{% block tache %}

		{% endblock %}
		{% block ticket %}

		{% endblock %}
	</section>
</div>
{% include 'ajoutparticipant.html' %}
{% include 'terminerreunion.html' %}
{% include 'ajoutenquetereunion.html' %}
<p>
    Total participants : {{ participantsc }} <br>
    - Hommes : {{ participantsh }} ({{ percent_h }}%) <br>
    - Femmes : {{ participantsf }} ({{ percent_f }}%)
</p>

<script>
    const data = {
        labels: [
            `Hommes - {{ percent_h }}%`,
            `Femmes - {{ percent_f }}%`
        ],
        datasets: [{
            label: 'Répartition par sexe',
            data: [{{ participantsh }}, {{ participantsf }}],
            backgroundColor: ['#36A2EB', '#FF6384'],
            hoverBackgroundColor: ['#36A2EB', '#FF6384']
        }]
    };

    const config = {
        type: 'doughnut',
        data: data,
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'top'
                },
                tooltip: {
                    enabled: true
                }
            }
        }
    };

    const genderChart = new Chart(
        document.getElementById('genderChart'),
        config
    );
</script>

<script type="text/javascript">
	$(document).ready(function() {
        {% if messages %}
            {% for message in messages %}
                iziToast.success({
                    title: '',
                    message: '{{message}}',
                    position: 'topRight'
                      });
            {% endfor %}
        {% endif %}
    });
</script>
{% endblock %}