@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>

    <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">List Detail {{ $title_menu }}</p>
                        <hr class="horizontal dark mt-0">
                        <div class="row">
                            <div class="table-responsive">
                                {{-- <div class="align-items-center">
                                    <div id="tabel-prefentive_length"></div> <!-- DataTables control -->
                                    <button class="btn btn-primary printAll" id="printform">
                                        <i class="fa fa-print"></i> Print Form
                                    </button>
                                </div> --}}

                                <table class="table table-hover" id="tabel-gr">
                                    <thead style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th scope="col">No</th>
                                            <th scope="col">No. PR</th>
                                            <th scope="col">Posting Date</th>
                                            <th scope="col">No Asset</th>
                                            <th scope="col">Nama Barang</th>
                                            <th scope="col">Kategori</th>
                                            <th scope="col">Desc Kategori</th>
                                            <th scope="col">Qty. PO</th>
                                            <th scope="col">Qty. GR</th>
                                            <th scope="col">Curr</th>
                                            <th scope="col">Nominal</th>
                                        </tr>
                                    </thead>

                                    <tbody>
                                        @php
                                            $totalCurrency = 0;
                                            $i = 1;
                                        @endphp
                                        @foreach ($gr as $g)
                                            @php $totalCurrency += $g->currency_column_ksl; @endphp
                                            <tr>
                                                <td>{{ $i++ }}</td>
                                                <td>{{ $g->purchase_req }}</td>
                                                <td>{{ $g->posting_date }}</td>
                                                <td>{{ $g->asset }}</td>
                                                <td>{{ $g->text }}</td>
                                                <td>{{ $g->long_text }}</td>
                                                <td>{{ $g->description }}</td>
                                                <td>{{ $g->po_qty }}</td>
                                                <td>{{ $g->qty_gr }}</td>
                                                <td>{{ $g->currency }}</td>
                                                <td style="text-align: right">
                                                    {{ number_format($g->currency_column_ksl, 2) }}
                                                </td>
                                            </tr>
                                        @endforeach
                                        {{-- Jangan pakai colspan di tbody. Biarkan kosong saat tidak ada data --}}
                                    </tbody>

                                    <tfoot>
                                        <tr>
                                            <th colspan="8" class="text-end">Total</th>
                                            <th style="text-align: right">{{ number_format($totalCurrency, 2) }}</th>
                                        </tr>
                                    </tfoot>
                                </table>


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

    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-6">
                <div class="card overflow-auto">

                    <div class="card-body">
                        <p class="text-uppercase text-sm">Total {{ $title_menu }} per kategori</p>
                        <hr class="horizontal dark mt-0">
                        <div class="row">
                            <div class="table-responsive">
                                {{-- <div class="align-items-center">
                                    <div id="tabel-prefentive_length"></div> <!-- DataTables control -->
                                    <button class="btn btn-primary printAll" id="printform">
                                        <i class="fa fa-print"></i> Print Form
                                    </button>
                                </div> --}}

                                <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>
                                        @php
                                            $totalall = 0;
                                            $ig = 1;
                                        @endphp
                                        @foreach ($grcurr as $gc)
                                            @php $totalall += $gc->total_currency; @endphp
                                            <tr>
                                                <td>{{ $ig++ }}</td>
                                                <td>{{ $gc->long_text }}</td>

                                                <td style="text-align: right">{{ number_format($gc->total_currency, 2) }}
                                                </td>
                                            </tr>
                                        @endforeach
                                        {{-- Jangan pakai colspan di tbody. Biarkan kosong saat tidak ada data --}}
                                    </tbody>

                                    <tfoot>
                                        <tr>
                                            <th colspan="2" class="text-end">Total</th>
                                            <th style="text-align: right">{{ number_format($totalall, 2) }}</th>
                                        </tr>
                                    </tfoot>
                                </table>


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

            <div class="col-md-6">
                <div class="card overflow-auto">

                    <div id="chart-gr" style="width: 600px; height: 400px;"></div>

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

    <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($kategori) }}" class="text-center">Kategori</th>
                                            <th rowspan="2" class="align-middle text-center">Grand Total</th>
                                        </tr>
                                        <tr>
                                            @foreach ($kategori as $k)
                                                <th class="text-center">{{ $k->long_text }}</th>
                                            @endforeach
                                        </tr>
                                    </thead>


                                    @php
                                        $rowspanCounts = [];
                                        $totalPerKategori = [];
                                        $groupedRows = [];

                                        // Kelompokkan data berdasarkan tahun untuk rowspan
                                        foreach ($grcurmonth as $row) {
                                            $year = $row['year'];
                                            $rowspanCounts[$year] = ($rowspanCounts[$year] ?? 0) + 1;
                                            $groupedRows[$year][] = $row;
                                        }

                                        $currentYear = now()->year;

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

                                        $colorMap = [];
                                        $i = 0;

                                        foreach ($groupedRows 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>
                                        {!! $dynamicStyle !!}
                                    </style>

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

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

                                                // hitung total poin per tahun
                                                foreach ($rows as $r) {
                                                    foreach ($kategori as $k) {
                                                        $yearGrandTotal += $r['items'][$k->long_text] ?? 0;
                                                    }
                                                }
                                            @endphp

                                            @foreach ($rows as $index => $row)
                                                <tr class="{{ $index !== 0 ? 'row-detail-' . $year : '' }}">
                                                    @if ($index === 0)
                                                        <td rowspan="{{ $rowspan }}" class="align-middle text-center">
                                                            <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($row['month'])->translatedFormat('F') }}
                                                    </td>

                                                    @foreach ($kategori as $k)
                                                        @php
                                                            $val = $row['items'][$k->long_text] ?? 0;
                                                            $totalPerKategori[$k->long_text] =
                                                                ($totalPerKategori[$k->long_text] ?? 0) + $val;
                                                        @endphp
                                                        <td class="text-end">{{ number_format($val, 1) }}</td>
                                                    @endforeach

                                                    @if ($index === 0)
                                                        <td rowspan="{{ $rowspan }}" class="align-middle text-center">
                                                            {{ number_format($yearGrandTotal, 1) }}
                                                        </td>
                                                    @endif
                                                </tr>
                                            @endforeach


                                            <tr class="bg-light fw-bold border-top border-2 border-secondary-subtle">

                                                <td class="text-end" style="border: 1px solid #dadada;">
                                                    Total {{ $year }}
                                                    :
                                                </td>
                                                @foreach ($kategori as $k)
                                                    @php
                                                        $totalTahunPerKategori = 0;
                                                        foreach ($rows as $r) {
                                                            $totalTahunPerKategori += $r['items'][$k->long_text] ?? 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 ($kategori as $k)
                                                <td class="text-end fw-bold">
                                                    {{ number_format($totalPerKategori[$k->long_text] ?? 0, 1) }}
                                                </td>
                                            @endforeach
                                            <td class="text-center fw-bold">
                                                {{ number_format(array_sum($totalPerKategori), 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>





    <script>
        // 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,
            });

            $('#total-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,
            });
            renderchartmonth();
            renderchartmonthline();
            const grcurmonth = @json($grcurmonth);

            const grcurr = @json($grcurr ?? []);
            renderGRchart(grcurr);
        });

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

        // Render chart
        function renderGRchart(data) {
            // data = [{long_text: "Transportasi", total_currency: 1500000}, ...]

            // Buat list untuk pie
            var listData = data.map(item => {
                return {
                    value: item.total_currency,
                    name: item.long_text
                }
            });

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

            const option = {
                baseOption: {
                    timeline: {
                        show: false // kalau mau multi tahun bisa diaktifkan
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}: {c} ({d}%)'
                    },
                    legend: {
                        bottom: 0,
                        left: 'center'
                    },
                    series: []
                },
                options: [{
                    title: {
                        text: 'Biaya GR',
                        left: 'center'
                    },
                    series: [{
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '45%'],
                        label: {
                            show: true,
                            formatter: '{b}: {c} ({d}%)'
                        },
                        data: listData,
                    }]
                }]
            };

            chart.setOption(option);
        }

        function renderchartmonth() {
            const grcurmonth = @json($grcurmonth);
            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 = [];

            // 1. Ambil semua bulan dan kategori unik
            Object.keys(grcurmonth).sort().forEach(key => {
                const row = grcurmonth[key];
                xAxis.push(`${row.year}-${String(row.month).padStart(2, '0')}`);
                Object.keys(row.items).forEach(kat => {
                    if (!kategoriSet.has(kat)) {
                        kategoriSet.add(kat);
                        kategoriList.push(kat);
                    }
                });
            });

            // 2. Buat series per kategori
            const seriesMap = {};
            kategoriList.forEach(kat => {
                seriesMap[kat] = {
                    name: kategoriLabelMap[kat] || kat,
                    type: 'bar',
                    stack: 'total',
                    emphasis: {
                        focus: 'series'
                    },
                    itemStyle: {
                        color: warnaKategori[kat] || undefined
                    },
                    data: []
                };
            });

            // 3. Isi data per kategori per bulan
            Object.keys(grcurmonth).sort().forEach(key => {
                const row = grcurmonth[key];
                kategoriList.forEach(kat => {
                    const val = row.items[kat] || 0;
                    seriesMap[kat].data.push(parseFloat(val.toFixed(2)));
                });
            });
            // 3b. Hitung total poin dan urutkan kategori berdasarkan total tertinggi
            const totalPerKategori = {};
            kategoriList.forEach(kat => {
                totalPerKategori[kat] = seriesMap[kat].data.reduce((sum, val) => sum + val, 0);
            });
            kategoriList.sort((a, b) => totalPerKategori[b] - totalPerKategori[a]);

            // 4. Susun ulang legend & series berdasarkan urutan baru
            const series = kategoriList.map(kat => seriesMap[kat]);
            const legendData = kategoriList.map(kat => kategoriLabelMap[kat] || kat);


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

            const option = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: legendData
                },
                xAxis: {
                    type: 'category',
                    data: xAxis
                },
                yAxis: {
                    type: 'value'
                },
                series: series
            };

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

        function renderchartmonthline() {
            const rawData = @json($grcurline);
            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',

            };


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

            // Buat series per kategori
            const seriesMap = {};
            kategoriList.forEach(kat => {
                seriesMap[kat] = {
                    name: kategoriLabelMap[kat] || kat,
                    type: 'line',
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: 6,
                    itemStyle: {
                        color: warnaKategori[kat] || undefined
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: []
                };
            });

            // Isi data per kategori (0 jika kosong)
            bulanList.forEach(bulan => {
                kategoriList.forEach(kat => {
                    const entry = rawData.find(r => r.bulan === bulan && r.kategori === kat);
                    seriesMap[kat].data.push(entry ? parseFloat(entry.poin.toFixed(2)) : 0);
                });
            });
            // 3b. Hitung total poin dan urutkan kategori berdasarkan total tertinggi
            const totalPerKategori = {};
            kategoriList.forEach(kat => {
                totalPerKategori[kat] = seriesMap[kat].data.reduce((sum, val) => sum + val, 0);
            });
            kategoriList.sort((a, b) => totalPerKategori[b] - totalPerKategori[a]);

            // 4. Susun ulang legend & series berdasarkan urutan baru
            const series = kategoriList.map(kat => seriesMap[kat]);
            const legendData = kategoriList.map(kat => kategoriLabelMap[kat] || kat);


            // Render chart
            const chartDom = document.getElementById('chart-kat-month-line');
            const myChart = echarts.init(chartDom);
            const option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    data: legendData
                },
                xAxis: {
                    type: 'category',
                    data: bulanList
                },
                yAxis: {
                    type: 'value'
                },
                series: series
            };

            myChart.setOption(option);
            window.addEventListener('resize', () => myChart.resize());
        }
    </script>
@endsection