@extends('layouts.app')
@section('title','Páginas — '.config('app.name'))
@section('content')
@php
    $publishedPages = $pages->where('is_published', true)->count();
    $draftPages = $pages->count() - $publishedPages;
    $navigationPages = $pages->where('show_in_navigation', true)->count();
@endphp
<div class="dashboard-page"><div class="container-shell dashboard-shell"><x-dashboard-sidebar/><section class="dashboard-main content-admin-page">
    <header class="admin-page-header content-admin-title">
        <div><span class="dashboard-kicker">Contenido institucional</span><h1>Páginas</h1><p>Crea y administra páginas informativas, legales o de presentación para tu academia.</p></div>
        <a class="btn btn-secondary" href="{{ route('home') }}" target="_blank" rel="noopener">Ver sitio ↗</a>
    </header>

    <section class="content-overview" aria-label="Estado de las páginas">
        <article><span>01</span><div><strong>{{ $pages->count() }} páginas</strong><small>Total registrado</small></div></article>
        <article><span>02</span><div><strong>{{ $publishedPages }} publicadas</strong><small>{{ $draftPages }} en borrador</small></div></article>
        <article><span>03</span><div><strong>{{ $navigationPages }} en navegación</strong><small>Accesibles desde el encabezado</small></div></article>
    </section>

    <section class="panel content-admin-panel">
        <div class="panel-head"><div><span class="settings-step">Nueva página</span><h2>Crear contenido público</h2></div><p>Define el contenido, la visibilidad y los datos para buscadores antes de publicarla.</p></div>
        <form class="content-admin-form" method="POST" action="{{ route('admin.pages.store') }}">@csrf
            <div class="content-editor-layout">
                <div class="content-editor-main">
                    <section class="content-form-section">
                        <div class="content-form-section-head"><div><span>Información principal</span><h3>Título y propósito</h3></div><p>El extracto ayuda a anticipar el contenido antes de abrir la página.</p></div>
                        <div class="form-grid">
                            <label><span class="form-label">Título de la página</span><input class="form-input" name="title" value="{{ old('title') }}" data-page-title placeholder="Ej. Política de privacidad" maxlength="180" required></label>
                            <label><span class="form-label">Dirección web</span><div class="slug-field"><span>/paginas/</span><input class="form-input" name="slug" value="{{ old('slug') }}" data-page-slug placeholder="politica-de-privacidad"></div><small class="form-help">Puedes personalizarla antes de crear la página.</small></label>
                        </div>
                        <label><span class="form-label">Extracto o introducción</span><textarea class="form-textarea content-excerpt" name="excerpt" maxlength="500" data-character-field placeholder="Resume en una o dos frases lo que encontrará el visitante.">{{ old('excerpt') }}</textarea><small class="character-count"><span data-character-count>0</span>/500</small></label>
                    </section>
                    <section class="content-form-section">
                        <div class="content-form-section-head"><div><span>Editor de contenido</span><h3>Cuerpo de la página</h3></div><p>Utiliza una estructura clara con títulos, párrafos y listas.</p></div>
                        <x-rich-text-editor name="content" :value="old('content')" placeholder="Comienza con una introducción y desarrolla el contenido por secciones." />
                    </section>
                </div>
                <aside class="content-editor-aside">
                    <section class="content-side-card"><header><span>Publicación</span><strong>Presentación y visibilidad</strong></header><label><span class="form-label">Tipo de página</span><select class="form-select" name="template"><option value="standard">Página informativa</option><option value="legal">Documento legal</option><option value="landing">Página de presentación</option></select></label><div class="content-switches"><label><input type="checkbox" name="is_published" value="1" @checked(old('is_published'))><span><strong>Publicar al guardar</strong><small>Visible inmediatamente.</small></span></label><label><input type="checkbox" name="show_in_navigation" value="1" @checked(old('show_in_navigation'))><span><strong>Mostrar en navegación</strong><small>Acceso desde el encabezado.</small></span></label><label><input type="checkbox" name="show_in_footer" value="1" @checked(old('show_in_footer'))><span><strong>Mostrar en footer</strong><small>Acceso al final del sitio.</small></span></label></div></section>
                    <section class="content-side-card content-seo-card"><header><span>SEO</span><strong>Vista en buscadores</strong></header><label><span class="form-label">Título SEO</span><input class="form-input" name="seo_title" value="{{ old('seo_title') }}" maxlength="180" data-character-field placeholder="Título para Google"><small class="character-count"><span data-character-count>0</span>/180</small></label><label><span class="form-label">Descripción SEO</span><textarea class="form-textarea" name="seo_description" maxlength="500" data-character-field placeholder="Descripción breve y específica.">{{ old('seo_description') }}</textarea><small class="character-count"><span data-character-count>0</span>/500</small></label><label><span class="form-label">Indexación</span><select class="form-select" name="seo_robots"><option value="index_follow">Permitir buscadores</option><option value="noindex_follow">Ocultar de buscadores</option></select></label></section>
                </aside>
            </div>
            <div class="content-form-actions"><span class="form-help">Podrás editar todos estos datos después.</span><button class="btn btn-primary">Crear página</button></div>
        </form>
    </section>

    <section class="content-records">
        <div class="content-records-head"><div><span class="dashboard-kicker">Biblioteca de páginas</span><h2>Contenido publicado y borradores</h2></div><p>{{ $pages->count() }} {{ $pages->count() === 1 ? 'página registrada' : 'páginas registradas' }}</p></div>
        @forelse($pages as $page)
            <details class="panel content-record"><summary><span class="content-record-icon">P</span><span><strong>{{ $page->title }}</strong><small>/paginas/{{ $page->slug }} · {{ match($page->template) {'legal'=>'Legal','landing'=>'Presentación',default=>'Informativa'} }}</small></span><span class="status {{ $page->is_published ? 'status-published' : 'status-review' }}">{{ $page->is_published ? 'Publicada' : 'Borrador' }}</span><span class="content-record-edit">Editar</span><i>⌄</i></summary>
                <form class="content-record-form" method="POST" action="{{ route('admin.pages.update',$page) }}">@csrf @method('PUT')
                    <div class="content-editor-layout"><div class="content-editor-main"><section class="content-form-section"><div class="form-grid"><label><span class="form-label">Título</span><input class="form-input" name="title" value="{{ $page->title }}" required></label><label><span class="form-label">Dirección web</span><div class="slug-field"><span>/paginas/</span><input class="form-input" name="slug" value="{{ $page->slug }}" required></div></label></div><label><span class="form-label">Extracto</span><textarea class="form-textarea content-excerpt" name="excerpt" maxlength="500">{{ $page->excerpt }}</textarea></label><label><span class="form-label">Contenido</span><x-rich-text-editor name="content" :value="$page->content" /></label></section></div>
                    <aside class="content-editor-aside"><section class="content-side-card"><header><span>Publicación</span><strong>Opciones de la página</strong></header><label><span class="form-label">Tipo</span><select class="form-select" name="template"><option value="standard" @selected($page->template==='standard')>Página informativa</option><option value="legal" @selected($page->template==='legal')>Documento legal</option><option value="landing" @selected($page->template==='landing')>Página de presentación</option></select></label><div class="content-switches"><label><input type="checkbox" name="is_published" value="1" @checked($page->is_published)><span><strong>Visible en el sitio</strong></span></label><label><input type="checkbox" name="show_in_navigation" value="1" @checked($page->show_in_navigation)><span><strong>En navegación</strong></span></label><label><input type="checkbox" name="show_in_footer" value="1" @checked($page->show_in_footer)><span><strong>En footer</strong></span></label></div></section><section class="content-side-card"><header><span>SEO</span><strong>Buscadores</strong></header><label><span class="form-label">Título SEO</span><input class="form-input" name="seo_title" value="{{ $page->seo_title }}"></label><label><span class="form-label">Descripción SEO</span><textarea class="form-textarea" name="seo_description">{{ $page->seo_description }}</textarea></label><label><span class="form-label">Indexación</span><select class="form-select" name="seo_robots"><option value="index_follow" @selected($page->seo_robots==='index_follow')>Permitir buscadores</option><option value="noindex_follow" @selected($page->seo_robots==='noindex_follow')>Ocultar de buscadores</option></select></label></section></aside></div>
                    <div class="content-form-actions"><a class="text-link" href="{{ route('pages.show',$page) }}" target="_blank" rel="noopener">Vista pública ↗</a><button class="btn btn-primary">Guardar cambios</button></div>
                </form>
                <form class="content-delete-form" method="POST" action="{{ route('admin.pages.destroy',$page) }}" data-confirm="¿Eliminar la página ‘{{ $page->title }}’? Dejará de estar disponible en el sitio.">@csrf @method('DELETE')<span><strong>Eliminar página</strong><small>Esta acción retira permanentemente el contenido.</small></span><button class="btn btn-danger btn-small">Eliminar</button></form>
            </details>
        @empty<div class="panel content-empty"><strong>Aún no has creado páginas.</strong><span>Comienza con información institucional, políticas o una página de contacto.</span></div>@endforelse
    </section>
</section></div></div>
@endsection