@php($editing = $promo->exists)
@php($selectedVehicleTypes = old('vehicle_type_ids', $promo->vehicle_type_ids ?? []))
@php($selectedZones = old('zone_ids', $promo->zone_ids ?? []))
<x-admin.layout :title="$editing ? __('Edit :code', ['code' => $promo->code]) : __('New promo code')">
    <x-admin.page-header :title="$editing ? __('Edit :code', ['code' => $promo->code]) : __('New promo code')" :back="route('admin.promo-codes.index')" />

    <form method="POST" action="{{ $editing ? route('admin.promo-codes.update', $promo) : route('admin.promo-codes.store') }}"
          class="grid max-w-5xl grid-cols-1 gap-6 lg:grid-cols-3" x-data="{ type: {{ Js::from(old('discount_type', $promo->discount_type?->value)) }} }">
        @csrf
        @if ($editing) @method('PUT') @endif

        <div class="space-y-6 lg:col-span-2">
            <x-admin.card :title="__('Offer')">
                <div class="grid gap-5 sm:grid-cols-2">
                    <x-admin.input name="code" :label="__('Code')" :value="$promo->code" maxlength="30" required class="font-mono uppercase"
                                   :placeholder="__('e.g. WELCOME20')" :hint="__('Letters, numbers, dashes and underscores. Riders type it in the app.')" />
                    <x-admin.input name="title" :label="__('Title')" :value="$promo->title" maxlength="100" required :placeholder="__('e.g. 20% off your first ride')" />
                    <div class="sm:col-span-2">
                        <x-admin.textarea name="description" :label="__('Description')" :value="$promo->description" rows="2" maxlength="500" :hint="__('Shown with the offer in the rider app.')" />
                    </div>
                    <x-admin.select name="discount_type" :label="__('Discount type')" :options="$discountTypes" :value="$promo->discount_type" required x-model="type" />
                    <x-admin.input name="discount_value" type="number" step="0.01" min="0" :label="__('Discount')" :value="$promo->discount_value" required
                                   :hint="__('A percentage for percentage codes, an amount for fixed ones.')" />
                    <div x-show="type === 'percentage'" x-cloak>
                        <x-admin.input name="max_discount" type="number" step="0.01" min="0" :label="__('Maximum discount')" :value="$promo->max_discount" :hint="__('Leave empty for no cap.')" />
                    </div>
                    <x-admin.input name="min_fare" type="number" step="0.01" min="0" :label="__('Minimum fare')" :value="$promo->min_fare" :hint="__('The code only works on fares of at least this much.')" />
                </div>
            </x-admin.card>

            <x-admin.card :title="__('Where it applies')">
                <p class="mb-4 text-sm text-gray-500 dark:text-gray-400">{{ __('Leave a list unticked to allow all of it.') }}</p>
                @foreach (['vehicle_type_ids' => [__('Vehicle types'), $vehicleTypes, $selectedVehicleTypes], 'zone_ids' => [__('Pickup zones'), $zones, $selectedZones]] as $field => [$legend, $options, $selected])
                    <fieldset @class(['mt-5' => ! $loop->first])>
                        <legend class="form-label">{{ $legend }}</legend>
                        <div class="mt-2 grid gap-2 sm:grid-cols-2">
                            @forelse ($options as $id => $label)
                                <label class="flex items-center gap-2 text-sm">
                                    <input type="checkbox" name="{{ $field }}[]" value="{{ $id }}" @checked(in_array($id, $selected))
                                           class="size-4 rounded border-gray-300 text-brand-600 focus:ring-brand-500 dark:border-gray-700 dark:bg-gray-900">
                                    {{ $label }}
                                </label>
                            @empty
                                <p class="text-sm text-gray-500">—</p>
                            @endforelse
                        </div>
                        @error($field.'.*')<p class="form-error">{{ $message }}</p>@enderror
                    </fieldset>
                @endforeach
            </x-admin.card>
        </div>

        <div class="space-y-6">
            <x-admin.card :title="__('Limits')">
                <div class="space-y-4">
                    <x-admin.input name="usage_limit" type="number" min="1" :label="__('Total uses')" :value="$promo->usage_limit" :hint="__('Leave empty for unlimited.')" />
                    <x-admin.input name="usage_limit_per_user" type="number" min="1" :label="__('Uses per rider')" :value="$promo->usage_limit_per_user" required />
                    <x-admin.toggle name="first_ride_only" :label="__('First ride only')" :checked="$promo->first_ride_only" :hint="__('Only riders without a completed ride can use it.')" />
                </div>
            </x-admin.card>

            <x-admin.card :title="__('Validity')">
                <div class="space-y-4">
                    <x-admin.input name="starts_at" type="datetime-local" :label="__('Starts')" :value="$promo->starts_at?->format('Y-m-d\TH:i')" :hint="__('Leave empty to start now.')" />
                    <x-admin.input name="expires_at" type="datetime-local" :label="__('Expires')" :value="$promo->expires_at?->format('Y-m-d\TH:i')" :hint="__('Times are in :timezone.', ['timezone' => config('app.timezone')])" />
                    <x-admin.toggle name="is_active" :label="__('Active')" :checked="$promo->is_active" />
                </div>
                <div class="mt-5 flex gap-2">
                    <x-admin.button type="submit">{{ $editing ? __('Save changes') : __('Create promo code') }}</x-admin.button>
                    <x-admin.button variant="secondary" :href="route('admin.promo-codes.index')">{{ __('Cancel') }}</x-admin.button>
                </div>
            </x-admin.card>
        </div>
    </form>
</x-admin.layout>