@include('plugins.datatables.default')
@include('plugins.datatables.buttons')
@include('plugins.highcharts.default')
@include('plugins.highcharts.themes.dark-unica')
@include('plugins.moment')
@include('plugins.daterangepicker')

@push("page-js")
    <script>
        const avlBalls = {
            'ball-yellow': '<span class="ball ball-xs ball-yellow" title="" data-original-title="Abaixo da Meta"></span>',
            'ball-green': '<span class="ball ball-xs ball-green" title="" data-original-title="Dentro da Meta"></span>',
            'ball-red': '<span class="ball ball-xs ball-red" title="" data-original-title="Crítico"></span>'
        };

        const cur_dates = {
            end: moment(),
            start: moment()
        };

        const helper_local = {
            toLocaleString(data, type, row, meta) {
                return data ? data.toLocaleString() : '-';
            },
            toLocalePercent(data, type, row, meta) {
                return data ? data.toLocaleString() + ' %' : '-';
            },
            sanitize(data) {
                return data || '-';
            },
            fc_volume: function (data, type, row) {
                if (type != 'display' || data == null) {
                    return data || '-';
                }
                data = parseFloat(data);
                return data.toLocaleString();
            },
            var_vol: function (data, type, row) {
                if (type != 'display' || data == null) {
                    return data || '-';
                }

                data = parseFloat(data);

                let ball = avlBalls[row['ballVariacao']];

                return `${parseFloat(data).toFixed(2).replace('.', ',')} %${ball !== undefined ? ball : ''}`;
            },
        };

        const filters = function (append) {

            let data = {
                _token: "{{ csrf_token() }}"
            };

            if (cur_dates != undefined) {
                data.Str_DateIni = cur_dates.start.format('YYYY-MM-DD');
                data.Str_DateEnd = cur_dates.end.format('YYYY-MM-DD');
            }

            data.Str_OperationID = $("#select_operation option:selected").val();
            data.Str_SegmentID = [];
            $.each($(".segments-item input[name='segment[]']:checked"), function () {
                data.Str_SegmentID.push($(this).val());
            });

            data.Str_CallcenterID = [];
            $.each($("input[name='callcenter[]']:checked"), function () {
                data.Str_CallcenterID.push($(this).val());
            });

            return Object.assign(data, append);

        };

        $('#select_operation').change(function () {
            let tier = '.tier-' + $(this).val();
            $('#Segments .segments-item').hide().find('input').prop('checked', false);
            if ($(this).val()) {
                $('#Segments ' + tier).show().find('input').prop('checked', true);
            } else {
                $('#Segments .segments-item').show().find('input').prop('checked', true);
            }
        });

        const ajax_headcount = {
            xhr: undefined,
            interval: null,
            _rules() {

                const is_range = !cur_dates.start.isSame(cur_dates.end, 'day');

                const has_today = moment().isSame(cur_dates.end, 'day');

                if (calendar._cur_range === 'headcount' && is_range && has_today) {
                    $.Notification.notify('info', 'top right', 'Atenção', 'O dia de hoje não pode ser contemplado no filtro de período. O processamento será executado com as datas selecionadas, porém considerando D-1.', 10000);
                    $('#reportrange').data('daterangepicker').setEndDate(moment().subtract(1, 'days'));
                }

            },
            update() {

                this._rules();

                let _this = this;

                $('#update-tables i').addClass('fa-spin text-warning');

                if (_this.xhr != undefined && _this.xhr.readyState == 1) {
                    _this.xhr.abort();
                }

                if (_this.interval != null) {
                    clearInterval(_this.interval);
                }

                _this.xhr = $.ajax({
                    type: 'POST',
                    data: filters({method: 'headcount'}),
                    success(response) {
                        table_total.build(response.table);
                        chart.build(response.chart);
                        table_chart.build(response.chart);

                        _this.interval = setInterval(() => _this.update(), 5 * 60 * 1000);

                    },
                    complete(response) {
                        if (response.statusText != 'abort') {
                            $('#update-tables i').removeClass('fa-spin text-warning');
                        }
                        helper.stopLoading();
                    },
                    error(response) {
                        _this.interval = setInterval(() => _this.update(), 30 * 1000);
                        if (response.statusText != 'abort') {
                            $('#update-tables i').addClass('text-danger');

                            $.Notification.notify('error', 'top center', 'Atenção', "Falha ao atualizar os itens!");
                        }
                        helper.stopLoading();
                    }
                });
            }
        };

        const ajax_dashboard = {
            xhr: undefined,
            interval: null,
            update() {

                let _this = this;

                $('#update-tables i').addClass('fa-spin text-warning');

                if (_this.xhr != undefined && _this.xhr.readyState == 1) {
                    _this.xhr.abort();
                }

                if (_this.interval != null) {
                    clearInterval(_this.interval);
                }

                _this.xhr = $.ajax({
                    type: 'POST',
                    data: filters({method: 'dashboard'}),
                    success(response) {
                        _this.interval = setInterval(() => _this.update(), 5 * 60 * 1000);
                        dashboard.setData(response);
                    },
                    complete(response) {
                        if (response.statusText != 'abort') {
                            $('#update-tables i').removeClass('fa-spin text-warning');
                        }
                        helper.stopLoading();
                    },
                    error(response) {
                        _this.interval = setInterval(() => _this.update(), 30 * 1000);
                        if (response.statusText != 'abort') {
                            $('#update-tables i').addClass('text-danger');
                            $.Notification.notify('error', 'top center', 'Atenção', "Falha ao atualizar os itens!");
                        }
                        helper.stopLoading();
                    }
                });
            }
        };

        const chart = {
            build(data) {

                let rowIndex;

                const opt = {
                    categories: [],
                    headcount_real: [],
                    forecast_real: [],
                    variation_real: [],
                };

                for (rowIndex in data) {
                    opt.categories.push(data[rowIndex].defaulttime);
                    opt.headcount_real.push(data[rowIndex].hc_1_last);
                    opt.forecast_real.push(data[rowIndex].fc_hc_1_last);
                    opt.variation_real.push(data[rowIndex].var_hc_1_last);
                }

                chart.draw(opt);

            },
            draw(opt) {

                Highcharts.chart('chart', Highcharts.merge({
                    chart: {
                        type: 'spline',
                        spacingTop: 30
                    },
                    title: {
                        text: null,
                    },
                    tooltip: {
                        shared: true
                    },
                    xAxis: {
                        categories: opt.categories,
                        crosshair: true,
                        labels: {
                            formatter() {
                                return this.value.toString().substring(0, 5);
                            }
                        }
                    },
                    plotOptions: {
                        spline: {
                            marker: {
                                enabled: false
                            }
                        }
                    },
                    yAxis: [
                        {
                            gridLineColor: '#707073',
                            labels: {
                                style: {
                                    color: '#98a6ad'
                                }
                            },
                            lineColor: '#707073',
                            minorGridLineColor: '#505053',
                            tickColor: '#707073',
                            tickWidth: 1,
                            title: {
                                text: 'Headcount',
                                style: {
                                    color: '#98a6ad'
                                }
                            }
                        }, {
                            opposite: true,
                            gridLineColor: '#707073',
                            lineColor: '#707073',
                            minorGridLineColor: '#505053',
                            tickColor: '#707073',
                            tickWidth: 1,
                            title: {
                                text: 'Variação',
                                style: {
                                    color: '#98a6ad'
                                }
                            },
                            labels: {
                                format: '{value} %',
                                style: {
                                    color: '#98a6ad'
                                }
                            },
                        }
                    ],
                    series: [
                        {
                            name: 'Real',
                            data: opt.headcount_real
                        }, {
                            name: 'Forecast',
                            data: opt.forecast_real
                        }, {
                            name: 'Variação',
                            yAxis: 1,
                            data: opt.variation_real
                        }
                    ]
                }, Highcharts.themeDarkUnica))
                    .setSize($('#dashboard-chart').closest('div').innerWidth(), null);
            }
        };

        const table_chart = {
            build(rows) {

                if ($.fn.dataTable.isDataTable('#chart-table')) {
                    $('#chart-table').DataTable().destroy();
                }

                $('#chart-table').DataTable({
                    dom: 'Bfrtip',
                    buttons: ['copy', 'excel', {
                        extend: 'pdfHtml5',
                        orientation: 'landscape',
                    }],
                    paging: true,
                    searching: true,
                    info: true,
                    ordering: true,
                    data: rows,
                    columnsDefs: [
                        {targets: [0, 1, 2, 3], class: 'text-center'}
                    ],
                    columns: [
                        {data: 'defaulttime', title: 'Intervalo'},
                        {data: 'hc_1_last', title: 'Real'},
                        {data: 'fc_hc_1_last', title: 'Forecast'},
                        {
                            data: 'var_hc_1_last', title: 'Variação', render: data => data ? data.toLocaleString() + '%' : ''
                        }
                    ],
                    initComplete() {

                        $('[data-toggle="tooltip"]').tooltip({container: '#fullscreen-content-page'});
                    }
                });
            }
        };

        const table_total = {
            setBalls(data, type, row) {

                const exception = ['Variação', 'Variação Produtivo'];

                if (exception.includes(data) || !exception.includes(row['Headcount']) || type !== 'display') {
                    return data;
                }

                let indicador = parseFloat(data);

                if (indicador === -100) {
                    return '-';
                }

                let color = 'danger';
                let label = 'Crítico';

                if (indicador >= -10) {
                    color = 'warning';
                    label = 'Abaixo da Meta';
                }

                if (indicador >= 0) {
                    color = 'success';
                    label = 'Dentro da Meta';
                }

                if (type === 'display') {
                    return `<span data-toggle="tooltip" class="badge  badge-${color}" title="${label}">${indicador.toFixed(1).replace('.', ',')} %</span>`;
                }

                return data;
            },
            build(rows) {

                if ($.fn.dataTable.isDataTable('#headcount-table')) {
                    $('#headcount-table').DataTable().destroy();
                    $('#headcount-table thead').remove();
                    $('#headcount-table tbody').remove();
                }

                const interval = rows.find(row => row.intervaloHC);
                if (interval) {
                    $('#updated_at').text(interval.intervaloHC);
                } else {
                    $('#updated_at').text('~');
                }

                rows.unshift({
                    'segment': 'Headcount',
                    'hc_1_last': 'Real',
                    'fc_hc_1_last': 'Forecast',
                    'var_hc_1_last': 'Variação',
                });

                rows = helper.datatables.rowsToColumns(rows);

                $('#headcount-table').DataTable({
                    dom: 'Bfrtip',
                    buttons: [
                    { extend: 'copy', text: 'Copiar' },
                    { extend: 'excel', text: 'Excel' },
                    {
                        extend: 'pdfHtml5',
                        text: 'PDF',
                        orientation: 'landscape',
                    }],
                    paging: false,
                    searching: true,
                    info: false,
                    ordering: true,
                    columnDefs: [
                        {targets: '_all', defaultContent: '-', render: this.setBalls, className: "bblab"}
                    ],
                    data: [
                        rows.data['hc_1_last'],
                        rows.data['fc_hc_1_last'],
                        rows.data['var_hc_1_last'],
                    ],
                    columns: rows.columns,
                    initComplete() {

                        $('[data-toggle="tooltip"]').tooltip({container: '#fullscreen-content-page'});
                    },
                    footerCallback() {

                        let api = this.api(), total, intVal;

                        intVal = (i) => (i === '-' || i === null ) ? 0 : parseFloat(i.toString().replace(/\./g, '').replace(/\,/g, '.'));

                        api.columns()[0].forEach(function (v) {
                            if (v > 0) {
                                total = api.column(v).data().reduce((a, b, k) => intVal(a) + (k === 2 ? 0 : intVal(b)), 0);
                                if (total === 0) {
                                    api.column(v).visible(false);
                                }
                            }
                        });
                    }
                });
            }
        };

        const dashboard = {
            _data: null,
            _type: {val: "SLA_1", label: "SLA", suffix: " %"},
            _tableBuild() {

                let data = this._data.chart;

                if ($.fn.dataTable.isDataTable('#dashboard-chart-table')) {
                    $('#dashboard-chart-table').DataTable().clear().destroy();
                }

                let values_url = window.location.href;
                let new_url = new URL(values_url);
                let data_url = new_url.searchParams.get('area');

                $('#dashboard-chart-table').DataTable({
                    dom: 'Bfrtip',
                    buttons: ['copy', 'excel', {
                        extend: 'pdfHtml5',
                        orientation: 'landscape',
                    }],
                    paging: true,
                    searching: true,
                    info: true,
                    ordering: true,
                    data: data,
                    columns: _config_dash_table,
                    //columnsDefs: [{targets: '_all', class: 'text-center'}],
                    columnDefs: [{
                        targets: '_all',
                        defaultContent: '-',
                        class: 'text-center',
                        createdCell: function (td, cellData, rowData, row, col) {

                            if (cellData === null || col < 2 || cellData === '-') {
                                return;
                            }

                            if (['ABAND_1', 'TM_1_VAR', 'VAR_1', 'SLA_2', 'Produtividade'].indexOf(rowData.Tipo) !== -1) {
                                return $(td).html(`${cellData.toLocaleString()} %`);
                            }

                            if (rowData.Tipo === 'SLA_1') {
                                if (cellData >= 80) {
                                    color = 'green';
                                    label = 'Dentro da Meta';
                                } else if (cellData >= 70 && cellData < 80) {
                                    color = 'yellow';
                                    label = 'Abaixo da Meta';
                                } else {
                                    color = 'red';
                                    label = 'Crítico';
                                }

                                return $(td).html(`${cellData.toLocaleString()} % <span data-toggle="tooltip" class="ball ball-xs ball-${color}" title="${label}"></span>`);
                            }

                            if (rowData.Tipo === 'TM_1') {

                                let tmc_target_1 = parseFloat(self._data.table.find((el) => {
                                    return el.Tipo === 'TM_1_target_fc' && el.Segmento === rowData.Segmento;
                                })[_config_dash_table[col].data]);

                                if (tmc_target_1 == 1) {
                                    color = 'green';
                                    label = 'Dentro da Meta';
                                } else if (tmc_target_1 == 2) {
                                    color = 'yellow';
                                    label = 'Abaixo da Meta';
                                } else {
                                    color = 'red';
                                    label = 'Crítico';
                                }

                                return $(td).html(`${cellData.toLocaleString()} <span data-toggle="tooltip" class="ball ball-xs ball-${color}" title="${label}"></span>`);
                            }



                            if ($.inArray(rowData.Tipo, ['TME', 'TME_1', 'TME_2']) > -1) {
                                return $(td).text(helper.datatables.seconds_to_time(cellData, 'display'));
                            }

                            if ($.inArray(rowData.Tipo, ['Oferecidas', 'Atendidas', 'Abandonadas', 'TMA']) > -1) {
                                return $(td).text(parseInt(cellData.toString().replace(',', '.')).toLocaleString());
                            }

                            return $(td).text(cellData.toLocaleString());
                        }
                    }],
                    initComplete() {
                        $('[data-toggle="tooltip"]').tooltip({container: '#fullscreen-content-page'});
                    }
                });
            },
            _chartBuild() {
                let data = this._data.chart, type = this._type, categories = [],
                    series = [], aux = [], series_data;

                data.forEach((v) => {
                    if (categories.indexOf(v.defaulttime) === -1) {
                        categories.push(v.defaulttime);
                    }
                    if (aux[v.callcenter] === undefined) {
                        aux[v.callcenter] = [];
                    }

                    aux[v.callcenter][v.defaulttime] = v[type.val];
                });

                for (let eps in aux) {
                    series_data = [];
                    categories.forEach(value => {
                        if (aux[eps][value] === undefined) {
                            series_data.push(0);
                            return;
                        }
                        series_data.push(aux[eps][value]);
                    });
                    series.push({
                        name: eps,
                        data: series_data
                    });
                }

                Highcharts.chart('dashboard-chart', Highcharts.merge({
                    chart: {
                        type: 'spline',
                        spacingTop: 30
                    },
                    title: {text: null},
                    tooltip: {shared: true},
                    xAxis: {
                        categories: categories,
                        crosshair: true,
                        labels: {
                            formatter() {
                                return this.value.toString().substring(0, 5);
                            }
                        }
                    },
                    plotOptions: {spline: {marker: {enabled: false}}},
                    yAxis: {
                        gridLineColor: '#707073',
                        lineColor: '#707073',
                        minorGridLineColor: '#505053',
                        tickColor: '#707073',
                        tickWidth: 1,
                        title: {
                            text: type.label,
                            style: {color: '#98a6ad'}
                        },
                        labels: {
                            format: '{value} ' + (type.suffix ? type.suffix : ''),
                            style: {color: '#98a6ad'}
                        },
                    },
                    series: series
                }, Highcharts.themeDarkUnica))
                    .setSize($('#chart').closest('div').innerWidth(), null);
            },
            _tableTotalBuild() {

                let self = this;

                let columns = self._data.columns.map((v) => {
                    return {data: v, title: v === 'Segmento' ? 'Visão' : v}
                });

                if ($.fn.dataTable.isDataTable('#dashboard-table')) {
                    $('#dashboard-table').DataTable().clear().destroy();
                }

                $('#dashboard-table').DataTable({
                    dom: 'Bfrtip',
                    buttons: [
                        {
                            extend: 'copyHtml5',
                            exportOptions: {
                                columns: ':visible'
                            }
                        },
                        {
                            extend: 'excelHtml5',
                            exportOptions: {
                                columns: ':visible'
                            }
                        },
                        {
                            extend: 'pdfHtml5',
                            orientation: 'landscape',
                            exportOptions: {
                                columns: ':visible'
                            }
                        },
                    ],
                    paging: false,
                    searching: true,
                    info: false,
                    ordering: false,
                    data: self._data.table,
                    columns: columns,
                    columnDefs: [{
                        targets: 0,
                        visible: false
                    }, {
                        targets: '_all',
                        defaultContent: '-',
                        createdCell: function (td, cellData, rowData, row, col) {

                            if (cellData === null || col < 2 || cellData === '-') {
                                return;
                            }

                            if (['ABAND_1', 'TM_1_VAR', 'VAR_1', 'SLA_2', 'Produtividade'].indexOf(rowData.Tipo) !== -1) {
                                return $(td).html(`${cellData.toLocaleString()} %`);
                            }

                            if (rowData.Tipo === 'SLA_1') {
                                if (cellData >= 80) {
                                    color = 'green';
                                    label = 'Dentro da Meta';
                                } else if (cellData >= 70 && cellData < 80) {
                                    color = 'yellow';
                                    label = 'Abaixo da Meta';
                                } else {
                                    color = 'red';
                                    label = 'Crítico';
                                }

                                return $(td).html(`${cellData.toLocaleString()} % <span data-toggle="tooltip" class="ball ball-xs ball-${color}" title="${label}"></span>`);
                            }

                            if (rowData.Tipo === 'TM_1') {

                                let tmc_target_1 = parseFloat(self._data.table.find((el) => {
                                    return el.Tipo === 'TM_1_target_fc' && el.Segmento === rowData.Segmento;
                                })[columns[col].data]);

                                if (tmc_target_1 == 1) {
                                    color = 'green';
                                    label = 'Dentro da Meta';
                                } else if (tmc_target_1 == 2) {
                                    color = 'yellow';
                                    label = 'Abaixo da Meta';
                                } else {
                                    color = 'red';
                                    label = 'Crítico';
                                }

                                return $(td).html(`${cellData.toLocaleString()} <span data-toggle="tooltip" class="ball ball-xs ball-${color}" title="${label}"></span>`);
                            }

                            if ($.inArray(rowData.Tipo, ['TME', 'TME_1', 'TME_2']) > -1) {
                                return $(td).text(helper.datatables.seconds_to_time(cellData, 'display'));
                            }

                            if ($.inArray(rowData.Tipo, ['Oferecidas', 'Atendidas', 'Abandonadas', 'TMA']) > -1) {
                                return $(td).text(parseInt(cellData.toString().replace(',', '.')).toLocaleString());
                            }

                            return $(td).text(cellData.toLocaleString());
                        }
                    }],
                    initComplete() {

                        let grupos, select;

                        grupos = this.api().column(0);

                        grupos.search(`^${self._type.val}$`, true, false).draw();

                        $('#dashboard-table_wrapper .btn-type-filter').remove();
                        $('#dashboard-table_wrapper').prepend(
                            select = $('<select>', {
                                name: 'btn-type-filter',
                                class: 'btn-type-filter form-control bg-warning'
                            })
                            .change(function () {
                                grupos.search('^' + $(this).val().trim() + '$', true, false).draw();
                                $('[data-toggle="tooltip"]').tooltip();
                                self.setVar($(this).val().trim());
                            })
                        );

                        _config_opt_type.forEach(function (i) {
                                select.append($('<option>', {
                                value: i.val,
                                text: i.label,
                                selected: self._type.val === i.val
                            }));
                        });

                    }
                });
            },
            setData(data) {
                this._data = data;
                this._tableTotalBuild();
                this._chartBuild();
                this._tableBuild();
            },
            setVar(type) {
                this._type = _config_opt_type.find(v => v.val === type);
                this._chartBuild();
            }
        };

        $('#apply_segment_filter,#apply_eps_filter').click(function () {

            update_ajax();

            $(".filters-segments, .filters-eps").slideUp('fast');
        });

        const update_ajax = function () {
            if ($('a[href="#headcount"]').hasClass('active')) {
                ajax_headcount.update();
            } else {
                ajax_dashboard.update();
            }

            updateBreadcrumb();
        };

        const updateBreadcrumb = function () {
            $('.area_alias_text').html(`- ${$('#select_operation option:selected').text()}`);
        };

        const calendar = {
            _cur_range: 'headcount',
            _ranges: {
                headcount: {
                    'Hoje': [moment(), moment()],
                    'Ontem': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Últimos 7 dias': [moment().subtract(7, 'days'), moment().subtract(1, 'days')],
                    'Últimos 30 dias': [moment().subtract(30, 'days'), moment().subtract(1, 'days')],
                    'Este mês': [moment().startOf('month'), moment().subtract(1, 'days')],
                    'Último mês': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                },
                dashboard: {
                    'Hoje': [moment(), moment()],
                    'Ontem': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Últimos 7 dias': [moment().subtract(6, 'days'), moment()],
                    'Últimos 30 dias': [moment().subtract(29, 'days'), moment()],
                    'Este mês': [moment().startOf('month'), moment().endOf('month')],
                    'Último mês': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                }
            },
            _options: {
                alwaysShowCalendars: true,
                maxDate: moment(),
                minDate: '01/01/2017',
                showDropdowns: true,
                showWeekNumbers: false,
                opens: 'left',
                drops: 'down',
                buttonClasses: ['btn', 'btn-sm'],
                applyClass: 'btn-bmg-primary',
                cancelClass: 'btn-secondary',
                locale: daterangepicker.locales['pt-br'],
            },
            _render() {

                const ranges = this._ranges[this._cur_range];

                const options = Object.assign(this._options, {ranges: ranges});

                $('#reportrange').daterangepicker(options, function (start, end, label) {
                    cur_dates.start = start;
                    cur_dates.end = end;
                    update_ajax();
                    $('#reportrange span').html(' ' + start.format('DD/MM/YYYY') + ' - ' + end.format('DD/MM/YYYY'));
                });
            },
            setDashboard() {
                this._cur_range = 'dashboard';
                this._render();
            },
            setHeadcount() {
                this._cur_range = 'headcount';
                this._render();
            },
            init() {
                this.setHeadcount();
            }
        };

        $(document).ready(function () {
            updateBreadcrumb();
            calendar.init();

            $("#apply_segment_filter, #apply_callcenter_filter").click(function () {
                if($("input[name='callcenter[]']:checked").length <= 0){
                    return $.Notification.notify('warning', 'top right', 'Atenção', 'Selecione ao menos uma EPS');
                }

                update_ajax();
                $(".shared-filter").slideUp('fast');
            });

            $('a[href="#dashboard"]').click(function () {
                if (ajax_headcount != undefined) {
                    clearInterval(ajax_headcount.interval);
                }

                ajax_dashboard.update();
                calendar.setDashboard();
            });

            $('a[href="#headcount"]').click(function () {
                if (ajax_dashboard != undefined) {
                    clearInterval(ajax_dashboard.interval);
                }

                ajax_headcount.update();
                calendar.setHeadcount();
            });

            $('#select_operation').change();

            ajax_headcount.update();
        });

        function setTranslate(){
            $('#datatables_buttons_info').find('h2').text('Copiado para aréa de transferência');
        }

    </script>
@endpush

@php
    $area = request()->get('area', '');
    $operation = request()->get('operation', '');
@endphp
@includeFirst([
    "operations.operation.scripts.config.{$area}-{$operation}",
    "operations.operation.scripts.config.{$area}-all",
    "operations.operation.scripts.config.default"
])