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

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <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">
                        <button class="btn btn-secondary mb-0" onclick="history.back()">
                            <i class="fas fa-circle-left me-1"></i>
                            <span class="font-weight-bold">Kembali</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Total per Label --}}
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-4">
                <div class="card overflow-auto">

                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <p class="text-uppercase text-sm mb-0">
                                Total {{ $title_menu }} per Label
                            </p>

                            {{-- Filter --}}
                            <form method="GET" class="d-flex gap-2 align-items-center">
                                <select name="period" id="period" class="form-select form-select-sm"
                                    style="min-width:160px" onchange="getyearmonth(this)">
                                    <option value="">All</option>
                                    @foreach ($periodList as $p)
                                        <option value="{{ $p->value }}"
                                            {{ request('period') === $p->value ? 'selected' : '' }}>
                                            {{ $p->label }}
                                        </option>
                                    @endforeach
                                </select>
                            </form>
                        </div>
                        <p></p>
                        <hr class="horizontal dark mt-0">
                        <div class="row">
                            <div class="table-responsive">
                                <table class="table table-hover" id="total-gr">
                                    <thead style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th scope="col">No</th>
                                            <th scope="col">Kategori</th>
                                            {{-- <th scope="col">Curr</th> --}}
                                            <th scope="col">Total</th>
                                        </tr>
                                    </thead>

                                    <tbody>
                                        <td></td>
                                        {{-- @php
                                            $totalall = 0;
                                            $ig = 1;
                                        @endphp
                                        @foreach ($grcurr as $gc)
                                            @php $totalall += $gc->total_currency; @endphp
                                            <tr>
                                                <td>{{ $ig++ }}</td>
                                                <td onclick="get_detail('{{ $gc->gl_Account }}')">{{ $gc->long_text }}
                                                </td>

                                                <td style="text-align: right">{{ number_format($gc->total_currency, 2) }}
                                                </td>
                                            </tr>
                                        @endforeach --}}
                                    </tbody>

                                    <tfoot>
                                        <tr>
                                            <th colspan="2">Total Biaya :</th>
                                            <th id="totalQty"></th>
                                        </tr>

                                    </tfoot>
                                </table>


                            </div>
                        </div>
                    </div>

                    <!-- Modal -->
                    {{-- <div class="modal fade" id="modalList" tabindex="-1" aria-labelledby="searchModalLabel"
                        aria-hidden="true">
                        <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered modal-lg" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="modal-item-tittle">List</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <table class="table table-hover" id="detail-list">
                                        <thead style="background-color: #00b7bd4f;">
                                            <tr>
                                                <th scope="col">No</th>
                                                <th scope="col">Posting Date</th>
                                                <th scope="col">Kategori</th>
                                                <th scope="col">Sub. Kategori</th>
                                                <th scope="col">Keterangan</th>
                                                <th scope="col">Biaya</th>
                                            </tr>
                                        </thead>

                                        <tbody>
                                            <td></td>
                                        </tbody>

                                    </table>

                                </div>
                            </div>
                        </div>
                    </div> --}}

                </div>
            </div>
            <div class="col-md-8">
                <div class="card overflow-auto">
                    <div class="card-body">
                        <p class="text-uppercase text-sm">Detail {{ $title_menu }} per Label</p>
                        <hr class="horizontal dark mt-0">
                        <h5 id="modal-item-title" class="mb-2" style="text-align: center"></h5>
                        <hr class="horizontal dark mt-0">
                        <div class="row">
                            <div class="table-responsive">
                                <div id="detail-loading" class="position-absolute top-0 start-0 w-100 h-100 d-none"
                                    style="background: rgba(255,255,255,.7); z-index: 5;">
                                    <div class="w-100 h-100 d-flex flex-column align-items-center justify-content-center">
                                        <div class="spinner-border" role="status" aria-hidden="true"></div>
                                        <div class="mt-2 small text-muted">Mengambil data…</div>
                                    </div>
                                </div>
                                <table class="table table-hover" id="detail-list">
                                    <thead style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th scope="col">No</th>
                                            <th scope="col">Posting Date</th>
                                            <th scope="col">Keterangan</th>
                                            <th scope="col">
                                                Kategori
                                            </th>
                                            <th scope="col">Sub. Kategori</th>
                                            <th scope="col">Label</th>

                                            <th scope="col">Biaya</th>
                                        </tr>
                                    </thead>

                                    <tbody>
                                        <td></td>
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <th colspan="6" class="text-end">Total</th>
                                            <th class="text-end"></th> <!-- diisi via footerCallback -->
                                        </tr>
                                    </tfoot>
                                </table>

                            </div>
                        </div>
                    </div>



                </div>
            </div>

        </div>
    </div>

    {{-- Summary per Bulan --}}
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card overflow-auto">

                    <div class="card-body">
                        <p class="text-uppercase text-sm">Summary {{ $title_menu }} per Bulan</p>
                        <hr class="horizontal dark mt-0">
                        <div class="row">
                            <div class="table-responsive">
                                <table class="table display table-hover table-bordered" id="tabel-sop">
                                    <thead style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th rowspan="2" class="align-middle text-center">Tahun</th>
                                            <th rowspan="2" class="align-middle text-center">Bulan</th>
                                            <th colspan="{{ count($label_gr) }}" class="text-center">Label</th>
                                            <th rowspan="2" class="align-middle text-center">Grand Total</th>
                                        </tr>
                                        <tr>
                                            @foreach ($label_gr as $lg)
                                                {{-- <th class="text-center">{{ $k->long_text }}</th>4 --}}
                                                <th class="text-center align-middle {{ $lg->value === $undefinedKey ? 'th-undefined' : '' }}"
                                                    style="white-space: normal; word-wrap: break-word; ">
                                                    {{ $lg->name }}
                                                </th>
                                            @endforeach
                                        </tr>
                                    </thead>

                                    <style>
                                        th.text-center {
                                            white-space: normal;
                                            /* Supaya teks bisa turun ke bawah */
                                            word-wrap: break-word;
                                            /* Memecah kata kalau kepanjangan */
                                            max-width: 250px;
                                            /* Batas maksimal lebar kolom */
                                        }
                                    </style>
                                    @php
                                        $rowspanCountsL = [];
                                        $totalPerKategoriL = [];
                                        $groupedRowsL = [];

                                        // Kelompokkan data berdasarkan tahun untuk rowspan
                                        foreach ($grcurmonthlabel as $rowL) {
                                            $year = $rowL['year'];
                                            $rowspanCountsL[$year] = ($rowspanCountsL[$year] ?? 0) + 1;
                                            $groupedRowsL[$year][] = $rowL;
                                        }

                                        $currentYear = now()->year;

                                        $yearColors = [
                                            '#f0f9ff', // biru muda
                                            '#fff7e6', // oranye muda
                                            '#ffe9e6', // peach pastel
                                            '#fef6ff', // ungu pastel
                                            '#fff0f6', // pink pastel
                                        ];

                                        $colorMap = [];
                                        $i = 0;

                                        foreach ($groupedRowsL as $year => $rows) {
                                            $colorMap[$year] =
                                                $year == $currentYear
                                                    ? '#d1fae5' // hijau muda untuk tahun sekarang
                                                    : $yearColors[$i++ % count($yearColors)];
                                        }

                                    @endphp

                                    {{-- Style untuk pewarnaan background per tahun --}}
                                    @php
                                        $dynamicStyle = '';
                                        foreach ($colorMap as $year => $color) {
                                            $dynamicStyle .= ".bg-tahun-{$year} td { background-color: {$color} !important; }\n";
                                        }

                                    @endphp

                                    <style>
                                        /* Kolom 'undefined' saja yang merah */
                                        thead th.th-undefined,
                                        tbody td.td-undefined,
                                        tfoot td.td-undefined {
                                            background-color: #ffe7e7 !important;
                                            color: #a40000;
                                        }
                                    </style>

                                    @foreach ($groupedRowsL as $year => $rowsL)
                                        <tbody id="group-{{ $year }}" class="bg-tahun-{{ $year }}">

                                            @php
                                                $rowspan = count($rowsL) + 1; // +1 untuk baris total
                                                $yearGrandTotal = 0;

                                                // hitung total poin per tahun
                                                foreach ($rowsL as $rl) {
                                                    foreach ($label_gr as $lg) {
                                                        $yearGrandTotal += $rl['items'][$lg->value] ?? 0;
                                                    }
                                                }
                                            @endphp

                                            @foreach ($rowsL as $index => $rowL)
                                                @php
                                                    $hasUndefinedInRow = ($rowL['items'][$undefinedKey] ?? 0) > 0;
                                                @endphp
                                                <tr
                                                    class="row-detail-{{ $year }} {{ $hasUndefinedInRow ? 'force-red' : '' }}">
                                                    @if ($index === 0)
                                                        {{-- Tahun di baris pertama pakai rowspan --}}
                                                        <td rowspan="{{ $rowspan }}"
                                                            class="align-middle text-center year-cell-{{ $year }}">
                                                            <div
                                                                class="d-flex align-items-center justify-content-center gap-2">
                                                                <i class="fas fa-minus-circle text-secondary"
                                                                    style="cursor: pointer; font-size: 14px;"
                                                                    onclick="toggleYear({{ $year }}, this)"
                                                                    title="Minimize/Maximize"></i>
                                                                <span style="font-size: 14px;">{{ $year }}</span>
                                                            </div>
                                                        </td>
                                                    @endif
                                                    <td class="text-center">
                                                        {{ \Carbon\Carbon::create()->month($rowL['month'])->translatedFormat('F') }}
                                                    </td>
                                                    @foreach ($label_gr as $lg)
                                                        @php
                                                            $val = $rowL['items'][$lg->value] ?? 0;
                                                            $totalPerKategoriL[$lg->value] =
                                                                ($totalPerKategoriL[$lg->value] ?? 0) + $val;
                                                        @endphp
                                                        <td
                                                            class="text-end {{ $lg->value === $undefinedKey ? 'td-undefined' : '' }}">
                                                            {{ number_format($val, 1) }}
                                                        </td>
                                                    @endforeach
                                                </tr>
                                            @endforeach


                                            {{-- Baris total + kolom tahun --}}

                                            <tr
                                                class="bg-light fw-bold border-top border-2 border-secondary-subtle total-row-{{ $year }}">
                                                <td class="text-end" style="border: 1px solid #dadada;">Total
                                                    {{ $year }} :</td>
                                                @foreach ($label_gr as $lg)
                                                    @php
                                                        $totalTahunPerKategori = 0;
                                                        foreach ($rowsL as $rl) {
                                                            $totalTahunPerKategori += $rl['items'][$lg->value] ?? 0;
                                                        }
                                                    @endphp
                                                    <td class="text-end" style="border: 1px solid #dadada;">
                                                        {{ number_format($totalTahunPerKategori, 1) }}
                                                    </td>
                                                @endforeach
                                            </tr>

                                        </tbody>
                                    @endforeach

                                    <tfoot>
                                        <tr>
                                            <td colspan="2" class="text-end fw-bold">Grand Total</td>
                                            @foreach ($label_gr as $lg)
                                                <td class="text-end fw-bold">
                                                    {{ number_format($totalPerKategoriL[$lg->value] ?? 0, 1) }}
                                                </td>
                                            @endforeach
                                            <td class="text-center fw-bold">
                                                {{ number_format(array_sum($totalPerKategoriL), 1) }}</td>
                                        </tr>
                                    </tfoot>
                                </table>


                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <br>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="row mx-1">
                    <div class="card">
                        <div class="card-header d-flex align-items-center justify-content-between">
                            <h5 class="mb-0">Chart</h5>

                        </div>
                        <hr class="horizontal dark mt-0">
                        <div id="chart-kat-month" style="height: 375px;">

                        </div>
                        <br>
                        <hr class="horizontal dark mt-0">
                        <br>
                        <div id="chart-kat-month-line" style="height: 375px;">

                        </div>


                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
        /* Teks yang bisa diklik */
        .clickable-text {
            display: inline-block;
            max-width: 250px;
            white-space: normal;
            overflow-wrap: anywhere;
            /* alternatif: word-break: break-word; */
            cursor: pointer;
            font-weight: 600;

            /* biru bootstrap */
            position: relative;
            transition: color .2s ease-in-out;
        }

        .clickable-text::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -2px;
            width: 0;
            height: 2px;
            background-color: currentColor;
            transition: width .2s ease-in-out;
        }

        .clickable-text:hover {
            color: #084298;
        }

        .clickable-text:hover::after {
            width: 100%;
        }

        /* Soft-danger untuk baris undefined di tabel #total-gr */
        #total-gr tbody tr.table-soft-danger>td {
            background: #f8d7da !important;
            /* soft red */

            /* teks tetap hitam */
        }

        #total-gr tbody tr.table-soft-danger>td * {
            color: #000 !important;
        }

        /* Saat hover (kalau tabel pakai .table-hover) */
        #total-gr.table-hover tbody tr.table-soft-danger:hover>td {
            background: #f5c2c7 !important;
            color: #000 !important;
        }

        #total-gr.table-hover tbody tr.table-soft-danger:hover>td * {
            color: #000 !important;
        }
    </style>



    <script>
        // optional: simpan XHR biar bisa dibatalkan jika klik cepat bertubi-tubi
        let _detailXHR = null;

        function showDetailLoading() {
            // overlay ON
            $('#detail-loading').removeClass('d-none');

            // tampilkan baris placeholder di tbody (cadangan kalau overlay tidak terlihat)
            const colSpan = $('#detail-list thead th').length || 6;
            $('#detail-list tbody').html(`
            <tr class="loading-row">
                <td colspan="${colSpan}" class="text-center py-4 text-muted">
                <div class="spinner-border spinner-border-sm me-2" role="status"></div>
                Memuat data...
                </td>
            </tr>
            `);
        }

        function hideDetailLoading() {
            $('#detail-loading').addClass('d-none');
        }

        function get_detail(kategori, text) {
            // Batalkan request sebelumnya jika masih jalan
            if (_detailXHR && _detailXHR.readyState !== 4) {
                _detailXHR.abort();
            }

            showDetailLoading();
            var yearmonth = document.getElementById('period').value;
            _detailXHR = $.ajax({
                url: "{{ URL::to('/') }}/trbigr/get_detail_label",
                type: "POST",
                dataType: "JSON",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    kategori: kategori,
                    yearmonth: yearmonth
                },
                success: function(response) {
                    // Title modal (kalau dipakai)

                    var modalTitle = document.getElementById('modal-item-title');
                    if (modalTitle) {
                        modalTitle.innerHTML = `
                                <div class="fw-bold">${text}</div>
                            `;
                    }

                    // Render tabel detail
                    refreshTableDetailList(response.data || []);

                    // Jika mau tampilkan modal, buka di sini:
                    // $('#modalList').modal('show');
                },
                error: function() {
                    const colSpan = $('#detail-list thead th').length || 6;
                    $('#detail-list tbody').html(`
                    <tr>
                        <td colspan="${colSpan}" class="text-center text-danger py-4">
                        Gagal mengambil data.
                        </td>
                    </tr>
                    `);
                    Swal.fire({
                        title: 'Sorry!',
                        text: 'Error Get data!',
                        icon: 'error',
                        confirmButtonColor: '#3085d6'
                    });
                },
                complete: function() {
                    hideDetailLoading();
                }
            });
        }

        window.onload = function() {
            document.getElementById('period').value = ''; // Pilih "All"
            getyearmonth(document.getElementById('period')); // Panggil fungsi dengan default
        };

        // console.log('echarts', window.echarts);
        $(document).ready(function() {
            $('#tabel-gr').DataTable({
                "language": {
                    "search": "Cari :",
                    "lengthMenu": "Tampilkan _MENU_ baris",
                    "zeroRecords": "Maaf - Data tidak ada",
                    "info": "Halaman _PAGE_ dari _PAGES_",
                    "infoEmpty": "Tidak ada data",
                    "infoFiltered": "(pencarian dari _MAX_ data)"
                },
                "destroy": true,
                ordering: true,
                responsive: true,
            });

            $('#tabel-monthly').DataTable({
                "language": {
                    "search": "Cari :",
                    "lengthMenu": "Tampilkan _MENU_ baris",
                    "zeroRecords": "Maaf - Data tidak ada",
                    "info": "Halaman _PAGE_ dari _PAGES_",
                    "infoEmpty": "Tidak ada data",
                    "infoFiltered": "(pencarian dari _MAX_ data)"
                },
                "destroy": true,
                ordering: true,
                responsive: true,
            });


            renderchartmonth();
            renderchartmonthline();
            const grcurmonth = @json($grcurmonthlabel);



        });


        function getyearmonth(yearmonth) {
            console.log('yearmonth', yearmonth.value);

            $.ajax({
                url: "{{ URL::to('/') }}/trbigr/get_detail_label",
                type: "POST",
                dataType: "JSON",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    yearmonth: yearmonth.value,
                },
                success: function(response) {
                    refreshTableKategori(response.kat);
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    // alert('Error Get data');
                    Swal.fire({
                        title: 'Sorry!',
                        text: 'Error Get data!',
                        icon: 'error',
                        confirmButtonColor: '#3085d6'
                    });
                }
            });

        }


        function refreshTableDetailList(list) {
            $('#detail-list').DataTable({
                "autoWidth": false,
                "destroy": true,
                "lengthChange": false,
                "searching": true,
                "paging": true,
                "info": false,
                "ordering": true,
                "data": list,
                "columns": [{
                    data: 'no',
                    render: function(data, type, row, meta) {
                        return meta.row + 1; // Menambahkan nomor urut berdasarkan indeks baris
                    }
                }, {
                    data: 'posting_date'
                }, {
                    data: 'text'
                }, {
                    data: 'long_text'
                }, {
                    data: 'sub_kategori',
                    render: function(data, type, row) {
                        if (data === 'aspro') {
                            return 'PROJECT';
                        } else if (data === 'asset') {
                            return 'ASSET';
                        } else {
                            return '-';
                        }
                    }
                }, {
                    data: 'label_name'
                }, {
                    data: 'currency_column_ksl',
                    className: 'text-end',
                    render: function(data, type, row) {
                        if (data == null || data === '') return '-';
                        return parseFloat(data).toLocaleString('en-US', {
                            minimumFractionDigits: 2,
                            maximumFractionDigits: 2
                        });
                    }
                }],
                "createdRow": function(row, data, dataIndex) {
                    // Misalnya field 'kategori' digunakan
                    $(row).attr('class', 'row-kategori');
                },
                "footerCallback": function(row, data, start, end, display) {
                    const api = this.api();

                    // helper parse angka dari string yang mungkin sudah diformat
                    const toNum = (v) => {
                        if (v == null || v === '') return 0;
                        if (typeof v === 'number') return v;
                        // hilangkan semua karakter kecuali digit, minus, titik
                        v = ('' + v).replace(/[^\d.-]/g, '');
                        const n = parseFloat(v);
                        return isNaN(n) ? 0 : n;
                    };

                    // kolom currency_column_ksl = index 6
                    const colIdx = 6;

                    // total semua data (bukan hanya halaman aktif)
                    const grandTotal = api
                        .column(colIdx)
                        .data()
                        .reduce((sum, v) => sum + toNum(v), 0);

                    // total halaman aktif saja (opsional, jika ingin tampilkan)
                    const pageTotal = api
                        .column(colIdx, {
                            page: 'current'
                        })
                        .data()
                        .reduce((sum, v) => sum + toNum(v), 0);

                    // tulis ke footer (pilih salah satu)
                    // Hanya grand total:
                    $(api.column(colIdx).footer()).html(
                        grandTotal.toLocaleString('en-US', {
                            minimumFractionDigits: 2,
                            maximumFractionDigits: 2
                        })
                    );
                }

            });
        }

        function refreshTableKategori(list) {
            $('#total-gr').DataTable({
                "autoWidth": false,
                "destroy": true,
                "lengthChange": false,
                "searching": true,
                "paging": true,
                "info": false,
                "ordering": false,
                "data": list,
                columns: [{
                        data: null,
                        render: (d, t, r, meta) => meta.row + 1
                    },

                    {
                        data: 'label_name',

                        render: function(data, type, row) {
                            const isUndef = !row?.labels || String(data ?? '').trim() === '';
                            const shown = isUndef ? 'Undefined' : data;

                            // amanin quotes untuk onclick
                            const encode = s => String(s ?? '').replace(/\\/g, '\\\\').replace(/'/g,
                                "\\'");
                            const katVal = encode(row?.labels);
                            const vallabel = encode(row?.label_name)
                            return `
                            <span class="clickable-text"
                                
                                title="${shown}"
                                onclick="get_detail('${katVal}', '${vallabel}')"
                            >${shown}</span>`;
                        }
                    },


                    {
                        data: 'total_currency',
                        className: 'text-end align-middle',
                        render: function(data) {
                            if (data == null || data === '') return '-';
                            return parseFloat(data).toLocaleString('en-US', {
                                minimumFractionDigits: 2,
                                maximumFractionDigits: 2
                            });
                        }
                    }
                ],
                rowCallback: function(row, data) {
                    const isUndef =
                        data?.labels == null ||
                        String(data.labels).trim() === '' ||
                        String(data.labels).toUpperCase() === '__UNDEFINED__' ||
                        String(data.label_name ?? '').trim() === '' ||
                        String(data.label_name ?? '').toLowerCase() === 'undefined';

                    $(row).toggleClass('table-soft-danger', isUndef);
                },

                "footerCallback": function(row, data, start, end, display) {
                    let api = this.api();

                    // Hitung total kolom total_currency
                    let total = api
                        .column(2, {
                            page: 'current'
                        }) // index kolom 2
                        .data()
                        .reduce((a, b) => {
                            let x = parseFloat(a) || 0;
                            let y = parseFloat(b) || 0;
                            return x + y;
                        }, 0);

                    // Tulis ke footer
                    $(api.column(2).footer()).html(
                        total.toLocaleString('en-US', {
                            minimumFractionDigits: 2,
                            maximumFractionDigits: 2
                        })
                    );
                }


            });
        }

        function get_detail(kategori, text) {

            // console.log('kategori', kategori);


            // ajax get packing data detail to database
            $.ajax({
                url: "{{ URL::to('/') }}/trbigr/get_detail_label",
                type: "POST",
                dataType: "JSON",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    kategori: kategori,
                },
                success: function(response) {
                    // Memperbarui tabel di modal dengan data yang diterima
                    // $('totalQty').text(number_format(totalqty, 0))

                    var modalTitle = document.getElementById('modal-item-title');
                    if (modalTitle) {
                        modalTitle.textContent = `${text}`; // Ganti teks dengan item
                    }
                    refreshTableDetailList(response.data);


                    // Menampilkan modal
                    // $('#modalList').modal('show');
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    // alert('Error Get data');
                    Swal.fire({
                        title: 'Sorry!',
                        text: 'Error Get data!',
                        icon: 'error',
                        confirmButtonColor: '#3085d6'
                    });
                }
            });
        }

        // function toggleYear(year, icon) {
        //     const rows = document.querySelectorAll(`.row-detail-${year}`);
        //     rows.forEach(row => row.classList.toggle('d-none'));
        //     let isHidden = false;

        //     rows.forEach(row => {
        //         const currentlyHidden = row.style.display === 'none';
        //         row.style.display = currentlyHidden ? '' : 'none';
        //         if (!currentlyHidden) isHidden = true;
        //     });

        //     // Ganti ikon: + saat di minimize, − saat normal
        //     if (icon) {
        //         icon.classList.remove('fa-minus-circle', 'fa-plus-circle');
        //         icon.classList.add(isHidden ? 'fa-plus-circle' : 'fa-minus-circle');
        //     }
        // }

        function toggleYear(year, el) {
            const rows = document.querySelectorAll(`.row-detail-${year}`);
            const totalRow = document.querySelector(`.total-row-${year}`);
            let yearCell = document.querySelector(`.year-cell-${year}`);
            const isHidden = el.classList.contains('fa-plus-circle');

            if (isHidden) {
                // Expand: tampilkan semua bulan
                rows.forEach(r => r.style.display = '');

                // kalau yearCell lagi di baris total → pindahkan balik ke baris pertama
                if (yearCell && totalRow.contains(yearCell)) {
                    rows[0].insertBefore(yearCell, rows[0].firstChild);
                    yearCell.rowSpan = rows.length + 1; // bulan + total
                }

                el.classList.remove('fa-plus-circle');
                el.classList.add('fa-minus-circle');
            } else {
                // Collapse: hide semua bulan
                rows.forEach(r => r.style.display = 'none');

                if (yearCell && rows[0].contains(yearCell)) {
                    totalRow.insertBefore(yearCell, totalRow.firstChild);
                    yearCell.rowSpan = 1; // reset rowspan supaya rapi
                }

                el.classList.remove('fa-minus-circle');
                el.classList.add('fa-plus-circle');
            }
        }



        function renderchartmonth() {
            const grcurmonth = @json($grcurmonthlabel);
            const kategoriLabelMap = @json($kategori);

            // Warna tetap per kategori
            const warnaKategori = {
                'PHONE/INTERNET/FAX': '#1E90FF',
                'ASSET TECHNICAL CLEARING': '#87CEFA',
                'OFFICE SUPPLIES': '#FF69B4',
                'ELECTRICITY INSTALLATIONS MAINTENANCES MATERIALS': '#40E0D0',
                'ADVERTISING & PROMOTION': '#FFB6C1',
                'OTHERS': '#32CD32',
                'RENT': '#FFD700',

            };


            const xAxis = [];
            const kategoriSet = new Set();
            const kategoriList = [];
            // Ambil semua bulan & kategori unik
            grcurmonth.forEach(row => {
                xAxis.push(`${row.year}-${String(row.month).padStart(2, '0')}`);
                Object.keys(row.items).forEach(katValue => {
                    if (!kategoriSet.has(katValue)) {
                        kategoriSet.add(katValue);
                        kategoriList.push(katValue); // simpan VALUE
                    }
                });
            });
            // Buat series per VALUE kategori
            const seriesMap = {};
            kategoriList.forEach(katValue => {
                const katName = kategoriLabelMap[katValue] || katValue; // tampilkan NAME
                seriesMap[katValue] = {
                    name: katName,
                    type: 'bar',
                    stack: 'total',
                    emphasis: {
                        focus: 'series'
                    },
                    itemStyle: {
                        // warna berdasarkan NAME
                        color: warnaKategori[katName] || undefined
                    },
                    data: []
                };
            });


            // Isi data
            grcurmonth.forEach(row => {
                kategoriList.forEach(katValue => {
                    const val = row.items[katValue] || 0;
                    seriesMap[katValue].data.push(parseFloat(Number(val).toFixed(2)));
                });
            });

            // Urutkan kategori berdasarkan total menurun
            const totalPerKategori = {};
            kategoriList.forEach(katValue => {
                totalPerKategori[katValue] = seriesMap[katValue].data.reduce((s, v) => s + v, 0);
            });
            kategoriList.sort((a, b) => totalPerKategori[b] - totalPerKategori[a]);

            // Susun legend (pakai NAME) & series
            const series = kategoriList.map(k => seriesMap[k]);
            const legendData = kategoriList.map(k => kategoriLabelMap[k] || k);

            const chartDom = document.getElementById('chart-kat-month');
            const myChart = echarts.init(chartDom);

            myChart.setOption({
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: legendData
                },
                xAxis: {
                    type: 'category',
                    data: xAxis
                },
                yAxis: {
                    type: 'value'
                },
                series
            });

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

        function renderchartmonthline() {
            const rawData = @json($grcurlinelabel); // <-- pakai variabel yang benar
            const kategoriLabelMap = @json($kategori); // map: value -> name

            const warnaKategori = {
                'PHONE/INTERNET/FAX': '#1E90FF',
                'ASSET TECHNICAL CLEARING': '#87CEFA',
                'OFFICE SUPPLIES': '#FF69B4',
                'ELECTRICITY INSTALLATIONS MAINTENANCES MATERIALS': '#40E0D0',
                'ADVERTISING & PROMOTION': '#FFB6C1',
                'OTHERS': '#32CD32',
                'RENT': '#FFD700',
                'undefined': '#ff8a8a',
            };

            // Kategori & bulan unik
            const kategoriSet = new Set();
            const bulanSet = new Set();
            rawData.forEach(row => {
                kategoriSet.add(row.kategori); // VALUE
                bulanSet.add(row.bulan);
            });
            const kategoriList = Array.from(kategoriSet);
            const bulanList = Array.from(bulanSet).sort();

            // Series per VALUE
            const seriesMap = {};
            kategoriList.forEach(katValue => {
                const katName = kategoriLabelMap[katValue] || katValue;
                seriesMap[katValue] = {
                    name: katName,
                    type: 'line',
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: 6,
                    itemStyle: {
                        color: warnaKategori[katName] || undefined // warna by NAME
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: []
                };
            });

            // Isi data (0 jika kosong)
            bulanList.forEach(bulan => {
                kategoriList.forEach(katValue => {
                    const entry = rawData.find(r => r.bulan === bulan && r.kategori === katValue);
                    seriesMap[katValue].data.push(entry ? parseFloat(Number(entry.poin).toFixed(2)) :
                        0);
                });
            });

            // Urutkan kategori by total
            const totalPerKategori = {};
            kategoriList.forEach(katValue => {
                totalPerKategori[katValue] = seriesMap[katValue].data.reduce((sum, v) => sum + v, 0);
            });
            kategoriList.sort((a, b) => totalPerKategori[b] - totalPerKategori[a]);

            const series = kategoriList.map(k => seriesMap[k]);
            const legendData = kategoriList.map(k => kategoriLabelMap[k] || k);

            const chartDom = document.getElementById('chart-kat-month-line');
            const myChart = echarts.init(chartDom);
            myChart.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    data: legendData
                },
                xAxis: {
                    type: 'category',
                    data: bulanList
                },
                yAxis: {
                    type: 'value'
                },
                series
            });
            window.addEventListener('resize', () => myChart.resize());
        }
    </script>
@endsection