@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="row g-3">
            {{-- <div class="col-md-7 d-flex"> --}}
            <div class="card mb-4 w-100 h-100">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Komposisi ZSPR 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 g-3">

                    {{-- PIE CHART --}}
                    <div class="col-md-6">
                        <div id="zrawPieChart" style="height: 400px;"></div>
                    </div>

                    {{-- TABEL MATERIAL GROUP --}}
                    <div class="col-md-6">
                        <div class="table-responsive" style="max-height: 450px; overflow-y: auto;">
                            <table class="table table-sm table-bordered table-hover">
                                <thead class="text-center" 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 ($zrawByMatkl 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 bg-light">
                                                    <table class="table table-sm mb-0 table-hover">
                                                        @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
                                                    </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>
            </div>
            {{-- </div> --}}

        </div>
        <div class="card mb-4">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">ZSPR - Ringkasan per Kelompok Divisi
                    ({{ \Carbon\Carbon::createFromFormat('Ym', $yearMonth)->format('Y') }})</h5>
                {{-- <button class="btn btn-sm btn-outline-secondary" id="toggleCompareColumns" onclick="toggleCompareZSPR()">
                    <i class="fas fa-eye-slash" id="iconToggleZSPR"></i>
                    <span id="textToggleZSPR">Sembunyikan data</span>
                </button> --}}
            </div>
            <div class="card-body table-responsive" style="max-height: 600px; overflow-y: auto;">
                <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>Kelompok</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>
                                <th class="text-center">AVG YTD</th>
                                <th class="text-center col-compare-zspr">Total {{ $yearPrev }}</th>
                                <th class="text-center col-compare-zspr">Ratio YTD</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php
                                $order = ['Asset', 'Project', 'Sparepart', 'Dibiayakan'];
                                $collapsible = ['Asset', 'Project', 'Sparepart'];
                                $colspan = 2 + count($months) + 4; // Kelompok + Curr + (bulan...) + TotalYTD + AVGYTD + TotalPrev + Ratio

                                // Akumulator grand total
                                $grandTotalsPerMonth = array_fill_keys($months, 0);
                                $grandTotalPrev = 0;
                            @endphp

                            @foreach ($order as $group)
                                @php
                                    $monthValues = $zsprGroupedSummary[$group] ?? [];
                                    $totalAktif = collect($monthValues)
                                        ->filter(fn($v, $k) => $k <= $yearMonth)
                                        ->map(fn($v) => (float) $v)
                                        ->sum();
                                    $totalSebelumnya = (float) ($groupedPrevYearData[$group] ?? 0);

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

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

                                    // akumulasi grand total per bulan & prev year
                                    foreach ($months as $m) {
                                        $grandTotalsPerMonth[$m] += (float) ($monthValues[$m] ?? 0);
                                    }
                                    $grandTotalPrev += $totalSebelumnya;

                                    $rowId = 'grp-' . \Str::slug($group, '_');
                                    $hasDetails =
                                        !empty($detailsByGroup[$group] ?? null) && in_array($group, $collapsible, true);
                                @endphp

                                {{-- ROW RINGKASAN --}}
                                <tr
                                    @if ($group === 'Dibiayakan') onclick="window.location.href='{{ url('rptdby') }}'"
                                        style="cursor:pointer;"
                                    @elseif ($hasDetails)
                                        data-bs-toggle="collapse" data-bs-target="#{{ $rowId }}" style="cursor:pointer;" @endif>
                                    <td>
                                        @if ($hasDetails)
                                            <span class="me-1">▸</span>
                                        @endif
                                        {{ $group }}
                                    </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 col-compare-zspr">{{ number_format($totalSebelumnya) }}</td>
                                    <td class="text-end col-compare-zspr">{{ $ratio !== null ? number_format($ratio, 2) . '%' : '-' }}</td>
                                </tr>

                                {{-- ROW DETAIL (hanya bulan aktif) --}}
                                @if ($hasDetails)
                                    <tr id="{{ $rowId }}" class="collapse bg-light">
                                        <td class="fw-bold" colspan="2">Detail</td>
                                        @foreach ($months as $m)
                                            <td class="text-center fw-bold">
                                                @if ($m == $yearMonth)
                                                    {{ \Carbon\Carbon::createFromFormat('Ymd', $m . '01')->translatedFormat('F Y') }}
                                                @endif
                                            </td>
                                        @endforeach
                                        <td colspan="4"></td>
                                    </tr>

                                    @php $grandTotalDetail = 0; @endphp
                                    @forelse ($detailsByGroup[$group] as $maktx => $valThisMonth)
                                        @php
                                            $val = (float) $valThisMonth;
                                            $grandTotalDetail += $val;
                                        @endphp
                                        <tr class="collapse bg-light" id="{{ $rowId }}">
                                            <td colspan="2" class="text-primary">- {{ $maktx }}</td>
                                            @foreach ($months as $m)
                                                @if ($m == $yearMonth)
                                                    <td class="text-end">{{ number_format($val) }}</td>
                                                @else
                                                    <td></td>
                                                @endif
                                            @endforeach
                                            <td colspan="4"></td>
                                        </tr>
                                    @empty
                                        <tr class="collapse bg-light" id="{{ $rowId }}">
                                            <td colspan="{{ 2 + count($months) + 2 }}" class="text-center text-muted">
                                                Tidak ada data untuk bulan ini.
                                            </td>
                                        </tr>
                                    @endforelse

                                    @if ($grandTotalDetail > 0)
                                        <tr class="collapse bg-light fw-bold" id="{{ $rowId }}">
                                            <td colspan="2">Total</td>
                                            @foreach ($months as $m)
                                                @if ($m == $yearMonth)
                                                    <td class="text-end">{{ number_format($grandTotalDetail) }}</td>
                                                @else
                                                    <td></td>
                                                @endif
                                            @endforeach
                                            <td colspan="4"></td>
                                        </tr>
                                    @endif
                                @endif
                            @endforeach
                            @php
                                $grandTotalAktif = collect($grandTotalsPerMonth)
                                    ->filter(fn($v, $k) => $k <= $yearMonth)
                                    ->sum();

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

                                $grandRatio = $grandTotalPrev > 0 ? ($grandTotalAktif / $grandTotalPrev) * 100 : null;
                            @endphp

                            <tr style="background-color: #e3f7f7; font-weight: bold;">
                                <td>TOTAL</td>
                                <td class="text-center">IDR</td>
                                @foreach ($months as $m)
                                    <td class="text-end @if ($m == $yearMonth) fw-bold @endif">
                                        {{ number_format($grandTotalsPerMonth[$m] ?? 0) }}
                                    </td>
                                @endforeach
                                <td class="text-end">{{ number_format($grandTotalAktif) }}</td>
                                <td class="text-end">{{ number_format($grandAvgYTD, 0) }}</td>
                                <td class="text-end col-compare-zspr">{{ number_format($grandTotalPrev) }}</td>
                                <td class="text-end col-compare-zspr">
                                    {{ $grandRatio !== null ? number_format($grandRatio, 2) . '%' : '-' }}
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>




        </div>
        {{-- <div class="col-md-6 d-flex"> --}}
        <div class="card mb-4 w-100 h-100">
            <div class="card-header">
                <h5 class="mb-0">Tren Pemakaian
                    {{ \Carbon\Carbon::createFromFormat('Ym', $yearMonth)->format('Y') }}</h5>
            </div>
            <div class="card-body">
                <div id="sparepartChart" style="height: 400px;"></div>
            </div>
        </div>
        {{-- </div> --}}
        <div class="row align-items-stretch">
            <div class="col-md-5 d-flex">
                <div class="card mb-2 w-100 h-100">
                    <div class="card-header">
                        <h5 class="mb-0">Sparepart
                            {{ \Carbon\Carbon::createFromFormat('Ym', $yearMonth)->format('Y') }}
                        </h5>
                    </div>
                    <div class="card-body table-responsive">
                        <table class="table table-sm table-bordered text-end table-hover">
                            <thead class="text-center" style="background-color: #b8ecec">
                                <tr>
                                    <th rowspan="2" class="align-middle"> </th>
                                    <th colspan="2">SPAREPART</th>
                                </tr>
                                <tr>
                                    <th>Pembelian (GR)</th>
                                    <th>Pemakaian (GI)</th>
                                </tr>
                            </thead>
                            <tbody>
                                @php
                                    use Carbon\Carbon;
                                    try {
                                        $activeMonthLabel = Carbon::createFromFormat(
                                            'Ymd',
                                            $yearMonth . '01',
                                        )->translatedFormat('F Y');
                                    } catch (\Exception $e) {
                                        $activeMonthLabel = '';
                                    }
                                @endphp

                                @foreach ($sparepartTable as $row)
                                    @php
                                        $isTotalRow = str_starts_with($row['label'], 'Total');
                                        $isActiveMonthRow = $row['label'] === $activeMonthLabel;
                                    @endphp
                                    <tr
                                        @if ($isActiveMonthRow) style="background-color: #439A97; color: white;" class="fw-bold" @endif>
                                        <td class="{{ $isTotalRow ? 'fw-bold text-center' : 'text-center' }}">
                                            {{ $row['label'] }}
                                        </td>
                                        <td class="{{ $isTotalRow ? 'fw-bold' : '' }}"
                                            @if ($isActiveMonthRow) style="background-color: #FDFAF6; color: black;" @endif>
                                            {{ number_format($row['gr']) }}
                                        </td>
                                        <td class="{{ $isTotalRow ? 'fw-bold' : '' }}"
                                            @if ($isActiveMonthRow) style="background-color: #FDFAF6; color: black;" @endif>
                                            {{ number_format($row['gi']) }}
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="col-md-7 d-flex">
                <div class="card mb-4 w-100 h-100">
                    <div class="card-header">
                        <h5 class="mb-0">Top Vendor (ZSPR)</h5>
                    </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-xs 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">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 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">
                                                    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 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>

                                {{-- Row Total --}}
                                <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>
    @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%',
                        data: [
                            @foreach ($zrawByMatkl 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 table to show more vendors when button is clicked
                const moreVendorsBtn = document.querySelector('[data-bs-target="#moreVendors"]');
                const tableWrapper = document.getElementById('topVendorTableWrapper');
                
                if (moreVendorsBtn && tableWrapper) {
                    moreVendorsBtn.addEventListener('click', function() {
                        setTimeout(() => {
                            const moreVendorsSection = document.getElementById('moreVendors');
                            if (moreVendorsSection && moreVendorsSection.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);
                    }
                });
            });
            document.addEventListener("DOMContentLoaded", function() {
                const chart = echarts.init(document.getElementById('sparepartChart'));

                const sparepartMonths = {!! json_encode($sparepartMonths) !!};
                const _grData = {!! json_encode($sparepartGR) !!};
                const _giData = {!! json_encode($sparepartGI) !!};

                // Bulatkan ke integer
                const grData = (_grData || []).map(v => Math.round(Number(v) || 0));
                const giData = (_giData || []).map(v => Math.round(Number(v) || 0));

                // Formatter angka dengan koma (1,234)
                const nf = new Intl.NumberFormat('en-US', {
                    maximumFractionDigits: 0
                });
                const fmt = (v) => nf.format(Number(v) || 0);

                const option = {
                    tooltip: {
                        trigger: 'axis',
                        valueFormatter: fmt
                    },
                    legend: {
                        top: 10,
                        data: ['GR', 'GI']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '5%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: sparepartMonths,
                        axisLabel: {
                            interval: 0,
                            rotate: 30
                        }
                    },
                    yAxis: {
                        type: 'value',
                        name: 'Jumlah',
                        minInterval: 1,
                        axisLabel: {
                            formatter: fmt
                        }
                    },
                    series: [{
                            name: 'GR',
                            type: 'line',
                            smooth: true,
                            data: grData,
                            areaStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgba(54, 162, 235, 0.5)'
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(54, 162, 235, 0)'
                                    }
                                ])
                            },
                            lineStyle: {
                                color: '#36A2EB'
                            },
                            itemStyle: {
                                color: '#36A2EB'
                            }
                        },
                        {
                            name: 'GI',
                            type: 'line',
                            smooth: true,
                            data: giData,
                            areaStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgba(255, 99, 132, 0.5)'
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(255, 99, 132, 0)'
                                    }
                                ])
                            },
                            lineStyle: {
                                color: '#FF6384'
                            },
                            itemStyle: {
                                color: '#FF6384'
                            }
                        }
                    ]
                };

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

            document.addEventListener("DOMContentLoaded", function() {
                const chartDom = document.getElementById('zsprBarChart');
                const myChart = echarts.init(chartDom);

                const option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        bottom: 0
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '15%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: @json($chartMonths), // hasil bulan sudah diformat
                        axisLabel: {
                            rotate: 30
                        }
                    },
                    series: @json($chartSeries),
                    yAxis: {
                        type: 'value'
                    },
                };

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

            // Toggle hide/unhide kolom perbandingan (Total 2024 & Ratio)
            let compareZSPRVisible = true;

            function toggleCompareZSPR() {
                compareZSPRVisible = !compareZSPRVisible;
                const columns = document.querySelectorAll('.col-compare-zspr');
                const icon = document.getElementById('iconToggleZSPR');
                const text = document.getElementById('textToggleZSPR');

                columns.forEach(col => {
                    col.style.display = compareZSPRVisible ? '' : 'none';
                });

                if (compareZSPRVisible) {
                    icon.className = 'fas fa-eye-slash';
                    text.textContent = 'Sembunyikan Perbandingan';
                } else {
                    icon.className = 'fas fa-eye';
                    text.textContent = 'Tampilkan Perbandingan';
                }
            }
        </script>
    @endpush