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

{% block title %}Liste des thématiques{% 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">Thématiques</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_theme_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>
{# search bar #}
{# ./ search bar #}
<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 thématiques
        </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-themes">
                                <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-themes 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-themes" class="block-recherche-themes 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></th>
                                <th><label>Titre</label></th>
                                <th>Catégorie</th>
                                <th>Ordre d'affichage</th>
                                <th>Action</th>
                            </tr>
                            </thead>
                            <tbody>
                                {% for trafficLawsTheme in trafficLawsThemes %}
                                    <tr class="bloc-line no-cursor-pointer"  data-id="{{ trafficLawsTheme.id }}">
                                        <td class="stop-propagation">
                                            <div class="w-100 text-center">
                                                <img class="bloc-radius profile-avatar-in-bloc" id="imageUploadPreview-{{trafficLawsTheme.id}}" src="{% if trafficLawsTheme.image %}{{ asset(trafficLawsTheme.image) }}{% else %} {{asset('/images/default-no-image.jpg')}}{% endif %}" alt="image">
                                                <form id="imageUploadForm-{{trafficLawsTheme.id}}" action="" method="POST" enctype="multipart/form-data" style="width:100%">
                                                    <span class="btn btn-sm btn-primary my-2 imageUploadBtn" data-id="{{trafficLawsTheme.id}}">
                                                        <span>
                                                            {% if trafficLawsTheme.image %}
                                                                Changer 
                                                            {% else %}
                                                                Sélectionner
                                                            {% endif %}
                                                        </span>
                                                    </span>
                                                    <input type="file" name="image" class="imageUploadFile" data-id="{{trafficLawsTheme.id}}" id="imageUploadFile-{{trafficLawsTheme.id}}" style="width:0;height:0">
                                                </form>
                                            </div>
                                        </div>

                                        <td>{{ trafficLawsTheme|capitalize }} </td>
                                        <td>
                                            {% if trafficLawsTheme.driversLicense %} <span>{{ trafficLawsTheme.driversLicense }}</span><br>{% endif %}
                                            {% if trafficLawsTheme.driverLicenseSubCategory %} <span>{{ trafficLawsTheme.driverLicenseSubCategory }}</span>{% endif %} 
                                        </td>
                                        <td class="stop-propagation">
                                            <span><input class="order-by-input m-1 input-width" data-id="{{trafficLawsTheme.id}}" data-current-value="{{ trafficLawsTheme.orderBy }}" type="text" value="{{ trafficLawsTheme.orderBy }}" /></span>
                                        </td>
                                        <td class="stop-propagation">
                                            <a href="{{ path('traffic_laws_theme_add_or_edit', {id: trafficLawsTheme.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-theme btn btn-outline-danger btn-icon me-3 mt-2 mt-xl-0 p-2" href="#" data-name="{{trafficLawsTheme}}" data-id="{{ trafficLawsTheme.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_theme_id_delete" id="traffic_laws_theme_id_delete" value="">
<input type="hidden" id="route_traffic_laws_theme_delete" value="{{ path('traffic_laws_theme_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_theme_details" value="{{path('traffic_laws_theme_add_or_edit')}}" />
<input type="hidden" id="imageUploadUrl" value="{{ path('upload_traffic_laws_theme_image') }}">
<input type="hidden" id="route_change_order_by" value="{{ path('theme_edit_order_by') }}">
<!-- Modal delete trafficLawsTheme -->
<div>
<!-- Modal reutilisable -->
<div {{ stimulus_controller('modal')}}>
  <a data-action="modal#openModal" id="btnDeletetrafficLawsTheme" class="hidden"></a>
  {{ include('common/_modal.html.twig',{
    modalTitle: 'Supprimer un thème',
    btnTitle: 'Confirmer la suppression',
    btnId: 'confirm_delete_traffic_laws_theme',
    btnCancelId: 'btn_traffic_laws_theme_cancel_delete',
    modalContent: '
        <div>
            <p>
                Vous êtes sur le point de supprimer définitivement le thème <span id="deletetrafficLawsThemeName"></span>.
            </p>
            <p>
                Sa suppression entraînera la destruction de toutes les données associées à ce thème.
            </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_theme_details").val() + '/' + id;
            setTimeout(() => {
                $(location).attr('href',url);
            }, 100);
        });
        //upload image
        $(document).on('click', '.imageUploadBtn', function (e) {
            var id = $(this).attr('data-id');
            $('#imageUploadFile-'+$(this).data('id')).trigger('click');
        });
        $(document).on('change', '.imageUploadFile', function (e) {
            var id = $(this).attr('data-id');
            var formData = new FormData(document.getElementById("imageUploadForm-"+id));
            formData.append('image',  document.getElementById('imageUploadFile-'+id).files[0]);

            $.ajax({
                type: "POST",
                data:  formData,
                enctype: 'multipart/form-data',
                processData: false,
                contentType: false,
                url: $("#imageUploadUrl").val()+'/'+id,
                cache: false,
                success: function(response){
                    if(response.success){
                       location.reload();
                        /*
                        $("#imageUploadPreview-"+id).fadeOut(function(){
                            $(this).attr('src',response.image);
                            $(this).fadeIn();
                        });
                        //*/
                    }else{
                        alert("Un problème est survenu lors de l'enregistrement de votre photo, vous pourrez changer votre photo ultérieurement.")
                    }
                }
            });
        });
        //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 %}