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

{% block title %}Liste des chapitres{% 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;
                        <a class="student-dashbord-service" href="{{ path('home') }}">Tableau de bord</a>
                        &nbsp;/&nbsp;
                    </p>
                    <p class="text-primary mb-0 hover-cursor">chapitres</p>
                </div>
            </div>
            <div class="d-flex justify-content-between align-items-end flex-wrap">
                {# <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('traffic_laws_chapter_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">
  {# 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 chapitres
        </p>
        <div id="content-table" class="">
            {# <div class="row p-2">
                <div class="col-sm-12">
                    <div class="row">
                        <div class="col-sm-12">
                            <form id="form-search-chapters">
                                <div class="input-group mb-0">
                                    <span class="input-group-text bg-white bloc-radius-top-left bloc-radius-bottom-left" id="basic-addon1">
                                    <i class="fa-solid fa-magnifying-glass"></i>
                                    <i class="searching-progress-chapters fas fa-spinner fa-spin d-none"></i>
                                    </span>
                                    <input type="text" class="form-control frm-input bloc-radius-top-right bloc-radius-bottom-right" style="height:40px;" id="search-input"  placeholder="Recherche..." aria-label="Search" aria-describedby="basic-addon1">
                                </div>
                            </form>
                        </div>
                    </div>
                    <div id="block-resultats-recherche-chapters" class="block-recherche-chapters bloc-border bloc-box-shadow"></div>
                </div>
            </div> #}
            {# 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>Titre</th>
                                            <th>Leçon</th>
                                            <th>Ordre d'affichage</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for trafficLawsChapter in trafficLawsChapters %}
                                            <tr class="bloc-line no-cursor-pointer"  data-id="{{ trafficLawsChapter.id }}">
                                                <td>{{ trafficLawsChapter|capitalize }} </td>
                                                <td>
                                                    {% if trafficLawsChapter.trafficLawsCourse %} <span>{{ trafficLawsChapter.trafficLawsCourse }}</span><br>{% endif %}
                                                </td>
                                                <td class="stop-propagation">
                                                    <span><input class="order-by-input m-1 input-width" data-id="{{trafficLawsChapter.id}}" data-current-value="{{ trafficLawsChapter.orderBy }}" type="text" value="{{ trafficLawsChapter.orderBy }}" /></span>
                                                </td>
                                                <td class="stop-propagation">
                                                    <a href="{{ path('traffic_laws_chapter_add_or_edit', {id: trafficLawsChapter.id}) }}" class="btn btn-outline-warning btn-icon me-3 mt-2 mt-xl-0 p-2">
                                                        <i class="mdi mdi-pencil btn-icon-append"></i>                          
                                                    </a>
                                                    <a class="delete-traffic-laws-chapter btn btn-outline-danger btn-icon me-3 mt-2 mt-xl-0 p-2" href="#" data-name="{{trafficLawsChapter}}" data-id="{{ trafficLawsChapter.id }}">
                                                        <i class="mdi mdi-delete btn-icon-append"></i>                          
                                                    </a>
                                                </td>
                                            </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Hidden routs -->
<input type="hidden" name="traffic_laws_chapter_id_delete" id="traffic_laws_chapter_id_delete" value="">
<input type="hidden" id="route_traffic_laws_chapter_delete" value="{{ path('traffic_laws_chapter_delete') }}">
<input type="hidden" id="route_export" value="{{ path('users_export') }}">
<input type="hidden" id="route_export" value="{{ path('users_export') }}">
<input type="hidden" id="route_show_traffic_laws_chapter_details" value="{{path('traffic_laws_chapter_add_or_edit')}}" />
<input type="hidden" id="route_change_order_by" value="{{ path('chapter_edit_order_by') }}">
<!-- Modal delete trafficLawsChapter -->
<div>
<!-- Modal reutilisable -->
<div {{ stimulus_controller('modal')}}>
  <a data-action="modal#openModal" id="btnDeletetrafficLawsChapter" class="hidden"></a>
  {{ include('common/_modal.html.twig',{
    modalTitle: 'Supprimer un chapitre',
    btnTitle: 'Confirmer la suppression',
    btnId: 'confirm_delete_traffic_laws_chapter',
    btnCancelId: 'btn_traffic_laws_chapter_cancel_delete',
    modalContent: '
        <div>
            <p>
                Vous êtes sur le point de supprimer définitivement la chapitre <span id="deletetrafficLawsChapterName"></span>.
            </p>
            <p>
                Sa suppression entraînera la destruction de toutes les données associées à cette chapitre.
            </p>
            <p>
                <strong style="color:#D84A38">Cette action est irréversible.</strong>
            </p>
        </div>'
  }) }}  
</div>

{% endblock %}
{% block pageJavascript %}
    <script>
        //row click
        $(document).on('click', '.row-click', function (e) {
            e.stopPropagation()
            var id = $(this).attr('data-id');
            url = $("#route_show_traffic_laws_chapter_details").val() + '/' + id;
            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_adherents.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');
        });
        //edite order by
        $(document).on('change', '.order-by-input', function (e) {
            e.stopPropagation()
            e.preventDefault();
            let oldVal = $(this).attr('data-current-value');
            let id = $(this).attr('data-id');
            let route = $("#route_change_order_by").val();

            if(oldVal !== $(this).val() && route && id){
                route = route + '/' + id;
                $.ajax({
                type: "PATCH",
                data: {'val' : $(this).val()},
                url: route,
                cache: false,
                success: function(e){
                    var response = JSON.parse(e);
                    if(response.state == 'error')
                    {
                        alert(response.message);
                        $(this).val(oldVal)
                    } else {
                        setTimeout(() => {
                            $("#content-table").load(location.href+" #content-table>*","");
                        }, 100);            
                    }
                }
                });
            }
            return false
        });
    </script>
{% endblock %}