{% 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-tag"></i>{{ 'print.order.title'|trans }}</h1>
            </div>
            <div class="cell small-12  medium-shrink header_action">
                <button type="button" class="button save small" data-open="modalAddPrintOrder"><i class="fa fa-plus"></i> Ajouter un ordre d'impression</button>
            </div>
        </div>
    </div>
    <div class="cell small-12">
        <div id="dtOrdreImpression" class="grid-x"></div>
        {% if (dt_settings_customer.data.data_set|length < 1 and userOrCustomer == 1) or (dt_settings_user.data.data_set|length < 1 and userOrCustomer == 0) %}
            <p class="mt-2 text-center">{{ 'emptyData'|trans }}</p>
        {% endif %}
        <div class="table-button">
            <input id="delete_selected" type="button" class="button alert  mt-1" value="Supprimer la sélection"/>
            <input id="select_all" type="button" class="button mt-1" value="{{ 'print.order.select_all'|trans }}"/>
            <input id="valid_print_order" type="button" class="button success validation mt-1" value="{{ 'print.order.validate'|trans }}"/>
        </div>
    </div>
    <div class="reveal tiny" id="modalConfirmationAction" data-reveal>
        <div class="reveal-title">{{ 'print.order.modal.title'|trans }}</div>
        <div class="reveal-body">
            <div id="info" class="text-center mb-1"></div>
            <div class="grid-x grid-padding-x align-center">
                <div class="cell shrink">
                    <a id="confirmModalYes" class="button small no-mb" href="#">{{ 'yes'|trans }}</a>
                </div>
                <div class="cell shrink">
                    <a data-close class="cancel button small no-mb">{{ 'no'|trans }}</a>
                </div>
            </div>
        </div>
        <button class="close-button"  data-close aria-label="Close modal" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="reveal" id="modalDeleteOrdreImpression" data-reveal>
        <div class="reveal-title">{{ 'print.order.modal.delete.title'|trans }}</div>
        <div class="reveal-body">{{ 'print.order.modal.delete.answer'|trans }}</div>
        <div class="reveal-footer">
            <button data-close class="button small cancel">{{ 'cancel'|trans }}</button>
            <button id="btn_confirm_delete_ordre_impression" class="button small save">{{ '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" id="modalAddPrintOrder" data-reveal>
        <div class="reveal-title">Ajout d'un ordre d'impression</div>
        <div class="reveal-body">
            {{ form_start(formAddPrintOrder, {'attr': {'id': 'formAddPrintOrder'}}) }}
            <div class="grid-x grid-margin-x">
                <div class="cell small-12">
                    <div class=" underlined text_primary_light">Selectionner un Kanban</div>
                </div>
                <div class="cell small-12">
                    {{ form_label(formAddPrintOrder.kanban)}}
                    {{ form_widget(formAddPrintOrder.kanban)}}
                    <div id="helper_add_etiquette_colis_kanban" class="help-text" style="display:none">{{ 'etiquette.modal.no_kanban'|trans }}</div>
                </div>
            </div>
            {{ form_end(formAddPrintOrder) }}
        </div>
        <div class="reveal-footer">
            <button data-close class="button small cancel">{{ 'cancel'|trans }}</button>
            <button id="btn_submit_add_print_order" class="button small save" onclick="">{{ 'save'|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" id="modalPrintOrder" data-reveal>
        <div class="reveal-title">Impression Ordre Impression</div>
        <div class="reveal-body">
            <ol>
                <li>
                    <div class="grid-x">
                        <div class="cell small-12">
                            <h5 class="mb-0-5">{{ 'print.modal.label1'|trans }} // TODO rajouter le type</h5>
                        </div>
                        <div class="cell small-12">
                            <select name="model_sticker" id="model_sticker">
                            </select>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="grid-x" id="info2">
                    </div>
                </li>
                <li>
                    <div class="grid-x">
                        <div class="cell small-12"><h5 class="mt-1 mb-0-5">{{ 'print.modal.label3'|trans }}</h5></div>
                        <div class="cell shrink">
                            <label for="position_on_sheet">{{ 'print.modal.label4'|trans }}</label>

                        </div>
                        <div class="cell auto">
                            <input id="position_on_sheet" name="position_on_sheet" type="number" min="1" max="21" style="width:80px">
                        </div>
                    </div>
                </li>
            </ol>
        </div>
        <div class="reveal-footer">
            <button type="button" class="button small cancel" data-close>{{ 'cancel'|trans }}</button>
            <button type="button" class="button small save" id="btn_confirm_print_kanban">{{ 'print.modal.btn_download.pdf'|trans }}</button>
        </div>
        <button class="close-button"  data-close aria-label="Close modal" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
        <div class="reveal tiny" id="modalConfirmationAction" data-reveal>
            <div class="reveal-title">{{ 'print.order.modal.title'|trans }}</div>
            <div class="reveal-body">
                <div id="info" class="text-center mb-1"></div>
                <div class="grid-x grid-padding-x align-center">
                    <div class="cell shrink">
                        <a id="confirmModalYes" class="button small no-mb" href="#">{{ 'print.order.modal.yes'|trans }}</a>
                    </div>
                    <div class="cell shrink">
                        <a data-close class="cancel button small no-mb">{{ 'print.order.modal.no'|trans }}</a>
                    </div>
                </div>
            </div>
            <button class="close-button"  data-close aria-label="Close modal" type="button">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    </div>


{% endblock %}

{% block userOrCustomer %}
    {# TODO remplacer ça par un fichier twig.html #}
    <input type="radio" name="UserOrCustomer" value="Client" id="customer" required><label for="customer">Client</label>
    <input type="radio" name="UserOrCustomer" value="Utilisateur" id="user"><label for="user">Utilisateur</label>
{% endblock %}

{% block javascript_footer %}
    {{ parent() }}
    <script>
        $(document).ready(function() {

            {% import 'App/_include/_new_array_event.js.twig' as array_event %}
            {{ array_event.js_import_general_functions }}
{#            {% if dt_settings.data.data_set|length > 0 %}#}
            let userOrCustomer = {{ userOrCustomer|json_encode|raw }};
            let dtToolbar_test;
            let data_user = {{ dt_settings_user|json_encode|raw }};
            let data_customer = {{ dt_settings_customer|json_encode|raw }};

            if(userOrCustomer === true){ // CUSTOMER
                $('#customer').prop('checked', true);
                dtToolbar_test = new dtToolbar(document.getElementById('dtOrdreImpression'),  {{ dt_settings_customer|json_encode|raw }}, null);
            }else{
                $('#user').prop('checked', true);
                dtToolbar_test = new dtToolbar(document.getElementById('dtOrdreImpression'),  {{ dt_settings_user|json_encode|raw }}, null);
            }

            $('#customer').click(function(event){
                let dataTable = $('#orders_impression_list').DataTable();
                dataTable.clear().draw();
                dataTable.rows.add(data_customer["data"]["data_set"]);
                dataTable.columns.adjust().draw();
                checkIsNewEvent({{ dt_settings_customer|json_encode|raw }},dataTable );
            });

            $('#user').click(function(event){
                let dataTable = $('#orders_impression_list').DataTable();
                dataTable.clear().draw();
                dataTable.rows.add(data_user["data"]["data_set"]);
                dataTable.columns.adjust().draw();
                checkIsNewEvent({{ dt_settings_user|json_encode|raw }},dataTable );
            });
            {#            {% endif %}#}
            //let dataTable = document.getElementById("orders_impression_list");

            let select_all = document.getElementById("select_all");
            let valid_print_order = document.getElementById("valid_print_order");
            $('#btn_submit_add_print_order').click(function () {
                $(this).html(btn_spin);
                $('#formAddPrintOrder').submit();
            });
            select_all.addEventListener("click", function(){
                SelectingAll();
            });
            let info_div = document.getElementById('info');
            let Rhref;
            let models;
            let input_model = $('#model_sticker');
            let kanban_type;
            let btn_confirm_print_kanban_or_etiquette = $("#btn_confirm_print_kanban_or_etiquette");
            let btn_confirm_print_kanban = $("#btn_confirm_print_kanban");
            let btn_call_modal_print = $('#call_modal_print');
            let kanbanId;
            let modelId;
            let kanbanType;
            let item_id;
            let arrayIdProp;

            var table = document.getElementById("orders_impression_list");
            table.rows.length !== 0? rowLength = table.rows.length: null;

            //loops through rows
            for (var i = 0; i < rowLength; i++){
                //gets cells of current row
                var oCells = table.rows.item(i).cells;
                //gets amount of cells of current row
                var cellLength = table.length;

                //loops through each cell in current row
                for(var j = 0; j < cellLength; j++){
                    /* get your cell info here */
                    /* var cellVal = oCells.item(j).innerHTML; */
                }
            }

            $('#valid_print_order').click(function(event){
                event.preventDefault();
                Rhref = url;
                info_div.innerText = "{{ 'print.order.button.valid.label'|trans }} ";
                $("#modalConfirmationAction").foundation('open');
            });

            $(dtToolbar_test).on('row.click_action', function(e, data){
                item_id = data.id;
                if(data.target.classList.contains('btnOpenModalDeleteOrdreImpression')){
                    $('#modalDeleteOrdreImpression').foundation('open');
                    $('#btn_confirm_delete_ordre_impression').click(function () {
                        $(this).html(btn_spin);
                        let url = "{{ url('app_print_order_ajax_delete', {'printOrder':'__00__'}) }}";
                        let url_delete_ordre_impression = url.replace('__00__', item_id);
                        $.ajax({
                            url: url_delete_ordre_impression,
                            method: "POST",
                            data: {token : "{{ csrf_token('app_print_order_ajax_delete') }}"},
                            success: function (response) {
                                if (response.hasOwnProperty('result')){
                                    if (response.result){
                                        window.location = "{{ url('app_print_order') }}";
                                    }
                                }
                            },
                            error: function () {
                               console.log("error")
                            }
                        })
                    });
                }
            });
            $('#delete_selected').click(function(event){
                $('#modalDeleteOrdreImpression').foundation('open');
                $('#btn_confirm_delete_ordre_impression').click(function () {
                    let table = document.getElementById("dtOrdreImpression");
                    let checkBoxes = table.getElementsByTagName("INPUT");
                    for (let i = 0; i < checkBoxes.length; i++) {
                        if (checkBoxes[i].checked === true) {
                            let string_id_prop = checkBoxes[i].parentNode.parentNode.id
                            let id_prop = string_id_prop.replace(/\D/g, "");

                            let url = "{{ url('app_print_order_ajax_delete', {'printOrder':'__00__'}) }}";
                            let url_delete_ordre_impression = url.replace('__00__', id_prop);
                            $.ajax({
                                url: url_delete_ordre_impression,
                                method: "POST",
                                data: {token: "{{ csrf_token('app_print_order_ajax_delete') }}"},
                                success: function (response) {
                                    if (response.hasOwnProperty('result')) {
                                        if (response.result) {
                                            window.location = "{{ url('app_print_order') }}";
                                        }
                                    }
                                },
                                error: function () {
                                    console.log("error")
                                }
                            })

                        }
                    }
                });
            });


            $('#confirmModalYes').click(function(event){
                //event.preventDefault();
                let table = document.getElementById("dtOrdreImpression");
                arrayIdProp = [];
                let checkBoxes = table.getElementsByTagName("INPUT");
                for (let i = 0; i < checkBoxes.length; i++) {
                    if(checkBoxes[i].checked === true){

                        let string_id_prop = checkBoxes[i].parentNode.parentNode.id
                        let id_prop = string_id_prop.replace(/\D/g, "");
                        arrayIdProp.push(id_prop);
                    }
                }

                var filtered = arrayIdProp.filter(function (el) {
                    return el != '';
                });
                arrayIdProp = filtered;

                let url = "{{ url('app_print_order_ajax_get_data_pdf') }}";

                $.ajax({
                    url: url,
                    method: "POST",
                    data: {
                        token : "{{ csrf_token('app_print_order_ajax_get_data_pdf') }}",
                        Ids: arrayIdProp
                    },
                    success: function (response) {
                        get_sticker_pdf(response['result']);
                    },
                    error: function () {
                        console.log("error")
                    }
                })
            });

            $('#confirmModalNo').click(function(e){
                $("#confirmModalNo").foundation('close');
            });


            let url;

            $(input_model).change(function(option_sticker){
                update_select_based_on();
            });

            function update_select_based_on(){
                let type = $('#model_sticker option:selected').data('type');
                $("#number_based_on option").each(function() {
                    let option_number = this;
                    if($(option_number).data('type') !== type){
                        $(option_number).attr('disabled', 'disabled');
                        $(option_number).prop('selected', false);
                    }
                    else {
                        $(option_number).removeAttr('disabled');
                        $(option_number).prop('selected', true);
                    }
                });
            }

            function SetModels(models){
                let div_modal_sticker = document.getElementById("model_sticker");
                div_modal_sticker.innerHTML = '';
                models.forEach(function(model){
                    let div_option = document.createElement('option');
                    div_option.value = model['id'];
                    div_option.dataset.type = model['application'];
                    div_option.innerText = model['nom'];
                    div_modal_sticker.appendChild(div_option);
                    kanban_type = model['typeKanban'];
                })


               // faire une fonction appart qui actualise en fonction du modele choisi
            }

            function ReloadParametreModal() {
                let div_modal_info2 = document.getElementById("info2");
                div_modal_info2.innerHTML = '';
                if(kanban_type !== "el") {
                    div_modal_info2.innerHTML += '<div class="cell small-12">' +
                        '<h5 class="mt-1 mb-0-5">{{ 'print.modal.label2'|trans }}</h5>' +
                        '</div>' +
                        '<div class="cell small-3">' +
                        '<input type="radio" id="nb_fixed_true" name="nb_fixed" value="true">' +
                        '<label for="nb_fixed_true">{{ 'print.modal.btn_radio.nb_fix'|trans }}</label>' +
                        '</div>'+
                        '<div class="cell small-9">' +
                        '<input id="number_fixed" type="number" min="1" style="max-width: 80px">' +
                        '</div>' +
                        '<div class="cell small-3">' +
                        '<input type="radio" id="nb_fixed_false" name="nb_fixed" value="false" checked="checked">' +
                        '<label for="nb_fixed_false">{{ 'print.modal.btn_radio.according_to'|trans }}</label>' +
                        '</div>';
                        if(kanban_type === "fs"){
                            div_modal_info2.innerHTML +=  '<div class="cell small-9">' +
                                '<select name="number_based_on" id="number_based_on">' +
                                '<option value="decide" data-type="kanban">{{ 'print.modal.option.nb_le_decide'|trans }}</option>' +
                                '<option value="decide_picking" data-type="kanban">{{ 'print.modal.option.nb_le_decide_and_pick'|trans }}</option>' +
                                '<option value="etiq_title" data-type="title"> {{ 'print.modal.option.etiq_title'|trans }}</option>' +
                                '<option value="etiq_prog" data-type="prog"> {{ 'print.modal.option.etiq_prog'|trans }}</option>' +
                                '<option value="ecart" data-type="kanban">{{ 'print.modal.option.only_ecart_print'|trans }}</option>' +
                                '</select>' +
                                '</div>';
                        } else {
                            div_modal_info2.innerHTML +=  '<div class="cell small-9">' +
                                '<select name="number_based_on" id="number_based_on">' +
                                '<option value="decide" data-type="kanban">{{ 'print.modal.option.nb_kb_decide'|trans }}</option>' +
                                '<option value="decide_picking" data-type="kanban">{{ 'print.modal.option.nb_kb_decide_and_pick'|trans }}</option>' +
                                '<option value="etiq_title" data-type="title"> {{ 'print.modal.option.etiq_title'|trans }}</option>' +
                                '<option value="etiq_prog" data-type="prog"> {{ 'print.modal.option.etiq_prog'|trans }}</option>' +
                                '<option value="ecart" data-type="kanban">{{ 'print.modal.option.only_ecart_print'|trans }}</option>' +
                                '</select>' +
                                '</div>';
                        }


                } else {
                    div_modal_info2.innerHTML += '<div class="cell small-12">' +
                        '<h5 class="mt-1 mb-0-5">{{ 'print.modal.label2'|trans }}</h5>' +
                        '</div>' +
                        '<input type="radio" class="hide" id="nb_fixed_true" name="nb_fixed" value="true" checked="checked">' +
                        '<div class="cell small-12">' +
                        '<input id="number_fixed" type="number" min="1" style="max-width: 80px">' +
                        '</div>';
                }

            }

            let statut = 0;
            function SelectingAll(){
                let table = document.getElementById("dtOrdreImpression");
                let checkBoxes = table.getElementsByTagName("INPUT");
                if (statut === 0) {
                    for (let i = 0; i < checkBoxes.length; i++) {
                        checkBoxes[i].checked = true;
                        let row = checkBoxes[i].parentNode.parentNode;
                        let id_string = row.id.match(/(\d+)/);
                    }
                    statut = 1;
                } else {
                    for (let z = 0; z < checkBoxes.length; z++) {
                        checkBoxes[z].checked = false;
                    }
                    statut = 0;
                }
            }

            function get_form_data(response){
                let input_number_fixed = $("#number_fixed");
                let input_number_based_on = $("#number_based_on");
                let input_position_on_sheet = $("#position_on_sheet");

                let selected_ids;

                let arrayData = [];

                response.forEach(function(data, index){
                    data.forEach(function(data2, index2){
                        arrayData.push({
                            model: data2["me_id"], // CELUI DE LA SECTION
                            fixed: true, // FIXED
                            number_fixed: 1, // 1
                            number_based_on: null, // NULL
                            position_on_sheet:  1, // on s'en fou
                            ids: [data2["k_id"]], // L'ID
                            type: data2["kt_code"], //
                            ordre_impression_id: data2["oi_id"]
                        });
                    })
                })
                return arrayData;
            }

            function get_sticker_pdf_or_kanban(response){

                let btn_initial_value = $(btn_confirm_print_kanban_or_etiquette).html();
                let data = [];
                data = get_form_data(response);

                if(data){
                    $(btn_confirm_print_kanban_or_etiquette).html(btn_spin);
                    $(btn_call_modal_print).prop("disabled", true);

                    url = '{{ url("app_print_ajax_pdf_sticker_or_etiquette") }}';
                    $.ajax({
                        url: url,
                        method: "POST",
                        data: {
                            token : "{{ csrf_token('app_print_ajax_pdf_sticker_or_etiquette') }}",
                            data: data,
                            fromOrder: true,
                        },
                        success: function (response) {
                            if(response.hasOwnProperty('file') && response.hasOwnProperty('common_name')){
                                //download_tmp_file_kanban(response.file, response.common_name);
                                $(btn_confirm_print_kanban_or_etiquette).html(btn_initial_value);
                                $(btn_call_modal_print).prop("disabled", false);

                            }
                        },
                        error: function () {
                            console.log("error")
                        }
                    })
                }
                else {
                    toastr_error.error("{{ 'print.no_kb_to_print'|trans([],'flash') }}");
                }
            }

            $(btn_confirm_print_kanban_or_etiquette).click(function(){ get_sticker_pdf_or_kanban(); });

            function download_tmp_file_kanban(file_name, common_name) {
                let url = "{{ url('app_download_tmp_file', {'filename': '__00__', 'token': csrf_token('app_download_tmp_file')}) }}";
                url = url.replace('__00__', file_name);

                downloadStream(url,common_name)
            }

            function get_sticker_pdf(response){

                let btn_initial_value = $(btn_confirm_print_kanban).html();
                let data = [];
                data = get_form_data(response);


                if(data){
                    $(btn_confirm_print_kanban).html(btn_spin);
                    $(btn_call_modal_print).prop("disabled", true);

                    url = '{{ url("app_print_ajax_pdf_sticker") }}';

                    $.ajax({
                        url: url,
                        method: "POST",
                        data: {
                            token : "{{ csrf_token('app_print_ajax_pdf_sticker') }}",
                            data: data,
                            fromOrder: true,
                        },
                        success: function (response) {
                            if(response.hasOwnProperty('file') && response.hasOwnProperty('common_name')){
                                download_tmp_file(response.file, response.common_name);
                                $(btn_confirm_print_kanban).html(btn_initial_value);
                                //$('#modal_print').foundation('close');
                                $(btn_call_modal_print).prop("disabled", false);
                            }
                        },
                        error: function () {
                            console.log("error")
                        }
                    })
                }
                else {
                    toastr_error.error("{{ 'print.no_kb_to_print'|trans([],'flash') }}");
                }
            }

            $(btn_confirm_print_kanban).click(function(){ get_sticker_pdf(); });

            function download_tmp_file(file_name, common_name) {
                let url = "{{ url('app_download_tmp_file', {'filename': '__00__', 'token': csrf_token('app_download_tmp_file')}) }}";
                url = url.replace('__00__', file_name);

                downloadStream(url,common_name,function () {
                    window.location = '{{ url("app_print_order") }}';
                });
            }
        });


    </script>
{% endblock %}