@php
    /** @var \App\Models\PreregistrationPage|null $page */
    use Illuminate\Support\Facades\Storage;

    $page = $page ?? null;
    $pageBgUrl = $page !== null && filled($page->background_image)
        ? Storage::disk('public')->url($page->background_image)
        : null;
@endphp

<div class="grid max-w-3xl gap-6">
    <div>
        <label for="title" class="block text-sm font-medium text-slate-700">{{ __('Title') }}</label>
        <input type="text" name="title" id="title" value="{{ old('title', $page?->title) }}" required maxlength="255"
            class="mt-1 block w-full rounded-lg border-slate-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" />
        @error('title')
            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
        @enderror
    </div>

    <div>
        <label for="thank_you_message" class="block text-sm font-medium text-slate-700">{{ __('Thank you message') }}</label>
        <textarea name="thank_you_message" id="thank_you_message" rows="3"
            class="mt-1 block w-full rounded-lg border-slate-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">{{ old('thank_you_message', $page?->thank_you_message) }}</textarea>
        @error('thank_you_message')
            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
        @enderror
    </div>

    <div>
        <label for="expired_message" class="block text-sm font-medium text-slate-700">{{ __('Expired message') }}</label>
        <textarea name="expired_message" id="expired_message" rows="3"
            class="mt-1 block w-full rounded-lg border-slate-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">{{ old('expired_message', $page?->expired_message) }}</textarea>
        @error('expired_message')
            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
        @enderror
    </div>

    <div>
        <label for="ticketshop_url" class="block text-sm font-medium text-slate-700">{{ __('Ticket shop URL') }}</label>
        <input type="text" name="ticketshop_url" id="ticketshop_url" inputmode="url" autocomplete="url"
            value="{{ old('ticketshop_url', $page?->ticketshop_url) }}"
            class="mt-1 block w-full rounded-lg border-slate-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" placeholder="https://…" />
        <p class="mt-1 text-xs text-slate-500">{{ __('Shown as the main button when the registration period has ended (and as the CTA link for the CTA banner block in that state).') }}</p>
        @error('ticketshop_url')
            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
        @enderror
    </div>

    <div>
        <label for="post_submit_redirect_url" class="block text-sm font-medium text-slate-700">{{ __('Redirect URL (after registration)') }}</label>
        <input type="text" name="post_submit_redirect_url" id="post_submit_redirect_url" inputmode="url" autocomplete="url"
            value="{{ old('post_submit_redirect_url', $page?->post_submit_redirect_url) }}"
            class="mt-1 block w-full rounded-lg border-slate-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" placeholder="https://…" />
        <p class="mt-1 text-xs text-slate-500">{{ __('Optional. Visitors are sent here 5 seconds after a successful registration.') }}</p>
        @error('post_submit_redirect_url')
            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
        @enderror
    </div>

    <div class="rounded-xl border border-slate-200 bg-slate-50/80 p-4">
        <p class="text-sm font-semibold text-slate-800">{{ __('Full-page background') }}</p>
        <p class="mt-1 text-xs text-slate-600">{{ __('Cover image behind the card on the public page.') }}</p>
        @if ($pageBgUrl !== null)
            <div class="mt-3 flex flex-wrap items-center gap-3">
                <img src="{{ e($pageBgUrl) }}" alt="" class="h-20 w-32 rounded border border-slate-200 object-cover" />
                <label class="inline-flex items-center gap-2 text-sm text-red-700">
                    <input type="checkbox" name="remove_page_background" value="1" @checked(old('remove_page_background')) />
                    {{ __('Remove background image') }}
                </label>
            </div>
        @endif
        <div class="mt-3">
            <label for="page_background" class="block text-sm font-medium text-slate-700">{{ __('Upload background') }}</label>
            <input type="file" name="page_background" id="page_background" accept="image/jpeg,image/png,image/webp"
                class="mt-1 block w-full text-sm text-slate-600" />
            @error('page_background')
                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>
        <div class="mt-4 grid gap-4 sm:grid-cols-2">
            <div>
                <label for="background_overlay_color" class="block text-sm font-medium text-slate-700">{{ __('Overlay colour') }}</label>
                <input type="text" name="background_overlay_color" id="background_overlay_color"
                    value="{{ old('background_overlay_color', $page?->background_overlay_color ?? '#000000') }}"
                    class="mt-1 block w-full rounded-lg border-slate-300 font-mono text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
                @error('background_overlay_color')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>
            <div>
                <label for="background_overlay_opacity" class="block text-sm font-medium text-slate-700">{{ __('Overlay opacity (%)') }}</label>
                <input type="number" name="background_overlay_opacity" id="background_overlay_opacity" min="0" max="100"
                    value="{{ old('background_overlay_opacity', $page?->background_overlay_opacity ?? 50) }}"
                    class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
                @error('background_overlay_opacity')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>
        </div>
    </div>

    <div class="grid gap-6 sm:grid-cols-2">
        <div>
            <label for="start_date" class="block text-sm font-medium text-slate-700">{{ __('Start date') }}</label>
            <input type="datetime-local" name="start_date" id="start_date" required
                value="{{ old('start_date', $page?->start_date?->format('Y-m-d\TH:i')) }}"
                class="mt-1 block w-full rounded-lg border-slate-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" />
            @error('start_date')
                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>
        <div>
            <label for="end_date" class="block text-sm font-medium text-slate-700">{{ __('End date') }}</label>
            <input type="datetime-local" name="end_date" id="end_date" required
                value="{{ old('end_date', $page?->end_date?->format('Y-m-d\TH:i')) }}"
                class="mt-1 block w-full rounded-lg border-slate-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" />
            @error('end_date')
                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>
    </div>

    <div>
        <label class="inline-flex items-center gap-2">
            <input type="checkbox" name="is_active" value="1" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500"
                @checked(old('is_active', $page?->is_active ?? true)) />
            <span class="text-sm font-medium text-slate-700">{{ __('Active') }}</span>
        </label>
    </div>
</div>