{% 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_fs.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>
                <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_fs_reset_print',{'kanban':kanban.id,'tab':tab}) }}" class="button blue small" ><i class="fa fa-print"></i> {{ 'kanban.reset_print.btn'|trans }}</a>
                <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><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_fs_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 = '_' ~ loop.index ~ '_' ~ file|lower ~ '.html.twig' %}
                        {% include 'App/Kanban/FS/_html/' ~ filename %}
                    </div>
                </div>
            {% endif %}
        {% endfor %}
    </div>
    {# MODAL DELETE #}
    <div class="reveal red" id="modalDeleteKanban" data-reveal>
        <div class="reveal-title">{{ 'kanban_fs.modal.delete.title'|trans }}</div>
        <div class="reveal-body">
            {{ 'kanban_fs.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_fs.title.clone'|trans }}</div>
        <div class="reveal-body">
            {{ 'kanban_fs.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::FS') }}";
            {% include 'App/_include/_print/print.js.twig' %}
            $('#btn_submit_clone_kanban').click(function () {
                $(this).html(btn_spin);
                window.location = "{{ url('app_kanban_fs_clone', {'kanban': kanban.id}) }}";
            });

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

            let table_id = 'kb_fs_list';{# idem $screen_code in controller 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_fs_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);
            }
            let btn_delete_kanban = $('#btnDeleteKanban'),
                url_delete_kanban = "{{ url('app_kanban_fs_ajax_delete', {'kanban':kanban.id}) }}",
                btn_delete_clicked = false;
            $(btn_delete_kanban).click(function () {
                if (!btn_delete_clicked){
                    btn_delete_clicked = true;
                    let initial_btn = $(btn_delete_kanban).html();
                    $.ajax({
                        url: url_delete_kanban,
                        method: "POST",
                        data: {token : "{{ csrf_token('app_kanban_fs_ajax_delete') }}"},
                        success: function (response) {
                            if (response.hasOwnProperty('result')){
                                if (response.result){
                                    window.location = {% if from.view and from.id %}"{{ url('app_article_edit',{'article': from.id}) }}"{% else %}"{{ url('app_kanban_fs_list') }}"{% endif %};
                                }
                            }
                        },
                        error: function () {
                            $(btn_delete_kanban).html(initial_btn);
                        }
                    })
                }
            });
        });
    </script>
{% endblock %}