{% 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>{{ 'unit.title.list'|trans }}</h1>
            </div>
            <div class="cell small-12  medium-shrink header_action">
                <button class="button save small" type="button" data-open="modalAddUnite"><i class="fa fa-plus"></i> {{ 'unit.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="modalAddUnite" data-reveal>
        <div class="reveal-title">{{ 'unit.title.add'|trans }}</div>
        <div class="reveal-body">
            {{ form_start(formAddUnite, {'attr': {'id': 'formAddUnite'}}) }}
            <div class="grid-x grid-padding-x">
                <div class="cell small-3 text-right">{{ form_label(formAddUnite.code) }}</div>
                <div class="cell small-9">{{ form_widget(formAddUnite.code,{'attr':{'data-parsley-custom-async':'unit_code'}})}}</div>
                <div class="cell small-3 text-right">{{ form_label(formAddUnite.libelle) }}</div>
                <div class="cell small-9">{{ form_widget(formAddUnite.libelle) }}</div>
                <div class="small-9 small-offset-3 cell"><p id="helper" class="help-text"></p></div>
            </div>
            {{ form_end(formAddUnite) }}
        </div>
        <div class="reveal-footer">
            <button data-close class="button small cancel">{{ 'cancel'|trans }}</button>
            <button class="button small save" id="btn_submit_add_unite">{{ '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="modalEditUnit" data-reveal>
        <div class="reveal-title">{{ 'unit.title.edit'|trans }}</div>
        <div class="reveal-body" id="modalEditUnitBody">
        </div>
        <div class="reveal-footer">
            <button data-close class="button small cancel">{{ 'cancel'|trans }}</button>
            <button class="button small update" id="btn_submit_edit_unit">{{ '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="modalDeleteUnit" data-reveal>
        <div class="reveal-title" id="modalDeleteUnitTitle"></div>
        <div class="reveal-body" id="modalDeleteUnitBody"></div>
        <div class="reveal-footer">
            <button data-close class="button small cancel">{{ 'cancel'|trans }}</button>
            <button class="button small delete" id="btn_submit_delete_unit">{{ '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="modalConfirmDeleteUnit" data-reveal>
        <div class="reveal-title">{{ 'unit.title.disable.confirm'|trans }}</div>
        <div class="reveal-body" id="modalConfirmDeleteUnitBody"></div>
        <button class="close-button"  data-close aria-label="Close modal" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    {# Modal Import #}
    {% import 'App/_include/_import/_modal.import.html.twig' as macro_import_html %}
    {{ macro_import_html.html_import(formImport, 'unit.title.import'|trans, 0) }}
    {% include 'App/_include/_export/_modal.export.html.twig' with {'title': 'export_unite.modal.title'|trans } %}
{% 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('unite', 0) }}

            let formAddUnite = $('#formAddUnite');
            let form_parsley_add_unite = $(formAddUnite).parsley(parsley_options);
            let btn_submit_add_unite =  $('#btn_submit_add_unite');

            let modal_add_unit =  $('#modalAddUnite'),
                modal_delete = $('#modalDeleteUnit'),
                title_modal_delete = $('#modalDeleteUnitTitle'),
                body_modal_delete = $('#modalDeleteUnitBody'),
                btn_delete = $('#btn_submit_delete_unit'),
                btn_confirm_delete = $('#btn_submit_confirm_delete_unit');

            let dtToolbar_unit = 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_unit.table).children('tbody').on( 'click', '.editUnit', function (e){
                let current_id = $(this).data('uid');
                editUnit(current_id);
            });

            $(dtToolbar_unit).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 editUnit(item_id){
                let url = "{{ url('app_unit_ajax_edit',{'unit':'__00__'}) }}";
                url = url.replace('__00__',item_id);
                $.ajax({
                    url:url,
                    method:'GET',
                    success: function (html) {
                        let modal = $('#modalEditUnit'),
                            modalbody = $('#modalEditUnitBody');
                        $(modalbody).html(html);
                        $(modal).foundation('open');
                        let formEditUnit = $('#formEditUnit');
                        let form_parsley_edit_unit = $(formEditUnit).parsley(parsley_options);
                        let btn_submit_edit_unit =  $('#btn_submit_edit_unit');
                        $(btn_submit_edit_unit).click(function(){
                            form_parsley_edit_unit.validate();
                            form_parsley_edit_unit.whenValid().then(function () {
                                $(btn_submit_edit_unit).html(btn_spin);
                                $(formEditUnit).submit();
                            });
                        });
                    }
                });
            }

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

                toggleUnit(current_unit_id);
                $(modal_delete).foundation('open');
            });

            // Add Unit
            $(btn_submit_add_unite).click(function(){
                form_parsley_add_unite.validate();
                form_parsley_add_unite.whenValid().then(function () {
                    $(btn_submit_add_unite).html(btn_spin);
                    $(formAddUnite).submit();
                });
            });
            $(modal_add_unit).on('open.zf.reveal', function () {
                $('#add_unite_code').focus();
            });
            $(modal_add_unit).on('closed.zf.reveal', function () {
                $(formAddUnite).trigger("reset");
            });


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

            {# Build modal content with table where unit is used #}
            function ajaxDeleteUnit(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')) $('#modalConfirmDeleteUnitBody').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);
                            });
                            $('#modalConfirmDeleteUnitBody').append(table);

                            $('#modalConfirmDeleteUnit').foundation('open');
                        } else if (response.hasOwnProperty('redirect') && response.redirect){
                            window.location = response.redirect;
                        }
                    }
                });
            }
            function toggleUnit(current_unit_id) {
                $(modal_delete).on('open.zf.reveal', function() {
                    $(btn_delete).unbind('click');
                    $(btn_delete).on('click', function () {
                        let url = "{{ url('app_unit_toggle',{'unit':'__00__'}) }}",
                            data = {
                                token: "{{csrf_token('app_unit_toggle')}}",
                                confirmed: false
                            }
                        ;
                        url = url.replace('__00__', current_unit_id);
                        ajaxDeleteUnit(url, data);
                        $('#modalConfirmDeleteUnit').on('open.zf.reveal', function() {
                            $(btn_confirm_delete).unbind('click');
                            $(btn_confirm_delete).on('click', function() {
                                data.confirmed = true;
                                ajaxDeleteUnit(url,data);
                            });
                        });
                    });
                });
            }
            resetOnload();

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