@push('styles')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
@endpush

@push('scripts')
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
    <script>
    var UPK_CONFIG = @json(\App\Filament\Pages\UsedPartsKpi::getVendorConfig());
    var UPK_CONTACTS = @json(\App\Filament\Pages\UsedPartsKpi::getVendorContacts());
    var UPK_API = '/api/used-parts-kpi';
    </script>
    <script src="{{ asset('js/used-parts-kpi.js') }}?v={{ time() }}"></script>
@endpush

<x-filament-panels::page>
    <div class="upk-wrap">
        {{-- Sub-tabs --}}
        <div class="upk-tabs">
            <button class="upk-tab active" onclick="upkTab(this,'upk-stats')">Statistics</button>
            <button class="upk-tab" onclick="upkTab(this,'upk-ext')">Extended KPIs</button>
            <button class="upk-tab" onclick="upkTab(this,'upk-orders')">Order Detail</button>
            <button class="upk-tab" onclick="upkTab(this,'upk-parttype')">Part Type</button>
            <button class="upk-tab" onclick="upkTab(this,'upk-kpis')">Monthly KPIs</button>
            <button class="upk-tab" onclick="upkTab(this,'upk-scorecard')">Vendor Scorecard</button>
            <button class="upk-tab" onclick="upkTab(this,'upk-financial')">Financial Summary</button>
            <button class="upk-tab" onclick="upkTab(this,'upk-contacts')">Contacts</button>
        </div>

        {{-- TAB: ORDER DETAIL --}}
        <div class="upk-tab-panel" id="upk-orders">
            <div class="upk-filters">
                <div>
                    <label>Vendor</label>
                    <select id="upkOrderVendor">
                        <option value="all">All Vendors</option>
                        @foreach(\App\Filament\Pages\UsedPartsKpi::getVendorConfig() as $k => $v)
                            @if(count($v['supplier_ids']) > 0 || ($v['is_unknown_supplier'] ?? false))
                                <option value="{{ $k }}">{{ $v['name'] }}</option>
                            @endif
                        @endforeach
                    </select>
                </div>
                <div>
                    <label>From</label>
                    <input type="date" id="upkDateFrom" min="2025-12-01">
                </div>
                <div>
                    <label>To</label>
                    <input type="date" id="upkDateTo" min="2025-12-01">
                </div>
                <div>
                    <label>Status</label>
                    <select id="upkStatus">
                        <option value="all">All Statuses</option>
                        <option value="6">Shipped</option>
                        <option value="7">Cancelled</option>
                        <option value="12">Pending Return</option>
                        <option value="24">Return Refunded</option>
                        <option value="48">Total Loss Refund</option>
                    </select>
                </div>
                <div>
                    <button class="upk-btn upk-btn-primary" onclick="upkLoadOrders()">Load</button>
                    <button class="upk-btn upk-btn-outline" onclick="upkExportCSV()">CSV</button>
                    <button class="upk-btn upk-btn-outline" id="upkFilterToggle" onclick="upkToggleAdvFilters()">Filters</button>
                </div>
                <div style="margin-left:auto" id="upkOrderCount" class="upk-info"></div>
            </div>
            <div id="upkAdvFilters" class="upk-adv-filters" style="display:none">
                <div class="upk-adv-header">
                    <span>Advanced Filters</span>
                    <button class="upk-btn-xs" onclick="upkAddFilter()">+ Add Filter</button>
                    <button class="upk-btn-xs upk-btn-clear" onclick="upkClearFilters()">Clear All</button>
                    <span id="upkFilterCount" class="upk-filter-count"></span>
                </div>
                <div id="upkFilterRows"></div>
            </div>
            <div id="upkOrdersLoader" class="upk-center-loader">
                <div class="upk-spinner-lg"></div>
                <div style="margin-top:14px;font-size:0.9rem;color:var(--upk-text-muted)">Loading orders...</div>
            </div>
            <div id="upkOrdersTableWrap" class="upk-card" style="display:none">
                <div style="overflow-x:auto;padding:2px">
                    <table id="upkOrdersTable" class="display" style="width:100%">
                        <thead>
                        <tr class="upk-col-group">
                            <th colspan="4" class="upk-group-hdr">Order Details</th>
                            <th colspan="2" class="upk-group-hdr">Supplier</th>
                            <th colspan="10" class="upk-group-hdr">Cost</th>
                            <th colspan="2" class="upk-group-hdr">Sale</th>
                            <th colspan="2" class="upk-group-hdr">Margin</th>
                        </tr>
                        <tr>
                            <th>Order #</th><th>Status</th><th style="width:80px">Date</th><th>Part #</th>
                            <th>Supplier</th><th>Warehouse</th>
                            <th>Buy Price</th><th>Our Ship</th><th>Refund Ded.</th><th>CC Fee</th><th>Ad Spend</th><th>Bolt Payment Fee</th><th>Label Cost</th><th>Credits</th><th>Our Cost</th>
                            <th>Sale Price</th><th>Sale Ship</th>
                            <th>Margin $</th><th>Margin %</th>
                        </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>

        {{-- TAB: PART TYPE BREAKDOWN — 14 May 2026 Dan request --}}
        <div class="upk-tab-panel" id="upk-parttype">
            <div class="upk-filters">
                <div>
                    <label>From</label>
                    <input type="date" id="upkPtDateFrom" min="2025-12-01">
                </div>
                <div>
                    <label>To</label>
                    <input type="date" id="upkPtDateTo" min="2025-12-01">
                </div>
                {{-- 10 Jun 2026 (Uday/Umesh): vendor is now a MULTI-select, same style as the
                     Part Type filter. All vendors checked by default = old 'all' behaviour. --}}
                <div style="position:relative">
                    <label>Vendor</label>
                    <div class="upk-mselect" id="upkPtVendSelect">
                        <div class="upk-mselect-trigger" onclick="upkPtVendMsToggle()">
                            <span id="upkPtVendMsLabel">All Vendors</span>
                            <span class="upk-mselect-arrow">&#9662;</span>
                        </div>
                        <div class="upk-mselect-drop" id="upkPtVendMsDrop" style="display:none">
                            <div class="upk-mselect-actions">
                                <a href="#" onclick="upkPtVendMsAll(event, true)">Select All</a>
                                <a href="#" onclick="upkPtVendMsAll(event, false)">Deselect All</a>
                            </div>
                            <div id="upkPtVendMsOptions">
                                @foreach(\App\Filament\Pages\UsedPartsKpi::getVendorConfig() as $k => $v)
                                    @if(count($v['supplier_ids']) > 0 || ($v['is_unknown_supplier'] ?? false))
                                        <label class="upk-mselect-opt"><input type="checkbox" value="{{ $k }}" checked onchange="upkPtVendMsLabelUpd()">{{ $v['name'] }}</label>
                                    @endif
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
                {{-- 2 Jun 2026: Part Type multi-select filter. Options populate from loaded data; filters table client-side. --}}
                <div style="position:relative">
                    <label>Part Type</label>
                    <div class="upk-mselect" id="upkPtTypeSelect">
                        <div class="upk-mselect-trigger" onclick="upkPtMsToggle()">
                            <span id="upkPtMsLabel">All Part Types</span>
                            <span class="upk-mselect-arrow">&#9662;</span>
                        </div>
                        <div class="upk-mselect-drop" id="upkPtMsDrop" style="display:none">
                            <input type="text" class="upk-mselect-search" id="upkPtMsSearch" placeholder="Search part types..." oninput="upkPtMsFilter(this.value)">
                            <div class="upk-mselect-actions">
                                <a href="#" onclick="upkPtMsSelectAll(event)">Select All</a>
                                <a href="#" onclick="upkPtMsDeselectAll(event)">Deselect All</a>
                            </div>
                            <div id="upkPtMsOptions"><div style="padding:8px 10px;font-size:0.8rem;color:var(--upk-text-muted)">Load data to choose part types</div></div>
                        </div>
                    </div>
                </div>
                {{-- 18 Jun 2026: Category (PCDB) multi-select. Independent of Part Type; selecting a
                     category narrows to its Hollander sub-types. Options populate from loaded data. --}}
                <div style="position:relative">
                    <label>Category (PCDB)</label>
                    <div class="upk-mselect" id="upkPcCatSelect">
                        <div class="upk-mselect-trigger" onclick="upkPcMsToggle()">
                            <span id="upkPcMsLabel">All Categories</span>
                            <span class="upk-mselect-arrow">&#9662;</span>
                        </div>
                        <div class="upk-mselect-drop" id="upkPcMsDrop" style="display:none">
                            <input type="text" class="upk-mselect-search" id="upkPcMsSearch" placeholder="Search categories..." oninput="upkPcMsFilter(this.value)">
                            <div class="upk-mselect-actions">
                                <a href="#" onclick="upkPcMsSelectAll(event)">Select All</a>
                                <a href="#" onclick="upkPcMsDeselectAll(event)">Deselect All</a>
                            </div>
                            <div id="upkPcMsOptions"><div style="padding:8px 10px;font-size:0.8rem;color:var(--upk-text-muted)">Load data to choose categories</div></div>
                        </div>
                    </div>
                </div>
                <div>
                    <button class="upk-btn upk-btn-primary" onclick="upkLoadPartType()">Load</button>
                </div>
                <div style="margin-left:auto;display:flex;align-items:center;gap:8px">
                    <button class="upk-btn upk-btn-outline" onclick="upkExportPartType()">Download XLSX</button>
                </div>
            </div>
            <div id="upkPtContent">
                {{-- 21 May 2026: Replaced single table with per-recycler container. JS injects 4 cards: PAMs / Counselman / PartsBox / Unknown. --}}
                <div id="upkPtContainer">
                    <div class="upk-card" style="text-align:center;padding:30px;color:var(--upk-text-muted)">
                        Pick a date range and click Load to view per-recycler breakdown.
                    </div>
                </div>
            </div>
        </div>

        {{-- TAB 2: MONTHLY KPIs --}}
        <div class="upk-tab-panel" id="upk-kpis">
            <div class="upk-filters">
                <div>
                    <label>Year</label>
                    <select id="upkKpiYear" onchange="upkLoadKPIs()">
                        <option value="2026" selected>2026</option>
                        <option value="2025">2025</option>
                    </select>
                </div>
                <div style="position:relative">
                    <label>Vendors</label>
                    <div class="upk-mselect" id="upkKpiVendorSelect">
                        <div class="upk-mselect-trigger" onclick="upkMsToggle()">
                            <span id="upkMsLabel">All Vendors</span>
                            <span class="upk-mselect-arrow">&#9662;</span>
                        </div>
                        <div class="upk-mselect-drop" id="upkMsDrop" style="display:none">
                            <input type="text" class="upk-mselect-search" id="upkMsSearch" placeholder="Search vendors..." oninput="upkMsFilter(this.value)">
                            <div class="upk-mselect-actions">
                                <a href="#" onclick="upkMsSelectAll(event)">Select All</a>
                                <a href="#" onclick="upkMsDeselectAll(event)">Deselect All</a>
                            </div>
                            <div id="upkMsOptions"></div>
                        </div>
                    </div>
                </div>
                <div style="margin-left:auto;display:flex;align-items:center;gap:8px">
                    <button class="upk-btn upk-btn-outline" onclick="upkExportKPIs()">CSV</button>
                    <span class="upk-info">Data auto-calculated from orders</span>
                </div>
            </div>
            <div id="upkKpiContent"><div class="upk-loading"><i class="bi bi-arrow-repeat"></i><br><span style="font-size:0.85rem;margin-top:8px;display:inline-block">Loading KPIs...</span></div></div>
        </div>

        {{-- TAB 3: VENDOR SCORECARD --}}
        <div class="upk-tab-panel" id="upk-scorecard">
            <div class="upk-filters">
                <div>
                    <label>Year</label>
                    <select id="upkScYear" onchange="upkLoadScorecard()">
                        <option value="2026" selected>2026</option>
                        <option value="2025">2025</option>
                    </select>
                </div>
                <div style="position:relative">
                    <label>Vendor</label>
                    <div class="upk-mselect" id="upkScVendorSelect">
                        <div class="upk-mselect-trigger" onclick="upkScMsToggle()">
                            <span id="upkScMsLabel">All Vendors</span>
                            <span class="upk-mselect-arrow">&#9662;</span>
                        </div>
                        <div class="upk-mselect-drop" id="upkScMsDrop" style="display:none">
                            <input type="text" class="upk-mselect-search" id="upkScMsSearch" placeholder="Search vendors..." oninput="upkScMsFilter(this.value)">
                            <div class="upk-mselect-actions">
                                <a href="#" onclick="upkScMsSelectAll(event)">Select All</a>
                                <a href="#" onclick="upkScMsDeselectAll(event)">Deselect All</a>
                            </div>
                            <div id="upkScMsOptions"></div>
                        </div>
                    </div>
                </div>
                <div style="margin-left:auto">
                    <button class="upk-btn upk-btn-outline" onclick="upkExportScorecard()">CSV</button>
                </div>
            </div>
            <div id="upkScContent"><div class="upk-loading"><i class="bi bi-arrow-repeat"></i><br><span style="font-size:0.85rem;margin-top:8px;display:inline-block">Loading Scorecard...</span></div></div>
        </div>

        {{-- TAB 4: FINANCIAL SUMMARY --}}
        <div class="upk-tab-panel" id="upk-financial">
            <div class="upk-filters">
                <div>
                    <label>Year</label>
                    <select id="upkFinYear" onchange="upkLoadFinancial()">
                        <option value="2026" selected>2026</option>
                        <option value="2025">2025</option>
                    </select>
                </div>
                <div style="position:relative">
                    <label>Vendor</label>
                    <div class="upk-mselect" id="upkFinVendorSelect">
                        <div class="upk-mselect-trigger" onclick="upkFinMsToggle()">
                            <span id="upkFinMsLabel">All Vendors</span>
                            <span class="upk-mselect-arrow">&#9662;</span>
                        </div>
                        <div class="upk-mselect-drop" id="upkFinMsDrop" style="display:none">
                            <input type="text" class="upk-mselect-search" id="upkFinMsSearch" placeholder="Search vendors..." oninput="upkFinMsFilter(this.value)">
                            <div class="upk-mselect-actions">
                                <a href="#" onclick="upkFinMsSelectAll(event)">Select All</a>
                                <a href="#" onclick="upkFinMsDeselectAll(event)">Deselect All</a>
                            </div>
                            <div id="upkFinMsOptions"></div>
                        </div>
                    </div>
                </div>
                <div style="margin-left:auto">
                    <button class="upk-btn upk-btn-outline" onclick="upkExportFinancial()">CSV</button>
                </div>
            </div>
            <div id="upkFinContent"><div class="upk-loading"><i class="bi bi-arrow-repeat"></i><br><span style="font-size:0.85rem;margin-top:8px;display:inline-block">Loading Financial Data...</span></div></div>
        </div>

        {{-- TAB 5: STATISTICS --}}
        <div class="upk-tab-panel active" id="upk-stats">
            <div class="upk-filters">
                <div>
                    <label>From</label>
                    <input type="date" id="upkStatsFrom" min="2025-12-01">
                </div>
                <div>
                    <label>To</label>
                    <input type="date" id="upkStatsTo" min="2025-12-01">
                </div>
                <div>
                    <label>Vendor</label>
                    <select id="upkStatsVendor">
                        <option value="all">All Vendors</option>
                        @foreach(\App\Filament\Pages\UsedPartsKpi::getVendorConfig() as $k => $v)
                            @if(count($v['supplier_ids']) > 0 || ($v['is_unknown_supplier'] ?? false))
                                <option value="{{ $k }}">{{ $v['name'] }}</option>
                            @endif
                        @endforeach
                    </select>
                </div>
                <div>
                    <label style="visibility:hidden">x</label>
                    <label class="upk-compare-toggle"><input type="checkbox" id="upkStatsCompare" onchange="upkToggleCompare()"> Compare with previous period</label>
                </div>
                <div>
                    <button class="upk-btn upk-btn-primary" onclick="upkLoadStats()">Load</button>
                    <button class="upk-btn upk-btn-outline" onclick="upkExportStats()">CSV</button>
                </div>
            </div>
            <div id="upkStatsContent"><div class="upk-center-loader"><div class="upk-spinner-lg"></div><div style="margin-top:14px;font-size:0.9rem;color:var(--upk-text-muted)">Select date range and click Load</div></div></div>
        </div>

        {{-- TAB: EXTENDED KPIs (Jun 2026) — consolidated executive layout from suggested dashboard.
             Reuses the /statistics endpoint; regroups KPIs into Executive Summary, Revenue,
             COGS & Costs, Profitability, Returns & Cancellations, Catalog Utilization + trend charts. --}}
        <div class="upk-tab-panel" id="upk-ext">
            <div class="upk-filters">
                <div>
                    <label>From</label>
                    <input type="date" id="upkExtFrom" min="2025-12-01">
                </div>
                <div>
                    <label>To</label>
                    <input type="date" id="upkExtTo" min="2025-12-01">
                </div>
                <div>
                    <label>Vendor</label>
                    <select id="upkExtVendor">
                        <option value="all">All Vendors</option>
                        @foreach(\App\Filament\Pages\UsedPartsKpi::getVendorConfig() as $k => $v)
                            @if(count($v['supplier_ids']) > 0 || ($v['is_unknown_supplier'] ?? false))
                                <option value="{{ $k }}">{{ $v['name'] }}</option>
                            @endif
                        @endforeach
                    </select>
                </div>
                <div>
                    <label style="visibility:hidden">x</label>
                    <label class="upk-compare-toggle"><input type="checkbox" id="upkExtCompare"> Compare with previous period</label>
                </div>
                <div>
                    <button class="upk-btn upk-btn-primary" onclick="upkLoadExtended()">Load</button>
                    <button class="upk-btn upk-btn-outline" onclick="upkExportExtended()">CSV</button>
                </div>
            </div>
            <div id="upkExtContent"><div class="upk-center-loader"><div class="upk-spinner-lg"></div><div style="margin-top:14px;font-size:0.9rem;color:var(--upk-text-muted)">Select date range and click Load</div></div></div>
        </div>

        {{-- TAB 6: CONTACTS --}}
        <div class="upk-tab-panel" id="upk-contacts">
            <div id="upkContactsContent"></div>
        </div>
    </div>
</x-filament-panels::page>