{% extends 'base.html.twig' %}

{% block title %}Liste de tous les élèves{% endblock %}

{% block body %}
    <div class="row">
        <div class="col-md-12 grid-margin">
            <div class="d-flex justify-content-between flex-wrap">
                <div class="d-flex align-items-end flex-wrap">
                    <div class="d-flex">
                        <i class="mdi mdi-home text-muted hover-cursor"></i>
                        <p class="text-muted mb-0 hover-cursor">&nbsp;/&nbsp;Tableau de bord&nbsp;/&nbsp;</p>
                        <p class="text-primary mb-0 hover-cursor">Élèves</p>
                    </div>
                </div>
                <div class="d-flex justify-content-between align-items-end flex-wrap">
                    {# <div class="me-3 formSearch">
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text bg-white" id="search">
                                    <i class="mdi mdi-magnify"></i>
                                </span>
                            </div>
                            {{ form(formSearch) }}
                        </div>
                    </div> #}
                    {# <button type="button" id="btn-export" class="btn btn-light bg-white btn-icon me-3 mt-2 mt-xl-0">
                        <i class="mdi mdi-download text-muted"></i>
                    </button>
                    <button type="button" class="btn btn-light bg-white btn-icon me-3 mt-2 mt-xl-0">
                        <i class="mdi mdi-printer text-muted"></i>
                    </button> #}
                    <a href="{{ path('student_add_or_edit')}}" type="button" class="btn btn-outline-dark btn-icon me-3 mt-2 mt-xl-0 p-2">
                        <i class="mdi mdi-plus text-muted"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 pb-4">
            <div class="bloc-radius bloc-padding bloc-background-color bloc-border bloc-box-shadow text-center">
                <p><b>Total élèves</b></p>
                <span class="fs-5 fw-bolder">{{ generalStudentsCount }}</span>
            </div>
        </div>
        <div class="col-md-6 pb-4">
            <div class="bloc-radius bloc-padding bloc-background-color bloc-border bloc-box-shadow text-center">
                <p class="text-success"><b>Nouveaux élèves</b></p>
                <span class="fs-5 fw-bolder">{{ generalNewStudentsCount }}</span>
            </div>
        </div>
    </div>
    <div class="row">
        {# common flash messages bloc #}
        {{ include('common/flash_messages_bloc.html.twig') }}
        <div class="col-md-12 grid-margin stretch-card">
            <div class="card">
                <div class="card-body bloc-radius bloc-border bloc-box-shadow">
                    <p class="card-title">
                        Liste des élèves
                    </p>
                    {# show data #}
                    <div class="row">
                        <div class="col-md-12 stretch-card">
                            <div class="card">
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="data-table w-100">
                                            <thead>
                                                <tr>
                                                    <th></th>
                                                    <th>Informations</th>
                                                    <th classe="text-center">Fin des cours</th>                      
                                                    <th classe="text-center">Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {% for student in students %}
                                                    <tr 
                                                        class="bloc-line row-click-student" 
                                                        {% if customer %}
                                                            data-url="{{ path('student_details', { 'id': student.id, 'id_customer':customer.id }) }}" 
                                                        {% else %}
                                                            data-url="{{ path('student_details', { 'id': student.id }) }}" 
                                                        {% endif %}
                                                        
                                                        data-id="{{student.id}}"
                                                    >
                                                        <td>
                                                            <img class="profile-avatar-in-bloc" src="{% if student.image %}{{ asset(student.image) }}{% else %} {{asset('/images/default-no-image.jpg')}}{% endif %}" alt="image"/>
                                                        </td>
                                                        <td>
                                                            <div><b>{{ student|upper }}</b></div>
                                                            <div>Email: {{ student.email }}</div>
                                                            <div>Téléphone: {{ student.phone }}</div>
                                                            <div>{% if student.address %}Adresse: {{ student.address }} {% endif %}</div>
                                                            {% if student.establishments %}
                                                                    {% for establishment in student.establishments  %}
                                                                        <div>Établissement : {{establishment}}</div>
                                                                    {% endfor %}
                                                            {% endif %}
                                                        </td>
                                                        <td>
                                                            <div class="d-flex flex-wrap justify-content-center align-items-center">
                                                                <span>Cours en live :&nbsp;&nbsp;&nbsp;&nbsp; </span>
                                                                {% if "now"|date('Y-m-d') < student.liveCoursesDeadline|date('Y-m-d') %}
                                                                    <span class="badge rounded-pill bg-success">{{student.liveCoursesDeadline|date('d/m/Y')}}</span>
                                                                {% else %} 
                                                                    <span class="badge rounded-pill bg-danger">{{student.liveCoursesDeadline|date('d/m/Y')}}</span>
                                                                {% endif %}                    
                                                            </div>
                                                            <div class="d-flex flex-wrap justify-content-center align-items-center">
                                                                <span>Fiches de code :&nbsp; </span>
                                                                {% if "now"|date('Y-m-d') < student.fichesCoursesDeadline|date('Y-m-d') %}
                                                                    <span class="badge rounded-pill bg-success">{{student.fichesCoursesDeadline|date('d/m/Y')}}</span>
                                                                {% else %} 
                                                                    <span class="badge rounded-pill bg-danger">{{student.fichesCoursesDeadline|date('d/m/Y')}}</span>
                                                                {% endif %}                    
                                                            </div>
                                                            {# <div class="d-flex flex-wrap justify-content-center align-items-center">
                                                                <span>Séries de code :&nbsp; </span>
                                                                {% if student.enpcAcounts|length > 0 %}
                                                                    {% if "now"|date('Y-m-d') < student.traficLawsCoursesDeadline|date('Y-m-d') %}
                                                                        <span class="badge rounded-pill bg-success">{{student.traficLawsCoursesDeadline|date('d/m/Y')}}</span>
                                                                    {% else %} 
                                                                        <span class="badge rounded-pill bg-danger">{{student.traficLawsCoursesDeadline|date('d/m/Y')}}</span>
                                                                    {% endif %}                    
                                                                {% else %} 
                                                                    <span class="badge rounded-pill bg-danger">Aucun accès</span>
                                                                {% endif %}                    
                                                            </div> #}
                                                        </td>
                                                        <td class="stop-propagation">
                                                            {# <a href="{{ path('student_add_or_edit', {id: student.id}) }}" class="btn btn-outline-warning btn-icon me-3 my-2 mt-xl-0 p-2" title="Modifier">
                                                                <i class="mdi mdi-pencil btn-icon-append"></i>
                                                            </a> #}
                                                            <a class="delete btn btn-outline-danger btn-icon me-3 my-2 mt-xl-0 p-2" href="#" data-name="{{student}}" data-id="{{ student.id }}" title="Supprimer">
                                                                <i class="mdi mdi-delete btn-icon-append"></i>
                                                            </a>
                                                            <a href="{{ path('student_traffic_laws_general_progress', {id: student.id}) }}" class="btn btn-outline-warning btn-icon me-3 my-2 mt-xl-0 p-2" title="Progression">
                                                                <i class="mdi mdi-chart-line btn-icon-append"></i>
                                                            </a>
                                                            <a class="send-access btn btn-outline-warning btn-icon me-3 my-2 mt-xl-0 p-2" title="Envoyer les identifiants de connexion"  href="#" data-name="{{student}}" data-id="{{ student.id }}">
                                                                <i class="mdi mdi-send btn-icon-append"></i>
                                                            </a>
                                                            {# <a class="btn btn-outline-danger" href="{{path('enpc_auto_student_card', {id : student.id, id_customer: customer.id})}}" data-name="{{student}}" data-id="{{ student.id }}" title="Applications ENPC">
                                                                <span>Applications ENPC</span>
                                                            </a> #}
                                                        </td>
                                                    </div>
                                                {% endfor %}
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {# include student delete modal #}
    <!-- Hidden routs -->
    <input type="hidden" name="student_id_delete" id="student_id_delete" value="">
    <input type="hidden" id="route_delete" value="{{ path('student_delete') }}">
    <input type="hidden" id="route_export" value="{{ path('students_export') }}">
    {# <input type="hidden" id="route_show_student" value="{{path('student_details')}}" /> #}
    <input type="hidden" id="route_student_add_or_edit" value="{{path('student_add_or_edit')}}" />
	<input type="hidden" id="id_customer" value="{% if customer %}{{customer.id}}{% endif %}" />
	<input type="hidden" id="route_send_access" value="{{path('send_access')}}" />    
    <!-- Modal delete student -->
    <div {{ stimulus_controller( 'modal', { formUrl: path('student_add_or_edit') } ) }}>
        <a data-action="modal#openModal" id="btnDeleteStudent-modal" class="hidden"></a>
        {{ include('common/_modal.html.twig',{
            modalTitle: 'Supprimer un élève',
            btnTitle: 'Confirmer la suppression',
            btnId: 'confirm_delete',
            btnCancelId: 'btn_cancel_delete',
            modalContent: "
                <div>
                    <p>
                        Vous êtes sur le point de supprimer définitivement l'élève <span id='deleteStudentName'></span>.
                    </p>
                    <p>
                        Sa suppression entraînera la destruction de toutes les données associées à cet élève.
                    </p>
                    <p>
                        <strong style='color:#D84A38'>Cette action est irréversible.</strong>
                    </p>
                </div>"
        })
        }}
    </div>
{% endblock %}

{% block pageJavascript %}
    <script>
        $(document).on('click', 'a.delete', function (e) {
            e.preventDefault();
            var name = $(this).attr('data-name');
            $("#student_id_delete").val($(this).attr('data-id'));
            $("#deleteStudentName").html("<b>"+name+"</b>");
            setTimeout(() => {
                $("#btnDeleteStudent-modal")[0].click();
            }, 300);            
        });

        $(document).on('click', "#confirm_delete", function(){
            route = $("#route_delete").val() + '/' + $("#student_id_delete").val();
            $.ajax({
                type: "DELETE",
                url: route,
                cache: false,
                success: function(e){
                    $('#deleteAgendaModal').modal('hide');
                    setTimeout(() => {
                        $("#cancel_modal").click();
                    }, 300);            
                    var response = JSON.parse(e);
                    if(response.state == 'error')
                    {
                        alert(response.message);
                    }else{
                       location.reload();
                    }
                }
            });
            return false;
        });
        //click student bloc
        $(document).on('click', '.row-click-student', function (e) {
            e.stopPropagation()
    		var url = $(this).attr('data-url');
            setTimeout(() => {
                $(location).attr('href',url);
            }, 100);
        });
        //export devis
        $('#btn-export').click(function(e){
            const element = $(this);
            element.html('<i class="fas fa-spinner fa-spin"></i>');
            let route = $("#route_export").val();

            e.preventDefault();
            $.ajax({
                type: 'post',
                url: route,
                success: function(data){
                    let filename = 'liste_des_eleves.csv';
                    let csvFile = new Blob([data], {type: "text/csv"});
                    let downloadLink = document.createElement("a");
                    downloadLink.download = filename;
                    downloadLink.href = window.URL.createObjectURL(csvFile);
                    document.body.appendChild(downloadLink);
                    downloadLink.click();
                    element.html('<i class="mdi mdi-download text-muted"></i>');
                },
                error: function() {
                    element.html('<i class="mdi mdi-download text-muted"></i>');
                }
            })
            $('#start_date').datepicker("option", "dateFormat", 'dd/mm/yy');
            $('#end_date').datepicker("option", "dateFormat", 'dd/mm/yy');
        });
        // search bar
    </script>
{% endblock %}