@extends('layouts.admin', [
    'title' => 'Edit Page | Admin | LottoData',
    'heading' => 'Edit Page',
])

@section('content')
    <section class="max-w-4xl rounded-[2rem] border border-white/10 bg-white/[0.04] p-6 lg:p-8">
        <form method="POST" action="{{ route('admin.content.pages.update', $page) }}" class="space-y-6">
            @csrf
            @method('PUT')

            <div class="grid gap-6 md:grid-cols-2">
                <div>
                    <label for="title" class="block text-sm font-medium text-slate-200">Title</label>
                    <input id="title" name="title" type="text" value="{{ old('title', $page->title) }}" required class="mt-2 w-full rounded-2xl border border-white/10 bg-slate-950/70 px-4 py-3 text-white focus:border-cyan-300 focus:outline-none">
                    @error('title')<p class="mt-2 text-sm text-rose-300">{{ $message }}</p>@enderror
                </div>

                <div>
                    <label for="status" class="block text-sm font-medium text-slate-200">Status</label>
                    <select id="status" name="status" class="mt-2 w-full rounded-2xl border border-white/10 bg-slate-950/70 px-4 py-3 text-white focus:border-cyan-300 focus:outline-none">
                        <option value="draft" @selected(old('status', $page->status) === 'draft')>draft</option>
                        <option value="published" @selected(old('status', $page->status) === 'published')>published</option>
                    </select>
                    @error('status')<p class="mt-2 text-sm text-rose-300">{{ $message }}</p>@enderror
                </div>
            </div>

            <div>
                <label for="excerpt" class="block text-sm font-medium text-slate-200">Excerpt / Lead</label>
                <textarea id="excerpt" name="excerpt" rows="3" class="mt-2 w-full rounded-2xl border border-white/10 bg-slate-950/70 px-4 py-3 text-white focus:border-cyan-300 focus:outline-none">{{ old('excerpt', $page->excerpt) }}</textarea>
                @error('excerpt')<p class="mt-2 text-sm text-rose-300">{{ $message }}</p>@enderror
            </div>

            <div>
                <label for="body" class="block text-sm font-medium text-slate-200">Body</label>
                <textarea id="body" name="body" rows="8" class="mt-2 w-full rounded-2xl border border-white/10 bg-slate-950/70 px-4 py-3 text-white focus:border-cyan-300 focus:outline-none">{{ old('body', $page->body) }}</textarea>
                @error('body')<p class="mt-2 text-sm text-rose-300">{{ $message }}</p>@enderror
            </div>

            <div class="grid gap-6 md:grid-cols-2">
                <div>
                    <label for="meta_title" class="block text-sm font-medium text-slate-200">Meta Title</label>
                    <input id="meta_title" name="meta_title" type="text" value="{{ old('meta_title', $page->meta_title) }}" class="mt-2 w-full rounded-2xl border border-white/10 bg-slate-950/70 px-4 py-3 text-white focus:border-cyan-300 focus:outline-none">
                    @error('meta_title')<p class="mt-2 text-sm text-rose-300">{{ $message }}</p>@enderror
                </div>

                <div>
                    <label for="meta_description" class="block text-sm font-medium text-slate-200">Meta Description</label>
                    <textarea id="meta_description" name="meta_description" rows="3" class="mt-2 w-full rounded-2xl border border-white/10 bg-slate-950/70 px-4 py-3 text-white focus:border-cyan-300 focus:outline-none">{{ old('meta_description', $page->meta_description) }}</textarea>
                    @error('meta_description')<p class="mt-2 text-sm text-rose-300">{{ $message }}</p>@enderror
                </div>
            </div>

            <div class="flex flex-wrap gap-3">
                <button type="submit" class="rounded-full bg-cyan-300 px-5 py-3 text-sm font-semibold text-slate-950 transition hover:bg-cyan-200">
                    Save page
                </button>
                <a href="{{ route('admin.content') }}" class="rounded-full border border-white/10 px-5 py-3 text-sm font-semibold text-slate-200 transition hover:border-white/20 hover:text-white">
                    Cancel
                </a>
            </div>
        </form>
    </section>
@endsection