@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_POLICIES = @json(\App\Filament\Pages\UsedPartsKpi::getVendorPolicies());
    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="11" 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 Card</th><th>CC Fee PayPal/Amz</th><th>CC Fee Affirm</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>
                {{-- 4 Aug 2026: Part Type multi-select, same control as the Part Type tab. Unlike
                     that tab this one filters SERVER-side (the scorecard aggregates in SQL), so
                     changing it refetches. Options come from the API, resolved by the same engine
                     the Part Type page uses, so the two pages agree on what a part type is. --}}
                <div style="position:relative">
                    <label>Part Type</label>
                    <div class="upk-mselect" id="upkScPtSelect">
                        <div class="upk-mselect-trigger" onclick="upkScPtMsToggle()">
                            <span id="upkScPtMsLabel">All Part Types</span>
                            <span class="upk-mselect-arrow">&#9662;</span>
                        </div>
                        <div class="upk-mselect-drop" id="upkScPtMsDrop" style="display:none">
                            <input type="text" class="upk-mselect-search" id="upkScPtMsSearch" placeholder="Search part types..." oninput="upkScPtMsFilter(this.value)">
                            <div class="upk-mselect-actions">
                                <a href="#" onclick="upkScPtMsSelectAll(event)">Select All</a>
                                <a href="#" onclick="upkScPtMsDeselectAll(event)">Deselect All</a>
                                <a href="#" onclick="upkScPtMsApply(event)" style="font-weight:600">Apply</a>
                            </div>
                            <div id="upkScPtMsOptions"><div style="padding:8px 10px;font-size:0.8rem;color:var(--upk-text-muted)">Loading part types...</div></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>