{% 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>{{ 'kanban_fab.title.text'|trans }}</h1>
            </div>
            <div class="cell small-12  medium-shrink header_action">
                <button type="button" id="call_previous_element" class="call_previous_next_element" title="{{ 'previous'|trans }}"></button>
                <button type="button" id="call_next_element" class="call_previous_next_element" title="{{ 'next'|trans }}"></button>
                {% if is_granted('ROLE_APP_SUB_KB_ELECTRONIQUE') == false %}
                    <button type="button" class="button blue small" data-open="modal_print"><i class="fa fa-print"></i> {{ 'print.button.print'|trans }}</button>
                    <a href="{{ url('app_kanban_appro_reset_print',{'kanban':kanban.id,'tab':tab}) }}" class="button blue small" ><i class="fa fa-print"></i> {{ 'kanban.reset_print.btn'|trans }}</a>
                {% endif %}
                <button type="button" class="button purple small" data-open="modalCloneKanban"><i class="fa fa-files-o"></i> {{ 'clone'|trans }}</button>
                <button type="button" class="button save small" data-open="modalDeleteKanban"><i class="fa fa-trash"></i> {{ 'delete'|trans }}</button>
            </div>
        </div>
    </div>
    <div class="cell small-12">
        <div class="grid-x grid-padding-x">
            <div class="cell small-12 medium-6">
                <div class="listing"><span>{{ 'kanban.article.label'|trans }}</span><b><a href="{{ url('app_article_edit', {'article':kanban.article.id}) }}">{{ kanban.article }}</a></b></div>
            </div>
            <div class="cell small-12 medium-6">
                <div class="listing"><span>{{ 'kanban.section.label'|trans }}</span><i class="fa fa-industry mr-0-5"></i><b>{{ kanban.section }}</b></div>
            </div>
        </div>
    </div>
    <div class="cell small-12">
        <ul class="tabs" id="main_tabs">
            {% for tab_code, tab_url in tabs %}
                {% set trans_key = 'kanban.tab.' ~ tab_code %}
                <li class="tabs-title"><a href="{{ url('app_kanban_fab_edit',{'kanban':kanban.id, 'tab':tab_url}) }}" {% if tab == tab_url %}aria-selected="true"{% endif %}>{{ trans_key|trans }}</a></li>
            {% endfor %}
        </ul>

        {% for file, url in tabs %}
            {% if tab == url %}
                <div class="tabs-content {% if file == 'ETIQ' %}no-pt{% endif %}" data-tabs-content="main_tabs">
                    <div class="grid-x {% if file != 'ETIQ' %}grid-padding-x{% endif %}">
                        {% set filename = file|lower ~ '.html.twig' %}
                        {% include 'App/Kanban/Fabrication/_html/' ~ filename %}
                    </div>
                </div>
            {% endif %}
        {% endfor %}
    </div>
    {# MODAL DELETE #}
    <div class="reveal red" id="modalDeleteKanban" data-reveal>
        <div class="reveal-title">{{ 'kanban_fab.modal.delete.title'|trans }}</div>
        <div class="reveal-body">
            {{ 'kanban_fab.modal.delete.body'|trans }}
        </div>
        <div class="reveal-footer">
            <button data-close class="button small cancel">{{ 'cancel'|trans }}</button>
            <button id="btnDeleteKanban" 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>

    <div class="reveal" id="modalCloneKanban" data-reveal>
        <div class="reveal-title">{{ 'kanban_fab.title.clone'|trans }}</div>
        <div class="reveal-body">
            {{ 'kanban_fab.message.clone.text'|trans }}
        </div>
        <div class="reveal-footer">
            <button data-close class="button small cancel">{{ 'cancel'|trans }}</button>
            <button class="button small save" id="btn_submit_clone_kanban">{{ 'clone'|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 = kanban.type.code %}
    {% include 'App/_include/_print/print.html.twig' %}
{% endblock %}

{% block javascript_footer %}
    {{ parent() }}
    <script>
        $(document).ready(function(){
            // Selected_ids is use to include print.js.twig
            let selected_ids = [{{ kanban.id }}];
            let kb_type_code = "{{ constant('App\\Entity\\Kanban\\KanbanType::FAB') }}";
            {% include 'App/_include/_print/print.js.twig' %}
            $('#btn_submit_edit_header_kanban_fab').click(function () {
                $(this).html(btn_spin);
                $('#formEditHeader').submit();
            });

            $('#btn_submit_clone_kanban').click(function () {
                $(this).html(btn_spin);
                window.location = "{{ url('app_kanban_fab_clone', {'kanban': kanban.id}) }}";
            });

            $('#btnDeleteKanban').click(function () {
                $(this).html(btn_spin);
                window.location = "{{ url('app_kanban_fab_delete', {'kanban':kanban.id}) }}";
            });

            {% for file, url in tabs %}
                {% if tab == url %}
                    {% set filename =  file|lower ~ '.js.twig' %}
                    {% include 'App/Kanban/Fabrication/_js/' ~ filename %}
                {% endif %}
            {% endfor %}

            let table_id = 'kb_fab_list';
            let collection_ids = $().get_next_previous_ids(table_id);
            if(collection_ids){
                $('.call_previous_next_element').fadeIn(100);
                let next_previous_url = "{{ url('app_kanban_fab_edit',{'kanban':'__00__'}) }}";
                $('#call_next_element').click(function(){
                    let id = $().get_next_or_previous_id(table_id,collection_ids,'next');
                    if(id){
                        window.location = next_previous_url.replace('__00__', id);
                    }
                });
                $('#call_previous_element').click(function(){
                    let id = $().get_next_or_previous_id(table_id,collection_ids,'previous');
                    if(id){
                        window.location = next_previous_url.replace('__00__', id);
                    }
                });
                $().manage_btn_next_and_previous(table_id,collection_ids,next_previous_url);
            }

            $('#isKanbanElectronique').on('change', function() {
                refreshIsKanbanElec(function(response){
                });
                RefreshTabs();
            });

            function reverseString(str) {
                var splitString = str.split("");
                var reverseArray = splitString.reverse();
                var joinArray = reverseArray.join("");
                return joinArray;
            }

            function RefreshTabs(){
                let childrenMainTabs = document.getElementById('main_tabs').children;
                for(let z = 0; z < childrenMainTabs.length; z++){
                    let child = childrenMainTabs[z].childNodes;
                    //let reverse_url = (child[0].href).reverse();
                    let reverse_url = reverseString(child[0].href);
                    let reversed_value = reverse_url.substring(0, reverse_url.indexOf('/'));
                    let correct_value = reverseString(reversed_value);
                    if(correct_value === "compteurs"){
                        if(isKanbanElectronique.checked.toString() === "false"){
                            child[0].style.display = "none";
                        } else {
                            child[0].style.display = "block";
                        }
                    }
                }
            }

            function refreshIsKanbanElec(callback){

                // ca marche comme appro
                let url_basic = "{{ url('app_kanban_appro_ajax_refresh', {'kanban' : '__0__','statut' : '__1__'})}}";


                url_basic = url_basic.replace('__0__', {{ kanban.id }});
                url_basic = url_basic.replace('__1__', isKanbanElectronique.checked.toString());

                $.ajax({
                    type: 'GET',
                    url: url_basic,
                    dataType: "json",
                    success: function(response){
                        return callback(response);
                    }
                });
            }

        });
    </script>
{% endblock %}