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

{% block page_content %}
    {% set color_mine = "rgb(255, 159, 64)" %}
    {% set color_others = "rgb(153, 102, 255)" %}
    {% set article_manager_percent = (data.articles.total > 0)? (100 * data.articles.manager)/data.articles.total : 0 %}
    {% set article_total_percent = (data.articles.total > 0)? (100 * (data.articles.total - data.articles.manager))/data.articles.total : 0 %}


    <div class="cell small-12 medium-6 large-4">
        {# WIDGET PRINT #}
        <div class="widget grid-x">
            <div class="cell small-12 title">{{ 'dashboard.widget.etiquette.title'|trans }}</div>
            <div class="cell small-12">
                <ul class="tabs" data-tabs id="print_by_kb">
                    <li class="tabs-title is-active"><a href="#print_kb_appro" aria-selected="true">{{ 'dashboard.widget.etiquette.tab.appro'|trans }}</a></li>
                    <li class="tabs-title"><a data-tabs-target="print_kb_fab" href="#kb_fab">{{ 'dashboard.widget.etiquette.tab.fab'|trans }}</a></li>
                </ul>
            </div>
            <div class="cell small-12 tabs-content no-padding" data-tabs-content="print_by_kb">
                <div class="tabs-panel is-active no-padding mt-0-5 widget_clickable" id="print_kb_appro" data-url="{{ url('app_print_list', {'code': constant('App\\Entity\\Kanban\\KanbanType::APPRO')}) }}">
                    <div class="grid-x">
                        <div class="cell medium-4 small-12">
                            <div class="box-indicator icon-top float-center">
                                <div class="icon">
                                    <i class="fa fa-print fa-4x"></i>
                                </div>
                                <div class="body">
                                    <div class="title xl" style="color: rgba(255, 159, 64,0.8)">{{ data.data_etiq_print.APPRO.to_print }}</div>
                                    <div class="sub-title">{{ 'dashboard.widget.etiquette.subtitle.to_print'|trans }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="cell medium-4 small-12">
                            <div class="box-indicator icon-top float-center">
                                <div class="icon">
                                    <i class="fa fa-trash-o fa-4x"></i>
                                </div>
                                <div class="body">
                                    <div class="title xl" style="color: rgba(255, 99, 132,0.8)">{{ data.data_etiq_print.APPRO.to_remove }}</div>
                                    <div class="sub-title">{{ 'dashboard.widget.etiquette.subtitle.to_remove'|trans }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="cell medium-4 small-12">
                            <div class="box-indicator icon-top float-center">
                                <div class="icon" style="margin-top: 15.5px;">
                                    <i class="fa fa-industry fa-3x"></i>
                                </div>
                                <div class="body">
                                    <div class="title xl" style="color: rgba(75, 192, 192,0.8)">{{ data.data_etiq_print.APPRO.kb_in_flow }}</div>
                                    <div class="sub-title">{{ 'dashboard.widget.etiquette.subtitle.used'|trans }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tabs-panel no-padding mt-0-5 widget_clickable" id="print_kb_fab" data-url="{{ url('app_print_list', {'code': constant('App\\Entity\\Kanban\\KanbanType::FAB')}) }}">
                    <div class="grid-x">
                        <div class="cell medium-4 small-12">
                            <div class="box-indicator icon-top float-center">
                                <div class="icon">
                                    <i class="fa fa-print fa-4x"></i>
                                </div>
                                <div class="body">
                                    <div class="title xl" style="color: rgba(255, 159, 64,0.8)">{{ data.data_etiq_print.FAB.to_print }}</div>
                                    <div class="sub-title">{{ 'dashboard.widget.etiquette.subtitle.to_print'|trans }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="cell medium-4 small-12">
                            <div class="box-indicator icon-top float-center">
                                <div class="icon">
                                    <i class="fa fa-trash-o fa-4x"></i>
                                </div>
                                <div class="body">
                                    <div class="title xl" style="color: rgba(255, 99, 132,0.8)">{{ data.data_etiq_print.FAB.to_remove }}</div>
                                    <div class="sub-title">{{ 'dashboard.widget.etiquette.subtitle.to_remove'|trans }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="cell medium-4 small-12">
                            <div class="box-indicator icon-top float-center">
                                <div class="icon" style="margin-top: 15.5px;">
                                    <i class="fa fa-industry fa-3x"></i>
                                </div>
                                <div class="body">
                                    <div class="title xl" style="color: rgba(75, 192, 192,0.8)">{{ data.data_etiq_print.FAB.kb_in_flow }}</div>
                                    <div class="sub-title">{{ 'dashboard.widget.etiquette.subtitle.used'|trans }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {# WIDGET FOURNISSEUR #}
        <div class="widget grid-x">
            <div class="cell small-12 title">
                {{ 'dashboard.widget.fournisseur.title'|trans }}
                <div class="info_figures">{{ 'dashboard.widget.fournisseur.subtitle'|trans }}</div>
            </div>
            <div class="cell small-12">
                <canvas id="indicator-fournisseur"></canvas>
            </div>
            <div class="cell small-12">
                <table class="style-light mt-1 no-mb">
                    <thead>
                    <tr>
                        <th></th>
                        <th>{{ 'dashboard.widget.kanban.last_view.table.fournisseur'|trans }}</th>
                        <th class="text-right">{{ 'dashboard.widget.fournisseur.tab.property.val_cmj'|trans }}</th>
                        <th class="text-right">%</th>
                    </tr>
                    </thead>
                    <tbody>
                    {#                    Use to color fa truck#}
                    {% set array_color_graph = ['rgb(255, 99, 132)','rgb(255, 159, 64)','rgb(75, 192, 192)','rgb(54, 162, 235)','rgb(253,216,53)','rgb(153, 102, 255)','rgb(201, 203, 207)','#EC407A','rgba(255, 99, 132, 0.5)','rgba(255, 159, 64, 0.5)','rgb(54, 98, 130)'] %}
                    {% for key, fournisseur_row in data.stock_fournisseur_proportion.top10 %}
                        {% set index = loop.index0 %}
                        <tr>
                            <td><i class="fa fa-truck" style="color: {{ array_color_graph[index] }}"></i></td>
                            <td>{{ fournisseur_row.name }}</td>
                            <td class="text-right">{{ fournisseur_row.value|number_format(2, ',', ' ') }}</td>
                            <td class="text-right">{{ fournisseur_row.percentage }}</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>


    <div class="cell small-12 medium-6 large-4">
        {# WIDGET KANBAN #}
        <div class="widget grid-x">
            <div class="cell small-12 title">
                {{ 'dashboard.widget.kanban.title'|trans }}
            </div>
            <div class="cell small-12">
                <div class="mr-1 ml-1 grid-x">
                    <div class="cell small-12">
                        <canvas id="indicator-kanban-by-type" width="80" height="50"></canvas>
                    </div>
                </div>
                <div class="grid-x">
                    <div class="cell small-12">
                        <ul class="tabs" data-tabs id="kb_repartition">
                            <li class="tabs-title is-active"><a href="#mine_kb" aria-selected="true">{{ 'mines'|trans }}</a></li>
                            <li class="tabs-title"><a data-tabs-target="other_kb" href="#kb_fab">{{ 'all'|trans }}</a></li>
                        </ul>
                    </div>
                    <div class="cell small-12 tabs-content no-padding" data-tabs-content="kb_repartition">
                        <div class="tabs-panel is-active no-padding" id="mine_kb">
                            <table class="style-light">
                                <thead>
                                <tr>
                                    <th></th>
                                    <th class="text-right">{{ 'values'|trans|capitalize }}</th>
                                    <th class="text-right">{{ 'days'|trans|capitalize }}</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for kb_type, row in data.kbValuesForArray %}
                                    <tr>
                                        <td>
                                            {% if kb_type == constant('App\\Entity\\Kanban\\KanbanType::APPRO') %}
                                                <a href="{{ url('app_kanban_appro_list') }}" class="text_black">{{ 'abbr.code_kanban_appro'|trans }}</a>
                                            {% else %}
                                                <a href="{{ url('app_kanban_fab_list') }}" class="text_black">{{ 'abbr.code_kanban_fab'|trans }}</a>
                                            {% endif %}
                                        </td>
                                        <td class="text-right">
                                            {{ row.manager_value|number_format(2, ',', ' ') }}
                                        </td>
                                        <td class="text-right">
                                            {{ row.manager_day|number_format(2, ',', ' ') }}
                                        </td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                        <div class="tabs-panel no-padding" id="other_kb">
                            <table class="style-light">
                                <thead>
                                <tr>
                                    <th></th>
                                    <th  class="text-right">{{ 'values'|trans|capitalize }}</th>
                                    <th class="text-right">{{ 'days'|trans|capitalize }}</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for kb_type, row in data.kbValuesForArray %}
                                    <tr>
                                        <td>
                                            {% if kb_type == constant('App\\Entity\\Kanban\\KanbanType::APPRO') %}
                                                <a href="{{ url('app_kanban_appro_list') }}" class="text_black">{{ 'abbr.code_kanban_appro'|trans }}</a>
                                            {% else %}
                                                <a href="{{ url('app_kanban_fab_list') }}" class="text_black">{{ 'abbr.code_kanban_fab'|trans }}</a>
                                            {% endif %}
                                        </td>
                                        <td class="text-right">{{ row.global_value|number_format(2, ',', ' ') }}</td>
                                        <td class="text-right">{{ row.global_day|number_format(2, ',', ' ') }}</td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="cell small-12">
                        <div class="subtitle">{{ 'dashboard.widget.kanban.last_view_kanban'|trans }}</div>
                        <table class="style-light jump  no-mb">
                            <thead>
                            <tr>
                                <th></th>
                                <th>{{ 'dashboard.widget.kanban.last_view.table.article'|trans }}</th>
                                <th>{{ 'dashboard.widget.kanban.last_view.table.designation'|trans }}</th>
                                <th>{{ 'dashboard.widget.kanban.last_view.table.section_cli'|trans }}</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for lastView in data.lastView.kanban %}
                                {% if lastView.kanban and lastView.kanban.type|length > 0 %}
                                    {% if lastView.kanban.type.code == constant('App\\Entity\\Kanban\\KanbanType::APPRO') %}
                                        {% set tag_color = 'rgba(255, 99, 132, 1)' %}
                                        {% set kb_url = url('app_kanban_appro_edit',{'kanban':lastView.kanban.id}) %}
                                    {% elseif lastView.kanban.type.code == constant('App\\Entity\\Kanban\\KanbanType::FAB') %}
                                        {% set tag_color = 'rgba(255, 159, 64, 1)' %}
                                        {% set kb_url = url('app_kanban_fab_edit',{'kanban':lastView.kanban.id}) %}
                                    {% elseif lastView.kanban.type.code == constant('App\\Entity\\Kanban\\KanbanType::FS') %}
                                        {% set tag_color = 'rgba(75, 192, 192, 1)' %}
                                        {% set kb_url = url('app_kanban_fs_edit',{'kanban':lastView.kanban.id}) %}
                                    {% elseif lastView.kanban.type.code == constant('App\\Entity\\Kanban\\KanbanType::TRANS') %}
                                        {% set tag_color = 'rgba(75, 192, 192, 1)' %}
                                        {% set kb_url = url('app_kanban_transfert_edit',{'kanban':lastView.kanban.id}) %}
                                    {% endif %}
                                {% else %}
                                    {% set tag_color = 'rgb(153, 102, 255)' %}
                                    {% set kb_url = '#' %}
                                {% endif %}

                                <tr data-url="{{ kb_url }}">
                                    <td><i class="fa fa-tag" style="color: {{ tag_color }}"></i></td>
                                    <td>{% if lastView.kanban.article %}{{ lastView.kanban.article.code }}{% endif %}</td>
                                    <td>{{ lastView.kanban.libelle }}</td>
                                    <td>{% if lastView.kanban.section %}{{ lastView.kanban.section.code }}{% endif %}</td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="cell small-12 medium-6 large-4">
        {# WIDGET ARTICLE #}
        <div class="widget grid-x">
            <div class="cell small-12 title">
                <a class="text_black" href="{{ url('app_article_list') }}">{{ 'dashboard.widget.article.title'|trans }}</a>
                <div class="figures">{{ data.articles.total }}</div>
            </div>
            <div class="cell small-12">
                <div class="mb-0-5 mr-1 ml-1 grid-x">
                    <div class="graph_line">
                        <span style="width: {{ article_manager_percent }}%; background-color: {{ color_mine }};"></span>
                        <span style="width: {{ article_total_percent }}%; background-color: {{ color_others }};"></span>
                    </div>
                    <div class="cell shrink text-center" style="width: {{ article_manager_percent }}%">
                        {{ data.articles.manager }}
                    </div>
                    <div class="cell auto text-center">
                        {{ data.articles.total - data.articles.manager }}
                    </div>
                </div>
                <div class="grid-x ml-1 mt-0-5">
                    <div class="cell small-6">
                        <i class="dot_color" style="background-color: {{ color_mine }};"></i><span>Les miens</span><br>
                    </div>
                    <div class="cell small-6">
                        <i class="dot_color" style="background-color: {{ color_others }};"></i><span>Les autres</span>
                    </div>
                </div>
                <div class="grid-x">
                    {% if data.lastView.article|length > 0 %}
                        <div class="cell small-12 mt-1">
                            <div class="subtitle float-right">{{ 'dashboard.widget.article.last_view_articles'|trans }}</div>
                        </div>
                        <div class="cell small-12">
                            <table class="style-light jump no-mb">
                                <thead>
                                <tr>
                                    <th>{{ 'dashboard.widget.article.last_view.table.code'|trans }}</th>
                                    <th>{{ 'dashboard.widget.article.last_view.table.designation'|trans }}</th>
                                    <th>{{ 'dashboard.widget.article.last_view.table.codeABC'|trans }}</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for lastView in data.lastView.article %}
                                    <tr data-url="{{ url('app_article_edit',{'article':lastView.article.id}) }}">
                                        <td>{{ lastView.article.code }}</td>
                                        <td>{{ lastView.article.designationCourte }}</td>
                                        <td>{{ lastView.article.codeABC }}</td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
        {# WIDGET STOCK #}
        {% if is_granted('ROLE_APP_SUB_KB_ELECTRONIQUE') == false %}
        <div class="widget grid-x">
            <div class="cell small-12 title">
                {{ 'dashboard.widget.theorical_stock.title'|trans }}
            </div>
            <div class="cell small-12">
                <ul class="tabs" data-tabs id="stock_by_type_tabs">
                    <li class="tabs-title is-active"><a href="#by_days" aria-selected="true">{{ 'days'|trans }}</a></li>
                    <li class="tabs-title"><a data-tabs-target="by_values" href="#kb_fab">{{ 'values'|trans }}</a></li>
                </ul>
            </div>

            <div class="cell small-12 tabs-content no-padding" data-tabs-content="stock_by_type_tabs">
                <div class="tabs-panel is-active no-padding mt-0-5" id="by_days">
                    <canvas id="indicator-stock-by-days" width="80" height="50"></canvas>
                </div>
                <div class="tabs-panel no-padding mt-0-5" id="by_values">
                    <canvas id="indicator-stock-by-values" width="80" height="50"></canvas>
                </div>
            </div>
            {% if is_granted('ROLE_APP_SUB_KB_FAB_ACCESS') %}
                <div class="cell small-6 pl-2">
                    <input data-kb_type="{{ constant('App\\Entity\\Kanban\\KanbanType::APPRO') }}" class="checkbox_to_change_dataset_theorical_stock" type="checkbox" id="input_select_kb_appro_data_theorical_stock" name="input_select_kb_appro_data_theorical_stock" checked>
                    <label for="input_select_kb_appro_data_theorical_stock">{{ 'dashboard.widget.kanban.legend.appro'|trans }}</label>
                </div>
                <div class="cell small-6">
                    <input data-kb_type="{{ constant('App\\Entity\\Kanban\\KanbanType::FAB') }}" class="checkbox_to_change_dataset_theorical_stock" type="checkbox" id="input_select_kb_fab_data_theorical_stock" name="input_select_kb_appro_data_theorical_stock" checked>
                    <label for="input_select_kb_fab_data_theorical_stock">{{ 'dashboard.widget.kanban.legend.fab'|trans }}</label>
                </div>
            {% endif %}
        {% endif %}
        </div>
    </div>

    {# WIDGET KB ELEC STOP #}
    {% if is_granted('ROLE_APP_SUB_KB_ELECTRONIQUE') %}
    <div class="widget grid-x">
            <div class="cell small-12 title">
                {{ 'dashboard.widget.real_stock.title'|trans }}
            </div>
            <div class="cell small-12">
                <ul class="tabs" data-tabs id="stock_kb_elec_by_type_tabs">
                    <li class="tabs-title is-active"><a href="#kb_elec_by_days" aria-selected="true">Jours</a></li>
                    <li class="tabs-title"><a data-tabs-target="kb_elec_by_values" href="#kb_fab">Valeurs</a></li>
                    <li class="tabs-title"><a data-tabs-target="kb_elec_by_quantite" href="#kb_fab">Quantité</a></li>
                </ul>
            </div>

            <div class="cell small-12 tabs-content no-padding" data-tabs-content="stock_kb_elec_by_type_tabs">
                <div class="tabs-panel is-active no-padding mt-0-5" id="kb_elec_by_days">
                    <canvas id="indicator-stock-kb-elec-by-days" width="80" height="50"></canvas>
                </div>
                <div class="tabs-panel no-padding mt-0-5" id="kb_elec_by_values">
                    <canvas id="indicator-stock-kb-elec-by-values" width="80" height="50"></canvas>
                </div>
                <div class="tabs-panel no-padding mt-0-5" id="kb_elec_by_quantite">
                    <canvas id="indicator-stock-kb-elec-by-quantite" width="80" height="50"></canvas>
                </div>
            </div>
            {% if is_granted('ROLE_APP_SUB_KB_FAB_ACCESS') %}
                <div class="cell small-6 pl-2">
                    <input data-kb_elec_type="{{ constant('App\\Entity\\Kanban\\KanbanType::APPRO') }}" class="checkbox_to_change_dataset_real_stock" type="checkbox" id="input_select_kb_appro_data_real_stock" name="input_select_kb_appro_data_real_stock" checked>
                    <label for="input_select_kb_appro_data_real_stock">{{ 'dashboard.widget.kanban.legend.appro'|trans }}</label>
                </div>
                <div class="cell small-6">
                    <input data-kb_elec_type="{{ constant('App\\Entity\\Kanban\\KanbanType::FAB') }}" class="checkbox_to_change_dataset_real_stock" type="checkbox" id="input_select_kb_fab_data_real_stock" name="input_select_kb_appro_data_real_stock" checked>
                    <label for="input_select_kb_fab_data_real_stock">{{ 'dashboard.widget.kanban.legend.fab'|trans }}</label>
                </div>
            {% endif %}
        {% endif %}
        </div>
    </div>



{% endblock %}

{% block javascript_footer %}
    {{ parent() }}
    <script>
        $(document).ready(function(){
            $('.widget tr').click(function () {
                let data_url = $(this).data('url');
                if (data_url) window.location = data_url;
            });

            $('.widget_clickable').on('click', function () {
                let url = $(this).data('url');
                if (url){
                    window.location = url;
                }
            });

            let half_doughnut_options = {
                legend:{
                    display:true,
                    position: 'bottom'
                },
                cutoutPercentage : 60,
                circumference: Math.PI,
                rotation: Math.PI,
                tooltips:{
                    callbacks: {
                        label: function(tooltipItem, data) {
                            var dataset = data.datasets[tooltipItem.datasetIndex];
                            var index = tooltipItem.index;
                            return dataset.label + ': ' + dataset.data[index];
                        }
                    },
                },
            };
            let line_options = {
                legend:{
                    display:true,
                    position: 'bottom'
                },
                tooltips:{
                    callbacks: {
                        label: function(tooltipItem, data) {
                            var dataset = data.datasets[tooltipItem.datasetIndex];
                            var index = tooltipItem.index;
                            return dataset.label + ': ' + dataset.data[index];
                        }
                    },
                },
            };
            let bar_options = {
                legend:{
                    display:true,
                    position: 'bottom'
                },
                tooltips:{
                    callbacks: {
                        label: function(tooltipItem, data) {
                            var dataset = data.datasets[tooltipItem.datasetIndex];
                            var index = tooltipItem.index;
                            return dataset.label + ': ' + dataset.data[index];
                        }
                    },
                },
                scales: {
                    xAxes: [{
                        stacked: false
                    }],
                    yAxes: [{
                        stacked: false
                    }]
                }
            };
            let complete_doughnut_options = {
                legend: {
                    position: 'bottom',
                    labels: {
                        generateLabels: function(chart) {
                            var data = chart.data;
                            if (data.labels.length && data.datasets.length) {
                                return data.labels.map(function(label, i) {
                                    var meta = chart.getDatasetMeta(0);
                                    var style = meta.controller.getStyle(i);
                                    return {
                                        text: label,
                                        fillStyle: arrayChartColor[i],
                                        strokeStyle: style.borderColor,
                                        lineWidth: style.borderWidth,
                                        // coz we have to stoke if mine and other are hidden
                                        hidden: (isNaN(data.datasets[0].data[i*2]) || meta.data[i*2].hidden) || (isNaN(data.datasets[0].data[i*2+1]) || meta.data[i*2+1].hidden),

                                        // Extra data used for toggling the correct item
                                        index: i
                                    };
                                });
                            }

                            return [];
                        }
                    },

                    onClick: function(e, legendItem) {
                        var index = legendItem.index;
                        var chart = this.chart;
                        var i, ilen, meta;

                        for (i = 0, ilen = (chart.data.datasets || []).length; i < ilen; ++i) {
                            meta = chart.getDatasetMeta(i);
                            // toggle visibility of index if exists / hide mine and other
                            if (meta.data[index]) {
                                meta.data[index*2].hidden = !meta.data[index*2].hidden;
                                meta.data[index*2+1].hidden = !meta.data[index*2+1].hidden;
                            }
                        }


                        chart.update();
                    }
                },
                cutoutPercentage : 60,
                circumference: Math.PI*2,
                rotation: Math.PI*0.5,
                tooltips:{
                    rtl: false,
                    callbacks: {
                        label: function(tooltipItem, data) {
                            var dataset = data.datasets[tooltipItem.datasetIndex];
                            var index = tooltipItem.index;
                            return dataset.custom_labels[index] + ': ' + dataset.data[index];
                        }
                    }
                },
                animation: {
                    onProgress: function () {
                        let ctx = this.chart.ctx;
                        let current_chart_id = this.chart.id;
                        ctx.font = Chart.helpers.fontString(48, 'normal', '"Amaranth", sans-serif');
                        ctx.fillStyle = '#9E9E9E';
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'bottom';
                        let total = 0;


                        this.data.datasets.forEach(function (dataset)
                        {
                            // Calc total
                            dataset._meta[current_chart_id].data;



                            Object.keys(dataset._meta[current_chart_id].data).forEach(function (key) {
                                if (!dataset._meta[current_chart_id].data[key].hidden){
                                    total += parseFloat(dataset.data[key]);
                                }
                            });

                            var model = dataset._meta[current_chart_id];
                        });
                        ctx.fillText(total,this.chart.width/2,this.chart.height/1.9);
                    },
                    easing: 'easeOutCirc'
                },
            };

            let kb_global_data_indicator = {};
            {% if is_granted('ROLE_APP_SUB_KB_FAB_ACCESS') %}
                kb_global_data_indicator = {
                    labels: [{% for code_abc in data.stock_mini.global.codes %}'{{ code_abc }}'{% if not loop.last %},{% endif %}{% endfor %}],
                    data: {
                        by_day: {
                            data_min: [{% for value in data.stock_mini.global.data.min.day %}{{ value }}{% if not loop.last %},{% endif %}{% endfor %}],
                            data_avg: [{% for value in data.stock_mini.global.data.avg.day %}{{ value }}{% if not loop.last %},{% endif %}{% endfor %}],
                            data_max: [{% for value in data.stock_mini.global.data.max.day %}{{ value }}{% if not loop.last %},{% endif %}{% endfor %}]
                        },
                        by_value: {
                            data_min: [{% for value in data.stock_mini.global.data.min.val %}{{ value }}{% if not loop.last %},{% endif %}{% endfor %}],
                            data_avg: [{% for value in data.stock_mini.global.data.avg.val %}{{ value }}{% if not loop.last %},{% endif %}{% endfor %}],
                            data_max: [{% for value in data.stock_mini.global.data.max.val %}{{ value }}{% if not loop.last %},{% endif %}{% endfor %}]
                        }
                    }
                };
                let kb_appro_data_indicator = {
                    labels: [{% for code_abc in data.stock_mini.appro.codes %}'{{ code_abc }}'{% if not loop.last %},{% endif %}{% endfor %}],
                    data: {
                        by_day: {
                            data_min: [{% for value in data.stock_mini.appro.data.min.day %}{{ value }}{% if not loop.last %},{% endif %}{% endfor %}],
                            data_avg: [{% for value in data.stock_mini.appro.data.avg.day %}{{ value }}{% if not loop.last %},{% endif %}{% endfor %}],
                            data_max: [{% for value in data.stock_mini.appro.data.max.day %}{{ value }}{% if not loop.last %},{% endif %}{% endfor %}]
                        },
                        by_value: {
                            data_min: [{% for value in data.stock_mini.appro.data.min.val %}{{ value }}{% if not loop.last %},{% endif %}{% endfor %}],
                            data_avg: [{% for value in data.stock_mini.appro.data.avg.val %}{{ value }}{% if not loop.last %},{% endif %}{% endfor %}],
                            data_max: [{% for value in data.stock_mini.appro.data.max.val %}{{ value }}{% if not loop.last %},{% endif %}{% endfor %}]
                        }
                    }
                };
                let kb_fab_data_indicator = {
                    labels: [{% for code_abc in data.stock_mini.fab.codes %}'{{ code_abc }}'{% if not loop.last %},{% endif %}{% endfor %}],
                    data: {
                        by_day: {
                            data_min: [{% for value in data.stock_mini.fab.data.min.day %}{{ value }}{% if not loop.last %},{% endif %}{% endfor %}],
                            data_avg: [{% for value in data.stock_mini.fab.data.avg.day %}{{ value }}{% if not loop.last %},{% endif %}{% endfor %}],
                            data_max: [{% for value in data.stock_mini.fab.data.max.day %}{{ value }}{% if not loop.last %},{% endif %}{% endfor %}]
                        },
                        by_value: {
                            data_min: [{% for value in data.stock_mini.fab.data.min.val %}{{ value }}{% if not loop.last %},{% endif %}{% endfor %}],
                            data_avg: [{% for value in data.stock_mini.fab.data.avg.val %}{{ value }}{% if not loop.last %},{% endif %}{% endfor %}],
                            data_max: [{% for value in data.stock_mini.fab.data.max.val %}{{ value }}{% if not loop.last %},{% endif %}{% endfor %}]
                        }
                    }
                };
            {% else %}
                // If he haven't any acces for KB Fab just display KB appro values
                kb_global_data_indicator = {
                    labels: [{% for code_abc in data.stock_mini.appro.codes %}'{{ code_abc }}'{% if not loop.last %},{% endif %}{% endfor %}],
                    data: {
                        by_day: {
                            data_min: [{% for value in data.stock_mini.appro.data.min.day %}{{ value }}{% if not loop.last %},{% endif %}{% endfor %}],
                            data_avg: [{% for value in data.stock_mini.appro.data.avg.day %}{{ value }}{% if not loop.last %},{% endif %}{% endfor %}],
                            data_max: [{% for value in data.stock_mini.appro.data.max.day %}{{ value }}{% if not loop.last %},{% endif %}{% endfor %}]
                        },
                        by_value: {
                            data_min: [{% for value in data.stock_mini.appro.data.min.val %}{{ value }}{% if not loop.last %},{% endif %}{% endfor %}],
                            data_avg: [{% for value in data.stock_mini.appro.data.avg.val %}{{ value }}{% if not loop.last %},{% endif %}{% endfor %}],
                            data_max: [{% for value in data.stock_mini.appro.data.max.val %}{{ value }}{% if not loop.last %},{% endif %}{% endfor %}]
                        }
                    }
                };
            {% endif %}

            let chart_indicator_by_days = new Chart(document.getElementById('indicator-stock-by-days'), {
                type: 'bar',
                data: data = {
                    // labels: ['Stock Mini', 'Stock Moyen', 'Stock Max'],
                    labels: kb_global_data_indicator.labels,
                    datasets: [
                        {
                            data: kb_global_data_indicator.data.by_day.data_min,
                            label: "{{ 'dashboard.widget.theorical_stock.stock_mini'|trans }}",
                            backgroundColor: chartColors.red,
                            fill: true
                            // backgroundColor: '#FFFFFF'
                        },
                        {
                            data: kb_global_data_indicator.data.by_day.data_avg,
                            label: "{{ 'dashboard.widget.theorical_stock.stock_avg'|trans }}",
                            backgroundColor: chartColors.orange,
                            fill: true
                            // backgroundColor: '#FFFFFF'
                        },
                        {
                            data: kb_global_data_indicator.data.by_day.data_max,
                            label: "{{ 'dashboard.widget.theorical_stock.stock_max'|trans }}",
                            backgroundColor: chartColors.green,
                            fill: true
                            // backgroundColor: '#FFFFFF'
                        }
                    ]
                },
                options: bar_options,

            });
            let chart_indicator_by_val = new Chart(document.getElementById('indicator-stock-by-values'), {
                type: 'bar',
                data: data = {
                    // labels: ['Stock Mini', 'Stock Moyen', 'Stock Max'],
                    labels: kb_global_data_indicator.labels,
                    datasets: [
                        {
                            data: kb_global_data_indicator.data.by_value.data_min,
                            label: "{{ 'dashboard.widget.theorical_stock.stock_mini'|trans }}",
                            backgroundColor: chartColors.red,
                            // backgroundColor: '#FFFFFF'
                        },
                        {
                            data: kb_global_data_indicator.data.by_value.data_avg,
                            label: "{{ 'dashboard.widget.theorical_stock.stock_avg'|trans }}",
                            backgroundColor: chartColors.orange,
                            // backgroundColor: '#FFFFFF'
                        },
                        {
                            data: kb_global_data_indicator.data.by_value.data_max,
                            label: "{{ 'dashboard.widget.theorical_stock.stock_max'|trans }}",
                            backgroundColor: chartColors.green,
                            // backgroundColor: '#FFFFFF'
                        },
                        // {
                        //     data: [34,36,41],
                        //     label: 'Autre'
                        // },
                    ]
                },
                options: bar_options,
            });

            let myPieChart = new Chart(document.getElementById('indicator-kanban-by-type'), {
                type: 'doughnut',
                data: data = {
                    labels: ["{{ 'dashboard.widget.kanban.legend.appro'|trans }}", "{{ 'dashboard.widget.kanban.legend.fab'|trans }}", "{{ 'dashboard.widget.kanban.legend.fs'|trans }}"],
                    datasets: [
                        {
                            data: [{% for type in data.kanban %}{{ type.mine }},{{ type.other - type.mine }}{% if not loop.last %},{% endif %}{% endfor %}],
                            label: "{{ 'dashboard.widget.kanban.unit'|trans }}",
                            backgroundColor: [chartColors.red,chartColors.red_light,chartColors.orange, chartColors.orange_light,chartColors.green, chartColors.green_light],
                            custom_labels: [
                                {% for type, row in data.kanban %}
                                    {% set key_to_translate = 'code_kanban_'~type|lower %}
                                    "{{ 'mine'|trans ~ ' ' ~ key_to_translate|trans }}",
                                    "{{ 'other'|trans ~ ' ' ~ key_to_translate|trans }}"
                                    {% if not loop.last %},{% endif %}
                                {% endfor %}
                            ]
                        }
                    ]
                },
                options: complete_doughnut_options,

            });
            // myPieChart.generateLegend();
            new Chart(document.getElementById('indicator-fournisseur'), {
                type: 'pie',
                data: data = {
                    labels: [{% for fournisseur_row in data.stock_fournisseur_proportion.top10 %}'{{ fournisseur_row.name }}'{% if not loop.last %},{% endif %}{% endfor %}],
                    datasets: [
                        {
                            data: [{% for fournisseur_row in data.stock_fournisseur_proportion.top10 %}{{ fournisseur_row.value }}{% if not loop.last %},{% endif %}{% endfor %}],
                            // label: "Nb Kanban",
                            backgroundColor: arrayChartColor,
                        }
                    ]
                },
                options: {
                    title: {
                        display: false
                    },
                    legend:{
                        display:false,
                    },
                    tooltips:{
                        callbacks: {
                            label: function(tooltipItem, data) {
                                var dataset = data.datasets[tooltipItem.datasetIndex];
                                var index = tooltipItem.index;
                                {#let percent_val = dataset.data[index]*100 / {{ data.stock_fournisseur_proportion.global }};#}
                                return data.labels[index] + ': ' + Math.round10(dataset.data[index], -2).toLocaleString('FR-fr')+'€';
                            }
                        },
                    },
                }
            });

            {% if is_granted('ROLE_APP_SUB_KB_FAB_ACCESS') %}

            $('.checkbox_to_change_dataset_theorical_stock').click(function () {
                let is_appro_checked = true;
                let is_fab_checked = true;
                $('.checkbox_to_change_dataset_theorical_stock').each(function () {
                    let kb_type = $(this).data('kb_type');
                    if (kb_type === "{{ constant('App\\Entity\\Kanban\\KanbanType::APPRO') }}")
                    {
                        is_appro_checked = $(this).prop('checked');
                    } else {
                        is_fab_checked = $(this).prop('checked');
                    }
                });
                updateThericalStockGraphDataset(is_appro_checked,is_fab_checked)
            });

            function updateThericalStockGraphDataset(appro_check, fab_checked) {
                if (appro_check){
                    if (fab_checked){
                        removeData(chart_indicator_by_days);
                        addData(chart_indicator_by_days, kb_global_data_indicator.labels, kb_global_data_indicator.data.by_day);
                        removeData(chart_indicator_by_val);
                        addData(chart_indicator_by_val, kb_global_data_indicator.labels, kb_global_data_indicator.data.by_value);
                    } else {
                        removeData(chart_indicator_by_days);
                        addData(chart_indicator_by_days, kb_appro_data_indicator.labels, kb_appro_data_indicator.data.by_day);
                        removeData(chart_indicator_by_val);
                        addData(chart_indicator_by_val, kb_appro_data_indicator.labels, kb_appro_data_indicator.data.by_value);
                    }
                } else {
                    if (fab_checked){
                        removeData(chart_indicator_by_days);
                        addData(chart_indicator_by_days, kb_fab_data_indicator.labels, kb_fab_data_indicator.data.by_day);
                        removeData(chart_indicator_by_val);
                        addData(chart_indicator_by_val, kb_fab_data_indicator.labels, kb_fab_data_indicator.data.by_value);
                    } else {
                        removeData(chart_indicator_by_days);
                        removeData(chart_indicator_by_val);
                    }
                }
            }

            function addData(chart, array_label, data) {
                chart.data.labels = array_label;
                chart.data.datasets[0].data = data.data_min;
                chart.data.datasets[1].data = data.data_avg;
                chart.data.datasets[2].data = data.data_max;
                chart.update();
            }

            function removeData(chart) {
                chart.data.labels = [];
                chart.data.datasets.forEach((dataset) => {
                    dataset.data = [];
                });
                chart.update();
            }
            {% endif %}
        });
    </script>
{% endblock %}