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

{% block title %}
  Examen code 
{% endblock %}

{% block body %}
    <div class="row">
        {# common flash messages bloc #}
        {{ include('common/flash_messages_bloc.html.twig') }}
        <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;
                                <a class="student-dashbord-service" href="{{ path('home') }}">Tableau de bord&nbsp;/&nbsp;</a>
                        </p>
                        <p class="text-primary mb-0 hover-cursor">Examen code</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <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">
                        Je m’inscris au code de la route !
                    </p>
                    <div class="row" id="go-to-alert">
                        <div class="col-sm-12">
                            <div class="alert alert-dismissible fade show" role="alert" id="show-result-message" style="display:none">
                                <p id="message-content"></p>
                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                            </div>
                        </div>
                    </div>

                    <div class="row px-4 pb-3">
                        {% if hasNotNeph %}
                                <div class="card bloc-radius bloc-border bloc-box-shadow mb-3">
                                    <div class="card-header bloc-radius-top-left bloc-radius-top-right">
                                        <b><p>Votre numéro NEPH est indispensable pour réserver votre place d’examen.</p></b>
                                    </div>
                                    <div class="card-body">
                                        <p>
                                            Pour l’obtenir, vous avez deux options :
                                        </p>
                                        <ul>
                                            <li>Contacter directement votre agence CER</li>
                                            <li>Effectuer la démarche de manière autonome sur le site de l’ANTS : 
                                                <a class="text-primary" href="https://permisdeconduire.ants.gouv.fr/demarches-en-ligne/inscription-examen-permis" target="_blank" rel="noopener noreferrer">
                                                    <b>Je fais la démarche</b>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="card bloc-radius bloc-border bloc-box-shadow mb-3">
                                    <div class="card-header bloc-radius-top-left bloc-radius-top-right">
                                        <b>J'inscris mon numéro NEPH</b>
                                    </div>
                                    <div class="card-body">
                                        {{ form_start(form) }}
                                        <div class="row">
                                            <div class="col-sm-12">
                                                {{ form_errors(form) }}
                                            </div>
                                        {{ form_end(form) }}
                                    </div>
                                </div>
                        {% else %}
                        {# search form #}
                        <div class="card bloc-radius bloc-border bloc-box-shadow p-0">
                            <div class="card-header bloc-radius-top-left bloc-radius-top-right">
                                <b>Je cherche ma session d'examen de code</b>
                            </div>
                            <div class="card-body">
                                {{ form_start(form, {'attr': {'id': 'search_sessions_form'}}) }}
                                <div class="row">
                                    <div class="col-sm-12">
                                        {{ form_errors(form) }}
                                    </div>
                                {{ form_end(form) }}
                            </div>
                        </div>
                        {% endif %}
                    </div>
                    </div>
                    {# show data #}
                    <div class="row px-4 pb-3 results-content" id="set-data">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <input type="hidden" id="route_sessions_search" value="{{ path('sessions_search') }}">
{% endblock %}
{% block pageJavascript %}
    <script>
        // handle click event for right button
        $(document).on('click', '.scrollmenu-right', async function (e) { 
            $(".scrollmenu-content").animate({
                scrollLeft: "+=175"
            }, "slow");
        });

        // handle click event for left button
        $(document).on('click', '.scrollmenu-left', async function (e) { 
            $(".scrollmenu-content").animate({
                scrollLeft: "-=175"
            }, "slow");
        });

        // handle click event for right button slots
        $(document).on('click', '.scrollmenu-slots-right', async function (e) { 
            $(".scrollmenu-slots-content").animate({
                scrollLeft: "+=175"
            }, "slow");
        });

        // handle click event for left button slots
        $(document).on('click', '.scrollmenu-slots-left', async function (e) { 
            $(".scrollmenu-slots-content").animate({
                scrollLeft: "-=175"
            }, "slow");
        });

        //change rayon
        $(document).on('change', '#search_exam_code_session_rayon', function (e) {
            const value = $(this).val();
            $('.label-rayon').html('Rayon <b>('+value+' km)</b>')
            return false;
        });

        //submit search session form
        $("#search_sessions_form").on('submit', async function(e){
            e.preventDefault();
            $("#set-data").html('<span><i class="fas fa-spinner fa-spin me-3 icon-md text-primary"></i></span>');
            route = $("#route_sessions_search").val();
            $("#search_exam_code_session_submit").html('<i class="fas fa-spinner fa-spin"></i>');
            const submittedData = $('form').serializeArray();
            await $.ajax({
                type: "POST",
                url: route,
                data: submittedData,
                cache: false,
                success: function(e){
                    var response = JSON.parse(e);
                    $("#search_exam_code_session_submit").html('Rechercher');
                    $( "#search_exam_code_session_submit" ).prop( "disabled", false );
                    
                    if(response['state'] === 'success')
                    {
                        $("#set-data").html(response.html)
                        $('#show-result-message').hide()
                    } else {
                        $('#message-content').html(response.message);
                        $('#show-result-message').removeClass('alert-success').addClass('alert-danger')
                        $('#show-result-message').show()
                        $("#set-data").html('');
                        //Go to #DIV
                        $(window).scrollTop($('#go-to-alert').offset().top);                        
                    }
                },
                error: function () {
                    $("#search_exam_code_session_submit").html('Rechercher');
                    $( "#search_exam_code_session_submit" ).prop( "disabled", false );
                    //we hide content
                    $("#set-data").html('');
                },
            })
        });

        //day bloc click
        $(document).on('click', '.day-bloc', async function (e) { 
            const element = $(this);
            const id = element.attr('data-id');
            const day = element.attr('data-day');
            if($("#chosen-date") && day){
                $('#chosen-date').html('le <b>'+day+'</b>')
            } 

            //show spinner
            $("#day-add-spinner").html('<i class="fas fa-spinner fa-spin me-3 icon-md text-primary"></i>');
            
            //remove selected element class any where
            await removeSelectedElementClassAnyWhere('.day-bloc');

            //then add only to this element
            await element.addClass("selected-element");

            //hide slots contents
            await hideAllSlotsContents();

            //hide all days contents
            await hideAllDaysContents();
           
            setTimeout(async () => {
                //show spinner
                await $("#day-add-spinner").html('');
                $("#"+id).removeClass('d-none');
            }, 300);

            return false;
        });

        //day bloc click
        $(document).on('click', '.slot-bloc', async function (e) {
            const element = $(this);
            const id = element.attr('data-id');
            const slot = element.attr('data-slot');
            if($("#chosen-slot") && slot){
                $('#chosen-slot').html('à <b>'+slot+'</b>')
            } 

            const addressCenter = element.attr('data-data');
            const dataAddressObject = JSON.parse(addressCenter);

            //show spinner
            $("#slot-add-spinner").html('<i class="fas fa-spinner fa-spin me-3 icon-md text-primary"></i>');

            //remove selected element class any where
            await removeSelectedElementClassAnyWhere('.slot-bloc');

            //then add only to this element
            await element.addClass("selected-element");

            //hide slots contents
            await hideAllSlotsContents();

            setTimeout(async () => {
                //show spinner
                await $("#slot-add-spinner").html('');
                $("#"+id).removeClass('d-none');
                $("#map").removeClass('d-none');
            }, 300);

            // Add event listener to the button
            handleButtonClick(dataAddressObject);

            return false;
        });

        function hideAllDaysContents(){
            //hide all other day blocs
            $(".day-content").each(function() {
                $(this).addClass("d-none");
            });            
        }

        //function hide all slots content
        function hideAllSlotsContents(){
            //hide all other day blocs
            $(".slot-content").each(function() {
                $(this).addClass("d-none");
            });            
        }

        //remove selected-element from all
        function removeSelectedElementClassAnyWhere(type){
            $(type).each(function(){
                $(this).removeClass("selected-element");
            })
        }
    </script>

{% endblock %}