@php($editing = $type->exists)
<x-admin.layout :title="$editing ? __('Edit :name', ['name' => $type->name]) : __('New vehicle type')">
    <x-admin.page-header :title="$editing ? __('Edit :name', ['name' => $type->name]) : __('New vehicle type')" :back="route('admin.vehicle-types.index')" />

    <form method="POST" action="{{ $editing ? route('admin.vehicle-types.update', $type) : route('admin.vehicle-types.store') }}" enctype="multipart/form-data" class="grid max-w-5xl grid-cols-1 gap-6 lg:grid-cols-3">
        @csrf
        @if ($editing) @method('PUT') @endif

        <x-admin.card :title="__('Details')" class="lg:col-span-2">
            <div class="grid gap-5 sm:grid-cols-2">
                <x-admin.input name="name" :label="__('Name')" :value="$type->name" required :placeholder="__('e.g. Economy')" />
                <x-admin.input name="slug" :label="__('Slug')" :value="$type->slug" :hint="__('Leave empty to generate from the name.')" />
                <div class="sm:col-span-2"><x-admin.input name="description" :label="__('Tagline shown in the app')" :value="$type->description" :placeholder="__('Affordable everyday rides')" /></div>
                <x-admin.input name="capacity" type="number" min="1" max="50" :label="__('Passenger capacity')" :value="$type->capacity" required />
                <x-admin.input name="sort_order" type="number" min="0" :label="__('Display order')" :value="$type->sort_order ?? 0" />
            </div>

            <fieldset class="mt-6">
                <legend class="form-label">{{ __('Available for') }} <span class="text-red-500">*</span></legend>
                <div class="mt-2 flex flex-wrap gap-4">
                    @foreach ($services as $value => $label)
                        <label class="flex items-center gap-2 text-sm">
                            <input type="checkbox" name="service_types[]" value="{{ $value }}" @checked(in_array($value, old('service_types', $type->service_types ?? [])))
                                   class="size-4 rounded border-gray-300 text-brand-600 focus:ring-brand-500 dark:border-gray-700 dark:bg-gray-900">
                            {{ __($label) }}
                        </label>
                    @endforeach
                </div>
                @error('service_types')<p class="form-error">{{ $message }}</p>@enderror
            </fieldset>
        </x-admin.card>

        <div class="space-y-6">
            <x-admin.card :title="__('Images')">
                <div class="space-y-5">
                    @foreach ([
                        'icon' => [__('List icon (PNG, WebP)'), null],
                        'map_icon' => [__('Map marker (PNG, WebP)'), __('Seen from above with the front at the top, on a transparent background, twice as tall as wide (e.g. 72 × 144 px). The apps turn it to the way the driver is heading; without one they draw a car, or a motorbike for one-seat types.')],
                        'image' => [__('Illustration'), null],
                    ] as $field => [$label, $hint])
                        <div>
                            <label class="form-label" for="{{ $field }}">{{ $label }}</label>
                            @if ($type->{$field} && Storage::disk(config('ridex.uploads.disk'))->exists($type->{$field}))
                                <img src="{{ $type->{$field.'_url'} }}" alt="" class="mb-2 h-16 rounded-lg bg-gray-100 object-contain p-1 dark:bg-gray-800">
                            @endif
                            <input type="file" name="{{ $field }}" id="{{ $field }}" accept="image/*" class="block w-full text-sm text-gray-500 file:me-3 file:rounded-lg file:border-0 file:bg-gray-100 file:px-3 file:py-2 file:text-sm file:font-medium hover:file:bg-gray-200 dark:file:bg-gray-800 dark:file:text-gray-200">
                            @if ($hint)<p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">{{ $hint }}</p>@endif
                            @error($field)<p class="form-error">{{ $message }}</p>@enderror
                        </div>
                    @endforeach
                </div>
            </x-admin.card>

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