@php
    $selectedSector = request('sector_id', request('filter.sector_id'));
    $selectedMonth = request('month_year', request('filter.month_year'));
    $selectedBusiness = request('business_id', request('filter.business_id'));
    $overallTracking = $overallTracking ?? [];
    $showOverallTracking = $showOverallTracking ?? true;
    $overallCompleted = (int) ($overallTracking['completed'] ?? 0);
    $overallTotal = (int) ($overallTracking['total'] ?? 0);
    $overallRemaining = (int) ($overallTracking['remaining'] ?? 0);
    $overallPercent = (int) ($overallTracking['percent'] ?? 0);
    $hasFilterSelected = !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], $query["filter.{$key}"]);
                if (isset($query['filter']) && is_array($query['filter'])) {
                    unset($query['filter'][$key]);
                    if (empty($query['filter'])) {
                        unset($query['filter']);
                    }
                }
            } else {
                $query[$key] = $value;
            }
        }

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

    $visibleBusinesses = collect($businesses)->filter(function ($business) use ($selectedSector) {
        if (!$selectedSector) {
            return true;
        }
        return (string) $business->sector_id === (string) $selectedSector;
    });
@endphp

<style>
    .ip-filters { margin-bottom: 14px; }
    .ip-overall {
        margin-bottom: 12px;
        border: 1px solid #cfdcf5;
        border-radius: 16px;
        background: radial-gradient(1200px 220px at -10% -40%, #7fb1ff33 0%, #ffffff00 60%),
                    linear-gradient(135deg, #112b56 0%, #1f4d94 45%, #2b6bc2 100%);
        padding: 16px;
        box-shadow: 0 10px 24px rgba(20, 53, 112, 0.22);
    }
    .ip-overall-head {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 10px;
        align-items: center;
    }
    .ip-overall-title {
        color: #f6f9ff;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 0.2px;
    }
    .ip-overall-pct {
        font-size: 13px;
        font-weight: 700;
        color: #1f4c8f;
        background: #ffffff;
        border-radius: 999px;
        padding: 6px 10px;
        box-shadow: 0 2px 8px rgba(18, 42, 85, 0.2);
    }
    .ip-overall-meta {
        display: grid;
        grid-template-columns: repeat(3, minmax(120px, 1fr));
        gap: 8px;
        margin-bottom: 10px;
    }
    .ip-overall-stat {
        font-size: 12px;
        color: #e8f1ff;
        border: 1px solid #ffffff33;
        border-radius: 10px;
        padding: 8px 10px;
        background: #ffffff14;
        font-weight: 600;
    }
    .ip-overall-stat strong {
        display: block;
        font-size: 14px;
        line-height: 1.1;
        color: #ffffff;
        margin-bottom: 2px;
    }
    .ip-overall-bar {
        height: 10px;
        width: 100%;
        background: #ffffff44;
        border-radius: 999px;
        overflow: hidden;
        border: 1px solid #ffffff55;
    }
    .ip-overall-bar > span {
        display: block;
        height: 100%;
        background: linear-gradient(90deg, #5de1ff 0%, #86efac 100%);
    }
    .ip-filters details {
        border: 1px solid #d5deef;
        border-radius: 16px;
        background: #ffffff;
        box-shadow: 0 8px 20px rgba(27, 46, 84, 0.07);
        overflow: hidden;
    }
    .ip-filters summary {
        list-style: none;
        cursor: pointer;
        padding: 14px 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: 700;
        color: #1b2f59;
        border-radius: 16px;
        background: linear-gradient(180deg, #f7f9ff 0%, #eef3ff 100%);
        border-bottom: 1px solid #dce6fb;
    }
    .ip-filters summary::after {
        content: '\25be';
        font-size: 12px;
        color: #375a96;
    }
    .ip-filters details[open] summary::after { content: '\25b4'; }
    .ip-filters-body {
        padding: 14px 16px 16px;
        background: linear-gradient(180deg, #ffffff 0%, #fafcff 100%);
    }
    .ip-row { margin-bottom: 12px; }
    .ip-row:last-child { margin-bottom: 0; }
    .ip-label {
        display: block;
        margin-bottom: 7px;
        font-size: 12px;
        font-weight: 700;
        color: #3f5480;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .ip-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .ip-chip {
        display: inline-block;
        padding: 6px 10px;
        border: 1px solid #d2def5;
        border-radius: 999px;
        background: #f9fbff;
        color: #2e4975;
        text-decoration: none;
        font-size: 12px;
        line-height: 1;
        transition: all .15s ease;
    }
    .ip-chip:hover {
        background: #edf4ff;
        border-color: #bcd2fb;
        color: #1f4076;
        text-decoration: none;
        transform: translateY(-1px);
    }
    .ip-chip.active {
        background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
        border-color: #1d4ed8;
        color: #fff;
        box-shadow: 0 4px 10px rgba(37, 99, 235, 0.28);
    }
    .ip-active {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-bottom: 12px;
    }
    .ip-active-item {
        font-size: 12px;
        border: 1px solid #d7e3fb;
        background: #f5f9ff;
        border-radius: 999px;
        padding: 6px 10px;
        color: #2f4972;
    }
    .ip-note {
        font-size: 12px;
        color: #6a7893;
        border: 1px dashed #cddaf4;
        border-radius: 10px;
        background: #f6f9ff;
        padding: 10px 12px;
    }
    @media (max-width: 900px) {
        .ip-overall-meta {
            grid-template-columns: 1fr;
        }
    }
</style>

<div class="ip-filters">
    @if($showOverallTracking)
        <div class="ip-overall">
            <div class="ip-overall-head">
                <div class="ip-overall-title">
                    Overall Tracking{{ $hasFilterSelected ? ' (Current Filter Result)' : '' }}
                </div>
                <div class="ip-overall-pct">{{ $overallPercent }}%</div>
            </div>
            <div class="ip-overall-meta">
                <div class="ip-overall-stat">
                    <strong>{{ $overallCompleted }} / {{ $overallTotal }}</strong>
                    Completed Calls
                </div>
                <div class="ip-overall-stat">
                    <strong>{{ $overallRemaining }}</strong>
                    Remaining Calls
                </div>
                @if($selectedMonth)
                    <div class="ip-overall-stat">
                        <strong>{{ $selectedMonth }}</strong>
                        Selected Month
                    </div>
                @endif
            </div>
            <div class="ip-overall-bar">
                <span style="width: {{ $overallPercent }}%;"></span>
            </div>
        </div>
    @endif

    <details {{ $hasFilterSelected ? 'open' : '' }}>
        <summary>
            <span>Filters</span>
        </summary>
        <div class="ip-filters-body">
            <div class="ip-active">
                @if($selectedMonth)
                    <span class="ip-active-item">Month: {{ $selectedMonth }}</span>
                @endif
                @if($selectedSector)
                    @php $sectorName = optional(collect($sectors)->firstWhere('id', (int) $selectedSector))->name; @endphp
                    <span class="ip-active-item">Sector: {{ $sectorName ?? $selectedSector }}</span>
                @endif
                @if($selectedBusiness)
                    @php $businessName = optional(collect($businesses)->firstWhere('id', (int) $selectedBusiness))->name; @endphp
                    <span class="ip-active-item">Business: {{ $businessName ?? $selectedBusiness }}</span>
                @endif
                @if($selectedMonth || $selectedSector || $selectedBusiness)
                    <a class="ip-chip" href="{{ $buildUrl(['month_year' => null, 'sector_id' => null, 'business_id' => null]) }}">Clear all</a>
                @endif
            </div>

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

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

            @if($selectedSector || $selectedBusiness)
                <div class="ip-row">
                    <label class="ip-label">Business</label>
                    <div class="ip-chips">
                        <a class="ip-chip {{ !$selectedBusiness ? 'active' : '' }}" href="{{ $buildUrl(['business_id' => null]) }}">All</a>
                        @foreach($visibleBusinesses as $business)
                            <a class="ip-chip {{ (string)$selectedBusiness === (string)$business->id ? 'active' : '' }}"
                               href="{{ $buildUrl(['business_id' => $business->id]) }}">
                                {{ $business->name }}
                            </a>
                        @endforeach
                    </div>
                </div>
            @else
                <div class="ip-row">
                    <label class="ip-label">Business</label>
                    <div class="ip-note">Select a sector first to load business options.</div>
                </div>
            @endif
        </div>
    </details>
</div>