{% 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-th-large"></i>{{ 'etiquettelibre.title.list'|trans }}</h1>
            </div>
            <div class="cell small-12  medium-shrink header_action">
                <button class="button save small" type="button" data-open="modalAddEtiquetteLibre"><i class="fa fa-plus"></i> {{ 'etiquettelibre.button.add'|trans }}</button>
            </div>
        </div>
    </div>
    <div class="cell small-12">
        <div id="dtContainer" class="grid-x"></div>
    </div>
    {# MODAL #}

    {# MODAL Add#}
    <div class="reveal" id="modalAddEtiquetteLibre" data-reveal>
        <div class="reveal-title">{{ 'etiquettelibre.title.add'|trans }}</div>
        <div class="reveal-body">
            {{ form_start(formAddEtiquetteLibre, {'attr': {'id': 'formAddEtiquetteLibre'}}) }}
            <div class="grid-x grid-padding-x">
                <div class="cell small-12">
                    <div class="grid-x grid-padding-x">
                        <div class="cell small-12">
                            <h6 class="underlined text_primary_light mb-1">{{ 'etiquettelibre.subtitle.generalInfo'|trans }}</h6>
                        </div>
                        <div class="cell small-6">
                            {{ form_label(formAddEtiquetteLibre.code) }}
                            {{ form_widget(formAddEtiquetteLibre.code,{'attr':{'data-parsley-custom-async':'etiquettelibre_code'}})}}
                        </div>
                        <div class="cell small-6">
                            {{ form_row(formAddEtiquetteLibre.designationcourte) }}
                        </div>
                        <div class="cell small-6">
                            {{ form_label(formAddEtiquetteLibre.nombre) }}
                            {{ form_widget(formAddEtiquetteLibre.nombre) }}
                        </div>
                        <div class="cell small-6">
                            {{ form_row(formAddEtiquetteLibre.designationlongue) }}
                        </div>
                        <div class="cell small-12">
                            <h6 class="underlined text_primary_light mb-1">{{ 'etiquettelibre.subtitle.infoField'|trans }}</h6>
                        </div>
                        <div class="cell small-6">
                            <label>{{ parametres.customFieldEtiqLibreInfo1 }}</label>
                            {{ form_widget(formAddEtiquetteLibre.zone01) }}
                        </div>
                        <div class="cell small-6">
                            <label>{{ parametres.customFieldEtiqLibreInfo2 }}</label>
                            {{ form_widget(formAddEtiquetteLibre.zone02) }}
                        </div>
                        <div class="cell small-6">
                            <label>{{ parametres.customFieldEtiqLibreInfo3 }}</label>
                            {{ form_widget(formAddEtiquetteLibre.zone03) }}
                        </div>
                        <div class="cell small-6">
                            <label>{{ parametres.customFieldEtiqLibreInfo4 }}</label>
                            {{ form_widget(formAddEtiquetteLibre.zone04) }}
                        </div>
                        <div class="cell small-6">
                            <label>{{ parametres.customFieldEtiqLibreInfo5 }}</label>
                            {{ form_widget(formAddEtiquetteLibre.zone05) }}
                        </div>
                        <div class="cell small-6"></div>
                    </div>
                </div>
                <div class="small-9 small-offset-3 cell"><p id="helper" class="help-text"></p></div>
             </div>
            {{ form_end(formAddEtiquetteLibre) }}
        </div>
        <div class="reveal-footer">
            <button data-close class="button small cancel">{{ 'cancel'|trans }}</button>
            <button class="button small save" id="btn_submit_add_etiquettelibre">{{ '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="modalEditEtiquetteLibre" data-reveal>
        <div class="reveal-title">{{ 'etiquettelibre.title.edit'|trans }}</div>
        <div class="reveal-body" id="modalEditEtiquetteLibreBody">
        </div>
        <div class="reveal-footer">
            <button data-close class="button small cancel">{{ 'cancel'|trans }}</button>
            <button class="button small update" id="btn_submit_edit_etiquettelibre">{{ '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="modalDeleteEtiquetteLibre" data-reveal>
        <div class="reveal-title">{{ 'etiquettelibre.title.delete'|trans }}</div>
        <div class="reveal-body">{{ 'etiquettelibre.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_etiquettelibre">{{ '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 printer setting #}
    {% set kb_type_code = constant('App\\Entity\\Kanban\\KanbanType::EL') %}
    {% include 'App/_include/_print/print.html.twig' %}

{% endblock %}
{% block javascript_footer %}
    {{ parent() }}
    <script>
        $(document).ready(function(){
            let kb_type_code = "{{ constant('App\\Entity\\Kanban\\KanbanType::EL') }}";
            {% include 'App/_include/_print/print.js.twig' %}
            let selected_ids = [];

            let dtToolbar_etiqLibre = new dtToolbar(document.getElementById('dtContainer'),  {{ dt_settings|json_encode|raw }},
                [{'type':'button','title':'{{ "datatable.custom_button.print"|trans }}', 'id':'call_modal_print','icon':'fa-print'}]);

            $(dtToolbar_etiqLibre).on('row.click', function(e, id){
                editEtiqLibre(id);
            });

            $(dtToolbar_etiqLibre).on('row.click_action', function(e, data){
                let item_id = data.id;
                if(data.target.classList.contains('btnOpenModalEditEtiqLibre')){
                    editEtiqLibre(item_id);
                }
                else if(data.target.classList.contains('btnOpenModalDeleteEtiqLibre')){
                    let modal_delete_etiq = $('#modalDeleteEtiquetteLibre'),
                        btn_submit_delete = $('#btn_submit_delete_etiquettelibre');
                    $(modal_delete_etiq).foundation('open');
                    $(btn_submit_delete).click(function () {
                        $(btn_submit_delete).html(btn_spin);
                        let url = "{{ url('app_etiquettelibre_delete', {'etiquettelibre': '__00__'}) }}";
                        url = url.replace('__00__', item_id);
                        window.location = url;
                    });
                }
            });

            $(dtToolbar_etiqLibre).on('btn_custom.click', function(e, data){
               if(data.id === 'call_modal_print'){
                    selected_ids = data.data;
                    if (data.data.length > 0){
                        $('#modal_print').foundation('open')
                    }
                }
            });

            function editEtiqLibre(item_id) {
                let url = "{{ url('app_etiquettelibre_ajax_edit',{'etiquettelibre':'__00__'}) }}";
                url = url.replace('__00__', item_id);
                $.ajax({
                    url: url,
                    method: 'GET',
                    success: function (html) {
                        let modal_edit = $('#modalEditEtiquetteLibre'),
                            modalbody_edit = $('#modalEditEtiquetteLibreBody');
                        $(modalbody_edit).html(html);
                        $(modal_edit).foundation('open');
                        let formEditEtiquetteLibre = $('#formEditEtiquetteLibre');
                        let form_parsley_edit_etiquettelibre = $(formEditEtiquetteLibre).parsley(parsley_options);
                        let btn_submit_edit_etiquettelibre = $('#btn_submit_edit_etiquettelibre');
                        $(btn_submit_edit_etiquettelibre).click(function () {
                            form_parsley_edit_etiquettelibre.validate();
                            form_parsley_edit_etiquettelibre.whenValid().then(function () {
                                $(btn_submit_edit_etiquettelibre).html(btn_spin);
                                $(formEditEtiquetteLibre).submit();
                            });
                        });
                    }
                });
            }

            {# Add Etiquette Libre and Form#}
            let formAddEtiquetteLibre = $('#formAddEtiquetteLibre');
            let form_parsley_add_etiquettelibre = $(formAddEtiquetteLibre).parsley(parsley_options);
            let btn_submit_add_etiquettelibre = $('#btn_submit_add_etiquettelibre');
            $(btn_submit_add_etiquettelibre).click(function () {
                form_parsley_add_etiquettelibre.validate();
                form_parsley_add_etiquettelibre.whenValid().then(function () {
                    $(btn_submit_add_etiquettelibre).html(btn_spin);
                    $(formAddEtiquetteLibre).submit();
                });
            });

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

            resetOnload();
        });

        </script>
{% endblock %}