@php $banner = $banner ?? null; @endphp

<div class="grid grid-cols-1 gap-5 lg:grid-cols-3">
    <div class="space-y-5 lg:col-span-2">
        <x-admin.card>
            <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
                <div>
                    <x-admin.label for="type" value="Placement" required />
                    <x-admin.select id="type" name="type">
                        @foreach ($types as $type)
                            <option value="{{ $type->value }}" @selected(old('type', $banner?->type?->value) === $type->value)>
                                {{ $type->label() }}
                            </option>
                        @endforeach
                    </x-admin.select>
                    <x-admin.error :messages="$errors->get('type')" />
                </div>

                <div>
                    <x-admin.label for="sort_order" value="Sort Order" />
                    <x-admin.input id="sort_order" type="number" min="0" name="sort_order" :value="old('sort_order', $banner?->sort_order ?? 0)" />
                    <x-admin.error :messages="$errors->get('sort_order')" />
                </div>

                <div>
                    <x-admin.label for="title" value="Title" />
                    <x-admin.input id="title" name="title" :value="old('title', $banner?->title)" />
                    <x-admin.error :messages="$errors->get('title')" />
                </div>

                <div>
                    <x-admin.label for="subtitle" value="Subtitle" />
                    <x-admin.input id="subtitle" name="subtitle" :value="old('subtitle', $banner?->subtitle)" />
                    <x-admin.error :messages="$errors->get('subtitle')" />
                </div>

                <div>
                    <x-admin.label for="link_url" value="Link URL" />
                    <x-admin.input id="link_url" name="link_url" :value="old('link_url', $banner?->link_url)" placeholder="/shop or https://…" />
                    <x-admin.error :messages="$errors->get('link_url')" />
                </div>

                <div>
                    <x-admin.label for="button_text" value="Button Text" />
                    <x-admin.input id="button_text" name="button_text" :value="old('button_text', $banner?->button_text)" placeholder="Shop Now" />
                    <x-admin.error :messages="$errors->get('button_text')" />
                </div>

                <div>
                    <x-admin.label for="starts_at" value="Starts At" />
                    <x-admin.input id="starts_at" type="datetime-local" name="starts_at" :value="old('starts_at', $banner?->starts_at?->format('Y-m-d\TH:i'))" />
                    <x-admin.error :messages="$errors->get('starts_at')" />
                </div>

                <div>
                    <x-admin.label for="ends_at" value="Ends At" />
                    <x-admin.input id="ends_at" type="datetime-local" name="ends_at" :value="old('ends_at', $banner?->ends_at?->format('Y-m-d\TH:i'))" />
                    <x-admin.error :messages="$errors->get('ends_at')" />
                </div>
            </div>
        </x-admin.card>
    </div>

    <div class="space-y-5">
        <x-admin.card>
            <x-admin.label for="image" value="Desktop Image" required />
            @if ($banner?->image)
                <img src="{{ Storage::url($banner->image) }}" alt="" class="mb-3 h-28 w-full rounded-lg object-cover">
            @endif
            <input id="image" type="file" name="image" accept="image/*" class="block w-full text-sm text-ink/60 file:mr-3 file:rounded-lg file:border-0 file:bg-black/5 file:px-3 file:py-2 file:text-sm file:font-medium hover:file:bg-black/10">
            <x-admin.error :messages="$errors->get('image')" />
        </x-admin.card>

        <x-admin.card>
            <x-admin.label for="mobile_image" value="Mobile Image (optional)" />
            @if ($banner?->mobile_image)
                <img src="{{ Storage::url($banner->mobile_image) }}" alt="" class="mb-3 h-28 w-full rounded-lg object-cover">
            @endif
            <input id="mobile_image" type="file" name="mobile_image" accept="image/*" class="block w-full text-sm text-ink/60 file:mr-3 file:rounded-lg file:border-0 file:bg-black/5 file:px-3 file:py-2 file:text-sm file:font-medium hover:file:bg-black/10">
            <x-admin.error :messages="$errors->get('mobile_image')" />
        </x-admin.card>

        <x-admin.card>
            <x-admin.label for="status" value="Status" required />
            <x-admin.select id="status" name="status">
                <option value="active" @selected(old('status', $banner?->status?->value ?? 'active') === 'active')>Active</option>
                <option value="inactive" @selected(old('status', $banner?->status?->value) === 'inactive')>Inactive</option>
            </x-admin.select>
            <x-admin.error :messages="$errors->get('status')" />
        </x-admin.card>
    </div>
</div>

<div class="mt-6 flex items-center gap-3">
    <x-admin.button variant="accent">{{ $banner ? 'Save Changes' : 'Create Banner' }}</x-admin.button>
    <a href="{{ route('admin.banners.index') }}" class="text-sm text-ink/50 hover:text-ink">Cancel</a>
</div>
