@php
    $baseUrl = route('platform.mystery.shopper.allocate');
    $pendingMysteryShopperCalls = $assignmentsByBusiness
        ->flatMap(fn ($assignment) => $assignment->calls ?? collect())
        ->filter(fn ($call) => empty($call->mystery_shopper_id))
        ->count();
    $hasAssignments = $assignmentsByBusiness->isNotEmpty();
    $selectedYear = preg_match('/^\d{4}-\d{2}$/', (string) $selectedMonth) ? substr((string) $selectedMonth, 0, 4) : '2026';
    $selectedMonthNumber = preg_match('/^\d{4}-\d{2}$/', (string) $selectedMonth) ? substr((string) $selectedMonth, 5, 2) : now()->format('m');
    $yearOptions = collect(range(2026, 2030));
    $monthOptions = collect(range(1, 12))->mapWithKeys(fn ($month) => [
        str_pad((string) $month, 2, '0', STR_PAD_LEFT) => \Carbon\Carbon::create()->month($month)->format('F'),
    ]);
@endphp

<style>
    .allocation-summary-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 16px;
        margin-bottom: 20px;
    }
    .allocation-summary-card,
    .allocation-bulk-card {
        border: 1px solid #dbe4f0;
        border-radius: 12px;
        background: #fff;
        padding: 18px;
    }
    .allocation-summary-label {
        display: block;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: #64748b;
        margin-bottom: 6px;
    }
    .allocation-summary-value {
        font-size: 24px;
        font-weight: 700;
        color: #163a70;
    }
    .allocation-bulk-grid {
        display: grid;
        grid-template-columns: minmax(260px, 420px);
        gap: 14px;
    }
    .allocation-bulk-title {
        font-size: 20px;
        font-weight: 700;
        color: #163a70;
        margin-bottom: 8px;
    }
    .allocation-bulk-copy {
        color: #52637a;
        margin-bottom: 16px;
    }
    .allocation-alert-box {
        border: 1px solid #f5c2c7;
        border-radius: 12px;
        background: #f8d7da;
        color: #842029;
        padding: 16px 18px;
        font-weight: 700;
    }
</style>

<div class="mb-4">
    <div class="row g-3 align-items-end">
        <div class="col-md-3">
            <label class="form-label">Sector</label>
            <select
                class="form-control"
                id="mystery-sector-filter"
            >
                @foreach($sectors as $sector)
                    <option value="{{ $sector->id }}" @selected($selectedSectorId === (int) $sector->id)>{{ $sector->name }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-md-2">
            <label class="form-label">Year</label>
            <select class="form-control" id="mystery-year-filter">
                @foreach($yearOptions as $year)
                    <option value="{{ $year }}" @selected((string) $selectedYear === (string) $year)>{{ $year }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-md-2">
            <label class="form-label">Month</label>
            <select class="form-control" id="mystery-month-filter">
                @foreach($monthOptions as $monthValue => $monthLabel)
                    <option value="{{ $monthValue }}" @selected((string) $selectedMonthNumber === (string) $monthValue)>{{ $monthLabel }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-md-5">
            <div class="alert alert-info mb-0">
                Select a sector and month, then assign one mystery shopper per call number. Saving applies that call selection to every company in the filtered assignment set.
            </div>
        </div>
    </div>
</div>

<input type="hidden" name="selected_sector_id" value="{{ $selectedSectorId }}">
<input type="hidden" name="selected_month" value="{{ $selectedMonth }}">

@if($businesses->isEmpty())
    <div class="alert alert-warning mb-0">No active businesses with monthly call volumes were found for this sector.</div>
@elseif(! $hasAssignments)
    <div class="allocation-summary-grid">
        <div class="allocation-summary-card">
            <span class="allocation-summary-label">Sector</span>
            <span class="allocation-summary-value" style="font-size:18px;">{{ $sectors->firstWhere('id', $selectedSectorId)?->name ?? 'N/A' }}</span>
        </div>
        <div class="allocation-summary-card">
            <span class="allocation-summary-label">Month</span>
            <span class="allocation-summary-value" style="font-size:18px;">
                {{ $selectedMonth ? \Carbon\Carbon::createFromFormat('Y-m', $selectedMonth)->format('F Y') : 'N/A' }}
            </span>
        </div>
        <div class="allocation-summary-card">
            <span class="allocation-summary-label">Businesses</span>
            <span class="allocation-summary-value">{{ $businesses->count() }}</span>
        </div>
        <div class="allocation-summary-card">
            <span class="allocation-summary-label">Max Calls</span>
            <span class="allocation-summary-value">{{ $maxCallCount }}</span>
        </div>
    </div>

    <div class="alert alert-warning mb-0">No assignments were found for the selected sector and month.</div>
@else
    <div class="allocation-summary-grid">
        <div class="allocation-summary-card">
            <span class="allocation-summary-label">Sector</span>
            <span class="allocation-summary-value" style="font-size:18px;">{{ $sectors->firstWhere('id', $selectedSectorId)?->name ?? 'N/A' }}</span>
        </div>
        <div class="allocation-summary-card">
            <span class="allocation-summary-label">Month</span>
            <span class="allocation-summary-value" style="font-size:18px;">
                {{ $selectedMonth ? \Carbon\Carbon::createFromFormat('Y-m', $selectedMonth)->format('F Y') : 'N/A' }}
            </span>
        </div>
        <div class="allocation-summary-card">
            <span class="allocation-summary-label">Businesses</span>
            <span class="allocation-summary-value">{{ $businesses->count() }}</span>
        </div>
        <div class="allocation-summary-card">
            <span class="allocation-summary-label">Max Calls</span>
            <span class="allocation-summary-value">{{ $maxCallCount }}</span>
        </div>
        <div class="allocation-summary-card">
            <span class="allocation-summary-label">Pending Mystery Shoppers</span>
            <span class="allocation-summary-value">{{ $pendingMysteryShopperCalls }}</span>
        </div>
    </div>

    @if($pendingMysteryShopperCalls === 0)
        <div class="allocation-bulk-card mb-4">
            <div class="allocation-alert-box">All allocation is done. If you assign again here, it will overwrite all existing mystery shopper allocations for this sector and month.</div>
        </div>
    @endif

    <div class="allocation-bulk-card">
        <div class="allocation-bulk-title">Assign Mystery Shoppers</div>
        <div class="allocation-bulk-copy">Each dropdown below controls that call number for all companies in this sector and month.</div>
        <div class="allocation-bulk-grid">
            @for($callNumber = 1; $callNumber <= $maxCallCount; $callNumber++)
                <div>
                    <label class="form-label">Call {{ $callNumber }}</label>
                    <select class="form-control" name="bulk_calls[{{ $callNumber }}][mystery_shopper_id]">
                        <option value="">Select Mystery Shopper</option>
                        @foreach($mysteryShoppers as $user)
                            <option value="{{ $user->id }}">{{ $user->name }}</option>
                        @endforeach
                    </select>
                </div>
            @endfor
        </div>
    </div>
@endif

<script>
    (function () {
        const sectorField = document.getElementById('mystery-sector-filter');
        const yearField = document.getElementById('mystery-year-filter');
        const monthField = document.getElementById('mystery-month-filter');

        if (!sectorField || !yearField || !monthField) {
            return;
        }

        const navigate = function () {
            const sectorId = sectorField.value || '{{ $selectedSectorId }}';
            const year = yearField.value || '2026';
            const month = monthField.value || '{{ now()->format('m') }}';
            window.location.href = '{{ $baseUrl }}?sector_id=' + encodeURIComponent(sectorId) + '&month=' + encodeURIComponent(year + '-' + month);
        };

        sectorField.addEventListener('change', navigate);
        yearField.addEventListener('change', navigate);
        monthField.addEventListener('change', navigate);
    })();
</script>