@extends('admin.layout', ['navType' => $page->type])
@section('title', 'Edit: '.$page->title)
@section('content')
@php
    use App\Support\Tokens;
    $isContent = in_array($page->type, ['page', 'post'], true);
    $tab = request('tab', 'content');
    $robots = (string) $page->robots;
    $site = \App\Models\Setting::get('site_name', 'Anan International School');
@endphp

<div class="page-head">
    <div>
        <div class="muted small">{{ $page->typeLabel() }} @if($page->path !== null)· <a href="{{ $page->url() }}" target="_blank" rel="noopener">{{ $page->url() }}</a>@endif</div>
        <h1>{{ $page->title }} @if($isContent)<span @class(['status', 'status-'.$page->status])>{{ ucfirst($page->status) }}</span>@endif</h1>
    </div>
    <div class="actions">
        <a class="btn btn-accent" href="{{ route('admin.builder.show', $page) }}">@include('admin._icon', ['i' => 'wand'])Visual editor</a>
        @if ($page->path !== null)<a class="btn" href="{{ $page->status === 'draft' ? route('admin.pages.preview', $page) : $page->url() }}" target="_blank" rel="noopener">@include('admin._icon', ['i' => 'eye']){{ $page->status === 'draft' ? 'Preview' : 'View' }}</a>@endif
        @if ($isContent)
            <form method="post" action="{{ route('admin.pages.duplicate', $page) }}">@csrf<button class="btn" type="submit">@include('admin._icon', ['i' => 'layout'])Duplicate</button></form>
        @endif
        <button class="btn btn-primary" type="submit" form="page-form">@include('admin._icon', ['i' => 'check'])Save changes</button>
    </div>
</div>

@if ($page->draft)
    <div class="alert alert-warn">This {{ $page->type === 'layout' ? 'part' : $page->type }} has changes in the <a href="{{ route('admin.builder.show', $page) }}">visual editor</a> that are not published yet.
        Publishing them (Update) will replace content edits made here in the meantime — edit in one place at a time.</div>
@endif
<form id="page-form" method="post" action="{{ route('admin.pages.update', $page) }}" data-page-form>
    @csrf @method('PUT')
    <input type="hidden" name="changes" value="">
    <input type="hidden" name="tab" value="{{ $tab }}" data-tab-input>

    <div class="tabs" data-tabs>
        <button type="button" data-tab="content" @class(['active' => $tab === 'content'])>Content <span class="muted">({{ $blocks->count() }})</span></button>
        <button type="button" data-tab="seo" @class(['active' => $tab === 'seo'])>SEO</button>
        <button type="button" data-tab="settings" @class(['active' => $tab === 'settings'])>Settings</button>
    </div>

    {{-- CONTENT --}}
    <section class="tab-panel" data-panel="content" @if($tab !== 'content') hidden @endif>
        @if ($page->type === 'layout')
            <div class="alert alert-info">This {{ $page->kind }} is shared by every page that uses it. Changes appear site-wide.</div>
        @endif
        <div class="block-tools">
            <input type="search" placeholder="Find a block… (e.g. a heading or image name)" data-block-filter>
            <select data-block-type>
                <option value="">All types</option>
                @foreach ($blocks->pluck('type')->unique()->sort() as $t)
                    <option value="{{ $t }}">{{ \App\Services\Blocks::LABELS[$t] ?? $t }}</option>
                @endforeach
            </select>
            <label class="check"><input type="checkbox" data-block-edited> Only edited</label>
            <button type="button" class="btn btn-sm btn-ghost" data-expand-all>Expand all</button>
        </div>
        <div class="blocks">
            @forelse ($blocks as $block)
                @include('admin.pages._block', ['block' => $block])
            @empty
                <p class="muted">This item has no editable content.</p>
            @endforelse
        </div>
    </section>

    {{-- SEO --}}
    <section class="tab-panel" data-panel="seo" @if($tab !== 'seo') hidden @endif>
        <div class="grid-2">
            <div class="card">
                <h2>Search engines</h2>
                <label class="field"><span>SEO title <em class="count" data-count-for="seo_title" data-max="60"></em></span>
                    <input type="text" name="seo_title" id="seo_title" value="{{ old('seo_title', $page->seo_title) }}" placeholder="{{ $page->title }} - {{ $site }}" data-seo="title"></label>
                <label class="field"><span>Meta description <em class="count" data-count-for="meta_description" data-max="160"></em></span>
                    <textarea name="meta_description" id="meta_description" rows="3" data-seo="desc">{{ old('meta_description', $page->meta_description) }}</textarea></label>
                <div class="field-row">
                    <label class="field"><span>Search engines may</span>
                        <select name="robots_index"><option value="index">Show this page (index)</option><option value="noindex" @selected(str_contains($robots, 'noindex'))>Hide this page (noindex)</option></select></label>
                    <label class="field"><span>Links on this page</span>
                        <select name="robots_follow"><option value="follow">Follow</option><option value="nofollow" @selected(str_contains($robots, 'nofollow'))>Don't follow</option></select></label>
                </div>
                <label class="field"><span>Canonical URL <small class="muted">— leave empty to use this page's own address</small></span>
                    <input type="text" name="canonical" value="{{ old('canonical', Tokens::detokenize((string) $page->canonical)) }}" placeholder="{{ $page->path !== null ? $page->url() : '' }}"></label>
            </div>
            <div class="card">
                <h2>Google preview</h2>
                <div class="serp" data-seo-preview data-default-title="{{ $page->title }} - {{ $site }}">
                    <div class="serp-url">{{ $page->path !== null ? $page->url() : url('/') }}</div>
                    <div class="serp-title" data-serp-title>{{ $page->seo_title ?: $page->title.' - '.$site }}</div>
                    <div class="serp-desc" data-serp-desc>{{ $page->meta_description ?: \App\Models\Setting::get('default_description') }}</div>
                </div>
                <p class="small muted">Aim for a title under 60 characters and a description of 120–160 characters.</p>
            </div>
        </div>
        <div class="grid-2">
            <div class="card">
                <h2>Social sharing (Facebook, WhatsApp, X)</h2>
                <label class="field"><span>Share title <small class="muted">— defaults to the SEO title</small></span><input type="text" name="og_title" value="{{ old('og_title', $page->og_title) }}"></label>
                <label class="field"><span>Share description <small class="muted">— defaults to the meta description</small></span><textarea name="og_description" rows="2">{{ old('og_description', $page->og_description) }}</textarea></label>
                <div class="field"><span>Share image</span>
                    <div class="media-input">
                        <img data-preview-for="og_image" src="{{ Tokens::detokenize((string) $page->og_image) }}" alt="" @if(!$page->og_image) hidden @endif>
                        <input type="text" name="og_image" id="og_image" value="{{ old('og_image', Tokens::detokenize((string) $page->og_image)) }}" placeholder="Default image from Settings">
                        <button type="button" class="btn btn-sm" data-media-pick data-target="#og_image">Choose…</button>
                    </div>
                </div>
            </div>
            <div class="card">
                <h2>Structured data (schema.org JSON-LD)</h2>
                <p class="small muted">Helps Google show rich results. Leave empty for none. Must be valid JSON.</p>
                <textarea class="code" name="schema_json" rows="12" spellcheck="false">{{ old('schema_json', $page->schema_json ? Tokens::detokenize(json_encode(json_decode($page->schema_json), JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) ?: $page->schema_json) : '') }}</textarea>
            </div>
        </div>
    </section>

    {{-- SETTINGS --}}
    <section class="tab-panel" data-panel="settings" @if($tab !== 'settings') hidden @endif>
        <div class="grid-2">
            <div class="card">
                <h2>General</h2>
                <label class="field"><span>Title <small class="muted">— used in lists, menus of posts and as the default SEO title</small></span><input type="text" name="title" value="{{ old('title', $page->title) }}" required></label>
                @if ($isContent)
                    <label class="field"><span>Address</span>
                        <div class="prefix-input"><span>{{ url('/') }}/</span><input type="text" name="path" value="{{ old('path', $page->path) }}" @if($page->path === '') readonly @endif pattern="[a-z0-9][a-z0-9\-/]*|" placeholder="page-address"><span>/</span></div>
                        <small class="muted">Lowercase letters, numbers and hyphens. Changing it adds a redirect from the old address automatically.</small>
                    </label>
                    <div class="field-row">
                        <label class="field"><span>Status</span>
                            <select name="status"><option value="published">Published</option><option value="draft" @selected($page->status === 'draft')>Draft (hidden)</option></select></label>
                        <label class="field"><span>Publish date</span><input type="datetime-local" name="published_at" value="{{ old('published_at', $page->published_at?->format('Y-m-d\TH:i')) }}"></label>
                    </div>
                @endif
            </div>
            @if ($isContent)
            <div class="card">
                <h2>{{ $page->type === 'post' ? 'Post card' : 'Listing' }}</h2>
                <p class="small muted">Used where this {{ $page->type }} appears in post lists, search results and the RSS feed.</p>
                <label class="field"><span>Excerpt</span><textarea name="excerpt" rows="3">{{ old('excerpt', $page->excerpt) }}</textarea></label>
                <div class="field"><span>Featured image</span>
                    <div class="media-input">
                        <img data-preview-for="featured_image" src="{{ Tokens::detokenize((string) $page->featured_image) }}" alt="" @if(!$page->featured_image) hidden @endif>
                        <input type="text" name="featured_image" id="featured_image" value="{{ old('featured_image', Tokens::detokenize((string) $page->featured_image)) }}">
                        <button type="button" class="btn btn-sm" data-media-pick data-target="#featured_image">Choose…</button>
                    </div>
                </div>
                @if ($page->type === 'post')
                    <label class="field"><span>Categories <small class="muted">— comma separated ({{ $categories->implode(', ') }})</small></span>
                        <input type="text" name="categories" value="{{ old('categories', implode(', ', $page->categories ?? [])) }}"></label>
                @endif
            </div>
            @endif
        </div>
        @if ($forms->isNotEmpty())
            <div class="card"><h2>Forms on this page</h2>
                <ul>@foreach ($forms as $f)<li><a href="{{ route('admin.forms.edit', $f) }}">{{ $f->name }}</a> — recipients, messages and validation</li>@endforeach</ul>
            </div>
        @endif
        @if ($isContent && $page->path !== '')
            <div class="card danger-zone">
                <h2>Delete</h2>
                <p class="small muted">Deleting removes this {{ $page->type }} from the website. Consider setting it to Draft instead.</p>
                <button class="btn btn-danger" type="submit" form="delete-form">Delete this {{ $page->type }}</button>
            </div>
        @endif
    </section>

    <div class="savebar"><span class="muted small" data-dirty-note hidden>You have unsaved changes.</span><button class="btn btn-primary" type="submit">Save changes</button></div>
</form>

@if ($isContent && $page->path !== '')
    <form id="delete-form" method="post" action="{{ route('admin.pages.destroy', $page) }}" data-confirm="Delete “{{ $page->title }}” permanently?">@csrf @method('DELETE')</form>
@endif
@endsection