{% 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-truck"></i>{{ 'fournisseur.title.list'|trans }}</h1>
            </div>
            <div class="cell small-12  medium-shrink header_action">
                <button class="button save small" type="button" data-open="modalAddFournisseur"><i class="fa fa-plus"></i> {{ 'fournisseur.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 #}

    {% include 'App/Customer/Fournisseur/_modal.add.html.twig' with {'form': formAddFournisseur } %}
    {# Modal Edition#}
    <div class="reveal" id="modalEditFournisseur" data-reveal>
        <div class="reveal-title">{{ 'fournisseur.title.edit'|trans }}</div>
        <div class="reveal-body" id="modalEditFournisseurBody">
        </div>
        <div class="reveal-footer">
            <button data-close class="button small cancel">{{ 'cancel'|trans }}</button>
            <button class="button small update" id="btn_submit_edit_fournisseur">{{ '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="modalDeleteFournisseur" data-reveal>
        <div class="reveal-title">{{ 'fournisseur.title.delete'|trans }}</div>
        <div class="reveal-body">{{ 'fournisseur.body.delete'|trans }}</div>
        <div class="reveal-footer">
            <button data-close class="button small cancel">{{ 'cancel'|trans }}</button>
            <button class="button small delete" id="btn_submit_delete_fournisseur">{{ 'delete'|trans }}</button>
        </div>
        <button class="close-button"  data-close aria-label="Close modal" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>

    <div class="reveal red" id="modalConfirmDeleteFournisseur" data-reveal>
        <div class="reveal-title">{{ 'fournisseur.title.disable.confirm'|trans }}</div>
        <div class="reveal-body" id="modalConfirmDeleteFournisseurBody"></div>
        <div class="reveal-footer">
            <button data-close class="button small cancel">{{ 'cancel'|trans }}</button>
        </div>
        <button class="close-button"  data-close aria-label="Close modal" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    {% import 'App/_include/_import/_modal.import.html.twig' as macro_import_html %}
    {% if is_granted('ROLE_APP_SUB_IMPORT_FOURNISSEUR') %}
        {# Modal Import #}
        {{ macro_import_html.html_import(formImport, 'fournisseur.title.import'|trans, 0) }}
    {% else %}
        {{ macro_import_html.html_import_not_allowed('modal.title.import_not_allowed'|trans, 0) }}
    {% endif %}
    {# Modal Export #}
    {% include 'App/_include/_export/_modal.export.html.twig' with {'title': 'export_fournisseur.modal.title'|trans } %}

{% endblock %}
{% block javascript_footer %}
    {{ parent() }}
    <script>
        $(document).ready(function(){
            {% include 'App/_include/_export/_modal.export.js.twig'  %}

            var helper = $('#helper');
            let modal_delete = $('#modalDeleteFournisseur'),
                title_modal_delete = $('#modalDeleteFournisseurTitle'),
                body_modal_delete = $('#modalDeleteFournisseurBody'),
                btn_delete = $('#btn_submit_delete_fournisseur'),
                btn_confirm_delete = $('#btn_submit_confirm_delete_fournisseur');

            {% if dt_settings.data.data_set|length > 0 %}
            let dtToolbar_supplier = 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':{% if is_granted('ROLE_APP_SUB_IMPORT_FOURNISSEUR') %}'btn_call_import'{% else %}'btn_call_import_not_allowed'{% endif %},'icon':'fa-cloud-download'}]);

            $(dtToolbar_supplier).on('row.click', function(e, id){
                editFournisseur(id);
            });
            $(dtToolbar_supplier).on('row.click_action', function(e, data){
                let item_id = data.id;
                if(data.target.classList.contains('editFournisseur')){
                    editFournisseur(item_id);
                }
                else if(data.target.classList.contains('btnOpenModalDeleteFournisseur')){
                    $(modal_delete).foundation('open');
                    toggleFournisseur(item_id);
                }
            });

            $(dtToolbar_supplier).on('btn_custom.click', function(e, data){
                if(data.id === 'btn_call_export'){
                    selected_ids = data.data;
                    $('#modalExportFile').foundation('open');
                }
                {% if is_granted('ROLE_APP_SUB_IMPORT_FOURNISSEUR') %}
                else if(data.id === 'btn_call_import'){
                    $('#modalStepFile_0').foundation('open');
                }
                {% else %}
                else if(data.id === 'btn_call_import_not_allowed'){
                    $('#modalImportNotAllowed_0').foundation('open');
                }
                {% endif %}
            });

            function editFournisseur(item_id){
                let url = "{{ url('app_fournisseur_ajax_edit',{'fournisseur':'__00__'}) }}";
                url = url.replace('__00__',item_id);
                $.ajax({
                    url:url,
                    method:'GET',
                    success: function (html) {
                        let modal = $('#modalEditFournisseur'),
                            modalbody = $('#modalEditFournisseurBody');
                        $(modalbody).html(html);
                        $(modal).foundation('open');
                        let formEditFournisseur = $('#formEditFournisseur');
                        let form_parsley_edit_fournisseur = $(formEditFournisseur).parsley(parsley_options);
                        let btn_submit_edit_fournisseur =  $('#btn_submit_edit_fournisseur');
                        $(btn_submit_edit_fournisseur).click(function(){
                            form_parsley_edit_fournisseur.validate();
                            form_parsley_edit_fournisseur.whenValid().then(function () {
                                $(btn_submit_edit_fournisseur).html(btn_spin);
                                $(formEditFournisseur).submit();
                            });
                        });
                    }
                });
            }


            function toggleFournisseur(current_fournisseur_id) {
                    $(btn_delete).unbind('click');
                    $(btn_delete).on('click', function () {
                        let url = "{{ url('app_fournisseur_toggle',{'fournisseur':'__00__'}) }}",
                            data = {
                                token: "{{csrf_token('app_fournisseur_toggle')}}",
                                confirmed: false
                            }
                        ;
                        url = url.replace('__00__', current_fournisseur_id);
                        ajaxDeleteFournisseur(url, data);
                        $('#modalConfirmDeleteFournisseur').on('open.zf.reveal', function() {
                            $(btn_confirm_delete).unbind('click');
                            $(btn_confirm_delete).on('click', function() {
                                data.confirmed = true;
                                ajaxDeleteFournisseur(url,data);
                            });
                        });
                    });
                // });
            }
            {# Build modal content with table where supplier is used #}
            function ajaxDeleteFournisseur(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('alert') && response.message.alert)$('#modalConfirmDeleteFournisseurBody').html(response.message.alert);
                                if (response.message.hasOwnProperty('list')){
                                    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'),
                                        tbody = document.createElement('tbody');

                                    table.classList.add('style-light', 'jump', 'mt-1');
                                    th1.innerHTML = "{{ 'kanban.list.column.libelle'|trans|capitalize }}";
                                    th2.innerHTML = "{{ 'article.property.code'|trans|capitalize }}";
                                    th3.innerHTML = "{{ 'article.property.designationCourte'|trans|capitalize }}";

                                    table.append(thead);
                                    thead.append(trh);
                                    trh.append(th1);
                                    trh.append(th2);
                                    trh.append(th3);
                                    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'),
                                            kanban_url = "{{ url('app_kanban_appro_edit', {'kanban' : '__00__'}) }}";

                                        kanban_url = kanban_url.replace('__00__', row.k_id);
                                        tr.addEventListener('click', function () {
                                            window.location = kanban_url;
                                        });
                                        td1.innerHTML = row.k_libelle;
                                        td2.innerHTML = row.a_code;
                                        td3.innerHTML = row.a_designationCourte;
                                        tr.append(td1);
                                        tr.append(td2);
                                        tr.append(td3);
                                        tbody.append(tr);
                                    });
                                    $('#modalConfirmDeleteFournisseurBody').append(table);
                                    $('#modalConfirmDeleteFournisseur').foundation('open');
                                }
                            } else if (response.hasOwnProperty('redirect') && response.redirect){
                                window.location = response.redirect;
                            }
                        }
                    });
                }
            {% endif %}

            {% include 'App/Customer/Fournisseur/_modal.add.js.twig' %}

            {% if is_granted('ROLE_APP_SUB_IMPORT_FOURNISSEUR') %}
                {% import 'App/_include/_import/_modal.import.js.twig'  as macro_import_js %}
                {{ macro_import_js.js_import_general_functions() }}
                {{ macro_import_js.js_import('fournisseur', 0) }}
            {% endif %}
        });

        </script>
{% endblock %}