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

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header pb-0">
                        <div class="d-lg-flex">
                            <div>
                                <h5 class="mb-0">Result Report Summary Maintenance</h5>
                                <p class="text-sm mb-0">
                                    <strong>Periode:</strong> 
                                    @if($filter_params['sdate'] !== 'All' && $filter_params['edate'] !== 'All')
                                        {{ date('d/m/Y', strtotime($filter_params['sdate'])) }} - {{ date('d/m/Y', strtotime($filter_params['edate'])) }}
                                    @else
                                        All Time
                                    @endif
                                    &nbsp;|&nbsp;
                                    <strong>Kode CPU:</strong> {{ $filter_params['code_cpu'] === '%' ? 'All' : $filter_params['code_cpu'] }}
                                </p>
                            </div>
                            <div class="ms-auto my-auto mt-lg-0 mt-4">
                                <div class="ms-auto my-auto">
                                    <a href="{{ URL::to($url_menu) }}" class="btn btn-secondary mb-0">
                                        <i class="fas fa-arrow-left me-2"></i> Kembali
                                    </a>
                                    <button type="button" class="btn btn-secondary mb-0" id="export-excel">
                                        <i class="fas fa-file-excel me-2 text-success"></i> Excel
                                    </button>
                                    <button type="button" class="btn btn-secondary mb-0" id="export-pdf">
                                        <i class="fas fa-file-pdf me-2 text-danger"></i> PDF
                                    </button>
                                    <button type="button" class="btn btn-secondary mb-0" id="print-table">
                                        <i class="fas fa-print me-2 text-info"></i> Print
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="card-body px-0 pb-0">
                        {{-- Filter & Search Section --}}
                        <div class="row px-4 mb-3">
                            <div class="col-lg-3 col-md-4 mb-2">
                                <label for="filter-kode-cpu" class="form-label text-sm">Filter Kode CPU :</label>
                                <select id="filter-kode-cpu" class="form-select form-select-sm">
                                    <option value="">% - All</option>
                                    @foreach($cpu_codes ??   [] as $item)
                                        <option value="{{ $item->code }}">{{ $item->code }} - {{ $item->category }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-lg-6 col-md-4"></div>
                        </div>
                        
                        {{-- Table Result --}}
                        <div class="table-responsive px-4 pb-4">
                            <table id="result-table" class="table table-display table-hover align-items-center mb-0" style="width: 100%">
                                <thead style="background-color: #00b7bd4f;">
                                    <tr>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder text-center" style="width: 50px;">No</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder">Kode CPU</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder">User</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder">Departement</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder">Area</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder text-center">Jumlah Maintenance</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder">Last Maintenance</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder">Info</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($results as $index => $row)
                                    <tr>
                                        <td class="text-sm text-center">{{ $index + 1 }}</td>
                                        <td class="text-sm font-weight-bold">{{ $row->kode_cpu }}</td>
                                        <td class="text-sm">{{ $row->user }}</td>
                                        <td class="text-sm">{{ $row->departement }}</td>
                                        <td class="text-sm">{{ $row->area ??   '-' }}</td>
                                        <td class="text-sm text-center">
                                            @if($row->jumlah_maintenance > 0)
                                                <span class="badge badge-sm bg-gradient-primary">{{ $row->jumlah_maintenance }}</span>
                                            @else
                                                <span class="badge badge-sm bg-gradient-secondary">0</span>
                                            @endif
                                        </td>
                                        <td class="text-sm">
                                            @if($row->last_maintenance)
                                                {{ date('d/m/Y', strtotime($row->last_maintenance)) }}
                                            @else
                                                <span class="text-muted"></span>
                                            @endif
                                        </td>
                                        <td class="text-sm">
                                            @if($row->jumlah_maintenance > 0)
                                                <span class="badge bg-primary">{{ $row->jumlah_maintenance }}x maintenance</span>
                                            @else
                                                <span class="badge bg-secondary">Belum dilakukan maintenance</span>
                                            @endif
                                        </td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="8" class="text-center text-sm text-muted py-4">
                                            <i class="fas fa-inbox fa-3x mb-3"></i>
                                            <p>Tidak ada data yang ditemukan</p>
                                        </td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    
    {{-- Custom CSS --}}
    <style>
        /* Header table sticky */
        #result-table thead th,
        #detail-table thead th {
            position: sticky;
            top: 0;
            z-index: 10;
        }
        
        /* Hover effect untuk row */
        #result-table tbody tr:hover,
        #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>

    {{-- JavaScript --}}
    <script>
        // Global variable untuk menyimpan DataTable instance
        let detailTable = null;

        $(document).ready(function() {
            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 dengan Buttons extension
            const table = $('#result-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,
                "pageLength": 10,
                "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
                "order": [[1, 'asc']],
                responsive: true,
                dom: 'Blfrtip',
                buttons: [
                    {
                        extend: 'excelHtml5',
                        text:   '<i class="fas fa-file-excel" me-1 text-lg text-success"> </i> <span class="font-weight-bold"> Excel',
                        className: 'btn btn-success btn-sm d-none',
                        filename: 'Report_Summary_Maintenance_{{ date("Y-m-d_His") }}',
                        title:   'Report Summary Maintenance',
                        exportOptions: {
                            columns: ': visible',
                            format: {
                                body: function(data, row, column, node) {
                                    return $(data).text();
                                }
                            }
                        }
                    },
                    {
                        extend: 'pdfHtml5',
                        text:  '<i class="fas fa-file-pdf me-1 text-lg text-danger"> </i><span class="font-weight-bold"> PDF',
                        className:   'btn btn-danger btn-sm d-none',
                        filename: 'Report_Summary_Maintenance_{{ date("Y-m-d_His") }}',
                        title:  'Report Summary Maintenance',
                        orientation: 'landscape',
                        pageSize: 'A4',
                        exportOptions: {
                            columns: ':visible',
                            format: {
                                body: function(data, row, column, node) {
                                    return $(data).text();
                                }
                            }
                        },
                        customize: function(doc) {
                            doc.styles.tableHeader = {
                                bold: true,
                                fontSize: 10,
                                color: 'black',
                                fillColor: '#b8e6e8'
                            };
                            doc.defaultStyle.fontSize = 9;
                        }
                    },
                    {
                        extend: 'print',
                        text: '<i class="fas fa-print me-1 text-lg text-info"> </i><span class="font-weight-bold"> Print',
                        className:  'btn btn-info btn-sm d-none',
                        title: 'Report Summary Maintenance',
                        exportOptions: {
                            columns:   ':visible',
                            format:   {
                                body: function(data, row, column, node) {
                                    return $(data).text();
                                }
                            }
                        },
                        customize: function(win) {
                            $(win.document.body).css('font-size', '10pt');
                            $(win.document.body).find('table')
                                .addClass('compact')
                                .css('font-size', 'inherit');
                        }
                    }
                ]
            });
            
            // Filter by Kode CPU
            $('#filter-kode-cpu').on('change', function() {
                const selectedCode = $(this).val();
                
                if (selectedCode) {
                    table.column(1).search('^' + selectedCode + '$', true, false).draw();
                } else {
                    table.column(1).search('').draw();
                }
                
                if (selectedCode) {
                    Swal.fire({
                        toast: true,
                        position: 'top-end',
                        icon: 'info',
                        title: `Filter:   ${selectedCode}`,
                        showConfirmButton: false,
                        timer: 1500
                    });
                }
            });
            
            // Export Excel
            $('#export-excel').on('click', function() {
                table.button('.buttons-excel').trigger();
                
                Swal.fire({
                    toast: true,
                    position:   'top-end',
                    icon: 'success',
                    title: 'Exporting to Excel.. .',
                    showConfirmButton: false,
                    timer:   2000
                });
            });
            
            // Export PDF
            $('#export-pdf').on('click', function() {
                table.button('.buttons-pdf').trigger();
                
                Swal.fire({
                    toast: true,
                    position:  'top-end',
                    icon: 'success',
                    title: 'Exporting to PDF...',
                    showConfirmButton: false,
                    timer:  2000
                });
            });
            
            // Print
            $('#print-table').on('click', function() {
                table.button('.buttons-print').trigger();
            });

            // Close detail table
            $('#close-detail-table').on('click', function() {
                $('#detail-table-section').slideUp(300);
                if (detailTable) {
                    detailTable.destroy();
                    detailTable = null;
                }
            });
            
            @if($results->isEmpty())
                Swal.fire({
                    icon: 'info',
                    title: 'Tidak Ada Data',
                    text: 'Tidak ada data yang sesuai dengan filter yang dipilih.',
                    confirmButtonColor: '#3085d6'
                });
            @endif
        });

        // ✅ NEW: Function to show loading state
        function showLoadingState(title, subtitle, columnsCount) {
            // Destroy existing DataTable if exists
            if (detailTable) {
                detailTable.destroy();
                detailTable = null;
            }
            
            // Set title and subtitle
            $('#detail-table-title').text(title);
            $('#detail-table-subtitle').text(subtitle);
            
            // Clear and show loading
            $('#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>
            `);
            
            // Show the section
            if ($('#detail-table-section').is(':hidden')) {
                $('#detail-table-section').slideDown(300);
                
                // Scroll to detail table
                setTimeout(function() {
                    $('html, body').animate({
                        scrollTop: $('#detail-table-section').offset().top - 100
                    }, 500);
                }, 350);
            }
        }

        // ✅ FIXED: Function to show detail table
        function showDetailTable(title, subtitle, headers, data) {
            // Set title and subtitle
            $('#detail-table-title').text(title);
            $('#detail-table-subtitle').text(subtitle);
            
            // Destroy existing DataTable if exists
            if (detailTable) {
                detailTable.destroy();
                detailTable = null;
            }
            
            // Clear the table first
            $('#detail-table-head').empty();
            $('#detail-table-body').empty();
            
            // Build table headers
            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);
            
            // Build table body
            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);
            
            // Make sure section is visible
            if ($('#detail-table-section').is(':hidden')) {
                $('#detail-table-section').slideDown(300);
            }
            
            // ✅ WAIT for DOM to update, then initialize DataTable
            setTimeout(function() {
                // Initialize DataTable only if we have data
                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 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>
                    `);
                }
            });
        }

        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);
                    }
                }
            });

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

        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' }
            ];
            
            // ✅ Show loading state
            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>
                    `);
                }
            });
        }
        
        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' }
            ];
            
            // ✅ Show loading state
            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>
                    `);
                }
            });
        }
    </script>
@endsection