@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
@include('layouts.navbars.auth.topnav', ['title' => ''])
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="row mx-1">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">Result {{ $title_menu }}</h5>
                    </div>
                    <hr class="horizontal dark mt-0">

                    {{-- Top Customer Ranking & Charts Tabs --}}
                    @if(!empty($top_customers))

                        {{-- Tab Navigation --}}
                        <ul class="nav nav-tabs nav-fill mb-3" id="divisionTab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="industrial-tab-btn" data-bs-toggle="tab" data-bs-target="#industrial-tab-pane" type="button" role="tab" aria-controls="industrial-tab-pane" aria-selected="true">
                                    <i class="fas fa-industry me-2"></i>Industrial
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="hygiene-tab-btn" data-bs-toggle="tab" data-bs-target="#hygiene-tab-pane" type="button" role="tab" aria-controls="hygiene-tab-pane" aria-selected="false">
                                    <i class="fas fa-heartbeat me-2"></i>Hygiene & Medical
                                </button>
                            </li>
                        </ul>
                        
                        {{-- Tab Content --}}
                        <div class="tab-content" id="divisionTabContent">
                            
                            {{-- Industrial Tab --}}
                            <div class="tab-pane fade show active" id="industrial-tab-pane" role="tabpanel" aria-labelledby="industrial-tab-btn" tabindex="0">
                                @if(!empty($top_customers['industrial']['customers']))
                                    <div class="row px-4 py-3">
                                        <div class="col-12">
                                            <div class="d-flex justify-content-between align-items-center mb-3">
                                                <h6 class="mb-0">
                                                    <i class="fas fa-industry me-2"></i>
                                                    <span id="industrial-table-title">Top 10 Customers - {{ $top_customers['industrial']['category_name'] }}</span>
                                                </h6>
                                                <div class="d-flex align-items-center gap-3">
                                                    <div class="d-flex align-items-center gap-2">
                                                        <label class="mb-0">Month:</label>
                                                        <select class="form-select form-select-sm period-dropdown" style="width: 120px;" id="industrial-table-month" onchange="updateTableMonth('industrial', this.value)">
                                                            @foreach($top_customers['industrial']['periods'] as $index => $period)
                                                                @php
                                                                    $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'];
                                                                    $monthName = $monthNames[$period] ?? $period;
                                                                @endphp
                                                                <option value="{{ $index }}">{{ $monthName }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div class="table-responsive" style="overflow-x: auto;">
                                                <table class="table table-sm table-hover table-bordered table-fixed" id="industrial-top-table">
                                                    <thead>
                                                        <tr class="table-cyan">
                                                            <th class="text-center freeze-col-1" rowspan="2" style="vertical-align: middle; width: 50px;">Rank</th>
                                                            <th class="text-center freeze-col-2" rowspan="2" style="vertical-align: middle;">Customer Name</th>
                                                            @foreach($top_customers['industrial']['periods'] as $period)
                                                                @php
                                                                    $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'
                                                                    ];
                                                                    $monthName = $monthNames[$period] ?? $period;
                                                                @endphp
                                                                <th class="text-center month-header" data-period="{{ $period }}" colspan="3">{{ $monthName }} {{ $selected_year }}</th>
                                                            @endforeach
                                                        </tr>
                                                        <tr class="table-cyan">
                                                            @foreach($top_customers['industrial']['periods'] as $period)
                                                                <th class="text-center month-subheader" data-period="{{ $period }}">Sales (kg)</th>
                                                                <th class="text-center month-subheader" data-period="{{ $period }}">Amount (USD)</th>
                                                                <th class="text-center month-subheader" data-period="{{ $period }}">Avg Price</th>
                                                            @endforeach
                                                        </tr>
                                                    </thead>
                                                    <tbody id="industrial-top-tbody">
                                                        @foreach(array_slice($top_customers['industrial']['customers'], 0, 10) as $customer)
                                                            <tr class="top-customer-row" data-soldto="{{ $customer['sold_to'] }}" data-customer='@json($customer)' style="transition: all 0.5s ease;">
                                                                <td class="text-center rank-cell freeze-col-1">{{ $customer['rank'] }}</td>
                                                                <td class="customer-name freeze-col-2">{{ $customer['customer_name'] }}</td>
                                                                @foreach($top_customers['industrial']['periods'] as $period)
                                                                    <td class="text-center month-cell" data-period="{{ $period }}" data-type="sales" onclick="window.openTransactionModal('industrial', '{{ $customer['sold_to'] }}', '{{ $customer['customer_name'] }}', '{{ $period }}', window.chartData.year)">{{ number_format($customer['monthly_data'][$period]['sales_kg'] ?? 0, 2) }}</td>
                                                                    <td class="text-center month-cell" data-period="{{ $period }}" data-type="amount" onclick="window.openTransactionModal('industrial', '{{ $customer['sold_to'] }}', '{{ $customer['customer_name'] }}', '{{ $period }}', window.chartData.year)">{{ number_format($customer['monthly_data'][$period]['amount_usd'] ?? 0, 2) }}</td>
                                                                    <td class="text-center month-cell" data-period="{{ $period }}" data-type="price" onclick="window.openTransactionModal('industrial', '{{ $customer['sold_to'] }}', '{{ $customer['customer_name'] }}', '{{ $period }}', window.chartData.year)">{{ number_format($customer['monthly_data'][$period]['avg_price'] ?? 0, 2) }}</td>
                                                                @endforeach
                                                            </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            </div>
                                            
                                            {{-- Table Controls --}}
                                            <div class="table-controls mt-3 p-3 bg-light rounded d-flex align-items-center gap-3">
                                                <button class="btn btn-sm btn-outline-primary" onclick="prevTableMonth('industrial')" title="Previous Month">
                                                    <i class="fas fa-step-backward"></i>
                                                </button>
                                                <button class="btn btn-sm btn-primary btn-table-play-pause" id="industrial-play-btn" onclick="toggleTableAnimation('industrial')" style="width: 40px;">
                                                    <i class="fas fa-play"></i>
                                                </button>
                                                <button class="btn btn-sm btn-outline-primary" onclick="nextTableMonth('industrial')" title="Next Month">
                                                    <i class="fas fa-step-forward"></i>
                                                </button>
                                                
                                                <input type="range" class="form-range flex-grow-1 month-slider" id="industrial-table-slider" min="0" max="{{ count($top_customers['industrial']['periods']) - 1 }}" value="0" oninput="updateTableMonth('industrial', this.value)">
                                                
                                                <span class="badge bg-primary fs-6 slider-label" id="industrial-table-slider-label" style="min-width: 60px;">Jan</span>
                                            </div>
                                            
                                            <p class="text-muted text-center mt-2">
                                                <small>Showing Top 10 Customers</small>
                                            </p>
                                        </div>
                                    </div>
                                @endif
                                
                                {{-- Industrial Chart --}}
                                @if(!empty($chart_data['industrial']))
                                    <div class="row px-4 py-3">
                                        <div class="col-12">
                                            <h5 class="mb-3">
                                                <i class="fas fa-chart-bubble me-2"></i>
                                                Price Trend Bubble Chart ({{ $chart_data['year'] }})
                                            </h5>
                                            <div class="card mb-4" id="industrial-chart-card">
                                                <div class="card-header bg-light">
                                                    <div class="d-flex justify-content-between align-items-center">
                                                        <h6 class="mb-0">
                                                            <i class="fas fa-industry me-2"></i>
                                                            Industrial Division
                                                        </h6>
                                                        <div class="d-flex align-items-center gap-3">
                                                            <div class="d-flex align-items-center gap-2">
                                                                <label class="mb-0">Show:</label>
                                                                <select class="form-select form-select-sm" style="width: 110px;" id="industrial-chart-show" onchange="updateChartFilter('industrial', this.value)">
                                                                    <option value="10">Top 10</option>
                                                                    <option value="all">All</option>
                                                                </select>
                                                            </div>
                                                            <div class="d-flex align-items-center gap-2 d-none d-md-flex">
                                                                <label class="mb-0">Month:</label>
                                                                <select class="form-select form-select-sm period-dropdown" style="width: 120px;" id="industrial-month-select" onchange="updateChartMonthForCategory('industrial', this.value)">
                                                                    @foreach($chart_data['periods'] as $index => $period)
                                                                        @php
                                                                            $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'];
                                                                            $monthName = $monthNames[$period] ?? $period;
                                                                        @endphp
                                                                        <option value="{{ $index }}">{{ $monthName }}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                            <button class="btn btn-sm btn-outline-secondary mb-0" onclick="toggleFullscreen('industrial-chart-card')" title="Fullscreen">
                                                                <i class="fas fa-expand"></i>
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="card-body d-flex flex-column">
                                                    <div id="industrial-bubble-chart" class="chart-container" style="width: 100%; height: 500px;"></div>
                                                    
                                                    {{-- Player Controls --}}
                                                    <div class="chart-controls mt-3 p-3 bg-light rounded d-flex align-items-center gap-3">
                                                        <button class="btn btn-sm btn-outline-primary" onclick="prevMonthForCategory('industrial')" title="Previous Month">
                                                            <i class="fas fa-step-backward"></i>
                                                        </button>
                                                        <button class="btn btn-sm btn-primary btn-play-pause" id="industrial-play-pause" onclick="toggleAnimationForCategory('industrial')" style="width: 40px;">
                                                            <i class="fas fa-play"></i>
                                                        </button>
                                                        <button class="btn btn-sm btn-outline-primary" onclick="nextMonthForCategory('industrial')" title="Next Month">
                                                            <i class="fas fa-step-forward"></i>
                                                        </button>
                                                        
                                                        <input type="range" class="form-range flex-grow-1 month-slider" id="industrial-slider" min="0" max="{{ count($chart_data['periods']) - 1 }}" value="0" oninput="updateChartMonthForCategory('industrial', this.value)">
                                                        
                                                        <span class="badge bg-primary fs-6 slider-label" id="industrial-slider-label" style="min-width: 60px;">Jan</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            </div>
                            
                            {{-- Hygiene & Medical Tab --}}
                            <div class="tab-pane fade" id="hygiene-tab-pane" role="tabpanel" aria-labelledby="hygiene-tab-btn" tabindex="0">
                                @if(!empty($top_customers['hygiene_medical']['customers']))
                                    <div class="row px-4 py-3">
                                        <div class="col-12">
                                            <div class="d-flex justify-content-between align-items-center mb-3">
                                                <h6 class="mb-0">
                                                    <i class="fas fa-heartbeat me-2"></i>
                                                    <span id="hygiene-table-title">Top 10 Customers - {{ $top_customers['hygiene_medical']['category_name'] }}</span>
                                                </h6>
                                                <div class="d-flex align-items-center gap-3">
                                                    <div class="d-flex align-items-center gap-2">
                                                        <label class="mb-0">Month:</label>
                                                        <select class="form-select form-select-sm period-dropdown" style="width: 120px;" id="hygiene-table-month" onchange="updateTableMonth('hygiene', this.value)">
                                                            @foreach($top_customers['hygiene_medical']['periods'] as $index => $period)
                                                                @php
                                                                    $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'];
                                                                    $monthName = $monthNames[$period] ?? $period;
                                                                @endphp
                                                                <option value="{{ $index }}">{{ $monthName }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div class="table-responsive" style="overflow-x: auto;">
                                                <table class="table table-sm table-hover table-bordered table-fixed" id="hygiene-top-table">
                                                    <thead>
                                                        <tr class="table-cyan">
                                                            <th class="text-center freeze-col-1" rowspan="2" style="vertical-align: middle; width: 50px;">Rank</th>
                                                            <th class="text-center freeze-col-2" rowspan="2" style="vertical-align: middle;">Customer Name</th>
                                                            @foreach($top_customers['hygiene_medical']['periods'] as $period)
                                                                @php
                                                                    $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'
                                                                    ];
                                                                    $monthName = $monthNames[$period] ?? $period;
                                                                @endphp
                                                                <th class="text-center month-header" data-period="{{ $period }}" colspan="3">{{ $monthName }} {{ $selected_year }}</th>
                                                            @endforeach
                                                        </tr>
                                                        <tr class="table-cyan">
                                                            @foreach($top_customers['hygiene_medical']['periods'] as $period)
                                                                <th class="text-center month-subheader" data-period="{{ $period }}">Sales (kg)</th>
                                                                <th class="text-center month-subheader" data-period="{{ $period }}">Amount (USD)</th>
                                                                <th class="text-center month-subheader" data-period="{{ $period }}">Avg Price</th>
                                                            @endforeach
                                                        </tr>
                                                    </thead>
                                                    <tbody id="hygiene-top-tbody">
                                                        @foreach(array_slice($top_customers['hygiene_medical']['customers'], 0, 10) as $customer)
                                                            <tr class="top-customer-row" data-soldto="{{ $customer['sold_to'] }}" data-customer='@json($customer)' style="transition: all 0.5s ease;">
                                                                <td class="text-center rank-cell freeze-col-1">{{ $customer['rank'] }}</td>
                                                                <td class="customer-name freeze-col-2">{{ $customer['customer_name'] }}</td>
                                                                @foreach($top_customers['hygiene_medical']['periods'] as $period)
                                                                    <td class="text-center month-cell" data-period="{{ $period }}" data-type="sales" onclick="window.openTransactionModal('hygiene', '{{ $customer['sold_to'] }}', '{{ $customer['customer_name'] }}', '{{ $period }}', window.chartData.year)">{{ number_format($customer['monthly_data'][$period]['sales_kg'] ?? 0, 2) }}</td>
                                                                    <td class="text-center month-cell" data-period="{{ $period }}" data-type="amount" onclick="window.openTransactionModal('hygiene', '{{ $customer['sold_to'] }}', '{{ $customer['customer_name'] }}', '{{ $period }}', window.chartData.year)">{{ number_format($customer['monthly_data'][$period]['amount_usd'] ?? 0, 2) }}</td>
                                                                    <td class="text-center month-cell" data-period="{{ $period }}" data-type="price" onclick="window.openTransactionModal('hygiene', '{{ $customer['sold_to'] }}', '{{ $customer['customer_name'] }}', '{{ $period }}', window.chartData.year)">{{ number_format($customer['monthly_data'][$period]['avg_price'] ?? 0, 2) }}</td>
                                                                @endforeach
                                                            </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            </div>
                                            
                                            {{-- Table Controls --}}
                                            <div class="table-controls mt-3 p-3 bg-light rounded d-flex align-items-center gap-3">
                                                <button class="btn btn-sm btn-outline-primary" onclick="prevTableMonth('hygiene')" title="Previous Month">
                                                    <i class="fas fa-step-backward"></i>
                                                </button>
                                                <button class="btn btn-sm btn-primary btn-table-play-pause" id="hygiene-play-btn" onclick="toggleTableAnimation('hygiene')" style="width: 40px;">
                                                    <i class="fas fa-play"></i>
                                                </button>
                                                <button class="btn btn-sm btn-outline-primary" onclick="nextTableMonth('hygiene')" title="Next Month">
                                                    <i class="fas fa-step-forward"></i>
                                                </button>
                                                
                                                <input type="range" class="form-range flex-grow-1 month-slider" id="hygiene-table-slider" min="0" max="{{ count($top_customers['hygiene_medical']['periods']) - 1 }}" value="0" oninput="updateTableMonth('hygiene', this.value)">
                                                
                                                <span class="badge bg-primary fs-6 slider-label" id="hygiene-table-slider-label" style="min-width: 60px;">Jan</span>
                                            </div>
                                            
                                            <p class="text-muted text-center mt-2">
                                                <small>Showing Top 10 Customers</small>
                                            </p>
                                        </div>
                                    </div>
                                @endif
                                
                                {{-- Hygiene & Medical Chart --}}
                                @if(!empty($chart_data['hygiene_medical']))
                                    <div class="row px-4 py-3">
                                        <div class="col-12">
                                            <h5 class="mb-3">
                                                <i class="fas fa-chart-bubble me-2"></i>
                                                Price Trend Bubble Chart ({{ $chart_data['year'] }})
                                            </h5>
                                            <div class="card mb-4" id="hygiene-chart-card">
                                                <div class="card-header bg-light">
                                                    <div class="d-flex justify-content-between align-items-center">
                                                        <h6 class="mb-0">
                                                            <i class="fas fa-heartbeat me-2"></i>
                                                            Hygiene & Medical Division
                                                        </h6>
                                                        <div class="d-flex align-items-center gap-3">
                                                            <div class="d-flex align-items-center gap-2">
                                                                <label class="mb-0">Show:</label>
                                                                <select class="form-select form-select-sm" style="width: 110px;" id="hygiene-chart-show" onchange="updateChartFilter('hygiene', this.value)">
                                                                    <option value="10">Top 10</option>
                                                                    <option value="all">All</option>
                                                                </select>
                                                            </div>
                                                            <div class="d-flex align-items-center gap-2 d-none d-md-flex">
                                                                <label class="mb-0">Month:</label>
                                                                <select class="form-select form-select-sm period-dropdown" style="width: 120px;" id="hygiene-month-select" onchange="updateChartMonthForCategory('hygiene', this.value)">
                                                                    @foreach($chart_data['periods'] as $index => $period)
                                                                        @php
                                                                            $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'];
                                                                            $monthName = $monthNames[$period] ?? $period;
                                                                        @endphp
                                                                        <option value="{{ $index }}">{{ $monthName }}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                            <button class="btn btn-sm btn-outline-secondary mb-0" onclick="toggleFullscreen('hygiene-chart-card')" title="Fullscreen">
                                                                <i class="fas fa-expand"></i>
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="card-body d-flex flex-column">
                                                    <div id="hygiene-bubble-chart" class="chart-container" style="width: 100%; height: 500px;"></div>
                                                    
                                                    {{-- Player Controls --}}
                                                    <div class="chart-controls mt-3 p-3 bg-light rounded d-flex align-items-center gap-3">
                                                        <button class="btn btn-sm btn-outline-primary" onclick="prevMonthForCategory('hygiene')" title="Previous Month">
                                                            <i class="fas fa-step-backward"></i>
                                                        </button>
                                                        <button class="btn btn-sm btn-primary btn-play-pause" id="hygiene-play-pause" onclick="toggleAnimationForCategory('hygiene')" style="width: 40px;">
                                                            <i class="fas fa-play"></i>
                                                        </button>
                                                        <button class="btn btn-sm btn-outline-primary" onclick="nextMonthForCategory('hygiene')" title="Next Month">
                                                            <i class="fas fa-step-forward"></i>
                                                        </button>
                                                        
                                                        <input type="range" class="form-range flex-grow-1 month-slider" id="hygiene-slider" min="0" max="{{ count($chart_data['periods']) - 1 }}" value="0" oninput="updateChartMonthForCategory('hygiene', this.value)">
                                                        
                                                        <span class="badge bg-primary fs-6 slider-label" id="hygiene-slider-label" style="min-width: 60px;">Jan</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>

                        {{-- Transaction Detail Modal --}}
                        <div class="modal fade" id="transactionModal" tabindex="-1" aria-labelledby="transactionModalLabel" 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="transactionModalLabel"><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-4">
                                                        <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-user text-primary"></i>
                                                                </div>
                                                            </div>
                                                            <div class="flex-grow-1 ms-3">
                                                                <div class="text-muted small">Customer</div>
                                                                <div class="fw-semibold" id="modalCustomerName">-</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <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-alt text-success"></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 class="col-md-4">
                                                        <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-info"></i>
                                                                </div>
                                                            </div>
                                                            <div class="flex-grow-1 ms-3">
                                                                <div class="text-muted small">Tahun</div>
                                                                <div class="fw-semibold" id="modalYear">-</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">Pilih customer 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>

                        {{-- Hidden data for JavaScript --}}
                        <script>
                            window.topCustomersData = {
                                industrial: @json($top_customers['industrial']['customers'] ?? []),
                                hygiene: @json($top_customers['hygiene_medical']['customers'] ?? []),
                                industrial_periods: @json($top_customers['industrial']['periods'] ?? []),
                                hygiene_periods: @json($top_customers['hygiene_medical']['periods'] ?? [])
                            };
                            
                            window.chartData = {
                                industrial: @json($chart_data['industrial'] ?? []),
                                hygiene_medical: @json($chart_data['hygiene_medical'] ?? []),
                                periods: @json($chart_data['periods'] ?? []),
                                year: @json($chart_data['year'] ?? [])
                            };
                        </script>
                    @endif
                </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('css')
<style>
    .table-cyan {
        background-color: #00b7bd !important;
        color: white !important;
    }
    .table-cyan th {
        color: white !important;
        font-weight: 600;
        border: 1px solid #009fa3 !important;
    }
    
    /* Top Customer Table Styling */
    #industrial-top-table tbody tr:hover,
    #hygiene-top-table tbody tr:hover {
        background-color: #f8f9fa;
    }
    
    #industrial-top-table td,
    #hygiene-top-table td {
        font-size: 0.85rem;
        padding: 8px 4px;
        white-space: nowrap;
    }
    
    #industrial-top-table th,
    #hygiene-top-table th {
        font-size: 0.8rem;
        padding: 8px 4px;
    }
    
    .top-customer-row td:first-child {
        font-weight: bold;
        background-color: #f8f9fa;
    }
    
    .table-cyan th[colspan="3"] {
        border-bottom: 2px solid #009fa3 !important;
    }

    /* Fullscreen Mode Specific Styling */
    .card.is-fullscreen {
        width: 100vw !important;
        height: 100vh !important;
        max-width: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        display: flex;
        flex-direction: column;
        background-color: #fff;
        overflow: hidden;
    }

    .card.is-fullscreen .card-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 1rem 2rem;
    }

    .card.is-fullscreen .chart-container {
        flex: 1;
        height: auto !important; /* Biarkan flexbox yang mengatur height */
        min-height: 300px;
    }

    .chart-controls {
        box-shadow: inset 0 0 5px rgba(0,0,0,0.05);
    }
    
    /* Tab Styling */
    .nav-tabs .nav-link {
        color: #495057;
        font-weight: 500;
        border: none;
        border-bottom: 3px solid transparent;
        padding: 12px 24px;
        transition: all 0.3s ease;
    }
    
    .nav-tabs .nav-link:hover {
        border-color: #dee2e6;
        background-color: #f8f9fa;
    }
    
    .nav-tabs .nav-link.active {
        color: #00b7bd;
        border-bottom: 3px solid #00b7bd;
        background-color: transparent;
        font-weight: 600;
    }
    
    .tab-content {
        padding-top: 20px;
    }
    
    /* Table Animation & Highlighting Styles */
    .top-customer-row {
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .top-customer-row:hover {
        background-color: #e3f2fd !important;
        transform: translateX(5px);
    }
    
    /* Highlighted month cells */
    .month-cell[data-highlighted="true"] {
        background-color: #fff3cd !important;
        font-weight: 600;
        animation: pulse 0.3s ease;
    }
    
    @keyframes pulse {
        0% { background-color: #fff3cd; }
        50% { background-color: #ffeeba; }
        100% { background-color: #fff3cd; }
    }
    
    /* Highlighted headers */
    th.month-header.highlighted,
    th.month-subheader.highlighted {
        background-color: #ffc107 !important;
        color: #000 !important;
        transition: all 0.3s ease;
    }
    
    /* Rank cell styling */
    .rank-cell {
        font-weight: bold;
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    }
    
    /* Racing animation for row reordering */
    @keyframes slideIn {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .top-customer-row {
        animation: slideIn 0.5s ease forwards;
    }
    
    /* Table controls styling */
    .table-controls {
        box-shadow: inset 0 0 5px rgba(0,0,0,0.05);
        background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
        border: 1px solid #dee2e6;
    }
    
    /* Customer name emphasis */
    .customer-name {
        font-weight: 500;
        color: #495057;
    }
    
    /* Smooth scroll for table */
    .table-responsive {
        scroll-behavior: smooth;
    }
    
    /* Frozen Column Styles - Sticky positioning for Rank and Customer columns */
    .table-fixed {
        position: relative;
        border-collapse: separate;
        border-spacing: 0;
    }
    
    .freeze-col-1 {
        position: sticky;
        left: 0;
        z-index: 10;
        background-color: #f8f9fa;
        border-right: 2px solid #dee2e6;
        box-shadow: 2px 0 5px rgba(0,0,0,0.1);
    }
    
    .freeze-col-2 {
        position: sticky;
        left: 50px;
        z-index: 10;
        background-color: #fff;
        border-right: 2px solid #dee2e6;
        box-shadow: 2px 0 5px rgba(0,0,0,0.1);
        min-width: 200px;
        max-width: 300px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* Header frozen columns - higher z-index */
    .table-cyan .freeze-col-1,
    .table-cyan .freeze-col-2 {
        z-index: 20;
        background-color: #00b7bd !important;
        color: white !important;
    }
    
    /* Ensure proper background on hover for frozen cells */
    .top-customer-row:hover .freeze-col-1,
    .top-customer-row:hover .freeze-col-2 {
        background-color: #e3f2fd !important;
    }
    
    /* Highlighted month in frozen columns */
    .freeze-col-1.highlighted-month,
    .freeze-col-2.highlighted-month {
        background-color: #fff3cd !important;
    }

    /* Modal Table Styling */
    #transactionModal .modal-content {
        border: none;
        border-radius: 12px;
        overflow: hidden;
    }
    
    #transactionModal .modal-header {
        padding: 1.25rem 1.5rem;
    }
    
    #transactionModal .modal-body {
        background-color: #f8f9fa;
    }
    
    #transactionModal .table-cyan th {
        background-color: #00b7bd !important;
        color: white !important;
        font-weight: 600;
        padding: 12px 8px;
        font-size: 0.9rem;
        white-space: nowrap;
    }
    
    #transactionModal .table-cyan th:first-child {
        border-top-left-radius: 8px;
    }
    
    #transactionModal .table-cyan th:last-child {
        border-top-right-radius: 8px;
    }
    
    #transactionModal tbody td {
        padding: 10px 8px;
        font-size: 0.9rem;
        vertical-align: middle;
    }
    
    #transactionModal tbody tr:hover {
        background-color: #e3f2fd;
    }
    
    .top-customer-row {
        cursor: default;
    }

    .month-cell {
        cursor: pointer;
        transition: background-color 0.2s ease, transform 0.15s ease;
    }

    .month-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);
    }

    /* Loading animation styles */
    .loading-row {
        background-color: #f8f9fa !important;
        animation: pulse-loading 1.5s ease-in-out infinite;
    }

    .loading-row td {
        border: none !important;
        background-color: transparent !important;
    }

    @keyframes pulse-loading {
        0% { opacity: 0.6; }
        50% { opacity: 1; }
        100% { opacity: 0.6; }
    }

    .loading-row .spinner-border {
        width: 1rem;
        height: 1rem;
        border-width: 0.15em;
    }
</style>
@endpush
@push('js')
<script>
    // ==================== BUBBLE CHART IMPLEMENTATION WITH MONTHLY ANIMATION & SLIDER ====================
    
    if (window.chartData && window.chartData.periods && window.chartData.periods.length > 0) {
        const updateFrequency = 1500;
        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'};
        
        // Per-category state (no longer global / linked)
        let chartState = {
            industrial: {
                currentMonthIndex: 0,
                isPlaying: false,
                animationTimer: null
            },
            hygiene: {
                currentMonthIndex: 0,
                isPlaying: false,
                animationTimer: null
            }
        };
        
        function generateColors(customers) {
            const colors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc', '#ff9f7f', '#37a2da', '#32c5e9'];
            const colorMap = {};
            customers.forEach((customer, index) => {
                colorMap[customer] = colors[index % colors.length];
            });
            return colorMap;
        }
        
        function formatNumber(value) {
            return Number(value || 0).toLocaleString('en-US', {
                minimumFractionDigits: 2, maximumFractionDigits: 2
            });
        }
        
        function formatNumberRaw(value) {
            return Number(value || 0).toLocaleString('en-US', {
                maximumFractionDigits: 2
            });
        }
        
        // Format large numbers with k/m/b suffix (e.g., 5000 -> 5k)
        // For small numbers (< 10), show 1 decimal place to avoid duplicates
        function formatNumberAbbreviated(value) {
            const num = Number(value || 0);
            if (num === 0) return '0';
            if (num >= 1000000000) return (num / 1000000000).toFixed(1) + 'b';
            if (num >= 1000000) return (num / 1000000).toFixed(1) + 'm';
            if (num >= 1000) return (num / 1000).toFixed(1) + 'k';
            // For small numbers, show 1 decimal if not integer
            if (num < 10 && num !== Math.floor(num)) return num.toFixed(1);
            return num.toFixed(0);
        }
        
        function formatKg(value) { return formatNumberRaw(value) + ' KG'; }
        function formatUsd(value) { return '$ ' + formatNumber(value); }
        
        const allIndustrialCustomers = [...new Set(window.chartData.industrial.map(item => item.customer_name))];
        const allHygieneCustomers = [...new Set(window.chartData.hygiene_medical.map(item => item.customer_name))];
        
        const industrialColors = generateColors(allIndustrialCustomers);
        const hygieneColors = generateColors(allHygieneCustomers);
        
        let industrialChart = null;
        let hygieneChart = null;
        
        let chartFilters = { industrial: '10', hygiene: '10' };
        
        let yearlyAxisBounds = {
            industrial: { xMax: 0, xInterval: 0, yMax: 0, yInterval: 0 },
            hygiene: { xMax: 0, xInterval: 0, yMax: 0, yInterval: 0 }
        };
        
        function getAxisSettings(value) {
            if (value <= 0) return { max: 1, interval: 0.5 };
            
            // Calculate appropriate interval based on value magnitude
            const magnitude = Math.pow(10, Math.floor(Math.log10(value)));
            let interval;
            
            // More granular intervals to avoid large gaps
            if (value < 10) {
                interval = magnitude * 0.5; // 0.5 interval for values < 10
            } else if (value < 100) {
                interval = magnitude * 0.5; // 0.5 interval for values 10-100
            } else if (value < 1000) {
                interval = magnitude * 0.2; // 200 interval for values 100-1000
            } else if (value < 10000) {
                interval = magnitude * 0.2; // 2000 interval for values 1k-10k
            } else if (value < 100000) {
                interval = magnitude * 0.2; // 20000 interval for values 10k-100k
            } else {
                interval = magnitude * 0.2; // 0.2x magnitude for larger values (e.g., 20k for 100k, 200k for 1M)
            }
            
            // Calculate max with proper rounding
            const steps = Math.ceil(value / interval);
            const max = steps * interval;
            
            return { max: max, interval: interval };
        }
        
        function getAbsoluteMax(data) {
            let maxSalesKg = 0; let maxAvgPrice = 0;
            data.forEach(item => {
                const salesKg = parseFloat(item.sales_kg) || 0;
                const avgPrice = parseFloat(item.avg_price) || 0;
                if (salesKg > maxSalesKg) maxSalesKg = salesKg;
                if (avgPrice > maxAvgPrice) maxAvgPrice = avgPrice;
            });
            return { xMax: maxSalesKg, yMax: maxAvgPrice };
        }
        
        function calculateYearlyAxisBounds() {
            if (window.chartData.industrial && window.chartData.industrial.length > 0) {
                const industrialMax = getAbsoluteMax(window.chartData.industrial);
                const xSettings = getAxisSettings(industrialMax.xMax);
                const ySettings = getAxisSettings(industrialMax.yMax);
                yearlyAxisBounds.industrial.xMax = xSettings.max;
                yearlyAxisBounds.industrial.xInterval = xSettings.interval;
                yearlyAxisBounds.industrial.yMax = ySettings.max;
                yearlyAxisBounds.industrial.yInterval = ySettings.interval;
            }
            
            if (window.chartData.hygiene_medical && window.chartData.hygiene_medical.length > 0) {
                const hygieneMax = getAbsoluteMax(window.chartData.hygiene_medical);
                const xSettings = getAxisSettings(hygieneMax.xMax);
                const ySettings = getAxisSettings(hygieneMax.yMax);
                yearlyAxisBounds.hygiene.xMax = xSettings.max;
                yearlyAxisBounds.hygiene.xInterval = xSettings.interval;
                yearlyAxisBounds.hygiene.yMax = ySettings.max;
                yearlyAxisBounds.hygiene.yInterval = ySettings.interval;
            }
        }
        
        // Calculate axis bounds based on filtered data (for top 10 filter)
        function calculateAxisBoundsForCategory(category, filterMode) {
            const data = category === 'industrial' ? window.chartData.industrial : window.chartData.hygiene_medical;
            const periods = window.chartData.periods;
            
            if (!data || data.length === 0) {
                return { xMax: 1, xInterval: 0.2, yMax: 1, yInterval: 0.2 };
            }
            
            let filteredData = [];
            
            // Get data for each period, apply filter
            periods.forEach(period => {
                let periodData = data.filter(item => item.period == period);
                
                if (filterMode === '10' && periodData.length > 0) {
                    periodData = periodData.sort((a, b) => b.amount_usd - a.amount_usd).slice(0, 10);
                }
                
                filteredData = filteredData.concat(periodData);
            });
            
            if (filteredData.length === 0) {
                return { xMax: 1, xInterval: 0.2, yMax: 1, yInterval: 0.2 };
            }
            
            const maxValues = getAbsoluteMax(filteredData);
            const xSettings = getAxisSettings(maxValues.xMax);
            const ySettings = getAxisSettings(maxValues.yMax);
            
            return {
                xMax: xSettings.max,
                xInterval: xSettings.interval,
                yMax: ySettings.max,
                yInterval: ySettings.interval
            };
        }
        
        function initCharts() {
            calculateYearlyAxisBounds();
            
            if (document.getElementById('industrial-bubble-chart') && window.chartData.industrial.length > 0) {
                industrialChart = echarts.init(document.getElementById('industrial-bubble-chart'));
            }
            if (document.getElementById('hygiene-bubble-chart') && window.chartData.hygiene_medical.length > 0) {
                hygieneChart = echarts.init(document.getElementById('hygiene-bubble-chart'));
            }
            
            // Initialize per-category independently
            updateChartMonthForCategory('industrial', 0);
            updateChartMonthForCategory('hygiene', 0);
        }
        
        function renderChart(category, monthIndex, filterMode = null) {
            const chart = category === 'industrial' ? industrialChart : hygieneChart;
            const data = category === 'industrial' ? window.chartData.industrial : window.chartData.hygiene_medical;
            const colors = category === 'industrial' ? industrialColors : hygieneColors;
            const periods = window.chartData.periods;
            
            if (!chart || !periods[monthIndex]) return;
            
            const currentFilter = filterMode || chartFilters[category];
            const currentPeriod = periods[monthIndex];
            const monthName = monthNames[currentPeriod] || currentPeriod;
            
            // Calculate axis bounds based on filter (top 10 or all)
            const axisBounds = currentFilter === '10' 
                ? calculateAxisBoundsForCategory(category, '10')
                : (category === 'industrial' ? yearlyAxisBounds.industrial : yearlyAxisBounds.hygiene);
            
            let monthData = data.filter(item => item.period == currentPeriod);
            
            if (currentFilter === '10') {
                monthData = monthData.sort((a, b) => b.amount_usd - a.amount_usd).slice(0, 10);
            }
            
            // Calculate min/max amount from filtered data for bubble sizing
            const filteredAmounts = monthData.map(item => item.amount_usd);
            const minAmount = filteredAmounts.length > 0 ? Math.min(...filteredAmounts) : 0;
            const maxAmount = filteredAmounts.length > 0 ? Math.max(...filteredAmounts) : 0;
            
            const seriesData = monthData.map(item => {
                return {
                    value: [item.sales_kg, item.avg_price, item.amount_usd, item.customer_name, monthName],
                    name: item.customer_name,
                    itemStyle: { color: colors[item.customer_name] || '#5470c6' }
                };
            });
            
            const option = {
                title: { text: 'Price Trend', subtext: monthName + ' ' + window.chartData.year, left: 'center', top: 5 },
                tooltip: {
                    trigger: 'item',
                    formatter: function(params) {
                        const value = params.value;
                        return `
                            <strong>${value[3]}</strong><br>
                            Period: ${value[4]}<br>
                            Total Sales (kg): ${formatKg(value[0])}<br>
                            Average Price (KG): ${formatNumber(value[1])}<br>
                            Total Amount (USD): ${formatUsd(value[2])}
                        `;
                    }
                },
                grid: { top: 70, left: 90, right: 80, bottom: 60 },
                toolbox: { show: true, right: 20, feature: { saveAsImage: { title: 'Download' } } },
                xAxis: {
                    type: 'value', name: 'Total Sales (kg)', nameLocation: 'middle', nameGap: 35,
                    min: 0,
                    max: axisBounds.xMax,
                    interval: axisBounds.xInterval,
                    splitLine: { lineStyle: { type: 'dashed' } },
                    axisLabel: { 
                        rotate: 45,
                        formatter: value => formatNumberAbbreviated(value)
                    }
                },
                yAxis: {
                    type: 'value', name: 'Average Price (KG)', nameLocation: 'middle', nameGap: 60,
                    min: 0,
                    max: axisBounds.yMax,
                    interval: axisBounds.yInterval,
                    splitLine: { lineStyle: { type: 'dashed' } },
                    axisLabel: { 
                        rotate: 45,
                        formatter: value => formatNumberAbbreviated(value)
                    }
                },
                series:[{
                    name: 'Customer', type: 'scatter', data: seriesData,
                    symbolSize: function(value) {
                        const amount = value[2]; const minSize = 25; const maxSize = 80;
                        if (maxAmount === minAmount || maxAmount === 0) return 45;
                        return minSize + ((amount - minAmount) / (maxAmount - minAmount)) * (maxSize - minSize);
                    },
                    label: { show: true, formatter: params => params.value[3], position: 'top', fontSize: 11, rotate: 15 },
                    emphasis: { focus: 'self', label: { show: true, fontSize: 13, fontWeight: 'bold' } }
                }],
                graphic: {
                    elements:[{
                        type: 'text', right: 80, bottom: 20,
                        style: { text: monthName, font: 'bolder 80px monospace', fill: 'rgba(100, 100, 100, 0.15)' }, z: 100
                    }]
                },
                animationDuration: 800, animationDurationUpdate: updateFrequency,
                animationEasing: 'cubicOut', animationEasingUpdate: 'linear'
            };
            chart.setOption(option);
            
            // Ensure chart is properly sized (especially after tab switches or hidden state)
            setTimeout(() => chart.resize(), 50);
        }
        
        // --- CONTROLS LOGIC (PER CATEGORY - INDEPENDENT) ---
        
        window.updateChartMonthForCategory = function(category, monthIndex) {
            monthIndex = parseInt(monthIndex);
            chartState[category].currentMonthIndex = monthIndex;
            
            // Get Month Label
            const currentPeriod = window.chartData.periods[monthIndex];
            const mName = monthNames[currentPeriod] || currentPeriod;
            
            // Render chart for this category only
            renderChart(category, monthIndex);
            
            // Force resize after render to ensure correct dimensions
            // (especially important when tab becomes visible or after fetch)
            const chart = category === 'industrial' ? industrialChart : hygieneChart;
            if (chart) {
                setTimeout(() => chart.resize(), 50);
            }
            
            // Update Chart UI Elements for this category only
            const monthSelect = document.getElementById(category + '-month-select');
            const slider = document.getElementById(category + '-slider');
            const sliderLabel = document.getElementById(category + '-slider-label');
            
            if (monthSelect) monthSelect.value = monthIndex;
            if (slider) slider.value = monthIndex;
            if (sliderLabel) sliderLabel.textContent = mName;
            
        };
        
        window.updateChartFilter = function(category, filterValue) {
            chartFilters[category] = filterValue;
            renderChart(category, chartState[category].currentMonthIndex, filterValue);
        };

        window.prevMonthForCategory = function(category) {
            let nextIdx = chartState[category].currentMonthIndex - 1;
            if (nextIdx < 0) nextIdx = window.chartData.periods.length - 1;
            updateChartMonthForCategory(category, nextIdx);
        };

        window.nextMonthForCategory = function(category) {
            let nextIdx = chartState[category].currentMonthIndex + 1;
            if (nextIdx >= window.chartData.periods.length) nextIdx = 0;
            updateChartMonthForCategory(category, nextIdx);
        };
        
        function updatePlayButtonsUI(category, playing) {
            const btn = document.getElementById(category + '-play-pause');
            if (btn) {
                const icon = btn.querySelector('i');
                if (icon) icon.className = playing ? 'fas fa-pause' : 'fas fa-play';
            }
        }

        function startAnimation(category) {
            chartState[category].isPlaying = true;
            updatePlayButtonsUI(category, true);
            
            chartState[category].animationTimer = setInterval(() => {
                let nextIdx = chartState[category].currentMonthIndex + 1;
                if (nextIdx >= window.chartData.periods.length) nextIdx = 0;
                updateChartMonthForCategory(category, nextIdx);
            }, updateFrequency);
        }
        
        function stopAnimation(category) {
            chartState[category].isPlaying = false;
            updatePlayButtonsUI(category, false);
            if (chartState[category].animationTimer) {
                clearInterval(chartState[category].animationTimer);
                chartState[category].animationTimer = null;
            }
        }
        
        window.toggleAnimationForCategory = function(category) {
            if (chartState[category].isPlaying) stopAnimation(category);
            else startAnimation(category);
        };

        // --- FULLSCREEN LOGIC ---
        
        window.toggleFullscreen = function(cardId) {
            const card = document.getElementById(cardId);
            if (!document.fullscreenElement) {
                card.requestFullscreen().catch(err => {
                    alert(`Gagal memasuki mode fullscreen: ${err.message}`);
                });
            } else {
                document.exitFullscreen();
            }
        };

        // Listener jika terjadi perubahan status fullscreen (Masuk/Keluar)
        document.addEventListener('fullscreenchange', () => {
            const industrialCard = document.getElementById('industrial-chart-card');
            const hygieneCard = document.getElementById('hygiene-chart-card');
            
            if (document.fullscreenElement) {
                document.fullscreenElement.classList.add('is-fullscreen');
            } else {
                if (industrialCard) industrialCard.classList.remove('is-fullscreen');
                if (hygieneCard) hygieneCard.classList.remove('is-fullscreen');
            }
            
            // Tunggu layout terupdate sebelum meresize chart agar ukurannya pas
            setTimeout(() => {
                if (industrialChart) industrialChart.resize();
                if (hygieneChart) hygieneChart.resize();
            }, 200);
        });
        
        // --- INITIALIZATION ---
        
        if (typeof echarts !== 'undefined') {
            initCharts();
        } else {
            window.addEventListener('load', function() {
                if (typeof echarts !== 'undefined') initCharts();
            });
        }
        
        // Window resize event handler
        window.addEventListener('resize', function() {
            if (industrialChart) industrialChart.resize();
            if (hygieneChart) hygieneChart.resize();
        });
        
        // Bootstrap Tab resize handler - FIX for shrinked charts when switching tabs
        // ECharts cannot calculate size correctly when container is hidden (display: none)
        // We must resize the chart AFTER the tab becomes visible
        const tabEl = document.getElementById('divisionTab');
        if (tabEl) {
            tabEl.addEventListener('shown.bs.tab', function(event) {
                const targetId = event.target.getAttribute('data-bs-target');
                // Delay resize to ensure DOM layout is complete
                setTimeout(function() {
                    if (targetId === '#industrial-tab-pane' && industrialChart) {
                        industrialChart.resize();
                    } else if (targetId === '#hygiene-tab-pane' && hygieneChart) {
                        hygieneChart.resize();
                    }
                }, 100);
            });
        }
        
        // ResizeObserver as a fallback for container size changes
        // This catches any layout changes that window resize doesn't
        if (typeof ResizeObserver !== 'undefined') {
            const industrialChartContainer = document.getElementById('industrial-bubble-chart');
            const hygieneChartContainer = document.getElementById('hygiene-bubble-chart');
            
            if (industrialChartContainer) {
                const industrialObserver = new ResizeObserver(function(entries) {
                    if (industrialChart) {
                        // Only resize if the container is actually visible
                        const entry = entries[0];
                        if (entry.contentRect.width > 0 && entry.contentRect.height > 0) {
                            industrialChart.resize();
                        }
                    }
                });
                industrialObserver.observe(industrialChartContainer);
            }
            
            if (hygieneChartContainer) {
                const hygieneObserver = new ResizeObserver(function(entries) {
                    if (hygieneChart) {
                        const entry = entries[0];
                        if (entry.contentRect.width > 0 && entry.contentRect.height > 0) {
                            hygieneChart.resize();
                        }
                    }
                });
                hygieneObserver.observe(hygieneChartContainer);
            }
        }
    }
    
    // ==================== TABLE RANKING WITH SLIDER & ANIMATION (LAZY LOAD) ====================

    // Store all customers data for both categories
    window.tableData = {
        industrial: {
            customers: [],
            periods: [],
            currentMonthIndex: 0,
            isPlaying: false,
            animationTimer: null
        },
        hygiene: {
            customers: [],
            periods: [],
            currentMonthIndex: 0,
            isPlaying: false,
            animationTimer: null
        }
    };

    // Cache for lazy-loaded data: { category: { period: [customers] } }
    window.monthlyCache = {
        industrial: {},
        hygiene: {}
    };

    // Track loading state per category
    window.tableLoadingState = {
        industrial: false,
        hygiene: false
    };

    // AbortControllers for canceling stale fetch requests
    window.abortControllers = {
        industrial: null,
        hygiene: null
    };

    // Request ID tracking to guard against stale responses
    window.lastRequestIds = {
        industrial: 0,
        hygiene: 0
    };

    const tableUpdateFrequency = 1500;
    const tableMonthNames = {'001': 'Jan', '002': 'Feb', '003': 'Mar', '004': 'Apr', '005': 'May', '006': 'Jun', '007': 'Jul', '008': 'Aug', '009': 'Sep', '010': 'Oct', '011': 'Nov', '012': 'Dec'};

    // ==================== TRANSACTION DETAIL MODAL LOGIC ====================
    
    let currentModalState = {
        category: null,
        soldTo: null,
        customerName: null,
        period: null,
        year: null,
        perPage: 25
    };
    
    window.openTransactionModal = function(category, soldTo, customerName, period, year) {
        currentModalState = { category, soldTo, customerName, period, year, perPage: 25 };
        document.getElementById('modalCustomerName').textContent = customerName;
        document.getElementById('modalPeriod').textContent = tableMonthNames[period] || period;
        document.getElementById('modalYear').textContent = year;
        
        window.loadModalTransactions(1);
        
        const modalEl = document.getElementById('transactionModal');
        if (typeof bootstrap !== 'undefined') {
            const modal = bootstrap.Modal.getOrCreateInstance(modalEl);
            modal.show();
        } else {
            // Fallback for environments without Bootstrap JS
            modalEl.classList.add('show');
            modalEl.style.display = 'block';
            modalEl.setAttribute('aria-hidden', 'false');
            document.body.classList.add('modal-open');
        }
    };
    
    window.loadModalTransactions = function(page = 1) {
        const { category, soldTo, period, year, perPage } = currentModalState;
        if (!soldTo) return;
        
        const url = `{{ route('rptptr.api.transactions') }}?year=${year}&period=${period}&sold_to=${encodeURIComponent(soldTo)}&category=${category}&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);
                renderModalTable(result.data, result.pagination.from);
                renderModalPagination(result.pagination);
                updateModalTotals(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>';
                updateModalTotals(null);

                // Send error details to Laravel log for debugging
                const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
                fetch('{{ route("rptptr.api.log.error") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': csrfToken
                    },
                    body: JSON.stringify({
                        message: error.message || 'Fetch failed',
                        url: url,
                        context: { category, soldTo, period, year, page }
                    })
                }).catch(() => {});
            });
    };
    
    function renderModalTable(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 updateModalTotals(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 renderModalPagination(pagination) {
        const container = document.getElementById('modalPagination');
        if (!pagination || pagination.last_page <= 1) {
            container.innerHTML = '';
            return;
        }
        
        let items = '';
        
        // Previous
        items += pagination.current_page > 1
            ? `<li class="page-item"><a class="page-link" href="#" onclick="event.preventDefault(); window.loadModalTransactions(${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>`;
        
        // Page numbers (show max 5 items around current)
        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.loadModalTransactions(${i});">${i}</a></li>`;
        }
        
        // Next
        items += pagination.has_more
            ? `<li class="page-item"><a class="page-link" href="#" onclick="event.preventDefault(); window.loadModalTransactions(${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="Transaction pagination"><ul class="pagination">${items}</ul></nav>`;
    }
    
    // Initialize table data from DOM and seed cache
    function initTableData() {
        // Industrial table
        const industrialTable = document.getElementById('industrial-top-table');
        if (industrialTable) {
            const industrialRows = industrialTable.querySelectorAll('#industrial-top-tbody tr');
            const industrialPeriods = [];
            industrialTable.querySelectorAll('thead th.month-header').forEach(th => {
                industrialPeriods.push(th.dataset.period);
            });

            industrialRows.forEach(row => {
                const customerData = JSON.parse(row.dataset.customer);
                window.tableData.industrial.customers.push(customerData);
            });
            window.tableData.industrial.periods = industrialPeriods;

            // Seed cache with initial data (assume it's for the first month or just store as general)
            // We don't know which month this is for, so we'll just use it as a fallback if cache miss
        }

        // Hygiene table
        const hygieneTable = document.getElementById('hygiene-top-table');
        if (hygieneTable) {
            const hygieneRows = hygieneTable.querySelectorAll('#hygiene-top-tbody tr');
            const hygienePeriods = [];
            hygieneTable.querySelectorAll('thead th.month-header').forEach(th => {
                hygienePeriods.push(th.dataset.period);
            });

            hygieneRows.forEach(row => {
                const customerData = JSON.parse(row.dataset.customer);
                window.tableData.hygiene.customers.push(customerData);
            });
            window.tableData.hygiene.periods = hygienePeriods;
        }

        // Initial render - render with existing DOM data without triggering fetch
        if (industrialTable && window.tableData.industrial.customers.length > 0) {
            renderTableRows('industrial', window.tableData.industrial.customers, 0);
            updateTableUI('industrial', 0, tableMonthNames[window.tableData.industrial.periods[0]] || window.tableData.industrial.periods[0], false);
        }
        if (hygieneTable && window.tableData.hygiene.customers.length > 0) {
            renderTableRows('hygiene', window.tableData.hygiene.customers, 0);
            updateTableUI('hygiene', 0, tableMonthNames[window.tableData.hygiene.periods[0]] || window.tableData.hygiene.periods[0], false);
        }
    }

    // Fetch top customers for a specific month from API
    function fetchTopCustomers(category, monthIndex) {
        return new Promise((resolve, reject) => {
            const data = window.tableData[category];
            const period = data.periods[monthIndex];
            const year = window.chartData.year;
            const apiCategory = category === 'hygiene' ? 'hygiene' : category;

            const url = `{{ route('rptptr.api.top.customers') }}?year=${year}&period=${period}&category=${apiCategory}`;

            // Cancel previous request for this category
            if (window.abortControllers[category]) {
                window.abortControllers[category].abort();
            }

            const controller = new AbortController();
            window.abortControllers[category] = controller;

            fetch(url, { signal: controller.signal })
                .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);

                    // Cache the result
                    window.monthlyCache[category][period] = result.customers || [];
                    resolve(result.customers || []);
                })
                .catch(error => {
                    if (error.name === 'AbortError') {
                        // Silently ignore aborted requests
                        reject({ aborted: true });
                    } else {
                        console.error('Error fetching top customers:', error);
                        reject(error);
                    }
                });
        });
    }

    // Show loading state in table
    function showTableLoading(category, monthIndex) {
        const data = window.tableData[category];
        const period = data.periods[monthIndex];
        const monthName = tableMonthNames[period] || period;
        const tbody = document.getElementById(category + '-top-tbody');
        if (!tbody) return;

        const periods = data.periods;
        const numCols = 2 + (periods.length * 3); // rank + name + 3 cols per period

        // Create 5 loading rows with spinner animation
        let loadingHtml = '';
        for (let i = 0; i < 5; i++) {
            loadingHtml += `
                <tr class="top-customer-row loading-row">
                    <td class="text-center rank-cell freeze-col-1" colspan="${numCols}">
                        <div class="d-flex align-items-center justify-content-center py-2">
                            <div class="spinner-border spinner-border-sm text-primary me-2" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                            <span class="text-muted">Loading Top 10 for ${monthName}...</span>
                        </div>
                    </td>
                </tr>
            `;
        }
        tbody.innerHTML = loadingHtml;
    }

    // Render table rows from customer data
    function renderTableRows(category, customers, monthIndex) {
        const data = window.tableData[category];
        const period = data.periods[monthIndex];
        const monthName = tableMonthNames[period] || period;
        const year = window.chartData.year;

        const tbody = document.getElementById(category + '-top-tbody');
        if (!tbody) return;

        const fragment = document.createDocumentFragment();

        customers.forEach((customer, index) => {
            const row = document.createElement('tr');
            row.className = 'top-customer-row';
            row.style.transition = 'all 0.5s ease';
            row.dataset.soldto = customer.sold_to;

            // Rank cell
            const rankCell = document.createElement('td');
            rankCell.className = 'text-center rank-cell freeze-col-1';
            rankCell.style.fontWeight = 'bold';
            rankCell.style.backgroundColor = '#f8f9fa';
            rankCell.textContent = index + 1;
            row.appendChild(rankCell);

            // Customer name
            const nameCell = document.createElement('td');
            nameCell.className = 'customer-name freeze-col-2';
            nameCell.textContent = customer.customer_name;
            row.appendChild(nameCell);

            // Monthly data cells
            data.periods.forEach(p => {
                const isHighlighted = p === period;
                const highlightStyle = isHighlighted ? 'background-color: #fff3cd; font-weight: 600;' : '';

                const salesVal = customer.monthly_data[p]?.sales_kg || 0;
                const amountVal = customer.monthly_data[p]?.amount_usd || 0;
                const priceVal = customer.monthly_data[p]?.avg_price || 0;

                const salesCell = document.createElement('td');
                salesCell.className = 'text-center month-cell';
                salesCell.dataset.period = p;
                salesCell.dataset.type = 'sales';
                salesCell.style.cssText = highlightStyle;
                salesCell.textContent = salesVal.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2});
                salesCell.addEventListener('click', function() {
                    window.openTransactionModal(category, customer.sold_to, customer.customer_name, p, year);
                });
                row.appendChild(salesCell);

                const amountCell = document.createElement('td');
                amountCell.className = 'text-center month-cell';
                amountCell.dataset.period = p;
                amountCell.dataset.type = 'amount';
                amountCell.style.cssText = highlightStyle;
                amountCell.textContent = amountVal.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2});
                amountCell.addEventListener('click', function() {
                    window.openTransactionModal(category, customer.sold_to, customer.customer_name, p, year);
                });
                row.appendChild(amountCell);

                const priceCell = document.createElement('td');
                priceCell.className = 'text-center month-cell';
                priceCell.dataset.period = p;
                priceCell.dataset.type = 'price';
                priceCell.style.cssText = highlightStyle;
                priceCell.textContent = priceVal.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2});
                priceCell.addEventListener('click', function() {
                    window.openTransactionModal(category, customer.sold_to, customer.customer_name, p, year);
                });
                row.appendChild(priceCell);
            });

            fragment.appendChild(row);
        });

        tbody.innerHTML = '';
        tbody.appendChild(fragment);
    }

    // Update table with lazy loading
    window.updateTableMonth = function(category, monthIndex, syncChart = false) {
        monthIndex = parseInt(monthIndex);
        const data = window.tableData[category];
        if (!data || !data.periods || data.periods.length === 0) return;
        data.currentMonthIndex = monthIndex;

        const period = data.periods[monthIndex];
        const monthName = tableMonthNames[period] || period;

        // Generate unique request ID for this fetch
        const requestId = ++window.lastRequestIds[category];

        // Check if we have cached data for this month
        const cachedCustomers = window.monthlyCache[category][period];

        if (cachedCustomers && cachedCustomers.length > 0) {
            // Use cached data
            renderTableRows(category, cachedCustomers, monthIndex);
            updateTableUI(category, monthIndex, monthName, syncChart);
        } else {
            // Show loading and fetch data
            window.tableLoadingState[category] = true;
            showTableLoading(category, monthIndex);
            updateTableUI(category, monthIndex, monthName, false); // Don't sync chart while loading

            fetchTopCustomers(category, monthIndex)
                .then(customers => {
                    // Guard: ignore stale response if user already moved to another month
                    if (window.lastRequestIds[category] !== requestId) {
                        return;
                    }
                    // Guard: ignore if user already moved to another month
                    if (data.currentMonthIndex !== monthIndex) {
                        return;
                    }
                    window.tableLoadingState[category] = false;
                    renderTableRows(category, customers, monthIndex);
                    updateTableUI(category, monthIndex, monthName, syncChart);
                })
                .catch(error => {
                    // Guard: ignore aborted requests
                    if (error && error.aborted) {
                        return;
                    }
                    // Guard: ignore stale response
                    if (window.lastRequestIds[category] !== requestId) {
                        return;
                    }
                    window.tableLoadingState[category] = false;
                    // Show error message in table
                    const tbody = document.getElementById(category + '-top-tbody');
                    if (tbody) {
                        tbody.innerHTML = `
                            <tr class="top-customer-row">
                                <td class="text-center text-danger py-4" colspan="${2 + (data.periods.length * 3)}">
                                    <i class="fas fa-exclamation-circle mb-2"></i>
                                    <p>Gagal memuat data. Silakan coba lagi.</p>
                                </td>
                            </tr>
                        `;
                    }
                    updateTableUI(category, monthIndex, monthName, syncChart);
                });
        }
    };

    // Update UI controls and header highlighting (without rendering rows)
    function updateTableUI(category, monthIndex, monthName, syncChart) {
        const data = window.tableData[category];
        const period = data.periods[monthIndex];

        // Update header highlighting
        const table = document.getElementById(category + '-top-table');
        if (table) {
            table.querySelectorAll('th.month-header, th.month-subheader').forEach(th => {
                if (th.dataset.period === period) {
                    th.style.backgroundColor = '#ffc107';
                    th.style.color = '#000';
                } else {
                    th.style.backgroundColor = '';
                    th.style.color = '';
                }
            });
        }

        // Update UI controls
        const tableSlider = document.getElementById(category + '-table-slider');
        const tableMonth = document.getElementById(category + '-table-month');
        const tableSliderLabel = document.getElementById(category + '-table-slider-label');

        if (tableSlider) tableSlider.value = monthIndex;
        if (tableMonth) tableMonth.value = monthIndex;
        if (tableSliderLabel) tableSliderLabel.textContent = monthName;

        // Sync chart for the SAME category only (not cross-category)
        if (syncChart && typeof window.updateChartMonthForCategory === 'function') {
            window.updateChartMonthForCategory(category, monthIndex);
        }
    }

    // Update table highlighting only (without re-sorting) - called by all sliders
    window.updateTableHighlighting = function(category, monthIndex) {
        window.updateTableMonth(category, monthIndex, false);
    };

    // Navigation functions
    window.prevTableMonth = function(category) {
        const data = window.tableData[category];
        let nextIdx = data.currentMonthIndex - 1;
        if (nextIdx < 0) nextIdx = data.periods.length - 1;
        updateTableMonth(category, nextIdx);
    };

    window.nextTableMonth = function(category) {
        const data = window.tableData[category];
        let nextIdx = data.currentMonthIndex + 1;
        if (nextIdx >= data.periods.length) nextIdx = 0;
        updateTableMonth(category, nextIdx);
    };

    // Update table play buttons UI
    function updateTablePlayButtonsUI(category, playing) {
        const btn = document.getElementById(category + '-play-btn');
        if (btn) {
            const icon = btn.querySelector('i');
            if (icon) icon.className = playing ? 'fas fa-pause' : 'fas fa-play';
        }
    }

    // Start table animation (bar chart race style)
    function startTableAnimation(category) {
        const data = window.tableData[category];
        data.isPlaying = true;
        updateTablePlayButtonsUI(category, true);

        data.animationTimer = setInterval(() => {
            let nextIdx = data.currentMonthIndex + 1;
            if (nextIdx >= data.periods.length) nextIdx = 0;
            updateTableMonth(category, nextIdx);
        }, tableUpdateFrequency);
    }

    // Stop table animation
    function stopTableAnimation(category) {
        const data = window.tableData[category];
        data.isPlaying = false;
        updateTablePlayButtonsUI(category, false);
        if (data.animationTimer) {
            clearInterval(data.animationTimer);
            data.animationTimer = null;
        }
    }

    // Toggle table animation
    window.toggleTableAnimation = function(category) {
        const data = window.tableData[category];
        if (data.isPlaying) {
            stopTableAnimation(category);
        } else {
            startTableAnimation(category);
        }
    };

    // Initialize table data when DOM is ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initTableData);
    } else {
        initTableData();
    }
</script>

{{-- ECharts Library --}}
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
@endpush