@php
    $bidPreference = $bidPreference ?? null;
    $reserveOptions = [
        'none' => 'None',
        'low' => 'Low',
        'medium' => 'Medium',
        'high' => 'High',
    ];

    $checkInWindow = old('preferred_check_in_window', $bidPreference?->preferred_check_in_window ?? []);
    $dayOffRequests = old('day_off_requests', $bidPreference?->day_off_requests ?? []);
    $preferredDestinations = old('preferred_destinations', $bidPreference?->preferred_destinations ?? []);
    $avoidDestinations = old('avoid_destinations', $bidPreference?->avoid_destinations ?? []);

    if (is_string($dayOffRequests)) {
        $dayOffRequests = json_decode($dayOffRequests, true) ?: [];
    }

    if (! is_array($dayOffRequests)) {
        $dayOffRequests = [];
    }
@endphp

<div class="row g-3" data-bid-preference-form>
    <div class="col-md-6">
        <label for="month_package_id" class="form-label">Month package</label>
        <select id="month_package_id" name="month_package_id" class="form-select @error('month_package_id') is-invalid @enderror" required>
            <option value="">Select month package...</option>
            @foreach($monthPackages as $monthPackage)
                <option value="{{ $monthPackage->id }}" @selected((int) old('month_package_id', $bidPreference?->month_package_id) === $monthPackage->id)>
                    {{ $monthPackage->name }} ({{ $monthPackage->package_month->format('Y-m') }})
                </option>
            @endforeach
        </select>
        @error('month_package_id')
            <div class="invalid-feedback d-block">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-md-6">
        <label for="reserve_tolerance" class="form-label">Reserve tolerance</label>
        <select id="reserve_tolerance" name="reserve_tolerance" class="form-select @error('reserve_tolerance') is-invalid @enderror" required>
            @foreach($reserveOptions as $key => $label)
                <option value="{{ $key }}" @selected(old('reserve_tolerance', $bidPreference?->reserve_tolerance ?? 'medium') === $key)>{{ $label }}</option>
            @endforeach
        </select>
        @error('reserve_tolerance')
            <div class="invalid-feedback d-block">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-md-4">
        <label for="prefer_flying" class="form-label">Prefer flying</label>
        <div class="form-check form-switch mt-2">
            <input type="hidden" name="prefer_flying" value="0">
            <input class="form-check-input" type="checkbox" role="switch" id="prefer_flying" name="prefer_flying" value="1" @checked((bool) old('prefer_flying', $bidPreference?->prefer_flying ?? true))>
            <label class="form-check-label" for="prefer_flying">Enabled</label>
        </div>
    </div>

    <div class="col-md-4">
        <label for="prefer_long_haul" class="form-label">Prefer long haul</label>
        <div class="form-check form-switch mt-2">
            <input type="hidden" name="prefer_long_haul" value="0">
            <input class="form-check-input" type="checkbox" role="switch" id="prefer_long_haul" name="prefer_long_haul" value="1" @checked((bool) old('prefer_long_haul', $bidPreference?->prefer_long_haul ?? false))>
            <label class="form-check-label" for="prefer_long_haul">Enabled</label>
        </div>
    </div>

    <div class="col-md-4">
        <label for="avoid_red_eye" class="form-label">Avoid red eyes</label>
        <div class="form-check form-switch mt-2">
            <input type="hidden" name="avoid_red_eye" value="0">
            <input class="form-check-input" type="checkbox" role="switch" id="avoid_red_eye" name="avoid_red_eye" value="1" @checked((bool) old('avoid_red_eye', $bidPreference?->avoid_red_eye ?? false))>
            <label class="form-check-label" for="avoid_red_eye">Enabled</label>
        </div>
    </div>

    <div class="col-md-6">
        <label for="monthly_block_min" class="form-label">Monthly block range (hours)</label>
        <div class="d-flex justify-content-between small text-secondary">
            <span>Min: <strong data-block-min>{{ old('monthly_block_min', $bidPreference?->monthly_block_min ?? 65) }}</strong></span>
            <span>Max: <strong data-block-max>{{ old('monthly_block_max', $bidPreference?->monthly_block_max ?? 85) }}</strong></span>
        </div>
        <input type="range" class="form-range" id="monthly_block_min" name="monthly_block_min" min="0" max="180" step="1" value="{{ old('monthly_block_min', $bidPreference?->monthly_block_min ?? 65) }}" data-block-min-input>
        <input type="range" class="form-range" id="monthly_block_max" name="monthly_block_max" min="0" max="180" step="1" value="{{ old('monthly_block_max', $bidPreference?->monthly_block_max ?? 85) }}" data-block-max-input>
        @error('monthly_block_min')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
        @error('monthly_block_max')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
    </div>

    <div class="col-md-3">
        <label for="min_consecutive_days_off" class="form-label">Min consecutive days off</label>
        <input type="number" min="0" max="31" id="min_consecutive_days_off" name="min_consecutive_days_off" value="{{ old('min_consecutive_days_off', $bidPreference?->min_consecutive_days_off ?? 0) }}" class="form-control @error('min_consecutive_days_off') is-invalid @enderror" required>
        @error('min_consecutive_days_off')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
    </div>

    <div class="col-md-3">
        <label for="max_duty_days" class="form-label">Max duty days</label>
        <input type="number" min="0" max="31" id="max_duty_days" name="max_duty_days" value="{{ old('max_duty_days', $bidPreference?->max_duty_days ?? 18) }}" class="form-control @error('max_duty_days') is-invalid @enderror" required>
        @error('max_duty_days')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
    </div>

    <div class="col-md-6">
        <label for="preferred_destinations" class="form-label">Preferred destinations</label>
        <select id="preferred_destinations" name="preferred_destinations[]" class="form-select @error('preferred_destinations') is-invalid @enderror" multiple size="6">
            @foreach(($airportCodes ?? []) as $code)
                <option value="{{ $code }}" @selected(in_array($code, (array) $preferredDestinations, true))>{{ $code }}</option>
            @endforeach
        </select>
        <div class="form-text">Hold Ctrl/Cmd to select multiple destinations.</div>
        @error('preferred_destinations')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
        @error('preferred_destinations.*')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
    </div>

    <div class="col-md-6">
        <label for="avoid_destinations" class="form-label">Avoid destinations</label>
        <select id="avoid_destinations" name="avoid_destinations[]" class="form-select @error('avoid_destinations') is-invalid @enderror" multiple size="6">
            @foreach(($airportCodes ?? []) as $code)
                <option value="{{ $code }}" @selected(in_array($code, (array) $avoidDestinations, true))>{{ $code }}</option>
            @endforeach
        </select>
        @error('avoid_destinations')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
        @error('avoid_destinations.*')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
    </div>

    <div class="col-md-6">
        <label class="form-label">Preferred check-in window</label>
        <div class="row g-2">
            <div class="col-6">
                <input type="time" name="preferred_check_in_window[start]" value="{{ old('preferred_check_in_window.start', $checkInWindow['start'] ?? '') }}" class="form-control @error('preferred_check_in_window.start') is-invalid @enderror">
            </div>
            <div class="col-6">
                <input type="time" name="preferred_check_in_window[end]" value="{{ old('preferred_check_in_window.end', $checkInWindow['end'] ?? '') }}" class="form-control @error('preferred_check_in_window.end') is-invalid @enderror">
            </div>
        </div>
        @error('preferred_check_in_window')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
        @error('preferred_check_in_window.start')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
        @error('preferred_check_in_window.end')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
    </div>

    <div class="col-md-6">
        <label for="waiver_choices" class="form-label">Waiver choices (JSON array)</label>
        <textarea id="waiver_choices" name="waiver_choices" rows="3" class="form-control @error('waiver_choices') is-invalid @enderror" placeholder='["Late checkout", "Swap flexibility"]'>{{ is_array(old('waiver_choices', $bidPreference?->waiver_choices)) ? json_encode(old('waiver_choices', $bidPreference?->waiver_choices)) : old('waiver_choices', $bidPreference?->waiver_choices) }}</textarea>
        @error('waiver_choices')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
        @error('waiver_choices.*')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
    </div>

    <div class="col-12">
        <label class="form-label">Day-off requests</label>
        <input type="hidden" name="day_off_requests" value="{{ json_encode($dayOffRequests) }}" data-day-off-input>
        <div class="small text-secondary mb-2">Click each day to cycle priority: green → yellow → red → clear.</div>
        <div class="d-grid gap-2" style="grid-template-columns: repeat(auto-fill, minmax(2.75rem, 1fr));" data-day-off-grid>
            @for($day = 1; $day <= 31; $day++)
                @php $state = $dayOffRequests[(string) $day] ?? null; @endphp
                <button type="button" class="btn btn-sm border day-off-cell {{ $state ? 'text-white' : '' }}"
                    data-day-cell
                    data-day="{{ $day }}"
                    data-state="{{ $state }}"
                >{{ $day }}</button>
            @endfor
        </div>
        @error('day_off_requests')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
        @error('day_off_requests.*')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
    </div>

    <div class="col-12">
        <label for="notes" class="form-label">Notes</label>
        <textarea id="notes" name="notes" rows="3" class="form-control @error('notes') is-invalid @enderror">{{ old('notes', $bidPreference?->notes) }}</textarea>
        @error('notes')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
    </div>
</div>

<div class="d-flex gap-2 mt-4">
    <button type="submit" class="btn btn-primary">{{ $submitLabel }}</button>
    <a href="{{ route('bid-preferences.index') }}" class="btn btn-outline-secondary">Cancel</a>
</div>

<script>
    (() => {
        const root = document.querySelector('[data-bid-preference-form]');
        if (!root) return;

        const minInput = root.querySelector('[data-block-min-input]');
        const maxInput = root.querySelector('[data-block-max-input]');
        const minLabel = root.querySelector('[data-block-min]');
        const maxLabel = root.querySelector('[data-block-max]');

        const syncBlockRange = () => {
            if (Number(minInput.value) > Number(maxInput.value)) {
                maxInput.value = minInput.value;
            }
            minLabel.textContent = minInput.value;
            maxLabel.textContent = maxInput.value;
        };

        minInput?.addEventListener('input', syncBlockRange);
        maxInput?.addEventListener('input', () => {
            if (Number(maxInput.value) < Number(minInput.value)) {
                minInput.value = maxInput.value;
            }
            syncBlockRange();
        });
        syncBlockRange();

        const hiddenInput = root.querySelector('[data-day-off-input]');
        const states = [null, 'green', 'yellow', 'red'];

        const applyStateStyles = (button) => {
            button.classList.remove('btn-success', 'btn-warning', 'btn-danger', 'btn-outline-secondary');
            const state = button.dataset.state || null;
            if (state === 'green') button.classList.add('btn-success');
            else if (state === 'yellow') button.classList.add('btn-warning');
            else if (state === 'red') button.classList.add('btn-danger');
            else button.classList.add('btn-outline-secondary');
        };

        const writeJson = () => {
            const payload = {};
            root.querySelectorAll('[data-day-cell]').forEach((button) => {
                const state = button.dataset.state || null;
                if (state) payload[button.dataset.day] = state;
            });
            hiddenInput.value = JSON.stringify(payload);
        };

        root.querySelectorAll('[data-day-cell]').forEach((button) => {
            applyStateStyles(button);
            button.addEventListener('click', () => {
                const current = button.dataset.state || null;
                const next = states[(states.indexOf(current) + 1) % states.length];
                button.dataset.state = next || '';
                applyStateStyles(button);
                writeJson();
            });
        });

        writeJson();
    })();
</script>