@extends('layouts.admin')
@section('content')
<div class="max-w-7xl">
    <div class="flex flex-col justify-between gap-4 md:flex-row md:items-end">
        <div>
            <p class="hms-kicker">Website content</p>
            <h1 class="font-serif text-4xl">Pages</h1>
            <p class="mt-3 max-w-3xl text-black/60">Create reusable website pages, then build their content with the visual drag-and-drop editor. Public visibility is controlled separately by each page’s status.</p>
        </div>
        <a class="text-sm font-semibold text-[var(--hms-forest)]" href="{{ route('home') }}" target="_blank" rel="noopener">View website ↗</a>
    </div>

    <section class="mt-8 rounded-2xl border border-black/10 bg-white p-6">
        <div class="grid gap-6 lg:grid-cols-[1fr_1.4fr]">
            <div>
                <h2 class="font-serif text-2xl">Create a page</h2>
                <p class="mt-2 text-sm leading-relaxed text-black/55">Start with the page identity. After creation, HMS opens the visual editor where you can add and reorder content blocks.</p>
            </div>
            <form class="grid gap-4 sm:grid-cols-2" method="POST" action="{{ route('admin.pages.store') }}">
                @csrf
                <label class="grid gap-1.5 text-sm font-semibold sm:col-span-2">Page title<span class="text-xs font-normal text-black/45">The public H1 and default browser/SEO title.</span><input class="rounded-xl border border-black/15 px-4 py-3" name="title" value="{{ old('title') }}" placeholder="Example: Our Story" required></label>
                <label class="grid gap-1.5 text-sm font-semibold">URL slug<span class="text-xs font-normal text-black/45">Optional. Leave blank to create it from the title.</span><input class="rounded-xl border border-black/15 px-4 py-3" name="slug" value="{{ old('slug') }}" placeholder="our-story"></label>
                <label class="grid gap-1.5 text-sm font-semibold">Initial status<span class="text-xs font-normal text-black/45">Draft is safest while the page is being built.</span><select class="rounded-xl border border-black/15 px-4 py-3" name="status"><option value="draft" @selected(old('status','draft')==='draft')>Draft</option><option value="published" @selected(old('status')==='published')>Published</option></select></label>
                <input type="hidden" name="content" value="">
                <button class="hms-button hms-button-primary justify-self-start sm:col-span-2">Create & open editor</button>
            </form>
        </div>
    </section>

    <section class="mt-8">
        <div class="flex items-center justify-between gap-4">
            <div><h2 class="font-serif text-2xl">Existing pages</h2><p class="mt-1 text-sm text-black/50">{{ $pages->count() }} {{ $pages->count() === 1 ? 'page' : 'pages' }}</p></div>
        </div>

        <div class="mt-4 overflow-hidden rounded-2xl border border-black/10 bg-white">
            @forelse($pages as $page)
                <article class="grid gap-4 border-b border-black/10 p-5 last:border-b-0 md:grid-cols-[1fr_auto] md:items-center">
                    <div class="min-w-0">
                        <div class="flex flex-wrap items-center gap-2">
                            <h3 class="truncate text-base font-bold">{{ $page->title }}</h3>
                            <span class="rounded-full px-2.5 py-1 text-[10px] font-bold uppercase tracking-wide {{ $page->status === 'published' ? 'bg-green-100 text-green-800' : ($page->status === 'archived' ? 'bg-black/5 text-black/50' : 'bg-amber-100 text-amber-800') }}">{{ $page->status }}</span>
                        </div>
                        <p class="mt-1 truncate text-sm text-black/50">/{{ $page->slug }}</p>
                        <div class="mt-2 flex flex-wrap gap-x-5 gap-y-1 text-xs text-black/45">
                            <span>{{ $page->sections_count }} visual {{ $page->sections_count === 1 ? 'block' : 'blocks' }}</span>
                            <span>Updated {{ $page->updated_at->diffForHumans() }}</span>
                            @if($page->noindex)<span>Excluded from search indexing</span>@endif
                        </div>
                    </div>
                    <div class="flex flex-wrap gap-2">
                        @if($page->status === 'published')
                            <a class="hms-button border border-black/15" href="{{ in_array($page->slug, ['about','privacy','terms','disclaimer','accessibility'], true) ? url('/'.$page->slug) : ($page->slug === 'patient-information' ? route('patient-info') : route('pages.show', $page)) }}" target="_blank" rel="noopener">Preview</a>
                        @endif
                        <a class="hms-button hms-button-primary" href="{{ route('admin.pages.edit', $page) }}">Edit page</a>
                    </div>
                </article>
            @empty
                <div class="p-8 text-center text-sm text-black/50">No editable pages yet. Create the first page above.</div>
            @endforelse
        </div>
    </section>
</div>
@endsection