{% extends 'App/_include/_layout.main.html.twig' %}
{% block page_content %}
    <div class="cell small-12">
        <div class="grid-x header_title_and_action">
            <div class="cell small-12  medium-auto header_title">
                <h1><i class="fa fa-thermometer-1"></i>{{ 'dimension.title.list'|trans }}</h1>
            </div>
            <div class="cell small-12  medium-shrink header_action">
                <button class="button save small" type="button" data-open="modalAddDimension"><i class="fa fa-plus"></i> {{ 'dimension.button.add'|trans }}</button>
            </div>
        </div>
    </div>
    <div class="cell small-12">
        <div id="dt_container" class="grid-x"></div>
        {% if dt_settings.data.data_set|length < 1 %}
            <p class="mt-2 text-center">{{ 'emptyData'|trans }}</p>
        {% endif %}
    </div>
    {# MODAL ADD #}
    <div class="reveal" id="modalAddDimension" data-reveal>
        <div class="reveal-title">{{ 'dimension.title.add'|trans }}</div>
        <div class="reveal-body">
            {{ form_start(formAddDimension, {'attr': {'id': 'formAddDimension'}}) }}
            <div class="grid-x grid-padding-x">
                <div class="cell small-3 text-right">{{ form_label(formAddDimension.longueur) }}</div>
                 <div class="cell small-9">{{ form_widget(formAddDimension.longueur) }}</div>
                <div class="cell small-3 text-right">{{ form_label(formAddDimension.largeur) }}</div>
                <div class="cell small-9">{{ form_widget(formAddDimension.largeur) }}</div>
            </div>
            {{ form_end(formAddDimension) }}
        </div>
        <div class="reveal-footer">
            <button data-close class="button small cancel">{{ 'cancel'|trans }}</button>
            <button class="button small save" id="btn_submit_add_dimension">{{ 'save'|trans }}</button>
        </div>
        <button class="close-button"  data-close aria-label="Close modal" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>

    {# Modal Edition #}
    <div class="reveal" id="modalEditDimension" data-reveal>
        <div class="reveal-title">{{ 'dimension.title.edit'|trans }}</div>
        <div class="reveal-body" id="modalEditDimensionBody">
        </div>
        <div class="reveal-footer">
            <button data-close class="button small cancel">{{ 'cancel'|trans }}</button>
            <button class="button small update" id="btn_submit_edit_dimension">{{ 'edit'|trans }}</button>
        </div>
        <button class="close-button"  data-close aria-label="Close modal" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    {# Modal Disable / Enable #}
    <div class="reveal red" id="modalDeleteDimension" data-reveal>
        <div class="reveal-title" id="modalDeleteDimensionTitle"></div>
        <div class="reveal-body" id="modalDeleteDimensionBody"></div>
        <div class="reveal-footer">
            <button data-close class="button small cancel">{{ 'cancel'|trans }}</button>
            <button class="button small delete" id="btn_submit_delete_dimension">{{ 'delete'|trans }}</button>
        </div>
        <button class="close-button"  data-close aria-label="Close modal" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    {# Modal confirm delete #}
    <div class="reveal red" id="modalConfirmDeleteDimension" data-reveal>
        <div class="reveal-title">{{ 'dimension.title.disable.confirm'|trans }}</div>
        <div class="reveal-body" id="modalConfirmDeleteDimensionBody"></div>
        <button class="close-button"  data-close aria-label="Close modal" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
{% endblock %}
{% block javascript_footer %}
    {{ parent() }}
    <script>
        $(document).ready(function(){
            {% include 'App/_include/_export/_modal.export.js.twig' %}
            {% import 'App/_include/_import/_modal.import.js.twig'  as macro_import_js %}
            {{ macro_import_js.js_import_general_functions() }}
            {{ macro_import_js.js_import('dimension', 0) }}

            let formAddDimension = $('#formAddDimension');
            let form_parsley_add_dimension = $(formAddDimension).parsley(parsley_options);
            let btn_submit_add_dimension =  $('#btn_submit_add_dimension');

            let modal_add_dimension =  $('#modalAddDimension'),
                modal_delete = $('#modalDeleteDimension'),
                title_modal_delete = $('#modalDeleteDimensionTitle'),
                body_modal_delete = $('#modalDeleteDimensionBody'),
                btn_delete = $('#btn_submit_delete_dimension'),
                btn_confirm_delete = $('#btn_submit_confirm_delete_dimension');

            let dtToolbar_dimension = new dtToolbar(document.getElementById('dt_container'),  {{ dt_settings|json_encode|raw }}, [{'type':'button','title': '{{ "datatable.custom_button.export" | trans }}', 'id':'btn_call_export','icon':'fa-cloud-upload'},{'type':'button','title': '{{ "datatable.custom_button.import" | trans }}', 'id':'btn_call_import','icon':'fa-cloud-download'}]);

            $(dtToolbar_dimension.table).children('tbody').on( 'click', '.editDimension', function (e){
                let current_id = $(this).data('uid');
                editDimension(current_id);
            });

            $(dtToolbar_dimension).on('btn_custom.click', function(e, data){
                if(data.id === 'btn_call_export'){
                    selected_ids = data.data;
                    $('#modalExportFile').foundation('open');
                }
                else if(data.id === 'btn_call_import'){
                    $('#modalStepFile_0').foundation('open');
                }
            });

            function editDimension(dimension_id){
                let url = "{{ url('app_dimension_ajax_edit',{'dimension':'__00__'}) }}";
                url = url.replace('__00__',dimension_id);
                $.ajax({
                    url:url,
                    method:'GET',
                    success: function (html) {
                        let modal = $('#modalEditDimension'),
                            modalbody = $('#modalEditDimensionBody');
                        $(modalbody).html(html);
                        $(modal).foundation('open');
                        let formEditDimension = $('#formEditDimension');
                        let form_parsley_edit_dimension = $(formEditDimension).parsley(parsley_options);
                        let btn_submit_edit_dimension =  $('#btn_submit_edit_dimension');
                        $(btn_submit_edit_dimension).click(function(){
                            form_parsley_edit_dimension.validate();
                            form_parsley_edit_dimension.whenValid().then(function () {
                                $(btn_submit_edit_dimension).html(btn_spin);
                                $(formEditDimension).submit();
                            });
                        });
                    }
                });
            }

            $(dtToolbar_dimension.table).children('tbody').on( 'click', '.btnOpenModalDeleteDimension', function (e){
                let current_dimension_id = $(this).data('uid');
                $(title_modal_delete).html("{{ 'dimension.title.disable.text'|trans }}");
                $(body_modal_delete).html("{{ 'dimension.body.disable'|trans }}");
                $(btn_delete).html("{{ 'disable'|trans }}");

                toggleDimension(current_dimension_id);
                $(modal_delete).foundation('open');
            });

            // Add Dimension
            $(btn_submit_add_dimension).click(function(){
                form_parsley_add_dimension.validate();
                form_parsley_add_dimension.whenValid().then(function () {
                    $(btn_submit_add_dimension).html(btn_spin);
                    $(formAddDimension).submit();
                });
            });
            $(modal_add_dimension).on('open.zf.reveal', function () {
                $('#add_dimension_code').focus();
            });
            $(modal_add_dimension).on('closed.zf.reveal', function () {
                $(formAddDimension).trigger("reset");
            });


            function resetOnload(){
                $(formAddDimension).get(0).reset();
            }

            {# Build modal content with table where dimension is used #}
            function ajaxDeleteDimension(url, data) {
                $.ajax({
                    url: url,
                    data: {data :JSON.stringify(data)},
                    method:'POST',
                    success: function (response) {
                        if (response.hasOwnProperty('message') && response.message){
                            if (response.message.hasOwnProperty('error')) $('#modalConfirmDeleteDimensionBody').html(response.message.error);
                            let table = document.createElement('table'),
                                thead = document.createElement('thead'),
                                trh = document.createElement('tr'),
                                th1 = document.createElement('th'),
                                th2 = document.createElement('th'),
                                th3 = document.createElement('th'),
                                th4 = document.createElement('th'),
                                tbody = document.createElement('tbody');

                            table.classList.add('style-light', 'jump', 'mt-1');
                            th1.innerHTML = "{{ 'article.property.code'|trans|capitalize }}";
                            th2.innerHTML = "{{ 'article.property.designationCourte'|trans|capitalize }}";
                            th3.innerHTML = "{{ 'article.property.commentaire'|trans|capitalize }}";
                            th4.innerHTML = "{{ 'article.property.famille'|trans|capitalize }}";
                            
                            table.append(thead);
                            thead.append(trh);
                            trh.append(th1);
                            trh.append(th2);
                            trh.append(th3);
                            trh.append(th4);
                            table.append(tbody);
                            
                            response.message.list.map(function (row) {
                                let tr = document.createElement('tr'),
                                    td1 = document.createElement('td'),
                                    td2 = document.createElement('td'),
                                    td3 = document.createElement('td'),
                                    td4 = document.createElement('td'),
                                    article_url = "{{ url('app_article_edit', {'article' : '__00__'}) }}";

                                article_url = article_url.replace('__00__', row.article_id);

                                tr.addEventListener('click', function () {
                                    window.location = article_url;
                                });
                                td1.innerHTML = row.article_code;
                                td2.innerHTML = row.article_designation;
                                td3.innerHTML = row.article_commentaire;
                                td4.innerHTML = row.famille_code+' '+row.famille_libelle;
                                tr.append(td1);
                                tr.append(td2);
                                tr.append(td3);
                                tr.append(td4);
                                tbody.append(tr);
                            });
                            $('#modalConfirmDeleteDimensionBody').append(table);

                            $('#modalConfirmDeleteDimension').foundation('open');
                        } else if (response.hasOwnProperty('redirect') && response.redirect){
                            window.location = response.redirect;
                        }
                    }
                });
            }
 
            function toggleDimension(current_dimension_id) {
                $(modal_delete).on('open.zf.reveal', function() {
                    $(btn_delete).unbind('click');
                    $(btn_delete).on('click', function () {
                        let url = "{{ url('app_dimension_toggle',{'dimension':'__00__'}) }}",
                            data = {
                                token: "{{csrf_token('app_dimension_toggle')}}",
                                confirmed: false
                            }
                        ;
                        url = url.replace('__00__', current_dimension_id);
                        ajaxDeleteDimension(url, data);
                        $('#modalConfirmDeleteDimension').on('open.zf.reveal', function() {
                            $(btn_confirm_delete).unbind('click');
                            $(btn_confirm_delete).on('click', function() {
                                data.confirmed = true;
                                ajaxDeleteDimension(url,data);
                            });
                        });
                    });
                });
            }

            resetOnload();

{#            {% include 'App/_include/_import/_modal.import.js.twig'  with {'entity': 'dimension' }%}#}
        });
    </script>
{% endblock %}