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

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

        <div class="space-y-6 lg:col-span-2">
            <x-admin.card :title="__('Banner')">
                <div class="space-y-4">
                    <x-admin.input name="title" :label="__('Title')" :value="$banner->title" maxlength="100" required :hint="__('Also used as the image description for screen readers.')" />
                    <x-admin.file-input name="image" :label="__('Image')" :preview="$editing ? $banner->image_url : null" accept="image/png,image/jpeg,image/webp"
                                        :hint="__('PNG, JPG or WebP, up to :size MB. The apps show it at 3:1, so 1200 × 400 pixels works well.', ['size' => round(config('ridex.uploads.max_size_kb') / 1024, 1)])" />
                </div>
            </x-admin.card>

            <x-admin.card :title="__('On tap')">
                <div class="grid gap-4 sm:grid-cols-2">
                    <x-admin.select name="action_type" :label="__('Action')" :options="$actions" :value="$banner->action_type" :placeholder="__('Nothing')" x-model="action"
                                    :hint="__('Sent to the app with the banner.')" />
                    {{-- Only the field for the chosen action is enabled, so it alone is sent as action_value. --}}
                    <div x-show="action === 'url' || action === 'promo'" x-cloak>
                        <x-admin.input name="action_value" id="action_value_text" :label="__('Link or promo code')" :value="$banner->action_value" maxlength="255"
                                       x-bind:disabled="action === 'screen'" x-bind:placeholder="{ url: 'https://…', promo: 'WELCOME20' }[action] ?? ''"
                                       :hint="__('Promo code banners are shown in the rider app only.')" />
                    </div>
                    <div x-show="action === 'screen'" x-cloak>
                        <x-admin.select name="action_value" id="action_value_screen" :label="__('Screen')" :options="$screens" :value="$banner->action_value"
                                        :placeholder="__('Select…')" x-bind:disabled="action !== 'screen'" :hint="__('The screen must exist in the app the banner is shown in.')" />
                    </div>
                </div>
            </x-admin.card>
        </div>

        <x-admin.card :title="__('Audience & schedule')" class="self-start">
            <div class="space-y-4">
                <x-admin.select name="app" :label="__('Shown in')" :options="$apps" :value="$banner->app" required />
                <x-admin.select name="zone_id" :label="__('Zone')" :options="$zones" :value="$banner->zone_id" :placeholder="__('All zones')" />
                <x-admin.input name="starts_at" type="datetime-local" :label="__('Starts')" :value="$banner->starts_at?->format('Y-m-d\TH:i')" />
                <x-admin.input name="ends_at" type="datetime-local" :label="__('Ends')" :value="$banner->ends_at?->format('Y-m-d\TH:i')"
                               :hint="__('Times are in :timezone. Leave empty for no limit.', ['timezone' => config('app.timezone')])" />
                <x-admin.input name="sort_order" type="number" min="0" max="999" :label="__('Order')" :value="$banner->sort_order" :hint="__('Lower numbers come first.')" />
                <x-admin.toggle name="is_active" :label="__('Active')" :checked="$banner->is_active" />
            </div>
            <div class="mt-5 flex gap-2">
                <x-admin.button type="submit">{{ $editing ? __('Save changes') : __('Create banner') }}</x-admin.button>
                <x-admin.button variant="secondary" :href="route('admin.cms.banners.index')">{{ __('Cancel') }}</x-admin.button>
            </div>
        </x-admin.card>
    </form>
</x-admin.layout>