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

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    {{-- Alert Messages --}}
    @if (session('error'))
        <div class="alert alert-danger alert-dismissible fade show mx-4 mt-3" role="alert">
            <strong>Error!</strong> {{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        @if ($authorize->add == '1')
                            <button class="btn btn-primary mb-0" id="rpkita-execute" type="submit"
                                form="{{ $dmenu }}filter-form">
                                <i class="fas fa-bolt me-1"></i>
                                <span class="font-weight-bold">Execute</span>
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-4">
        <div class="row justify-content-start">
            <div class="col-12 col-md-10 col-lg-8 col-xl-6">
                <div class="card">
                    <div class="card-body p-4">
                        <form role="form" method="POST" action="{{ URL::to($url_menu) }}"
                            id="{{ $dmenu }}filter-form">
                            @csrf

                            <p class="text-uppercase text-sm">Filter {{ $title_menu }}</p>
                            <hr class="horizontal dark mt-0">

                            {{-- Section Tanggal --}}
                            <div class="mb-4">
                                <label class="form-label font-weight-bold mb-2" style="color: #344767;">
                                    Tanggal
                                </label>
                                <div class="row g-4">
                                    <!-- Start Date -->
                                    <div class="col-6">
                                        <input type="date" name="report-filter-sdate" id="sdate" class="form-control"
                                            max="{{ date('Y-m-d') }}">
                                    </div>

                                    <!-- End Date -->
                                    <div class="col-6">
                                        <input type="date" name="report-filter-edate" id="edate" class="form-control"
                                            max="{{ date('Y-m-d') }}">
                                    </div>
                                </div>
                            </div>

                            {{-- Section Kode CPU --}}
                            <div class="mb-4">
                                <label for="code" class="form-label font-weight-bold mb-3" style="color: #344767;">
                                    Kode CPU
                                </label>
                                <div class="input-group">
                                    <input type="text" id="code" name="code-cpu" class="form-control" readonly
                                        style="background-color: #fff; border-top-left-radius: 0.375rem; border-bottom-left-radius: 0.375rem; padding-left: 0.75rem;">
                                    <span class="input-group-text bg-primary text-white"
                                        style="cursor: pointer; border-top-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem;"
                                        onclick="searchItems()">
                                        <i class="fas fa-search"></i>
                                    </span>
                                </div>
                            </div>

                            <hr class="horizontal dark">
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-4 g-4">
            <!-- TOTAL CPU -->
            <div class="col-xl-6 col-md-12">
                <div class="card" style="height: 500px;">
                    <div class="card-body d-flex flex-column">
                        <h6 class="text-uppercase font-weight-bold mb-2">Total CPU</h6>
                        <div id="chart-bar-cpu" class="flex-grow-1" style="min-height: 0;"></div>
                    </div>
                </div>
            </div>

            <!-- TOTAL MAINTENANCE -->
            <div class="col-xl-6 col-md-12">
                <div class="card" style="height: 500px;">
                    <div class="card-body d-flex flex-column">
                        <h6 class="text-uppercase font-weight-bold mb-2">Total Maintenance</h6>
                        <div id="chart-bar-maintenance" class="flex-grow-1" style="min-height: 0;"></div>
                    </div>
                </div>
            </div>
        </div>

        {{-- DETAIL TABLE SECTION --}}
        <div class="row mt-4" id="detail-table-section" style="display: none;">
            <div class="col-12">
                <div class="card">
                    <div class="card-header pb-0 d-flex justify-content-between align-items-center">
                        <div>
                            <h5 class="mb-0" id="detail-table-title">Detail Data</h5>
                            <p class="text-sm mb-0 text-muted" id="detail-table-subtitle"></p>
                        </div>
                        <button type="button" class="btn btn-sm btn-outline-secondary" id="close-detail-table">
                            <i class="fas fa-times me-1"></i> Tutup
                        </button>
                    </div>
                    <div class="card-body px-0 pb-0">
                        <div class="table-responsive px-4 pb-4">
                            <table id="detail-table" class="table table-hover align-items-center mb-0" style="width: 100%">
                                <thead style="background-color: #00b7bd4f;" id="detail-table-head">
                                </thead>
                                <tbody id="detail-table-body">
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal Master CPU --}}
    <div class="modal fade bd-example-modal-lg" id="codeModal" tabindex="-1" aria-labelledby="codeModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="codeModalLabel">Master Data CPU</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">
                    <div id="tableModalWrapper" class="table-responsive">
                        <table id="myTableMaster" class="table table-bordered table-striped">
                            <thead style="background-color:#daecff;">
                                <tr>
                                    <th style="width: 120px">Action</th>
                                    <th>Kode</th>
                                    <th>Category</th>
                                    <th>Dept</th>
                                    <th>User</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($cpu_list ?? [] as $cpu)
                                    <tr>
                                        <td class="text-center">
                                            <button type="button" class="btn badge bg-primary select-cpu-btn"
                                                data-code="{{ $cpu->code }}">
                                                Select
                                            </button>
                                        </td>
                                        <td class="fw-bold">{{ $cpu->code }}</td>
                                        <td>{{ $cpu->category }}</td>
                                        <td>{{ $cpu->dept }}</td>
                                        <td>{{ $cpu->user }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="modal-footer">
                    <button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <style>
        /* Header table sticky */
        #detail-table thead th {
            position: sticky;
            top: 0;
            z-index: 10;
        }

        /* Hover effect untuk row */
        #detail-table tbody tr:hover {
            background-color: #f8f9fa;
            cursor: pointer;
        }

        /* Badge styling */
        .badge {
            font-weight: 600;
            padding: 0.35em 0.65em;
        }

        /* Smooth transition for detail section */
        #detail-table-section {
            transition: all 0.3s ease-in-out;
        }

        /* Chart click hint */
        #chart-bar-cpu,
        #chart-bar-maintenance {
            cursor: pointer;
        }
    </style>

    <script>
        // Global variable untuk menyimpan DataTable instance
        let detailTable = null;

        // Fungsi untuk membuka modal
        function searchItems() {
            $('#codeModal').modal('show');
        }

        $(document).ready(function() {
            // ✅ Render Chart saat halaman load
            var cpureal = @json($cpureal ?? []);

            if (cpureal.length > 0) {
                if (document.getElementById('chart-bar-cpu')) {
                    renderChart(cpureal);
                }

                if (document.getElementById('chart-bar-maintenance')) {
                    chartMaintenance(cpureal);
                }
            }

            // Initialize DataTables untuk modal
            const table = $('#myTableMaster').DataTable({
                "language": {
                    "search": "Cari :",
                    "lengthMenu": "Tampilkan _MENU_ baris",
                    "zeroRecords": "Maaf - Data tidak ada",
                    "info": "Data _START_ - _END_ dari _TOTAL_",
                    "infoEmpty": "Tidak ada data",
                    "infoFiltered": "(pencarian dari _MAX_ data)"
                },
                "ordering": true,
                "pageLength": 10,
                responsive: true
            });

            // Handle select CPU dari modal
            $(document).on('click', '.select-cpu-btn', function() {
                const code = $(this).data('code');
                $('#code').val(code);
                $('#codeModal').modal('hide');
            });

            // Validation form submit
            $('#filter-form').on('submit', function(e) {
                const sdate = $('#sdate').val();
                const edate = $('#edate').val();

                if ((sdate && !edate) || (!sdate && edate)) {
                    e.preventDefault();
                    Swal.fire({
                        icon: 'warning',
                        title: 'Perhatian!',
                        text: 'Jika mengisi tanggal, harap isi Start Date DAN End Date!'
                    });
                    return false;
                }

                if (sdate && edate && new Date(sdate) > new Date(edate)) {
                    e.preventDefault();
                    Swal.fire({
                        icon: 'error',
                        title: 'Oops.. .',
                        text: 'Start Date harus lebih kecil atau sama dengan End Date!'
                    });
                    return false;
                }

                Swal.fire({
                    title: 'Loading...',
                    html: 'Memproses data.. .',
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });
            });

            // Clear filter kode CPU (double click)
            $('#code').on('dblclick', function() {
                Swal.fire({
                    title: 'Reset Kode CPU? ',
                    text: 'Hapus kode CPU yang dipilih? ',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, Reset',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $(this).val('');
                        Swal.fire({
                            toast: true,
                            position: 'top-end',
                            icon: 'info',
                            title: 'Kode CPU direset',
                            showConfirmButton: false,
                            timer: 1500
                        });
                    }
                });
            });

            // Close detail table
            $('#close-detail-table').on('click', function() {
                $('#detail-table-section').slideUp(300);
                if (detailTable) {
                    detailTable.destroy();
                    detailTable = null;
                }
            });
        });

        // FUNCTION:  Show Loading State
        function showLoadingState(title, subtitle, columnsCount) {
            if (detailTable) {
                detailTable.destroy();
                detailTable = null;
            }

            $('#detail-table-title').text(title);
            $('#detail-table-subtitle').text(subtitle);

            $('#detail-table-head').empty();
            $('#detail-table-body').html(`
                <tr>
                    <td colspan="${columnsCount}" class="text-center py-4">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <p class="mt-2 text-muted">Memuat data...</p>
                    </td>
                </tr>
            `);

            if ($('#detail-table-section').is(':hidden')) {
                $('#detail-table-section').slideDown(300);

                setTimeout(function() {
                    $('html, body').animate({
                        scrollTop: $('#detail-table-section').offset().top - 100
                    }, 500);
                }, 350);
            }
        }

        // FUNCTION: Show Detail Table
        function showDetailTable(title, subtitle, headers, data) {
            $('#detail-table-title').text(title);
            $('#detail-table-subtitle').text(subtitle);

            if (detailTable) {
                detailTable.destroy();
                detailTable = null;
            }

            $('#detail-table-head').empty();
            $('#detail-table-body').empty();

            let headerHtml = '<tr>';
            headers.forEach(header => {
                headerHtml +=
                    `<th class="text-uppercase text-secondary text-xxs font-weight-bolder ${header.class || ''}">${header.label}</th>`;
            });
            headerHtml += '</tr>';
            $('#detail-table-head').html(headerHtml);

            let bodyHtml = '';
            if (data.length === 0) {
                bodyHtml = `<tr><td colspan="${headers.length}" class="text-center text-muted py-4">
                    <i class="fas fa-inbox fa-2x mb-2"></i>
                    <p>Tidak ada data</p>
                </td></tr>`;
            } else {
                data.forEach((row, index) => {
                    bodyHtml += '<tr>';
                    headers.forEach(header => {
                        if (header.key === 'no') {
                            bodyHtml += `<td class="text-sm text-center">${index + 1}</td>`;
                        } else if (typeof row[header.key] === 'function') {
                            bodyHtml += `<td class="text-sm">${row[header.key]()}</td>`;
                        } else {
                            bodyHtml += `<td class="text-sm">${row[header.key] || '-'}</td>`;
                        }
                    });
                    bodyHtml += '</tr>';
                });
            }
            $('#detail-table-body').html(bodyHtml);

            if ($('#detail-table-section').is(':hidden')) {
                $('#detail-table-section').slideDown(300);
            }

            setTimeout(function() {
                if (data.length > 0) {
                    detailTable = $('#detail-table').DataTable({
                        language: {
                            search: "Cari :",
                            lengthMenu: "Tampilkan _MENU_ baris",
                            zeroRecords: "Maaf - Data tidak ada",
                            info: "Data _START_ - _END_ dari _TOTAL_",
                            infoEmpty: "Tidak ada data",
                            infoFiltered: "(pencarian dari _MAX_ data)",
                            paginate: {
                                first: "Pertama",
                                last: "Terakhir",
                                next: "Selanjutnya",
                                previous: "Sebelumnya"
                            }
                        },
                        ordering: true,
                        responsive: true,
                        pageLength: 10,
                        lengthMenu: [
                            [10, 25, 50, 100, -1],
                            [10, 25, 50, 100, "All"]
                        ],
                        retrieve: true,
                        paging: true,
                        searching: true,
                        info: true
                    });
                }
            }, 100);
        }

        // RENDER CHART CPU
        // function renderChart(data) {
        //     const currentYear = new Date().getFullYear();
        //     const pastYears = [];
        //     for (let i = 0; i < 3; i++) {
        //         pastYears.push(currentYear - i);
        //     }

        //     var listcpu = [];
        //     var idx = data.length - 3;
        //     for (var i = data.length - 1; i >= idx; i--) {
        //         listcpu.push({
        //             tahun: data[i].tahun,
        //             cpu: data[i].cpu,
        //             laptop: data[i].laptop,
        //             minipc: data[i].minipc,
        //             aktif: data[i].aktif
        //         });
        //     }

        //     const chart = echarts.init(document.getElementById('chart-bar-cpu'));

        //     const option = {
        //         baseOption: {
        //             timeline: {
        //                 axisType: 'category',
        //                 data: pastYears,
        //                 autoPlay: false,
        //                 playInterval: 3000,
        //                 bottom: '15%',
        //                 left: '10%',
        //                 right:  '10%',
        //                 label: {
        //                     fontSize: 12
        //                 }
        //             },
        //             tooltip: {
        //                 trigger: 'item',
        //                 formatter: '{b}: {c} ({d}%)'
        //             },
        //             series: []
        //         },
        //         options: listcpu. map((item) => ({
        //             title: {
        //                 text: `${item.tahun} (${item.aktif})`,
        //                 left: 'center',
        //                 top: '3%',
        //                 textStyle:  {
        //                     fontSize: 16,
        //                     fontWeight: 'bold'
        //                 }
        //             },
        //             legend: {
        //                 orient: 'horizontal',
        //                 bottom: '5%',
        //                 left: 'center',
        //                 data: ['CPU', 'Notebook', 'Mini PC'],
        //                 textStyle: {
        //                     fontSize:  12
        //                 }
        //             },
        //             series: [{
        //                 name: 'Total CPU',
        //                 type: 'pie',
        //                 radius: '55%',
        //                 center: ['50%', '38%'],
        //                 label: {
        //                     show: true,
        //                     formatter: '{b}:  {c}',
        //                     fontSize: 11
        //                 },
        //                 emphasis: {
        //                     itemStyle: {
        //                         shadowBlur: 10,
        //                         shadowOffsetX: 0,
        //                         shadowColor: 'rgba(0, 0, 0, 0.5)'
        //                     }
        //                 },
        //                 data: [
        //                     { value: item.cpu, name: 'CPU', category: 'CPU' },
        //                     { value: item.laptop, name: 'Notebook', category: 'NBK' },
        //                     { value:  item.minipc, name: 'Mini PC', category: 'MNP' }
        //                 ]
        //             }]
        //         }))
        //     };

        //     chart.setOption(option);

        //     chart.on('click', function(params) {
        //         const categoryMap = {
        //             'CPU':  'CPU',
        //             'Notebook': 'NBK',
        //             'Mini PC': 'MNP'
        //         };

        //         const category = categoryMap[params.name];
        //         const currentTimelineIndex = chart.getOption().timeline[0].currentIndex || 0;
        //         const year = pastYears[currentTimelineIndex];

        //         loadCpuCategoryData(category, params.name, year);
        //     });

        //     window.addEventListener('resize', () => chart.resize());
        // }
        function renderChart(data) {
            const el = document.getElementById('chart-bar-cpu');
            if (!el) return;

            const safeData = Array.isArray(data) ? data : [];

            // urutkan dulu biar pasti tahun kecil -> besar, lalu ambil 3 terakhir
            const last3 = safeData
                .slice()
                .sort((a, b) => (a.tahun || 0) - (b.tahun || 0))
                .slice(-3);

            // mapping data + default 0
            const listcpu = last3.map((row) => ({
                tahun: row?.tahun,
                cpu: row?.cpu || 0,
                laptop: row?.laptop || 0,
                minipc: row?.minipc || 0,
                aktif: row?.aktif || 0
            }));

            const chart = echarts.init(el);

            // kalau kosong
            if (listcpu.length === 0) {
                chart.setOption({
                    title: {
                        text: 'No data',
                        left: 'center',
                        top: '45%'
                    }
                });
                return;
            }

            const years = listcpu.map(x => x.tahun);
            const lastIndex = years.length - 1; // ✅ default tahun terbaru

            const option = {
                baseOption: {
                    timeline: {
                        axisType: 'category',
                        data: years,

                        // ✅ default tampil tahun terbaru
                        currentIndex: lastIndex,

                        // ✅ kalau cuma 1 tahun, timeline disembunyikan
                        show: years.length > 1,
                        controlStyle: {
                            show: years.length > 1
                        },

                        autoPlay: false,
                        playInterval: 3000,
                        bottom: '15%',
                        left: '10%',
                        right: '10%',
                        label: {
                            fontSize: 12
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}: {c} ({d}%)'
                    },
                    series: []
                },
                options: listcpu.map((item) => ({
                    title: {
                        text: `${item.tahun} (${item.aktif})`,
                        left: 'center',
                        top: '3%',
                        textStyle: {
                            fontSize: 16,
                            fontWeight: 'bold'
                        }
                    },
                    legend: {
                        orient: 'horizontal',
                        bottom: '5%',
                        left: 'center',
                        data: ['CPU', 'Notebook', 'Mini PC'],
                        textStyle: {
                            fontSize: 12
                        }
                    },
                    series: [{
                        name: 'Total CPU',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '38%'],
                        label: {
                            show: true,
                            formatter: '{b}: {c}',
                            fontSize: 11
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        data: [{
                                value: item.cpu,
                                name: 'CPU',
                                category: 'CPU'
                            },
                            {
                                value: item.laptop,
                                name: 'Notebook',
                                category: 'NBK'
                            },
                            {
                                value: item.minipc,
                                name: 'Mini PC',
                                category: 'MNP'
                            }
                        ]
                    }]
                }))
            };

            chart.setOption(option, true);

            chart.off('click'); // biar gak dobel binding kalau render dipanggil ulang
            chart.on('click', function(params) {
                const categoryMap = {
                    'CPU': 'CPU',
                    'Notebook': 'NBK',
                    'Mini PC': 'MNP'
                };

                const category = categoryMap[params.name];
                if (!category) return;

                const currentTimelineIndex = chart.getOption().timeline?.[0]?.currentIndex ?? lastIndex;
                const year = years[currentTimelineIndex] ?? years[years.length - 1];

                loadCpuCategoryData(category, params.name, year);
            });

            window.addEventListener('resize', () => chart.resize());
        }


        // LOAD CPU CATEGORY DATA
        function loadCpuCategoryData(category, categoryName, year) {
            const headers = [{
                    key: 'no',
                    label: 'No',
                    class: 'text-center'
                },
                {
                    key: 'code',
                    label: 'Kode'
                },
                {
                    key: 'category',
                    label: 'Kategori'
                },
                {
                    key: 'departemen',
                    label: 'Departemen'
                },
                {
                    key: 'user',
                    label: 'User'
                },
                {
                    key: 'compname',
                    label: 'Computer Name'
                },
                {
                    key: 'ip',
                    label: 'IP'
                },
                {
                    key: 'anydesk',
                    label: 'AnyDesk ID'
                },
                {
                    key: 'maintenance',
                    label: 'Maintenance'
                },
                {
                    key: 'maintenance_type',
                    label: 'Maintenance Type'
                }
            ];

            showLoadingState(`Detail ${categoryName} - ${year}`, 'Memuat data... ', 10);

            $.ajax({
                url: '{{ route('rpsmtn.cpu.category') }}',
                type: 'GET',
                data: {
                    category: category,
                    year: year
                },
                success: function(response) {
                    if (response.success) {
                        const processedData = response.data.map(item => ({
                            code: `<span class="fw-bold">${item.code}</span>`,
                            category: item.category,
                            departemen: item.departemen,
                            user: item.user,
                            compname: item.compname,
                            ip: item.ip,
                            anydesk: item.anydesk,
                            maintenance: item.maintenance == '0' ?
                                '<span class="badge bg-success">Maintained by IT</span>' :
                                '<span class="badge bg-secondary">Not Maintained by IT</span>',
                            maintenance_type: `<span class="badge bg-info">${item.maintenance_type_display}</span>`
                        }));

                        showDetailTable(
                            `Detail ${categoryName} - ${year}`,
                            `Menampilkan ${processedData. length} data`,
                            headers,
                            processedData
                        );
                    } else {
                        $('#detail-table-subtitle').text('Error loading data');
                        $('#detail-table-body').html(`
                            <tr>
                                <td colspan="10" class="text-center text-danger py-4">
                                    <i class="fas fa-exclamation-triangle fa-2x mb-2"></i>
                                    <p>Error loading data</p>
                                </td>
                            </tr>
                        `);
                    }
                },
                error: function(xhr) {
                    console.error('Error:', xhr);
                    $('#detail-table-subtitle').text('Failed to load data');
                    $('#detail-table-body').html(`
                        <tr>
                            <td colspan="10" class="text-center text-danger py-4">
                                <i class="fas fa-exclamation-triangle fa-2x mb-2"></i>
                                <p>Failed to load data</p>
                            </td>
                        </tr>
                    `);
                }
            });
        }

        // RENDER CHART MAINTENANCE
        // function chartMaintenance(data) {
        //     const currentYear = new Date().getFullYear();
        //     const pastYears = [];
        //     for (let i = 0; i < 3; i++) {
        //         pastYears.push(currentYear - i);
        //     }

        //     var listcpu = [];
        //     var idx = data.length - 3;
        //     for (var i = data.length - 1; i >= idx; i--) {
        //         var obj = {
        //             tahun: data[i].tahun,
        //             aktif: data[i].aktif,
        //             total: data[i].total_maintenance || 0,
        //             maintenance: data[i].maintenance || 0,
        //             ringan: data[i].ringan || 0,
        //             medium: data[i].medium || 0,
        //             berat: data[i].berat || 0,
        //             no: data[i].no || 0
        //         };
        //         obj.sisa_maintenance = obj.total - obj.maintenance;
        //         obj.terisi = obj.ringan + obj.medium + obj.berat + obj.no;
        //         obj.undefined = obj.aktif - obj.terisi;
        //         listcpu.push(obj);
        //     }

        //     const chart = echarts.init(document.getElementById('chart-bar-maintenance'));

        //     const option = {
        //         baseOption: {
        //             timeline: {
        //                 axisType: 'category',
        //                 data: pastYears,
        //                 autoPlay: false,
        //                 playInterval: 3000,
        //                 bottom: '15%',
        //                 left: '10%',
        //                 right: '10%',
        //                 label: {
        //                     fontSize: 12
        //                 }
        //             },
        //             tooltip: {
        //                 trigger: 'item',
        //                 formatter: '{b}: {c} ({d}%)'
        //             },
        //             series: []
        //         },
        //         options: listcpu.map((item) => ({
        //             title: {
        //                 text: `${item.tahun} (${item.aktif})`,
        //                 left: 'center',
        //                 top: '3%',
        //                 textStyle: {
        //                     fontSize: 16,
        //                     fontWeight: 'bold'
        //                 }
        //             },
        //             legend: {
        //                 orient: 'horizontal',
        //                 bottom: '5%',
        //                 left: 'center',
        //                 type: 'scroll',
        //                 data: ['Ringan', 'Medium', 'Berat', 'Not Maintained', 'Undefined', 'Dikerjakan',
        //                     'Belum Dikerjakan'
        //                 ],
        //                 textStyle: {
        //                     fontSize: 11
        //                 }
        //             },
        //             series: [{
        //                     name: 'Maintenance Categories',
        //                     type: 'pie',
        //                     radius: ['20%', '45%'],
        //                     center: ['28%', '36%'],
        //                     label: {
        //                         show: true,
        //                         formatter: '{b}: {c}',
        //                         fontSize: 10
        //                     },
        //                     emphasis: {
        //                         label: {
        //                             show: true,
        //                             fontSize: 12,
        //                             fontWeight: 'bold'
        //                         }
        //                     },
        //                     data: [{
        //                             value: item.ringan,
        //                             name: 'Ringan',
        //                             itemStyle: {
        //                                 color: '#3498db'
        //                             },
        //                             typeCode: 'ringan'
        //                         },
        //                         {
        //                             value: item.medium,
        //                             name: 'Medium',
        //                             itemStyle: {
        //                                 color: '#f39c12'
        //                             },
        //                             typeCode: 'medium'
        //                         },
        //                         {
        //                             value: item.berat,
        //                             name: 'Berat',
        //                             itemStyle: {
        //                                 color: '#E9967A'
        //                             },
        //                             typeCode: 'berat'
        //                         },
        //                         {
        //                             value: item.no,
        //                             name: 'Not Maintained',
        //                             itemStyle: {
        //                                 color: '#8e44ad'
        //                             },
        //                             typeCode: 'no'
        //                         },
        //                         {
        //                             value: item.undefined,
        //                             name: 'Undefined',
        //                             itemStyle: {
        //                                 color: '#f1c40f'
        //                             },
        //                             typeCode: 'undefined'
        //                         }
        //                     ]
        //                 },
        //                 {
        //                     name: 'Maintenance Progress',
        //                     type: 'pie',
        //                     radius: ['25%', '45%'],
        //                     center: ['72%', '36%'],
        //                     label: {
        //                         show: true,
        //                         formatter: '{b}: {c}',
        //                         fontSize: 10
        //                     },
        //                     emphasis: {
        //                         label: {
        //                             show: true,
        //                             fontSize: 12,
        //                             fontWeight: 'bold'
        //                         }
        //                     },
        //                     data: [{
        //                             value: item.maintenance,
        //                             name: 'Dikerjakan',
        //                             itemStyle: {
        //                                 color: '#2ecc71'
        //                             },
        //                             statusCode: 'done'
        //                         },
        //                         {
        //                             value: item.sisa_maintenance,
        //                             name: 'Belum Dikerjakan',
        //                             itemStyle: {
        //                                 color: '#e74c3c'
        //                             },
        //                             statusCode: 'not_done'
        //                         }
        //                     ]
        //                 }
        //             ]
        //         }))
        //     };

        //     chart.setOption(option);

        //     chart.on('click', function(params) {
        //         const currentTimelineIndex = chart.getOption().timeline[0].currentIndex || 0;
        //         const year = pastYears[currentTimelineIndex];

        //         if (params.seriesName === 'Maintenance Categories') {
        //             const typeCode = params.data.typeCode;
        //             const typeName = params.data.name;

        //             if (typeCode === 'undefined') {
        //                 return;
        //             }

        //             loadMaintenanceTypeData(typeCode, typeName, year);
        //         } else if (params.seriesName === 'Maintenance Progress') {
        //             const statusCode = params.data.statusCode;

        //             if (statusCode === 'done') {
        //                 loadMaintenanceDoneData(year);
        //             } else if (statusCode === 'not_done') {
        //                 loadMaintenanceNotDoneData(year);
        //             }
        //         }
        //     });

        //     window.addEventListener('resize', () => chart.resize());
        // }
        function chartMaintenance(data) {
            const el = document.getElementById('chart-bar-maintenance');
            if (!el) return;

            const safeData = Array.isArray(data) ? data : [];

            // urutkan tahun kecil -> besar, ambil 3 terakhir
            const last3 = safeData
                .slice()
                .sort((a, b) => (a.tahun || 0) - (b.tahun || 0))
                .slice(-3);

            const listcpu = last3.map((row) => {
                const obj = {
                    tahun: row?.tahun,
                    aktif: row?.aktif || 0,
                    total: row?.total_maintenance || 0,
                    maintenance: row?.maintenance || 0,
                    ringan: row?.ringan || 0,
                    medium: row?.medium || 0,
                    berat: row?.berat || 0,
                    no: row?.no || 0
                };

                obj.sisa_maintenance = obj.total - obj.maintenance;
                obj.terisi = obj.ringan + obj.medium + obj.berat + obj.no;

                let undef = obj.aktif - obj.terisi;
                if (undef < 0) undef = 0; // biar ga minus
                obj.undefined = undef;

                return obj;
            });

            const chart = echarts.init(el);

            // kalau kosong
            if (listcpu.length === 0) {
                chart.setOption({
                    title: {
                        text: 'No data',
                        left: 'center',
                        top: '45%'
                    }
                });
                return;
            }

            const years = listcpu.map(x => x.tahun);
            const lastIndex = years.length - 1; // ✅ default tahun terbaru

            const option = {
                baseOption: {
                    timeline: {
                        axisType: 'category',
                        data: years,
                        currentIndex: lastIndex,

                        // ✅ kalau cuma 1 tahun, timeline disembunyikan
                        show: years.length > 1,
                        controlStyle: {
                            show: years.length > 1
                        },

                        autoPlay: false,
                        playInterval: 3000,
                        bottom: '15%',
                        left: '10%',
                        right: '10%',
                        label: {
                            fontSize: 12
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}: {c} ({d}%)'
                    },
                    series: []
                },
                options: listcpu.map((item) => ({
                    title: {
                        text: `${item.tahun} (${item.aktif})`,
                        left: 'center',
                        top: '3%',
                        textStyle: {
                            fontSize: 16,
                            fontWeight: 'bold'
                        }
                    },
                    legend: {
                        orient: 'horizontal',
                        bottom: '5%',
                        left: 'center',
                        type: 'scroll',
                        data: ['Ringan', 'Medium', 'Berat', 'Not Maintained', 'Undefined', 'Dikerjakan',
                            'Belum Dikerjakan'
                        ],
                        textStyle: {
                            fontSize: 11
                        }
                    },
                    series: [{
                            name: 'Maintenance Categories',
                            type: 'pie',
                            radius: ['20%', '45%'],
                            center: ['28%', '36%'],
                            label: {
                                show: true,
                                formatter: '{b}: {c}',
                                fontSize: 10
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: 12,
                                    fontWeight: 'bold'
                                }
                            },
                            data: [{
                                    value: item.ringan,
                                    name: 'Ringan',
                                    itemStyle: {
                                        color: '#3498db'
                                    },
                                    typeCode: 'ringan'
                                },
                                {
                                    value: item.medium,
                                    name: 'Medium',
                                    itemStyle: {
                                        color: '#f39c12'
                                    },
                                    typeCode: 'medium'
                                },
                                {
                                    value: item.berat,
                                    name: 'Berat',
                                    itemStyle: {
                                        color: '#E9967A'
                                    },
                                    typeCode: 'berat'
                                },
                                {
                                    value: item.no,
                                    name: 'Not Maintained',
                                    itemStyle: {
                                        color: '#8e44ad'
                                    },
                                    typeCode: 'no'
                                },
                                {
                                    value: item.undefined,
                                    name: 'Undefined',
                                    itemStyle: {
                                        color: '#f1c40f'
                                    },
                                    typeCode: 'undefined'
                                }
                            ]
                        },
                        {
                            name: 'Maintenance Progress',
                            type: 'pie',
                            radius: ['25%', '45%'],
                            center: ['72%', '36%'],
                            label: {
                                show: true,
                                formatter: '{b}: {c}',
                                fontSize: 10
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: 12,
                                    fontWeight: 'bold'
                                }
                            },
                            data: [{
                                    value: item.maintenance,
                                    name: 'Dikerjakan',
                                    itemStyle: {
                                        color: '#2ecc71'
                                    },
                                    statusCode: 'done'
                                },
                                {
                                    value: item.sisa_maintenance,
                                    name: 'Belum Dikerjakan',
                                    itemStyle: {
                                        color: '#e74c3c'
                                    },
                                    statusCode: 'not_done'
                                }
                            ]
                        }
                    ]
                }))
            };

            chart.setOption(option, true);

            chart.off('click'); // biar tidak double event kalau function dipanggil ulang
            chart.on('click', function(params) {
                const currentTimelineIndex = chart.getOption().timeline?.[0]?.currentIndex ?? lastIndex;
                const year = years[currentTimelineIndex] ?? years[years.length - 1];

                if (params.seriesName === 'Maintenance Categories') {
                    const typeCode = params?.data?.typeCode;
                    const typeName = params?.data?.name;

                    if (!typeCode || typeCode === 'undefined') return;

                    loadMaintenanceTypeData(typeCode, typeName, year);

                } else if (params.seriesName === 'Maintenance Progress') {
                    const statusCode = params?.data?.statusCode;

                    if (statusCode === 'done') {
                        loadMaintenanceDoneData(year);
                    } else if (statusCode === 'not_done') {
                        loadMaintenanceNotDoneData(year);
                    }
                }
            });

            window.addEventListener('resize', () => chart.resize());
        }


        // LOAD MAINTENANCE TYPE DATA
        function loadMaintenanceTypeData(type, typeName, year) {
            const headers = [{
                    key: 'no',
                    label: 'No',
                    class: 'text-center'
                },
                {
                    key: 'code',
                    label: 'Code'
                },
                {
                    key: 'user',
                    label: 'User'
                },
                {
                    key: 'departemen',
                    label: 'Departemen'
                },
                {
                    key: 'area',
                    label: 'Area'
                },
                {
                    key: 'maintenance',
                    label: 'Maintenance'
                },
                {
                    key: 'maintenance_type',
                    label: 'Maintenance Type'
                },
                {
                    key: 'jumlah',
                    label: 'Jumlah Maintenance',
                    class: 'text-center'
                },
                {
                    key: 'sisa',
                    label: 'Sisa',
                    class: 'text-center'
                }
            ];

            showLoadingState(`Detail Maintenance ${typeName} - ${year}`, 'Memuat data...', 9);

            $.ajax({
                url: '{{ route('rpsmtn.maintenance.type') }}',
                type: 'GET',
                data: {
                    type: type,
                    year: year
                },
                success: function(response) {
                    if (response.success) {
                        const processedData = response.data.map(item => ({
                            code: `<span class="fw-bold">${item.code}</span>`,
                            user: item.user,
                            departemen: item.departemen,
                            area: item.area,
                            maintenance: item.maintenance == '0' ?
                                '<span class="badge bg-success">Maintenance by IT</span>' :
                                '<span class="badge bg-secondary">Not Maintained by IT</span>',
                            maintenance_type: `<span class="badge bg-info">${item.maintenance_type_display}</span>`,
                            jumlah: `<span class="badge bg-primary">${item.jumlah_maintenance}</span>`,
                            sisa: item.sisa === 0 ?
                                '<span class="badge bg-danger">0</span>' :
                                `<span class="badge bg-warning">${item.sisa}</span>`
                        }));

                        showDetailTable(
                            `Detail Maintenance ${typeName} - ${year}`,
                            `Menampilkan ${processedData.length} data`,
                            headers,
                            processedData
                        );
                    } else {
                        $('#detail-table-subtitle').text('Error loading data');
                        $('#detail-table-body').html(`
                            <tr>
                                <td colspan="9" class="text-center text-danger py-4">
                                    <i class="fas fa-exclamation-triangle fa-2x mb-2"></i>
                                    <p>Error loading data</p>
                                </td>
                            </tr>
                        `);
                    }
                },
                error: function(xhr) {
                    console.error('Error:', xhr);
                    $('#detail-table-subtitle').text('Failed to load data');
                    $('#detail-table-body').html(`
                        <tr>
                            <td colspan="9" class="text-center text-danger py-4">
                                <i class="fas fa-exclamation-triangle fa-2x mb-2"></i>
                                <p>Failed to load data</p>
                            </td>
                        </tr>
                    `);
                }
            });
        }

        // LOAD MAINTENANCE DONE DATA
        function loadMaintenanceDoneData(year) {
            const headers = [{
                    key: 'no',
                    label: 'No',
                    class: 'text-center'
                },
                {
                    key: 'code',
                    label: 'Kode CPU'
                },
                {
                    key: 'user',
                    label: 'User'
                },
                {
                    key: 'departemen',
                    label: 'Departemen'
                },
                {
                    key: 'area',
                    label: 'Area'
                },
                {
                    key: 'maintenance_type',
                    label: 'Maintenance Type'
                },
                {
                    key: 'jumlah',
                    label: 'Jumlah Maintenance',
                    class: 'text-center'
                },
                {
                    key: 'sisa',
                    label: 'Sisa',
                    class: 'text-center'
                }
            ];

            showLoadingState(`Detail Maintenance Dikerjakan - ${year}`, 'Memuat data...', 8);

            $.ajax({
                url: '{{ route('rpsmtn.maintenance.done') }}',
                type: 'GET',
                data: {
                    year: year
                },
                success: function(response) {
                    if (response.success) {
                        const processedData = response.data.map(item => {
                            let sisaBadge;
                            if (item.sisa === 0) {
                                sisaBadge = '<span class="badge bg-success">0</span>';
                            } else if (item.sisa === 1) {
                                sisaBadge = '<span class="badge bg-warning">1</span>';
                            } else {
                                sisaBadge = `<span class="badge bg-danger">${item.sisa}</span>`;
                            }

                            return {
                                code: `<span class="fw-bold">${item.code}</span>`,
                                user: item.user,
                                departemen: item.departemen,
                                area: item.area,
                                maintenance_type: item.maintenance_type_badge ?
                                    `<span class="badge bg-${item.maintenance_type_badge}">${item. maintenance_type_display}</span>` :
                                    '<span class="badge bg-secondary">-</span>',
                                jumlah: `<span class="badge bg-primary">${item. jumlah_maintenance}</span>`,
                                sisa: sisaBadge
                            };
                        });

                        showDetailTable(
                            `Detail Maintenance Dikerjakan - ${year}`,
                            `Menampilkan ${processedData.length} data`,
                            headers,
                            processedData
                        );
                    } else {
                        $('#detail-table-subtitle').text('Error loading data');
                        $('#detail-table-body').html(`
                            <tr>
                                <td colspan="8" class="text-center text-danger py-4">
                                    <i class="fas fa-exclamation-triangle fa-2x mb-2"></i>
                                    <p>Error loading data</p>
                                </td>
                            </tr>
                        `);
                    }
                },
                error: function(xhr) {
                    console.error('Error:', xhr);
                    $('#detail-table-subtitle').text('Failed to load data');
                    $('#detail-table-body').html(`
                        <tr>
                            <td colspan="8" class="text-center text-danger py-4">
                                <i class="fas fa-exclamation-triangle fa-2x mb-2"></i>
                                <p>Failed to load data</p>
                            </td>
                        </tr>
                    `);
                }
            });
        }

        // LOAD MAINTENANCE NOT DONE DATA
        function loadMaintenanceNotDoneData(year) {
            const headers = [{
                    key: 'no',
                    label: 'No',
                    class: 'text-center'
                },
                {
                    key: 'code',
                    label: 'Kode CPU'
                },
                {
                    key: 'user',
                    label: 'User'
                },
                {
                    key: 'departemen',
                    label: 'Departemen'
                },
                {
                    key: 'area',
                    label: 'Area'
                },
                {
                    key: 'maintenance_type',
                    label: 'Maintenance Type'
                },
                {
                    key: 'target',
                    label: 'Target',
                    class: 'text-center'
                },
                {
                    key: 'jumlah',
                    label: 'Sudah Dikerjakan',
                    class: 'text-center'
                },
                {
                    key: 'sisa',
                    label: 'Sisa',
                    class: 'text-center'
                }
            ];

            showLoadingState(`Detail Maintenance Belum Dikerjakan - ${year}`, 'Memuat data... ', 9);

            $.ajax({
                url: '{{ route('rpsmtn.maintenance.notdone') }}',
                type: 'GET',
                data: {
                    year: year
                },
                success: function(response) {
                    if (response.success) {
                        const processedData = response.data.map(item => {
                            let sisaBadge;
                            if (item.sisa === 1) {
                                sisaBadge = '<span class="badge bg-warning">1</span>';
                            } else if (item.sisa > 1) {
                                sisaBadge = `<span class="badge bg-danger">${item.sisa}</span>`;
                            } else {
                                sisaBadge = '<span class="badge bg-success">0</span>';
                            }

                            return {
                                code: `<span class="fw-bold">${item.code}</span>`,
                                user: item.user,
                                departemen: item.departemen,
                                area: item.area,
                                maintenance_type: item.maintenance_type_badge ?
                                    `<span class="badge bg-${item.maintenance_type_badge}">${item.maintenance_type_display}</span>` :
                                    '<span class="badge bg-secondary">-</span>',
                                target: `<span class="badge bg-info">${item.target}</span>`,
                                jumlah: `<span class="badge bg-primary">${item.jumlah_maintenance}</span>`,
                                sisa: sisaBadge
                            };
                        });

                        showDetailTable(
                            `Detail Maintenance Belum Dikerjakan - ${year}`,
                            `Menampilkan ${processedData. length} data yang belum selesai maintenance`,
                            headers,
                            processedData
                        );
                    } else {
                        $('#detail-table-subtitle').text('Error loading data');
                        $('#detail-table-body').html(`
                            <tr>
                                <td colspan="9" class="text-center text-danger py-4">
                                    <i class="fas fa-exclamation-triangle fa-2x mb-2"></i>
                                    <p>Error loading data</p>
                                </td>
                            </tr>
                        `);
                    }
                },
                error: function(xhr) {
                    console.error('Error:', xhr);
                    $('#detail-table-subtitle').text('Failed to load data');
                    $('#detail-table-body').html(`
                        <tr>
                            <td colspan="9" class="text-center text-danger py-4">
                                <i class="fas fa-exclamation-triangle fa-2x mb-2"></i>
                                <p>Failed to load data</p>
                            </td>
                        </tr>
                    `);
                }
            });
        }
    </script>
@endsection