@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid print-area">
        <div class="row">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-header pb-3 p-3">
                        <div class="d-flex justify-content-between align-items-start">

                            <!-- KIRI -->
                            <div>
                                <h6 class="mb-1">MSJ Produksi</h6>
                                <p class="text-sm mb-0">Monitoring of Yield and OEE Metrics</p>

                            </div>

                            <!-- KANAN (2 BARIS) -->
                            <div class="d-flex flex-column align-items-end">

                                <!-- Baris Kanan 1: Last update -->
                                <p class="mb-1" style="font-size: 16px; font-weight: 500;">
                                    Last system update: <span id="systemUpdate">{{ $lastUpdate }}</span>
                                </p>

                                <p id="lastUpdateText" class="mb-2" style="font-size: 20px; font-weight: 600;">
                                    Data: <span id="dataDate">{{ $lastUpdate }}</span> |
                                    Shift <span id="dataShift">{{ $shift }}</span> |
                                    <span id="groupWrapper">
                                        | Group <span id="dataGroup">{{ $group_name }}</span>
                                    </span>
                                </p>


                                <!-- Baris Kanan 2: Line + Date + Shift -->
                                <div class="d-flex align-items-center">

                                    <!-- Line -->
                                    <div class="d-flex align-items-center me-3">
                                        <label class="me-2 text-sm mb-0" for="filterRange">Line:</label>
                                        <select id="filterRange" class="form-select form-select-sm" style="width: 130px;">
                                            @foreach ($listMesin as $item)
                                                <option value="{{ $item->mesin_utama }}">{{ $item->line }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <!-- Date -->
                                    <div class="d-flex align-items-center me-3">
                                        <label class="me-2 text-sm mb-0" for="filterDate">Start Date:</label>
                                        <input type="date" id="filterDate" class="form-control form-control-sm"
                                            style="width: 130px;" value="{{ $tglUpdate }}" max="{{ $tglUpdate }}">
                                    </div>
                                    <div class="d-flex align-items-center me-3">
                                        <label class="me-2 text-sm mb-0" for="filterDate2">End Date:</label>
                                        <input type="date" id="filterDate2" class="form-control form-control-sm"
                                            style="width: 130px;" value="{{ $tglUpdate }}" max="{{ $tglUpdate }}">
                                    </div>

                                    <!-- Shift -->
                                    <div class="d-flex align-items-center">
                                        <label class="me-2 text-sm mb-0" for="filterShift">Shift:</label>
                                        <select id="filterShift" class="form-select form-select-sm" style="width: 120px;">
                                            <option value="%" {{ $shift == '%' ? 'selected' : '' }}>All</option>
                                            <option value="1" {{ $shift == 1 ? 'selected' : '' }}>Shift 1</option>
                                            <option value="2" {{ $shift == 2 ? 'selected' : '' }}>Shift 2</option>
                                            <option value="3" {{ $shift == 3 ? 'selected' : '' }}>Shift 3</option>
                                        </select>
                                    </div>

                                    <div class="d-flex align-items-center">
                                        <button class="buttons-html5 btn ms-3 mb-0 btn-primary" tabindex="0"
                                            aria-controls="list_rsyslg" type="button" id="btnSearch"
                                            onclick="filterAjax()"><span><i class="fas fa-search me-1 text-sm"
                                                    aria-hidden="true">
                                                </i><span class="font-weight-bold"></span></span></button>
                                        <button class="buttons-pdf buttons-html5 btn ms-3 mb-0 btn-outline-success"
                                            tabindex="0" aria-controls="list_rsyslg" type="button"
                                            id="btnPrint"><span><i class="fas fa-print me-1 text-sm text-success"
                                                    aria-hidden="true">
                                                </i><span class="font-weight-bold"></span></span></button>
                                    </div>
                                </div>
                            </div>

                        </div>

                    </div>
                </div>

            </div>
            <div class="col-12">
                <div class="row">

                    <body style="background:#f3f3f3;">
                        <div class="container">
                            <div class="row g-3 justify-content-center">
                                <!-- CARD 1 -->
                                <div class="col-md-2">
                                    <div class="d-flex position-relative align-items-center p-3 rounded"
                                        style="background:white; height:90px; box-shadow:0 2px 6px rgba(0,0,0,0.15); border-radius:12px;">

                                        <!-- TEXT -->
                                        <div style="display:flex; flex-direction:column; flex-grow:1;">
                                            <span style="font-size:20px; font-weight:600; letter-spacing:1px;">
                                                OEE
                                            </span>

                                            @php
                                                $oee = $kpi->oee ?? 0;
                                                $targetOee = $target->OEE ?? 0;
                                            @endphp

                                            <span id="oee-value"
                                                style="font-size:20px; font-weight:800;
                                                    color:
                                                        {{ $oee < $targetOee ? 'red' : ($oee > $targetOee ? '#2dce89' : 'black') }};
                                                    ">
                                                {{ $oee }}%

                                                @if ($oee < $targetOee)
                                                    <i class="far fa-arrow-alt-circle-down"></i>
                                                @elseif ($oee > $targetOee)
                                                    <i class="far fa-arrow-alt-circle-up"></i>
                                                @endif
                                            </span>

                                            <span style="font-size:15px; font-weight:600;" id="target-oee">
                                                Target : {{ $targetOee }}%
                                            </span>
                                        </div>

                                        <!-- CIRCLE ICON -->
                                        <div
                                            style="width:45px; height:45px; border-radius:50%; background:#0d7f88; display:flex; justify-content:center; align-items:center; margin-left:12px;">
                                            <i class="fas fa-tachometer-alt"
                                                style="font-size:18px; color:white; opacity:0.9;"></i>
                                        </div>
                                    </div>
                                </div>

                                <!-- CARD 2 -->
                                <div class="col-md-2">
                                    <div class="d-flex position-relative align-items-center p-3 rounded"
                                        style="background:white; height:90px; box-shadow:0 2px 6px rgba(0,0,0,0.15); border-radius:12px;">

                                        <!-- TEXT -->
                                        <div style="display:flex; flex-direction:column; flex-grow:1;">
                                            <span style="font-size:20px; font-weight:600; letter-spacing:1px;">
                                                AVAILABILITY
                                            </span>

                                            @php
                                                $availability = $kpi->availability ?? 0;
                                                $targetAvailability = $target->AVAILABILITY ?? 0;
                                            @endphp

                                            <span id="availability-value"
                                                style="font-size:20px; font-weight:800;
                                                color: {{ $availability < $targetAvailability ? 'red' : ($availability > $targetAvailability ? '#2dce89' : 'black') }};">

                                                {{ number_format($availability, 2) }}%

                                                @if ($availability < $targetAvailability)
                                                    <i class="far fa-arrow-alt-circle-down"></i>
                                                @elseif ($availability > $targetAvailability)
                                                    <i class="far fa-arrow-alt-circle-up"></i>
                                                @endif
                                            </span>

                                            <span style="font-size:15px; font-weight:600;" id="target-availability">
                                                Target : {{ $targetAvailability }}%
                                            </span>
                                        </div>


                                        <!-- CIRCLE ICON -->
                                        <div
                                            style="width:45px; height:45px; border-radius:50%; background:#0d7f88; display:flex; justify-content:center; align-items:center; margin-left:12px;">
                                            <i class="fas fa-clock" style="font-size:18px; color:white; opacity:0.9;"></i>
                                        </div>
                                    </div>
                                </div>

                                <!-- CARD 3 -->
                                <div class="col-md-2">
                                    <div class="d-flex position-relative align-items-center p-3 rounded"
                                        style="background:white; height:90px; box-shadow:0 2px 6px rgba(0,0,0,0.15); border-radius:12px;">

                                        <!-- TEXT -->
                                        <div style="display:flex; flex-direction:column; flex-grow:1;">
                                            <span style="font-size:20px; font-weight:600; letter-spacing:1px;">
                                                PERFORMANCE
                                            </span>

                                            @php
                                                $performance = $kpi->performance ?? 0;
                                                $targetPerformance = $target->PERFORMANCE ?? 0;
                                            @endphp

                                            <span id="performance-value"
                                                style="font-size:20px; font-weight:800;
                                                color: {{ $performance < $targetPerformance ? 'red' : ($performance > $targetPerformance ? '#2dce89' : 'black') }};">

                                                {{ number_format($performance, 2) }}%

                                                @if ($performance < $targetPerformance)
                                                    <i class="far fa-arrow-alt-circle-down"></i>
                                                @elseif ($performance > $targetPerformance)
                                                    <i class="far fa-arrow-alt-circle-up"></i>
                                                @endif
                                            </span>

                                            <span style="font-size:15px; font-weight:600;" id="target-performance">
                                                Target : {{ $targetPerformance }}%
                                            </span>
                                        </div>


                                        <!-- CIRCLE ICON -->
                                        <div
                                            style="width:45px; height:45px; border-radius:50%; background:#0d7f88; display:flex; justify-content:center; align-items:center; margin-left:12px;">
                                            <i class="fas fa-bolt" style="font-size:18px; color:white; opacity:0.9;"></i>
                                        </div>

                                    </div>

                                </div>

                                <!-- CARD 4 -->
                                <div class="col-md-2">
                                    <div class="d-flex position-relative align-items-center p-3 rounded"
                                        style="background:white; height:90px; box-shadow:0 2px 6px rgba(0,0,0,0.15); border-radius:12px;">

                                        <!-- TEXT -->
                                        <div style="display:flex; flex-direction:column; flex-grow:1;">
                                            <span style="font-size:20px; font-weight:600; letter-spacing:1px;">
                                                QUALITY
                                            </span>

                                            @php
                                                $quality = $kpi->quality ?? 0;
                                                $targetQuality = $target->QUALITY ?? 0;
                                            @endphp

                                            <span id="quality-value"
                                                style="font-size:20px; font-weight:800;
                                                color: {{ $quality < $targetQuality ? 'red' : ($quality > $targetQuality ? '#2dce89' : 'black') }};">

                                                {{ number_format($quality, 2) }}%

                                                @if ($quality < $targetQuality)
                                                    <i class="far fa-arrow-alt-circle-down"></i>
                                                @elseif ($quality > $targetQuality)
                                                    <i class="far fa-arrow-alt-circle-up"></i>
                                                @endif
                                            </span>

                                            <span style="font-size:15px; font-weight:600;" id="target-quality">
                                                Target : {{ $targetQuality }}%
                                            </span>
                                        </div>


                                        <!-- CIRCLE ICON -->
                                        <div
                                            style="width:45px; height:45px; border-radius:50%; background:#0d7f88; display:flex; justify-content:center; align-items:center; margin-left:12px;">
                                            <i class="fas fa-check-circle"
                                                style="font-size:18px; color:white; opacity:0.9;"></i>
                                        </div>

                                    </div>

                                </div>
                                <!-- CARD 5 -->
                                <div class="col-md-2">
                                    <div class="d-flex position-relative align-items-center p-3 rounded"
                                        style="background:white; height:90px; box-shadow:0 2px 6px rgba(0,0,0,0.15); border-radius:12px;">

                                        <!-- TEXT -->
                                        <div style="display:flex; flex-direction:column; flex-grow:1;">
                                            <span style="font-size:20px; font-weight:600; letter-spacing:1px;">
                                                YIELD
                                            </span>

                                            @php
                                                $yield = $kpi->yield ?? 0;
                                                $targetYield = $target->YIELD ?? 0;
                                            @endphp

                                            <span id="yield-value"
                                                style="font-size:20px; font-weight:800;
                                                color: {{ $yield < $targetYield ? 'red' : ($yield > $targetYield ? '#2dce89' : 'black') }};">

                                                {{ number_format($yield, 2) }}%

                                                @if ($yield < $targetYield)
                                                    <i class="far fa-arrow-alt-circle-down"></i>
                                                @elseif ($yield > $targetYield)
                                                    <i class="far fa-arrow-alt-circle-up"></i>
                                                @endif
                                            </span>

                                            <span style="font-size:15px; font-weight:600;" id="target-yield">
                                                Target : {{ $targetYield }}%
                                            </span>
                                        </div>


                                        <!-- CIRCLE ICON -->
                                        <div
                                            style="width:45px; height:45px; border-radius:50%; background:#0d7f88; display:flex; justify-content:center; align-items:center; margin-left:12px;">
                                            <i class="fas fa-chart-pie"
                                                style="font-size:18px; color:white; opacity:0.9;"></i>
                                        </div>

                                    </div>

                                </div>

                                <!-- CARD 6 -->
                                <div class="col-md-2">
                                    <div class="d-flex position-relative align-items-center p-3 rounded"
                                        style="background:white; height:90px; box-shadow:0 2px 6px rgba(0,0,0,0.15); border-radius:12px;">

                                        <!-- TEXT -->
                                        <div style="display:flex; flex-direction:column; flex-grow:1;">
                                            <span style="font-size:20px; font-weight:600; letter-spacing:1px;">
                                                COEXT
                                            </span>

                                            @php
                                                $coext = $kpi->percent_coext ?? 0;
                                                $targetCoext = $target->COTTLZR ?? 0;
                                            @endphp

                                            <span id="coext-value"
                                                style="font-size:20px; font-weight:800;
                                                color: {{ $coext < $targetCoext ? 'red' : ($coext > $targetCoext ? '#2dce89' : 'black') }};">

                                                {{ number_format($coext, 2) }}%

                                                @if ($coext < $targetCoext)
                                                    <i class="far fa-arrow-alt-circle-down"></i>
                                                @elseif ($coext > $targetCoext)
                                                    <i class="far fa-arrow-alt-circle-up"></i>
                                                @endif
                                            </span>

                                            <span style="font-size:15px; font-weight:600;" id="target-coext">
                                                Target : {{ $targetCoext }}%
                                            </span>
                                        </div>


                                        <!-- CIRCLE ICON -->
                                        <div
                                            style="width:45px; height:45px; border-radius:50%; background:#0d7f88; display:flex; justify-content:center; align-items:center; margin-left:12px;">
                                            <i class="fas fa-recycle"
                                                style="font-size:18px; color:white; opacity:0.9;"></i>
                                        </div>

                                    </div>

                                </div>

                            </div>
                        </div>

                    </body>
                </div>
            </div>
            <p></p>

            <div class="col-12 mt-3">
                <div class="row">
                    <div class="col-8">
                        <div class="p-3 rounded"
                            style="background:white; box-shadow:0 2px 6px rgba(0,0,0,0.15); border-radius:12px;">
                            <div class="d-flex justify-content-between align-items-center">
                                <h5 class="mb-0">Downtime</h5>
                            </div>
                            <hr class="mt-1 mb-2">
                            <!-- Canvas harus bisa berkembang sesuai container -->
                            <div style="height: 300px;">
                                <canvas id="grafik2"></canvas>
                            </div>
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="p-3 rounded"
                            style="background:white; box-shadow:0 2px 6px rgba(0,0,0,0.15); border-radius:12px;">
                            <h5>Capacity</h5>
                            <hr class="mt-1 mb-2">
                            <!-- Canvas harus bisa berkembang sesuai container -->
                            <div style="height: 300px;">
                                <canvas id="grafik1"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <p></p>
            <div class="col-12">
                <div class="row">
                    <div class="col-4">
                        <div class="d-flex flex-column p-3 rounded shadow-sm"
                            style="background: white; border-radius: 12px; height: 400px;">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <h6 class="mb-2">Label Roll Hasil Jadi</h6>
                                <h6 class="mb-2" id="total-jumbo">Total Jumbo Rewind: {{ $totalJumbo }} KG</h6>
                            </div>
                            <hr class="mt-0 mb-2">
                            <div class="flex-grow-1 d-flex">
                                <canvas id="grafik5" style="width: 100%; height: 100%;"></canvas>
                            </div>
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="d-flex flex-column p-3 rounded shadow-sm"
                            style="background: white; border-radius: 12px; height: 400px;">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <h6 class="mb-2">Waste 1/2 Jadi & Waste Jadi</h6>
                                <h6 class="mb-2" id="total-waste">Total Waste: {{ $totalWaste }} KG</h6>
                            </div>
                            <hr class="mt-0 mb-2">
                            <div class="flex-grow-1 d-flex">
                                <canvas id="grafik3" style="width: 100%; height: 100%;"></canvas>
                            </div>
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="d-flex flex-column p-3 rounded shadow-sm"
                            style="background: white; border-radius: 12px; height: 400px;">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <h6 class="mb-2">Waste Recycle</h6>
                                <h6 class="mb-2" id="total-waste-recycle">Total Waste: {{ $totalWasteOut }} KG</h6>
                            </div>
                            <hr class="mt-0 mb-2">
                            <div class="flex-grow-1 d-flex">
                                <canvas id="grafik4" style="width: 100%; height: 100%;"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        // Fungsi sederhana membuat line chart
        const labelKps = @json($labelKps);
        const dataKps = @json($dataKps);
        let chartGrafik1 = null;

        function grafik1(canvasId, labels, data) {
            const ctx = document.getElementById(canvasId).getContext('2d');

            // Jika chart sudah ada, hancurkan dulu
            if (chartGrafik1) {
                chartGrafik1.destroy();
            }

            chartGrafik1 = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'Capacity',
                        data: data,
                        backgroundColor: 'rgba(75, 192, 192, 0.7)',
                        borderColor: 'rgba(75, 192, 192, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        x: {
                            title: {
                                display: true,
                                text: 'Shift & Date'
                            }
                        },
                        y: {
                            beginAtZero: true,
                            title: {
                                display: true,
                                text: 'Kg / hour'
                            }
                        }
                    }
                }
            });

            return chartGrafik1;
        }

        // Contoh pemakaian
        grafik1('grafik1', labelKps, dataKps);

        //grafik2
        const labelsDt = @json($labelsDt);
        const dataDowntime = @json($dataDowntime);
        const maxDt = @json($maxDt);
        let horizontalChart = null;

        function createHorizontalBarChart(canvasId, labels, dataTraffic) {
            const ctx = document.getElementById(canvasId).getContext('2d');

            // Jika chart sudah ada → hapus dulu
            if (horizontalChart) {
                horizontalChart.destroy();
            }

            horizontalChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'Downtime',
                        data: dataTraffic,
                        backgroundColor: 'rgba(197, 65, 30, 1)',
                        borderRadius: 5,
                        barPercentage: 0.6,
                        categoryPercentage: 0.6,
                    }]
                },
                options: {
                    indexAxis: 'y',
                    scales: {
                        x: {
                            min: 0,
                            max: 8,
                            ticks: {
                                stepSize: 1
                            },
                            title: {
                                display: true,
                                text: 'Hour',
                                font: {
                                    size: 14,
                                    weight: 'bold'
                                },
                                color: '#333'
                            }
                        },
                        y: {
                            title: {
                                display: true,
                                text: 'MAT Type Downtime',
                                font: {
                                    size: 14,
                                    weight: 'bold'
                                },
                                color: '#333'
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            position: 'top'
                        }
                    },
                    responsive: true,
                    maintainAspectRatio: false
                }
            });

            return horizontalChart;
        }

        // Panggil fungsi ini dengan data yang diinginkan:
        createHorizontalBarChart(
            'grafik2',
            labelsDt,
            dataDowntime,
        );


        function createPieChart(canvasId, labels, data, colors) {
            const ctx = document.getElementById(canvasId).getContext('2d');

            // Jika chart sudah ada → hancurkan dulu
            if (pieChart) {
                pieChart.destroy();
            }

            pieChart = new Chart(ctx, {
                type: 'pie',
                data: {
                    labels: labels,
                    datasets: [{
                        data: data,
                        backgroundColor: colors,
                        borderColor: '#fff',
                        borderWidth: 1,
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top'
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    let label = context.label || '';
                                    let value = context.raw;
                                    let total = context.dataset.data.reduce((a, b) => a + b, 0);
                                    let percentage = ((value / total) * 100).toFixed(1);
                                    return `${label}: ${percentage}%`;
                                }
                            }
                        }
                    }
                },
                plugins: [{
                    id: 'customDataLabels',
                    afterDraw(chart) {
                        const {
                            ctx
                        } = chart;
                        const dataset = chart.data.datasets[0];
                        const total = dataset.data.reduce((a, b) => a + b, 0);
                        const meta = chart.getDatasetMeta(0);

                        ctx.save();
                        ctx.font = 'bold 14px Arial';
                        ctx.fillStyle = '#fff';
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'middle';

                        meta.data.forEach((arc, index) => {
                            const center = arc.getCenterPoint();
                            const value = dataset.data[index];
                            const percent = ((value / total) * 100).toFixed(1) + '%';
                            ctx.fillText(`${percent}`, center.x, center.y);
                        });

                        ctx.restore();
                    }
                }]
            });

            return pieChart;
        }


        // Data
        const pWasteSfg = @json($pWasteSfg);
        const pTrim = @json($pTrim);
        const pTambahan = @json($pTambahan);
        const pSisa = @json($pSisa);
        const pGrader = @json($pGrader);
        const labels = @json($labelWasteJd);
        const trafficData = [pWasteSfg, pTrim, pTambahan, pSisa, pGrader];
        let trafficColors = ['#AC1754', '#E53888', '#F37199', '#F7A8C4', '#5A0E24'];
        let pieChart = null;

        // Panggil fungsi
        createPieChart('grafik3', labels, trafficData, trafficColors);

        function grafikpiedua(canvasId, labels2, data, colors) {
            const ctx = document.getElementById(canvasId).getContext('2d');

            if (pieChartDua) pieChartDua.destroy();

            pieChartDua = new Chart(ctx, {
                type: 'pie',
                data: {
                    labels: labels2,
                    datasets: [{
                        data: data,
                        backgroundColor: colors,
                        borderColor: '#fff',
                        borderWidth: 1,
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top'
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    let label = context.label || '';
                                    let value = context.raw;
                                    let total = context.dataset.data.reduce((a, b) => a + b, 0);
                                    let percentage = ((value / total) * 100).toFixed(1);
                                    return `${label}: ${percentage}%`;
                                }
                            }
                        }
                    }
                },
                plugins: [{
                    id: 'customDataLabels',
                    afterDraw(chart) {
                        const dataset = chart.data?.datasets?.[0];
                        if (!dataset || !Array.isArray(dataset.data) || dataset.data.length === 0) return;

                        const meta = chart.getDatasetMeta(0);
                        if (!meta || !Array.isArray(meta.data) || meta.data.length === 0) return;

                        const total = dataset.data.reduce((a, b) => a + b, 0);
                        if (total <= 0) return;

                        const ctx = chart.ctx;
                        ctx.save();
                        ctx.font = 'bold 14px Arial';
                        ctx.fillStyle = '#fff';
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'middle';

                        meta.data.forEach((arc, i) => {
                            const center = arc.getCenterPoint();
                            const value = dataset.data[i];
                            const percent = ((value / total) * 100).toFixed(1) + '%';
                            ctx.fillText(percent, center.x, center.y);
                        });

                        ctx.restore();
                    }
                }]
            });

            return pieChartDua;
        }


        // Data
        let pieChartDua = null;
        const labelsWaste = @json($labelsWaste);
        const valWaste = @json($valWaste);
        const labels2 = labelsWaste;
        const trafficData2 = valWaste;
        let trafficColors2 = ['#6E8CFB', '#636CCB', '#50589C',
            '#3C467B'
        ];

        // Panggil fungsi
        grafikpiedua('grafik4', labels2, trafficData2, trafficColors2);


        function grafigrafikpietiga(canvasId, labels3, data, colors) {
            const ctx = document.getElementById(canvasId).getContext('2d');

            if (pieChartTiga) pieChartTiga.destroy();

            pieChartTiga = new Chart(ctx, {
                type: 'pie',
                data: {
                    labels: labels3,
                    datasets: [{
                        data: data,
                        backgroundColor: colors,
                        borderColor: '#fff',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top'
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    const label = context.label || '';
                                    const value = context.raw;
                                    const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                    const percentage = ((value / total) * 100).toFixed(1);
                                    return `${label}: ${percentage}%`;
                                }
                            }
                        }
                    }
                },
                plugins: [{
                    id: 'customDataLabels',
                    afterDraw(chart) {
                        const dataset = chart.data?.datasets?.[0];
                        if (!dataset || !Array.isArray(dataset.data) || dataset.data.length === 0) return;

                        const meta = chart.getDatasetMeta(0);
                        if (!meta || !Array.isArray(meta.data) || meta.data.length === 0) return;

                        const total = dataset.data.reduce((a, b) => a + b, 0);
                        if (total <= 0) return;

                        const ctx = chart.ctx;
                        ctx.save();
                        ctx.font = 'bold 14px Arial';
                        ctx.fillStyle = '#fff';
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'middle';

                        meta.data.forEach((arc, i) => {
                            const center = arc.getCenterPoint();
                            const value = dataset.data[i];
                            const percent = ((value / total) * 100).toFixed(1) + '%';
                            ctx.fillText(percent, center.x, center.y);
                        });

                        ctx.restore();
                    }
                }]
            });

            return pieChartTiga;
        }


        // Data
        const labels3 = @json($labelsRoll);
        const trafficData3 = @json($valRoll);
        let trafficColors3 = ['#778873', '#A1BC98', '#D2DCB6', '#F1F3E0'];
        let pieChartTiga = null;

        // Panggil fungsi
        grafigrafikpietiga('grafik5', labels3, trafficData3, trafficColors3);
    </script>

    <script>
        const filterLine = document.getElementById('filterRange');
        const filterDate = document.getElementById('filterDate');
        const filterDate2 = document.getElementById('filterDate2');
        const filterShift = document.getElementById('filterShift');

        function filterAjax() {
            let line = filterLine.value;
            let date = filterDate.value;
            let date2 = filterDate2.value;
            let shift = filterShift.value;

            Swal.fire({
                title: 'Mohon tunggu...',
                html: 'Sedang memproses data', // opsional
                allowOutsideClick: false,
                didOpen: () => {
                    Swal.showLoading(); // tampilkan spinner loading
                }
            });

            $.ajax({
                url: "{{ URL::to('/') }}/filterData", // route AJAX
                method: "POST",
                data: {
                    _token: $('meta[name="csrf-token"]').attr('content'),
                    line: line,
                    date: date,
                    date2: date2,
                    shift: shift
                },
                success: function(response) {
                    // hasil dikembalikan dari controller → taruh ke container
                    console.log(response);
                    if (response.kpi == null) {
                        Swal.close();
                        return;
                    }

                    if (response.shift === '%') {
                        document.getElementById('dataShift').innerText = 'All';
                        document.getElementById('groupWrapper').style.display = 'none';
                    } else {
                        document.getElementById('dataShift').innerText = response.shift;
                        document.getElementById('groupWrapper').style.display = 'inline';
                        document.getElementById('dataGroup').innerText = response.group_name;
                    }

                    $('#systemUpdate').text(response.lastUpdate);
                    $('#dataDate').text(response.tglUpdate + ' - ' + response.tglUpdate2);
                    // Update bagian kotak-kotak OEE dll
                    $('#target-oee').text('TARGET : ' + parseFloat(response.target.OEE).toFixed(2) + '%');
                    $('#target-availability').text('TARGET : ' + parseFloat(response.target.AVAILABILITY)
                        .toFixed(2) + '%');
                    $('#target-performance').text('TARGET : ' + parseFloat(response.target.PERFORMANCE).toFixed(
                        2) + '%');
                    $('#target-quality').text('TARGET : ' + parseFloat(response.target.QUALITY).toFixed(2) +
                        '%');
                    $('#target-yield').text('TARGET : ' + parseFloat(response.target.YIELD).toFixed(2) + '%');
                    $('#target-coext').text('TARGET : ' + parseFloat(response.target.COTTLZR).toFixed(2) + '%');
                    updateKpi('#oee-value', response.oee, response.target.OEE);
                    updateKpi('#availability-value', response.availability, response.target.AVAILABILITY);
                    updateKpi('#performance-value', response.performance, response.target.PERFORMANCE);
                    updateKpi('#quality-value', response.quality, response.target.QUALITY);
                    updateKpi('#yield-value', response.yield, response.target.YIELD);
                    updateKpi('#coext-value', response.percent_coext, response.target.COTTLZR);

                    horizontalChart.data.labels = response.labelsDt;
                    horizontalChart.data.datasets[0].data = response.dataDowntime;
                    horizontalChart.options.scales.x.max = response.maxDt;
                    horizontalChart.update();

                    chartGrafik1.data.labels = response.labelKps;
                    chartGrafik1.data.datasets[0].data = response.dataKps;
                    chartGrafik1.update();

                    const dataPie = [
                        response.pWasteSfg,
                        response.pTrim,
                        response.pTambahan,
                        response.pSisa,
                        response.pGrader
                    ];

                    pieChart.data.labels = response.labelWasteJd;
                    pieChart.data.datasets[0].data = dataPie;
                    pieChart.data.datasets[0].backgroundColor = trafficColors;
                    pieChart.update();
                    $('#total-waste').text('Total Waste: ' + parseFloat(response.totalWaste).toFixed(2) +
                        ' KG');

                    pieChartDua.data.labels = response.labelsWaste;
                    pieChartDua.data.datasets[0].data = response.valWaste;
                    pieChartDua.data.datasets[0].backgroundColor = trafficColors2;
                    pieChartDua.update();
                    $('#total-waste-recycle').text('Total Waste: ' + parseFloat(response.totalWasteOut)
                        .toFixed(2) +
                        ' KG');

                    pieChartTiga.data.labels = response.labelsRoll;
                    pieChartTiga.data.datasets[0].data = response.valRoll;
                    pieChartTiga.data.datasets[0].backgroundColor = trafficColors3;
                    pieChartTiga.update();
                    $('#total-jumbo').text('Total Jumbo Rewind: ' + parseFloat(response.totalJumbo).toFixed(2) +
                        ' KG');
                    Swal.close();
                },
                error: function(xhr) {
                    console.log(xhr.responseText);
                    Swal.close();
                }
            });
        }

        document.getElementById('btnPrint').addEventListener('click', function() {

            const line = document.getElementById('filterRange').value;
            const date = document.getElementById('filterDate').value;
            const date2 = document.getElementById('filterDate2').value;
            const shift = document.getElementById('filterShift').value;

            const url = `{{ url('/dashboard/print') }}?line=${line}&date=${date}&date2=${date2}&shift=${shift}`;
            window.open(url, '_blank');
        });

        function updateKpi(selector, value, target) {
            let val = parseFloat(value); // tetap number
            let tgt = parseFloat(target); // tetap number

            let $el = $(selector);

            // tampilkan 2 desimal
            $el
                .css('color', 'black')
                .html(val.toFixed(2) + '%');

            if (val < tgt) {
                $el
                    .css('color', 'red')
                    .append(' <i class="far fa-arrow-alt-circle-down"></i>');
            } else if (val > tgt) {
                $el
                    .css('color', '#2dce89')
                    .append(' <i class="far fa-arrow-alt-circle-up"></i>');
            }
        }
    </script>
@endsection