@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="row mx-1">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">Result {{ $title_menu }}</h5>
                        </div>
                        <hr class="horizontal dark mt-0">
                        <div class="row px-4 py-2">
                            <div class="col-lg">
                                <div class="nav-wrapper row">
                                    <div class="col">
                                        {{-- button back --}}
                                        <button class="btn btn-secondary mb-0"
                                            onclick="window.location='{{ url($url_menu . '/index') }}'">
                                            <i class="fas fa-circle-left me-1"></i>
                                            <span class="fw-bold">Kembali</span>
                                        </button>
                                    </div>
                                </div>
                                @if ($table_result)
                                    <div class="mt-3">
                                        <form action="{{ route('rpksth.excel') }}" method="POST" style="display: inline;">
                                            @csrf
                                            <input type="hidden" name="rpureq_year" value="{{ $tahun }}">

                                            @foreach ((array) $kategoriFilter as $kat)
                                                <input type="hidden" name="rp_kategori[]" value="{{ $kat }}">
                                            @endforeach

                                            {{-- NEW: apa saja kategori yang lagi “expanded” (JSON array of names) --}}
                                            <input type="hidden" name="expanded_categories" id="expandedCategoriesInput">

                                            {{-- NEW (opsional): mode export --}}
                                            <input type="hidden" name="export_mode" value="visible"> {{-- visible/all dsb --}}

                                            <button type="submit" class="btn btn-secondary btn-md">
                                                <i class="fas fa-file-excel text-success"></i> Excel
                                            </button>
                                        </form>

                                        <form action="{{ route('rpksth.cetakpdf') }}" method="POST"
                                            style="display: inline;">
                                            @csrf
                                            <input type="hidden" name="rpureq_year" value="{{ $tahun }}">

                                            @foreach ((array) $kategoriFilter as $kat)
                                                <input type="hidden" name="rp_kategori[]" value="{{ $kat }}">
                                            @endforeach

                                            <button type="submit" class="btn btn-secondary btn-md">
                                                <i class="fas fa-file-pdf text-danger"></i> PDF
                                            </button>
                                        </form>
                                    </div>
                                @endif
                            </div>
                        </div>

                        <div class="row px-4 py-2">
                            <div class="table-responsive">
                                <table
                                    class="table table-bordered table-striped table-hover table-sm align-middle text-nowrap"
                                    id="tabelKas" data-paging="false" data-filtering="false">
                                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th data-name="no" data-type="text">No</th>
                                            <th data-name="kategori" data-breakpoints="xs sm md" data-expandable="true">
                                                Kategori</th>
                                            @foreach ($bulanList as $bulan)
                                                <th data-name="{{ $bulan }}">{{ $bulan }}</th>
                                            @endforeach
                                            <th data-name="total">Total</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @php $kategoriIndex = 0; @endphp

                                        @foreach ($table_result as $row)
                                            @php
                                                $isJumlah = $row['kategori'] === 'Jumlah';
                                                $hasSub =
                                                    isset($row['subkategori']) &&
                                                    is_array($row['subkategori']) &&
                                                    count($row['subkategori']) > 0;
                                                $kategoriId = 'kategori_' . $kategoriIndex;
                                            @endphp

                                            @if (!$isJumlah)
                                                {{-- ROW KATEGORI --}}
                                                <tr class="row-kategori" data-target="{{ $kategoriId }}"
                                                    style="cursor: pointer;">
                                                    <td class="text-center">{{ $kategoriIndex + 1 }}</td>
                                                    <td>+ {{ $row['kategori'] }}</td>
                                                    @foreach ($bulanList as $bulan)
                                                        <td class="text-end">Rp
                                                            {{ number_format($row[$bulan], 0, ',', '.') }}</td>
                                                    @endforeach
                                                    <td class="text-end fw-bold">Rp
                                                        {{ number_format(array_sum(array_slice($row, 1, count($bulanList))), 0, ',', '.') }}
                                                    </td>
                                                </tr>

                                                {{-- ROW SUBKATEGORI --}}
                                                @if ($hasSub)
                                                    @foreach ($row['subkategori'] as $sub)
                                                        <tr class="row-subkategori {{ $kategoriId }} d-none">
                                                            <td class="text-center"></td>
                                                            <td class="text-start">– {{ $sub['nama'] }}</td>
                                                            @foreach ($bulanList as $bulan)
                                                                <td class="text-end">Rp
                                                                    {{ number_format($sub[$bulan], 0, ',', '.') }}</td>
                                                            @endforeach
                                                            <td class="text-end fw-bold">Rp
                                                                {{ number_format(array_sum(array_slice($sub, 1)), 0, ',', '.') }}
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                @endif

                                                @php $kategoriIndex++; @endphp
                                            @endif
                                        @endforeach
                                    </tbody>
                                    <tfoot>
                                        <!-- Baris Jumlah -->
                                        <tr style="background-color: #00b7bd4f;">
                                            <td class="text-center"></td>
                                            <td class="text-start">Jumlah</td>
                                            @foreach ($bulanList as $bulan)
                                                <td class="text-end">
                                                    Rp
                                                    {{ number_format($table_result[count($table_result) - 1][$bulan], 0, ',', '.') }}
                                                </td>
                                            @endforeach
                                            <td class="text-end fw-bold">
                                                @php
                                                    $jumlahRow = end($table_result);
                                                    $grandTotal = 0;
                                                    foreach ($bulanList as $bulan) {
                                                        $grandTotal += $jumlahRow[$bulan];
                                                    }
                                                @endphp
                                                Rp {{ number_format($grandTotal, 0, ',', '.') }}
                                            </td>
                                        </tr>

                                        <!-- Baris Persentase Kenaikan/Penurunan -->
                                        <tr style="background-color: #e8fafa;">
                                            <td class="text-center"></td>
                                            <td class="text-start">Kenaikan / Penurunan (%)</td>
                                            @php
                                                $jumlahRow = end($table_result);
                                                $prevValue = null;
                                            @endphp
                                            @foreach ($bulanList as $bulan)
                                                @php
                                                    $currentValue = $jumlahRow[$bulan];
                                                    if (is_null($prevValue)) {
                                                        $change = '-';
                                                    } else {
                                                        $change =
                                                            $prevValue == 0
                                                                ? '0'
                                                                : number_format(
                                                                        (($currentValue - $prevValue) / $prevValue) *
                                                                            100,
                                                                        2,
                                                                    ) . '%';
                                                    }
                                                    $prevValue = $currentValue;
                                                @endphp
                                                <td class="text-end text-muted">
                                                    {{ $change }}
                                                </td>
                                            @endforeach
                                            <td class="text-end fw-bold text-muted">—</td>
                                        </tr>
                                    </tfoot>
                                </table>

                            </div>
                        </div>

                        <div class="row px-4 py-2">
                            <div class="col-lg">
                                @if (!$table_result)
                                    <div class="nav-wrapper"><code>Data not found!</code></div>
                                @endif
                            </div>
                        </div>
                    </div> {{-- end card --}}
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid">
        <div class="row mx-1">
            <div class="card mt-3">
                <div class="card-header pb-0">
                    <h6>Grafik Batang {{ $title_menu }} Tahun {{ $tahun }}</h6>
                </div>
                <div class="card-body">
                    <canvas id="barChart"></canvas>
                </div>
            </div>
        </div>
    </div>
    {{-- check flag js on dmenu --}}
    @if ($jsmenu == '1')
        @if (view()->exists("js.{$dmenu}"))
            @push('addjs')
                {{-- file js in folder (resources/views/js) --}}
                @include('js.' . $dmenu);
            @endpush
        @else
            @push('addjs')
                <script>
                    Swal.fire({
                        title: 'JS Not Found!!',
                        text: 'Please Create File JS',
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                </script>
            @endpush
        @endif
    @endif
@endsection
@push('js')
    <style>
        .kategori-toggle {
            cursor: pointer;
        }

        .highlight-kategori {
            background-color: #fff3cd !important;
            /* kuning muda ala Bootstrap alert-warning */
        }

        .highlight-subkategori {
            background-color: #e8f5e9 !important;
            /* kuning lebih lembut */
        }
    </style>
    {{-- <script>
        $(document).ready(function() {
            $('.row-kategori').on('click', function() {
                const target = $(this).data('target');
                $('.' + target).toggleClass('d-none');

                // Ganti simbol + ↔ –
                const label = $(this).find('td:nth-child(2)');
                let text = label.text().trim();
                if (text.startsWith('+')) {
                    label.text(text.replace('+', '–'));
                } else {
                    label.text(text.replace('–', '+'));
                }
            });
        });
    </script> --}}

    {{-- <script>
        $(document).ready(function() {
            $('.row-kategori').on('click', function() {
                const target = $(this).data('target');

                // Toggle subkategori
                $('.' + target).toggleClass('d-none');

                // Toggle simbol + ↔ –
                const label = $(this).find('td:nth-child(2)');
                let text = label.text().trim();
                if (text.startsWith('+')) {
                    label.text(text.replace('+', '–'));
                } else {
                    label.text(text.replace('–', '+'));
                }

                // Tambahkan / hilangkan warna kuning
                $(this).toggleClass('highlight-kategori');
            });
        });
    </script> --}}

    <script>
        $(document).ready(function() {
            $('.row-kategori').on('click', function() {
                const target = $(this).data('target');

                // Toggle subkategori baris (tampilkan/sembunyikan)
                const subkategoriRows = $('.' + target);
                subkategoriRows.toggleClass('d-none');

                // Ubah simbol +/–
                const label = $(this).find('td:nth-child(2)');
                const text = label.text().trim();
                if (text.startsWith('+')) {
                    label.text(text.replace('+', '–'));
                } else {
                    label.text(text.replace('–', '+'));
                }

                // Toggle warna kategori
                $(this).toggleClass('highlight-kategori');

                // Toggle warna subkategori
                subkategoriRows.toggleClass('highlight-subkategori');
            });
        });
    </script>

    <canvas id="barChart"></canvas>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        const ctx = document.getElementById('barChart').getContext('2d');

        const bulanList = @json($bulanList);
        const kategoriList = @json(array_map(fn($row) => $row['kategori'], array_filter($table_result, fn($row) => $row['kategori'] !== 'Jumlah')));
        const tableResult = @json($table_result);

        const colors = ['#00b7bd', '#f8b400', '#f85f73', '#6a67ce', '#50c878', '#ffa07a', '#9370db', '#6495ed'];

        const datasets = kategoriList.flatMap((kategori, idx) => {
            const kategoriData = tableResult.find(r => r.kategori === kategori);
            const color = colors[idx % colors.length];

            const barDataset = {
                label: kategori,
                data: bulanList.map(bulan => kategoriData[bulan]),
                backgroundColor: color,
                borderColor: color,
                borderWidth: 1,
                type: 'bar',
                order: 2,
                kategoriKey: kategori,
                categoryPercentage: 0.8,
                barPercentage: 0.9
            };

            const lineDataset = {
                label: kategori + ' (line)',
                data: bulanList.map(bulan => kategoriData[bulan]),
                type: 'line',
                borderColor: color,
                backgroundColor: 'transparent',
                borderWidth: 2,
                tension: 0.4,
                pointBackgroundColor: color,
                fill: false,
                order: 1,
                kategoriKey: kategori
            };

            return [barDataset, lineDataset];
        });

        // Plugin untuk sinkronkan titik garis dengan bar
        const syncLineWithBars = {
            id: 'syncLineWithBars',
            afterDatasetsDraw(chart) {
                const metaSets = chart.getSortedVisibleDatasetMetas();

                metaSets.forEach((meta) => {
                    if (meta.type !== 'line') return;

                    const kategori = meta._dataset.kategoriKey;
                    const barMeta = metaSets.find(m => m._dataset.kategoriKey === kategori && m.type === 'bar');
                    if (!barMeta) return;

                    meta.data.forEach((point, index) => {
                        const bar = barMeta.data[index];
                        if (bar) {
                            point.x = bar.x;
                        }
                    });
                });
            }
        };

        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: bulanList,
                datasets: datasets
            },
            options: {
                responsive: true,
                interaction: {
                    mode: 'nearest',
                    axis: 'x',
                    intersect: true
                },
                plugins: {
                    tooltip: {
                        callbacks: {
                            label: function(ctx) {
                                const value = ctx.parsed.y;
                                if (value === 0) return null;
                                const label = ctx.dataset.label.replace(' (line)', '');
                                return `${label}: Rp ${value.toLocaleString('id-ID')}`;
                            }
                        }
                    },
                    legend: {
                        labels: {
                            filter: function(item, chart) {
                                // Sembunyikan label line dari legend
                                return !item.text.includes('(line)');
                            }
                        },
                        onClick: function(e, legendItem, legend) {
                            const chart = legend.chart;
                            const label = legendItem.text;
                            const barIndex = chart.data.datasets.findIndex(ds => ds.label === label);
                            const lineIndex = chart.data.datasets.findIndex(ds => ds.label === label +
                                ' (line)');

                            const metaBar = chart.getDatasetMeta(barIndex);
                            const metaLine = chart.getDatasetMeta(lineIndex);

                            metaBar.hidden = !metaBar.hidden;
                            metaLine.hidden = metaBar.hidden;

                            chart.update();
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            callback: function(value) {
                                return 'Rp ' + value.toLocaleString('id-ID');
                            }
                        }
                    }
                }
            },
            plugins: [syncLineWithBars]
        });
    </script>
@endpush