@php
    $editing = $rule->exists;
    $selectedDays = array_map('intval', old('days_of_week', $rule->days_of_week ?? []));
@endphp
<x-admin.layout :title="$editing ? __('Edit surge rule') : __('New surge rule')">
    <x-admin.page-header :title="$editing ? __('Edit surge rule') : __('New surge rule')" :back="route('admin.surge.index')" />

    <form method="POST" action="{{ $editing ? route('admin.surge.update', $rule) : route('admin.surge.store') }}" class="max-w-3xl space-y-6"
          x-data="{ type: '{{ old('type', $rule->type->value) }}' }">
        @csrf
        @if ($editing) @method('PUT') @endif

        <x-admin.card :title="__('Rule')">
            <div class="grid gap-5 sm:grid-cols-2">
                <div class="sm:col-span-2"><x-admin.input name="name" :label="__('Name')" :value="$rule->name" required :placeholder="__('e.g. Friday night rush')" /></div>
                <x-admin.select name="type" :label="__('Trigger')" :options="$types" :value="$rule->type" x-model="type" required />
                <x-admin.input name="multiplier" type="number" min="1.01" step="0.05" :label="__('Multiplier')" :value="$rule->multiplier" required :hint="__('1.5 = fares 50% higher.')" />
                <x-admin.select name="zone_id" :label="__('Zone')" :options="$zones" :value="$rule->zone_id" :placeholder="__('All zones')" />
                <x-admin.select name="vehicle_type_id" :label="__('Vehicle type')" :options="$vehicleTypes" :value="$rule->vehicle_type_id" :placeholder="__('All vehicle types')" />
            </div>
        </x-admin.card>

        <x-admin.card :title="__('Weekly schedule')" x-show="type === 'peak_hour'">
            <fieldset>
                <legend class="form-label">{{ __('Days') }}</legend>
                <div class="flex flex-wrap gap-2">
                    @foreach ($days as $num => $label)
                        <label class="cursor-pointer">
                            <input type="checkbox" name="days_of_week[]" value="{{ $num }}" class="peer sr-only" @checked(in_array($num, $selectedDays)) :disabled="type !== 'peak_hour'">
                            <span class="block rounded-lg border border-gray-300 px-3 py-1.5 text-sm font-medium peer-checked:border-brand-500 peer-checked:bg-brand-50 peer-checked:text-brand-700 peer-focus-visible:ring-2 peer-focus-visible:ring-brand-500 dark:border-gray-700 dark:peer-checked:bg-brand-500/10 dark:peer-checked:text-brand-300">{{ $label }}</span>
                        </label>
                    @endforeach
                </div>
                @error('days_of_week')<p class="form-error">{{ $message }}</p>@enderror
            </fieldset>
            <div class="mt-5 grid gap-5 sm:grid-cols-2">
                <x-admin.input name="start_time" type="time" :label="__('From')" :value="$rule->start_time ? substr($rule->start_time, 0, 5) : ''" x-bind:disabled="type !== 'peak_hour'" />
                <x-admin.input name="end_time" type="time" :label="__('Until')" :value="$rule->end_time ? substr($rule->end_time, 0, 5) : ''" x-bind:disabled="type !== 'peak_hour'" :hint="__('An end earlier than the start runs past midnight (e.g. 23:00 → 03:00).')" />
            </div>
        </x-admin.card>

        <x-admin.card :title="__('One-off window')" x-show="type === 'manual'" x-cloak>
            <div class="grid gap-5 sm:grid-cols-2">
                <x-admin.input name="starts_at" type="datetime-local" :label="__('Starts')" :value="$rule->starts_at?->format('Y-m-d\TH:i')" x-bind:disabled="type !== 'manual'" />
                <x-admin.input name="ends_at" type="datetime-local" :label="__('Ends')" :value="$rule->ends_at?->format('Y-m-d\TH:i')" x-bind:disabled="type !== 'manual'" />
            </div>
            <p class="mt-3 text-xs text-gray-500">{{ __('Use for events, holidays or bad weather. Times are in the server timezone (:tz).', ['tz' => config('app.timezone')]) }}</p>
        </x-admin.card>

        <x-admin.card :title="__('Demand trigger')" x-show="type === 'demand'" x-cloak>
            <x-admin.input name="demand_ratio" type="number" min="0.1" step="0.1" :label="__('Requests per available driver')" :value="$rule->demand_ratio" x-bind:disabled="type !== 'demand'"
                           :hint="__('Applies when rides searching in the zone during the last :min minutes ÷ free online drivers in the zone reaches this ratio. Pick a zone for demand rules.', ['min' => setting('surge.demand_window_minutes')])" />
        </x-admin.card>

        <x-admin.card>
            <x-admin.toggle name="is_active" :label="__('Active')" :checked="$rule->is_active" />
            <div class="mt-5 flex gap-2">
                <x-admin.button type="submit">{{ $editing ? __('Save changes') : __('Create rule') }}</x-admin.button>
                <x-admin.button variant="secondary" :href="route('admin.surge.index')">{{ __('Cancel') }}</x-admin.button>
            </div>
        </x-admin.card>
    </form>
</x-admin.layout>