@php
    $settings = $staffTargetConfiguration?->group;
    $levels = old('levels', $settings?->levels ?? [['from' => '', 'to' => '', 'reward_type' => 'fixed', 'reward_value' => '', 'reward_basis' => 'none']]);
    if (!is_array($levels) || count($levels) === 0) {
        $levels = [[]];
    }
    $metrics = ['students' => 'Student count', 'collected_amount' => 'Collected amount', 'renewal_rate' => 'Student renewal rate (%)', 'renewal_amount' => 'Amount paid by renewed students'];
@endphp
<form id="staffTargetLevelsForm"
    action="{{ $isEditing ? route('staff-target-configurations.update', $staffTargetConfiguration) : route('staff-target-configurations.store') }}"
    method="POST">
    @csrf
    @if ($isEditing) @method('PUT') @endif
    <input type="hidden" name="configuration_mode" value="levels">
    <div class="p-3">
        @if ($errors->any())
            <div class="alert alert-danger" role="alert">
                <ul class="mb-0">@foreach ($errors->all() as $error)
                <li>{{ $error }}</li>@endforeach
                </ul>
            </div>
        @endif
        <div class="row g-3">
            <div class="col-md-6">
                <label for="level_target_name" class="form-label">Target name *</label>
                <input id="level_target_name" name="type" class="form-control" maxlength="255" required
                    value="{{ old('type', $staffTargetConfiguration?->type) }}">
            </div>
            <div class="col-md-6">
                <label for="target_staff_id" class="form-label">Staff Member *</label>
                <select id="target_staff_id" name="staff_id" class="form-select general-select" required>
                    <option value="">Select one staff member</option>
                    @foreach ($staffMembers as $member)
                        <option value="{{ $member->id }}" @selected(old('staff_id', $settings?->staff_id) == $member->id)>
                            {{ $member->full_name }} (#{{ $member->id }})</option>
                    @endforeach
                </select>
                <div class="form-text">The department and responsible job title are taken from the selected staff
                    member.</div>
            </div>
            <div class="col-md-6">
                <label for="target_metric" class="form-label">Measure performance by *</label>
                <select id="target_metric" name="metric" class="form-select" required>
                    @foreach ($metrics as $value => $label)
                        <option value="{{ $value }}" @selected(old('metric', $settings?->metric) === $value)>{{ $label }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-6">
                <label for="range_basis" class="form-label">Level ranges represent *</label>
                <select id="range_basis" name="range_basis" class="form-select" required>
                    <option value="actual" @selected(old('range_basis', $settings?->range_basis) === 'actual')>Actual
                        count / amount / renewal rate</option>
                    <option value="achievement_percentage" @selected(old('range_basis', $settings?->range_basis) === 'achievement_percentage')>Percentage of target achieved</option>
                </select>
            </div>
            <div class="col-md-6" id="levelTargetValueSection">
                <label for="level_target_value" class="form-label">Full target (100%) *</label>
                <input id="level_target_value" name="target_value" type="number" min="0.01" step="0.01"
                    class="form-control" value="{{ old('target_value', $settings?->target_value) }}">
            </div>
            <div class="col-md-6">
                <label for="target_period" class="form-label">Assessment period *</label>
                <select id="target_period" name="period" class="form-select" required>
                    @foreach (['quarterly' => 'End of quarter', 'monthly' => 'End of month', 'yearly' => 'End of year'] as $value => $label)
                        <option value="{{ $value }}" @selected(old('period', $settings?->period ?? 'quarterly') === $value)>
                            {{ $label }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-4">
                <label for="target_year" class="form-label">Year *</label>
                <input id="target_year" name="target_year" type="number" min="2000" max="2100" required
                    class="form-control" value="{{ old('target_year', $settings?->target_year ?? now()->year) }}">
            </div>
            <div class="col-md-4" id="levelQuarterSection">
                <label for="level_quarter" class="form-label">Quarter *</label>
                <select id="level_quarter" name="quarter_target" class="form-select">
                    @foreach ([1, 2, 3, 4] as $quarter)
                        <option value="{{ $quarter }}" @selected(old('quarter_target', $settings?->quarter_target ?? now()->quarter) == $quarter)>Q{{ $quarter }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-4" id="levelMonthSection">
                <label for="level_month" class="form-label">Month *</label>
                <select id="level_month" name="target_month" class="form-select">
                    @foreach (range(1, 12) as $month)
                        <option value="{{ $month }}" @selected(old('target_month', $settings?->target_month ?? now()->month) == $month)>{{ $month }}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="d-flex align-items-center justify-content-between mt-4 mb-2">
            <h5 class="mb-0">Levels and rewards</h5>
            <button type="button" id="addTargetLevel" class="btn btn-outline-primary btn-sm">Add Level</button>
        </div>
        <p class="text-muted small">One matching level determines the reward; rewards are not added across levels. Lower
            limits are inclusive; upper limits are exclusive, except the last upper limit is inclusive. Leave the last
            upper limit empty for no ceiling. All fixed and per-student amounts are in EGP.</p>
        <div id="targetLevels" class="d-flex flex-column gap-3">
            @foreach ($levels as $index => $level)
                @include('dashboard.academics.staff_target_configurations._level_row')
            @endforeach
        </div>
        <template id="targetLevelTemplate">
            @include('dashboard.academics.staff_target_configurations._level_row', ['index' => '__INDEX__', 'level' => []])
        </template>
    </div>
    <div class="d-flex gap-2 justify-content-end p-3 border-top">
        <a href="{{ route('staff-target-configurations.index', $indexQuery) }}"
            class="btn btn-outline-secondary">Cancel</a>
        <button class="asset-btn asset-btn--primary" type="submit">{{ $isEditing ? 'Update' : 'Save' }}</button>
    </div>
</form>