{% extends 'base.html' %}
{% load static %}
{% block content %}
<div class="container-fluid mt-4">
    <div class="row">
        <div class="col-12">
            <div class="card shadow mb-4">
                <div class="card-header py-3 d-flex align-items-center justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">Liste des coureurs</h6>
                    <div>
                        <label for="filterClasse" class="mb-0 mr-2">Filtrer par classe :</label>
                        <select id="filterClasse" class="form-control d-inline-block" style="width:auto;">
                            <option value="">Toutes</option>
                            {% for classe in classes %}
                                <option value="{{ classe }}">{{ classe }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="coureursTable" class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th class="select-checkbox"></th>
                                    <th>Nom</th>
                                    <th>Prénom</th>
                                    <th>Classe</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for c in coureurs %}
                                <tr data-id="{{ c.id }}">
                                    <td class="select-checkbox"></td>
                                    <td>{{ c.nom }}</td>
                                    <td>{{ c.prenom }}</td>
                                    <td>{{ c.classe }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
                <!-- BOUTON pour ouvrir le modal -->
                <div class="card-footer text-right">
                    <button class="btn btn-success" id="openDossardsModal">
                        <i class="fas fa-file-pdf"></i> <span id="mainDossardsCountText">Générer 0 dossards</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
     <!-- Modal pour le formulaire dossards -->
    <div class="modal fade" id="dossardsModal" tabindex="-1" role="dialog" aria-labelledby="dossardsModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="dossardsModalLabel">Configuration des dossards</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                        <form method="post" id="dossardsForm" action="{% url 'dossards' %}">
                            {% csrf_token %}
                            <input type="hidden" name="coureur_ids" id="coureurIdsInput">
                            <div class="form-row">
                                <div class="form-group col-6">
                                    <label for="rowsInput">Étiquettes par colonne</label>
                                    <input type="number" class="form-control" id="rowsInput" name="rows" min="1" value="2" required>
                                </div>
                                <div class="form-group col-6">
                                    <label for="colsInput">Étiquettes par ligne</label>
                                    <input type="number" class="form-control" id="colsInput" name="cols" min="1" value="2" required>
                                </div>
                            </div>
                            <button type="submit" class="btn btn-success">Générer PDF 
                                <i class="fas fa-file-pdf" title="Générer PDF"></i>
                            </button>
                        </form>
                {% if error %}
                <div class="alert alert-danger mt-3">{{ error }}</div>
                {% endif %}
                {% if progress %}
                <div class="alert alert-info mt-3">{{ progress }}</div>
                {% endif %}
                {% if pdf_url %}
                <a href="{{ pdf_url }}" class="btn btn-primary mt-3">T\00e9l\00e9charger le PDF</a>
                {% endif %}
            </div>
            </div>
        </div>
    </div>
</div>
<style>
.dt-select-info span:contains('colonne'),
.dt-select-info span:contains('cellule') {
    display: none !important;
}
table.dataTable tbody td.select-checkbox {
    cursor: pointer;
    position: relative;
}
table.dataTable tr.selected td.select-checkbox:after {
    content: '\2714';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #007bff;
    font-size: 1.2em;
}
</style>
<link rel="stylesheet" href="{% static  'datatables/select.dataTables.min.css' %}" />
{% block extra_js %}
<script src="{% static 'jquery/jquery-3.6.0.min.js' %}"></script>
<script src="{% static 'bootstrap/bootstrap.bundle.min.js' %}"></script>
<script src="{% static 'jquery/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'bootstrap/dataTables.bootstrap4.min.js' %}"></script>
<script src="{% static  'datatables/dataTables.select.min.js' %}"></script>
<script src="{% static 'jquery/datatables.fr.js' %}"></script>
<script>
$(function() {
    if (!$.fn.DataTable.isDataTable('#coureursTable')) {
        var table = $('#coureursTable').DataTable({
            pageLength: 50,
            initComplete: function (settings, json) {
                table.rows().select();
            },
            select: {
                style: 'multi',
                selector: 'td.select-checkbox'
            },
            info: false,
            order: [[1, 'asc']],
            columnDefs: [
                { orderable: false, className: 'select-checkbox', targets: 0 }
            ],
            language: {
                url: "https://cdn.datatables.net/plug-ins/1.13.7/i18n/fr-FR.json"
            }
        });

        // Sélection/désélection totale via l'entête (exemple officiel)
        $('#coureursTable thead').on('click', 'th.select-checkbox', function() {
            if (table.rows({selected: true, search:'applied'}).count() === table.rows({search:'applied'}).count()) {
                table.rows({search:'applied'}).deselect();
            } else {
                table.rows({search:'applied'}).select();
            }
        });

        // Sélection individuelle par clic sur la case (exemple officiel)
        $('#coureursTable tbody').on('click', 'td.select-checkbox', function(e) {
            e.stopPropagation();
            var row = table.row($(this).closest('tr'));
            if (row.selected()) {
                row.deselect();
            } else {
                row.select();
            }
        });

        // Affichage du compteur
        function updateMainDossardsCount() {
            var count = table.rows({selected: true, search: 'applied'}).count();
            $('#mainDossardsCountText').text('Générer ' + count + ' dossards');
        }
        table.on('select deselect draw', updateMainDossardsCount);
        updateMainDossardsCount();

        // Filtre classe (colonne 3)
        $('#filterClasse').on('change', function() {
            var val = $(this).val();
            if(val) {
                table.column(3).search('^'+val+'$', true, false).draw();
            } else {
                table.column(3).search('').draw();
            }
            table.rows({search:'applied'}).select();
        });

        // Ouvre le modal au clic sur le bouton
        $('#openDossardsModal').on('click', function(e) {
            e.preventDefault();
            $('#dossardsModal').modal('show');
        });

        // Prépare la soumission du formulaire pour n'envoyer que les IDs sélectionnés
        $('#dossardsForm').on('submit', function(e) {
            var ids = [];
            table.rows({selected: true, search: 'applied'}).every(function(){
                var row = this.node();
                var id = $(row).data('id');
                if (id) ids.push(id);
            });
            $('#coureurIdsInput').val(ids.join(','));
            $('#dossardsModal').modal('hide');
        });
    }
});
</script>
{% endblock %}
{% endblock %}