@php
    /** @var \App\Models\PreregistrationPage|null $page */
    $page = $page ?? 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="heading" class="block text-sm font-medium text-slate-700">{{ __('Heading') }}</label>
        <input type="text" name="heading" id="heading" value="{{ old('heading', $page?->heading) }}" 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('heading')
            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
        @enderror
    </div>

    <div>
        <label for="intro_text" class="block text-sm font-medium text-slate-700">{{ __('Intro text') }}</label>
        <textarea name="intro_text" id="intro_text" rows="4"
            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('intro_text', $page?->intro_text) }}</textarea>
        @error('intro_text')
            <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://…" />
        @error('ticketshop_url')
            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
        @enderror
    </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 class="flex flex-wrap gap-6">
        <label class="inline-flex items-center gap-2">
            <input type="checkbox" name="phone_enabled" value="1" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500"
                @checked(old('phone_enabled', $page?->phone_enabled ?? false)) />
            <span class="text-sm font-medium text-slate-700">{{ __('Phone enabled') }}</span>
        </label>
        <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>
        <label for="background_image" class="block text-sm font-medium text-slate-700">{{ __('Background image') }}</label>
        <p class="mt-0.5 text-xs text-slate-500">{{ __('JPG, PNG or WebP. Max 5 MB.') }}</p>
        <input type="file" name="background_image" id="background_image" accept="image/jpeg,image/png,image/webp"
            class="mt-1 block w-full text-sm text-slate-600 file:mr-4 file:rounded-lg file:border-0 file:bg-slate-100 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-slate-700 hover:file:bg-slate-200" />
        @error('background_image')
            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
        @enderror
        @if ($page?->background_image)
            <p class="mt-2 text-xs text-slate-600">{{ __('Current file:') }} <a href="/storage/{{ $page->background_image }}" class="text-indigo-600 hover:underline" target="_blank" rel="noopener">{{ __('View') }}</a></p>
        @endif
    </div>

    <div>
        <label for="logo_image" class="block text-sm font-medium text-slate-700">{{ __('Logo image') }}</label>
        <p class="mt-0.5 text-xs text-slate-500">{{ __('JPG, PNG, WebP or SVG. Max 2 MB.') }}</p>
        <input type="file" name="logo_image" id="logo_image" accept="image/jpeg,image/png,image/webp,image/svg+xml,.svg"
            class="mt-1 block w-full text-sm text-slate-600 file:mr-4 file:rounded-lg file:border-0 file:bg-slate-100 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-slate-700 hover:file:bg-slate-200" />
        @error('logo_image')
            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
        @enderror
        @if ($page?->logo_image)
            <p class="mt-2 text-xs text-slate-600">{{ __('Current file:') }} <a href="/storage/{{ $page->logo_image }}" class="text-indigo-600 hover:underline" target="_blank" rel="noopener">{{ __('View') }}</a></p>
        @endif
    </div>
</div>