@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @if (empty($selected_detail_month))
        @include('layouts.navbars.auth.topnav', ['title' => ''])
    @endif
    <div class="container-fluid py-4">
        <div class="card mb-4">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Komposisi Dibiayakan Berdasarkan Divisi</h5>

                @if (!empty($selected_detail_month))
                    <h6 class="text-primary mb-0">
                        Data Bulan:
                        <span class="fw-bold">
                            {{ \Carbon\Carbon::createFromFormat('Y-m', $selected_detail_month)->translatedFormat('F Y') }}
                        </span>
                    </h6>
                @endif
            </div>
            <div class="card-body row">
                <div class="col-md-6">
                    <div id="zrawPieChart" class="w-100" style="height: 400px;"></div>
                </div>
                <div class="col-md-6">
                    <div class="card-body table-responsive">
                        <table class="table table-sm table-bordered table-hover">
                            <thead class="text-center" style="background-color: #b8ecec">
                                <tr>
                                    <th>Divisi</th>
                                    <th class="text-center">Curr</th>
                                    <th class="text-end">Total</th>
                                </tr>
                            </thead>
                            <tbody>
                                @php $grandTotal = 0; @endphp
                                @foreach ($zrawByMatkl as $divisi => $items)
                                    @php
                                        $divisiId = Str::slug($divisi ?? 'Unknown', '_');
                                        $divisiTotal = $items->sum('total_value');
                                        $grandTotal += $divisiTotal;
                                    @endphp
                                    <tr class="collapse-toggle" data-bs-toggle="collapse"
                                        data-bs-target="#collapse-{{ $divisiId }}" style="cursor: pointer;">
                                        <td>
                                            <strong>{{ $divisi ?? 'Tidak Diketahui' }}</strong>
                                            <small class="text-muted">({{ $items->count() }} item)</small>
                                        </td>
                                        <td class="text-center fw-bold">IDR</td>
                                        <td class="text-end fw-bold">{{ number_format($divisiTotal) }}</td>
                                    </tr>
                                    <tr>
                                        <td colspan="3" class="p-0 border-0">
                                            <div id="collapse-{{ $divisiId }}"
                                                class="accordion-collapse collapse collapse-wrapper bg-light" style="max-height: 400px; overflow-y: auto;">
                                                <table class="table table-sm mb-0 table-hover">
                                                    <tbody>
                                                        @foreach ($items as $row)
                                                            <tr>
                                                                <td class="ps-4 text-primary">-
                                                                    {{ $row->SHORT_TEXT ?? '-' }}
                                                                </td>
                                                                <td class="text-end">{{ number_format($row->total_value) }}
                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                                <tr style="background-color: #e3f7f7; font-weight: bold;">
                                    <td>TOTAL</td>
                                    <td class="text-center">IDR</td>
                                    <td class="text-end">{{ number_format($grandTotal) }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">Dibiayakan - Grafik Nilai per Bulan</h5>
            </div>
            <div class="card-body">
                <div id="divisiBarChart" style="height: 400px;"></div>
            </div>
        </div>

        {{-- CARD 2: Summary Bulanan --}}
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">Summary Dibiayakan -
                    {{ \Carbon\Carbon::createFromFormat('Ym', $yearMonth)->format('Y') }}</h5>
            </div>
            <div class="card-body table-responsive">
                <div class="table-freeze-wrapper">
                    <table class="table table-bordered table-sm mb-0 table-freeze-1 table-sticky-header table-hover">
                        <thead class="text-center">
                            <tr>
                                <th>Divisi</th>
                                <th>Curr</th>
                                @foreach ($months as $m)
                                    <th class="text-center"
                                        @if ($m == $yearMonth) style="background-color: #439A97; color: white;" @endif>
                                        {{ \Carbon\Carbon::createFromFormat('Ymd', $m . '01')->translatedFormat('F Y') }}
                                    </th>
                                @endforeach
                                <th class="text-center">Total YTD</th> {{-- 🔹 Tambahan --}}
                                <th class="text-center">AVG YTD</th> {{-- 🔹 Tambahan --}}
                                <th class="text-center">Total {{ $yearPrev }}</th>
                                <th class="text-center">Ratio YTD</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php
                                $grandTotals = [];
                                $grandTotalPrev = 0;
                                $grandTotalAktif = 0;
                            @endphp

                            @foreach ($monthlySummary as $divisi => $monthValues)
                                @continue(str_contains($divisi, '__DETAIL'))

                                @php
                                    $excludedDivisi = [
                                        'Stock Gudang Supporting',
                                        'Stock Gudang Packaging',
                                        'Stock Gudang Raw Material',
                                    ];

                                    if (in_array($divisi, $excludedDivisi)) {
                                        continue;
                                    }

                                    $totalAktif = collect($monthValues)
                                        ->filter(fn($v, $key) => $key <= $yearMonth)
                                        ->map(fn($v) => (float) $v)
                                        ->sum();

                                    $monthsYTD = collect($months)->filter(fn($m) => $m <= $yearMonth)->count();
                                    $avgYTD = $monthsYTD > 0 ? $totalAktif / $monthsYTD : 0;

                                    $totalSebelumnya = $prevYearData[$divisi] ?? 0;
                                    $ratio = $totalSebelumnya > 0 ? ($totalAktif / $totalSebelumnya) * 100 : null;

                                    // Total keseluruhan
                                    foreach ($months as $m) {
                                        $grandTotals[$m] = ($grandTotals[$m] ?? 0) + ($monthValues[$m] ?? 0);
                                    }
                                    $grandTotalPrev += $totalSebelumnya;
                                    $grandTotalAktif += $totalAktif;

                                    $groupId = Str::slug($divisi);
                                    $hasDetail = isset($monthlySummary[$divisi . '__DETAIL']);
                                @endphp

                                {{-- ROW UTAMA --}}
                                <tr
                                    @if ($hasDetail) class="cursor-pointer toggle-detail" data-target="{{ $groupId }}" @endif>
                                    <td class="fw-bold">
                                        {{ $divisi }}
                                    </td>
                                    <td class="text-center">IDR</td>
                                    @foreach ($months as $m)
                                        <td class="text-end @if ($m == $yearMonth) fw-bold @endif"
                                            @if ($m == $yearMonth) style="background-color: #FDFAF6;" @endif>
                                            {{ number_format($monthValues[$m] ?? 0) }}
                                        </td>
                                    @endforeach
                                    <td class="text-end">{{ number_format($totalAktif) }}</td>
                                    <td class="text-end">{{ number_format($avgYTD, 0) }}</td>
                                    <td class="text-end">{{ number_format($totalSebelumnya) }}</td>
                                    <td class="text-end">{{ $ratio !== null ? number_format($ratio, 2) . '%' : '-' }}</td>
                                </tr>

                                {{-- ROW DETAIL --}}
                                @if ($hasDetail)
                                    @foreach ($monthlySummary[$divisi . '__DETAIL'] as $childDiv => $childVals)
                                        @php
                                            $childPrev = $prevYearData[$divisi . '__DETAIL'][$childDiv] ?? 0;
                                            $childAktif = collect($childVals)
                                                ->filter(fn($v, $k) => $k <= $yearMonth)
                                                ->sum();
                                            $childMonthsYTD = collect($months)
                                                ->filter(fn($m) => $m <= $yearMonth)
                                                ->count();
                                            $childAvgYTD = $childMonthsYTD > 0 ? $childAktif / $childMonthsYTD : 0;
                                            $childRatio = $childPrev > 0 ? ($childAktif / $childPrev) * 100 : null;
                                        @endphp
                                        <tr class="detail-row d-none bg-light detail-{{ $groupId }}">
                                            <td class="ps-4">{{ $childDiv }}</td>
                                            <td class="text-center">IDR</td>
                                            @foreach ($months as $m)
                                                <td class="text-end">{{ number_format($childVals[$m] ?? 0) }}</td>
                                            @endforeach
                                            <td class="text-end fw-bold">{{ number_format($childAktif) }}</td>
                                            {{-- 🔹 Total YTD --}}
                                            <td class="text-end">{{ number_format($childAvgYTD, 0) }}</td>
                                            {{-- 🔹 AVG YTD --}}
                                            <td class="text-end">{{ number_format($childPrev) }}</td>
                                            <td class="text-end">
                                                {{ $childRatio !== null ? number_format($childRatio, 2) . '%' : '-' }}
                                            </td>
                                        </tr>
                                    @endforeach
                                @endif
                            @endforeach

                            {{-- TOTAL --}}
                            @php
                                $monthsYTD = collect($months)->filter(fn($m) => $m <= $yearMonth)->count();
                                $grandAvgYTD = $monthsYTD > 0 ? $grandTotalAktif / $monthsYTD : 0;

                                $grandRatioYTD =
                                    $grandTotalPrev > 0
                                        ? number_format(($grandTotalAktif / $grandTotalPrev) * 100, 2) . '%'
                                        : '-';
                            @endphp

                            <tr style="background-color: #e3f7f7; font-weight: bold;">
                                <td class="text-start">TOTAL</td>
                                <td class="text-center">IDR</td>
                                @foreach ($months as $m)
                                    <td class="text-end">{{ number_format($grandTotals[$m] ?? 0) }}</td>
                                @endforeach
                                <td class="text-end">{{ number_format($grandTotalAktif) }}</td> {{-- 🔹 Total YTD --}}
                                <td class="text-end">{{ number_format($grandAvgYTD, 0) }}</td> {{-- 🔹 AVG YTD --}}
                                <td class="text-end">{{ number_format($grandTotalPrev) }}</td>
                                <td class="text-end">{{ $grandRatioYTD }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="card mb-3">
            <div class="card-header">
                <h5 class="mb-0">HR & GA - Per Kategori</h5>
            </div>
            <div class="card-body table-responsive">
                <div class="table-freeze-wrapper">
                    <table class="table table-bordered table-sm mb-0 table-freeze-1 table-sticky-header table-hover">
                        <thead class="text-center">
                            <tr>
                                <th class="text-uppercase">Kategori</th>
                                <th class="text-uppercase">AVG {{ $yearPrev }}</th>
                                @foreach ($months as $month)
                                    <th
                                        @if ($month == $yearMonth) style="background-color: #439A97; color: white;" @endif>
                                        {{ \Carbon\Carbon::createFromFormat('Ymd', $month . '01')->translatedFormat('F Y') }}
                                    </th>
                                @endforeach
                            </tr>
                        </thead>
                        <tbody>
                            @php
                                $totalAvg = 0;
                                $totalPerMonth = array_fill_keys($months, 0);
                            @endphp

                            @foreach ($pivot as $kategori => $values)
                                @php
                                    $totalAvg += $avg[$kategori] ?? 0;
                                    foreach ($months as $month) {
                                        $totalPerMonth[$month] += $values[$month] ?? 0;
                                    }
                                @endphp
                                <tr>
                                    <td class="text-start">{{ $kategori }}</td>
                                    <td class="text-end">{{ number_format($avg[$kategori] ?? 0, 0) }}</td>
                                    @foreach ($months as $month)
                                        <td class="text-end @if ($month == $yearMonth) fw-bold @endif"
                                            @if ($month == $yearMonth) style="background-color: #FDFAF6;" @endif>
                                            {{ number_format($values[$month] ?? 0, 0) }}
                                        </td>
                                    @endforeach
                                </tr>
                            @endforeach

                            {{-- Row Total --}}
                            <tr style="background-color: #e3f7f7; font-weight: bold;">
                                <td class="text-start">TOTAL</td>
                                <td class="text-end">{{ number_format($totalAvg, 0) }}</td>
                                @foreach ($months as $month)
                                    <td class="text-end">
                                        {{ number_format($totalPerMonth[$month] ?? 0, 0) }}
                                    </td>
                                @endforeach
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="row mb-2">
            <div class="col-md-6">
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">Dibiayakan Full Data
                            ({{ \Carbon\Carbon::createFromFormat('Ymd', $yearMonth . '01')->format('F Y') }})</h5>
                    </div>
                    <div class="card-body p-3">
                        <div class="card-body table-responsive" style="max-height: 600px; overflow-y: auto;">
                            <table class="table table-sm table-bordered mb-0 table-hover">
                                <thead class="text-center" style="background-color: #b8ecec">
                                    <tr>
                                        <th>Kategori</th>
                                        <th class="text-center">Curr</th>
                                        <th class="text-end">Total</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php
                                        $grandTotal = 0;
                                        $topDivisi = $dibiayakanFullData->take(5);
                                        $moreDivisi = $dibiayakanFullData->slice(5);
                                    @endphp

                                    @foreach ($topDivisi as $divisi => $items)
                                        @php
                                            $divisiId = 'top-' . Str::slug($divisi ?? 'Unknown', '_');
                                            $divisiTotal = $items->sum('total_value');
                                            $grandTotal += $divisiTotal;
                                        @endphp

                                        <tr data-bs-toggle="collapse" data-bs-target="#collapse-{{ $divisiId }}"
                                            aria-expanded="false" aria-controls="collapse-{{ $divisiId }}"
                                            style="cursor: pointer;">
                                            <td>
                                                <strong>{{ $divisi ?? 'Tidak Diketahui' }}</strong>
                                                <small class="text-muted">({{ $items->count() }} item)</small>
                                            </td>
                                            <td class="text-center fw-bold">IDR</td>
                                            <td class="text-end fw-bold">{{ number_format($divisiTotal) }}</td>
                                        </tr>
                                        <tr>
                                            <td colspan="3" class="p-0 border-0">
                                                <div id="collapse-{{ $divisiId }}"
                                                    class="accordion-collapse collapse bg-light">
                                                    <table class="table table-sm mb-0 table-hover">
                                                        <tbody>
                                                            @foreach ($items as $row)
                                                                <tr>
                                                                    <td class="ps-4 text-primary">-
                                                                        {{ $row->SHORT_TEXT ?? '-' }}</td>
                                                                    <td class="text-end">
                                                                        {{ number_format($row->total_value) }}
                                                                    </td>
                                                                </tr>
                                                            @endforeach
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach

                                    @if ($moreDivisi->count())
                                        <tr>
                                            <td colspan="3" class="text-center">
                                                <button class="btn btn-sm btn-outline-secondary" type="button"
                                                    data-bs-toggle="collapse" data-bs-target="#moreDivisions"
                                                    aria-expanded="false" aria-controls="moreDivisions">
                                                    Tampilkan {{ $moreDivisi->count() }} lainnya...
                                                </button>
                                            </td>
                                        </tr>
                                    @endif
                                </tbody>

                                @if ($moreDivisi->count())
                                    <tbody id="moreDivisions" class="collapse">
                                        @foreach ($moreDivisi as $divisi => $items)
                                            @php
                                                $divisiId = 'more-' . Str::slug($divisi ?? 'Unknown', '_');
                                                $divisiTotal = $items->sum('total_value');
                                                $grandTotal += $divisiTotal;
                                            @endphp

                                            <tr data-bs-toggle="collapse" data-bs-target="#collapse-{{ $divisiId }}"
                                                aria-expanded="false" aria-controls="collapse-{{ $divisiId }}"
                                                style="cursor: pointer;">
                                                <td>
                                                    <strong>{{ $divisi ?? 'Tidak Diketahui' }}</strong>
                                                    <small class="text-muted">({{ $items->count() }} item)</small>
                                                </td>
                                                <td class="text-center fw-bold">IDR</td>
                                                <td class="text-end fw-bold">{{ number_format($divisiTotal) }}</td>
                                            </tr>
                                            <tr>
                                                <td colspan="3" class="p-0 border-0">
                                                    <div id="collapse-{{ $divisiId }}"
                                                        class="accordion-collapse collapse bg-light">
                                                        <table class="table table-sm mb-0 table-hover">
                                                            <tbody>
                                                                @foreach ($items as $row)
                                                                    <tr>
                                                                        <td class="ps-4 text-primary">-
                                                                            {{ $row->SHORT_TEXT ?? '-' }}</td>
                                                                        <td class="text-end">
                                                                            {{ number_format($row->total_value) }}</td>
                                                                    </tr>
                                                                @endforeach
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                @endif

                                <tfoot>
                                    <tr style="background-color: #e3f7f7; font-weight: bold;">
                                        <td>TOTAL</td>
                                        <td class="text-center">IDR</td>
                                        <td class="text-end">{{ number_format($grandTotal) }}</td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">HR & GA Full Data
                            ({{ \Carbon\Carbon::createFromFormat('Ymd', $yearMonth . '01')->format('F Y') }})</h5>
                    </div>
                    <div class="card-body p-3">
                        <div class="card-body table-responsive" style="max-height: 600px; overflow-y: auto;">
                            <table class="table table-sm table-bordered mb-0 table-hover">
                                <thead class="text-center" style="background-color: #b8ecec">
                                    <tr>
                                        <th>Kategori</th>
                                        <th class="text-center">Curr</th>
                                        <th class="text-end">Total</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php
                                        $grandTotal = 0;
                                        $topDivisi = $hrgaFullData->take(5);
                                        $moreDivisi = $hrgaFullData->slice(5);
                                    @endphp

                                    @foreach ($topDivisi as $divisi => $items)
                                        @php
                                            $divisiId = 'hrga-top-' . Str::slug($divisi ?? 'Unknown', '_');
                                            $divisiTotal = $items->sum('total_value');
                                            $grandTotal += $divisiTotal;
                                        @endphp

                                        <tr data-bs-toggle="collapse" data-bs-target="#collapse-{{ $divisiId }}"
                                            aria-expanded="false" aria-controls="collapse-{{ $divisiId }}"
                                            style="cursor: pointer;">
                                            <td>
                                                <strong>{{ $divisi ?? 'Tidak Diketahui' }}</strong>
                                                <small class="text-muted">({{ $items->count() }} item)</small>
                                            </td>
                                            <td class="text-center fw-bold">IDR</td>
                                            <td class="text-end fw-bold">{{ number_format($divisiTotal) }}</td>
                                        </tr>
                                        <tr>
                                            <td colspan="3" class="p-0 border-0">
                                                <div id="collapse-{{ $divisiId }}"
                                                    class="accordion-collapse collapse bg-light">
                                                    <table class="table table-sm mb-0 table-hover">
                                                        <tbody>
                                                            @foreach ($items as $row)
                                                                <tr>
                                                                    <td class="ps-4 text-primary">-
                                                                        {{ $row->SHORT_TEXT ?? '-' }}</td>
                                                                    <td class="text-end">
                                                                        {{ number_format($row->total_value) }}</td>
                                                                </tr>
                                                            @endforeach
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach

                                    @if ($moreDivisi->count())
                                        <tr>
                                            <td colspan="3" class="text-center">
                                                <button class="btn btn-sm btn-outline-secondary" type="button"
                                                    data-bs-toggle="collapse" data-bs-target="#hrgaMoreDivisions"
                                                    aria-expanded="false" aria-controls="hrgaMoreDivisions">
                                                    Tampilkan {{ $moreDivisi->count() }} lainnya...
                                                </button>
                                            </td>
                                        </tr>
                                    @endif
                                </tbody>

                                @if ($moreDivisi->count())
                                    <tbody id="hrgaMoreDivisions" class="collapse">
                                        @foreach ($moreDivisi as $divisi => $items)
                                            @php
                                                $divisiId = 'hrga-more-' . Str::slug($divisi ?? 'Unknown', '_');
                                                $divisiTotal = $items->sum('total_value');
                                                $grandTotal += $divisiTotal;
                                            @endphp

                                            <tr data-bs-toggle="collapse" data-bs-target="#collapse-{{ $divisiId }}"
                                                aria-expanded="false" aria-controls="collapse-{{ $divisiId }}"
                                                style="cursor: pointer;">
                                                <td>
                                                    <strong>{{ $divisi ?? 'Tidak Diketahui' }}</strong>
                                                    <small class="text-muted">({{ $items->count() }} item)</small>
                                                </td>
                                                <td class="text-center fw-bold">IDR</td>
                                                <td class="text-end fw-bold">{{ number_format($divisiTotal) }}</td>
                                            </tr>
                                            <tr>
                                                <td colspan="3" class="p-0 border-0">
                                                    <div id="collapse-{{ $divisiId }}"
                                                        class="accordion-collapse collapse bg-light">
                                                        <table class="table table-sm mb-0 table-hover">
                                                            <tbody>
                                                                @foreach ($items as $row)
                                                                    <tr>
                                                                        <td class="ps-4 text-primary">-
                                                                            {{ $row->SHORT_TEXT ?? '-' }}</td>
                                                                        <td class="text-end">
                                                                            {{ number_format($row->total_value) }}</td>
                                                                    </tr>
                                                                @endforeach
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                @endif

                                <tfoot>
                                    <tr style="background-color: #e3f7f7; font-weight: bold;">
                                        <td>TOTAL</td>
                                        <td class="text-center">IDR</td>
                                        <td class="text-end">{{ number_format($grandTotal) }}</td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('js')
    <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const chartDom = document.getElementById('zrawPieChart');
            const myChart = echarts.init(chartDom);
            const option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [{
                    name: 'KSL',
                    type: 'pie',
                    radius: '60%',
                    label: {
                        show: false
                    },
                    data: [
                        @foreach ($zrawByMatkl as $matkl => $group)
                            {
                                value: {{ $group->sum('total_value') }},
                                name: {!! json_encode($matkl) !!}
                            },
                        @endforeach
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }]
            };
            myChart.setOption(option);
            window.addEventListener('resize', () => myChart.resize());
        });
        document.querySelectorAll('.toggle-row').forEach(row => {
            row.addEventListener('click', function() {
                const icon = this.querySelector('.toggle-icon');
                const targetId = this.getAttribute('data-bs-target');
                const target = document.querySelector(targetId);

                if (icon && target) {
                    const isOpen = target.classList.contains('show');
                    // Delay agar toggle sinkron dengan animasi
                    setTimeout(() => {
                        icon.classList.toggle('fa-chevron-right', isOpen);
                        icon.classList.toggle('fa-chevron-down', !isOpen);
                    }, 150);
                }
            });
        });
        document.addEventListener("DOMContentLoaded", function() {
            const chartDivisions = {!! json_encode($chartDivisions) !!};
            const chartSeries = {!! json_encode($chartSeries) !!};

            const chart = echarts.init(document.getElementById('divisiBarChart'));

            const option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    top: 10,
                    type: 'scroll',
                    formatter: function(name) {
                        const textarea = document.createElement("textarea");
                        textarea.innerHTML = name;
                        return textarea.value;
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '5%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: chartDivisions,
                    axisLabel: {
                        rotate: 20,
                        formatter: function(value) {
                            const textarea = document.createElement("textarea");
                            textarea.innerHTML = value;
                            return textarea.value;
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    name: 'Total'
                },
                series: chartSeries
            };

            chart.setOption(option);
            window.addEventListener('resize', () => {
                chart.resize();
            });
        });
        document.querySelectorAll('.toggle-row').forEach(row => {
            row.addEventListener('click', function() {
                const icon = this.querySelector('.toggle-icon');
                const targetId = this.getAttribute('data-bs-target');
                const target = document.querySelector(targetId);

                if (icon && target) {
                    const isOpen = target.classList.contains('show');
                    // Delay agar toggle sinkron dengan animasi
                    setTimeout(() => {
                        icon.classList.toggle('fa-chevron-right', isOpen);
                        icon.classList.toggle('fa-chevron-down', !isOpen);
                    }, 150);
                }
            });
        });

        document.querySelectorAll('.toggle-detail').forEach(row => {
            row.addEventListener('click', function() {
                const group = this.dataset.target;
                const icon = document.getElementById('icon-' + group);
                const rows = document.querySelectorAll('.detail-' + group);

                rows.forEach(r => r.classList.toggle('d-none'));
                icon?.classList.toggle('rotate-90');
            });
        });
    </script>
@endpush