@extends('layouts.admin')
@push('head')
    @vite('resources/js/admin-page-builder.jsx')
@endpush
@section('content')
@php
    $storedBuilderJson = json_encode($builderData, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE);
    $initialBuilderJson = old('builder_data', $storedBuilderJson);
    $publicUrl = in_array($page->slug, ['about','privacy','terms','disclaimer','accessibility'], true)
        ? url('/'.$page->slug)
        : ($page->slug === 'patient-information' ? route('patient-info') : route('pages.show', $page));
@endphp
<div class="max-w-[1500px]">
    <div class="flex flex-col justify-between gap-4 xl:flex-row xl:items-end">
        <div>
            <a class="text-sm font-semibold text-black/50 hover:text-black" href="{{ route('admin.pages.index') }}">← Back to Pages</a>
            <p class="hms-kicker mt-5">Visual page editor</p>
            <h1 class="font-serif text-4xl">{{ $page->title }}</h1>
            <p class="mt-3 max-w-3xl text-black/60">Build the page visually with reusable sections. Images can be uploaded or linked directly from image blocks, and Published pages go live when you save them.</p>
        </div>
        <div class="flex flex-wrap gap-2">
            @if($page->status === 'published')<a class="hms-button border border-black/15" href="{{ $publicUrl }}" target="_blank" rel="noopener">View live page ↗</a>@endif
            <button class="hms-button hms-button-primary" type="submit" form="page-settings-form">Save page</button>
        </div>
    </div>

    <form id="page-settings-form" class="mt-8 grid gap-6" method="POST" action="{{ route('admin.pages.update', $page) }}">
        @csrf @method('PUT')
        <input type="hidden" name="builder_data" id="hms-builder-data" value="{{ $initialBuilderJson }}">
        <input type="hidden" name="content" value="{{ old('content', $page->content) }}">

        <section class="rounded-2xl border border-black/10 bg-white p-6">
            <div class="flex flex-col justify-between gap-3 lg:flex-row lg:items-start">
                <div><h2 class="font-serif text-2xl">Page settings</h2><p class="mt-2 text-sm text-black/55">Identity, publishing, search metadata, and indexing controls for this page.</p></div>
                <span class="rounded-full px-3 py-1 text-xs font-bold uppercase tracking-wide {{ $page->status === 'published' ? 'bg-green-100 text-green-800' : 'bg-amber-100 text-amber-800' }}">Current: {{ $page->status }}</span>
            </div>
            <div class="mt-6 grid gap-5 lg:grid-cols-2">
                <label class="grid gap-1.5 text-sm font-semibold">Page title<span class="text-xs font-normal text-black/45">Shown as the page heading and used as the default SEO title.</span><input class="rounded-xl border border-black/15 px-4 py-3" name="title" value="{{ old('title', $page->title) }}" required></label>
                <label class="grid gap-1.5 text-sm font-semibold">URL slug<span class="text-xs font-normal text-black/45">Changing this changes the page URL; add a redirect when replacing an established public URL.</span><input class="rounded-xl border border-black/15 px-4 py-3" name="slug" value="{{ old('slug', $page->slug) }}" required></label>
                <label class="grid gap-1.5 text-sm font-semibold lg:col-span-2">Short excerpt<span class="text-xs font-normal text-black/45">Optional concise summary used as a metadata fallback and available to page listings.</span><textarea class="min-h-24 rounded-xl border border-black/15 px-4 py-3" name="excerpt">{{ old('excerpt', $page->excerpt) }}</textarea></label>
                <label class="grid gap-1.5 text-sm font-semibold">Publishing status<span class="text-xs font-normal text-black/45">Draft is private, Published is publicly available immediately after saving, and Archived removes it from public access without deleting it.</span><select class="rounded-xl border border-black/15 px-4 py-3" name="status">@foreach(['draft' => 'Draft', 'published' => 'Published', 'archived' => 'Archived'] as $value => $label)<option value="{{ $value }}" @selected(old('status', $page->status) === $value)>{{ $label }}</option>@endforeach</select></label>
                <label class="flex items-start gap-3 rounded-xl bg-black/[.025] p-4 text-sm font-semibold"><input class="mt-1" type="checkbox" name="noindex" value="1" @checked(old('noindex', $page->noindex))><span>Exclude this page from search indexing<small class="mt-1 block font-normal leading-relaxed text-black/50">Adds a page-level noindex instruction and keeps eligible custom pages out of the sitemap.</small></span></label>
                <label class="grid gap-1.5 text-sm font-semibold">SEO title<span class="text-xs font-normal text-black/45">Optional browser/search title, up to 70 characters. Falls back to the page title.</span><input class="rounded-xl border border-black/15 px-4 py-3" name="seo_title" maxlength="70" value="{{ old('seo_title', $page->seo_title) }}"></label>
                <label class="grid gap-1.5 text-sm font-semibold">Meta description<span class="text-xs font-normal text-black/45">Optional search/social description, up to 170 characters. Falls back to the excerpt.</span><textarea class="min-h-24 rounded-xl border border-black/15 px-4 py-3" name="seo_description" maxlength="170">{{ old('seo_description', $page->seo_description) }}</textarea></label>
            </div>
        </section>
    </form>

    <section class="mt-6 overflow-hidden rounded-2xl border border-black/10 bg-white">
        <div class="border-b border-black/10 p-6">
            <div class="flex flex-col justify-between gap-3 lg:flex-row lg:items-start">
                <div>
                    <h2 class="font-serif text-2xl">Page builder</h2>
                    <p class="mt-2 max-w-4xl text-sm leading-relaxed text-black/55">Drag sections into place and edit them visually. Available blocks include heroes, rich text, images, image/text layouts, two columns, card grids, stats, quotes, FAQs, videos, callouts, buttons, and spacing. Image blocks let you upload a JPG/PNG/WebP or paste an HTTPS image link without leaving this editor.</p>
                </div>
                <div class="rounded-xl bg-[var(--hms-cream)] px-4 py-3 text-xs leading-relaxed text-black/60"><strong class="block text-black/75">How saving works</strong>Builder edits are staged in this browser. Use <strong>Save page</strong> above or below to commit both settings and blocks.</div>
            </div>
        </div>
        <script type="application/json" id="hms-page-builder-initial">{!! json_encode(json_decode($initialBuilderJson, true) ?: $builderData, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_UNESCAPED_SLASHES) !!}</script>
        <div id="hms-page-builder" data-media-upload-url="{{ route('admin.media.inline') }}" class="min-h-[620px]"></div>
        <noscript><div class="border-t border-red-200 bg-red-50 p-5 text-sm text-red-800">JavaScript is required for the visual page editor. Page metadata can still be reviewed, but content blocks cannot be edited until JavaScript is enabled.</div></noscript>
    </section>

    <div class="mt-6 flex flex-wrap items-center justify-between gap-4 rounded-2xl border border-black/10 bg-white p-5">
        <p class="text-sm text-black/55">Saving is audit logged. If the page status is Published, the saved content becomes public immediately.</p>
        <button class="hms-button hms-button-primary" type="submit" form="page-settings-form">Save page</button>
    </div>
</div>
@endsection