{% extends 'App/_include/_layout.main.html.twig' %}

{% block page_content %}
    {% if is_granted('ROLE_APP_SUB_ETIQ_EDITOR') %}
    <div class="cell small-12 sticker-builder-container">
        <div class="toolbar-sticker">
            <div class="top_action mb-0-5">
                <div style="display: inline-block"><button id="add_zone" type="button" class="button small purple no-mb"><i class="fa fa-plus"></i> {{ 'sticker.button.add.zone'|trans }}</button></div>
                <div style="display: inline-block;float: right"><button class="button save small no-mb" type="button" data-open="modalSave"><i class="fa fa-floppy-o"></i> {{ 'save'|trans }}</button></div>
            </div>
            <form action="#" class="not-monitored" id="info_selected_box">
                <input type="hidden" id="input_id">
                <div class="tb-sticker-section main_title">
                    <div class="tb-main-title">{{ 'sticker.title.selected_zone'|trans }}</div>
                </div>
                <div class="tb-sticker-section">
                    <div class="tb-sticker-title">{{ 'sticker.subtitle.type'|trans }}</div>
                    <label for="input_type">{{ 'sticker.input.type.label'|trans }}</label>
                    <select name="input_type" id="input_type">
                        {% if field_options.main is defined %}
                            <option value="field_main">{{ 'sticker.input.option.1'|trans }}</option>
                        {% endif %}
                        {% if field_options.lines is defined %}
                            <option value="field_line">{{ 'sticker.input.option.1_bis'|trans }}</option>
                        {% endif %}
                        <option value="text">{{ 'sticker.input.option.txt_free'|trans }}</option>
                        {% if is_granted('ROLE_APP_SUB_ETIQ_MODELE_CB')  and type != constant('App\\Entity\\Kanban\\KanbanType::EL') %}
                            <option value="codeBar">{{ 'sticker.input.option.codebar'|trans }}</option>
                        {% endif %}
                        <option value="icon">{{ 'sticker.input.option.icon'|trans }}</option>
                    </select>
                    <div id="content_text">
                        <label for="input_content_text">{{ 'sticker.input.content.label'|trans }}</label>
                        <input type="text" id="input_content_text" name="input_content_text">
                    </div>
                    {% if field_options.main is defined %}
                        <div id="content_field_main">
                            <label for="input_content_field_main">{{ 'sticker.input.kanban_field.label'|trans }}</label>
                            <select id="input_content_field_main" name="input_content_field_main">
                                {% for value, label in field_options.main %}
                                    <option value="{{ value }}">{{ label }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    {% endif %}
                    {% if field_options.lines is defined %}
                        <div id="content_field_line">
                            <label for="input_content_field_line">{{ 'sticker.input.gamme_field.label'|trans }}</label>
                            <select id="input_content_field_line" name="input_content_field_line">
                                {% for value, label in field_options.lines %}
                                    <option value="{{ value }}">{{ label }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    {% endif %}
                    <div id="content_codeBar">
                        <label for="input_content_codeBar">{{ 'sticker.input.content_codeBar.label'|trans }}</label>
                        <select id="input_content_codeBar" name="input_content_codeBar">
                            <option value="article">{{ 'sticker.input.content_codeBar.option.article'|trans }}</option>
                            <option value="libelle">{{ 'sticker.input.content_codeBar.option.libelle'|trans }}</option>
                            <option value="numero">Numéro d'étiquette</option>
                        </select>
                    </div>
                    <div id="content_icon">
                        <label for="input_content_icon">{{ 'sticker.input.content_icon.label'|trans }}</label>
                        <select id="input_content_icon" name="input_content_icon">
                            <option value="arrow-left">{{ 'sticker.input.content_icon.option.arrow_left'|trans }}</option>
                            <option value="arrow-right">{{ 'sticker.input.content_icon.option.arrow_right'|trans }}</option>
                            <option value="arrow-up">{{ 'sticker.input.content_icon.option.arrow_up'|trans }}</option>
                            <option value="arrow-down">{{ 'sticker.input.content_icon.option.arrow_down'|trans }}</option>

                        </select>
                    </div>
                </div>
                <div class="tb-sticker-section">
                    <div class="tb-sticker-title">{{ 'sticker.subtitle.style'|trans }}</div>

                    <label for="input_text_size">{{ 'sticker.input.text_size.label'|trans }}</label>
                    <select name="input_text_size" id="input_text_size">
                        <option value="fs-xs">{{ 'sticker.input.text_size.option.xs'|trans }}</option>
                        <option value="fs-s">{{ 'sticker.input.text_size.option.s'|trans }}</option>
                        <option value="fs-m">{{ 'sticker.input.text_size.option.m'|trans }}</option>
                        <option value="fs-l">{{ 'sticker.input.text_size.option.l'|trans }}</option>
                        <option value="fs-xl">{{ 'sticker.input.text_size.option.xl'|trans }}</option>
                    </select>

                    <label for="input_text_weight">{{ 'sticker.input.text_weight.label'|trans }}</label>
                    <select name="input_text_weight" id="input_text_weight">
                        <option value="fw-light">{{ 'sticker.input.text_weight.option.light'|trans }}</option>
                        <option value="fw-medium">{{ 'sticker.input.text_weight.option.medium'|trans }}</option>
                        <option value="fw-bold">{{ 'sticker.input.text_weight.option.bold'|trans }}</option>
                    </select>

                    <label for="input_text_align">{{ 'sticker.input.text_align.label'|trans }}</label>
                    <select name="input_text_align" id="input_text_align">
                        <option value="left">{{ 'sticker.input.text_align.option.left'|trans }}</option>
                        <option value="center">{{ 'sticker.input.text_align.option.center'|trans }}</option>
                        <option value="right">{{ 'sticker.input.text_align.option.right'|trans }}</option>
                    </select>
                </div>
                <div class="tb-sticker-section">
                    <div class="tb-sticker-title">{{ 'sticker.subtitle.border'|trans }}</div>

                    <div>
                        <input type="checkbox" id="input_border_top">
                        <label for="input_border_top">{{ 'sticker.input.border_top.label'|trans }}</label>
                    </div>
                    <div>
                        <input type="checkbox" id="input_border_right">
                        <label for="input_border_right">{{ 'sticker.input.border_right.label'|trans }}</label>
                    </div>
                    <div>
                        <input type="checkbox" id="input_border_bottom">
                        <label for="input_border_bottom">{{ 'sticker.input.border_bottom.label'|trans }}</label>
                    </div>
                    <div>
                        <input type="checkbox" id="input_border_left">
                        <label for="input_border_left">{{ 'sticker.input.border_left.label'|trans }}</label>
                    </div>
                </div>
                <div class="tb-sticker-section">
                    <div class="tb-sticker-title ">{{ 'sticker.subtitle.action'|trans }}</div>
                    <div class="mt-1 text-center">
                        <button data-open="modalDeleteZone" type="button" class="button small delete no-mb">{{ 'sticker.button.delete.zone'|trans }}</button>
                    </div>
                </div>
            </form>
        </div>
        <div class="sticker-container w41-h64" id="grid-snap"></div>
    </div>
    {# MODAL DELETE #}
    <div class="reveal" id="modalDeleteZone" data-reveal>
        <div class="reveal-title">{{ 'sticker.modal.delete_zone.title'|trans }}</div>
        <div class="reveal-body">
            {{ 'sticker.modal.delete_zone.message'|trans }}
        </div>
        <div class="reveal-footer">
            <button data-close class="button small cancel">{{ 'cancel'|trans }}</button>
            <button type="button" id="btnConfirmDeleteZone" class="button small delete">{{ '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 SAVE #}
    <div class="reveal" id="modalSave" data-reveal>
        <div class="reveal-title">{% if action == 'add' %}{{ 'sticker.modal.save_etiq.title.save'|trans }}{% else %}{{ 'sticker.modal.save_etiq.title.edit'|trans }}{% endif %}</div>
        <div class="reveal-body">
            {{ form_start(form,{'attr':{'id':'FormEtiquette'}})}}
            {{ form_end(form) }}
        </div>
        <div class="reveal-footer">
            <button data-close class="button small cancel">{{ 'cancel'|trans }}</button>
            <button type="button" id="btnSendForm" class="button small delete">{% if action == 'add' %}{{ 'save'|trans }}{% else %}{{ 'edit'|trans }}{% endif %}</button>
        </div>
        <button class="close-button"  data-close aria-label="Close modal" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    {% endif %}
{% endblock %}

{% block javascript_footer %}
    {{ parent() }}
    {% if is_granted('ROLE_APP_SUB_ETIQ_EDITOR') %}
    {% if is_granted('ROLE_APP_SUB_KB_ELECTRONIQUE') %}
    <script>
        $(document).ready(function () {
            let grid_container = document.getElementById('grid-snap');
            let size_box =[];
            size_box.largeur = {{customer.parametre.isDefinedAsMainDimension.largeur}};
            size_box.longueur = {{customer.parametre.isDefinedAsMainDimension.longueur}};
            grid_container.style.width = size_box.largeur + '%';
            grid_container.style.height = size_box.longueur + '%';
            let sticker_json = null;
            {% if json_config is defined and json_config %}
            sticker_json = {{ json_config|json_encode|raw }};
            {% else %}
            sticker_json = {"type": "appro", "boxes": [{"id": "3us79", "code": "kb_name", "type": "field_main", "style": {"align": "center", "border": {"top": false, "left": false, "right": false, "bottom": false}, "font_size": 3, "font_weight": 2}, "content": "Libellé Kanban", "dimension": {"top": 10, "left": 10, "width": 388, "height": 54}}, {"id": "5v6xx7", "code": "article_code", "type": "field_main", "style": {"align": "left", "border": {"top": false, "left": false, "right": false, "bottom": false}, "font_size": 3, "font_weight": 0}, "content": "Art. code", "dimension": {"top": 70, "left": 10, "width": 114, "height": 54}}, {"id": "le1wif", "code": "article_name_short", "type": "field_main", "style": {"align": "left", "border": {"top": false, "left": false, "right": false, "bottom": false}, "font_size": 3, "font_weight": 0}, "content": "Art. nom court", "dimension": {"top": 70, "left": 130, "width": 268, "height": 56}}, {"id": "9ys878", "code": "article", "type": "codeBar", "style": {"align": "center", "border": {"top": false, "left": false, "right": false, "bottom": false}, "font_size": 3, "font_weight": 0}, "content": "Code Article", "dimension": {"top": 140, "left": 10, "width": 388, "height": 68}}, {"id": "k8lick", "type": "text", "style": {"align": "center", "border": {"top": true, "left": false, "right": false, "bottom": false}, "font_size": 3, "font_weight": 0}, "content": "", "dimension": {"top": 210, "left": 0, "width": 408, "height": 57}}, {"id": "5r9f3k", "code": "fournisseur_name", "type": "field_main", "style": {"align": "center", "border": {"top": false, "left": false, "right": false, "bottom": false}, "font_size": 3, "font_weight": 0}, "content": "Four. nom", "dimension": {"top": 220, "left": 10, "width": 388, "height": 46}}, {"id": "sr8c8", "code": "fa-arrow-down", "type": "icon", "style": {"align": "center", "border": {"top": false, "left": false, "right": false, "bottom": false}, "font_size": 3, "font_weight": 1}, "content": "<i class=\"fa fa-arrow-down\"></i>", "dimension": {"top": 270, "left": 10, "width": 388, "height": 48}}, {"id": "lg3t6", "code": "section_name", "type": "field_main", "style": {"align": "center", "border": {"top": false, "left": false, "right": false, "bottom": false}, "font_size": 3, "font_weight": 0}, "content": "Section nom", "dimension": {"top": 320, "left": 10, "width": 388, "height": 58}}, {"id": "dx200b", "type": "text", "style": {"align": "left", "border": {"top": false, "left": false, "right": false, "bottom": false}, "font_size": 2, "font_weight": 0}, "content": "TA 1 :", "dimension": {"top": 380, "left": 10, "width": 64, "height": 48}}, {"id": "mnp7c1", "code": "kb_delay_1", "type": "field_main", "style": {"align": "left", "border": {"top": false, "left": false, "right": false, "bottom": false}, "font_size": 2, "font_weight": 0}, "content": "TA1", "dimension": {"top": 380, "left": 80, "width": 80, "height": 48}}, {"id": "zqqi8mf", "type": "text", "style": {"align": "left", "border": {"top": false, "left": false, "right": false, "bottom": false}, "font_size": 2, "font_weight": 0}, "content": "TA 2 :", "dimension": {"top": 380, "left": 170, "width": 66, "height": 48}}, {"id": "zram2o", "code": "kb_delay_2", "type": "field_main", "style": {"align": "left", "border": {"top": false, "left": false, "right": false, "bottom": false}, "font_size": 2, "font_weight": 0}, "content": "TA2", "dimension": {"top": 380, "left": 240, "width": 98, "height": 46}}], "layout": "A4_41_64"};
            {% endif %}
            const font_size = ['fs-xs', 'fs-s', 'fs-m', 'fs-l', 'fs-xl'];
            const font_weight = ['fw-light', 'fw-normal', 'fw-bold'];
            let info_selected_box = document.getElementById('info_selected_box'),
                input_type = document.getElementById('input_type'),
                content_text = document.getElementById('content_text'),
                content_field_main = document.getElementById('content_field_main'),
                content_field_line = document.getElementById('content_field_line'),
                content_codeBar = document.getElementById('content_codeBar'),
                content_icon = document.getElementById('content_icon'),
                input_content_text = document.getElementById('input_content_text'),
                input_content_field_main = document.getElementById('input_content_field_main'),
                input_content_field_line = document.getElementById('input_content_field_line'),
                input_content_codeBar = document.getElementById('input_content_codeBar'),
                input_content_icon = document.getElementById('input_content_icon'),
                input_text_size = document.getElementById('input_text_size'),
                input_text_weight = document.getElementById('input_text_weight'),
                input_text_align = document.getElementById('input_text_align'),
                input_border_left = document.getElementById('input_border_left'),
                input_border_right = document.getElementById('input_border_right'),
                input_border_top = document.getElementById('input_border_top'),
                input_border_bottom = document.getElementById('input_border_bottom'),
                input_id = document.getElementById('input_id'),
                delete_zone = document.getElementById('btnConfirmDeleteZone'),
                add_zone = document.getElementById('add_zone'),
                btnSendForm = document.getElementById('btnSendForm')
            ;

            function draw_box(box_config) {
                let div = document.createElement('div');
                div.id = box_config.id;
                div.classList.add('box_resize_drag');
                div.style.top = box_config.dimension.top;
                div.style.left = box_config.dimension.left;
                div.style.width = box_config.dimension.width;
                div.style.height = box_config.dimension.height;
                let div_content = document.createElement('div');
                div_content.classList.add('box_content');
                div_content.innerHTML = box_config.content;
                applyStyle(div, box_config);
                div.append(div_content);
                grid_container.append(div);
                activate_drag_and_resize(div);
                bind_select_box(div);
            }

            function redraw_box(box_config) {
                let div = document.getElementById(box_config.id);
                div.classList.remove('text-center', 'text-right', 'text-left', 'bd-top', 'bd-left', 'bd-right', 'bd-bottom');
                font_size.forEach(function (cl_css) {
                    div.classList.remove(cl_css);
                });
                font_weight.forEach(function (cl_css) {
                    div.classList.remove(cl_css);
                });
                let div_content = div.querySelector('.box_content');
                div_content.innerHTML = box_config.content;
                applyStyle(div, box_config);
            }

            function applyStyle(div, box_config) {
                if (box_config.style.align === 'center') div.classList.add('text-center');
                else if (box_config.style.align === 'right') div.classList.add('text-right');
                else div.classList.add('text-left');
                div.classList.add(font_size[eval(box_config.style.font_size)]);
                div.classList.add(font_weight[eval(box_config.style.font_weight)]);

                if (eval(box_config.style.border.top)) div.classList.add('bd-top');
                if (eval(box_config.style.border.left)) div.classList.add('bd-left');
                if (eval(box_config.style.border.right)) div.classList.add('bd-right');
                if (eval(box_config.style.border.bottom)) div.classList.add('bd-bottom');
            }

            function calculate_box_dimension(element) {
                let grid_rect = grid_container.getBoundingClientRect();
                let rect = element.getBoundingClientRect();
                let box_top = ((rect.top - grid_rect.top) / grid_rect.height) * 100;
                let box_left = ((rect.left - grid_rect.left) / grid_rect.width) * 100;
                let box_width = (rect.width * 100) / grid_rect.width;
                let box_height = (rect.height * 100) / grid_rect.height;
                return {
                    top: box_top  + "%",
                    left: box_left  + "%",
                    width: box_width   + "%",
                    height: box_height   + "%"
                };
            }

            function display_info(element) {
                let box_config = get_box_config_by_id(element.id);

                $(input_id).val(box_config.id);
                $(input_type).val(box_config.type);
                let value = (box_config.hasOwnProperty('code')) ? box_config.code : box_config.content;
                switch_input_content(box_config.type, value);
                $(input_text_size).val(font_size[eval(box_config.style.font_size)]);
                $(input_text_align).val(box_config.style.align);
                $(input_text_weight).val(font_weight[eval(box_config.style.font_weight)]);
                $(input_border_top).prop('checked', eval(box_config.style.border.top));
                $(input_border_left).prop('checked', eval(box_config.style.border.left));
                $(input_border_right).prop('checked', eval(box_config.style.border.right));
                $(input_border_bottom).prop('checked', eval(box_config.style.border.bottom));
            }

            function switch_input_content(type, value) {
                $(content_field_main,
                content_field_line, 
                content_codeBar, 
                content_icon, 
                content_text).hide();
                $(input_text_weight).prop('disabled', false);
                if (type === 'text') {
                    if (value) $(input_content_text).val(value);
                    $(content_text).show();
                } else if (type === 'field_main') {
                    if (value) $(input_content_field_main).val(value);
                    $(content_field_main).show();
                } else if (type === 'field_line') {
                    if (value) $(input_content_field_line).val(value);
                    $(content_field_line).show();
                } else if (type === 'codeBar') {
                    if (value) $(input_content_codeBar).val(value);
                    $(content_codeBar).show();
                } else if (type === 'icon') {
                    $(input_text_weight).prop('disabled', true);
                    if (value) $(input_content_icon).val(value);
                    $(content_icon).show();
                }
            }

            function bind_select_box(element) {
                $(element).click(function () {
                    select_element(element);
                });
            }

            function activate_drag_and_resize(element) {
                $(element).draggable({
                    grid: [10, 10],
                    containment: "#grid-snap",
                    scroll: false,
                    start: function (e) {
                    },
                    stop: function (e) {
                        update_box_config_dimension(e.target);
                    }
                }).resizable({
                    grid: 10,
                    containment: "#grid-snap",
                    minHeight: 30,
                    stop: function (e) {
                        update_box_config_dimension(e.target);
                    }
                });
            }

            function get_box_config_by_id(id) {
                let response = null;
                sticker_json.boxes.forEach(function (box_config) {
                    if (box_config.id === id) {
                        response = box_config;
                    }
                });
                return response;
            }

            function update_box_config_dimension(element) {
                sticker_json.boxes.forEach(function (box_config, index) {
                    if (box_config.id === element.id) {
                        sticker_json.boxes[index].dimension = calculate_box_dimension(element);
                    }
                });
            }

            function update_box_config_form_form() {
                let element_id = $(input_id).val();
                sticker_json.boxes.forEach(function (box_config, index) {
                    if (box_config.id === element_id) {
                        sticker_json.boxes[index].type = $(input_type).val();
                        switch($(input_type).val()) {
                            case 'text' : 
                                sticker_json.boxes[index].content = $(input_content_text).val().trim();
                                break;
                            case 'field_main' :
                                sticker_json.boxes[index].code = $(input_content_field_main).val();
                                sticker_json.boxes[index].content = $(input_content_field_main).find('option:selected').text();
                                break;
                            case 'field_line' :
                                sticker_json.boxes[index].code = $(input_content_field_line).val();
                                sticker_json.boxes[index].content = $(input_content_field_line).find('option:selected').text();
                                break;
                            case 'codeBar' :
                                sticker_json.boxes[index].code = $(input_content_codeBar).val();
                                sticker_json.boxes[index].content = $(input_content_codeBar).find('option:selected').text();
                                break;
                            case 'icon' : 
                                sticker_json.boxes[index].code = $(input_content_icon).val();
                                sticker_json.boxes[index].content = '<i class="' + $(input_content_icon).val() + '"></i>';
                                sticker_json.boxes[index].style.font_weight = 1;
                                break;
                        }
                        sticker_json.boxes[index].style.font_size = font_size.indexOf($(input_text_size).val());
                        sticker_json.boxes[index].style.font_weight = font_weight.indexOf($(input_text_weight).val());
                        sticker_json.boxes[index].style.align = $(input_text_align).val();
                        sticker_json.boxes[index].style.border.top = ($(input_border_top).is(':checked'));
                        sticker_json.boxes[index].style.border.left = ($(input_border_left).is(':checked'));
                        sticker_json.boxes[index].style.border.right = ($(input_border_right).is(':checked'));
                        sticker_json.boxes[index].style.border.bottom = ($(input_border_bottom).is(':checked'));
                        redraw_box(sticker_json.boxes[index]);
                    }
                });
            }

            function delete_box_config_from_form() {
                let element_id = $(input_id).val();
                sticker_json.boxes.forEach(function (box_config, index) {
                    if (box_config.id === element_id) {
                        sticker_json.boxes.splice(index, 1);
                        $('#' + element_id).remove();
                        $('#modalDeleteZone').foundation('close');
                    }
                });
                disable_form_info_selected_box();
            }

            function triggered_input_and_button() {
                $(input_type).change(function () {
                    switch_input_content($(input_type).val(), null);
                    update_box_config_form_form();
                });
                $(input_content_text, 
                input_border_bottom,
                input_border_top,
                input_border_right,
                input_border_left,
                input_text_align,
                input_text_weight,
                input_text_size,
                input_content_icon,
                input_content_codeBar,
                input_content_field_line,
                input_content_field_main).change(function () {
                    update_box_config_form_form();
                });
                $(delete_zone).click(function () {
                    delete_box_config_from_form();

                });
                $(add_zone).click(function () {
                    let new_id = Math.random().toString(36).substring(7);
                    let default_config = {
                        id: new_id,//ramdom string
                        dimension: {top: 2, left: 2, width: 25, height: 25},
                        type: "text",
                        content: "{{ 'sticker.zone_new.default_txt'|trans }}",
                        style: {
                            align: 'center',
                            font_size: 3,
                            font_weight: 0,
                            border: {top: false, left: false, right: false, bottom: false}
                        }
                    };
                    sticker_json.boxes.push(default_config);
                    draw_box(default_config);
                    select_element(document.getElementById(new_id));
                });
                $(btnSendForm).unbind('click');
                $(btnSendForm).bind('click',function(){
                    $('#etiquette_config_string').val(JSON.stringify(sticker_json));
                    $('#FormEtiquette').submit();
                    $(btnSendForm).html(btn_spin);
                });
            }

            function select_element(element){
                $('.box_resize_drag').each(function (el) {
                    $(this).removeClass('is_selected');
                });
                $(element).addClass('is_selected');
                display_info(element);
                $(info_selected_box).fadeIn();
            }

            function on_load() {
                sticker_json.boxes.forEach(function (box_config) {
                    draw_box(box_config);
                });
                let last_index = sticker_json.boxes.length - 1;
                if(last_index > 0) {
                    select_element(document.getElementById(sticker_json.boxes[last_index].id));
                }
                triggered_input_and_button();
                disable_form_info_selected_box();
            }

            on_load();

            function disable_form_info_selected_box(){
                if($('.is_selected').length === 0){
                    $(info_selected_box).fadeOut();
                }
            }

        });


    </script>
    {% endif %}
    {% if is_granted('ROLE_APP_SUB_KB_ELECTRONIQUE') == false %}
    <script>
        $(document).ready(function () {
            let grid_container = document.getElementById('grid-snap');
            let sticker_json = null;
            {% if json_config is defined and json_config %}
            sticker_json = {{ json_config|json_encode|raw }};
            {% else %}
            sticker_json = {"type": "appro", "boxes": [{"id": "3us79", "code": "kb_name", "type": "field_main", "style": {"align": "center", "border": {"top": false, "left": false, "right": false, "bottom": false}, "font_size": 3, "font_weight": 2}, "content": "Libellé Kanban", "dimension": {"top": 10, "left": 10, "width": 388, "height": 54}}, {"id": "5v6xx7", "code": "article_code", "type": "field_main", "style": {"align": "left", "border": {"top": false, "left": false, "right": false, "bottom": false}, "font_size": 3, "font_weight": 0}, "content": "Art. code", "dimension": {"top": 70, "left": 10, "width": 114, "height": 54}}, {"id": "le1wif", "code": "article_name_short", "type": "field_main", "style": {"align": "left", "border": {"top": false, "left": false, "right": false, "bottom": false}, "font_size": 3, "font_weight": 0}, "content": "Art. nom court", "dimension": {"top": 70, "left": 130, "width": 268, "height": 56}}, {"id": "9ys878", "code": "article", "type": "codeBar", "style": {"align": "center", "border": {"top": false, "left": false, "right": false, "bottom": false}, "font_size": 3, "font_weight": 0}, "content": "Code Article", "dimension": {"top": 140, "left": 10, "width": 388, "height": 68}}, {"id": "k8lick", "type": "text", "style": {"align": "center", "border": {"top": true, "left": false, "right": false, "bottom": false}, "font_size": 3, "font_weight": 0}, "content": "", "dimension": {"top": 210, "left": 0, "width": 408, "height": 57}}, {"id": "5r9f3k", "code": "fournisseur_name", "type": "field_main", "style": {"align": "center", "border": {"top": false, "left": false, "right": false, "bottom": false}, "font_size": 3, "font_weight": 0}, "content": "Four. nom", "dimension": {"top": 220, "left": 10, "width": 388, "height": 46}}, {"id": "sr8c8", "code": "fa-arrow-down", "type": "icon", "style": {"align": "center", "border": {"top": false, "left": false, "right": false, "bottom": false}, "font_size": 3, "font_weight": 1}, "content": "<i class=\"fa fa-arrow-down\"></i>", "dimension": {"top": 270, "left": 10, "width": 388, "height": 48}}, {"id": "lg3t6", "code": "section_name", "type": "field_main", "style": {"align": "center", "border": {"top": false, "left": false, "right": false, "bottom": false}, "font_size": 3, "font_weight": 0}, "content": "Section nom", "dimension": {"top": 320, "left": 10, "width": 388, "height": 58}}, {"id": "dx200b", "type": "text", "style": {"align": "left", "border": {"top": false, "left": false, "right": false, "bottom": false}, "font_size": 2, "font_weight": 0}, "content": "TA 1 :", "dimension": {"top": 380, "left": 10, "width": 64, "height": 48}}, {"id": "mnp7c1", "code": "kb_delay_1", "type": "field_main", "style": {"align": "left", "border": {"top": false, "left": false, "right": false, "bottom": false}, "font_size": 2, "font_weight": 0}, "content": "TA1", "dimension": {"top": 380, "left": 80, "width": 80, "height": 48}}, {"id": "zqqi8mf", "type": "text", "style": {"align": "left", "border": {"top": false, "left": false, "right": false, "bottom": false}, "font_size": 2, "font_weight": 0}, "content": "TA 2 :", "dimension": {"top": 380, "left": 170, "width": 66, "height": 48}}, {"id": "zram2o", "code": "kb_delay_2", "type": "field_main", "style": {"align": "left", "border": {"top": false, "left": false, "right": false, "bottom": false}, "font_size": 2, "font_weight": 0}, "content": "TA2", "dimension": {"top": 380, "left": 240, "width": 98, "height": 46}}], "layout": "A4_41_64"};
            {% endif %}


            const font_size = ['fs-xs', 'fs-s', 'fs-m', 'fs-l', 'fs-xl'];
            const font_weight = ['fw-light', 'fw-normal', 'fw-bold'];

            let info_selected_box = document.getElementById('info_selected_box'),
                input_type = document.getElementById('input_type'),
                content_text = document.getElementById('content_text'),
                content_field_main = document.getElementById('content_field_main'),
                content_field_line = document.getElementById('content_field_line'),
                content_codeBar = document.getElementById('content_codeBar'),
                content_icon = document.getElementById('content_icon'),
                input_content_text = document.getElementById('input_content_text'),
                input_content_field_main = document.getElementById('input_content_field_main'),
                input_content_field_line = document.getElementById('input_content_field_line'),
                input_content_codeBar = document.getElementById('input_content_codeBar'),
                input_content_icon = document.getElementById('input_content_icon'),
                input_text_size = document.getElementById('input_text_size'),
                input_text_weight = document.getElementById('input_text_weight'),
                input_text_align = document.getElementById('input_text_align'),
                input_border_left = document.getElementById('input_border_left'),
                input_border_right = document.getElementById('input_border_right'),
                input_border_top = document.getElementById('input_border_top'),
                input_border_bottom = document.getElementById('input_border_bottom'),
                input_id = document.getElementById('input_id'),
                delete_zone = document.getElementById('btnConfirmDeleteZone'),
                add_zone = document.getElementById('add_zone'),
                btnSendForm = document.getElementById('btnSendForm')
            ;


            function draw_box(box_config) {
                let div = document.createElement('div');
                div.id = box_config.id;
                div.classList.add('box_resize_drag');
                div.style.top = box_config.dimension.top + 'px';
                div.style.left = box_config.dimension.left + 'px';
                div.style.width = box_config.dimension.width + 'px';
                div.style.height = box_config.dimension.height + 'px';
                let div_content = document.createElement('div');
                div_content.classList.add('box_content');
                div_content.innerHTML = box_config.content;
                applyStyle(div, box_config);
                div.append(div_content);
                grid_container.append(div);
                activate_drag_and_resize(div);
                bind_select_box(div);
            }

            function redraw_box(box_config) {
                let div = document.getElementById(box_config.id);
                div.classList.remove('text-center', 'text-right', 'text-left', 'bd-top', 'bd-left', 'bd-right', 'bd-bottom');
                font_size.forEach(function (cl_css) {
                    div.classList.remove(cl_css);
                });
                font_weight.forEach(function (cl_css) {
                    div.classList.remove(cl_css);
                });
                let div_content = div.querySelector('.box_content');
                div_content.innerHTML = box_config.content;
                applyStyle(div, box_config);
            }

            function applyStyle(div, box_config) {
                if (box_config.style.align === 'center') div.classList.add('text-center');
                else if (box_config.style.align === 'right') div.classList.add('text-right');
                else div.classList.add('text-left');
                div.classList.add(font_size[eval(box_config.style.font_size)]);
                div.classList.add(font_weight[eval(box_config.style.font_weight)]);

                if (eval(box_config.style.border.top)) div.classList.add('bd-top');
                if (eval(box_config.style.border.left)) div.classList.add('bd-left');
                if (eval(box_config.style.border.right)) div.classList.add('bd-right');
                if (eval(box_config.style.border.bottom)) div.classList.add('bd-bottom');
            }


            function calculate_box_dimension(element) {
                let grid_rect = grid_container.getBoundingClientRect();
                let rect = element.getBoundingClientRect();
                return {
                    top: parseInt(rect.top - grid_rect.top),
                    left: parseInt(rect.left - grid_rect.left),
                    width: parseInt(rect.width),
                    height: parseInt(rect.height)
                };
            }


            function display_info(element) {
                let box_config = get_box_config_by_id(element.id);

                $(input_id).val(box_config.id);
                $(input_type).val(box_config.type);
                let value = (box_config.hasOwnProperty('code')) ? box_config.code : box_config.content;
                switch_input_content(box_config.type, value);
                $(input_text_size).val(font_size[eval(box_config.style.font_size)]);
                // $(input_text_weight).val(font_weight[eval(box_config.style.font_weight)]);
                $(input_text_align).val(box_config.style.align);
                $(input_text_weight).val(font_weight[eval(box_config.style.font_weight)]);
                $(input_border_top).prop('checked', eval(box_config.style.border.top));
                $(input_border_left).prop('checked', eval(box_config.style.border.left));
                $(input_border_right).prop('checked', eval(box_config.style.border.right));
                $(input_border_bottom).prop('checked', eval(box_config.style.border.bottom));


                //  $('#infobox').html(JSON.stringify(box_config));
            }

            function switch_input_content(type, value) {
                $(content_field_main).hide();
                $(content_field_line).hide();
                $(content_codeBar).hide();
                $(content_icon).hide();
                $(content_text).hide();
                $(input_text_weight).prop('disabled', false);
                if (type === 'text') {
                    if (value) $(input_content_text).val(value);
                    $(content_text).show();
                } else if (type === 'field_main') {
                    if (value) $(input_content_field_main).val(value);
                    $(content_field_main).show();
                } else if (type === 'field_line') {
                    if (value) $(input_content_field_line).val(value);
                    $(content_field_line).show();
                } else if (type === 'codeBar') {
                    if (value) $(input_content_codeBar).val(value);
                    $(content_codeBar).show();
                } else if (type === 'icon') {
                    $(input_text_weight).prop('disabled', true);
                    if (value) $(input_content_icon).val(value);
                    $(content_icon).show();
                }
            }

            function bind_select_box(element) {
                $(element).click(function () {
                    select_element(element);
                });
            }

            function activate_drag_and_resize(element) {
                $(element).draggable({
                    grid: [10, 10],
                    containment: "#grid-snap",
                    scroll: false,
                    start: function (e) {
                    },
                    stop: function (e) {
                        update_box_config_dimension(e.target);
                    }
                }).resizable({
                    grid: 10,
                    containment: "#grid-snap",
                    minHeight: 30,
                    // start: function () {},
                    // resize: function (e) {},
                    stop: function (e) {
                        update_box_config_dimension(e.target);
                    }
                });
            }

            function get_box_config_by_id(id) {
                let response = null;
                sticker_json.boxes.forEach(function (box_config) {
                    if (box_config.id === id) {
                        response = box_config;
                    }
                });
                return response;
            }

            function update_box_config_dimension(element) {
                sticker_json.boxes.forEach(function (box_config, index) {
                    if (box_config.id === element.id) {
                        sticker_json.boxes[index].dimension = calculate_box_dimension(element);
                    }
                });
            }

            function update_box_config_form_form() {
                let element_id = $(input_id).val();
                sticker_json.boxes.forEach(function (box_config, index) {
                    if (box_config.id === element_id) {
                        sticker_json.boxes[index].type = $(input_type).val();
                        if ($(input_type).val() === 'text') {
                            sticker_json.boxes[index].content = $(input_content_text).val().trim();
                        } else if ($(input_type).val() === 'field_main') {
                            sticker_json.boxes[index].code = $(input_content_field_main).val();
                            sticker_json.boxes[index].content = $(input_content_field_main).find('option:selected').text();
                        } else if ($(input_type).val() === 'field_line') {
                            sticker_json.boxes[index].code = $(input_content_field_line).val();
                            sticker_json.boxes[index].content = $(input_content_field_line).find('option:selected').text();
                        } else if ($(input_type).val() === 'codeBar') {
                            //sticker_json.boxes[index].content = $(input_content_codeBar).val();
                            sticker_json.boxes[index].code = $(input_content_codeBar).val();
                            sticker_json.boxes[index].content = $(input_content_codeBar).find('option:selected').text();
                        } else if ($(input_type).val() === 'icon') {
                            sticker_json.boxes[index].code = $(input_content_icon).val();
                            sticker_json.boxes[index].content = '<i class="' + $(input_content_icon).val() + '"></i>';
                        }

                        sticker_json.boxes[index].style.font_size = font_size.indexOf($(input_text_size).val());


                        if ($(input_type).val() === 'icon') {
                            // $(input_text_weight).prop('disabled',true);
                            sticker_json.boxes[index].style.font_weight = 1;
                        } else {
                            // $(input_text_weight).prop('disabled',false);
                            sticker_json.boxes[index].style.font_weight = font_weight.indexOf($(input_text_weight).val());
                        }

                        sticker_json.boxes[index].style.align = $(input_text_align).val();
                        sticker_json.boxes[index].style.border.top = ($(input_border_top).is(':checked'));
                        sticker_json.boxes[index].style.border.left = ($(input_border_left).is(':checked'));
                        sticker_json.boxes[index].style.border.right = ($(input_border_right).is(':checked'));
                        sticker_json.boxes[index].style.border.bottom = ($(input_border_bottom).is(':checked'));
                        redraw_box(sticker_json.boxes[index]);
                    }
                });


            }

            function delete_box_config_from_form() {
                let element_id = $(input_id).val();
                sticker_json.boxes.forEach(function (box_config, index) {
                    if (box_config.id === element_id) {
                        sticker_json.boxes.splice(index, 1);
                        $('#' + element_id).remove();
                        $('#modalDeleteZone').foundation('close');
                    }
                });
                disable_form_info_selected_box();
            }

            function triggered_input_and_button() {
                $(input_type).change(function () {
                    switch_input_content($(input_type).val(), null);
                    update_box_config_form_form();
                });
                $(input_content_text).change(function () {
                    update_box_config_form_form();
                });
                $(input_content_field_main).change(function () {
                    update_box_config_form_form();
                });
                $(input_content_field_line).change(function () {
                    update_box_config_form_form();
                });
                $(input_content_codeBar).change(function () {
                    update_box_config_form_form();
                });
                $(input_content_icon).change(function () {
                    update_box_config_form_form();
                });
                $(input_text_size).change(function () {
                    update_box_config_form_form();
                });
                $(input_text_weight).change(function () {
                    update_box_config_form_form();
                });
                $(input_text_align).change(function () {
                    update_box_config_form_form();
                });
                $(input_border_left).change(function () {
                    update_box_config_form_form();
                });
                $(input_border_right).change(function () {
                    update_box_config_form_form();
                });
                $(input_border_top).change(function () {
                    update_box_config_form_form();
                });
                $(input_border_bottom).change(function () {
                    update_box_config_form_form();
                });
                $(delete_zone).click(function () {
                    delete_box_config_from_form();

                });
                $(add_zone).click(function () {
                    let new_id = Math.random().toString(36).substring(7);
                    let default_config = {
                        id: new_id,//ramdom string
                        dimension: {top: 2, left: 2, width: 25, height: 25},
                        type: "text",
                        content: "{{ 'sticker.zone_new.default_txt'|trans }}",
                        style: {
                            align: 'center',
                            font_size: 3,
                            font_weight: 0,
                            border: {top: false, left: false, right: false, bottom: false}
                        }
                    };
                    sticker_json.boxes.push(default_config);
                    draw_box(default_config);
                    select_element(document.getElementById(new_id));
                });
                $(btnSendForm).unbind('click');
                $(btnSendForm).bind('click',function(){
                    $('#etiquette_config_string').val(JSON.stringify(sticker_json));
                    $('#FormEtiquette').submit();
                    $(btnSendForm).html(btn_spin);
                });
            }

            function select_element(element){
                $('.box_resize_drag').each(function (el) {
                    $(this).removeClass('is_selected');
                });
                $(element).addClass('is_selected');
                display_info(element);
                $(info_selected_box).fadeIn();
            }

            function on_load() {
                sticker_json.boxes.forEach(function (box_config) {
                    draw_box(box_config);
                });
                let last_index = sticker_json.boxes.length - 1;
                if(last_index > 0) {
                    select_element(document.getElementById(sticker_json.boxes[last_index].id));
                }
                triggered_input_and_button();
                disable_form_info_selected_box();
            }

            on_load();

            function disable_form_info_selected_box(){
                if($('.is_selected').length === 0){
                    $(info_selected_box).fadeOut();
                }
            }

        });


    </script>
    
    {% endif %}
    {% endif %}
{% endblock %}