@push('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
    <link rel="stylesheet" href="{{ asset('css/supplier-health.css') }}?v={{ time() }}">
@endpush

@push('scripts')
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <script>
    var SH_API      = '/api/used-parts-kpi';
    var SH_KPI_PAGE = '{{ \App\Filament\Pages\UsedPartsKpi::getSlug() }}';
    </script>
    <script src="{{ asset('js/supplier-health.js') }}?v={{ time() }}"></script>
@endpush

<x-filament-panels::page>
    <div class="sh-wrap">

        {{-- Tabs. Situations first: at scale nobody reads a 200-row table, they read
             the short list of things that need attention. --}}
        <div class="sh-tabs">
            <button class="sh-tab active" onclick="shTab(this,'sh-situations')">
                Needs Attention <span class="sh-tab-count" id="shSitCount"></span>
            </button>
            <button class="sh-tab" onclick="shTab(this,'sh-yards')">All Yards</button>
            <button class="sh-tab" onclick="shTab(this,'sh-attribution')">Margin Loss &amp; Fault</button>
        </div>

        {{-- TAB: SITUATIONS --}}
        <div class="sh-panel active" id="sh-situations">
            <div id="shSituations">
                <div class="sh-center-loader"><div class="sh-spinner"></div>
                    <div class="sh-loading-text">Loading situations…</div></div>
            </div>
        </div>

        {{-- TAB: ATTRIBUTION --}}
        <div class="sh-panel" id="sh-attribution">
            <div id="shAttribution">
                <div class="sh-center-loader"><div class="sh-spinner"></div>
                    <div class="sh-loading-text">Loading margin-loss events…</div></div>
            </div>
        </div>

        {{-- TAB: ALL YARDS --}}
        <div class="sh-panel" id="sh-yards">

        {{-- Filters --}}
        <div class="sh-filters">
            <div>
                <label>From</label>
                <input type="date" id="shFrom" min="2025-12-01">
            </div>
            <div>
                <label>To</label>
                <input type="date" id="shTo" min="2025-12-01">
            </div>
            <div>
                <label>Quick range</label>
                <select id="shPreset" onchange="shPreset(this.value)">
                    <option value="ytd">Year to date</option>
                    <option value="90">Last 90 days</option>
                    <option value="30">Last 30 days</option>
                    <option value="custom">Custom</option>
                </select>
            </div>
            <div>
                <button class="sh-btn sh-btn-primary" onclick="shLoad()">Load</button>
                <button class="sh-btn sh-btn-outline" onclick="shExport()">CSV</button>
            </div>
            <div style="margin-left:auto">
                <label class="sh-toggle">
                    <input type="checkbox" id="shHideRamping" onchange="shRender()">
                    Hide yards under 60 orders
                </label>
            </div>
        </div>

        {{-- Fleet strip --}}
        <div id="shFleet"></div>

        {{-- Yard table --}}
        <div id="shContent">
            <div class="sh-center-loader">
                <div class="sh-spinner"></div>
                <div class="sh-loading-text">Loading supplier health…</div>
            </div>
        </div>

        </div>{{-- /All Yards --}}

        <p class="sh-foot">
            Counts from the nightly <code>used_parts_yard_health_daily</code> rollup;
            situations from <code>supplier-health:detect</code>.
            Money from <code>UsedPartsKpiCalculator</code>, so figures reconcile with
            Part Type and Financial Summary.
            Caveats mark data we cannot yet trust — they are never counted against a yard.
        </p>
    </div>
</x-filament-panels::page>