{% 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 class="underlined"><i class="fa fa-tag"></i>Tableau de bord Kanban</h1>
            </div>
        </div>
    </div>
    <div class="cell small-12">
        <div id="list">
            <div id="dtKanbanBoard" 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>
        <div id="screens" style="overflow-x: auto">

        </div>
    </div>

    {# MODAL ETIQUETTE #}
    <div class="reveal" id="modalEtiquette" data-reveal>
        <div class="reveal-title">{{ 'etiquette.title.display'|trans }}</div>
        <div class="reveal-body">
            <div id="content">
                <div class="grid-x" >
                    <div class="cell small-12 medium-4">
                        <fieldset class="modalPart">
                            <h6 class="underlined text_primary_light">{{ 'kanban_appro.subtitle.etiquette'|trans }}</h6>
                            <div class="sub-title" id="numero_serie"></div>
                            <div class="sub-title" id="etat"></div>
                            <div class="sub-title" id="quantite"></div>
                            <div class="sub-title" id="statut_ec"></div>
                            {# </div>#}
                        </fieldset>
                    </div>
                    <div class="cell small-12 medium-8">
                        <fieldset class="modalPart">
                            <div class="cell small-6">
                                <h6 class="underlined text_primary_light">{{ 'kanban_appro.subtitle.actions'|trans }}</h6>
                                <div id="button_action">
                                </div>
                            </div>
                        </fieldset>
                    </div>
                </div>
            </div>
        </div>
        <button class="close-button"  data-close aria-label="Close modal" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>

    {# MODAL CONFIRM ACTION #}
    <div class="reveal tiny" id="modalConfirmationAction" data-reveal>
        <div class="reveal-title">{{ 'kanban_appro.modal.confirmation'|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="#">{{ 'kanban_appro.modal.yes'|trans }}</a>
                </div>
                <div class="cell shrink">
                    <a data-close class="cancel button small no-mb">{{ 'kanban_appro.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>
{% 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 is_granted('ROLE_APP_SUB_IMPORT_KB_APPRO') or is_granted('ROLE_APP_SUB_IMPORT_CMJ') %}
            {% import 'App/_include/_import/_modal.import.js.twig' as macro_import_js %}
            {% endif %}
            {% if is_granted('ROLE_APP_SUB_IMPORT_KB_APPRO') %}
            {{ macro_import_js.js_import('kanban', 0, 'import_kanban', constant('App\\Entity\\Kanban\\KanbanType::APPRO')) }}
            {% endif %}
            {% if is_granted('ROLE_APP_SUB_IMPORT_CMJ') %}
            {{ macro_import_js.js_import('kanban', 1, 'import_cmj', constant('App\\Entity\\Kanban\\KanbanType::APPRO')) }}
            {% endif %}
            {% include 'App/_include/_export/_modal.export.js.twig' %}
{#            {% if dt_settings.data.data_set|length > 0 %}#}
            let fixedColumn = 5;

            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('dtKanbanBoard'),  {{ dt_settings_customer|json_encode|raw }}, [{'type':'button','title':'{{ "datatable.custom_button.report"|trans }}', 'id':'btn_generate_rapports','icon':'fa-book'}, {'type':'button','title': '{{ "datatable.custom_button.export"|trans }}', 'id':'btn_call_export','icon':'fa-cloud-upload'}], fixedColumn);
                let table = {{ dt_settings_customer.data.data_set|json_encode|raw }};
                updateStockWidget(table);
                {#checkIsNewEvent({{ dt_settings_customer|json_encode|raw }},dataTable );#}
            }else{ //USER
                $('#user').prop('checked', true);
                dtToolbar_test = new dtToolbar(document.getElementById('dtKanbanBoard'),  {{ dt_settings_user|json_encode|raw }}, [{'type':'button','title':'{{ "datatable.custom_button.report"|trans }}', 'id':'btn_generate_rapports','icon':'fa-book'}, {'type':'button','title': '{{ "datatable.custom_button.export"|trans }}', 'id':'btn_call_export','icon':'fa-cloud-upload'}], fixedColumn);
                let table = {{ dt_settings_user.data.data_set|json_encode|raw }};
                updateStockWidget(table);
                {#checkIsNewEvent({{ dt_settings_user|json_encode|raw }},dataTable );#}

            }

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

            $('#user').click(function(event){
                let dataTable = $('#kb_board_list').DataTable();
                dataTable.clear().draw();
                dataTable.rows.add(data_user["data"]["data_set"]);
                dataTable.columns.adjust().draw();
                let table = {{ dt_settings_user.data.data_set|json_encode|raw }};
                updateStockWidget(table);
                checkIsNewEvent({{ dt_settings_user|json_encode|raw }},dataTable);
            });

            $(dtToolbar_test).on('row.click', function(e, id){
                let url = "{{ url('app_kanban_board_redirect_to_kanban_type', {'kanbanid': '__00__'}) }}";
                window.location = url.replace('__00__', id);
            });

{#            {% endif %}#}
            function updateStockWidget(table){
                for(var row of table) {
                    var rowId = row['DT_RowId'];
                    var changeStyle = document.getElementById(rowId);
                    if (changeStyle != null && row['indice_stock'] != null && row['indice_ressource'] != null) {
                        switch(row['indice_stock']) {
                            case 0 :
                                changeStyle.childNodes[13].innerHTML = "<div class=\"etiquette_stock_indicator etiquette_stock_indicator_blue\">" + row["stock_dispo"] + "</div>";
                                changeStyle.childNodes[14].innerHTML = "<div class=\"etiquette_stock_indicator etiquette_stock_indicator_blue\">" + row["stock_ctrl"] + "</div>";
                                changeStyle.childNodes[20].innerHTML = "<div class=\"etiquette_stock_indicator etiquette_stock_indicator_blue\">" + row["pourcentage_stock"] + "</div>";
                                break;
                            case 1 :
                                changeStyle.childNodes[13].innerHTML = "<div class=\"etiquette_stock_indicator etiquette_stock_indicator_green\">" + row["stock_dispo"] + "</div>";
                                changeStyle.childNodes[14].innerHTML = "<div class=\"etiquette_stock_indicator etiquette_stock_indicator_green\">" + row["stock_ctrl"] + "</div>";
                                changeStyle.childNodes[20].innerHTML = "<div class=\"etiquette_stock_indicator etiquette_stock_indicator_green\">" + row["pourcentage_stock"] + "</div>";
                                break;
                            case 2 :
                                changeStyle.childNodes[13].innerHTML = "<div class=\"etiquette_stock_indicator etiquette_stock_indicator_yellow\">" + row["stock_dispo"] + "</div>";
                                changeStyle.childNodes[14].innerHTML = "<div class=\"etiquette_stock_indicator etiquette_stock_indicator_yellow\">" + row["stock_ctrl"] + "</div>";
                                changeStyle.childNodes[20].innerHTML = "<div class=\"etiquette_stock_indicator etiquette_stock_indicator_yellow\">" + row["pourcentage_stock"] + "</div>";
                                break;
                            case 3 :
                                changeStyle.childNodes[13].innerHTML = "<div class=\"etiquette_stock_indicator etiquette_stock_indicator_pink\">" + row["stock_dispo"] + "</div>";
                                changeStyle.childNodes[14].innerHTML = "<div class=\"etiquette_stock_indicator etiquette_stock_indicator_pink\">" + row["stock_ctrl"] + "</div>";
                                changeStyle.childNodes[20].innerHTML = "<div class=\"etiquette_stock_indicator etiquette_stock_indicator_pink\">" + row["pourcentage_stock"] + "</div>";
                                break;
                            case 4 :
                                changeStyle.childNodes[13].innerHTML = "<div class=\"etiquette_stock_indicator etiquette_stock_indicator_red\">" + row["stock_dispo"] + "</div>";
                                changeStyle.childNodes[14].innerHTML = "<div class=\"etiquette_stock_indicator etiquette_stock_indicator_red\">" + row["stock_ctrl"] + "</div>";
                                changeStyle.childNodes[20].innerHTML = "<div class=\"etiquette_stock_indicator etiquette_stock_indicator_red\">" + row["pourcentage_stock"] + "</div>";
                                break;
                        }
                        switch(row['indice_ressource']) {
                            case 0 :
                                changeStyle.childNodes[16].innerHTML = "<div class=\"etiquette_stock_indicator etiquette_stock_indicator_blue\">" + row["ressource"] + "</div>";
                                changeStyle.childNodes[21].innerHTML = "<div class=\"etiquette_stock_indicator etiquette_stock_indicator_blue\">" + row["pourcentage_ressource"] + "</div>";
                                break;
                            case 1 :
                                changeStyle.childNodes[16].innerHTML = "<div class=\"etiquette_stock_indicator etiquette_stock_indicator_green\">" + row["ressource"] + "</div>";
                                changeStyle.childNodes[21].innerHTML = "<div class=\"etiquette_stock_indicator etiquette_stock_indicator_green\">" + row["pourcentage_ressource"] + "</div>";
                                break;
                            case 2 :
                                changeStyle.childNodes[16].innerHTML = "<div class=\"etiquette_stock_indicator etiquette_stock_indicator_yellow\">" + row["ressource"] + "</div>";
                                changeStyle.childNodes[21].innerHTML = "<div class=\"etiquette_stock_indicator etiquette_stock_indicator_yellow\">" + row["pourcentage_ressource"] + "</div>";
                                break;
                            case 3 :
                                changeStyle.childNodes[16].innerHTML = "<div class=\"etiquette_stock_indicator etiquette_stock_indicator_pink\">" + row["ressource"] + "</div>";
                                changeStyle.childNodes[21].innerHTML = "<div class=\"etiquette_stock_indicator etiquette_stock_indicator_pink\">" + row["pourcentage_ressource"] + "</div>";
                                break;
                            case 4 :
                                changeStyle.childNodes[16].innerHTML = "<div class=\"etiquette_stock_indicator etiquette_stock_indicator_red\">" + row["ressource"] + "</div>";
                                changeStyle.childNodes[21].innerHTML = "<div class=\"etiquette_stock_indicator etiquette_stock_indicator_red\">" + row["pourcentage_ressource"] + "</div>";
                                break;
                        }
                    }
                }
            }

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