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

{% block page_content %}
    <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_widget_print_label.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_widget_print_label.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_widget_print_label.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_widget_print_label.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_widget_print_label.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_widget_print_label.FAB.kb_in_flow }}</div>
                                    <div class="sub-title">{{ 'dashboard.widget.etiquette.subtitle.used'|trans }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {# WIDGET SUPPLIERS #}
        <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 fournisseur_name, value in data.stock_fournisseur_proportion.top10 %}#}
                    {% for fournisseur_row in data_widget_suppliers.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 KANBANS #}
        <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_widget_kanbans.kpi %}
                                    {% if kb_type != constant('App\\Entity\\Kanban\\KanbanType::FS') %}
                                    <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.values|number_format(2, ',', ' ') }}
                                        </td>
                                        <td class="text-right">
                                            {{ row.manager.days|number_format(2, ',', ' ') }}
                                        </td>
                                    </tr>
                                    {% endif %}
                                {% 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_widget_kanbans.kpi %}
                                    {% if kb_type != constant('App\\Entity\\Kanban\\KanbanType::FS') %}
                                    <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.total.values|number_format(2, ',', ' ') }}</td>
                                        <td class="text-right">{{ row.total.days|number_format(2, ',', ' ') }}</td>
                                    </tr>
                                    {% endif %}
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                    {% if data_widget_kanbans.last_views|length > 0 %}
                    <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 last_view in data_widget_kanbans.last_views %}
                                {% if last_view.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':last_view.kanban_id}) %}
                                {% elseif last_view.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':last_view.kanban_id}) %}
                                {% elseif last_view.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':last_view.kanban_id}) %}
                                {% endif %}
                                <tr data-url="{{ kb_url }}">
                                    <td><i class="fa fa-tag" style="color: {{ tag_color }}"></i></td>
                                    <td><span title="{{ last_view.article_name }}">{{ last_view.article_code }}</span></td>
                                    <td>{{ last_view.kanban_name }}</td>
                                    <td><span title="{{ last_view.section_client_name }}">{{ last_view.section_client_code }}</span></td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    <div class="cell small-12 medium-6 large-4">
        {# WIDGET SUBSCRIPTION #}
        {% if data_widget_subscription.customer_management and (data_widget_subscription.current_offer == constant('App\\Entity\\Business\\Offer::LEVEL_TRIAL') or data_widget_subscription.countdown < 30) and data_widget_subscription.current_offer != constant('App\\Entity\\Business\\Offer::LEVEL_FREE')%}
        <div class="widget grid-x">
            <div class="cell small-12 title">
                <a class="text_black" href="{{ url('my_account_index') }}">
                    {% if data_widget_subscription.current_offer == constant('App\\Entity\\Business\\Offer::LEVEL_TRIAL') %}
                    {{ 'dashboard.widget.subscription.trial_title'|trans }}
                    {% else %}
                    {{ 'dashboard.widget.subscription.title'|trans }}
                    {% endif %}
                </a>
                <p><small>{{ 'dashboard.widget.subscription.sub_title'|trans }}</small></p>
                <div class="figures">{{ data_widget_subscription.countdown }}&nbsp;{% if data_widget_subscription.countdown > 1 %}{{ 'dashboard.widget.subscription.days'|trans  }}{% else %}{{ 'dashboard.widget.subscription.day'|trans  }}{% endif %}</div>
            </div>
            <div class="cell small-12 text-center">
                <a href="{{ url('subscription_step_1') }}">
                    {% if data_widget_subscription.current_offer == constant('App\\Entity\\Business\\Offer::LEVEL_TRIAL') %}
                        {{ 'dashboard.widget.subscription.trial_link'|trans }}
                    {% else %}
                        {{ 'dashboard.widget.subscription.link'|trans }}
                    {% endif %}
                </a>
            </div>
        </div>
        {% endif %}
        {# WIDGET ARTICLES #}
        {% set color_mine = "rgb(255, 159, 64)" %}
        {% set color_others = "rgb(153, 102, 255)" %}
        <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_widget_articles.counter.total }}</div>
            </div>
            <div class="cell small-12">
                <div class="mb-0-5 mr-1 ml-1 grid-x">
                    <div class="graph_line">
                            {% set article_manager_percent = (data_widget_articles.counter.total  > 0) ? data_widget_articles.counter.manager / data_widget_articles.counter.total * 100 : 0 %}
                            {% set article_total_percent = (data_widget_articles.counter.total > 0) ? (data_widget_articles.counter.total - data_widget_articles.counter.manager) / data_widget_articles.counter.total * 100 : 0 %}
                        <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_widget_articles.counter.manager }}
                    </div>
                    <div class="cell auto text-center">
                        {{ data_widget_articles.counter.total - data_widget_articles.counter.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>{{ 'mines'|trans }}</span><br>
                    </div>
                    <div class="cell small-6">
                        <i class="dot_color" style="background-color: {{ color_others }};"></i><span>{{ 'other'|trans }}</span>
                    </div>
                </div>
                {% if data_widget_articles.last_views|length > 0 %}
                    <div class="grid-x">
                        <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 last_view in data_widget_articles.last_views %}
                                    <tr data-url="{{ url('app_article_edit',{'article':last_view.article_id}) }}">
                                        <td>{{ last_view.article_code }}</td>
                                        <td>{{ last_view.article_name }}</td>
                                        <td>{{ last_view.article_code_abc }}</td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>
        {# WIDGET STOCK #}
        <div class="widget grid-x">
            <div class="cell small-12 title">{{ 'dashboard.widget.theorical_stock.title'|trans }}</div>
            {% if is_granted('ROLE_APP_SUB_KB_FAB_ACCESS') %}
                <div class="cell small-12 text-center">
                    <input data-kb_type="{{ constant('App\\Entity\\Kanban\\KanbanType::APPRO') }}" class="checkbox_to_change_dataset_theoretical_stock" type="checkbox" id="input_select_kb_appro_data_theoretical_stock" name="input_select_kb_appro_data_theoretical_stock" checked>
                    <label for="input_select_kb_appro_data_theoretical_stock" class="ml-1">{{ 'dashboard.widget.kanban.legend.appro'|trans }}</label>
                    <input data-kb_type="{{ constant('App\\Entity\\Kanban\\KanbanType::FAB') }}" class="checkbox_to_change_dataset_theoretical_stock" type="checkbox" id="input_select_kb_fab_data_theoretical_stock" name="input_select_kb_fab_data_theoretical_stock" checked>
                    <label for="input_select_kb_fab_data_theoretical_stock">{{ 'dashboard.widget.kanban.legend.fab'|trans }}</label>
                </div>
            {% endif %}
            <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>

        </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;
                }
            });
        {# WIDGET SUPPLIERS #}
            new Chart(document.getElementById('indicator-fournisseur'), {
                type: 'pie',
                data: data = {
                    labels: [{% for fournisseur_row in data_widget_suppliers.top10 %}'{{ fournisseur_row.name }}'{% if not loop.last %},{% endif %}{% endfor %}],
                    datasets: [
                        {
                            data: [{% for fournisseur_row in data_widget_suppliers.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')+'€';
                            }
                        },
                    },
                }
            });
        {# WIDGET KANBANS #}
            let chart_kanbans_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'
                },
            };
            new Chart(document.getElementById('indicator-kanban-by-type'), {
                type: 'doughnut',
                data: data = {
                    labels: [{% for type, data in data_widget_kanbans.kpi %}"{{ ('dashboard.widget.kanban.legend.' ~ type|lower)|trans }}"{% if not loop.last %},{% endif %}{% endfor %}],
                    datasets: [
                        {
                            data: [{% for type, data in data_widget_kanbans.kpi %}{{ data.manager.nb }},{{ data.total.nb - data.manager.nb }}{% 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, chartColors.purple, chartColors.purple_light],
                            custom_labels: [
                                {% for type, data in data_widget_kanbans.kpi %}
                                    "{{ 'mine'|trans ~ ' ' ~ ('code_kanban_' ~ type|lower )|trans }}",
                                    "{{ 'other'|trans ~ ' ' ~ ('code_kanban_' ~ type|lower )|trans }}"
                                    {% if not loop.last %},{% endif %}
                                {% endfor %}
                            ]
                        }
                    ]
                },
                options: chart_kanbans_options,

            });
        {# WIDGET STOCKS #}
            let chart_stock_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 chart_stock_dataset_globals = {
                labels: [{% for code_abc in data_widget_stock.global.codes %}'{{ code_abc }}'{% if not loop.last %},{% endif %}{% endfor %}],
                data: {
                    by_day: {
                        data_min: [{% for days_value in data_widget_stock.global.min.days %}{{ days_value|number_format(2,'.','') }}{% if not loop.last %},{% endif %}{% endfor %}],
                        data_avg: [{% for days_value in data_widget_stock.global.avg.days %}{{ days_value|number_format(2,'.','') }}{% if not loop.last %},{% endif %}{% endfor %}],
                        data_max: [{% for days_value in data_widget_stock.global.max.days %}{{ days_value|number_format(2,'.','') }}{% if not loop.last %},{% endif %}{% endfor %}]
                    },
                    by_value: {
                        data_min: [{% for value in data_widget_stock.global.min.values %}{{ value|number_format(2,'.','') }}{% if not loop.last %},{% endif %}{% endfor %}],
                        data_avg: [{% for value in data_widget_stock.global.avg.values %}{{ value|number_format(2,'.','') }}{% if not loop.last %},{% endif %}{% endfor %}],
                        data_max: [{% for value in data_widget_stock.global.max.values %}{{ value|number_format(2,'.','') }}{% if not loop.last %},{% endif %}{% endfor %}]
                    }
                }
            };
            let chart_stock_by_days = new Chart(document.getElementById('indicator-stock-by-days'), {
                type: 'bar',
                data: data = {
                    // labels: ['Stock Mini', 'Stock Moyen', 'Stock Max'],
                    labels: chart_stock_dataset_globals.labels,
                    datasets: [
                        {
                            data: chart_stock_dataset_globals.data.by_day.data_min,
                            label: "{{ 'dashboard.widget.theorical_stock.stock_mini'|trans }}",
                            backgroundColor: chartColors.red,
                            fill: true
                        },
                        {
                            data: chart_stock_dataset_globals.data.by_day.data_avg,
                            label: "{{ 'dashboard.widget.theorical_stock.stock_avg'|trans }}",
                            backgroundColor: chartColors.orange,
                            fill: true
                        },
                        {
                            data: chart_stock_dataset_globals.data.by_day.data_max,
                            label: "{{ 'dashboard.widget.theorical_stock.stock_max'|trans }}",
                            backgroundColor: chartColors.green,
                            fill: true
                        }
                    ]
                },
                options: chart_stock_options,

            });
            let chart_stock_by_value = new Chart(document.getElementById('indicator-stock-by-values'), {
                type: 'bar',
                data: data = {
                    labels: chart_stock_dataset_globals.labels,
                    datasets: [
                        {
                            data: chart_stock_dataset_globals.data.by_value.data_min,
                            label: "{{ 'dashboard.widget.theorical_stock.stock_mini'|trans }}",
                            backgroundColor: chartColors.red,
                        },
                        {
                            data: chart_stock_dataset_globals.data.by_value.data_avg,
                            label: "{{ 'dashboard.widget.theorical_stock.stock_avg'|trans }}",
                            backgroundColor: chartColors.orange,
                        },
                        {
                            data: chart_stock_dataset_globals.data.by_value.data_max,
                            label: "{{ 'dashboard.widget.theorical_stock.stock_max'|trans }}",
                            backgroundColor: chartColors.green,
                        },
                    ]
                },
                options: chart_stock_options,
            });
            {% if is_granted('ROLE_APP_SUB_KB_FAB_ACCESS') and data_widget_stock.FAB is defined and data_widget_stock.APPRO is defined %}
                let chart_stock_dataset_appro = {
                    labels: [{% for code_abc in data_widget_stock.APPRO.codes %}'{{ code_abc }}'{% if not loop.last %},{% endif %}{% endfor %}],
                    data: {
                        by_day: {
                            data_min: [{% for days_value in data_widget_stock.APPRO.min.days %}{{ days_value|number_format(2,'.','') }}{% if not loop.last %},{% endif %}{% endfor %}],
                            data_avg: [{% for days_value in data_widget_stock.APPRO.avg.days %}{{ days_value|number_format(2,'.','') }}{% if not loop.last %},{% endif %}{% endfor %}],
                            data_max: [{% for days_value in data_widget_stock.APPRO.max.days %}{{ days_value|number_format(2,'.','') }}{% if not loop.last %},{% endif %}{% endfor %}]
                        },
                        by_value: {
                            data_min: [{% for value in data_widget_stock.APPRO.min.values %}{{ value|number_format(2,'.','') }}{% if not loop.last %},{% endif %}{% endfor %}],
                            data_avg: [{% for value in data_widget_stock.APPRO.avg.values %}{{ value|number_format(2,'.','') }}{% if not loop.last %},{% endif %}{% endfor %}],
                            data_max: [{% for value in data_widget_stock.APPRO.max.values %}{{ value|number_format(2,'.','') }}{% if not loop.last %},{% endif %}{% endfor %}]
                        }
                    }
                };
                let chart_stock_dataset_fab = {
                    labels: [{% for code_abc in data_widget_stock.FAB.codes %}'{{ code_abc }}'{% if not loop.last %},{% endif %}{% endfor %}],
                    data: {
                        by_day: {
                            data_min: [{% for days_value in data_widget_stock.FAB.min.days %}{{ days_value|number_format(2,'.','') }}{% if not loop.last %},{% endif %}{% endfor %}],
                            data_avg: [{% for days_value in data_widget_stock.FAB.avg.days %}{{ days_value|number_format(2,'.','') }}{% if not loop.last %},{% endif %}{% endfor %}],
                            data_max: [{% for days_value in data_widget_stock.FAB.max.days %}{{ days_value|number_format(2,'.','') }}{% if not loop.last %},{% endif %}{% endfor %}]
                        },
                        by_value: {
                            data_min: [{% for value in data_widget_stock.FAB.min.values %}{{ value|number_format(2,'.','') }}{% if not loop.last %},{% endif %}{% endfor %}],
                            data_avg: [{% for value in data_widget_stock.FAB.avg.values %}{{ value|number_format(2,'.','') }}{% if not loop.last %},{% endif %}{% endfor %}],
                            data_max: [{% for value in data_widget_stock.FAB.max.values %}{{ value|number_format(2,'.','') }}{% if not loop.last %},{% endif %}{% endfor %}]
                        }
                    }
                };
                $('#input_select_kb_fab_data_theoretical_stock').prop('checked',true);
                $('#input_select_kb_appro_data_theoretical_stock').prop('checked',true);
                $('.checkbox_to_change_dataset_theoretical_stock').click(function () {
                    let is_appro_checked = true;
                    let is_fab_checked = true;
                    $('.checkbox_to_change_dataset_theoretical_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');
                        }
                    });
                    updateTheoreticalStockGraphDataset(is_appro_checked,is_fab_checked)
                });
                function updateTheoreticalStockGraphDataset(appro_checked, fab_checked) {
                    removeData(chart_stock_by_days);
                    removeData(chart_stock_by_value);
                    if (appro_checked && fab_checked){
                        addData(chart_stock_by_days, chart_stock_dataset_globals.labels, chart_stock_dataset_globals.data.by_day);
                        addData(chart_stock_by_value, chart_stock_dataset_globals.labels, chart_stock_dataset_globals.data.by_value);
                    }
                    if (appro_checked && !fab_checked){
                        addData(chart_stock_by_days, chart_stock_dataset_appro.labels, chart_stock_dataset_appro.data.by_day);
                        addData(chart_stock_by_value, chart_stock_dataset_appro.labels, chart_stock_dataset_appro.data.by_value);
                    }
                    if (!appro_checked && fab_checked){
                        addData(chart_stock_by_days, chart_stock_dataset_fab.labels, chart_stock_dataset_fab.data.by_day);
                        addData(chart_stock_by_value, chart_stock_dataset_fab.labels, chart_stock_dataset_fab.data.by_value);
                    }
                }
                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 %}