@php
    $state = $state ?? [];
    $options = $options ?? [];

    $selectedYear = $state['year'] ?? '';
    $selectedMonth = $state['month'] ?? '';
    $selectedSector = $state['sector_id'] ?? '';
    $selectedBusiness = $state['business_id'] ?? '';

    $years = $options['years'] ?? [];
    $months = $options['months'] ?? [];
    $sectors = $options['sectors'] ?? [];
    $businesses = $options['businesses'] ?? [];
    $hasActiveFilters = !empty($selectedYear) || !empty($selectedMonth) || !empty($selectedSector) || !empty($selectedBusiness);

    $buildUrl = function (array $changes = []) {
        $query = request()->query();
        unset($query['page']);

        foreach ($changes as $key => $value) {
            if ($value === null || $value === '') {
                unset($query[$key]);
            } else {
                $query[$key] = $value;
            }
        }

        return request()->url() . (count($query) ? ('?' . http_build_query($query)) : '');
    };
@endphp

<style>
    .mpf-panel { background: #fff; border: 1px solid #e3e8f2; border-radius: 12px; margin-bottom: 12px; overflow: hidden; }
    .mpf-summary {
        list-style: none;
        cursor: pointer;
        padding: 12px 14px;
        font-weight: 700;
        color: #22365e;
        background: #f7faff;
        border-bottom: 1px solid #e6edf9;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .mpf-summary::-webkit-details-marker { display: none; }
    .mpf-summary::after {
        content: '\25be';
        font-size: 12px;
        color: #3d5d92;
    }
    .mpf-panel[open] .mpf-summary::after { content: '\25b4'; }
    .mpf-body { padding: 12px; }
    .mpf-row { margin-bottom: 10px; }
    .mpf-row:last-child { margin-bottom: 0; }
    .mpf-label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 700; color: #506483; text-transform: uppercase; letter-spacing: .4px; }
    .mpf-chips { display: flex; flex-wrap: wrap; gap: 7px; }
    .mpf-chip {
        display: inline-block; border: 1px solid #d7e2f6; background: #f8fbff; color: #35507d;
        border-radius: 999px; padding: 6px 10px; font-size: 12px; text-decoration: none; line-height: 1;
    }
    .mpf-chip:hover { text-decoration: none; background: #eef4ff; }
    .mpf-chip.active { background: #2563eb; border-color: #2563eb; color: #fff; }
    .mpf-active { margin-bottom: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
    .mpf-tag { border: 1px solid #d7e2f6; background: #f2f7ff; color: #35507d; border-radius: 999px; padding: 5px 9px; font-size: 12px; }
</style>

<details class="mpf-panel" {{ $hasActiveFilters ? 'open' : '' }}>
    <summary class="mpf-summary">Filters</summary>
    <div class="mpf-body">
        <div class="mpf-active">
            @if($selectedYear)<span class="mpf-tag">Year: {{ $selectedYear }}</span>@endif
            @if($selectedMonth)<span class="mpf-tag">Month: {{ $months[$selectedMonth] ?? $selectedMonth }}</span>@endif
            @if($selectedSector)<span class="mpf-tag">Sector: {{ $sectors[$selectedSector] ?? $selectedSector }}</span>@endif
            @if($selectedBusiness)<span class="mpf-tag">Business: {{ $businesses[$selectedBusiness] ?? $selectedBusiness }}</span>@endif
            @if($selectedYear || $selectedMonth || $selectedSector || $selectedBusiness)
                <a href="{{ $buildUrl(['year' => null, 'month' => null, 'sector_id' => null, 'business_id' => null]) }}" class="mpf-chip">Clear all</a>
            @endif
        </div>

        <div class="mpf-row">
            <label class="mpf-label">Year</label>
            <div class="mpf-chips">
                <a class="mpf-chip {{ !$selectedYear ? 'active' : '' }}" href="{{ $buildUrl(['year' => null, 'month' => null, 'business_id' => null]) }}">All</a>
                @foreach($years as $value => $label)
                    <a class="mpf-chip {{ (string)$selectedYear === (string)$value ? 'active' : '' }}" href="{{ $buildUrl(['year' => $value, 'month' => null, 'business_id' => null]) }}">{{ $label }}</a>
                @endforeach
            </div>
        </div>

        <div class="mpf-row">
            <label class="mpf-label">Month</label>
            <div class="mpf-chips">
                <a class="mpf-chip {{ !$selectedMonth ? 'active' : '' }}" href="{{ $buildUrl(['month' => null, 'business_id' => null]) }}">All</a>
                @foreach($months as $value => $label)
                    <a class="mpf-chip {{ (string)$selectedMonth === (string)$value ? 'active' : '' }}" href="{{ $buildUrl(['month' => $value, 'business_id' => null]) }}">{{ $label }}</a>
                @endforeach
            </div>
        </div>

        <div class="mpf-row">
            <label class="mpf-label">Sector</label>
            <div class="mpf-chips">
                <a class="mpf-chip {{ !$selectedSector ? 'active' : '' }}" href="{{ $buildUrl(['sector_id' => null, 'business_id' => null]) }}">All</a>
                @foreach($sectors as $id => $name)
                    <a class="mpf-chip {{ (string)$selectedSector === (string)$id ? 'active' : '' }}" href="{{ $buildUrl(['sector_id' => $id, 'business_id' => null]) }}">{{ $name }}</a>
                @endforeach
            </div>
        </div>

        <div class="mpf-row">
            <label class="mpf-label">Business</label>
            @if($selectedSector || $selectedBusiness)
                <div class="mpf-chips">
                    <a class="mpf-chip {{ !$selectedBusiness ? 'active' : '' }}" href="{{ $buildUrl(['business_id' => null]) }}">All</a>
                    @foreach($businesses as $id => $name)
                        <a class="mpf-chip {{ (string)$selectedBusiness === (string)$id ? 'active' : '' }}" href="{{ $buildUrl(['business_id' => $id]) }}">{{ $name }}</a>
                    @endforeach
                </div>
            @else
                <span class="text-muted" style="font-size:12px;">Select sector first to load businesses</span>
            @endif
        </div>
    </div>
</details>