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

@section('content')
    @if (empty($selected_detail_month))
        @include('layouts.navbars.auth.topnav', ['title' => ''])
    @endif
    <div class="container-fluid py-4">

        {{-- CARD 1: Pie Chart & Komposisi ZSUP --}}
        <div class="card mb-4">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Komposisi ZSUP Berdasarkan Material Group</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="zsupPieChart" style="height: 400px;"></div>
                </div>
                <div class="col-md-6">
                    <table class="table table-sm table-bordered table-hover">
                        <thead style="background-color: #b8ecec">
                            <tr>
                                <th>Material Group</th>
                                <th class="text-center">Curr</th>
                                <th class="text-end">Total</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php $grandTotal = 0; @endphp
                            @foreach ($zsupByMatkl as $matkl => $items)
                                @php
                                    $matklId = Str::slug($matkl, '_');
                                    $matklTotal = $items->sum('total_value');
                                    $grandTotal += $matklTotal;
                                @endphp
                                <tr class="collapse-toggle" data-bs-toggle="collapse"
                                    data-bs-target="#collapse-{{ $matklId }}" style="cursor: pointer;">
                                    <td>
                                        <strong>{{ $matkl }}</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($matklTotal) }}</td>
                                </tr>
                                <tr>
                                    <td colspan="3" class="p-0 border-0">
                                        <div id="collapse-{{ $matklId }}"
                                            class="accordion-collapse collapse collapse-wrapper bg-light">
                                            <table class="table table-sm mb-0 table-hover">
                                                <tbody>
                                                    @foreach ($items as $row)
                                                        <tr>
                                                            <td class="ps-4 text-primary">- {{ $row->MAKTX }}</td>
                                                            <td class="text-end">{{ number_format($row->total_value) }}</td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                            <tr class="fw-bold" style="background-color: #b8ecec">
                                <td>Total</td>
                                <td class="text-center">IDR</td>
                                <td class="text-end">{{ number_format($grandTotal) }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        {{-- CARD 2: Summary Bulanan --}}
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">Summary Nilai per Bulan (ZSUP -
                    {{ \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>
                            <tr>
                                <th>Mt. Type</th>
                                <th class="text-Center">Curr</th>
                                @foreach ($months as $m)
                                    <th class="text-end">{{ $m['label'] }}</th>
                                @endforeach
                                <th class="text-end">TOTAL</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($monthlySummary as $row)
                                <tr>
                                    <td>{{ $row['MTART'] }}</td>
                                    <td class="text-center">IDR</td>
                                    @foreach ($months as $m)
                                        @php $key = $m['key']; @endphp
                                        <td class="text-end">{{ number_format($row[$key] ?? 0) }}</td>
                                    @endforeach
                                    <td class="text-end fw-bold">{{ number_format($row['TOTAL'] ?? 0) }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        {{-- CARD 3: Top Vendor & Top Material --}}
        <div class="row">
            {{-- CARD: Top Vendor --}}
            <div class="col-md-6">
                <div class="card mb-4">
                    <div class="card-header">
                        <h6 class="mb-0">Top Vendor (ZSUP)</h6>
                    </div>
                    <div class="card-body p-3">
                        <div class="table-responsive" id="topVendorTableWrapper" style="max-height: 600px; overflow-y: auto; overflow-x: auto;">
                            @php
                                $grandTotal = $topVendors->sum('total');
                            @endphp

                            <table class="table table-sm table-bordered mb-0 table-hover">
                            <thead style="background-color: #b8ecec">
                                <tr>
                                    <th>Vendor</th>
                                    <th class="text-center">Curr</th>
                                    <th class="text-end">Total</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($topVendors->take(5) as $vendor => $data)
                                    @php $vendorId = \Str::slug($vendor) @endphp
                                    <tr data-bs-toggle="collapse" data-bs-target="#vendorDetail-{{ $vendorId }}"
                                        class="fw-bold" style="cursor: pointer;">
                                        <td>
                                            <strong>
                                                {{ $vendor }}
                                            </strong>
                                            <small class="text-muted">({{ count($data['details']) }} item)</small>
                                        </td>
                                        <td class="text-center"><strong>IDR</strong></td>
                                        <td class="text-end">{{ number_format($data['total']) }}</td>
                                    </tr>
                                    <tr>
                                        <td colspan="3" class="p-0 border-0">
                                            <div id="vendorDetail-{{ $vendorId }}"
                                                class="accordion-collapse collapse collapse-wrapper bg-light">
                                                <table class="table table-sm mb-0 table-hover">
                                                    @foreach ($data['details'] as $item)
                                                        <tr>
                                                            <td class="ps-4 text-primary">-{{ $item->MAKTX }}</td>
                                                            <td class="text-end">{{ number_format($item->total_value) }}
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                </table>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach

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

                            <tbody id="moreVendors" class="collapse">
                                @foreach ($topVendors->slice(5) as $vendor => $data)
                                    @php $vendorId = \Str::slug($vendor) @endphp
                                    <tr data-bs-toggle="collapse" data-bs-target="#vendorDetail-{{ $vendorId }}"
                                        class="fw-bold" style="cursor: pointer;">
                                        <td>
                                            <strong>
                                                {{ $vendor }}
                                            </strong>
                                            <small class="text-muted">({{ count($data['details']) }} item)</small>
                                        </td>
                                        <td class="text-center">IDR</td>
                                        <td class="text-end">{{ number_format($data['total']) }}</td>
                                    </tr>
                                    <tr>
                                        <td colspan="3" class="p-0 border-0">
                                            <div id="vendorDetail-{{ $vendorId }}"
                                                class="accordion-collapse collapse collapse-wrapper bg-light">
                                                <table class="table table-sm mb-0 table-hover">
                                                    @foreach ($data['details'] as $item)
                                                        <tr>
                                                            <td class="ps-4 text-primary">-{{ $item->MAKTX }}</td>
                                                            <td class="text-end">{{ number_format($item->total_value) }}
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                </table>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                            <tfoot>
                                <tr style="background-color: #e3f7f7; font-weight: bold;">
                                    <td class="text-start" colspan="2">TOTAL</td>
                                    <td class="text-end">{{ number_format($grandTotal) }}</td>
                                </tr>
                            </tfoot>
                        </table>
                        </div>
                    </div>
                </div>
            </div>

            {{-- CARD: Top Material --}}
            <div class="col-md-6">
                <div class="card mb-4">
                    <div class="card-header">
                        <h6 class="mb-0">Top Material (ZSUP)</h6>
                    </div>
                    <div class="card-body p-3">
                        <div class="table-responsive" id="topMaterialTableWrapper" style="max-height: 600px; overflow-y: auto; overflow-x: auto;">
                            @php
                                $grandTotal = $topMaterials->sum('total_value');
                            @endphp

                            <table class="table table-sm table-bordered mb-0 table-hover">
                            <thead style="background-color: #b8ecec">
                                <tr>
                                    <th>Material</th>
                                    <th class="text-center">Curr</th>
                                    <th class="text-end">Total</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($topMaterials->take(5) as $i => $m)
                                    <tr data-bs-toggle="collapse" data-bs-target="#detail-{{ $i }}"
                                        aria-expanded="false" style="cursor:pointer">
                                        <td><strong>{{ $m->material }}</strong>
                                            <small class="text-muted">({{ count($m->budat_list) }} item)</small>
                                        </td>
                                        <td class="text-center"><strong>IDR</strong></td>
                                        <td class="text-end"><strong>{{ number_format($m->total_value) }}</strong></td>
                                    </tr>
                                    <tr>
                                        <td colspan="3" class="p-0 border-0">
                                            <div id="detail-{{ $i }}"
                                                class="accordion-collapse collapse collapse-wrapper bg-light">
                                                <table class="table table-sm mb-0 table-hover">
                                                    <tbody>
                                                        @foreach ($m->budat_list as $d)
                                                            <tr>
                                                                <td class="ps-4 text-primary">-{{ $d->MAKTX }}
                                                                    ({{ $d->BUDAT }})
                                                                </td>
                                                                <td class="text-end">{{ number_format($d->ksl) }}</td>
                                                            </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach

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

                            @if ($topMaterials->count() > 5)
                                <tbody id="moreMaterials" class="collapse">
                                    @foreach ($topMaterials->slice(5)->values() as $j => $m)
                                        <tr data-bs-toggle="collapse" data-bs-target="#detail-more-{{ $j }}"
                                            aria-expanded="false" style="cursor:pointer">
                                            <td><strong>{{ $m->material }}</strong>
                                                <small class="text-muted">({{ count($m->budat_list) }} item)</small>
                                            </td>
                                            <td class="text-center"><strong>IDR</strong>
                                            </td>
                                            <td class="text-end"><strong>{{ number_format($m->total_value) }}</strong>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="3" class="p-0 border-0">
                                                <div id="detail-more-{{ $j }}"
                                                    class="accordion-collapse collapse collapse-wrapper bg-light">
                                                    <table class="table table-sm mb-0 table-hover">
                                                        <tbody>
                                                            @foreach ($m->budat_list as $d)
                                                                <tr>
                                                                    <td class="ps-4 text-primary">-{{ $d->MAKTX }}
                                                                        ({{ $d->BUDAT }})
                                                                    </td>
                                                                    <td class="text-end">{{ number_format($d->ksl) }}</td>
                                                                </tr>
                                                            @endforeach
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </td>
                                        </tr>
                                @endforeach
                            </tbody>
                        @endif
                        <tfoot>
                            <tr style="background-color: #e3f7f7; font-weight: bold;">
                                <td class="text-start" colspan="2">TOTAL</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('zsupPieChart');
            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%',
                    data: [
                        @foreach ($zsupByMatkl as $matkl => $group)
                            {
                                value: {{ $group->sum('total_value') }},
                                name: '{{ $matkl }}'
                            },
                        @endforeach
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }]
            };
            myChart.setOption(option);
            window.addEventListener('resize', () => myChart.resize());

            // Scroll Top Vendor table when "Tampilkan X lainnya" is clicked
            const moreVendorsBtn = document.querySelector('[data-bs-target="#moreVendors"]');
            const vendorTableWrapper = document.getElementById('topVendorTableWrapper');
            
            if (moreVendorsBtn && vendorTableWrapper) {
                moreVendorsBtn.addEventListener('click', function() {
                    setTimeout(() => {
                        const moreVendorsSection = document.getElementById('moreVendors');
                        if (moreVendorsSection && moreVendorsSection.classList.contains('show')) {
                            // Scroll to the bottom of the vendor table wrapper
                            vendorTableWrapper.scrollTo({
                                top: vendorTableWrapper.scrollHeight,
                                behavior: 'smooth'
                            });
                        }
                    }, 350);
                });
            }

            // Scroll Top Material table when "Tampilkan X lainnya" is clicked
            const moreMaterialsBtn = document.querySelector('[data-bs-target="#moreMaterials"]');
            const tableWrapper = document.getElementById('topMaterialTableWrapper');
            
            if (moreMaterialsBtn && tableWrapper) {
                moreMaterialsBtn.addEventListener('click', function() {
                    setTimeout(() => {
                        const moreMaterialsSection = document.getElementById('moreMaterials');
                        if (moreMaterialsSection && moreMaterialsSection.classList.contains('show')) {
                            // Scroll to the bottom of the table wrapper
                            tableWrapper.scrollTo({
                                top: tableWrapper.scrollHeight,
                                behavior: 'smooth'
                            });
                        }
                    }, 350); // Wait for collapse animation
                });
            }
        });
        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);
                }
            });
        });
    </script>
@endpush