@php
    $mode = $mode ?? 'calls';
    $baseUrl = $mode === 'scenarios' ? route('platform.scenario.settings') : route('platform.call.settings');
@endphp

<div class="mb-4">
    <div class="row g-3 align-items-end">
        <div class="col-md-{{ $mode === 'scenarios' ? '6' : '6' }}">
            <label class="form-label">Sector</label>
            <select
                class="form-control"
                onchange="window.location.href='{{ $baseUrl }}?sector_id=' + encodeURIComponent(this.value)"
            >
                @foreach($sectors as $sector)
                    <option value="{{ $sector->id }}" @selected($selectedSectorId === (int) $sector->id)>
                        {{ $sector->name }}
                    </option>
                @endforeach
            </select>
        </div>
        <div class="col-md-{{ $mode === 'scenarios' ? '6' : '6' }}">
            <div class="alert alert-info mb-0">
                @if($mode === 'scenarios')
                    Configure reusable scenario settings here. New assignments will use these saved scenario defaults.
                @else
                    Configure the global monthly call volume for each business. These values stay in effect for upcoming months until you change them here.
                @endif
            </div>
        </div>
    </div>
</div>

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

@if($businesses->isEmpty())
    <div class="alert alert-warning mb-0">
        No businesses were found for this sector.
    </div>
@elseif($mode === 'calls')
    <div class="table-responsive">
        <table class="table table-bordered table-striped align-middle">
            <thead>
                <tr>
                    <th>Business</th>
                    <th>Website</th>
                    <th>Calls Per Month</th>
                </tr>
            </thead>
            <tbody>
                @foreach($businesses as $business)
                    <tr>
                        <td><strong>{{ $business->name }}</strong></td>
                        <td>
                            @if(!empty($business->website))
                                <span class="text-muted">{{ $business->website }}</span>
                            @else
                                <span class="text-muted">N/A</span>
                            @endif
                        </td>
                        <td style="width: 180px;">
                            <input
                                type="number"
                                min="0"
                                class="form-control"
                                name="businesses[{{ $business->id }}][per_month_calls]"
                                value="{{ old("businesses.{$business->id}.per_month_calls", (int) ($business->per_month_calls ?? 0)) }}"
                            >
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
@else
    <style>
        .scenario-cell-disabled {
            background: #f5f6f8;
            color: #6c757d;
            text-align: center;
            font-size: 12px;
        }
        .scenario-cell-wrap {
            min-width: 160px;
        }
        .scenario-defaults {
            border: 1px solid #dfe7f3;
            border-radius: 12px;
            padding: 16px;
            background: #fbfcff;
            margin-bottom: 16px;
        }
    </style>

    <div class="scenario-defaults">
        <div class="row g-3 align-items-end">
            <div class="col-md-12">
                <strong>Default Call Pattern</strong>
                <div class="text-muted small">Use this to apply the same scenario pattern to every eligible business across all configured call numbers in this sector.</div>
            </div>
            @for($defaultCallNumber = 1; $defaultCallNumber <= $maxCallCount; $defaultCallNumber++)
                <div class="col-md-2">
                    <label class="form-label">Call {{ $defaultCallNumber }}</label>
                    <select class="form-control js-scenario-default" data-call-number="{{ $defaultCallNumber }}">
                        <option value="">Select</option>
                        <option value="1">Scenario 1</option>
                        <option value="2">Scenario 2</option>
                        <option value="3">Scenario 3</option>
                    </select>
                </div>
            @endfor
            <div class="col-md-2">
                <button type="button" class="btn btn-outline-primary w-100" id="apply-scenario-defaults">
                    Apply to All
                </button>
            </div>
        </div>
    </div>

    <div class="table-responsive">
        <table class="table table-bordered table-striped align-middle">
            <thead>
                <tr>
                    <th>Business</th>
                    <th>Calls / Month</th>
                    @for($callNumber = 1; $callNumber <= $maxCallCount; $callNumber++)
                        <th>Call {{ $callNumber }}</th>
                    @endfor
                </tr>
            </thead>
            <tbody>
                @foreach($businesses as $business)
                    @php
                        $requiredCalls = max((int) ($business->per_month_calls ?? 0), 0);
                        $callsByNumber = $scenarioSettingsByBusiness
                            ->where('business_id', $business->id)
                            ->keyBy('call_number');
                    @endphp
                    <tr>
                        <td>
                            <strong>{{ $business->name }}</strong>
                            @if($requiredCalls === 0)
                                <div class="text-muted small mt-1">No monthly call volume set yet.</div>
                            @endif
                        </td>
                        <td>{{ $requiredCalls }}</td>
                        @for($callNumber = 1; $callNumber <= $maxCallCount; $callNumber++)
                            @php
                                $existingCall = $callsByNumber->get($callNumber);
                                $scenarioNumber = old(
                                    "scenario_map.{$business->id}.{$callNumber}.scenario_number",
                                    $existingCall?->scenario_number
                                );
                            @endphp
                            <td>
                                <div class="scenario-cell-wrap">
                                    <select
                                        class="form-control form-control-sm js-scenario-select"
                                        data-call-number="{{ $callNumber }}"
                                        name="scenario_map[{{ $business->id }}][{{ $callNumber }}][scenario_number]"
                                    >
                                        <option value="">Select</option>
                                        <option value="1" @selected((int) $scenarioNumber === 1)>Scenario 1</option>
                                        <option value="2" @selected((int) $scenarioNumber === 2)>Scenario 2</option>
                                        <option value="3" @selected((int) $scenarioNumber === 3)>Scenario 3</option>
                                    </select>
                                </div>
                            </td>
                        @endfor
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <script>
        (function () {
            document.getElementById('apply-scenario-defaults')?.addEventListener('click', () => {
                document.querySelectorAll('.js-scenario-default').forEach((defaultSelect) => {
                    const value = defaultSelect.value;
                    const callNumber = defaultSelect.dataset.callNumber;

                    if (!value || !callNumber) {
                        return;
                    }

                    document.querySelectorAll(`.js-scenario-select[data-call-number="${callNumber}"]`).forEach((select) => {
                        select.value = value;
                    });
                });
            });
        })();
    </script>
@endif