@extends('admin.layouts.app')

@section('title', 'New Page')
@section('page_title', 'New Page')

@section('content')
@php
    $layoutMeta = [
        'standard' => ['Hero, rich text and a call-to-action panel.', 'M3 4h18v6H3zM5 13h14M5 16h10M3 20h18'],
        'landing' => ['Conversion page: hero, stats, features, process, testimonials, FAQ, CTA.', 'M3 4h18v7H3zM3 14h5v6H3zM10 14h4v6h-4zM16 14h5v6h-5z'],
        'legal' => ['Compact hero with a long-form policy card.', 'M6 3h9l3 3v15H6zM9 9h6M9 13h6M9 17h4'],
        'blank' => ['Start from an empty canvas and add addons yourself.', 'M4 4h16v16H4zM12 9v6M9 12h6'],
    ];
@endphp

<div class="home-editor" x-data="{
        title: @js(old('title', '')),
        slug: @js(old('slug', '')),
        slugTouched: @js(filled(old('slug'))),
        layout: @js(old('layout', 'standard')),
        slugify(value) { return value.toLowerCase().trim().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, ''); },
    }">
    <div class="home-editor__hero">
        <p class="home-editor__eyebrow">Pages · New page</p>
        <h1 class="home-editor__title">Create a new page</h1>
        <p class="home-editor__lead">Name your page, choose a starting layout, and you’ll go straight into the page builder to add sections, images and files.</p>
        <div class="home-editor__hero-actions">
            <a href="{{ route('admin.pages.index') }}" class="home-btn home-btn--light">← All pages</a>
        </div>
    </div>

    <form method="POST" action="{{ route('admin.pages.store') }}" class="home-editor__shell">
        @csrf
        <input type="hidden" name="content" value="">
        <input type="hidden" name="sort_order" value="0">

        <div class="home-editor__body space-y-6">
            <section>
                <h2 class="text-sm font-bold text-slate-900">Page details</h2>
                <p class="mt-1 text-xs text-slate-500">The URL is generated from the title — you can change it later in page settings.</p>
                <div class="home-field-grid mt-4">
                    <div>
                        <label class="home-label" for="title">Page title</label>
                        <input id="title" type="text" name="title" class="home-input" required maxlength="255" x-model="title"
                               @input="if (!slugTouched) slug = slugify(title)" placeholder="e.g. Pricing">
                    </div>
                    <div>
                        <label class="home-label" for="slug">URL</label>
                        <div class="pb-slug">
                            <span>{{ preg_replace('#^https?://#', '', url('/')) }}/</span>
                            <input id="slug" type="text" name="slug" class="home-input" required maxlength="255" x-model="slug"
                                   @input="slugTouched = true; slug = slugify(slug)" placeholder="pricing">
                        </div>
                    </div>
                    <div class="span-2">
                        <label class="home-label" for="excerpt">Summary <span class="font-normal text-slate-400">(optional)</span></label>
                        <textarea id="excerpt" name="excerpt" rows="2" class="home-textarea" placeholder="Short description used for listings and as the default meta description">{{ old('excerpt') }}</textarea>
                    </div>
                    <div>
                        <label class="home-label" for="status">Status</label>
                        <select id="status" name="status" class="home-select">
                            @foreach (['draft' => 'Draft — not visible yet', 'published' => 'Published', 'scheduled' => 'Scheduled'] as $value => $label)
                                <option value="{{ $value }}" @selected(old('status', 'draft') === $value)>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="home-label" for="template">Page type</label>
                        <select id="template" name="template" class="home-select">
                            @foreach ($templates as $value => $label)
                                @continue(in_array($value, ['homepage', 'about', 'contact'], true))
                                <option value="{{ $value }}" @selected(old('template', 'default') === $value)>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </section>

            <section>
                <h2 class="text-sm font-bold text-slate-900">Starting layout</h2>
                <p class="mt-1 text-xs text-slate-500">Every section stays fully editable in the builder.</p>
                <div class="pb-layouts mt-4">
                    @foreach ($layouts as $key => $label)
                        <label class="pb-layout" :class="layout === '{{ $key }}' && 'is-active'">
                            <input type="radio" name="layout" value="{{ $key }}" x-model="layout" class="sr-only">
                            <span class="pb-layout__icon">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="{{ $layoutMeta[$key][1] ?? '' }}"/></svg>
                            </span>
                            <span class="pb-layout__name">{{ $label }}</span>
                            <span class="pb-layout__desc">{{ $layoutMeta[$key][0] ?? '' }}</span>
                            <span class="pb-layout__check" aria-hidden="true">✓</span>
                        </label>
                    @endforeach
                </div>
            </section>

            <div class="home-editor__footer">
                <a href="{{ route('admin.pages.index') }}" class="home-btn home-btn--ghost">Cancel</a>
                <button type="submit" class="home-btn home-btn--primary">Create &amp; open builder →</button>
            </div>
        </div>
    </form>
</div>
@endsection