@extends('admin.layouts.master')

@section('title', 'Manage Pages')

@section('css')
<link rel="stylesheet" href="{{asset('/admin/')}}/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="{{asset('/admin/')}}/plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
<style>
/* ============================================================
   PAGES LIST — NC Theme (matches news list style)
============================================================ */

/* ── Page Header ── */
.pl-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--line);
}
.pl-header-left h1 {
    font-size: 20px;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 4px;
    letter-spacing: -.4px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.pl-header-left h1 i { color: var(--acc); font-size: 17px; }
.pl-header-left p  { font-size: 13px; color: var(--muted); margin: 0; font-weight: 500; }
.pl-header-right { display: flex; align-items: center; gap: 10px; }

.pl-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all .18s;
    text-decoration: none;
    white-space: nowrap;
}
.pl-btn-primary {
    background: var(--acc);
    color: #fff;
    box-shadow: 0 2px 8px rgba(90,103,216,.35);
}
.pl-btn-primary:hover {
    background: var(--acc-dark);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(90,103,216,.45);
}
.pl-btn-secondary {
    background: var(--surface);
    color: var(--ink);
    border: 1.5px solid var(--line);
}
.pl-btn-secondary:hover {
    background: var(--sb-hover-bg);
    border-color: var(--acc-mid);
    color: var(--acc);
}

/* ── Stat Strip ── */
.pl-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 22px;
}
@media(max-width:768px){ .pl-stats { grid-template-columns: repeat(2,1fr); } }

.pl-stat-item {
    background: var(--panel);
    border: 1.5px solid var(--line);
    border-left: 3px solid var(--acc);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: box-shadow .2s, background .3s;
}
.pl-stat-item:hover { box-shadow: 0 4px 18px rgba(90,103,216,.12); }
.pl-stat-item.s2 { border-left-color: #10b981; }
.pl-stat-item.s3 { border-left-color: #f59e0b; }
.pl-stat-item.s4 { border-left-color: #ef4444; }

.pl-stat-icon {
    width: 38px; height: 38px;
    background: var(--acc-soft);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; color: var(--acc); flex-shrink: 0;
    border-radius: 8px;
}
.pl-stat-item.s2 .pl-stat-icon { background: rgba(16,185,129,.12); color: #10b981; }
.pl-stat-item.s3 .pl-stat-icon { background: rgba(245,158,11,.12);  color: #f59e0b; }
.pl-stat-item.s4 .pl-stat-icon { background: rgba(239,68,68,.12);   color: #ef4444; }

.pl-stat-val { font-size: 22px; font-weight: 900; color: var(--ink); line-height: 1; }
.pl-stat-lbl { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .8px; margin-top: 3px; }

/* ── Main Card ── */
.pl-card {
    background: var(--panel);
    border: 1.5px solid var(--line);
    overflow: hidden;
    transition: background .3s, border-color .3s;
    position: relative;
}

/* ── Loader Overlay ── */
.pl-loader-overlay {
    position: absolute;
    inset: 0;
    background: var(--panel);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}
.pl-loader-overlay.show { opacity: 1; pointer-events: auto; }
.pl-loader-ring {
    width: 46px; height: 46px;
    border-radius: 50%;
    border: 3px solid var(--line);
    border-top-color: var(--acc);
    animation: pl-spin .75s linear infinite;
}
@keyframes pl-spin { to { transform: rotate(360deg); } }
.pl-loader-dots { display: flex; gap: 6px; }
.pl-loader-dots span {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--acc);
    animation: pl-dot .9s ease-in-out infinite; opacity: .3;
}
.pl-loader-dots span:nth-child(2) { animation-delay: .15s; }
.pl-loader-dots span:nth-child(3) { animation-delay: .30s; }
@keyframes pl-dot {
    0%,100% { opacity: .3; transform: translateY(0); }
    50%      { opacity: 1;  transform: translateY(-5px); }
}
.pl-loader-text { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .6px; text-transform: uppercase; }

/* ── Controls Bar ── */
.pl-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1.5px solid var(--line);
    background: var(--surface);
    flex-wrap: wrap;
}
.pl-controls-left  { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pl-controls-right { display: flex; align-items: center; gap: 8px; }

.pl-select {
    height: 36px;
    padding: 0 28px 0 10px;
    border: 1.5px solid var(--line);
    background: var(--panel);
    color: var(--ink);
    font-size: 13px; font-weight: 600;
    outline: none; border-radius: 7px; cursor: pointer;
    transition: border-color .18s;
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2364748b' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
}
.pl-select:focus { border-color: var(--acc); }

.pl-search-wrap {
    position: relative; flex: 1;
    min-width: 220px; max-width: 320px;
}
.pl-search-wrap i {
    position: absolute; left: 11px; top: 50%;
    transform: translateY(-50%);
    color: var(--muted); font-size: 13px; pointer-events: none;
}
.pl-search {
    width: 100%; height: 36px;
    padding: 0 12px 0 34px;
    border: 1.5px solid var(--line);
    background: var(--panel); color: var(--ink);
    font-size: 13px; font-weight: 500;
    outline: none; border-radius: 7px;
    transition: border-color .18s;
}
.pl-search:focus { border-color: var(--acc); }
.pl-search::placeholder { color: var(--muted); }

.pl-filter-btn {
    height: 36px; padding: 0 14px;
    border: 1.5px solid var(--line);
    background: var(--panel); color: var(--muted);
    font-size: 13px; font-weight: 600;
    border-radius: 7px; cursor: pointer;
    display: flex; align-items: center; gap: 6px;
    transition: all .18s; white-space: nowrap;
}
.pl-filter-btn:hover, .pl-filter-btn.active {
    border-color: var(--acc); color: var(--acc); background: var(--acc-soft);
}
.pl-filter-dot {
    width: 7px; height: 7px;
    background: var(--acc); border-radius: 50%; display: none;
}
.pl-filter-btn.has-filters .pl-filter-dot { display: block; }

/* ── Filter Panel ── */
.pl-filter-panel {
    padding: 14px 20px;
    background: var(--surface);
    border-bottom: 1.5px solid var(--line);
    display: none;
}
.pl-filter-panel.show { display: block; }
.pl-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px; align-items: end;
}
.pl-filter-item label {
    display: block;
    font-size: 10.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .8px;
    color: var(--muted); margin-bottom: 5px;
}
.pl-filter-item select,
.pl-filter-item input[type="date"] {
    width: 100%; height: 34px; padding: 0 10px;
    border: 1.5px solid var(--line);
    background: var(--panel); color: var(--ink);
    font-size: 12.5px; font-weight: 500;
    border-radius: 6px; outline: none;
    transition: border-color .18s;
}
.pl-filter-item select:focus,
.pl-filter-item input:focus { border-color: var(--acc); }
.pl-filter-reset {
    height: 34px; padding: 0 14px;
    border: 1.5px solid var(--line);
    background: var(--panel); color: var(--muted);
    font-size: 12px; font-weight: 600;
    border-radius: 6px; cursor: pointer;
    display: flex; align-items: center; gap: 5px;
    transition: all .18s; align-self: end;
}
.pl-filter-reset:hover { border-color: #ef4444; color: #ef4444; background: rgba(239,68,68,.06); }

/* ── Table ── */
.pl-table-wrap { overflow-x: auto; }

table.pl-table {
    width: 100% !important;
    border-collapse: collapse;
    font-size: 13px;
}
table.pl-table thead th {
    background: var(--surface) !important;
    color: var(--muted) !important;
    font-size: 10.5px !important; font-weight: 800 !important;
    text-transform: uppercase !important; letter-spacing: 1px !important;
    padding: 12px 14px !important;
    border-bottom: 2px solid var(--line) !important;
    border-top: none !important;
    white-space: nowrap; cursor: pointer; user-select: none;
    transition: color .18s;
}
table.pl-table thead th:hover { color: var(--acc) !important; }
table.pl-table thead th.sorting_asc,
table.pl-table thead th.sorting_desc { color: var(--acc) !important; }
table.pl-table thead th.sorting::after      { content: ' ⇅'; opacity: .3; font-size: 10px; }
table.pl-table thead th.sorting_asc::after  { content: ' ↑'; opacity: 1; color: var(--acc); font-size: 10px; }
table.pl-table thead th.sorting_desc::after { content: ' ↓'; opacity: 1; color: var(--acc); font-size: 10px; }

table.pl-table tbody td {
    padding: 10px 14px !important;
    border-bottom: 1px solid var(--line) !important;
    color: var(--ink) !important;
    vertical-align: middle !important;
    background: var(--panel) !important;
    transition: background .15s;
}
table.pl-table tbody tr:last-child td { border-bottom: none !important; }
table.pl-table tbody tr:hover td { background: var(--sb-hover-bg) !important; }
table.pl-table tbody tr { animation: pl-row-in .25s ease both; }
@keyframes pl-row-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Title cell ── */
.pl-title-text {
    font-size: 13px; font-weight: 600; color: var(--ink);
    display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; line-height: 1.45; margin-bottom: 4px;
}
.pl-slug {
    font-size: 11px; color: var(--muted);
    font-family: 'Courier New', monospace;
    display: flex; align-items: center; gap: 4px;
}
.pl-slug i { font-size: 9px; }

/* ── Widget badges ── */
.pl-widget-list { display: flex; gap: 5px; flex-wrap: wrap; }
.pl-widget-tag {
    display: inline-flex; align-items: center;
    padding: 3px 8px; border-radius: 5px;
    font-size: 10.5px; font-weight: 600;
    background: var(--acc-soft); color: var(--acc);
    border: 1px solid var(--acc-mid);
    white-space: nowrap;
}

/* ── Status badge ── */
.pl-status {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 11px; border-radius: 20px;
    font-size: 11.5px; font-weight: 700;
    border: none; cursor: pointer;
    transition: all .2s; white-space: nowrap;
}
.pl-status.active   { background: rgba(16,185,129,.12); color: #10b981; }
.pl-status.inactive { background: rgba(239,68,68,.12);  color: #ef4444; }
.pl-status:hover    { filter: brightness(.88); transform: scale(1.04); }
.pl-status i { font-size: 11px; }

/* ── Date ── */
.pl-date { font-size: 11.5px; color: var(--muted); line-height: 1.5; white-space: nowrap; }
.pl-date strong { display: block; font-weight: 700; color: var(--ink); font-size: 12px; }

/* ── Checkbox ── */
.pl-check { width: 16px; height: 16px; accent-color: var(--acc); cursor: pointer; }

/* ── Action btn ── */
.pl-action-btn {
    width: 32px; height: 32px;
    border-radius: 7px; border: 1.5px solid var(--line);
    background: var(--panel); color: var(--muted);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 13px; transition: all .18s;
}
.pl-action-btn:hover { border-color: var(--acc-mid); background: var(--acc-soft); color: var(--acc); }
.pl-action-btn.open  { border-color: var(--acc); background: var(--acc); color: #fff; }

/* ── Action Menu ── */
.pl-action-menu {
    position: fixed; min-width: 180px;
    background: var(--panel); border: 1.5px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 10px 36px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.1);
    z-index: 99999; padding: 5px;
    opacity: 0; visibility: hidden;
    transform: translateY(-6px) scale(.97);
    transform-origin: top right;
    transition: all .2s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
}
.pl-action-menu.show { opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto; }
.pl-menu-item {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 10px; border-radius: 7px;
    color: var(--ink); font-size: 12.5px; font-weight: 500;
    text-decoration: none; cursor: pointer; border: none;
    background: transparent; width: 100%; text-align: left;
    transition: background .14s;
}
.pl-menu-item:hover { background: var(--sb-hover-bg); color: var(--acc); }
.pl-menu-item.danger { color: #ef4444; }
.pl-menu-item.danger:hover { background: rgba(239,68,68,.08); color: #ef4444; }
.pl-menu-item i { width: 16px; text-align: center; font-size: 12px; }
.pl-menu-sep { height: 1px; background: var(--line); margin: 3px 0; }

/* ── Table Footer ── */
.pl-table-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px;
    border-top: 1.5px solid var(--line);
    background: var(--surface);
    flex-wrap: wrap; gap: 10px;
}
.pl-info { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.pl-info strong { color: var(--ink); }

.pl-pagination { display: flex; align-items: center; gap: 3px; }
.pl-page-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; height: 34px; padding: 0 10px;
    border-radius: 7px; font-size: 13px; font-weight: 600;
    color: var(--ink); background: var(--panel);
    border: 1.5px solid var(--line);
    cursor: pointer; transition: all .18s; user-select: none;
}
.pl-page-btn:hover:not(.disabled):not(.active) { background: var(--sb-hover-bg); border-color: var(--acc-mid); color: var(--acc); }
.pl-page-btn.active { background: var(--acc); border-color: var(--acc); color: #fff; box-shadow: 0 2px 8px rgba(90,103,216,.35); }
.pl-page-btn.disabled { color: var(--muted); background: var(--surface); cursor: not-allowed; opacity: .5; }

/* ── Bulk Bar ── */
.pl-bulk-bar {
    position: fixed; bottom: 28px; left: 50%;
    transform: translateX(-50%) translateY(80px);
    background: var(--panel); border: 1.5px solid var(--line);
    border-radius: 50px;
    box-shadow: 0 10px 40px rgba(0,0,0,.2), 0 2px 10px rgba(0,0,0,.1);
    padding: 8px 14px;
    display: flex; align-items: center; gap: 8px;
    z-index: 9999;
    transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .3s;
    opacity: 0; pointer-events: none; white-space: nowrap;
}
.pl-bulk-bar.show { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; }
.pl-bulk-count { font-size: 13px; font-weight: 800; color: var(--ink); padding: 0 8px; }
.pl-bulk-sep { width: 1px; height: 22px; background: var(--line); }
.pl-bulk-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: 50px;
    font-size: 12.5px; font-weight: 700;
    border: none; cursor: pointer; transition: all .18s;
}
.pl-bulk-btn:hover { filter: brightness(.88); transform: scale(1.04); }
.pl-bulk-del  { background: rgba(239,68,68,.12);  color: #ef4444; }
.pl-bulk-close {
    width: 28px; height: 28px; border-radius: 50%; border: none;
    background: var(--surface); color: var(--muted);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 11px; transition: all .18s;
}
.pl-bulk-close:hover { background: rgba(239,68,68,.1); color: #ef4444; }

/* ── Empty ── */
.pl-empty { text-align: center; padding: 48px 20px; color: var(--muted); }
.pl-empty i { font-size: 36px; margin-bottom: 12px; display: block; opacity: .4; }
.pl-empty p { font-size: 14px; font-weight: 600; margin: 0; }

[data-theme="dim"] .pl-filter-item input[type="date"],
[data-theme="dark"] .pl-filter-item input[type="date"] { color-scheme: dark; }
</style>
@endsection


@section('content')

{{-- ── Page Header ── --}}
<div class="pl-header">
    <div class="pl-header-left">
        <h1><i class="fas fa-file-alt"></i> Pages Management</h1>
        <p>Manage, filter and publish all website pages</p>
    </div>
    <div class="pl-header-right">
        <a href="{{ route('page.create') }}" class="pl-btn pl-btn-primary">
            <i class="fas fa-plus"></i> Add New Page
        </a>
    </div>
</div>

{{-- ── Stats Strip ── --}}
<div class="pl-stats">
    <div class="pl-stat-item">
        <div class="pl-stat-icon"><i class="fas fa-file-alt"></i></div>
        <div>
            <div class="pl-stat-val" id="statTotal">—</div>
            <div class="pl-stat-lbl">Total Pages</div>
        </div>
    </div>
    <div class="pl-stat-item s2">
        <div class="pl-stat-icon"><i class="fas fa-check-circle"></i></div>
        <div>
            <div class="pl-stat-val" id="statPublished">—</div>
            <div class="pl-stat-lbl">Published</div>
        </div>
    </div>
    <div class="pl-stat-item s3">
        <div class="pl-stat-icon"><i class="fas fa-pencil-alt"></i></div>
        <div>
            <div class="pl-stat-val" id="statDraft">—</div>
            <div class="pl-stat-lbl">Draft</div>
        </div>
    </div>
    <div class="pl-stat-item s4">
        <div class="pl-stat-icon"><i class="fas fa-archive"></i></div>
        <div>
            <div class="pl-stat-val" id="statArchived">—</div>
            <div class="pl-stat-lbl">Archived</div>
        </div>
    </div>
</div>

{{-- ── Main Card ── --}}
<div class="pl-card">

    {{-- Loader --}}
    <div class="pl-loader-overlay show" id="plLoader">
        <div class="pl-loader-ring"></div>
        <div class="pl-loader-dots">
            <span></span><span></span><span></span>
        </div>
        <div class="pl-loader-text">Loading...</div>
    </div>

    {{-- Controls --}}
    <div class="pl-controls">
        <div class="pl-controls-left">
            <div style="display:flex;align-items:center;gap:7px;">
                <span style="font-size:12.5px;font-weight:600;color:var(--muted);">Show</span>
                <select id="perPage" class="pl-select">
                    <option value="10">10</option>
                    <option value="20">20</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                    <option value="-1">All</option>
                </select>
                <span style="font-size:12.5px;font-weight:600;color:var(--muted);">entries</span>
            </div>
            <div class="pl-search-wrap">
                <i class="fas fa-search"></i>
                <input type="text" id="plSearch" class="pl-search" placeholder="Search by title...">
            </div>
        </div>
        <div class="pl-controls-right">
            <button class="pl-filter-btn" id="plFilterToggle">
                <i class="fas fa-sliders-h"></i>
                Filters
                <span class="pl-filter-dot"></span>
            </button>
            <button class="pl-btn pl-btn-secondary" id="plRefreshBtn" title="Refresh">
                <i class="fas fa-sync-alt"></i>
            </button>
        </div>
    </div>

    {{-- Filter Panel --}}
    <div class="pl-filter-panel" id="plFilterPanel">
        <div class="pl-filter-grid">
            <div class="pl-filter-item">
                <label>Status</label>
                <select id="filter_status">
                    <option value="">All Statuses</option>
                    <option value="published">Published</option>
                    <option value="draft">Draft</option>
                    <option value="archived">Archived</option>
                </select>
            </div>
            <div class="pl-filter-item">
                <label>From Date</label>
                <input type="date" id="filter_from">
            </div>
            <div class="pl-filter-item">
                <label>To Date</label>
                <input type="date" id="filter_to">
            </div>
            <button class="pl-filter-reset" id="plFilterReset">
                <i class="fas fa-times"></i> Reset
            </button>
        </div>
    </div>

    {{-- Table --}}
    <div class="pl-table-wrap">
        <table class="pl-table" id="pagesTable">
            <thead>
                <tr>
                    <th style="width:36px;"><input type="checkbox" id="plSelectAll" class="pl-check"></th>
                    <th style="width:60px;">ID</th>
                    <th>Page Title</th>
                    <th style="width:120px;">Status</th>
                    <th>Widgets</th>
                    <th style="width:120px;">Created</th>
                    <th style="width:120px;">Updated</th>
                    <th style="width:46px;text-align:center;">Act</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>

    {{-- Footer --}}
    <div class="pl-table-footer">
        <div class="pl-info" id="plInfoText">Loading...</div>
        <div class="pl-pagination" id="plPagination"></div>
    </div>

</div>{{-- /.pl-card --}}


{{-- ── Bulk Bar ── --}}
<div class="pl-bulk-bar" id="plBulkBar">
    <span class="pl-bulk-count"><span id="plBulkCount">0</span> selected</span>
    <div class="pl-bulk-sep"></div>
    <button class="pl-bulk-btn pl-bulk-del" id="plBulkDelete"><i class="fas fa-trash"></i> Delete</button>
    <div class="pl-bulk-sep"></div>
    <button class="pl-bulk-close" id="plBulkClose"><i class="fas fa-times"></i></button>
</div>


{{-- ── Action Menu ── --}}
<div class="pl-action-menu" id="plActionMenu">
    <a class="pl-menu-item" id="amView" href="#" target="_blank">
        <i class="fas fa-eye" style="color:#10b981"></i> View Page
    </a>
    <a class="pl-menu-item" id="amEdit" href="#">
        <i class="fas fa-edit" style="color:#f59e0b"></i> Edit
    </a>
    <button class="pl-menu-item" id="amCopy">
        <i class="fas fa-clipboard" style="color:var(--acc)"></i> Copy Link
    </button>
    <div class="pl-menu-sep"></div>
    <button class="pl-menu-item" id="amToggle">
        <i class="fas fa-toggle-on" style="color:#f59e0b"></i> Toggle Status
    </button>
    <div class="pl-menu-sep"></div>
    <button class="pl-menu-item danger" id="amDelete">
        <i class="fas fa-trash"></i> Delete
    </button>
</div>

@endsection


@section('script')
<script src="{{asset('/admin/')}}/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="{{asset('/admin/')}}/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
<script src="{{asset('/admin/')}}/plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
<script src="{{asset('/admin/')}}/plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>

<script>
$(function () {

    /* ════════════════════════════
       DataTable Init
    ════════════════════════════ */
    var table = $('#pagesTable').DataTable({
        processing  : false,
        serverSide  : true,
        responsive  : true,
        lengthChange: false,
        searching   : false,
        autoWidth   : false,
        pageLength  : 10,
        ajax: {
            url : '{{ route("page.index") }}',
            type: 'GET',
            data: function (d) {
                d.search_title = $('#plSearch').val();
                d.status       = $('#filter_status').val();
                d.from_date    = $('#filter_from').val();
                d.to_date      = $('#filter_to').val();
                d.perPage      = $('#perPage').val();
            },
            dataSrc: function (json) {
                if (json.stats) {
                    $('#statTotal').text(json.stats.total     ?? '—');
                    $('#statPublished').text(json.stats.published ?? '—');
                    $('#statDraft').text(json.stats.draft     ?? '—');
                    $('#statArchived').text(json.stats.archived  ?? '—');
                }
                return json.data;
            }
        },
        columns: [
            { data: 'checkbox',    orderable: false, searchable: false },
            { data: 'id' },
            { data: 'title' },
            { data: 'status',      orderable: false, searchable: false },
            { data: 'widgets',     orderable: false, searchable: false },
            { data: 'created_at' },
            { data: 'updated_at' },
            { data: 'action',      orderable: false, searchable: false }
        ],
        order : [[5, 'desc']],
        dom   : 't',
        language: {
            emptyTable : '<div class="pl-empty"><i class="fas fa-inbox"></i><p>No pages found</p></div>',
            zeroRecords: '<div class="pl-empty"><i class="fas fa-search"></i><p>No matching records</p></div>',
        }
    });

    /* ════════════════════════════
       Loader
    ════════════════════════════ */
    $('#pagesTable').on('preXhr.dt', function () {
        $('#plLoader').addClass('show');
    });

    $('#pagesTable').on('xhr.dt', function (e, settings, json) {
        $('#plLoader').removeClass('show');
        if (!json) return;

        var start   = parseInt(settings._iDisplayStart) || 0;
        var pageLen = parseInt(settings._iDisplayLength) || 10;
        var total   = parseInt(json.recordsFiltered) || 0;
        var from    = total === 0 ? 0 : start + 1;
        var to      = Math.min(start + pageLen, total);
        var pages   = pageLen > 0 ? Math.ceil(total / pageLen) : 1;
        var curPage = pageLen > 0 ? Math.floor(start / pageLen) : 0;

        $('#plInfoText').html(
            'Showing <strong>' + from + '–' + to + '</strong> of <strong>' + total + '</strong> entries'
        );

        var $pg = $('#plPagination').empty();
        if (pages <= 1) return;

        $('<button class="pl-page-btn' + (curPage === 0 ? ' disabled' : '') + '">')
            .html('<i class="fas fa-angle-left"></i>')
            .on('click', function () { if (curPage > 0) table.page('previous').draw('page'); })
            .appendTo($pg);

        $.each(buildRange(curPage, pages), function (i, p) {
            if (p === '...') {
                $('<span style="padding:0 4px;color:var(--muted);line-height:34px;">…</span>').appendTo($pg);
            } else {
                $('<button class="pl-page-btn' + (p === curPage ? ' active' : '') + '">')
                    .text(p + 1)
                    .on('click', function () { table.page(p).draw('page'); })
                    .appendTo($pg);
            }
        });

        $('<button class="pl-page-btn' + (curPage >= pages - 1 ? ' disabled' : '') + '">')
            .html('<i class="fas fa-angle-right"></i>')
            .on('click', function () { if (curPage < pages - 1) table.page('next').draw('page'); })
            .appendTo($pg);
    });

    function buildRange(cur, total) {
        if (total <= 7) { var r = []; for (var i = 0; i < total; i++) r.push(i); return r; }
        if (cur <= 3)         return [0, 1, 2, 3, 4, '...', total - 1];
        if (cur >= total - 4) return [0, '...', total-5, total-4, total-3, total-2, total-1];
        return [0, '...', cur - 1, cur, cur + 1, '...', total - 1];
    }

    /* ════════════════════════════
       Filters
    ════════════════════════════ */
    var filterTimer;
    $('#plSearch').on('input', function () {
        clearTimeout(filterTimer);
        filterTimer = setTimeout(function () { table.ajax.reload(); }, 350);
    });
    $('#filter_status,#filter_from,#filter_to').on('change', function () {
        table.ajax.reload(); updateFilterDot();
    });
    $('#perPage').on('change', function () {
        var v = parseInt($(this).val());
        table.page.len(v === -1 ? 1e4 : v).draw();
    });
    $('#plFilterToggle').on('click', function () {
        $(this).toggleClass('active');
        $('#plFilterPanel').toggleClass('show');
    });
    $('#plFilterReset').on('click', function () {
        $('#filter_status,#filter_from,#filter_to').val('');
        $('#plSearch').val(''); $('#perPage').val('10');
        updateFilterDot(); table.ajax.reload();
    });
    $('#plRefreshBtn').on('click', function () {
        $(this).find('i').addClass('fa-spin');
        table.ajax.reload(function () { $('#plRefreshBtn i').removeClass('fa-spin'); });
    });
    function updateFilterDot() {
        var has = !!($('#filter_status').val() || $('#filter_from').val() || $('#filter_to').val());
        $('#plFilterToggle').toggleClass('has-filters', has);
    }

    /* ════════════════════════════
       Action Menu
    ════════════════════════════ */
    var $menu = $('#plActionMenu'), menuOpen = false, currentRow = null;

    $(document).on('click', '.pl-action-btn', function (e) {
        e.stopPropagation();
        var $btn = $(this), $row = $btn.closest('tr');
        if (menuOpen && currentRow && currentRow.is($row)) { closeMenu(); return; }

        $('#amView').attr('href', $btn.data('view') || '#');
        $('#amEdit').attr('href', $btn.data('edit') || '#');
        $('#amDelete,#amToggle,#amCopy').data('id', $btn.data('id')).data('link', $btn.data('link'));

        $menu.appendTo('body');
        var rect = this.getBoundingClientRect();
        var top  = rect.bottom + window.scrollY + 4;
        var left = rect.right  + window.scrollX - 180;
        if (left < 8) left = 8;

        $menu.css({ top: top + 'px', left: left + 'px' }).addClass('show');
        $btn.addClass('open');
        currentRow = $row; menuOpen = true;
    });

    function closeMenu() {
        $menu.removeClass('show');
        $('.pl-action-btn.open').removeClass('open');
        menuOpen = false; currentRow = null;
    }
    $(document).on('click', function (e) { if (!$(e.target).closest('#plActionMenu').length) closeMenu(); });
    $(document).on('scroll resize', closeMenu);

    /* ════════════════════════════
       Status Toggle
    ════════════════════════════ */
    $(document).on('click', '.pl-status', function () {
        var id = $(this).data('id');
        if (!confirm('Change page status?')) return;
        $.get('{{ route("page.index") }}', { toggle_status: true, page_id: id }, function (r) {
            table.ajax.reload(null, false);
            if (typeof toastr !== 'undefined') toastr.success(r.success);
        });
    });

    $('#amToggle').on('click', function () {
        closeMenu();
        var id = $(this).data('id');
        if (!confirm('Change page status?')) return;
        $.get('{{ route("page.index") }}', { toggle_status: true, page_id: id }, function (r) {
            table.ajax.reload(null, false);
            if (typeof toastr !== 'undefined') toastr.success(r.success);
        });
    });

    /* ════════════════════════════
       Copy Link
    ════════════════════════════ */
    $('#amCopy').on('click', function () {
        closeMenu();
        var link = $(this).data('link');
        if (!link) return;
        navigator.clipboard
            ? navigator.clipboard.writeText(link)
            : (function () { var i = $('<input>').val(link).appendTo('body').select(); document.execCommand('copy'); i.remove(); })();
        if (typeof toastr !== 'undefined') toastr.success('Link copied!');
    });

    /* ════════════════════════════
       Single Delete
    ════════════════════════════ */
    $('#amDelete').on('click', function () {
        closeMenu();
        var id = $(this).data('id');
        if (!confirm('Delete this page?')) return;
        $.ajax({
            url: '{{ route("page.index") }}',
            type: 'GET',
            data: { delete_id: id },
            success: function (r) {
                table.ajax.reload(null, false);
                if (typeof toastr !== 'undefined') toastr.success(r.success);
            },
            error: function () {
                if (typeof toastr !== 'undefined') toastr.error('Something went wrong!');
            }
        });
    });

    /* ════════════════════════════
       Bulk Actions
    ════════════════════════════ */
    $('#plSelectAll').on('change', function () {
        $('#pagesTable tbody .pl-check').prop('checked', this.checked);
        toggleBulkBar();
    });
    $(document).on('change', '.pl-check', function () {
        if (!this.checked) $('#plSelectAll').prop('checked', false);
        toggleBulkBar();
    });
    function getSelected() {
        return $('.pl-check:checked').map(function () { return $(this).val(); }).get();
    }
    function toggleBulkBar() {
        var n = getSelected().length;
        $('#plBulkCount').text(n);
        n > 0 ? $('#plBulkBar').addClass('show') : $('#plBulkBar').removeClass('show');
    }
    $('#plBulkClose').on('click', function () {
        $('.pl-check, #plSelectAll').prop('checked', false);
        toggleBulkBar();
    });
    $('#plBulkDelete').on('click', function () {
        var ids = getSelected();
        if (!ids.length || !confirm('Delete ' + ids.length + ' page(s)?')) return;
        $.ajax({
            url: '{{ route("page.index") }}',
            type: 'GET',
            data: { selected_ids: ids },
            success: function (r) {
                table.ajax.reload(null, false);
                if (typeof toastr !== 'undefined') toastr.success(r.success);
                $('#plSelectAll').prop('checked', false);
                toggleBulkBar();
            },
            error: function () {
                if (typeof toastr !== 'undefined') toastr.error('Something went wrong!');
            }
        });
    });

});
</script>
@endsection