@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
@include('layouts.navbars.auth.topnav', ['title' => ''])

<style>
    .table-cyan {
        background-color: #00b7bd !important;
        color: white !important;
    }
    .table-cyan th {
        color: white !important;
        font-weight: 600;
        border: 1px solid #009fa3 !important;
    }
    
    .matrix-table-container {
        overflow-x: auto;
        max-width: 100%;
        position: relative;
    }

    .matrix-table {
        font-size: 0.85rem;
        min-width: 1200px;
        border-collapse: separate;
        border-spacing: 0;
    }

    .matrix-table td,
    .matrix-table th {
        padding: 6px 4px;
        white-space: nowrap;
    }

    /* === Color Differentiation (Header vs Content) === */
    .matrix-table tbody tr:nth-child(odd) {
        background-color: #ffffff;
    }
    .matrix-table tbody tr:nth-child(even) {
        background-color: #eef7f7;
    }

    /* Area total rows */
    .matrix-table tbody tr.table-light {
        background-color: #d1f0f0 !important;
        font-weight: bold;
    }

    /* Grand total row */
    .matrix-table tbody tr.table-cyan {
        background-color: #00b7bd !important;
        color: white !important;
    }

    /* .matrix-table tbody tr:hover {
        background-color: #c2e8e8 !important;
    } */

    .matrix-table .text-end {
        text-align: right !important;
    }

    /* === Sticky/Frozen Columns === */
    .sticky-col {
        position: sticky;
        z-index: 10;
    }

    .sticky-col-1 { left: 0; min-width: 100px; }
    .sticky-col-2 { left: 100px; min-width: 80px; }
    .sticky-col-3 { left: 180px; min-width: 60px; }
    .sticky-col-4 { left: 240px; min-width: 150px; }

    /* Body sticky columns - inherit row background for seamless zebra striping */
    .matrix-table tbody tr:nth-child(odd) td.sticky-col {
        background-color: #ffffff;
    }
    .matrix-table tbody tr:nth-child(even) td.sticky-col {
        background-color: #eef7f7;
    }
    .matrix-table tbody tr.table-light td.sticky-col {
        background-color: #d1f0f0 !important;
    }
    .matrix-table tbody tr.table-cyan td.sticky-col {
        background-color: #00b7bd !important;
        color: white !important;
    }
    /* .matrix-table tbody tr:hover td.sticky-col {
        background-color: #c2e8e8 !important;
    } */

    /* Header sticky columns */
    .matrix-table thead th.sticky-col {
        background-color: #00b7bd !important;
        color: white !important;
        z-index: 30;
    }

    /* Ensure non-sticky header also has correct background */
    .table-cyan th {
        background-color: #00b7bd !important;
        color: white !important;
        font-weight: 600;
        border: 1px solid #009fa3 !important;
    }

    /* Add shadow to indicate scrollable area */
    .sticky-col-4::after {
        content: '';
        position: absolute;
        top: 0;
        right: -5px;
        bottom: 0;
        width: 5px;
        background: linear-gradient(to right, rgba(0,0,0,0.1), transparent);
        pointer-events: none;
    }

    /* Sales cell hover highlight */
    .sales-cell {
        cursor: pointer;
        transition: background-color 0.2s ease, transform 0.15s ease;
    }

    .sales-cell:hover {
        background-color: #00b7bd !important;
        color: #fff !important;
        font-weight: 600;
        transform: scale(1.02);
        border-radius: 4px;
        box-shadow: 0 2px 8px rgba(0, 183, 189, 0.3);
    }

    /* Modal styles */
    #materialDetailModal .modal-content {
        border: none;
        border-radius: 12px;
        overflow: hidden;
    }

    #materialDetailModal .modal-header {
        border-bottom: none;
        padding: 1.25rem 1.5rem;
    }

    #materialDetailModal .modal-body {
        padding: 0;
    }

    #materialDetailModal .table-cyan th {
        background-color: #00b7bd;
        color: white;
        font-weight: 600;
        border: 1px solid #009fa3;
        padding: 10px 8px;
        vertical-align: middle;
    }

    #materialDetailModal .table-cyan th:first-child {
        border-top-left-radius: 6px;
    }

    #materialDetailModal .table-cyan th:last-child {
        border-top-right-radius: 6px;
    }

    #materialDetailModal tbody td {
        padding: 10px 8px;
        vertical-align: middle;
        font-size: 0.9rem;
    }

    #materialDetailModal tbody tr:hover {
        background-color: #e3f2fd;
    }
</style>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="row mx-1">
                <div class="card">
                    <div class="card-header">
                        <div class="d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">Result {{ $title_menu }} - Tahun {{ $selected_year }}</h5>
                            <a href="{{ URL::to($url_menu) }}" class="btn btn-secondary btn-sm">
                                <i class="fas fa-circle-left me-1"></i> Kembali
                            </a>
                        </div>
                    </div>
                    <hr class="horizontal dark mt-0">

                    @if(isset($matrix_data) && !empty($matrix_data['periods']))
                        @php
                            $matrixPeriods = $matrix_data['periods'];
                            $data = $matrix_data['data'];
                            $grandTotals = $matrix_data['grand_totals'];
                            $controller = new \App\Http\Controllers\RptfgrController();
                            
                            // Month name mapping
                            $monthNames = [
                                '001' => 'Jan', '002' => 'Feb', '003' => 'Mar', '004' => 'Apr',
                                '005' => 'May', '006' => 'Jun', '007' => 'Jul', '008' => 'Aug',
                                '009' => 'Sep', '010' => 'Oct', '011' => 'Nov', '012' => 'Dec'
                            ];
                        @endphp

                        <div class="row px-4 py-3">
                            <div class="col-12">
                                <div class="table-responsive matrix-table-container">
                                <table class="table table-sm table-hover matrix-table">
                                        <thead>
                                            {{-- Header Row 1: Month Names --}}
                                            <tr class="table-cyan">
                                                <th rowspan="3" class="text-center sticky-col sticky-col-1" style="vertical-align: middle; width: 100px;">Divisi</th>
                                                <th rowspan="3" class="text-center sticky-col sticky-col-2" style="vertical-align: middle; width: 80px;">Area</th>
                                                <th rowspan="3" class="text-center sticky-col sticky-col-3" style="vertical-align: middle; width: 60px;">Material</th>
                                                <th rowspan="3" class="text-center sticky-col sticky-col-4" style="vertical-align: middle; width: 150px;">Deskripsi</th>
                                                @foreach($matrixPeriods as $periodCode)
                                                    <th colspan="7" class="text-center">{{ $monthNames[$periodCode] ?? $periodCode }}</th>
                                                @endforeach
                                            </tr>
                                            {{-- Header Row 2: Penjualan, Bahan Baku, Conv labels --}}
                                            <tr class="table-cyan">
                                                @foreach($matrixPeriods as $periodCode)
                                                    <th colspan="3" class="text-center">Penjualan</th>
                                                    <th colspan="3" class="text-center">Bahan Baku (RM)</th>
                                                    <th class="text-center" style="width: 80px;">Conv</th>
                                                @endforeach
                                            </tr>
                                            {{-- Header Row 3: Column labels --}}
                                            <tr class="table-cyan">
                                                @foreach($matrixPeriods as $periodCode)
                                                    <th class="text-center" style="width: 90px;">Kg</th>
                                                    <th class="text-center" style="width: 90px;">USD</th>
                                                    <th class="text-center" style="width: 70px;">Avg</th>
                                                    <th class="text-center" style="width: 90px;">Kg</th>
                                                    <th class="text-center" style="width: 90px;">USD</th>
                                                    <th class="text-center" style="width: 70px;">Avg</th>
                                                    <th class="text-center" style="width: 80px;">Ratio</th>
                                                @endforeach
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {{-- Hygiene Division --}}
                                            @if(isset($data['Hygiene']) && !empty($data['Hygiene']))
                                                @php
                                                    $hygieneAreas = $data['Hygiene'];
                                                    $hygieneRowCount = 0;
                                                    foreach($hygieneAreas as $area => $materials) {
                                                        $hygieneRowCount += count($materials) + 1;
                                                    }
                                                @endphp
                                                
                                                @foreach($hygieneAreas as $area => $materials)
                                                    @php
                                                        $areaTotals = $controller->calculateAreaTotals($materials, $matrixPeriods);
                                                        $isFirstArea = $loop->first;
                                                    @endphp
                                                    
                                                {{-- Material Rows --}}
                                                @foreach($materials as $matgr => $matData)
                                                    <tr>
                                                        @if($isFirstArea && $loop->parent->first && $loop->first)
                                                            <td rowspan="{{ $hygieneRowCount }}" class="text-center align-middle sticky-col sticky-col-1" style="font-weight: bold;">
                                                                Hygiene
                                                            </td>
                                                        @endif

                                                        @if($loop->first)
                                                            <td rowspan="{{ count($materials) + 1 }}" class="text-center align-middle sticky-col sticky-col-2" style="font-weight: bold;">
                                                                {{ $area }}
                                                            </td>
                                                        @endif

                                                        <td class="text-center sticky-col sticky-col-3">{{ $matgr }}</td>
                                                        <td class="sticky-col sticky-col-4">{{ $matData['desc'] }}</td>

                                                        @foreach($matrixPeriods as $period)
                                                            @if(isset($matData['periods'][$period]))
                                                                {{-- Penjualan Columns --}}
                                                                <td class="text-end sales-cell" onclick="window.openMaterialModal('Hygiene', '{{ $area }}', '{{ $matgr }}', '{{ $matData['desc'] }}', '{{ $period }}', {{ $selected_year }})">{{ number_format($matData['periods'][$period]['fg_kg'], 2) }}</td>
                                                                <td class="text-end sales-cell" onclick="window.openMaterialModal('Hygiene', '{{ $area }}', '{{ $matgr }}', '{{ $matData['desc'] }}', '{{ $period }}', {{ $selected_year }})">{{ number_format($matData['periods'][$period]['fg_usd'], 2) }}</td>
                                                                <td class="text-end sales-cell" onclick="window.openMaterialModal('Hygiene', '{{ $area }}', '{{ $matgr }}', '{{ $matData['desc'] }}', '{{ $period }}', {{ $selected_year }})">{{ number_format($matData['periods'][$period]['fg_avg'], 2) }}</td>
                                                                {{-- RM Columns --}}
                                                                <td class="text-end">{{ number_format($matData['periods'][$period]['rm_kg'], 2) }}</td>
                                                                <td class="text-end">{{ number_format($matData['periods'][$period]['rm_usd'], 2) }}</td>
                                                                <td class="text-end">{{ number_format($matData['periods'][$period]['rm_avg'], 2) }}</td>
                                                                {{-- Conv Column --}}
                                                                <td class="text-end">{{ number_format($matData['periods'][$period]['conv'], 2) }}</td>
                                                            @else
                                                                {{-- Penjualan Columns --}}
                                                                <td class="text-end sales-cell">-</td>
                                                                <td class="text-end sales-cell">-</td>
                                                                <td class="text-end sales-cell">-</td>
                                                                {{-- RM Columns --}}
                                                                <td class="text-end">-</td>
                                                                <td class="text-end">-</td>
                                                                <td class="text-end">-</td>
                                                                {{-- Conv Column --}}
                                                                <td class="text-end">-</td>
                                                            @endif
                                                        @endforeach
                                                    </tr>
                                                @endforeach
                                                    
                                                    {{-- Area Total Row --}}
                                                    <tr class="table-light" style="font-weight: bold;">
                                                        <td class="text-end sticky-col sticky-col-3">Total {{ $area }}</td>
                                                        <td class="sticky-col sticky-col-4"></td>
                                                        @foreach($matrixPeriods as $period)
                                                            @if(isset($areaTotals[$period]))
                                                                {{-- Penjualan Columns --}}
                                                                <td class="text-end">{{ number_format($areaTotals[$period]['fg_kg'], 2) }}</td>
                                                                <td class="text-end">{{ number_format($areaTotals[$period]['fg_usd'], 2) }}</td>
                                                                <td class="text-end">{{ number_format($areaTotals[$period]['fg_avg'], 2) }}</td>
                                                                {{-- RM Columns --}}
                                                                <td class="text-end">{{ number_format($areaTotals[$period]['rm_kg'], 2) }}</td>
                                                                <td class="text-end">{{ number_format($areaTotals[$period]['rm_usd'], 2) }}</td>
                                                                <td class="text-end">{{ number_format($areaTotals[$period]['rm_avg'], 2) }}</td>
                                                                {{-- Conv Column --}}
                                                                <td class="text-end">{{ number_format($areaTotals[$period]['conv'], 2) }}</td>
                                                            @else
                                                                {{-- Penjualan Columns --}}
                                                                <td class="text-end">-</td>
                                                                <td class="text-end">-</td>
                                                                <td class="text-end">-</td>
                                                                {{-- RM Columns --}}
                                                                <td class="text-end">-</td>
                                                                <td class="text-end">-</td>
                                                                <td class="text-end">-</td>
                                                                {{-- Conv Column --}}
                                                                <td class="text-end">-</td>
                                                            @endif
                                                        @endforeach
                                                    </tr>
                                                @endforeach
                                            @endif

                                            {{-- Industrial Division --}}
                                            @if(isset($data['Industrial']) && !empty($data['Industrial']))
                                                @php
                                                    $industrialAreas = $data['Industrial'];
                                                    $industrialRowCount = 0;
                                                    foreach($industrialAreas as $area => $materials) {
                                                        $industrialRowCount += count($materials) + 1;
                                                    }
                                                @endphp
                                                
                                                @foreach($industrialAreas as $area => $materials)
                                                    @php
                                                        $areaTotals = $controller->calculateAreaTotals($materials, $matrixPeriods);
                                                        $isFirstArea = $loop->first;
                                                    @endphp
                                                    
                                                    {{-- Material Rows --}}
                                                    @foreach($materials as $matgr => $matData)
                                                        <tr>
                                                            @if($isFirstArea && $loop->parent->first && $loop->first)
                                                                <td rowspan="{{ $industrialRowCount }}" class="text-center align-middle sticky-col sticky-col-1" style="font-weight: bold;">
                                                                    Industrial
                                                                </td>
                                                            @endif
                                                            
                                                            @if($loop->first)
                                                                <td rowspan="{{ count($materials) + 1 }}" class="text-center align-middle sticky-col sticky-col-2" style="font-weight: bold;">
                                                                    {{ $area }}
                                                                </td>
                                                            @endif
                                                            
                                                            <td class="text-center sticky-col sticky-col-3">{{ $matgr }}</td>
                                                            <td class="sticky-col sticky-col-4">{{ $matData['desc'] }}</td>

                                                            @foreach($matrixPeriods as $period)
                                                                @if(isset($matData['periods'][$period]))
                                                                    {{-- Penjualan Columns --}}
                                                                    <td class="text-end sales-cell" onclick="window.openMaterialModal('Industrial', '{{ $area }}', '{{ $matgr }}', '{{ $matData['desc'] }}', '{{ $period }}', {{ $selected_year }})">{{ number_format($matData['periods'][$period]['fg_kg'], 2) }}</td>
                                                                    <td class="text-end sales-cell" onclick="window.openMaterialModal('Industrial', '{{ $area }}', '{{ $matgr }}', '{{ $matData['desc'] }}', '{{ $period }}', {{ $selected_year }})">{{ number_format($matData['periods'][$period]['fg_usd'], 2) }}</td>
                                                                    <td class="text-end sales-cell" onclick="window.openMaterialModal('Industrial', '{{ $area }}', '{{ $matgr }}', '{{ $matData['desc'] }}', '{{ $period }}', {{ $selected_year }})">{{ number_format($matData['periods'][$period]['fg_avg'], 2) }}</td>
                                                                    {{-- RM Columns --}}
                                                                    <td class="text-end">{{ number_format($matData['periods'][$period]['rm_kg'], 2) }}</td>
                                                                    <td class="text-end">{{ number_format($matData['periods'][$period]['rm_usd'], 2) }}</td>
                                                                    <td class="text-end">{{ number_format($matData['periods'][$period]['rm_avg'], 2) }}</td>
                                                                    {{-- Conv Column --}}
                                                                    <td class="text-end">{{ number_format($matData['periods'][$period]['conv'], 2) }}</td>
                                                                @else
                                                                    {{-- Penjualan Columns --}}
                                                                    <td class="text-end sales-cell">-</td>
                                                                    <td class="text-end sales-cell">-</td>
                                                                    <td class="text-end sales-cell">-</td>
                                                                    {{-- RM Columns --}}
                                                                    <td class="text-end">-</td>
                                                                    <td class="text-end">-</td>
                                                                    <td class="text-end">-</td>
                                                                    {{-- Conv Column --}}
                                                                    <td class="text-end">-</td>
                                                                @endif
                                                            @endforeach
                                                        </tr>
                                                    @endforeach

                                                    {{-- Area Total Row --}}
                                                    <tr class="table-light" style="font-weight: bold;">
                                                        <td class="text-end sticky-col sticky-col-3">Total {{ $area }}</td>
                                                        <td class="sticky-col sticky-col-4"></td>
                                                        @foreach($matrixPeriods as $period)
                                                            @if(isset($areaTotals[$period]))
                                                                {{-- Penjualan Columns --}}
                                                                <td class="text-end">{{ number_format($areaTotals[$period]['fg_kg'], 2) }}</td>
                                                                <td class="text-end">{{ number_format($areaTotals[$period]['fg_usd'], 2) }}</td>
                                                                <td class="text-end">{{ number_format($areaTotals[$period]['fg_avg'], 2) }}</td>
                                                                {{-- RM Columns --}}
                                                                <td class="text-end">{{ number_format($areaTotals[$period]['rm_kg'], 2) }}</td>
                                                                <td class="text-end">{{ number_format($areaTotals[$period]['rm_usd'], 2) }}</td>
                                                                <td class="text-end">{{ number_format($areaTotals[$period]['rm_avg'], 2) }}</td>
                                                                {{-- Conv Column --}}
                                                                <td class="text-end">{{ number_format($areaTotals[$period]['conv'], 2) }}</td>
                                                            @else
                                                                {{-- Penjualan Columns --}}
                                                                <td class="text-end">-</td>
                                                                <td class="text-end">-</td>
                                                                <td class="text-end">-</td>
                                                                {{-- RM Columns --}}
                                                                <td class="text-end">-</td>
                                                                <td class="text-end">-</td>
                                                                <td class="text-end">-</td>
                                                                {{-- Conv Column --}}
                                                                <td class="text-end">-</td>
                                                            @endif
                                                        @endforeach
                                                    </tr>
                                                @endforeach
                                            @endif

                                            {{-- Grand Total Row --}}
                                            <tr class="table-cyan" style="font-weight: bold;">
                                                <td colspan="4" class="text-center sticky-col sticky-col-1">Grand Total</td>
                                                @foreach($matrixPeriods as $period)
                                                    @if(isset($grandTotals[$period]))
                                                        {{-- Penjualan Columns --}}
                                                        <td class="text-end">{{ number_format($grandTotals[$period]['fg_kg'], 2) }}</td>
                                                        <td class="text-end">{{ number_format($grandTotals[$period]['fg_usd'], 2) }}</td>
                                                        <td class="text-end">{{ number_format($grandTotals[$period]['fg_avg'], 2) }}</td>
                                                        {{-- RM Columns --}}
                                                        <td class="text-end">{{ number_format($grandTotals[$period]['rm_kg'], 2) }}</td>
                                                        <td class="text-end">{{ number_format($grandTotals[$period]['rm_usd'], 2) }}</td>
                                                        <td class="text-end">{{ number_format($grandTotals[$period]['rm_avg'], 2) }}</td>
                                                        {{-- Conv Column --}}
                                                        <td class="text-end">{{ number_format($grandTotals[$period]['conv'], 2) }}</td>
                                                    @else
                                                        {{-- Penjualan Columns --}}
                                                        <td class="text-end">-</td>
                                                        <td class="text-end">-</td>
                                                        <td class="text-end">-</td>
                                                        {{-- RM Columns --}}
                                                        <td class="text-end">-</td>
                                                        <td class="text-end">-</td>
                                                        <td class="text-end">-</td>
                                                        {{-- Conv Column --}}
                                                        <td class="text-end">-</td>
                                                    @endif
                                                @endforeach
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    @else
                        <div class="row px-4 py-3">
                            <div class="col-12 text-center">
                                <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
                                <p class="text-muted">Tidak ada data untuk tahun {{ $selected_year }}</p>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    {{-- Material Detail Modal --}}
    <div class="modal fade" id="materialDetailModal" tabindex="-1" aria-labelledby="materialDetailModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content shadow">
                <div class="modal-header" style="background-color: #00b7bd; color: white;">
                    <h5 class="modal-title fw-bold" id="materialDetailModalLabel"><i class="fas fa-file-invoice me-2"></i>Detail Transaksi</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body px-4 py-4">
                    <div class="card mb-4 border-0 shadow-sm bg-light">
                        <div class="card-body py-3">
                            <div class="row g-3">
                                <div class="col-md-3">
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0">
                                            <div class="bg-white rounded-circle d-flex align-items-center justify-content-center shadow-sm" style="width: 42px; height: 42px;">
                                                <i class="fas fa-industry text-primary"></i>
                                            </div>
                                        </div>
                                        <div class="flex-grow-1 ms-3">
                                            <div class="text-muted small">Divisi</div>
                                            <div class="fw-semibold" id="modalDivision">-</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0">
                                            <div class="bg-white rounded-circle d-flex align-items-center justify-content-center shadow-sm" style="width: 42px; height: 42px;">
                                                <i class="fas fa-globe text-success"></i>
                                            </div>
                                        </div>
                                        <div class="flex-grow-1 ms-3">
                                            <div class="text-muted small">Area</div>
                                            <div class="fw-semibold" id="modalArea">-</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0">
                                            <div class="bg-white rounded-circle d-flex align-items-center justify-content-center shadow-sm" style="width: 42px; height: 42px;">
                                                <i class="fas fa-box text-info"></i>
                                            </div>
                                        </div>
                                        <div class="flex-grow-1 ms-3">
                                            <div class="text-muted small">Material</div>
                                            <div class="fw-semibold" id="modalMaterial">-</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0">
                                            <div class="bg-white rounded-circle d-flex align-items-center justify-content-center shadow-sm" style="width: 42px; height: 42px;">
                                                <i class="fas fa-calendar text-warning"></i>
                                            </div>
                                        </div>
                                        <div class="flex-grow-1 ms-3">
                                            <div class="text-muted small">Periode</div>
                                            <div class="fw-semibold" id="modalPeriod">-</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="table-responsive rounded border">
                        <table class="table table-hover table-bordered mb-0" id="modalTransactionTable">
                            <thead>
                                <tr class="table-cyan">
                                    <th class="text-center" style="width: 50px;">No</th>
                                    <th class="text-center" style="width: 140px;">Bill Doc</th>
                                    <th class="text-center" style="width: 90px;">Item No</th>
                                    <th class="text-center">Sales (kg)</th>
                                    <th class="text-center">Amount (USD)</th>
                                    <th class="text-center">Amount (IDR)</th>
                                    <th class="text-center">Avg Price (USD)</th>
                                    <th class="text-center">Exchange Rate</th>
                                </tr>
                            </thead>
                            <tbody id="modalTransactionBody">
                                <tr><td colspan="8" class="text-center py-5 text-muted">Klik kolom penjualan untuk melihat detail transaksi.</td></tr>
                            </tbody>
                        </table>
                    </div>
                    <div id="modalPagination" class="d-flex justify-content-center mt-4"></div>
                </div>
                <div class="modal-footer bg-light d-flex justify-content-between align-items-center">
                    <div class="d-flex gap-4" id="modalSummaryTotals">
                        <div class="d-flex align-items-center gap-2">
                            <span class="text-muted small">Total Sales (Kg):</span>
                            <span class="fw-bold text-primary" id="modalTotalSalesKg">0.00</span>
                        </div>
                        <div class="d-flex align-items-center gap-2">
                            <span class="text-muted small">Total Amount (USD):</span>
                            <span class="fw-bold text-success" id="modalTotalAmountUsd">0.00</span>
                        </div>
                        <div class="d-flex align-items-center gap-2">
                            <span class="text-muted small">Avg Price:</span>
                            <span class="fw-bold text-info" id="modalAvgPrice">0.00</span>
                        </div>
                    </div>
                    <button type="button" class="btn btn-outline-secondary px-4" data-bs-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>
</div>
{{-- check flag js on dmenu --}}
@if ($jsmenu == '1')
@if (view()->exists("js.{$dmenu}"))
@push('addjs')
{{-- file js in folder (resources/views/js) --}}
@include('js.' . $dmenu);
@endpush
@else
@push('addjs')
<script>
    Swal.fire({
        title: 'JS Not Found!!',
        text: 'Please Create File JS',
        icon: 'error',
        confirmButtonColor: '#028284'
    });
</script>
@endpush
@endif
@endif
@endsection

@push('js')
<script>
    // ==================== MATERIAL DETAIL MODAL LOGIC ====================

    let currentMaterialModalState = {
        division: null,
        area: null,
        matgr: null,
        materialName: null,
        period: null,
        year: null,
        perPage: 25
    };

    window.openMaterialModal = function(division, area, matgr, materialName, period, year) {
        currentMaterialModalState = { division, area, matgr, materialName, period, year, perPage: 25 };
        document.getElementById('modalDivision').textContent = division;
        document.getElementById('modalArea').textContent = area;
        document.getElementById('modalMaterial').textContent = matgr + ' - ' + materialName;

        const monthNames = {'001': 'Jan', '002': 'Feb', '003': 'Mar', '004': 'Apr', '005': 'May', '006': 'Jun', '007': 'Jul', '008': 'Aug', '009': 'Sep', '010': 'Oct', '011': 'Nov', '012': 'Dec'};
        document.getElementById('modalPeriod').textContent = (monthNames[period] || period) + ' ' + year;

        window.loadMaterialTransactions(1);

        const modalEl = document.getElementById('materialDetailModal');
        if (typeof bootstrap !== 'undefined') {
            const modal = bootstrap.Modal.getOrCreateInstance(modalEl);
            modal.show();
        } else {
            modalEl.classList.add('show');
            modalEl.style.display = 'block';
            modalEl.setAttribute('aria-hidden', 'false');
            document.body.classList.add('modal-open');
        }
    };

    window.loadMaterialTransactions = function(page = 1) {
        const { division, area, matgr, period, year, perPage } = currentMaterialModalState;
        if (!matgr) return;

        const url = `{{ route('rptfgr.api.transactions') }}?year=${year}&period=${period}&matgr=${encodeURIComponent(matgr)}&area=${encodeURIComponent(area)}&division=${encodeURIComponent(division)}&page=${page}&per_page=${perPage}`;

        const tbody = document.getElementById('modalTransactionBody');
        tbody.innerHTML = '<tr><td colspan="8" class="text-center py-5"><div class="spinner-border text-primary" role="status" style="width: 2.5rem; height: 2.5rem;"><span class="visually-hidden">Loading...</span></div><p class="mt-3 text-muted">Memuat data transaksi...</p></td></tr>';

        fetch(url)
            .then(response => {
                if (!response.ok) throw new Error('Network response was not ok (HTTP ' + response.status + ')');
                return response.json();
            })
            .then(result => {
                if (result.error) throw new Error(result.error);
                renderMaterialModalTable(result.data, result.pagination.from);
                renderMaterialModalPagination(result.pagination);
                updateMaterialModalTotals(result.totals);
            })
            .catch(error => {
                console.error('Error fetching transactions:', error);
                tbody.innerHTML = '<tr><td colspan="8" class="text-center text-danger py-5"><i class="fas fa-exclamation-circle fa-2x mb-3"></i><p>Gagal memuat data. Silakan coba lagi.</p></td></tr>';
                updateMaterialModalTotals(null);
            });
    };

    function renderMaterialModalTable(data, startNumber = 1) {
        const tbody = document.getElementById('modalTransactionBody');

        if (!data || data.length === 0) {
            tbody.innerHTML = '<tr><td colspan="8" class="text-center py-5 text-muted"><i class="fas fa-inbox fa-2x mb-3 text-secondary"></i><p>Tidak ada data transaksi untuk periode ini.</p></td></tr>';
            return;
        }

        const fragment = document.createDocumentFragment();
        data.forEach((item, index) => {
            const actWeight = Number(item.ACTWEIGHT || 0);
            const jourValUsd = Number(item.JOURVALUSD || 0);

            const tr = document.createElement('tr');
            tr.innerHTML = `
                <td class="text-center fw-semibold">${startNumber + index}</td>
                <td class="text-center">${item.BILLDOC || '-'}</td>
                <td class="text-center">${item.ITMNO || '-'}</td>
                <td class="text-center">${actWeight.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
                <td class="text-center">${jourValUsd.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
                <td class="text-center">${Number(item.NETVAL || 0).toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
                <td class="text-center">${Number(item.avg_price || 0).toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
                <td class="text-center">${Number(item.exchange_rate || 0).toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
            `;
            fragment.appendChild(tr);
        });
        tbody.innerHTML = '';
        tbody.appendChild(fragment);
    }

    function updateMaterialModalTotals(totals) {
        const totalSalesKgEl = document.getElementById('modalTotalSalesKg');
        const totalAmountUsdEl = document.getElementById('modalTotalAmountUsd');
        const avgPriceEl = document.getElementById('modalAvgPrice');

        if (!totals) {
            totalSalesKgEl.textContent = '0.00';
            totalAmountUsdEl.textContent = '0.00';
            avgPriceEl.textContent = '0.00';
            return;
        }

        const totalSalesKg = Number(totals.total_sales_kg || 0);
        const totalAmountUsd = Number(totals.total_amount_usd || 0);
        const avgPrice = Number(totals.avg_price || 0);

        totalSalesKgEl.textContent = totalSalesKg.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2});
        totalAmountUsdEl.textContent = totalAmountUsd.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2});
        avgPriceEl.textContent = avgPrice.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2});
    }

    function renderMaterialModalPagination(pagination) {
        const container = document.getElementById('modalPagination');
        if (!pagination || pagination.last_page <= 1) {
            container.innerHTML = '';
            return;
        }

        let items = '';

        items += pagination.current_page > 1
            ? `<li class="page-item"><a class="page-link" href="#" onclick="event.preventDefault(); window.loadMaterialTransactions(${pagination.current_page - 1});"><span aria-hidden="true">&laquo;</span></a></li>`
            : `<li class="page-item disabled"><span class="page-link"><span aria-hidden="true">&laquo;</span></span></li>`;

        let start = Math.max(1, pagination.current_page - 2);
        let end = Math.min(pagination.last_page, start + 4);
        if (end - start < 4) start = Math.max(1, end - 4);

        for (let i = start; i <= end; i++) {
            items += i === pagination.current_page
                ? `<li class="page-item active" aria-current="page"><span class="page-link">${i}</span></li>`
                : `<li class="page-item"><a class="page-link" href="#" onclick="event.preventDefault(); window.loadMaterialTransactions(${i});">${i}</a></li>`;
        }

        items += pagination.has_more
            ? `<li class="page-item"><a class="page-link" href="#" onclick="event.preventDefault(); window.loadMaterialTransactions(${pagination.current_page + 1});"><span aria-hidden="true">&raquo;</span></a></li>`
            : `<li class="page-item disabled"><span class="page-link"><span aria-hidden="true">&raquo;</span></span></li>`;

        container.innerHTML = `<nav aria-label="Page navigation"><ul class="pagination pagination-sm mb-0">${items}</ul></nav>`;
    }
</script>
@endpush