@extends('admin.layouts.app')
@section('title', isset($pagina) ? 'Editar Página' : 'Nueva Página')
@section('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.snow.css">
<style>
:root{--m:#1b5e20;--mg:#2e7d32;}
.mod-hero{background:linear-gradient(135deg,#1b2631,#1b5e20,#2e7d32);border-radius:20px;padding:22px 28px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:22px;box-shadow:0 8px 32px rgba(27,94,32,.28);}
.mod-hero h1{font-size:1.3rem;font-weight:800;color:#fff;margin:0;display:flex;align-items:center;gap:10px;}
.mod-hero p{color:rgba(255,255,255,.5);margin:0;font-size:.82rem;}
.btn-back{display:inline-flex;align-items:center;gap:7px;padding:10px 18px;background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.3);color:#fff;border-radius:12px;font-weight:700;font-size:.85rem;text-decoration:none;transition:all .2s;}
.btn-back:hover{background:rgba(255,255,255,.22);}

/* Grid layout */
.pg-grid{display:grid;grid-template-columns:1fr 300px;gap:18px;align-items:start;}
@media(max-width:800px){.pg-grid{grid-template-columns:1fr;}}

/* Cards */
.form-card{background:#fff;border-radius:18px;box-shadow:0 4px 24px rgba(0,0,0,.07);overflow:hidden;margin-bottom:18px;}
.form-card-hd{background:linear-gradient(135deg,#1b2631,#2e7d32);padding:14px 22px;display:flex;align-items:center;gap:10px;}
.form-card-hd .ic{width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;}
.form-card-hd .ic i{color:#a5d6a7;font-size:15px;}
.form-card-hd span{color:#fff;font-weight:800;font-size:.92rem;}
.form-card-body{padding:20px 22px;}
.fl{font-size:.82rem;font-weight:700;color:#475569;margin-bottom:6px;display:block;}
.fl .req{color:#ef4444;}
.fi{width:100%;border:1.5px solid #e2e8f0;border-radius:10px;padding:10px 14px;font-size:.88rem;color:#1e293b;transition:border-color .2s,box-shadow .2s;outline:none;background:#fff;}
.fi:focus{border-color:#2e7d32;box-shadow:0 0 0 3px rgba(46,125,50,.1);}
.fg{margin-bottom:16px;}
.toggle-lbl{display:flex;align-items:center;gap:10px;cursor:pointer;background:#fff;padding:10px 14px;border-radius:10px;border:1.5px solid #e2e8f0;transition:border-color .2s;width:100%;}
.toggle-lbl:hover{border-color:#2e7d32;}
.toggle-lbl input{width:18px;height:18px;cursor:pointer;accent-color:#2e7d32;}
.toggle-lbl span{font-weight:700;color:#334155;font-size:.88rem;}
.hint{font-size:.75rem;color:#94a3b8;margin-top:4px;}
.slug-box{display:flex;align-items:center;gap:4px;background:#f1f8e9;border:1.5px solid #c5e1a5;border-radius:8px;padding:8px 12px;font-size:.82rem;}
.slug-prefix{color:#94a3b8;font-weight:600;flex-shrink:0;}
.slug-val{color:#2e7d32;font-weight:800;}

/* Submit side */
.btn-save-full{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px 20px;background:linear-gradient(135deg,#1b5e20,#2e7d32);color:#fff;border:none;border-radius:12px;font-weight:800;font-size:.9rem;cursor:pointer;box-shadow:0 4px 16px rgba(27,94,32,.3);transition:all .2s;margin-bottom:8px;}
.btn-save-full:hover{transform:translateY(-2px);}
.btn-view-full{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:11px 20px;background:#f1f8e9;color:#2e7d32;border:1.5px solid #c5e1a5;border-radius:12px;font-weight:700;font-size:.88rem;text-decoration:none;transition:all .2s;margin-bottom:8px;}
.btn-view-full:hover{background:#c8e6c9;}
.btn-cancel-full{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:11px 20px;background:#f1f5f9;color:#64748b;border-radius:12px;font-weight:700;font-size:.88rem;text-decoration:none;}
.btn-cancel-full:hover{background:#e2e8f0;}

/* Quill overrides */
.ql-toolbar.ql-snow{border-radius:10px 10px 0 0;border-color:#e2e8f0!important;background:#f8faff;}
.ql-container.ql-snow{border-radius:0 0 10px 10px;border-color:#e2e8f0!important;min-height:380px;}
.ql-editor{min-height:380px;font-size:15px;line-height:1.7;color:#1e293b;}
</style>
@endsection

@section('content')
<div class="mod-hero">
    <div>
        <h1>
            <div style="width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.15);border:1.5px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;">
                <i class="bi bi-file-earmark-text-fill" style="color:#a5d6a7;font-size:18px;"></i>
            </div>
            {{ isset($pagina) ? 'Editar Página' : 'Nueva Página' }}
        </h1>
        <p>
            @if(isset($pagina))
                URL: <a href="{{ url('/p/'.$pagina->slug) }}" target="_blank" style="color:#a5d6a7;font-weight:700;">/p/{{ $pagina->slug }} <i class="bi bi-box-arrow-up-right" style="font-size:11px;"></i></a>
            @else
                El slug se genera automáticamente desde el título
            @endif
        </p>
    </div>
    <a href="{{ route('admin.paginas.index') }}" class="btn-back"><i class="bi bi-arrow-left"></i> Volver</a>
</div>

<form action="{{ isset($pagina) ? route('admin.paginas.update', $pagina) : route('admin.paginas.store') }}"
      method="POST" id="paginaForm">
    @csrf @if(isset($pagina)) @method('PUT') @endif

    <div class="pg-grid">

        {{-- ══ COLUMNA PRINCIPAL ══ --}}
        <div>
            {{-- Título --}}
            <div class="form-card">
                <div class="form-card-hd"><div class="ic"><i class="bi bi-type-h1"></i></div><span>Título de la Página</span></div>
                <div class="form-card-body">
                    <div class="fg">
                        <label class="fl">Título <span class="req">*</span></label>
                        <input type="text" id="titulo" name="titulo" class="fi"
                               value="{{ old('titulo', $pagina->titulo ?? '') }}"
                               placeholder="Ej: Quiénes somos" required>
                    </div>
                    {{-- Slug preview --}}
                    @if(!isset($pagina))
                    <div class="slug-box">
                        <span class="slug-prefix">URL pública → /p/</span>
                        <span class="slug-val" id="slugPreview">—</span>
                    </div>
                    @endif
                </div>
            </div>

            {{-- Editor --}}
            <div class="form-card">
                <div class="form-card-hd"><div class="ic"><i class="bi bi-pencil-square"></i></div><span>Contenido</span></div>
                <div class="form-card-body">
                    <div id="quillEditor">{!! old('contenido', $pagina->contenido ?? '') !!}</div>
                    <input type="hidden" name="contenido" id="contenidoInput">
                </div>
            </div>
        </div>

        {{-- ══ COLUMNA LATERAL ══ --}}
        <div>
            {{-- Publicación --}}
            <div class="form-card">
                <div class="form-card-hd"><div class="ic"><i class="bi bi-send-fill"></i></div><span>Publicación</span></div>
                <div class="form-card-body">
                    <label class="toggle-lbl" style="margin-bottom:14px;">
                        <input type="checkbox" name="activo" id="activo"
                               {{ old('activo', $pagina->activo ?? true) ? 'checked' : '' }}>
                        <i class="bi bi-toggle-on" style="color:#10b981;"></i>
                        <span>Publicada (visible)</span>
                    </label>
                    <div class="fg">
                        <label class="fl">Orden</label>
                        <input type="number" name="orden" class="fi" value="{{ old('orden', $pagina->orden ?? 0) }}" min="0">
                    </div>
                    <button type="submit" class="btn-save-full"><i class="bi bi-save-fill"></i> {{ isset($pagina) ? 'Actualizar Página' : 'Guardar Página' }}</button>
                    @if(isset($pagina))
                    <a href="{{ url('/p/'.$pagina->slug) }}" target="_blank" class="btn-view-full"><i class="bi bi-eye-fill"></i> Ver página pública</a>
                    @endif
                    <a href="{{ route('admin.paginas.index') }}" class="btn-cancel-full"><i class="bi bi-x-lg"></i> Cancelar</a>
                </div>
            </div>

            {{-- SEO --}}
            <div class="form-card">
                <div class="form-card-hd"><div class="ic"><i class="bi bi-search"></i></div><span>SEO &amp; URL</span></div>
                <div class="form-card-body">
                    @if(isset($pagina))
                    <div class="fg">
                        <label class="fl">Slug (URL)</label>
                        <div style="display:flex;align-items:center;gap:4px;font-size:.8rem;color:#94a3b8;margin-bottom:6px;"><span>/p/</span></div>
                        <input type="text" name="slug" class="fi" value="{{ old('slug', $pagina->slug) }}" placeholder="mi-pagina">
                        <div class="hint" style="color:#f59e0b;"><i class="bi bi-exclamation-triangle me-1"></i>Si cambias el slug, los enlaces existentes dejarán de funcionar.</div>
                    </div>
                    @else
                    <div class="fg">
                        <label class="fl">Slug (URL)</label>
                        <div class="slug-box"><span class="slug-prefix">/p/</span><span class="slug-val" id="slugPreview2">—</span></div>
                        <div class="hint">Se genera automáticamente desde el título</div>
                    </div>
                    @endif
                    <div class="fg">
                        <label class="fl">Meta descripción <span style="font-weight:400;color:#94a3b8;">(SEO)</span></label>
                        <textarea name="meta_descripcion" class="fi" rows="3" maxlength="300"
                                  placeholder="Descripción para motores de búsqueda (máx. 300 caracteres)">{{ old('meta_descripcion', $pagina->meta_descripcion ?? '') }}</textarea>
                        <div class="hint">Recomendado: 120–160 caracteres</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.js"></script>
<script>
(function(){
    // ── Quill ──────────────────────────────────────────
    var quill = new Quill('#quillEditor', {
        theme: 'snow',
        placeholder: 'Escribe el contenido de la página…',
        modules: {
            toolbar: [
                [{ header: [1, 2, 3, 4, false] }],
                ['bold', 'italic', 'underline', 'strike'],
                [{ color: [] }, { background: [] }],
                [{ list: 'ordered' }, { list: 'bullet' }],
                [{ align: [] }],
                ['link', 'image'],
                ['blockquote', 'code-block'],
                ['clean']
            ]
        }
    });
    document.getElementById('paginaForm').addEventListener('submit', function(){
        document.getElementById('contenidoInput').value = quill.root.innerHTML;
    });

    // ── Slug preview ───────────────────────────────────
    function slugify(str) {
        return str.toLowerCase()
            .normalize('NFD').replace(/[\u0300-\u036f]/g, '')
            .replace(/[^a-z0-9\s-]/g, '').trim()
            .replace(/[\s_]+/g, '-').replace(/-+/g, '-');
    }
    var tituloEl = document.getElementById('titulo');
    if (tituloEl) {
        tituloEl.addEventListener('input', function(){
            var s = slugify(this.value) || '—';
            var p1 = document.getElementById('slugPreview');
            var p2 = document.getElementById('slugPreview2');
            if (p1) p1.textContent = s;
            if (p2) p2.textContent = s;
        });
    }
})();
</script>
@endsection