{%  extends 'home/base.html' %}

{% load static %}
{% block content %}
<div class="container">
    <div class="row d-flex justify-content-center mt-3">
        <div class="d-flex justify-content-center align-items-center col-lg-3 ">
            <div class=""  id="manual-form">
                <div class="card">
                    <div class="card-header bg-dark">
                        <h4 class="text-center text-light">ENREGISTRER UN PARTICIPANT</h4>
                    </div>
                    <div class="card-body">
                        <form method="POST">
                            {% csrf_token %}
                            {{ form.as_p }}
                            <button type="submit" name="manual" class="btn btn-dark w-100">Submit</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-9 mt-3">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h4>LISTE DES PARTICIPANTS</h4>
                        <div style="border-left: 2px solid #000;">
                            <form method="POST" enctype="multipart/form-data">
                                {% csrf_token %}
                                <div class="container">
                                    <div class="row">
                                        <div class="col-sm-12 col-md-6">
                                            {{ file_form.as_p }}
                                        </div>
                                        <div class="col-sm-12 col-md-6 d-flex justify-content-center">
                                            <div class="mt-1">
                                                <button type="submit" name="import" class="btn btn-dark">Importer</button>
                                            </div>
                                        </div>

                                         <!-- <div class="col-12 d-flex justify-content-center mt-2">
                                            <a href="{% static 'files/model.txt' %}" class="btn btn-info" download="model.txt">Télécharger le modèle</a>
                                        </div> -->
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="participantsTable" class="display nowrap" style="width: 100%;">
                            <thead>
                                <tr>
                                    <th class="col">N°</th>
                                    <th class="col">Nom</th>
                                    <th class="col">Prenoms</th>
                                    <th class="col">Email</th>
                                    <th class="col">Téléphone</th>
                                    <th class="col">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for participant in participants %}
                                    <tr>
                                        <td>{{ forloop.counter }}</td>
                                        <td>{{ participant.last_name }}</td>
                                        <td>{{ participant.first_name }}</td>
                                        <td>{{ participant.email }}</td>
                                        <td>{{ participant.phone }}</td>
                                        <td>
                                            <a href="" class="btn btn-secondary"> 
                                                <i class='bx bx-pencil'></i>
                                            </a>
                                            <a href="{% url 'participants.delete' participant.id %}" class="btn btn-dark" onclick="deleteConfirmation(event, this.href)">
                                                <i class='bx bx-trash'></i>
                                            </a>
                                        </td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
    <script>
        function deleteConfirmation(event, url) {
            event.preventDefault()
            let confirmation = confirm('Voulez-vous supprimer ce participant ?')
            if (confirmation) 
                window.location.href = url
        }
        $(document).ready( function () {
           // $('#participantsTable').DataTable();

           new DataTable('#participantsTable', {
                responsive: true,
                rowReorder: {
                    selector: 'td:nth-child(5)'
                }
            });
            $('#id_fichier').on('change', function() {
                console.log('file changed');
                $("#manual-form").hide();
            });
        } );
    </script>
{% endblock %}