@props(['chartData', 'chartDataRange'])

@php
    $chart_data;
    $chart_data_range;
    if ($chartData && is_string($chartData)) {
        $chart_data = json_decode(htmlspecialchars_decode($chartData), true);
    }
    if ($chartDataRange && is_string($chartDataRange)) {
        $chart_data_range = json_decode(htmlspecialchars_decode($chartDataRange), true);
    }
@endphp

<div class="nav-wrapper position-relative end-0 magang-mx-4 magang-mt-8 magang-mb-6">
    <ul class="nav nav-pills nav-fill p-1 magang-font-semibold" role="tablist">
        @php
            $chart_tab_counter = 0;
        @endphp
        @foreach($chart_data as $key => $value)
            @php
                if (count($value['data']) <= 1) continue;
            @endphp
            <li class="nav-item">
                <a class="nav-link mb-0 px-0 py-2 {{ ($chart_tab_counter == 0) ? 'active' : '' }}" data-bs-toggle="tab" href="#report-chart" role="tab" aria-controls="{{$key}}" data-label="{{$key}}"  aria-selected="{{ ($chart_tab_counter == 0) ? 'true' : 'false' }}">
                    {{$key}} {{-- <span class="badge" style="background: rgba(2, 130, 132, 0.5);">{{$value['sum']}}</span> --}}
                </a>
            </li>
            @php
                $chart_tab_counter++;
            @endphp
        @endforeach
    </ul>
</div>
<canvas id="report-chart" class="magang-mx-4"></canvas>
<div id="report-chart-footer" class="magang-pb-6"></div>

@push('js')
<script src="./assets/js/plugins/chartjs.min.js"></script>
<script>
    let chartDatas = @json(isset($chart_data) ? $chart_data : false);
    let chartTabs = document.querySelectorAll('a[href="#report-chart"]');
    let canvas = document.getElementById("report-chart");
    let chartFooter = document.getElementById("report-chart-footer");
    let renderedChart;
    chartTabs.forEach(element => {            
        element.addEventListener('click', function() {
            organizeChart(chartDatas[element.dataset.label]);
        });
    });
    let infoChart = document.createElement('div');
    let infoTotal = document.createElement('span');
    let infoRange = document.createElement('span');
    infoChart.className = 'magang-flex magang-justify-between magang-mx-4 magang-text-sm';
    infoChart.appendChild(infoTotal);
    infoChart.appendChild(infoRange);
    infoRange.className = 'magang-text-right';
    infoRange.textContent = @json($chart_data_range['frdate']) + ' hingga ' + @json($chart_data_range['todate']);
    
    canvas.before(infoChart);
    
    function organizeChart(chartData, itemPerChart = 5) {
        const chartDataPropSum = Object.getOwnPropertyNames(chartData.data).length;
        if (chartData && chartDataPropSum > 1) {
            // Hapus pagination jika sebelumnya ada
            document.getElementById("report-chart-pagination")?.remove();
            // if (chartDataPropSum) {
            if (chartDataPropSum > (itemPerChart * 2)) {
                let paginationData = {
                    itemPerPage     : itemPerChart,
                    totalItem       : chartDataPropSum,
                    totalPage       : Math.ceil(chartDataPropSum / itemPerChart),
                    offset          : {start: 0, end: itemPerChart}, // akan digunakan pada slice. arr.slice(awal, sebelum akhir);
                    currentPage     : 1,
                    horizontalBar   : false,
                };
                paginationData.pages = Array.from({ length: paginationData.totalPage}, (_, i) => i + 1);
                // console.log('paginationData', paginationData);
                renderChartWithPagination(chartData, paginationData);

            } else {
                renderChart(chartData);
            }
        }
    }

    function renderChartWithPagination(chartData, paginationData) {
        const chartDataPropSum = Object.getOwnPropertyNames(chartData.data).length;
        // Hapus pagination yang dirender sebelumnya (jika ada)
        document.getElementById("report-chart-pagination")?.remove();

        let chartPagination = document.createElement('div');
        chartPagination.id = "report-chart-pagination";
        chartPagination.className = "magang-flex magang-justify-between magang-items-center magang-mx-4";

        let paginationContainer = document.createElement('span');
        paginationContainer.className = "magang-flex magang-gap-1 magang-justify-center magang-select-none";

        let paginationInfo1 = document.createElement('span');
        paginationInfo1.className = "magang-text-center"


        // Pagination Max Entities Input ==================================== Start        
        let paginationEntityConfig = document.createElement('div');
        let paginationMaxLabel = document.createElement('span');
        paginationMaxLabel.textContent = "Maksimum Entitas\u00A0:\u00A0";
        let paginationMaxInput = document.createElement('input');
        paginationMaxInput.type = "number";
        paginationMaxInput.inputMode = "numeric";
        paginationMaxInput.value = paginationData.itemPerPage;
        paginationMaxInput.min = 2;
        paginationMaxInput.max = (paginationData?.horizontalBar) ? (paginationData.totalItem) : (paginationData.totalItem <= 20 ? paginationData.totalItem : 20);
        paginationMaxInput.className = "magang-border-none";
        paginationMaxInput.style.background = "linear-gradient(rgba(230, 230, 230, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%)";
        paginationMaxInput.style.height = '20px';
        paginationMaxInput.addEventListener('change', function(e) {
            const maxInput = parseInt(paginationMaxInput.max, 10);
            const minInput = parseInt(paginationMaxInput.min, 10);
            const currInput = parseInt(e.target.value, 10);
            // console.log('jajaj', e.target.value, maxInput, (e.target.value <= maxInput));
            paginationData.currentPage = 1;
            if (currInput <= maxInput && currInput >= 2) {
                // console.log('ini dia', currInput, maxInput, (currInput <= maxInput));
                paginationData.itemPerPage = currInput;
                paginationData.totalItem = chartDataPropSum,
                paginationData.totalPage = Math.ceil(chartDataPropSum / currInput);
                paginationData.offset = {start: 0, end: currInput}; // akan digunakan pada slice. arr.slice(awal, sebelum akhir);
                paginationData.pages = Array.from({ length: paginationData.totalPage}, (_, i) => i + 1);
            } else if (currInput > maxInput) {
                // Jika input invalid
                paginationData.itemPerPage = maxInput;
                paginationData.totalItem = chartDataPropSum,
                paginationData.totalPage = Math.ceil(chartDataPropSum / maxInput);
                paginationData.offset = {start: 0, end: maxInput}; // akan digunakan pada slice. arr.slice(awal, sebelum akhir);
                paginationData.pages = Array.from({ length: paginationData.totalPage}, (_, i) => i + 1);
            } else if (currInput < minInput) {
                // Jika input invalid
                paginationData.itemPerPage = minInput;
                paginationData.totalItem = chartDataPropSum,
                paginationData.totalPage = Math.ceil(chartDataPropSum / minInput);
                paginationData.offset = {start: 0, end: minInput}; // akan digunakan pada slice. arr.slice(awal, sebelum akhir);
                paginationData.pages = Array.from({ length: paginationData.totalPage}, (_, i) => i + 1);
            } else {
                // Jika input invalid
                paginationData.itemPerPage = 5;
                paginationData.totalItem = chartDataPropSum,
                paginationData.totalPage = Math.ceil(chartDataPropSum / 5);
                paginationData.offset = {start: 0, end: 5}; // akan digunakan pada slice. arr.slice(awal, sebelum akhir);
                paginationData.pages = Array.from({ length: paginationData.totalPage}, (_, i) => i + 1);
            }
            // Render ulang pagination dan gantikan chart dengan yang baru 
            renderChartWithPagination(chartData, paginationData);
            // firstPageBtn.click();
        });
        // Pagination Max Entities Input ==================================== End

        // Chart Type Switch (Vertical-Horizontal) ========================== Start
        let chartTypeSwitchContainer = document.createElement('div');
        let chartTypeCheckbox = document.createElement('input');
        let chartType1Icon = document.createElement('label');
        let chartType2Icon = document.createElement('label');
        let chartTypeToggle = document.createElement('label');
        let chartTypeToggleBall = document.createElement('span');

        chartTypeSwitchContainer.style.height = "1rem";
        // chartTypeSwitchContainer.className = "magang-relative magang-bg-red-300 magang-flex magang-items-center magang-flex-no-wrap magang-gap-1";        
        chartTypeSwitchContainer.className = "magang-relative magang-flex magang-items-center magang-flex-no-wrap magang-gap-1";        
        chartTypeCheckbox.type = "checkbox";
        chartTypeCheckbox.checked = paginationData?.horizontalBar || false;
        chartTypeCheckbox.className = "magang-absolute magang-opacity-0 magang-top-0 magang-w-0 magang-h-0 magang-pointer-events-none";
        chartType1Icon.className = "magang-m-0";
        chartType2Icon.className = "magang-m-0";
        chartType1Icon.style.color = (!chartTypeCheckbox.checked) ? "rgba(0, 183, 189, 1)" : "rgb(170, 190, 210)"; // Warna Hijau Bar Chart : Warna Abu
        chartType2Icon.style.color = (chartTypeCheckbox.checked) ? "rgba(0, 183, 189, 1)" : "rgb(170, 190, 210)"; // Warna Hijau Bar Chart : Warna Abu
        chartType1Icon.innerHTML = `
            <svg width="1rem" height="1rem" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <!-- Axis -->
                <rect x="0" y="0" width="2" height="22"></rect>
                <rect x="0" y="21" width="24" height="2"></rect>
                
                <!-- Bars (height: 3px, spacing: 4px) -->
                <rect x="4" y="10" width="4" height="12" ry="1"></rect>
                <rect x="10" y="0" width="4" height="23" ry="1"></rect>
                <rect x="16" y="6" width="4" height="16" ry="1"></rect>
            </svg>
        `;
        chartType2Icon.innerHTML = `
            <svg width="1rem" height="1rem" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <!-- Axis -->
                <rect x="0" y="0" width="2" height="22"></rect>
                <rect x="0" y="21" width="24" height="2"></rect>
                
                <!-- Bars (height: 3px, spacing: 4px) -->
                <rect x="0" y="3" width="16" height="4" rx="1"></rect>
                <rect x="0" y="9" width="23" height="4" rx="1"></rect>
                <rect x="0" y="15" width="12" height="4" rx="1"></rect>
            </svg>
        `;
        chartTypeToggle.style.height = "1rem";
        chartTypeToggle.style.width = "2rem";
        chartTypeToggle.className = "magang-m-0 magang-bg-gray-300 magang-rounded-full magang-flex magang-items-center";
        chartTypeToggle.style.display = "flex";
        chartTypeToggle.style.justifyContent = (chartTypeCheckbox.checked) ? "flex-end" : "flex-start";
        // chartTypeToggle.style.transition = "justify-content 0.5s ease"; // tidak bisa, karena komponen ini dirender ulang saat ganti tipe chart
        
        chartTypeToggleBall.style.display = "inline-block";
        chartTypeToggleBall.style.height = "1rem";
        chartTypeToggleBall.style.width = "1rem";
        chartTypeToggleBall.style.background = "rgba(0, 183, 189, 1)";
        chartTypeToggleBall.className = "magang-m-0 magang-rounded-full";

        chartTypeToggle.appendChild(chartTypeToggleBall);

        chartTypeSwitchContainer.appendChild(chartTypeCheckbox);
        chartTypeSwitchContainer.appendChild(chartType1Icon);
        chartTypeSwitchContainer.appendChild(chartTypeToggle);  
        chartTypeSwitchContainer.appendChild(chartType2Icon);

        chartTypeSwitchContainer.addEventListener('click', function() {
            // Toggle (balik) nilai properti checked dari checkbox
            chartTypeCheckbox.checked = !chartTypeCheckbox.checked;
            if (chartTypeCheckbox.checked) {
                // console.log('chartTypeCheckbox.checked true = ', chartTypeCheckbox.checked);
                paginationData.horizontalBar = true;
            } else {
                const maxEntityInputValue = parseInt(paginationMaxInput.value, 10);
                // Jika di-switch ke tipe bar vertikal (tipe default), dan maxEntityInputValue > 20, maka batasi entitas menjadi 20 karena maximum entity untuk bar chart vertikal adalah 20
                if (maxEntityInputValue > 20) {
                    paginationData.itemPerPage = 20;
                    paginationData.totalItem = chartDataPropSum,
                    paginationData.totalPage = Math.ceil(chartDataPropSum / 20);
                    paginationData.offset = {start: 0, end: 20}; // akan digunakan pada slice. arr.slice(awal, sebelum akhir);
                    paginationData.pages = Array.from({ length: paginationData.totalPage}, (_, i) => i + 1);
                }
                // console.log('chartTypeCheckbox.checked false = ', chartTypeCheckbox.checked);
                paginationData.horizontalBar = false;
            }
            // Render ulang chart
            renderChartWithPagination(chartData, paginationData);
        });

        // Chart Type Switch (Vertical-Horizontal) ========================== End
        
        paginationEntityConfig.appendChild(chartTypeSwitchContainer); 
        paginationEntityConfig.appendChild(paginationMaxLabel);
        paginationEntityConfig.appendChild(paginationMaxInput);
        
        // Rendering pagination ============================================= Start
        const limit = 5;
        paginationData.pages.forEach((page, index) => {
            page = Number(page);
            let renderNumber = false;
            let renderDots = false;
            let renderPrevNext = (paginationData.totalPage >= 2) || false;
            
            // ----- Pengondisian untuk render nomor pagination
            if (
                (paginationData.currentPage >= limit && paginationData.currentPage <= (paginationData.totalPage - limit + 1)) &&
                (page >= (paginationData.currentPage - 1) && page <= (paginationData.currentPage + 1))
            ) renderNumber = true; // saat currentpage di tangah-tengah limit atau (indexAkhir-limit+1), maka tampilkan 3 halaman di tengah
            
            else if (paginationData.currentPage <= (limit - 1) && page <= limit) renderNumber = true; // saat currentpage di 1 sampai 4, maka tampilkan halaman 1 sampai limit
            
            else if (paginationData.currentPage >= limit && page == 1) renderNumber = true; // saat currentpage ada di tengah, maka tampilkan halaman pertama saja
            else if (paginationData.currentPage >= limit && page == 2 && paginationData.totalPage == (limit + 2)) renderNumber = true; // // saat currentpage ada di tengah dan jumlah page = (limut+2), maka tampilkan juga halaman kedua

            else if (paginationData.currentPage > (paginationData.totalPage - limit + 1) && page <= paginationData.totalPage && page > (paginationData.totalPage - limit)) renderNumber = true; // saat current page ada setelah (indexAkhir-limit+1) sampai indexAkhir, maka tampilkan halaman (indexAkhir-limit) sampai indexAkhir
            
            else if (paginationData.currentPage <= (paginationData.totalPage - limit + 1) && page == paginationData.totalPage) renderNumber = true; // saat currentpage ada di tengah atau (indexAkhir-limit+1), tampilkan halaman terakhir saja
            else if (paginationData.currentPage <= (paginationData.totalPage - limit + 1) && page == (paginationData.totalPage - 1) && paginationData.totalPage == (limit + 2)) renderNumber = true; // saat currentpage ada di tengah atau (indexAkhir-limit+1), tampilkan juga halaman kedua dari akhir


            // ----- Pengondisian untuk render dots (...) di pagination
            if (paginationData.totalPage > (limit + 2) && paginationData.currentPage > (paginationData.totalPage - limit + 1) && page == (paginationData.totalPage - limit)) renderDots = true; // saat current page ada setelah (indexAkhir-limit+1) sampai indexAkhir, maka tampilkan dots tepat sebelumnya dan sebelum nomor pertama
            
            else if (paginationData.totalPage > (limit + 2) && paginationData.currentPage <= (limit - 1) && page == (limit + 1)) renderDots = true; // saat currentpage di 1 - 4, maka tampilkan dots tepat setelah limit dan sebelum nomor terakhir            
            
            else if (paginationData.totalPage > (limit + 2) && paginationData.currentPage >= limit && paginationData.currentPage <= (paginationData.totalPage - limit + 1) && (page == (limit - 2) || page == (paginationData.totalPage - limit + 2))) renderDots = true; // saat currentpage di tangah-tengah limit atau (indexAkhir-limit+1), maka tampilkan dots tepat sebelum maupun setelahnya
            

            // ----- Rendering isi pagination sesungguhnya

            // Tombol Prev
            if (renderPrevNext && (page == 1)) {
                let nextPrev = document.createElement('span');
                nextPrev.textContent = "Previous";
                nextPrev.className = "magang-box-border magang-px-4 magang-py-2 magang-cursor-pointer";
                nextPrev.style.border = "1px solid transparent";
                nextPrev.style.borderRadius = "2px";      
                
                if ((paginationData.currentPage > 1)) {
                    nextPrev.classList.add('magang-cursor-pointer');
                    nextPrev.classList.add('magang-select-none');

                    nextPrev.addEventListener('mouseenter', () => {
                        nextPrev.style.border = "1px solid rgba(0, 0, 0, 0.3)";
                        nextPrev.style.color = "#ffffff";
                        nextPrev.style.background = "linear-gradient(to bottom, rgb(88, 88, 88) 0%, rgb(17, 17, 17) 100%)";
                    });                
                    nextPrev.addEventListener('mouseleave', () => {
                        nextPrev.style.border = "1px solid transparent";
                        nextPrev.style.color = "inherit";
                        nextPrev.style.background = "";
                    });
                    
                    nextPrev.addEventListener('click', function() {
                        let nextPage = paginationData.currentPage - 1;
    
                        paginationData.currentPage = nextPage;
        
                        if (nextPage == paginationData.totalPage && ((paginationData.totalItem % paginationData.itemPerPage) > 0)) {
                            // Untuk halaman terakhir jika "total item" tidak habis dibagi "jumlah item per page"
                            paginationData.offset.end = paginationData.totalItem; // indeks item terakhir = jumlah item
                            paginationData.offset.start = paginationData.totalItem - (paginationData.totalItem % paginationData.itemPerPage); // indeks item pertama
                        } else {
                            // Untuk semua halaman
                            paginationData.offset.end = (paginationData.itemPerPage * nextPage);
                            paginationData.offset.start = (paginationData.itemPerPage * nextPage) - paginationData.itemPerPage;
                        }
        
                        // console.log('offset', page, paginationData.offset);
        
                        // Render ulang pagination dan gantikan chart dengan yang baru 
                        renderChartWithPagination(chartData, paginationData);
                    });
                } 
                else {
                    nextPrev.classList.remove('magang-cursor-pointer');
                    nextPrev.classList.remove('magang-select-none');
                }

                paginationContainer.appendChild(nextPrev);
            }

            // Nomor Pagination
            if (renderNumber) {
                let btn = document.createElement('span');
                btn.textContent = page;
                btn.dataset.page = page;
                btn.className = "magang-box-border magang-px-4 magang-py-2 magang-cursor-pointer";
                btn.style.border = "1px solid transparent";
                btn.style.borderRadius = "2px";
                if (paginationData.currentPage == btn.dataset.page) {
                    btn.style.border = "1px solid rgba(0, 0, 0, 0.3)";
                    btn.style.background = "linear-gradient(to bottom, rgba(230, 230, 230, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%)";
                } else {
                    btn.addEventListener('mouseenter', () => {
                        btn.style.border = "1px solid rgba(0, 0, 0, 0.3)";
                        btn.style.color = "#ffffff";
                        btn.style.background = "linear-gradient(to bottom, rgb(88, 88, 88) 0%, rgb(17, 17, 17) 100%)";
                    });                
                    btn.addEventListener('mouseleave', () => {
                        btn.style.border = "1px solid transparent";
                        btn.style.color = "inherit";
                        btn.style.background = "";
                    });
                }
                btn.addEventListener('click', function() {
                    paginationData.currentPage = page;
    
                    if (page == paginationData.totalPage && ((paginationData.totalItem % paginationData.itemPerPage) > 0)) {
                        // Untuk halaman terakhir jika "total item" tidak habis dibagi "jumlah item per page"
                        paginationData.offset.end = paginationData.totalItem; // indeks item terakhir = jumlah item
                        paginationData.offset.start = paginationData.totalItem - (paginationData.totalItem % paginationData.itemPerPage); // indeks item pertama
                    } else {
                        // Untuk semua halaman
                        paginationData.offset.end = (paginationData.itemPerPage * btn.dataset.page);
                        paginationData.offset.start = (paginationData.itemPerPage * btn.dataset.page) - paginationData.itemPerPage;
                    }
    
                    console.log('offset', page, paginationData.offset, paginationData);
    
                    // Render ulang pagination dan gantikan chart dengan yang baru 
                    renderChartWithPagination(chartData, paginationData);
                });
    
                paginationContainer.appendChild(btn);
            }            

            // Dots (...)
            if (renderDots) {
                let dots = document.createElement('span');
                dots.textContent = "...";
                dots.className = "magang-px-4 magang-py-2 magang-pointer-events-none";
                paginationContainer.appendChild(dots);
            }

            // Tombol Next
            if (renderPrevNext && (page == paginationData.totalPage)) {
                let nextBtn = document.createElement('span');
                nextBtn.textContent = "Next";
                nextBtn.className = "magang-box-border magang-px-4 magang-py-2 magang-cursor-pointer";
                nextBtn.style.border = "1px solid transparent";
                nextBtn.style.borderRadius = "2px";      
                
                if ((paginationData.currentPage < paginationData.totalPage)) {
                    nextBtn.classList.add('magang-cursor-pointer');
                    nextBtn.classList.add('magang-select-none');

                    nextBtn.addEventListener('mouseenter', () => {
                        nextBtn.style.border = "1px solid rgba(0, 0, 0, 0.3)";
                        nextBtn.style.color = "#ffffff";
                        nextBtn.style.background = "linear-gradient(to bottom, rgb(88, 88, 88) 0%, rgb(17, 17, 17) 100%)";
                    });                
                    nextBtn.addEventListener('mouseleave', () => {
                        nextBtn.style.border = "1px solid transparent";
                        nextBtn.style.color = "inherit";
                        nextBtn.style.background = "";
                    });
                    
                    nextBtn.addEventListener('click', function() {
                        let nextPage = paginationData.currentPage + 1;
    
                        paginationData.currentPage = nextPage;
        
                        if (nextPage == paginationData.totalPage && ((paginationData.totalItem % paginationData.itemPerPage) > 0)) {
                            // Untuk halaman terakhir jika "total item" tidak habis dibagi "jumlah item per page"
                            paginationData.offset.end = paginationData.totalItem; // indeks item terakhir = jumlah item
                            paginationData.offset.start = paginationData.totalItem - (paginationData.totalItem % paginationData.itemPerPage); // indeks item pertama
                        } else {
                            // Untuk semua halaman
                            paginationData.offset.end = (paginationData.itemPerPage * nextPage);
                            paginationData.offset.start = (paginationData.itemPerPage * nextPage) - paginationData.itemPerPage;
                        }
        
                        // console.log('offset', page, paginationData.offset);
        
                        // Render ulang pagination dan gantikan chart dengan yang baru 
                        renderChartWithPagination(chartData, paginationData);
                    });
                } 
                else {
                    nextBtn.classList.remove('magang-cursor-pointer');
                    nextBtn.classList.remove('magang-select-none');
                }

                paginationContainer.appendChild(nextBtn);
            }
        });
        // Rendering pagination ============================================= End

        paginationInfo1.textContent = "Entitas " + (paginationData.offset.start + 1) + " - " + paginationData.offset.end + " dari " + paginationData.totalItem;;
        
        renderChart(chartData, paginationData);

        chartPagination.appendChild(paginationEntityConfig);
        chartPagination.appendChild(paginationInfo1);
        chartPagination.appendChild(paginationContainer);
        chartFooter.appendChild(chartPagination);
    }

    // untuk mengukur tinggi canvas penyaji chart ketika bertipe horizontal bar chart
    const calculateCanvasHeight = (itemPerPage) => {
        console.log("parseInt(itemPerPage)", parseInt(itemPerPage));
        const minWidthPerBar = 20;
        const padding = 10; // Gap antar bar
        return parseInt(itemPerPage) * (minWidthPerBar + padding) + 100; // 100 ini tumbahan untuk legend dan sumbu x
    };
    
    function renderChart(chartData, paginationData = null) {
        // console.log('chartData', chartData);
        // let renderData = chartData; // ternyata mereferensi (jebakan javascript)
        let renderData = structuredClone(chartData); // menyalin nilai saja dengan moderen dan aman
        if (paginationData) {            
            const renderDataArr = Object.entries(renderData.data);
            const tempArr = renderDataArr.slice(paginationData.offset.start, paginationData.offset.end);
            renderData.data = Object.fromEntries(tempArr);
        }

        if (renderedChart) {
            renderedChart.destroy(); // Hancurkan chart sebelumnya jika ada
        }

        let dataLabels = Object.keys(renderData.data);
        let dataValues = Object.values(renderData.data);
        let ctx1 = canvas.getContext("2d");
        
        renderedChart = new Chart(ctx1, {
            type: "bar",
            data: {
                labels: dataLabels,
                datasets: [{
                    label: renderData.label,
                    // borderColor: "rgb(2, 130, 132)",
                    backgroundColor: 'rgba(0, 183, 189, 0.4)',
                    borderWidth: 0,
                    fill: true,
                    data: dataValues,
                    ...((paginationData?.horizontalBar) ? {maxBarThickness: 200, barThickness: 20} : {})
                }],
            },
            options: {
                indexAxis: (paginationData?.horizontalBar) ? 'y' : 'x',
                responsive: true,
                maintainAspectRatio: (paginationData?.horizontalBar) ? false : true,
                plugins: {
                    legend: {
                        display: true,
                    },
                },
                interaction: {
                    intersect: true,
                    mode: 'index',
                },
                scales: {
                    y: {
                        grid: { display: (paginationData?.horizontalBar) ? false : true },
                        ticks: {
                            display: true,
                            color: '#67748e',
                            font: {
                                size: 14,
                                family: "Open Sans",
                                // style: 'bold',
                            },
                        }
                    },
                    x: {
                        grid: { display: (paginationData?.horizontalBar) ? true : false },
                        ticks: {
                            display: true,
                            color: '#67748e',
                            padding: 20,
                            font: {
                                size: 14,
                                family: "Open Sans",
                                // style: 'bold',
                                lineHeight: 1
                            },
                        }
                    },
                },
            },
        });

        infoTotal.innerHTML  = 'Frekuensi Total: ' + renderData.frec_sum + ' \u00A0\u00A0\u00A0\u00A0\u00A0\u00A0 Jumlah Entitas: ' + renderData.item_sum;
        
        // Jika tipe bar chart adalah horizontal bar
        if (paginationData?.horizontalBar) {
            const canvasHeight = calculateCanvasHeight(paginationData.itemPerPage);
            canvas.style.maxHeight = `${canvasHeight}px`;
            console.log("canvas.style.height", canvas.style.height);
        } else {
            // Jika tipe vertical bar chart
            canvas.style.maxHeight = null;
        }
    }

    // Render chart di awal
    if (chartDatas) {
        organizeChart(chartDatas[chartTabs[0].dataset.label]);
    }

</script>
@endpush