{# templates/superadmin_v2/configuration/sa_pages_list.html.twig #}
{% extends 'superadmin_v2/superadmin.html.twig' %}

{% block title %}Tags services - {{ parent() }}{% endblock %}

{% block body %}
    {{ render(controller('App\\Controller\\Superadmin\\SaLayoutController::breadcrumb', {'rubriques_id':rubriques_id, 'action':filariane_action} )) }}

    {{ include('superadmin_v2/layout/sa_tab.html.twig') }}

    <div class="section__content section__content--p30">
        {{ include('superadmin_v2/layout/sa_debug.html.twig') }}

        {{ include('superadmin_v2/layout/sa_alert.html.twig') }}

        <div class="container-fluid">
            <div class="row">
                <div class="table-data__tool" style="width:100%;">
                    <div class="table-data__tool-left col-lg-5">
                        <div class="row form-group fg-m-bottom" style="margin:6px 0!important;">
                            <div class="col col-md-5 spa-col-label fg-m-bottom">
                                <label id="list_categorie" class="form-control-label spa-label">Catégorie</label>
                            </div>
                            <div class="col-12 col-md-6 fg-m-bottom">
                                <select class="form-control" id="f_service" onchange="window.location.href='{{ path('superadmin_pages_list') }}?categorie=' + $(this).val();">
                                    <option value="all">Tous</option>
                                    {% for key, cat in categories %}
                                        {% set selected = key == categorie ? 'selected' : '' %}
                                        <option value="{{ key }}" {{ selected }}>{{ cat }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                {{ include('superadmin_v2/layout/sa_paginator.html.twig') }}

                <div class="table-responsive table--no-card m-b-30">
                    {% if nb_pages >= page %}
                    <table class="table table-borderless table-striped table-earning">
                        <thead>
                            <tr>
                                <!--th class="width-10">Catégorie</th>
                                <th class="width-25">Page</th-->
                                <th>Page</th>
                                <th class="width-15">Actions</th>
                            </tr>
                        </thead>
                        <tbody id="list_page_content">
                        {{ render(controller( 'App\\Controller\\Superadmin\\SaPagesController::pageContent', {'listing': listing, 'categorie': categorie} )) }}
                        </tbody>
                    </table>
                    {% endif %}
                </div>

                {% if page <= nb_pages %}{{ include('superadmin_v2/layout/sa_paginator.html.twig') }}{% endif %}
            </div>

            {{ include('superadmin_v2/layout/sa_footer.html.twig') }}
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript">
        window.lengthOfList = {{ listing|length }};
        // <![CDATA[

    function reorderPage(id, index, upOrDown) {
        $.ajax({
            url: "{{ path('superadmin_reorder_pages') }}",
            type: 'POST',
            data: {
                id: id,
                categorie: '{{ categorie }}',
                upOrDown: upOrDown
            },
            dataType: 'json',
            success: (response) => {
                $('#list_page_content').html(response.listHtml.content);
                setTimeout(() => {
                    upDownClickEvent(window.lengthOfList);
                }, 50)
            },
            error: (err) => {
                console.error(err);
            }
        });
    }

    function upDownClickEvent(lengthOfList) {
        for (let i = 1; i <= lengthOfList; i++) {
            $(`#reorder_page_up_${i}`).off('click').on('click', () => {
                reorderPage($(`#table_row_td_1_${i}`).data('row_id'), i, -1);
            })

            $(`#reorder_page_down_${i}`).off('click').on('click', () => {
                reorderPage($(`#table_row_td_1_${i}`).data('row_id'), i, 1);
            })
        }
    }

    $(document).ready(function(){
        upDownClickEvent(window.lengthOfList);

        $(document).on('click', 'form#edit_tags_form #edit_tags_submit', function(){
            var ckeck = 0;
            
            if ($('form#edit_tags_form input#menu_lab').val().length == 0) {	
                ckeck += 1;
                $('form#edit_tags_form input#menu_lab').addClass('is-invalid');
                $('div#menu-error').html("Veuillez insérer le label menu");
                $('form#edit_tags_form input#menu_lab').focus(function(){
                    $(this).removeClass('is-invalid');
                    $('div#menu-error').html('');
                });            
            }

            if ($('form#edit_tags_form input#fad').val().length == 0) {	
                ckeck += 1;
                $('form#edit_tags_form input#fad').addClass('is-invalid');
                $('div#fad-error').html("Veuillez insérer le fil d'ariane");
                $('form#edit_tags_form #fad').focus(function(){
                    $(this).removeClass('is-invalid');
                    $('div#fad-error').html('');
                });            
            }

            if ($('form#edit_tags_form textarea#title_sans_ville').val().length == 0) {	
                ckeck += 1;
                $('form#edit_tags_form textarea#title_sans_ville').addClass('is-invalid');
                $('div#title-sans-ville-error').html("Veuillez insérer le title sans ville");
                $('form#edit_tags_form #title_sans_ville').focus(function(){
                    $(this).removeClass('is-invalid');
                    $('div#title-sans-ville-error').html('');
                });            
            }

            if ($('form#edit_tags_form textarea#description_sans_ville').val().length == 0) {	
                ckeck += 1;
                $('form#edit_tags_form textarea#description_sans_ville').addClass('is-invalid');
                $('div#description-sans-ville-error').html("Veuillez insérer la description sans ville");
                $('form#edit_tags_form #description_sans_ville').focus(function(){
                    $(this).removeClass('is-invalid');
                    $('div#description-sans-ville-error').html('');
                });            
            }

            if ($('form#edit_tags_form textarea#title_avec_ville').val().length == 0) {	
                ckeck += 1;
                $('form#edit_tags_form textarea#title_avec_ville').addClass('is-invalid');
                $('div#title-avec-ville-error').html("Veuillez insérer le title avec ville");
                $('form#edit_tags_form #title_avec_ville').focus(function(){
                    $(this).removeClass('is-invalid');
                    $('div#title-avec-ville-error').html('');
                });            
            }

            if ($('form#edit_tags_form textarea#description_avec_ville').val().length == 0) {	
                ckeck += 1;
                $('form#edit_tags_form textarea#description_avec_ville').addClass('is-invalid');
                $('div#description-avec-ville-error').html("Veuillez insérer la description avec ville");
                $('form#edit_tags_form #description_avec_ville').focus(function(){
                    $(this).removeClass('is-invalid');
                    $('div#description-avec-ville-error').html('');
                });            
            }
            
            if (ckeck == 0) {
                $('form#edit_tags_form').submit();
                return true;
            } else {
                return false;
            }
        });
    });
    // ]]>

    function tagsModal(id){
        $('#app_modal').html('<div class="modal-dialog modal-lg" role="document"><div class="modal-content"><div class="modal-header"><h5 class="modal-title"></h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><div class="modal-body"></div></div></div>');
        $.ajax({
            url : "{{ path('superadmin_pages_list') }}/" + id + "/tags-form",
            dataType : 'json',
            success : function(response){
                if (response.code == 200) {
                    $('#app_modal').html(response.html);
                }
            },
            error : function(e){
            }
        });
    }
    </script>
{% endblock %}