@extends('admin.layouts.app')
@section('title','Páginas Estáticas')
@section('styles')
<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;}
.hero-pill{background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.22);border-radius:50px;padding:7px 18px;color:#fff;font-weight:800;font-size:.9rem;}
.mod-card{background:#fff;border-radius:18px;box-shadow:0 2px 16px rgba(0,0,0,.06);overflow:hidden;}
.mod-card-hd{background:linear-gradient(135deg,#1b2631,#2e7d32);padding:13px 22px;display:flex;align-items:center;gap:10px;}
.mod-card-hd .hd-ic{width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;}
.mod-card-hd .hd-ic i{color:#a5d6a7;font-size:15px;}
.mod-card-hd span{color:#fff;font-weight:800;font-size:.92rem;}
.mod-card-hd small{color:rgba(255,255,255,.5);font-size:.75rem;font-weight:600;margin-left:auto;}
.pt{width:100%;border-collapse:collapse;font-size:13.5px;}
.pt thead th{background:#f1f8e9;color:#64748b;font-size:11px;font-weight:800;padding:10px 16px;text-transform:uppercase;letter-spacing:.5px;border-bottom:2px solid #c5e1a5;white-space:nowrap;}
.pt tbody tr{border-bottom:1px solid #f8fff5;transition:background .15s;}
.pt tbody tr:hover{background:#f1f8e9;}
.pt td{padding:11px 16px;vertical-align:middle;}
.ab{padding:4px 10px;border-radius:50px;font-size:11px;font-weight:800;display:inline-flex;align-items:center;gap:4px;}
.ab-ok{background:#dcfce7;color:#15803d;}
.ab-no{background:#f8fafc;color:#64748b;border:1px solid #e2e8f0;}
.act-btn{width:34px;height:34px;border-radius:9px;border:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:14px;transition:all .2s;text-decoration:none;}
.act-view{background:#f1f8e9;color:#2e7d32;}
.act-view:hover{background:#c8e6c9;}
.act-ed{background:#fffbeb;color:#b45309;}
.act-ed:hover{background:#fde68a;}
.act-del{background:#fef2f2;color:#dc2626;}
.act-del:hover{background:#fee2e2;}
.slug-chip{display:inline-flex;align-items:center;gap:5px;background:#f1f8e9;border:1px solid #c5e1a5;border-radius:8px;padding:3px 10px;font-size:.78rem;color:#2e7d32;font-weight:700;text-decoration:none;transition:all .15s;}
.slug-chip:hover{background:#c8e6c9;}
.btn-new{display:inline-flex;align-items:center;gap:8px;padding:11px 22px;background:linear-gradient(135deg,#a5d6a7,#66bb6a);color:#1b2631;border-radius:14px;font-weight:800;font-size:.88rem;text-decoration:none;box-shadow:0 4px 16px rgba(102,187,106,.3);transition:all .2s;}
.btn-new:hover{transform:translateY(-2px);}
</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>
            Páginas Estáticas
        </h1>
        <p>Crea páginas con contenido personalizado · URL: <code style="background:rgba(255,255,255,.15);padding:1px 6px;border-radius:4px;">/p/{slug}</code></p>
    </div>
    <div style="display:flex;gap:12px;align-items:center;">
        <div class="hero-pill">{{ $paginas->count() }} páginas</div>
        <a href="{{ route('admin.paginas.create') }}" class="btn-new"><i class="bi bi-plus-lg"></i> Nueva Página</a>
    </div>
</div>

<div class="mod-card">
    <div class="mod-card-hd">
        <div class="hd-ic"><i class="bi bi-file-earmark-text-fill"></i></div>
        <span>Todas las Páginas</span>
        <small>{{ $paginas->count() }} registros</small>
    </div>
    <div style="overflow-x:auto;">
        <table class="pt">
            <thead>
                <tr><th>#</th><th>Título</th><th>Slug / URL</th><th>Orden</th><th>Estado</th><th>Actualizado</th><th style="text-align:center;">Acciones</th></tr>
            </thead>
            <tbody>
                @forelse($paginas as $p)
                <tr>
                    <td><span style="font-size:11px;color:#94a3b8;font-weight:700;">{{ $p->id }}</span></td>
                    <td>
                        <strong style="color:#1e293b;">{{ $p->titulo }}</strong>
                        @if($p->meta_descripcion)
                        <div style="font-size:.75rem;color:#94a3b8;margin-top:2px;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{{ $p->meta_descripcion }}</div>
                        @endif
                    </td>
                    <td>
                        <a href="{{ url('/p/'.$p->slug) }}" target="_blank" class="slug-chip">
                            <i class="bi bi-box-arrow-up-right" style="font-size:10px;"></i>/p/{{ $p->slug }}
                        </a>
                    </td>
                    <td><span style="font-weight:700;color:#2e7d32;background:#f1f8e9;padding:3px 10px;border-radius:50px;font-size:.82rem;">{{ $p->orden }}</span></td>
                    <td>
                        <span class="ab {{ $p->activo ? 'ab-ok' : 'ab-no' }}">
                            <i class="bi {{ $p->activo ? 'bi-check-circle-fill' : 'bi-circle' }}"></i>
                            {{ $p->activo ? 'Publicada' : 'Borrador' }}
                        </span>
                    </td>
                    <td style="font-size:.78rem;color:#94a3b8;white-space:nowrap;">
                        <i class="bi bi-clock me-1"></i>{{ $p->updated_at->diffForHumans() }}
                    </td>
                    <td>
                        <div style="display:flex;gap:6px;justify-content:center;">
                            <a href="{{ url('/p/'.$p->slug) }}" target="_blank" class="act-btn act-view" title="Ver página">
                                <i class="bi bi-eye-fill"></i>
                            </a>
                            <a href="{{ route('admin.paginas.edit', $p) }}" class="act-btn act-ed" title="Editar">
                                <i class="bi bi-pencil-fill"></i>
                            </a>
                            <form action="{{ route('admin.paginas.destroy', $p) }}" method="POST" class="form-delete" data-item-name="{{ $p->titulo }}">
                                @csrf @method('DELETE')
                                <button type="submit" class="act-btn act-del" title="Eliminar"><i class="bi bi-trash-fill"></i></button>
                            </form>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="7" style="padding:64px;text-align:center;">
                        <i class="bi bi-file-earmark-x" style="font-size:52px;color:#c8e6c9;display:block;margin-bottom:12px;"></i>
                        <strong style="color:#334155;display:block;margin-bottom:6px;">No hay páginas creadas</strong>
                        <a href="{{ route('admin.paginas.create') }}" class="btn-new" style="display:inline-flex;margin:0 auto;">Crear primera</a>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection