const MAP_ENDPOINT = "https://rmsmap.rmto.ir/141map/{z}/{x}/{y}.png";
var GRAB_ALL_DATA_API = "https://rms.rmto.ir/reports_summary";
const get_rahdari_projects_by_id = "https://rms.rmto.ir/rahdari_projects/project/";
let TAB_ID = 1
let isAnimating = false
var delayed;

let markers = []
var markersLayer = null

let projectsMap;
const bounds = [
    [42.9130026312, 75.6166317076],
    [20.5782370061, 35.5092252948],
];
const showbounds = [32.4279, 53.688];
const mapZoom = getWidth() < 508 ? 4 : 5;

let contract_subitem_projects;
let user_activity;
let gasht_rozane;
let top_provinces_according_to_number_of_complaints_handled;
let road_item;
let number_of_complaints_per_type;
let mehvar_statistics;
let safety_and_privacy;

function createColors(count) {
    var point = 200 / (count - 1);
    var step = 0;
    var colors = [];
    for (let i = 0; i < count; i++) {
        var hsv = {
            h: Math.floor(step),
            s: 80,
            v: 70,
        };
        colors[i] = Color(hsv).toCSS();
        step += point;
    }
    return colors;
}

function makeIcon(iconSize, layer) {
    return L.divIcon({
        className: "custom-div-icon",
        html: "<span style='width: " + iconSize + "px;height: " + iconSize + "px;' class='" + layer._icon.childNodes[0].classList.value + "'></span>",
        iconSize: [0, 0],
    });
}

var greenIcon = L.divIcon({
    className: "custom-div-icon",
    html: "<span class='beacon beacon-green'></span>",
    iconSize: [16, 16],
});
var redIcon = L.divIcon({
    className: "custom-div-icon",
    html: "<span class='beacon beacon-red'></span>",
    iconSize: [16, 16],
});

var orangeIcon = L.divIcon({
    className: "custom-div-icon",
    html: "<span class='beacon beacon-orange'></span>",
    iconSize: [16, 16],
});

var fakeIcon = L.divIcon({
    className: "custom-div-icon",
    html: "<span class='beacon beacon-orange'></span>",
    iconSize: [6, 6],
});


var brownIcon = L.divIcon({
    className: "custom-div-icon",
    html: "<span class='beacon beacon-brown'></span>",
    iconSize: [16, 16],
});

var yellowIcon = L.divIcon({
    className: "custom-div-icon",
    html: "<span class='beacon beacon-yellow'></span>",
    iconSize: [16, 16],
});
var blueIcon = L.divIcon({
    className: "custom-div-icon",
    html: "<span class='beacon beacon-blue'></span>",
    iconSize: [16, 16],
});
var stepOneIcon = L.divIcon({
    className: "custom-div-icon",
    html: "<span class='beacon beacon-step-one'></span>",
    iconSize: [16, 16],
});
var stepTwoIcon = L.divIcon({
    className: "custom-div-icon",
    html: "<span class='beacon beacon-step-two'></span>",
    iconSize: [16, 16],
});
var stepThreeIcon = L.divIcon({
    className: "custom-div-icon",
    html: "<span class='beacon beacon-step-three'></span>",
    iconSize: [16, 16],
});

function getWidth() {
    return Math.max(
        document.body.scrollWidth,
        document.documentElement.scrollWidth,
        document.body.offsetWidth,
        document.documentElement.offsetWidth,
        document.documentElement.clientWidth
    );
};

const animateTabs = (old_tab, tab_id) => {
    isAnimating = true
    $(`.tab-box[data-tab-id='${old_tab}']`).fadeOut(100, () => {
        $(`.tab-box[data-tab-id='${tab_id}']`).fadeIn(300, () => {
            document.querySelector(`.tab-btn[data-tab-id='${tab_id}']`).scrollIntoView({
                behavior: 'smooth'
            });
            isAnimating = false
        })
    })
}

const gashtRozaneComponent = (data) =>
    `<div class="content-row-colored-box rounded d-flex justify-content-between p-2 my-1">
        <span>${data.province_fa}</span>
        <span>${parseInt(data.distance).toLocaleString()}</span>
    </div>`;

(() => {
    $('[data-toggle="popover"]').popover({
        trigger: 'focus'
    })
    
    Chart.defaults.font.family = "IRANSansFaNum";

    projectsMap = L.map("projects_map", {
        maxBounds: bounds,
        minZoom: 5,
        maxZoom: 16,
        attributionControl: false
    }).setView(showbounds, 5);
    L.tileLayer(MAP_ENDPOINT, {}).addTo(projectsMap);

    $("#data_now").text(moment().locale('fa').format('dddd DD MMMM YYYY'))

    $('.tab-btn').removeClass('active')
    $(`.tab-btn[data-tab-id='${TAB_ID}']`).addClass('active')

    $(`.tab-box[data-tab-id='${TAB_ID}']`).show()

    $.ajax({
        url: GRAB_ALL_DATA_API,
        type: "GET",
        cache: false,
        async: false,
        contentType: false,
        processData: false,
        success: function (result) {
            data = result.data;
            contract_subitem_projects = data.find(({ report_name }) => report_name === 'contract_subitem_projects');
            user_activity = data.find(({ report_name }) => report_name === 'user_activity');
            road_item = data.find(({ report_name }) => report_name === 'road_item');
            mehvar_statistics = data.find(({ report_name }) => report_name === 'mehvar_statistics');
            safety_and_privacy = data.find(({ report_name }) => report_name === 'safety_and_privacy');
            number_of_complaints_per_type = data.find(({ report_name }) => report_name === 'number_of_complaints_per_type');
            gasht_rozane = data.find(({ report_name }) => report_name === 'gasht_rozane');
            top_provinces_according_to_number_of_complaints_handled = data.find(({ report_name }) => report_name === 'top_provinces_according_to_number_of_complaints_handled');
            receipt = data.find(({ report_name }) => report_name === 'receipt');
        },
        error: function () {
            Swal.fire({
                icon: "error",
                title: "خطا",
                text: "مشکل در دریافت اطلاعات",
                confirmButtonText: "بروزرسانی صفحه",
                showLoaderOnConfirm: true,
                preConfirm: () => {
                    location.reload(true);
                },
            });
        },
    });
    // end grab data


    for (const point of contract_subitem_projects.data.points) {
        let icon;

        switch (point.project_type_id) {
            case 1:
                icon = blueIcon;
                break;
            case 2:
                icon = yellowIcon;
                break;
            case 3:
                icon = greenIcon;
                break;
            case 4:
                icon = redIcon;
                break;
            case 5:
                icon = brownIcon;
                break;
            case 6:
                icon = orangeIcon;
                break;
        }
        let marker = new L.Marker([point.start_lat, point.start_lng], {
            id: point,
            icon: icon
        }).on('click', () => {
            window.open(get_rahdari_projects_by_id + point.id)
        })

        markers.push(marker);
    }
    markersLayer = new L.LayerGroup(markers);
    projectsMap.addLayer(markersLayer);
    projectsMap.on('zoomend', function () {
        if (markersLayer === null) {
            return 0;
        }
        let iconSize;
        switch (projectsMap.getZoom()) {
            case 5:
            case 6:
            case 7:
                iconSize = 3;
                break;
            case 8:
                iconSize = 4;
                break;
            case 9:
                iconSize = 5;
                break;
            case 10:
                iconSize = 6;
                break;
            case 11:
                iconSize = 7;
                break;
            case 12:
                iconSize = 7;
                break;
            case 13:
                iconSize = 9;
                break;
            case 14:
            case 15:
            case 16:
            case 17:
            case 18:
                iconSize = 10;
                break;
        }

        markersLayer.eachLayer(function (layer) {
            return layer.setIcon(makeIcon(iconSize, layer));
        });
    });


    $(document).find('#user_activity_avarage').text(parseInt(user_activity.data[0].user_activity_avarage))
    $(document).find('#user_count').text(parseInt(user_activity.data[0].user_count))

    // gasht rozane
    $(document).find('#gasht_rozane_box').empty()
    gasht_rozane.data.map(item => {
        const content = gashtRozaneComponent(item)
        $(document).find('#gasht_rozane_box').append(content)
    })
    // end gasht rozane


    // top_provinces_according_to_number_of_complaints_handled
    const top_provinces_according_to_number_of_complaints_handled_Label = [];
    const top_provinces_according_to_number_of_complaints_handled_Count = [];
    for (let i = 0; i < top_provinces_according_to_number_of_complaints_handled.data.length; i++) {
        top_provinces_according_to_number_of_complaints_handled_Count.push(top_provinces_according_to_number_of_complaints_handled.data[i].count_number);
        top_provinces_according_to_number_of_complaints_handled_Label.push(top_provinces_according_to_number_of_complaints_handled.data[i].ProvinceName);
    }
    const top_provinces_according_to_number_of_complaints_handled_ChartData = {
        labels: top_provinces_according_to_number_of_complaints_handled_Label,
        datasets: [{
            data: top_provinces_according_to_number_of_complaints_handled_Count,
            backgroundColor: [
                '#f3722c'
            ],
            borderColor: '#f3722c',
            borderWidth: 3,
        }]
    };
    const top_provinces_according_to_number_of_complaints_handled_option = {
        responsive: true,
        maintainAspectRatio: false,
        layout: {
            padding: 15
        },
        plugins: {
            title: {
                display: false,
            },
            legend: {
                display: false
            }
        },
    }

    const top_provinces_according_to_number_of_complaints_handled_chart = new Chart(
        document.getElementById("top_provinces_according_to_number_of_complaints_handled").getContext("2d"),
        {
            type: 'line',
            data: top_provinces_according_to_number_of_complaints_handled_ChartData,
            options: top_provinces_according_to_number_of_complaints_handled_option,
        }
    );
    // end top_provinces_according_to_number_of_complaints_handled

    // status_sperate
    const status_sperate_Label = [];
    const status_sperate_Count = [];
    for (let i = 0; i < contract_subitem_projects.data.status_sperate.data.length; i++) {
        status_sperate_Count.push(contract_subitem_projects.data.status_sperate.data[i]);
        status_sperate_Label.push(contract_subitem_projects.data.status_sperate.label[i]);
    }
    const status_sperate_ChartData = {
        labels: status_sperate_Label,
        datasets: [{
            data: status_sperate_Count,
            backgroundColor: [
                '#f3722c',
                '#f8961e',
                '#577590',
                '#43aa8b'
            ],
        }]
    };
    const status_sperate_option = {
        responsive: true,
        maintainAspectRatio: false,
        layout: {
            padding: 15
        },
        animation: {
            onComplete: () => {
                delayed = true;
            },
            delay: (context) => {
                let delay = 0;
                if (context.type === 'data' && context.mode === 'default' && !delayed) {
                    delay = context.dataIndex * 300 + context.datasetIndex * 100;
                }
                return delay;
            },
        },
        plugins: {
            title: {
                display: true,
                position: 'top',
                text: "پروژه ها به تفکیک وضعیت",
                font: {
                    family: "IRANSansFaNum",
                    size: 14,
                    weight: 'bold'
                }
            },
            legend: {
                display: true,
                position: "left",
                rtl: true,
                labels: {
                    boxWidth: 13,
                    fontSize: 16,
                    fontStyle: "bold",
                    fontColor: "#000",
                },
            },
        },
    }

    const status_sperate_chart = new Chart(
        document.getElementById("project_status_sperate").getContext("2d"),
        {
            type: 'doughnut',
            data: status_sperate_ChartData,
            options: status_sperate_option,
        }
    );
    // end status_sperate

    // type_sperate
    const type_sperate_Label = [];
    const type_sperate_Count = [];
    for (let i = 0; i < contract_subitem_projects.data.type_sperate.data.length; i++) {
        type_sperate_Count.push(contract_subitem_projects.data.type_sperate.data[i]);
        type_sperate_Label.push(contract_subitem_projects.data.type_sperate.label[i]);
    }
    const type_sperate_ChartData = {
        labels: type_sperate_Label,
        datasets: [{
            data: type_sperate_Count,
            backgroundColor: [
                '#277da1',
                '#43aa8b',
                '#577590',
                '#f8961e',
                '#f3722c',
                "#dd2c2c"
            ],
        }]
    };
    const type_sperate_option = {
        responsive: true,
        maintainAspectRatio: false,
        layout: {
            padding: 15
        },
        animation: {
            onComplete: () => {
                delayed = true;
            },
            delay: (context) => {
                let delay = 0;
                if (context.type === 'data' && context.mode === 'default' && !delayed) {
                    delay = context.dataIndex * 300 + context.datasetIndex * 100;
                }
                return delay;
            },
        },
        plugins: {
            title: {
                display: true,
                position: 'top',
                text: "پروژه ها به تفکیک ماهیت",
                font: {
                    family: "IRANSansFaNum",
                    size: 14,
                    weight: 'bold'
                }
            },
            legend: {
                display: true,
                position: "left",
                rtl: true,
                labels: {
                    boxWidth: 13,
                    fontSize: 16,
                    fontStyle: "bold",
                    fontColor: "#000",
                },
            },
        },
    }

    const type_sperate_chart = new Chart(
        document.getElementById("project_type_sperate").getContext("2d"),
        {
            type: 'pie',
            data: type_sperate_ChartData,
            options: type_sperate_option,
        }
    );
    // end type_sperate

    // road_item
    const road_item_ChartData = {
        labels: road_item.data.labels,
        datasets: [{
            data: road_item.data.datasets[0].data,
            backgroundColor: createColors(road_item.data.datasets[0].data.length).reverse(),
            borderRadius: 4
        }]
    };
    const road_item_option = {
        responsive: true,
        maintainAspectRatio: false,
        layout: {
            padding: 15
        },
        plugins: {
            title: {
                display: false,
            },
            legend: {
                display: false
            }
        },
    }

    const road_item_chart = new Chart(
        document.getElementById("road_item").getContext("2d"),
        {
            type: 'bar',
            data: road_item_ChartData,
            options: road_item_option,
        }
    );
    // end road_item

    // number_of_complaints_per_type
    const number_of_complaints_per_type_Label = [];
    const number_of_complaints_per_type_Count_processed = [];
    const number_of_complaints_per_type_Count_reached = [];
    for (let i = 0; i < number_of_complaints_per_type.data.labels.length; i++) {
        number_of_complaints_per_type_Count_processed.push(number_of_complaints_per_type.data.datasets[0].data[i]);
        number_of_complaints_per_type_Count_reached.push(number_of_complaints_per_type.data.datasets[1].data[i]);
        if (screen.width < 1000 && screen.width >= 490) {
            number_of_complaints_per_type_Label.push(number_of_complaints_per_type.data.labels[i].substring(0, 14) + "...");
        } else if (screen.width < 490) {
            number_of_complaints_per_type_Label.push("");
        }
        else {
            number_of_complaints_per_type_Label.push(number_of_complaints_per_type.data.labels[i]);
        }
    }
    const number_of_complaints_per_type_ChartData = {
        labels: number_of_complaints_per_type_Label,
        datasets: [
            {
                label: number_of_complaints_per_type.data.datasets[0].label,
                backgroundColor: "#277da1",
                data: number_of_complaints_per_type_Count_processed
            },
            {
                label: number_of_complaints_per_type.data.datasets[1].label,
                backgroundColor: "#f3722c",
                data: number_of_complaints_per_type_Count_reached
            }
        ]
    };
    const number_of_complaints_per_type_option = {
        responsive: true,
        maintainAspectRatio: true,
        layout: {
            padding: 15
        },
        animation: {
            onComplete: () => {
                delayed = true;
            },
            delay: (context) => {
                let delay = 0;
                if (context.type === 'data' && context.mode === 'default' && !delayed) {
                    delay = context.dataIndex * 300 + context.datasetIndex * 100;
                }
                return delay;
            },
        },
        plugins: {
            title: {
                display: false,
            },
            legend: {
                display: false
            }
        },
    }

    const number_of_complaints_per_type_chart = new Chart(
        document.getElementById("number_of_complaints_per_type").getContext("2d"),
        {
            type: 'bar',
            data: number_of_complaints_per_type_ChartData,
            options: number_of_complaints_per_type_option,
        }
    );
    // end number_of_complaints_per_type

    // mehvar_statistics_pie length & cnt
    const mehvar_statistics_pie_Label_length = [];
    const mehvar_statistics_pie_Count_length = [];
    const mehvar_statistics_pie_Count_cnt = [];
    for (let i = 0; i < mehvar_statistics.data.charts.pies.length; i++) {
        mehvar_statistics_pie_Count_length.push(mehvar_statistics.data.charts.pies[i].lenght);
        mehvar_statistics_pie_Count_cnt.push(mehvar_statistics.data.charts.pies[i].cnt);
        mehvar_statistics_pie_Label_length.push(mehvar_statistics.data.charts.pies[i].blockage_cause_fa);
    }
    const mehvar_statistics_pie_ChartData_length = {
        labels: mehvar_statistics_pie_Label_length,
        datasets: [{
            data: mehvar_statistics_pie_Count_length,
            backgroundColor: [
                '#277da1',
                '#43aa8b',
                '#577590',
                '#f8961e',
                '#f3722c'
            ],
        }]
    };
    const mehvar_statistics_pie_ChartData_cnt = {
        labels: mehvar_statistics_pie_Label_length,
        datasets: [{
            data: mehvar_statistics_pie_Count_cnt,
            backgroundColor: [
                '#277da1',
                '#43aa8b',
                '#577590',
                '#f8961e',
                '#f3722c'
            ],
        }]
    };
    const mehvar_statistics_pie_option_length = {
        responsive: true,
        maintainAspectRatio: false,
        layout: {
            padding: 15
        },
        animation: {
            onComplete: () => {
                delayed = true;
            },
            delay: (context) => {
                let delay = 0;
                if (context.type === 'data' && context.mode === 'default' && !delayed) {
                    delay = context.dataIndex * 300 + context.datasetIndex * 100;
                }
                return delay;
            },
        },
        plugins: {
            title: {
                display: true,
                position: 'top',
                text: "طول محور های آسیب دیده",
                font: {
                    family: "IRANSansFaNum",
                    size: 14,
                    weight: 'bold'
                }
            },
            legend: {
                display: true,
                position: "left",
                rtl: true,
                labels: {
                    boxWidth: 13,
                    fontSize: 16,
                    fontStyle: "bold",
                    fontColor: "#000",
                },
            },
        },
    }
    const mehvar_statistics_pie_option_cnt = {
        responsive: true,
        maintainAspectRatio: false,
        layout: {
            padding: 15
        },
        animation: {
            onComplete: () => {
                delayed = true;
            },
            delay: (context) => {
                let delay = 0;
                if (context.type === 'data' && context.mode === 'default' && !delayed) {
                    delay = context.dataIndex * 300 + context.datasetIndex * 100;
                }
                return delay;
            },
        },
        plugins: {
            title: {
                display: true,
                position: 'top',
                text: "تعداد محور های آسیب دیده",
                font: {
                    family: "IRANSansFaNum",
                    size: 14,
                    weight: 'bold'
                }
            },
            legend: {
                display: true,
                position: "left",
                rtl: true,
                labels: {
                    boxWidth: 13,
                    fontSize: 16,
                    fontStyle: "bold",
                    fontColor: "#000",
                },
            },
        },
    }
    const mehvar_statistics_pie_chart_length = new Chart(
        document.getElementById("mehvar_statistics_pie_length").getContext("2d"),
        {
            type: 'doughnut',
            data: mehvar_statistics_pie_ChartData_length,
            options: mehvar_statistics_pie_option_length,
        }
    );
    const mehvar_statistics_pie_chart_cnt = new Chart(
        document.getElementById("mehvar_statistics_pie_cnt").getContext("2d"),
        {
            type: 'pie',
            data: mehvar_statistics_pie_ChartData_cnt,
            options: mehvar_statistics_pie_option_cnt,
        }
    );
    // end mehvar_statistics_pie length & cnt

    // road geometry acc contribution
    const mehvar_statistics_stack_data = mehvar_statistics.data.charts.stack;
    const mylabels = []
    const mydatasets = []

    const colors = [
        '#277da1',
        '#43aa8b',
        '#577590',
        '#f8961e',
        '#f3722c'
    ]
    let cntarr = {}
    let lengtharr = {}

    for (const [index, mevar_stack] of mehvar_statistics_stack_data.entries()) {

        for (const item of mevar_stack.data) {
            if (cntarr[item.blockage_cause_fa] == undefined) cntarr[item.blockage_cause_fa] = []
            cntarr[item.blockage_cause_fa][index] = item.cnt

            if (lengtharr[item.blockage_cause_fa] == undefined) lengtharr[item.blockage_cause_fa] = []
            lengtharr[item.blockage_cause_fa][index] = item.length
        }

        mylabels.push(mevar_stack.axis_type_fa)
    }

    let indexColor = 0
    for (const [key, item] of Object.entries(cntarr)) {
        mydatasets.push(
            {
                label: key,
                data: item,
                stack: 0,
                backgroundColor: colors[indexColor]
            }
        )
        indexColor++
    }

    indexColor = 0
    for (const [key, item] of Object.entries(lengtharr)) {
        mydatasets.push(
            {
                label: key,
                data: item,
                stack: 1,
                backgroundColor: colors[indexColor]
            }
        )
        indexColor++
    }

    const mehvar_statistics_stack_ChartData = {
        labels: mylabels,
        datasets: mydatasets,
    };
    const mehvar_statistics_stack_option = {
        responsive: true,
        maintainAspectRatio: true,
        layout: {
            padding: 15
        },
        animation: {
            onComplete: () => {
                delayed = true;
            },
            delay: (context) => {
                let delay = 0;
                if (context.type === 'data' && context.mode === 'default' && !delayed) {
                    delay = context.dataIndex * 300 + context.datasetIndex * 100;
                }
                return delay;
            },
        },
        plugins: {
            title: {
                display: true,
                position: 'top',
                text: "اطلاعات محور های آسیب دیده (طول/تعداد)",
                font: {
                    family: "IRANSansFaNum",
                    size: 14,
                    weight: 'bold'
                }
            },
            legend: {
                display: false
            }
        },
        scales: {
            x: {
                stacked: true,
            },
            y: {
                stacked: true
            }
        },
    }
    const mehvar_statistics_stack_Chart = new Chart(
        document.getElementById("mehvar_statistics_stack").getContext("2d"),
        {
            type: 'bar',
            data: mehvar_statistics_stack_ChartData,
            options: mehvar_statistics_stack_option,
        }
    );
    // end road geometry acc contribution

    // safety and privacy
    const safety_and_privacy_ChartData = {
        labels: safety_and_privacy.data.label,
        datasets: [
            {
                label: 'شناسایی',
                data: safety_and_privacy.data.data[0],
                backgroundColor: '#277da1',
                borderRadius: 8
            },
            {
                label: 'اقدام',
                data: safety_and_privacy.data.data[1],
                backgroundColor: '#43aa8b',
                borderRadius: 8
            },
            {
                label: 'برخورد',
                data: safety_and_privacy.data.data[2],
                backgroundColor: '#f8961e',
                borderRadius: 8
            },
        ],
    };
    const safety_and_privacy_option = {
        indexAxis: 'y',
        responsive: true,
        maintainAspectRatio: true,
        layout: {
            padding: 15
        },
        plugins: {
            title: {
                display: true,
                position: 'top',
                text: "تعداد اقدامات",
                font: {
                    family: "IRANSansFaNum",
                    size: 14,
                    weight: 'bold'
                }
            },
            legend: {
                legend: {
                    display: true,
                    position: "top",
                    rtl: true,
                    labels: {
                        boxWidth: 13,
                        fontSize: 16,
                        fontStyle: "bold",
                        fontColor: "#000",
                    },
                },
            }
        },
        scales: {
            x: {
                stacked: true,
            },
            y: {
                stacked: true
            }
        },
    }
    const safety_and_privacy_Chart = new Chart(
        document.getElementById("safety_and_privacy").getContext("2d"),
        {
            type: 'bar',
            data: safety_and_privacy_ChartData,
            options: safety_and_privacy_option,
        }
    );
    // end safety and privacy

    // receipt
    const receipt_Label = [];
    const receipt_Count = [];
    for (let i = 0; i < receipt.data.chart.length; i++) {
        receipt_Count.push(receipt.data.chart[i].sum);
        receipt_Label.push(receipt.data.chart[i].province_fa);
    }
    const receipt_ChartData = {
        labels: receipt_Label,
        datasets: [{
            data: receipt_Count,
            backgroundColor: createColors(receipt_Count.length).reverse(),
            borderRadius: 4
        }]
    };
    const receipt_option = {
        responsive: true,
        maintainAspectRatio: false,
        layout: {
            padding: 15
        },
        plugins: {
            title: {
                display: false,
            },
            legend: {
                display: false
            }
        },
    }

    const receipt_chart = new Chart(
        document.getElementById("receipt").getContext("2d"),
        {
            type: 'bar',
            data: receipt_ChartData,
            options: receipt_option,
        }
    );
    
    $(document).find('#total_damage').text(parseFloat(receipt.data.sum.sum).toLocaleString("en") + ' ریال')

    // document.getElementById("total_damage").getContext()
    
    // end receipt
})()

$(document).on('click', '.tab-btn', function () {
    if (isAnimating) return

    const old_tab = TAB_ID
    TAB_ID = $(this).data('tabId')

    if (old_tab == TAB_ID) return

    $('.tab-btn').removeClass('active')
    $(`.tab-btn[data-tab-id='${TAB_ID}']`).addClass('active')

    animateTabs(old_tab, TAB_ID)
})