@extends('admin.layouts.master')
@section('title', 'Facebook Post Manager')

@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>
/* ═══════════════════════════════════════════════════════
   FACEBOOK POST MANAGER
═══════════════════════════════════════════════════════ */
.vm-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; padding-bottom:16px; border-bottom:2px solid var(--line); }
.vm-header-brand { display:flex; align-items:center; gap:12px; }
.vm-fb-logo { width:42px; height:42px; background:#1877f2; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.vm-fb-logo i { color:#fff; font-size:22px; }
.vm-header-title { font-size:18px; font-weight:900; color:var(--ink); margin:0; letter-spacing:-.4px; }
.vm-header-sub { font-size:12px; color:var(--muted); margin:2px 0 0; }
.vm-header-actions { display:flex; gap:8px; align-items:center; }
.vm-btn { display:inline-flex; align-items:center; gap:7px; padding:9px 18px; font-size:12.5px; font-weight:700; border:none; cursor:pointer; transition:all .15s; text-decoration:none; white-space:nowrap; border-radius:4px; text-transform:uppercase; letter-spacing:.4px; }
.vm-btn-primary   { background:#1877f2; color:#fff; }
.vm-btn-primary:hover  { background:#1565d8; color:#fff; transform:translateY(-1px); }
.vm-btn-secondary { background:var(--surface); color:var(--ink); border:1.5px solid var(--line); }
.vm-btn-secondary:hover { border-color:#1877f2; color:#1877f2; }
.vm-btn-fb  { background:rgba(24,119,242,.1); color:#1877f2; border:1.5px solid rgba(24,119,242,.3); }
.vm-btn-fb:hover  { background:rgba(24,119,242,.2); }
.vm-btn-green { background:rgba(16,185,129,.1); color:#10b981; border:1.5px solid rgba(16,185,129,.3); }
.vm-btn-green:hover { background:rgba(16,185,129,.2); }

.nl-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; }
.nl-status.active   { background:rgba(16,185,129,.12); color:#10b981; }
.nl-status.inactive { background:rgba(239,68,68,.12);  color:#ef4444; }
.nl-status:hover { filter:brightness(.88); transform:scale(1.04); }

/* Stats */
.vm-stats-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:10px; margin-bottom:20px; }
@media(max-width:1200px){ .vm-stats-grid{grid-template-columns:repeat(4,1fr);} }
@media(max-width:768px){ .vm-stats-grid{grid-template-columns:repeat(2,1fr);} }
.vm-stat { background:var(--panel); border:1.5px solid var(--line); border-top:3px solid transparent; padding:13px 14px; transition:transform .15s,box-shadow .15s; }
.vm-stat:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.1); }
.vm-stat.c-blue   { border-top-color:#1877f2; }
.vm-stat.c-green  { border-top-color:#10b981; }
.vm-stat.c-orange { border-top-color:#f59e0b; }
.vm-stat.c-red    { border-top-color:#ef4444; }
.vm-stat.c-purple { border-top-color:#8b5cf6; }
.vm-stat.c-teal   { border-top-color:#14b8a6; }
.vm-stat-icon { width:32px; height:32px; display:flex; align-items:center; justify-content:center; font-size:13px; margin-bottom:8px; }
.vm-stat.c-blue   .vm-stat-icon { background:rgba(24,119,242,.1);  color:#1877f2; }
.vm-stat.c-green  .vm-stat-icon { background:rgba(16,185,129,.1);  color:#10b981; }
.vm-stat.c-orange .vm-stat-icon { background:rgba(245,158,11,.1);  color:#f59e0b; }
.vm-stat.c-red    .vm-stat-icon { background:rgba(239,68,68,.1);   color:#ef4444; }
.vm-stat.c-purple .vm-stat-icon { background:rgba(139,92,246,.1);  color:#8b5cf6; }
.vm-stat.c-teal   .vm-stat-icon { background:rgba(20,184,166,.1);  color:#14b8a6; }
.vm-stat-val { font-size:20px; font-weight:900; color:var(--ink); line-height:1; margin-bottom:3px; }
.vm-stat-lbl { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); }

/* Layout */
.vm-layout { display:grid; grid-template-columns:210px 1fr; gap:14px; align-items:start; }
@media(max-width:900px){ .vm-layout{grid-template-columns:1fr;} }

/* Sidebar */
.vm-sidebar { background:var(--panel); border:1.5px solid var(--line); position:sticky; top:68px; overflow:hidden; }
.vm-sb-sec { padding:11px 13px; border-bottom:1px solid var(--line); }
.vm-sb-sec:last-child { border-bottom:none; }
.vm-sb-label { font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:1.3px; color:var(--muted); margin-bottom:7px; display:flex; align-items:center; gap:5px; }
.vm-sb-label i { color:#1877f2; font-size:9px; }
.vm-sb-search { position:relative; }
.vm-sb-search i { position:absolute; left:9px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:11px; pointer-events:none; }
.vm-sb-search input { width:100%; height:34px; padding:0 10px 0 28px; border:1.5px solid var(--line); background:var(--surface); color:var(--ink); font-size:12.5px; border-radius:0; outline:none; }
.vm-sb-search input:focus { border-color:#1877f2; }
.vm-tab { display:flex; align-items:center; gap:8px; padding:7px 9px; color:var(--ink); font-size:12.5px; font-weight:500; cursor:pointer; border:none; background:transparent; width:100%; text-align:left; transition:all .14s; border-left:3px solid transparent; }
.vm-tab:hover { background:var(--sb-hover-bg); color:#1877f2; border-left-color:#1877f2; }
.vm-tab.active { background:rgba(24,119,242,.08); color:#1877f2; font-weight:700; border-left-color:#1877f2; }
.vm-tab-ico { width:26px; height:26px; display:flex; align-items:center; justify-content:center; font-size:11px; flex-shrink:0; background:var(--surface); color:var(--muted); }
.vm-tab.active .vm-tab-ico { background:#1877f2; color:#fff; }
.vm-tab-cnt { margin-left:auto; font-size:10.5px; font-weight:700; background:var(--surface); padding:1px 7px; color:var(--muted); border:1px solid var(--line); min-width:24px; text-align:center; }
.vm-tab.active .vm-tab-cnt { background:#1877f2; color:#fff; border-color:#1877f2; }
.vm-sb-filter { margin-bottom:7px; }
.vm-sb-filter label { display:block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); margin-bottom:3px; }
.vm-sb-filter select,.vm-sb-filter input[type="date"],.vm-sb-filter input[type="month"] { width:100%; height:32px; padding:0 8px; border:1.5px solid var(--line); background:var(--surface); color:var(--ink); font-size:12px; border-radius:0; outline:none; appearance:none; }
.vm-sb-filter select:focus,.vm-sb-filter input:focus { border-color:#1877f2; }
.vm-sb-reset { width:100%; padding:7px; border:1.5px dashed var(--line); background:transparent; color:var(--muted); font-size:11.5px; font-weight:600; border-radius:0; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:5px; transition:all .15s; margin-top:6px; }
.vm-sb-reset:hover { border-color:#ef4444; color:#ef4444; background:rgba(239,68,68,.06); }

/* Card / Table */
.vm-card { background:var(--panel); border:1.5px solid var(--line); overflow:hidden; }
.vm-card-bar { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1.5px solid var(--line); background:var(--surface); flex-wrap:wrap; gap:8px; }
.vm-card-bar-left,.vm-card-bar-right { display:flex; align-items:center; gap:7px; }
.vm-select { height:32px; padding:0 24px 0 9px; border:1.5px solid var(--line); background:var(--panel); color:var(--ink); font-size:12.5px; font-weight:600; outline:none; border-radius:0; cursor:pointer; 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 8px center; }
.vm-icon-btn { width:32px; height:32px; border:1.5px solid var(--line); background:var(--panel); color:var(--muted); border-radius:0; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:12px; transition:all .15s; }
.vm-icon-btn:hover { border-color:#1877f2; background:rgba(24,119,242,.08); color:#1877f2; }
.vm-table-wrap { overflow-x:auto; }
table.vm-table { width:100% !important; border-collapse:collapse; font-size:13px; }
table.vm-table thead th { background:var(--surface) !important; color:var(--muted) !important; font-size:10px !important; font-weight:800 !important; text-transform:uppercase !important; letter-spacing:1px !important; padding:10px 12px !important; border-bottom:2px solid var(--line) !important; border-top:none !important; white-space:nowrap; cursor:pointer; user-select:none; }
table.vm-table thead th:hover { color:#1877f2 !important; }
table.vm-table thead th.sorting_asc,table.vm-table thead th.sorting_desc { color:#1877f2 !important; }
table.vm-table thead th.sorting::after { content:' ⇅'; opacity:.25; font-size:10px; }
table.vm-table thead th.sorting_asc::after  { content:' ↑'; color:#1877f2; }
table.vm-table thead th.sorting_desc::after { content:' ↓'; color:#1877f2; }
table.vm-table tbody td { padding:9px 12px !important; border-bottom:1px solid var(--line) !important; color:var(--ink) !important; vertical-align:middle !important; background:var(--panel) !important; transition:background .12s; }
table.vm-table tbody tr:last-child td { border-bottom:none !important; }
table.vm-table tbody tr:hover td { background:var(--sb-hover-bg) !important; }
table.vm-table tbody tr { animation:vmRowIn .18s ease both; }
@keyframes vmRowIn { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }

/* Thumbnail */
.fm-thumb-wrap { position:relative; display:inline-block; width:100px; cursor:pointer; }
.fm-thumb { width:100px; height:60px; object-fit:cover; display:block; transition:filter .2s; }
table.vm-table tbody tr:hover .fm-thumb { filter:brightness(.85); }
.fm-thumb-play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .2s; }
.fm-thumb-play-btn { width:32px; height:32px; background:rgba(0,0,0,.8); display:flex; align-items:center; justify-content:center; color:#fff; font-size:11px; }
table.vm-table tbody tr:hover .fm-thumb-play { opacity:1; }
.fm-thumb-icon { width:100px; height:60px; background:rgba(24,119,242,.08); display:flex; align-items:center; justify-content:center; font-size:22px; color:#1877f2; opacity:.5; }

/* Message */
.fm-msg-text { font-family:var(--font-bengali) !important; font-size:12.5px; font-weight:600; color:var(--ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; max-width:360px; line-height:1.45; margin-bottom:5px; cursor:pointer; transition:color .14s; }
.fm-msg-text:hover { color:#1877f2; }
.fm-meta-row { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.fm-fb-link { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; background:rgba(24,119,242,.1); color:#1877f2; font-size:10.5px; font-weight:700; text-decoration:none; transition:all .15s; }
.fm-fb-link:hover { background:rgba(24,119,242,.2); }

/* Page cell */
.nl-channel-cell { display:flex; align-items:center; gap:7px; }
.nl-ch-av { width:26px; height:26px; background:#1877f2; color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; flex-shrink:0; }

/* Type badge */
.nl-type-badge { display:inline-flex; align-items:center; gap:5px; padding:4px 9px; font-size:10.5px; font-weight:700; white-space:nowrap; }
.type-photo  { background:rgba(59,130,246,.1);  color:#3b82f6; }
.type-video  { background:rgba(239,68,68,.1);   color:#ef4444; }
.type-reel   { background:rgba(139,92,246,.1);  color:#8b5cf6; }
.type-link   { background:rgba(245,158,11,.1);  color:#f59e0b; }
.type-status { background:rgba(16,185,129,.1);  color:#10b981; }

/* Engagement */
.fm-engagement { display:flex; flex-direction:column; gap:3px; }
.fm-engagement span { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; color:var(--ink); white-space:nowrap; }
.fm-engagement span i { font-size:10px; width:12px; }
.fm-engagement span:nth-child(1) i { color:#1877f2; }
.fm-engagement span:nth-child(2) i { color:#10b981; }
.fm-engagement span:nth-child(3) i { color:#f59e0b; }
.fm-engagement span:nth-child(4) i { color:#ef4444; }

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

.vm-act-btn { width:28px; height:28px; border:1.5px solid var(--line); background:var(--panel); color:var(--muted); border-radius:0; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:12px; transition:all .15s; }
.vm-act-btn:hover,.vm-act-btn.open { border-color:#1877f2; background:rgba(24,119,242,.08); color:#1877f2; }

/* Footer / Pagination */
.vm-table-footer { display:flex; align-items:center; justify-content:space-between; padding:11px 14px; border-top:1.5px solid var(--line); background:var(--surface); flex-wrap:wrap; gap:8px; }
.vm-info { font-size:12px; color:var(--muted); font-weight:600; }
.vm-info strong { color:var(--ink); }
#vm-pagination { display:flex; align-items:center; gap:2px; flex-wrap:wrap; }
#vm-pagination .vm-pg { display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:30px; padding:0 8px; font-size:12px; font-weight:600; color:var(--ink); background:var(--panel); border:1.5px solid var(--line); cursor:pointer; transition:all .15s; user-select:none; border-radius:0; }
#vm-pagination .vm-pg:hover:not(.disabled):not(.active):not(.ellipsis) { border-color:#1877f2; color:#1877f2; background:rgba(24,119,242,.08); }
#vm-pagination .vm-pg.active  { background:#1877f2; border-color:#1877f2; color:#fff; }
#vm-pagination .vm-pg.disabled { opacity:.35; cursor:not-allowed; pointer-events:none; }
#vm-pagination .vm-pg.ellipsis { border-color:transparent; background:transparent; cursor:default; pointer-events:none; }

/* Action Menu */
.vm-action-menu { position:fixed; min-width:185px; background:var(--panel); border:1.5px solid var(--line); box-shadow:0 10px 36px rgba(0,0,0,.18); z-index:99999; padding:4px; opacity:0; visibility:hidden; transform:translateY(-6px) scale(.97); transform-origin:top right; transition:all .18s cubic-bezier(.4,0,.2,1); pointer-events:none; }
.vm-action-menu.show { opacity:1; visibility:visible; transform:translateY(0) scale(1); pointer-events:auto; }
.vm-menu-item { display:flex; align-items:center; gap:9px; padding:8px 10px; 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 .12s; }
.vm-menu-item:hover { background:var(--sb-hover-bg); color:#1877f2; }
.vm-menu-item.danger { color:#ef4444; }
.vm-menu-item.danger:hover { background:rgba(239,68,68,.08); }
.vm-menu-item i { width:15px; text-align:center; font-size:11px; }
.vm-menu-sep { height:1px; background:var(--line); margin:3px 0; }

/* Bulk Bar */
.vm-bulk { position:fixed; bottom:24px; 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); padding:6px 14px; display:flex; align-items:center; gap:7px; z-index:9999; transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .3s; opacity:0; pointer-events:none; white-space:nowrap; }
.vm-bulk.show { transform:translateX(-50%) translateY(0); opacity:1; pointer-events:auto; }
.vm-bulk-count { font-size:13px; font-weight:800; color:var(--ink); padding:0 6px; }
.vm-bulk-sep { width:1px; height:20px; background:var(--line); }
.vm-bulk-btn { display:inline-flex; align-items:center; gap:5px; padding:5px 12px; border-radius:50px; font-size:12px; font-weight:700; border:none; cursor:pointer; transition:all .15s; }
.vm-bulk-btn:hover { filter:brightness(.88); transform:scale(1.04); }
.vm-bulk-del   { background:rgba(239,68,68,.12);   color:#ef4444; }
.vm-bulk-act   { background:rgba(16,185,129,.12);  color:#10b981; }
.vm-bulk-deact { background:rgba(100,116,139,.12); color:#64748b; }
.vm-bulk-x { width:24px; height:24px; border-radius:50%; border:none; background:var(--surface); color:var(--muted); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:10px; transition:all .15s; }
.vm-bulk-x:hover { background:rgba(239,68,68,.1); color:#ef4444; }

/* Modals */
.vm-modal .modal-content { background:var(--panel) !important; border:1.5px solid var(--line) !important; border-radius:0 !important; overflow:hidden; }
.vm-modal .modal-header { background:var(--surface) !important; border-bottom:1.5px solid var(--line) !important; padding:15px 20px !important; display:flex; align-items:center; justify-content:space-between; }
.vm-modal .modal-title { font-size:14.5px !important; font-weight:800 !important; color:var(--ink) !important; display:flex; align-items:center; gap:10px; margin:0; }
.vm-micon { width:32px; height:32px; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; background:rgba(24,119,242,.1); color:#1877f2; }
.vm-modal .modal-body  { padding:18px 20px !important; }
.vm-modal .modal-footer { border-top:1.5px solid var(--line) !important; padding:13px 20px !important; background:var(--surface) !important; gap:7px; }
.vm-modal-close { width:30px; height:30px; border:none; background:var(--surface); color:var(--muted); cursor:pointer; font-size:12px; display:flex; align-items:center; justify-content:center; transition:all .15s; border-radius:0; }
.vm-modal-close:hover { background:rgba(239,68,68,.1); color:#ef4444; }

/* Form controls */
.vm-form-group { margin-bottom:12px; }
.vm-form-group:last-child { margin-bottom:0; }
.vm-form-label { display:block; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); margin-bottom:4px; }
.req { color:#ef4444; margin-left:2px; }
.vm-form-control { width:100%; padding:9px 11px; border:1.5px solid var(--line); border-radius:0 !important; background:var(--surface); color:var(--ink); font-size:13px; outline:none; transition:border-color .15s,box-shadow .15s; font-family:var(--font-bengali); -webkit-appearance:none; appearance:none; }
.vm-form-control:focus { border-color:#1877f2; box-shadow:0 0 0 3px rgba(24,119,242,.12); }
.vm-form-control::placeholder { color:var(--muted); opacity:.55; }
textarea.vm-form-control { resize:vertical; min-height:80px; }
select.vm-form-control { 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 10px center; padding-right:28px; }
.vm-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; }
@media(max-width:576px){ .vm-grid-2{grid-template-columns:1fr;} }
.vm-type-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.vm-type-chk { display:flex; align-items:center; gap:8px; padding:9px 11px; border:1.5px solid var(--line); cursor:pointer; transition:all .15s; font-size:12.5px; font-weight:600; color:var(--ink); }
.vm-type-chk input { display:none; }
.vm-type-chk:has(input:checked) { border-color:#1877f2; background:rgba(24,119,242,.08); color:#1877f2; }
.vm-type-chk .ti { width:26px; height:26px; display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; background:var(--surface); transition:all .15s; }
.vm-type-chk:has(input:checked) .ti { background:#1877f2; color:#fff; }
.vm-prog-box { background:var(--surface); border:1.5px solid var(--line); padding:13px; margin-top:13px; display:none; }
.vm-prog-track { height:4px; background:var(--line); overflow:hidden; margin:7px 0 6px; }
.vm-prog-fill  { height:100%; background:#1877f2; transition:width .5s ease; width:0%; }

/* ══════════════════════════════════════════════
   FACEBOOK-STYLE LIGHTBOX MODAL
══════════════════════════════════════════════ */
.fbl-overlay {
    position:fixed; inset:0; z-index:999999;
    background:rgba(0,0,0,.9);
    opacity:0; visibility:hidden;
    transition:opacity .22s ease, visibility .22s ease;
    display:flex; align-items:stretch;
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
.fbl-overlay.open { opacity:1; visibility:visible; }

/* Left: media column */
.fbl-media-col {
    flex:1; min-width:0; background:#000;
    display:flex; align-items:center; justify-content:center;
    position:relative; overflow:hidden;
}
.fbl-media-col img {
    max-width:100%; max-height:100vh; object-fit:contain;
    display:block; user-select:none;
    animation:fblFadeIn .2s ease;
}
.fbl-video-wrap {
    width:100%; height:100%;
    display:flex; align-items:center; justify-content:center;
    background:#000;
}
.fbl-video-wrap iframe {
    width:100%; height:100%; border:none; display:block;
}
.fbl-status-wrap {
    width:100%; height:100%; min-height:60vh;
    display:flex; align-items:center; justify-content:center;
    padding:40px;
    background:linear-gradient(160deg,#18191a,#242526);
}
.fbl-status-card {
    max-width:500px; text-align:center;
}
.fbl-status-icon {
    width:52px; height:52px; background:#1877f2; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:22px; color:#fff; margin:0 auto 16px;
}
.fbl-status-text {
    font-size:20px; font-weight:600; color:#e4e6ea;
    line-height:1.7; font-family:var(--font-bengali,inherit);
    word-break:break-word;
}
.fbl-link-wrap {
    width:100%; height:100%; min-height:50vh;
    display:flex; align-items:center; justify-content:center;
    background:#18191a; padding:20px;
}
.fbl-link-wrap iframe {
    width:min(540px,100%); height:min(600px,90vh);
    border:none; border-radius:8px; box-shadow:0 8px 40px rgba(0,0,0,.5);
    display:block;
}
/* Video fallback */
.fbl-video-fallback {
    width:100%; height:100%; min-height:50vh;
    position:relative; background:#000;
    display:flex; align-items:center; justify-content:center;
}
.fbl-vf-overlay {
    position:absolute; inset:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:14px; background:rgba(0,0,0,.55);
}
.fbl-vf-play {
    width:72px; height:72px; background:#1877f2; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:28px; color:#fff;
}
.fbl-vf-txt { font-size:14px; color:#e4e6eb; font-weight:600; }
.fbl-vf-btn {
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 22px; background:#1877f2; color:#fff;
    font-size:14px; font-weight:700; border-radius:6px;
    text-decoration:none; transition:background .15s;
}
.fbl-vf-btn:hover { background:#1565d8; color:#fff; }

/* Spinner */
.fbl-spinner {
    position:absolute; inset:0; z-index:3;
    display:flex; align-items:center; justify-content:center;
    background:rgba(0,0,0,.5);
}
.fbl-spinner.hide { display:none; }
.fbl-spin-ring {
    width:44px; height:44px;
    border:4px solid rgba(255,255,255,.15);
    border-top-color:#1877f2;
    border-radius:50%;
    animation:fblSpin .8s linear infinite;
}
@keyframes fblSpin { to{transform:rotate(360deg)} }
@keyframes fblFadeIn { from{opacity:0;transform:scale(.97)} to{opacity:1;transform:scale(1)} }

/* Nav arrows */
.fbl-arr {
    position:absolute; top:50%; transform:translateY(-50%);
    width:36px; height:36px; border-radius:50%;
    background:rgba(255,255,255,.15); border:none;
    color:#fff; font-size:18px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background .15s; z-index:5;
    backdrop-filter:blur(4px);
}
.fbl-arr:hover { background:rgba(255,255,255,.28); }
.fbl-arr-prev { left:12px; }
.fbl-arr-next { right:12px; }
.fbl-arr[hidden] { display:none; }

/* Close button */
.fbl-close {
    position:fixed; top:12px; left:12px; z-index:999999;
    width:36px; height:36px; border-radius:50%;
    background:rgba(255,255,255,.15); border:none;
    color:#fff; font-size:16px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background .15s; backdrop-filter:blur(4px);
}
.fbl-close:hover { background:rgba(255,255,255,.28); }

/* Right: info sidebar */
.fbl-sidebar {
    width:360px; flex-shrink:0; background:#242526;
    display:flex; flex-direction:column;
    border-left:1px solid #3a3b3c;
    overflow:hidden;
}
@media(max-width:900px){
    .fbl-overlay { flex-direction:column; }
    .fbl-media-col { flex:none; height:55vw; max-height:60vh; }
    .fbl-sidebar { width:100%; flex:1; }
}

/* Sidebar header */
.fbl-sb-head {
    padding:12px 16px;
    border-bottom:1px solid #3a3b3c;
    display:flex; align-items:center; gap:10px;
    flex-shrink:0;
}
.fbl-page-av {
    width:40px; height:40px; border-radius:50%;
    background:#1877f2; color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:18px; font-weight:800; flex-shrink:0;
    overflow:hidden;
}
.fbl-page-av img { width:100%; height:100%; object-fit:cover; }
.fbl-page-name { font-size:14px; font-weight:700; color:#e4e6eb; }
.fbl-post-time { font-size:12px; color:#b0b3b8; margin-top:1px; display:flex; align-items:center; gap:4px; }
.fbl-post-time i { font-size:10px; }
.fbl-sb-head-right { margin-left:auto; display:flex; gap:6px; }
.fbl-hd-btn {
    width:32px; height:32px; border-radius:50%;
    background:#3a3b3c; border:none; color:#e4e6eb;
    font-size:14px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background .15s;
}
.fbl-hd-btn:hover { background:#4e4f50; }

/* Sidebar body */
.fbl-sb-body { flex:1; overflow-y:auto; padding:14px 16px; }
.fbl-sb-body::-webkit-scrollbar { width:6px; }
.fbl-sb-body::-webkit-scrollbar-thumb { background:#4e4f50; border-radius:3px; }
.fbl-caption {
    font-size:14px; color:#e4e6eb; line-height:1.65;
    word-break:break-word; font-family:var(--font-bengali,inherit);
    white-space:pre-wrap; margin-bottom:12px;
}
.fbl-caption.collapsed { display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; }
.fbl-see-more { color:#b0b3b8; font-size:13px; cursor:pointer; border:none; background:none; padding:0; display:block; margin-bottom:12px; }
.fbl-see-more:hover { text-decoration:underline; }

/* Engagement bar */
.fbl-eng {
    display:flex; gap:4px; padding:8px 0;
    border-top:1px solid #3a3b3c; border-bottom:1px solid #3a3b3c;
    margin-bottom:4px; flex-wrap:wrap;
}
.fbl-eng-item {
    display:flex; align-items:center; gap:5px;
    font-size:13px; color:#b0b3b8; padding:2px 6px;
    border-radius:4px;
}
.fbl-eng-item i { font-size:12px; }
.fbl-eng-item.reach i  { color:#1877f2; }
.fbl-eng-item.likes i  { color:#f02849; }
.fbl-eng-item.cmts  i  { color:#f59e0b; }
.fbl-eng-item.shares i { color:#10b981; }

/* Action buttons row */
.fbl-actions {
    display:flex; gap:2px; padding:2px 0;
    border-bottom:1px solid #3a3b3c; margin-bottom:10px;
}
.fbl-act {
    flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
    padding:8px 4px; font-size:13px; font-weight:600; color:#b0b3b8;
    border:none; background:transparent; cursor:pointer; border-radius:4px;
    transition:background .14s, color .14s;
}
.fbl-act:hover { background:#3a3b3c; color:#e4e6eb; }
.fbl-act i { font-size:16px; }

/* Type pill */
.fbl-type-pill {
    display:inline-flex; align-items:center; gap:5px;
    padding:3px 10px; border-radius:12px;
    font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.5px;
    margin-bottom:10px;
}
.fbl-type-pill.photo  { background:rgba(59,130,246,.18);  color:#60a5fa; }
.fbl-type-pill.video  { background:rgba(239,68,68,.18);   color:#f87171; }
.fbl-type-pill.reel   { background:rgba(139,92,246,.18);  color:#a78bfa; }
.fbl-type-pill.link   { background:rgba(245,158,11,.18);  color:#fbbf24; }
.fbl-type-pill.status { background:rgba(16,185,129,.18);  color:#34d399; }

/* View on FB button */
.fbl-view-fb {
    display:flex; align-items:center; justify-content:center; gap:8px;
    padding:9px 16px; background:#1877f2; color:#fff;
    font-size:13px; font-weight:700; text-decoration:none;
    border-radius:6px; transition:background .15s; margin-top:6px;
}
.fbl-view-fb:hover { background:#1565d8; color:#fff; }

/* Empty / spinner */
.vm-empty { text-align:center; padding:52px 20px; color:var(--muted); }
.vm-empty i { font-size:42px; margin-bottom:12px; display:block; opacity:.25; }
.vm-empty p { font-size:14px; font-weight:600; margin:0; }
@keyframes vm-spin { to{transform:rotate(360deg)} }
.vm-spinner { width:32px; height:32px; border:3px solid var(--line); border-top-color:#1877f2; border-radius:50%; animation:vm-spin .7s linear infinite; }
.vm-dt-hd { display:none !important; }

/* ── PAGE MANAGER MODAL ── */
.pgm-tabs { display:flex; border-bottom:2px solid var(--line); margin:0 -20px 16px; padding:0 20px; }
.pgm-tab { display:flex; align-items:center; gap:6px; padding:9px 16px; font-size:12px; font-weight:700; color:var(--muted); border:none; background:transparent; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; transition:all .15s; text-transform:uppercase; letter-spacing:.5px; }
.pgm-tab:hover { color:#1877f2; }
.pgm-tab.active { color:#1877f2; border-bottom-color:#1877f2; }
.pgm-pane { display:none; }
.pgm-pane.active { display:block; }
.pgm-count-badge { background:#1877f2; color:#fff; padding:1px 7px; font-size:10px; font-weight:800; margin-left:4px; border-radius:2px; }
.pgm-list { display:flex; flex-direction:column; gap:8px; max-height:380px; overflow-y:auto; padding-right:2px; }
.pgm-item { display:flex; align-items:center; gap:12px; padding:11px 13px; border:1.5px solid var(--line); transition:border-color .15s; }
.pgm-item:hover { border-color:#1877f2; }
.pgm-thumb { width:44px; height:44px; border-radius:6px; overflow:hidden; flex-shrink:0; background:rgba(24,119,242,.1); display:flex; align-items:center; justify-content:center; color:#1877f2; font-size:20px; }
.pgm-thumb img { width:100%; height:100%; object-fit:cover; }
.pgm-info { flex:1; min-width:0; }
.pgm-name { font-size:13.5px; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pgm-meta { display:flex; gap:8px; flex-wrap:wrap; margin-top:3px; }
.pgm-meta span { font-size:11px; color:var(--muted); }
.pgm-id { font-family:monospace !important; font-size:10.5px !important; background:var(--surface); padding:1px 5px; border:1px solid var(--line); border-radius:2px; }
.pgm-actions { display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex-shrink:0; }
.pgm-badge { padding:3px 9px; font-size:10.5px; font-weight:700; border-radius:10px; cursor:pointer; border:none; transition:filter .15s; }
.pgm-badge.on  { background:rgba(16,185,129,.1); color:#10b981; }
.pgm-badge.off { background:rgba(239,68,68,.1);  color:#ef4444; }
.pgm-badge:hover { filter:brightness(.85); }
.pgm-act-row { display:flex; gap:5px; }
.pgm-icon-btn { width:28px; height:28px; border:1.5px solid var(--line); background:var(--panel); border-radius:4px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:11px; color:var(--muted); transition:all .15s; }
.pgm-icon-btn:hover { border-color:#1877f2; color:#1877f2; background:rgba(24,119,242,.08); }
.pgm-icon-btn.danger:hover { border-color:#ef4444; color:#ef4444; background:rgba(239,68,68,.08); }
.pgm-icon-btn.edit-btn:hover { border-color:#f59e0b; color:#f59e0b; background:rgba(245,158,11,.08); }
/* Page edit inline form */
.pgm-edit-form { display:none; padding:12px; background:var(--surface); border-top:1.5px solid var(--line); margin-top:8px; }
.pgm-edit-form.open { display:block; }
.pgm-edit-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:8px; }
@media(max-width:576px){ .pgm-edit-grid{grid-template-columns:1fr;} }
.pgm-ef-label { display:block; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.7px; color:var(--muted); margin-bottom:3px; }
.pgm-ef-input { width:100%; padding:7px 9px; border:1.5px solid var(--line); background:var(--panel); color:var(--ink); font-size:12px; border-radius:0; outline:none; }
.pgm-ef-input:focus { border-color:#1877f2; }
.pgm-ef-token { font-family:monospace !important; font-size:11px; min-height:48px; resize:vertical; }
.pgm-edit-actions { display:flex; justify-content:flex-end; gap:6px; margin-top:8px; }
.pgm-ef-btn { display:inline-flex; align-items:center; gap:5px; padding:6px 13px; font-size:11.5px; font-weight:700; border:none; border-radius:3px; cursor:pointer; transition:all .15s; }
.pgm-ef-save { background:#1877f2; color:#fff; }
.pgm-ef-save:hover { background:#1565d8; }
.pgm-ef-cancel { background:var(--surface); color:var(--muted); border:1.5px solid var(--line); }
.pgm-ef-cancel:hover { color:#ef4444; border-color:#ef4444; }
.pgm-empty { text-align:center; padding:32px 20px; color:var(--muted); }
.pgm-empty i { font-size:32px; display:block; margin-bottom:8px; opacity:.25; }
.pgm-empty p { font-size:13px; font-weight:600; margin:0 0 12px; }

/* Notice */
.vm-notice { padding:10px 13px; background:rgba(24,119,242,.06); border:1.5px solid rgba(24,119,242,.2); font-size:11.5px; color:var(--ink); line-height:1.7; margin-bottom:14px; }
.vm-notice code { background:rgba(24,119,242,.1); padding:1px 5px; font-size:11px; border-radius:2px; }
.token-field { font-family:monospace !important; font-size:11.5px; min-height:62px; word-break:break-all; }

/* Sync page selector */
.vm-sync-pg-wrap { position:relative; display:flex; }
.vm-sync-pg-wrap select { flex:1; padding-right:115px !important; }
.vm-sync-pg-add { position:absolute; right:0; top:0; height:100%; padding:0 12px; background:rgba(16,185,129,.12); border:none; border-left:1.5px solid var(--line); color:#10b981; font-size:11px; font-weight:700; cursor:pointer; display:flex; align-items:center; gap:4px; transition:background .15s; white-space:nowrap; }
.vm-sync-pg-add:hover { background:rgba(16,185,129,.22); }

/* Saving overlay for Page Manager */
.pgm-saving { position:absolute; inset:0; background:rgba(var(--panel-rgb,255,255,255),.88); display:none; align-items:center; justify-content:center; flex-direction:column; gap:10px; z-index:10; backdrop-filter:blur(3px); }
.pgm-saving.show { display:flex; }
.pgm-saving p { font-size:13px; font-weight:700; color:var(--ink); }

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


@section('content')

{{-- ══ HEADER ══ --}}
<div class="vm-header">
    <div class="vm-header-brand">
        <div class="vm-fb-logo"><i class="fab fa-facebook-f"></i></div>
        <div>
            <div class="vm-header-title">Facebook Post Manager</div>
            <div class="vm-header-sub">Page · Photos · Videos · Reels · Links · Engagement Tracking</div>
        </div>
    </div>
    <div class="vm-header-actions">
        <button class="vm-btn vm-btn-green" onclick="openPageMgr('list')">
            <i class="fab fa-facebook-f"></i> Manage Pages
        </button>
        <button class="vm-btn vm-btn-fb" data-toggle="modal" data-target="#syncModal">
            <i class="fas fa-sync-alt"></i> Sync Facebook
        </button>
        <button class="vm-btn vm-btn-primary" data-toggle="modal" data-target="#createModal">
            <i class="fas fa-plus"></i> Add Post
        </button>
    </div>
</div>

{{-- ══ STATS ══ --}}
<div class="vm-stats-grid">
    <div class="vm-stat c-blue">  <div class="vm-stat-icon"><i class="fas fa-users"></i></div><div class="vm-stat-val" id="statFans">—</div><div class="vm-stat-lbl">Page Fans</div></div>
    <div class="vm-stat c-teal">  <div class="vm-stat-icon"><i class="fab fa-facebook-f"></i></div><div class="vm-stat-val" id="statTotal">—</div><div class="vm-stat-lbl">Total Posts</div></div>
    <div class="vm-stat c-orange"><div class="vm-stat-icon"><i class="fas fa-image"></i></div><div class="vm-stat-val" id="statPhoto">—</div><div class="vm-stat-lbl">Photos</div></div>
    <div class="vm-stat c-red">   <div class="vm-stat-icon"><i class="fas fa-video"></i></div><div class="vm-stat-val" id="statVideo">—</div><div class="vm-stat-lbl">Videos</div></div>
    <div class="vm-stat c-purple"><div class="vm-stat-icon"><i class="fas fa-film"></i></div><div class="vm-stat-val" id="statReel">—</div><div class="vm-stat-lbl">Reels</div></div>
    <div class="vm-stat c-blue">  <div class="vm-stat-icon"><i class="fas fa-eye"></i></div><div class="vm-stat-val" id="statReach">—</div><div class="vm-stat-lbl">Total Reach</div></div>
    <div class="vm-stat c-green"> <div class="vm-stat-icon"><i class="fas fa-thumbs-up"></i></div><div class="vm-stat-val" id="statLikes">—</div><div class="vm-stat-lbl">Total Likes</div></div>
</div>

{{-- ══ LAYOUT ══ --}}
<div class="vm-layout">

    {{-- SIDEBAR --}}
    <div class="vm-sidebar">
        <div class="vm-sb-sec">
            <div class="vm-sb-search"><i class="fas fa-search"></i><input type="text" id="vmSearch" placeholder="Search posts..."></div>
        </div>
        <div class="vm-sb-sec">
            <div class="vm-sb-label"><i class="fas fa-layer-group"></i> Content Type</div>
            <button class="vm-tab active" data-tab="all">    <span class="vm-tab-ico"><i class="fas fa-th-large"></i></span> All Posts <span class="vm-tab-cnt" id="tc-all">—</span></button>
            <button class="vm-tab" data-tab="photo">  <span class="vm-tab-ico" style="color:#3b82f6"><i class="fas fa-image"></i></span> Photos <span class="vm-tab-cnt" id="tc-photo">—</span></button>
            <button class="vm-tab" data-tab="video">  <span class="vm-tab-ico" style="color:#ef4444"><i class="fas fa-video"></i></span> Videos <span class="vm-tab-cnt" id="tc-video">—</span></button>
            <button class="vm-tab" data-tab="reel">   <span class="vm-tab-ico" style="color:#8b5cf6"><i class="fas fa-film"></i></span> Reels <span class="vm-tab-cnt" id="tc-reel">—</span></button>
            <button class="vm-tab" data-tab="link">   <span class="vm-tab-ico" style="color:#f59e0b"><i class="fas fa-link"></i></span> Links <span class="vm-tab-cnt" id="tc-link">—</span></button>
            <button class="vm-tab" data-tab="status"> <span class="vm-tab-ico" style="color:#10b981"><i class="fas fa-align-left"></i></span> Status <span class="vm-tab-cnt" id="tc-status">—</span></button>
        </div>
        <div class="vm-sb-sec">
            <div class="vm-sb-label"><i class="fab fa-facebook-f"></i> Facebook Page</div>
            <div class="vm-sb-filter">
                <select id="filter_page">
                    <option value="">All Pages</option>
                    @foreach($pages as $pg)<option value="{{ $pg->id }}">{{ $pg->name }}</option>@endforeach
                </select>
            </div>
        </div>
        <div class="vm-sb-sec">
            <div class="vm-sb-label"><i class="fas fa-calendar"></i> Date Filter</div>
            <div class="vm-sb-filter"><label>Specific Date</label><input type="date" id="filter_date"></div>
            <div class="vm-sb-filter"><label>Month</label><input type="month" id="filter_month"></div>
            <div class="vm-sb-filter"><label>Status</label>
                <select id="filter_status"><option value="">All Status</option><option value="1">Active</option><option value="0">Hidden</option></select>
            </div>
            <button class="vm-sb-reset" id="vmReset"><i class="fas fa-times"></i> Reset Filters</button>
        </div>
    </div>

    {{-- TABLE --}}
    <div class="vm-card">
        <div class="vm-card-bar">
            <div class="vm-card-bar-left">
                <span style="font-size:12px;font-weight:600;color:var(--muted)">Show</span>
                <select id="perPage" class="vm-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:12px;font-weight:600;color:var(--muted)">entries</span>
            </div>
            <div class="vm-card-bar-right">
                <button class="vm-icon-btn" id="vmRefresh" title="Refresh"><i class="fas fa-sync-alt"></i></button>
            </div>
        </div>
        <div class="vm-table-wrap">
            <table class="vm-table" id="vmTable">
                <thead><tr>
                    <th style="width:34px"><input type="checkbox" id="vmSelectAll" style="width:15px;height:15px;accent-color:#1877f2;cursor:pointer;"></th>
                    <th style="width:110px">Preview</th>
                    <th>Post / Caption</th>
                    <th style="width:120px">Page</th>
                    <th style="width:80px">Type</th>
                    <th style="width:130px">Engagement</th>
                    <th style="width:76px">Status</th>
                    <th style="width:100px">Published</th>
                    <th style="width:40px"></th>
                </tr></thead>
                <tbody></tbody>
            </table>
        </div>
        <div class="vm-table-footer">
            <div class="vm-info" id="vm-info">Loading...</div>
            <div id="vm-pagination"></div>
        </div>
    </div>
</div>


{{-- ══════════════════════════════════════════════════════
     FACEBOOK-STYLE LIGHTBOX
     Left: full media (image / video iframe / status card)
     Right: page info + caption + engagement + actions
══════════════════════════════════════════════════════ --}}
<div class="fbl-overlay" id="fblOverlay">

    {{-- Close button (top-left always visible) --}}
    <button class="fbl-close" id="fblClose" title="Close (Esc)"><i class="fas fa-times"></i></button>

    {{-- ── LEFT: Media column ── --}}
    <div class="fbl-media-col" id="fblMediaCol">

        {{-- Prev / Next --}}
        <button class="fbl-arr fbl-arr-prev" id="fblPrev" hidden><i class="fas fa-angle-left"></i></button>
        <button class="fbl-arr fbl-arr-next" id="fblNext" hidden><i class="fas fa-angle-right"></i></button>

        {{-- Spinner --}}
        <div class="fbl-spinner" id="fblSpinner"><div class="fbl-spin-ring"></div></div>

        {{-- Content injected by JS --}}
        <div id="fblMediaContent" style="width:100%;height:100%;display:flex;align-items:center;justify-content:center"></div>

    </div>

    {{-- ── RIGHT: Info sidebar ── --}}
    <div class="fbl-sidebar" id="fblSidebar">

        {{-- Page header --}}
        <div class="fbl-sb-head">
            <div class="fbl-page-av" id="fblPageAv"><i class="fab fa-facebook-f"></i></div>
            <div>
                <div class="fbl-page-name" id="fblPageName">—</div>
                <div class="fbl-post-time" id="fblPostTime"><i class="fas fa-globe-asia"></i> <span>—</span></div>
            </div>
            <div class="fbl-sb-head-right">
                <a class="fbl-hd-btn" id="fblOpenFb" href="#" target="_blank" title="Open on Facebook"><i class="fab fa-facebook-f"></i></a>
                <button class="fbl-hd-btn" id="fblSbClose" title="Close"><i class="fas fa-times"></i></button>
            </div>
        </div>

        {{-- Body --}}
        <div class="fbl-sb-body">

            {{-- Type pill --}}
            <div class="fbl-type-pill photo" id="fblTypePill">📷 Photo</div>

            {{-- Caption --}}
            <div class="fbl-caption collapsed" id="fblCaption">—</div>
            <button class="fbl-see-more" id="fblSeeMore" style="display:none">See more</button>

            {{-- Engagement stats --}}
            <div class="fbl-eng" id="fblEng">
                <div class="fbl-eng-item reach"><i class="fas fa-eye"></i> <span id="fblReach">0</span></div>
                <div class="fbl-eng-item likes"><i class="fas fa-heart"></i> <span id="fblLikes">0</span></div>
                <div class="fbl-eng-item cmts"><i class="fas fa-comment"></i> <span id="fblCmts">0</span></div>
                <div class="fbl-eng-item shares"><i class="fas fa-share"></i> <span id="fblShares">0</span></div>
            </div>

            {{-- Action buttons (Like / Comment / Share / Copy) --}}
            <div class="fbl-actions">
                <button class="fbl-act"><i class="far fa-thumbs-up"></i> Like</button>
                <button class="fbl-act"><i class="far fa-comment"></i> Comment</button>
                <button class="fbl-act fbl-act-share"><i class="fas fa-share"></i> Share</button>
                <button class="fbl-act fbl-act-copy" id="fblCopyLink"><i class="fas fa-link"></i> Copy</button>
            </div>

            {{-- View on Facebook --}}
            <a class="fbl-view-fb" id="fblViewFb" href="#" target="_blank">
                <i class="fab fa-facebook-f"></i> View on Facebook
            </a>

        </div>
    </div>

</div>


{{-- ══════════════════════════════════════════════════════════
     PAGE MANAGER MODAL
     Tab "add"  → form to create a new page
                → on save: page is created + auto-sync runs
                → modal closes → sync modal opens automatically
     Tab "list" → shows all saved pages with delete button
══════════════════════════════════════════════════════════ --}}
<div class="modal fade vm-modal" id="pageMgrModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" style="position:relative">

            {{-- Saving overlay (shown during save+sync) --}}
            <div class="pgm-saving" id="pgmSaving">
                <div class="vm-spinner"></div>
                <p id="pgmSavingMsg">Saving page & syncing posts…</p>
            </div>

            <div class="modal-header">
                <h5 class="modal-title">
                    <span class="vm-micon" style="background:rgba(16,185,129,.1);color:#10b981"><i class="fab fa-facebook-f"></i></span>
                    Facebook Page Manager
                </h5>
                <button type="button" class="vm-modal-close" data-dismiss="modal"><i class="fas fa-times"></i></button>
            </div>

            <div class="modal-body">

                {{-- Tabs --}}
                <div class="pgm-tabs">
                    <button class="pgm-tab active" data-pgm-tab="add"><i class="fas fa-plus-circle"></i> New Page</button>
                    <button class="pgm-tab" data-pgm-tab="list">
                        <i class="fas fa-list"></i> Page List
                        <span class="pgm-count-badge" id="pgmCount">{{ $pages->count() }}</span>
                    </button>
                </div>

                {{-- ── ADD PAGE PANE ── --}}
                <div class="pgm-pane active" id="pgm-pane-add">

                    <div class="vm-notice">
                        <i class="fas fa-info-circle" style="color:#1877f2"></i>
                        <strong>Page ID কোথায় পাবে?</strong>
                        Facebook Page → About → Page transparency → <strong>Page ID</strong>.<br>
                        Graph API: <code>graph.facebook.com/PAGE_USERNAME?fields=id&access_token=TOKEN</code><br>
                        <strong style="color:#10b981">✓ Page save করার সাথে সাথে auto-sync হয়ে যাবে।</strong>
                    </div>

                    <form id="pgmForm">
                        @csrf
                        <div class="vm-grid-2">
                            <div class="vm-form-group">
                                <label class="vm-form-label">Facebook Page ID <span class="req">*</span></label>
                                <input type="text" name="facebook_page_id" id="pgm_pid" class="vm-form-control" placeholder="e.g. 123456789012345" required>
                            </div>
                            <div class="vm-form-group">
                                <label class="vm-form-label">Page Name <span class="req">*</span></label>
                                <input type="text" name="name" id="pgm_name" class="vm-form-control" placeholder="My Facebook Page" required>
                            </div>
                            <div class="vm-form-group">
                                <label class="vm-form-label">Username</label>
                                <div style="display:flex;align-items:stretch;border:1.5px solid var(--line);background:var(--surface)">
                                    <span style="padding:9px 10px;font-size:13px;font-weight:700;color:var(--muted);border-right:1.5px solid var(--line);display:flex;align-items:center;flex-shrink:0">@</span>
                                    <input type="text" name="username" placeholder="pagename" style="border:none;background:transparent;color:var(--ink);padding:9px 11px;font-size:13px;outline:none;width:100%;font-family:inherit">
                                </div>
                            </div>
                            <div class="vm-form-group">
                                <label class="vm-form-label">Category</label>
                                <input type="text" name="category" class="vm-form-control" placeholder="e.g. Media / Business">
                            </div>
                            <div class="vm-form-group">
                                <label class="vm-form-label">Page URL</label>
                                <input type="url" name="page_url" class="vm-form-control" placeholder="https://facebook.com/...">
                            </div>
                            <div class="vm-form-group">
                                <label class="vm-form-label">About</label>
                                <input type="text" name="about" class="vm-form-control" placeholder="Short description">
                            </div>
                        </div>
                        <div class="vm-form-group">
                            <label class="vm-form-label">Page Access Token <span class="req">*</span></label>
                            <textarea name="access_token" id="pgm_token" class="vm-form-control token-field"
                                placeholder="EAAxxxxxxxx... (Long-lived Page Access Token)" required></textarea>
                            <div style="font-size:10.5px;color:var(--muted);margin-top:4px">
                                <i class="fas fa-lock" style="color:#1877f2"></i>
                                Requires: <code>pages_read_engagement</code> · <code>pages_read_user_content</code> · <code>read_insights</code>
                            </div>
                        </div>
                        <div style="padding:4px 0">
                            <label style="display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;font-weight:600;color:var(--ink)">
                                <input type="hidden" name="is_active" value="0">
                                <input type="checkbox" name="is_active" id="pgm_active" value="1" checked
                                    style="width:15px;height:15px;accent-color:#1877f2;cursor:pointer">
                                Active — sync এ ব্যবহার হবে
                            </label>
                        </div>
                    </form>

                </div>

                {{-- ── LIST PANE ── --}}
                <div class="pgm-pane" id="pgm-pane-list">
                    <div class="pgm-list" id="pgmList">
                        @forelse($pages as $pg)
                        <div class="pgm-item" id="pgm-row-{{ $pg->id }}">
                            <div class="pgm-thumb">
                                @if($pg->thumbnail)<img src="{{ $pg->thumbnail }}" alt="">
                                @else<i class="fab fa-facebook-f"></i>@endif
                            </div>
                            <div class="pgm-info" style="flex:1;min-width:0">
                                <div class="pgm-name">{{ $pg->name }}</div>
                                <div class="pgm-meta">
                                    @if($pg->username)<span>@{{ $pg->username }}</span>@endif
                                    @if($pg->category)<span>{{ $pg->category }}</span>@endif
                                    <span class="pgm-id">{{ $pg->facebook_page_id }}</span>
                                </div>
                                @if($pg->fans || $pg->followers)
                                <div class="pgm-meta" style="margin-top:3px">
                                    @if($pg->fans)<span>👍 {{ number_format($pg->fans) }}</span>@endif
                                    @if($pg->followers)<span>👥 {{ number_format($pg->followers) }}</span>@endif
                                </div>
                                @endif
                            </div>
                            <div class="pgm-actions">
                                {{-- Active/Inactive toggle badge --}}
                                <button class="pgm-badge {{ $pg->is_active ? 'on' : 'off' }} pgm-toggle"
                                    data-id="{{ $pg->id }}"
                                    data-active="{{ $pg->is_active ? 1 : 0 }}"
                                    title="Click to toggle">
                                    <i class="fas {{ $pg->is_active ? 'fa-eye' : 'fa-eye-slash' }}"></i>
                                    {{ $pg->is_active ? 'Active' : 'Inactive' }}
                                </button>
                                {{-- Action icons --}}
                                <div class="pgm-act-row">
                                    <button class="pgm-icon-btn edit-btn pgm-edit-open" data-id="{{ $pg->id }}" title="Edit">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button class="pgm-icon-btn danger pgm-del" data-id="{{ $pg->id }}" title="Delete">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        {{-- Inline edit form (hidden by default) --}}
                        <div class="pgm-edit-form" id="pgm-edit-{{ $pg->id }}">
                            <div class="pgm-edit-grid">
                                <div>
                                    <label class="pgm-ef-label">Page Name <span style="color:#ef4444">*</span></label>
                                    <input type="text" class="pgm-ef-input pef-name" value="{{ $pg->name }}" placeholder="Page Name">
                                </div>
                                <div>
                                    <label class="pgm-ef-label">Username</label>
                                    <input type="text" class="pgm-ef-input pef-username" value="{{ $pg->username }}" placeholder="@username">
                                </div>
                                <div>
                                    <label class="pgm-ef-label">Category</label>
                                    <input type="text" class="pgm-ef-input pef-category" value="{{ $pg->category }}" placeholder="e.g. Media">
                                </div>
                                <div>
                                    <label class="pgm-ef-label">Page URL</label>
                                    <input type="url" class="pgm-ef-input pef-page_url" value="{{ $pg->page_url }}" placeholder="https://facebook.com/...">
                                </div>
                            </div>
                            <div>
                                <label class="pgm-ef-label">About</label>
                                <input type="text" class="pgm-ef-input pef-about" value="{{ $pg->about }}" placeholder="Short description" style="margin-bottom:8px">
                            </div>
                            <div>
                                <label class="pgm-ef-label">Access Token</label>
                                <textarea class="pgm-ef-input pgm-ef-token pef-access_token" placeholder="Leave blank to keep existing token">{{ $pg->access_token }}</textarea>
                            </div>
                            <div class="pgm-edit-actions">
                                <button class="pgm-ef-btn pgm-ef-cancel pgm-edit-close" data-id="{{ $pg->id }}">
                                    <i class="fas fa-times"></i> Cancel
                                </button>
                                <button class="pgm-ef-btn pgm-ef-save pgm-edit-save" data-id="{{ $pg->id }}">
                                    <i class="fas fa-save"></i> Save Changes
                                </button>
                            </div>
                        </div>
                        @empty
                        <div class="pgm-empty" id="pgm-empty">
                            <i class="fab fa-facebook-f"></i>
                            <p>No pages added yet.</p>
                            <button class="vm-btn vm-btn-primary" onclick="switchPgmTab('add')">
                                <i class="fas fa-plus"></i> Add First Page
                            </button>
                        </div>
                        @endforelse
                    </div>
                </div>

            </div>{{-- modal-body --}}

            <div class="modal-footer" id="pgm-footer-add">
                <button type="button" class="vm-btn vm-btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="vm-btn vm-btn-primary" id="pgmSaveBtn">
                    <i class="fas fa-save"></i> Save & Sync
                </button>
            </div>
            <div class="modal-footer" id="pgm-footer-list" style="display:none">
                <button type="button" class="vm-btn vm-btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="vm-btn vm-btn-primary" onclick="switchPgmTab('add')">
                    <i class="fas fa-plus"></i> Add New Page
                </button>
            </div>

        </div>
    </div>
</div>


{{-- ══ SYNC MODAL ══ --}}
<div class="modal fade vm-modal" id="syncModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><span class="vm-micon"><i class="fab fa-facebook-f"></i></span>Sync from Facebook</h5>
                <button type="button" class="vm-modal-close" data-dismiss="modal"><i class="fas fa-times"></i></button>
            </div>
            <div class="modal-body">
                <div class="vm-grid-2">
                    <div class="vm-form-group">
                        <label class="vm-form-label">Facebook Page <span class="req">*</span></label>
                        <div class="vm-sync-pg-wrap">
                            <select id="syncPageId" class="vm-form-control">
                                <option value="">— Select a page —</option>
                                @foreach($pages as $pg)
                                <option value="{{ $pg->id }}" {{ $loop->first ? 'selected' : '' }}>
                                    {{ $pg->name }}@if($pg->username) · @{{ $pg->username }}@endif
                                </option>
                                @endforeach
                            </select>
                            <button type="button" class="vm-sync-pg-add" onclick="openPageMgr('add')">
                                <i class="fas fa-plus"></i> New Page
                            </button>
                        </div>
                        @if($pages->isEmpty())
                        <div style="font-size:11px;color:#f59e0b;margin-top:4px;display:flex;align-items:center;gap:4px">
                            <i class="fas fa-exclamation-triangle"></i> No pages yet — add one first!
                        </div>
                        @endif
                    </div>
                    <div class="vm-form-group">
                        <label class="vm-form-label">Max Pages <span style="text-transform:none;letter-spacing:0;font-weight:400">(1 page = 100 posts)</span></label>
                        <input type="number" id="syncMaxPages" class="vm-form-control" value="10" min="1" max="50">
                    </div>
                </div>
                <div class="vm-form-group">
                    <label class="vm-form-label">Content Types to Sync</label>
                    <div class="vm-type-grid">
                        <label class="vm-type-chk"><input type="checkbox" name="sync_types[]" value="photo"  checked><span class="ti" style="color:#3b82f6"><i class="fas fa-image"></i></span> Photos</label>
                        <label class="vm-type-chk"><input type="checkbox" name="sync_types[]" value="video"  checked><span class="ti" style="color:#ef4444"><i class="fas fa-video"></i></span> Videos</label>
                        <label class="vm-type-chk"><input type="checkbox" name="sync_types[]" value="reel"   checked><span class="ti" style="color:#8b5cf6"><i class="fas fa-film"></i></span> Reels</label>
                        <label class="vm-type-chk"><input type="checkbox" name="sync_types[]" value="link"   checked><span class="ti" style="color:#f59e0b"><i class="fas fa-link"></i></span> Link Posts</label>
                        <label class="vm-type-chk"><input type="checkbox" name="sync_types[]" value="status" checked><span class="ti" style="color:#10b981"><i class="fas fa-align-left"></i></span> Status Posts</label>
                    </div>
                </div>
                <div class="vm-notice">
                    <i class="fab fa-facebook-f" style="color:#1877f2"></i>
                    <strong>Required:</strong> <code>pages_read_engagement</code> · <code>pages_read_user_content</code> · <code>read_insights</code>
                    permissions. Token DB তে save থাকলে auto-use হবে।
                </div>
                <div class="vm-prog-box" id="syncProgress">
                    <div style="display:flex;align-items:center;justify-content:space-between">
                        <div style="font-size:13px;font-weight:700;color:var(--ink)" id="syncStatus">Connecting...</div>
                        <div style="font-size:12px;font-weight:800;color:#1877f2" id="syncCount"></div>
                    </div>
                    <div class="vm-prog-track"><div class="vm-prog-fill" id="syncFill"></div></div>
                    <div style="font-size:11.5px;color:var(--muted)" id="syncSub">Please wait...</div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="vm-btn vm-btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="vm-btn vm-btn-primary" id="startSyncBtn">
                    <i class="fas fa-sync-alt"></i> Start Sync
                </button>
            </div>
        </div>
    </div>
</div>


{{-- ══ CREATE POST MODAL ══ --}}
<div class="modal fade vm-modal" id="createModal" tabindex="-1">
    <div class="modal-dialog modal-md">
        <form action="{{ route('facebook-post.store') }}" method="POST" class="modal-content">
            @csrf
            <div class="modal-header">
                <h5 class="modal-title"><span class="vm-micon"><i class="fas fa-plus"></i></span>Add Post Manually</h5>
                <button type="button" class="vm-modal-close" data-dismiss="modal"><i class="fas fa-times"></i></button>
            </div>
            <div class="modal-body">
                <div class="vm-form-group">
                    <label class="vm-form-label">Facebook Post ID <span class="req">*</span></label>
                    <input type="text" name="facebook_post_id" class="vm-form-control" placeholder="123456789_987654321" required>
                </div>
                <div class="vm-grid-2">
                    <div class="vm-form-group">
                        <label class="vm-form-label">Page <span class="req">*</span></label>
                        <select name="page_id" class="vm-form-control" required>
                            <option value="">— Select —</option>
                            @foreach($pages as $pg)<option value="{{ $pg->id }}">{{ $pg->name }}</option>@endforeach
                        </select>
                    </div>
                    <div class="vm-form-group">
                        <label class="vm-form-label">Post Type</label>
                        <select name="post_type" class="vm-form-control">
                            <option value="photo">Photo</option><option value="video">Video</option>
                            <option value="reel">Reel</option><option value="link">Link</option><option value="status">Status</option>
                        </select>
                    </div>
                    <div class="vm-form-group">
                        <label class="vm-form-label">Status</label>
                        <select name="is_active" class="vm-form-control"><option value="1">Active</option><option value="0">Hidden</option></select>
                    </div>
                    <div class="vm-form-group">
                        <label class="vm-form-label">Published At</label>
                        <input type="datetime-local" name="published_at" class="vm-form-control">
                    </div>
                </div>
                <div class="vm-form-group">
                    <label class="vm-form-label">Permalink URL</label>
                    <input type="url" name="permalink_url" class="vm-form-control" placeholder="https://www.facebook.com/...">
                </div>
                <div class="vm-form-group">
                    <label class="vm-form-label">Caption / Message</label>
                    <textarea name="message" class="vm-form-control" rows="3" placeholder="Post text..."></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="vm-btn vm-btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="submit" class="vm-btn vm-btn-primary"><i class="fas fa-save"></i> Save Post</button>
            </div>
        </form>
    </div>
</div>


{{-- ══ EDIT POST MODAL ══ --}}
<div class="modal fade vm-modal" id="editModal" tabindex="-1">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><span class="vm-micon" style="background:rgba(245,158,11,.1);color:#f59e0b"><i class="fas fa-edit"></i></span>Edit Post</h5>
                <button type="button" class="vm-modal-close" data-dismiss="modal"><i class="fas fa-times"></i></button>
            </div>
            <div class="modal-body">
                <div id="editLoader" style="text-align:center;padding:40px">
                    <div class="vm-spinner" style="margin:0 auto 12px"></div>
                    <div style="font-size:13px;color:var(--muted);font-weight:600">Loading...</div>
                </div>
                <form id="editForm" style="display:none">
                    @csrf @method('PUT')
                    <div class="vm-grid-2">
                        <div class="vm-form-group"><label class="vm-form-label">Page</label>
                            <select name="page_id" id="ePage" class="vm-form-control">
                                @foreach($pages as $pg)<option value="{{ $pg->id }}">{{ $pg->name }}</option>@endforeach
                            </select>
                        </div>
                        <div class="vm-form-group"><label class="vm-form-label">Post Type</label>
                            <select name="post_type" id="eType" class="vm-form-control">
                                <option value="photo">Photo</option><option value="video">Video</option>
                                <option value="reel">Reel</option><option value="link">Link</option><option value="status">Status</option>
                            </select>
                        </div>
                        <div class="vm-form-group"><label class="vm-form-label">Status</label>
                            <select name="is_active" id="eStatus" class="vm-form-control"><option value="1">Active</option><option value="0">Hidden</option></select>
                        </div>
                        <div class="vm-form-group"><label class="vm-form-label">Published At</label>
                            <input type="datetime-local" name="published_at" id="ePubAt" class="vm-form-control">
                        </div>
                    </div>
                    <div class="vm-form-group"><label class="vm-form-label">Permalink URL</label>
                        <input type="url" name="permalink_url" id="eLink" class="vm-form-control">
                    </div>
                    <div class="vm-form-group"><label class="vm-form-label">Caption / Message</label>
                        <textarea name="message" id="eMsg" class="vm-form-control" rows="4"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="vm-btn vm-btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="vm-btn vm-btn-primary" id="editSaveBtn"><i class="fas fa-save"></i> Update</button>
            </div>
        </div>
    </div>
</div>


{{-- ══ ACTION MENU ══ --}}
<div class="vm-action-menu" id="vmActionMenu">
    <button class="vm-menu-item" id="amPreview"><i class="fas fa-eye" style="color:#1877f2"></i> Preview Post</button>
    <button class="vm-menu-item" id="amEdit"><i class="fas fa-edit" style="color:#f59e0b"></i> Edit</button>
    <a class="vm-menu-item" id="amFb" href="#" target="_blank"><i class="fab fa-facebook-f" style="color:#1877f2"></i> Open on Facebook</a>
    <button class="vm-menu-item" id="amCopy"><i class="fas fa-link" style="color:#3b82f6"></i> Copy Link</button>
    <button class="vm-menu-item" id="amRefresh"><i class="fas fa-chart-bar" style="color:#10b981"></i> Refresh Insights</button>
    <div class="vm-menu-sep"></div>
    <button class="vm-menu-item danger" id="amDelete"><i class="fas fa-trash"></i> Delete</button>
</div>

{{-- ══ BULK BAR ══ --}}
<div class="vm-bulk" id="vmBulk">
    <span class="vm-bulk-count"><span id="vmBulkCount">0</span> selected</span>
    <div class="vm-bulk-sep"></div>
    <button class="vm-bulk-btn vm-bulk-act"   id="vmBulkAct"><i class="fas fa-eye"></i> Activate</button>
    <button class="vm-bulk-btn vm-bulk-deact" id="vmBulkDeact"><i class="fas fa-eye-slash"></i> Hide</button>
    <button class="vm-bulk-btn vm-bulk-del"   id="vmBulkDel"><i class="fas fa-trash"></i> Delete</button>
    <div class="vm-bulk-sep"></div>
    <button class="vm-bulk-x" id="vmBulkClose"><i class="fas fa-times"></i></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 () {

    var ROUTE        = '{{ route('facebook-post.index') }}';
    var SYNC_ROUTE   = '{{ route('facebook-post.sync') }}';
    var PAGE_STORE   = '{{ route('facebook-pages.store') }}';
    var PAGE_DESTROY = '{{ url('admin/facebook-pages') }}';
    var INSIGHT_URL  = '{{ url('admin/facebook') }}';
    var CSRF         = '{{ csrf_token() }}';
    var activeTab    = 'all';

    /* ═══════════════════════════════════
       DATATABLE
    ═══════════════════════════════════ */
    var table = $('#vmTable').DataTable({
        processing:false, serverSide:true, responsive:true,
        lengthChange:false, searching:false, autoWidth:false, pageLength:10,
        ajax:{
            url:ROUTE, type:'GET',
            data:function(d){
                d.search=$('#vmSearch').val(); d.tab=activeTab;
                d.page=$('#filter_page').val(); d.status=$('#filter_status').val();
                d.date=$('#filter_date').val();
                d.month=$('#filter_month').val()?$('#filter_month').val().split('-')[1]:'';
                d.year=$('#filter_month').val()?$('#filter_month').val().split('-')[0]:'';
                d.perPage=$('#perPage').val();
            },
            dataSrc:function(json){
                if(json.stats){
                    var s=json.stats;
                    var fmt=function(n){return n>=1000000?(n/1000000).toFixed(1)+'M':n>=1000?(n/1000).toFixed(1)+'K':n;};
                    $('#statTotal').text(fmt(s.total||0));$('#statFans').text(fmt(s.fans||0));
                    $('#statPhoto').text(fmt(s.photo||0));$('#statVideo').text(fmt(s.video||0));
                    $('#statReel').text(fmt(s.reel||0));$('#statReach').text(fmt(s.total_reach||0));
                    $('#statLikes').text(fmt(s.total_likes||0));
                    $('#tc-all').text(s.total||0);$('#tc-photo').text(s.photo||0);
                    $('#tc-video').text(s.video||0);$('#tc-reel').text(s.reel||0);
                    $('#tc-link').text(s.link||0);$('#tc-status').text(s.status_count||0);
                }
                return json.data;
            }
        },
        columns:[
            {data:'checkbox',orderable:false,searchable:false,width:'34px'},
            {data:'thumbnail',orderable:false,searchable:false,width:'110px'},
            {data:'message',orderable:true},
            {data:'page',orderable:false,searchable:false,width:'120px'},
            {data:'post_type',orderable:true,searchable:false,width:'80px'},
            {data:'engagement',orderable:false,searchable:false,width:'130px'},
            {data:'status',orderable:false,searchable:false,width:'76px'},
            {data:'published_at',orderable:true,width:'100px'},
            {data:'action',orderable:false,searchable:false,width:'40px'}
        ],
        order:[[7,'desc']], dom:'<"vm-dt-hd"p>t',
        language:{
            emptyTable:'<div class="vm-empty"><i class="fab fa-facebook-f"></i><p>No posts found. Sync from Facebook to get started.</p></div>',
            zeroRecords:'<div class="vm-empty"><i class="fas fa-search"></i><p>No matching posts found.</p></div>',
        },
        drawCallback:function(){renderPagination();updateBulk();}
    });

    /* Tabs */
    $(document).on('click','.vm-tab',function(){
        $('.vm-tab').removeClass('active');$(this).addClass('active');
        activeTab=$(this).data('tab');table.ajax.reload();
    });

    /* Filters */
    var ft;
    $('#vmSearch').on('input',function(){clearTimeout(ft);ft=setTimeout(function(){table.ajax.reload();},350);});
    $('#filter_page,#filter_status,#filter_date,#filter_month').on('change',function(){table.ajax.reload();});
    $('#perPage').on('change',function(){var v=$(this).val();table.page.len(v==='-1'?100000:parseInt(v)).draw();});
    $('#vmReset').on('click',function(){
        $('#filter_page,#filter_status,#filter_date,#filter_month').val('');$('#vmSearch').val('');
        activeTab='all';$('.vm-tab').removeClass('active');$('[data-tab="all"]').addClass('active');
        table.ajax.reload();
    });
    $('#vmRefresh').on('click',function(){
        var $i=$(this).find('i');$i.addClass('fa-spin');
        table.ajax.reload(function(){$i.removeClass('fa-spin');});
    });

    /* ═══════════════════════════════════
       PAGINATION
    ═══════════════════════════════════ */
    function renderPagination(){
        var api=table.page.info();
        var page=api.page,pages=api.pages,start=api.start+1,end=api.end,total=api.recordsTotal,filtered=api.recordsDisplay;
        $('#vm-info').html(!filtered?'No entries found':'Showing <strong>'+start+'–'+end+'</strong> of <strong>'+filtered+'</strong>'+(filtered!==total?' (filtered from <strong>'+total+'</strong>)':''));
        var h='';
        h+='<span class="vm-pg'+(page===0?' disabled':'')+'" data-page="prev"><i class="fas fa-angle-left"></i></span>';
        pageRange(page,pages).forEach(function(p){h+=p==='...'?'<span class="vm-pg ellipsis">…</span>':'<span class="vm-pg'+(p===page?' active':'')+'" data-page="'+p+'">'+(p+1)+'</span>';});
        h+='<span class="vm-pg'+(page>=pages-1?' disabled':'')+'" data-page="next"><i class="fas fa-angle-right"></i></span>';
        $('#vm-pagination').html(h);
    }
    function pageRange(cur,tot){
        if(tot<=7){var r=[];for(var i=0;i<tot;i++)r.push(i);return r;}
        var p=[0];if(cur>3)p.push('...');
        for(var i=Math.max(1,cur-2);i<=Math.min(tot-2,cur+2);i++)p.push(i);
        if(cur<tot-4)p.push('...');p.push(tot-1);return p;
    }
    $(document).on('click','#vm-pagination .vm-pg:not(.disabled):not(.ellipsis):not(.active)',function(){
        var p=$(this).data('page');
        if(p==='prev')table.page('previous').draw('page');
        else if(p==='next')table.page('next').draw('page');
        else table.page(parseInt(p)).draw('page');
    });

    /* ═══════════════════════════════════
       STATUS TOGGLE
    ═══════════════════════════════════ */
    $(document).on('click','.nl-status',function(){
        var id=$(this).data('id');if(!confirm('Toggle status?'))return;
        $.post(ROUTE+'/'+id,{_method:'PUT',_token:CSRF,toggle_status:1},function(){
            table.ajax.reload(null,false);toastr.success('Status updated!');
        });
    });

    /* ═══════════════════════════════════════════════════════════
       FACEBOOK-STYLE LIGHTBOX
    ═══════════════════════════════════════════════════════════ */
    var $fbl       = $('#fblOverlay');
    var fblRows    = [];
    var fblIdx     = -1;
    var fblOpen    = false;

    var fblTypeCfg = {
        photo : { icon:'📷', label:'Photo',  cls:'photo'  },
        video : { icon:'▶',  label:'Video',  cls:'video'  },
        reel  : { icon:'🎬', label:'Reel',   cls:'reel'   },
        link  : { icon:'🔗', label:'Link',   cls:'link'   },
        status: { icon:'💬', label:'Status', cls:'status' },
    };

    function fblFmt(n){
        n=parseInt(n)||0;
        return n>=1000000?(n/1000000).toFixed(1)+'M':n>=1000?(n/1000).toFixed(1)+'K':n;
    }

    /* ── Collect all visible table rows ── */
    function fblCollect(){
        fblRows=[];
        $('#vmTable tbody tr').each(function(){
            var $w=$(this).find('.fm-thumb-wrap');
            if(!$w.length)return;
            var $eng=$(this).find('.fm-engagement span');
            fblRows.push({
                type     : $w.data('type')||'status',
                thumb    : $w.find('img').attr('src')||'',
                msg      : $w.data('title')||'',
                link     : $w.data('link')||'',
                videourl : $w.data('videourl')||'',
                reach    : $($eng[0]).text().trim()||'0',
                likes    : $($eng[1]).text().trim()||'0',
                cmts     : $($eng[2]).text().trim()||'0',
                shares   : $($eng[3]).text().trim()||'0',
                page     : $(this).find('.nl-channel-cell span').text().trim()||'',
                pageAv   : $(this).find('.nl-ch-av').text().trim()||'F',
                time     : $(this).find('.nl-date strong').text().trim()||'',
            });
        });
    }

    /* ── Render media content ── */
    function fblRenderMedia(row){
        var $mc=$('#fblMediaContent');
        $mc.empty();
        $('#fblSpinner').removeClass('hide');

        if(row.type==='photo'){
            if(row.thumb){
                var img=new Image();
                img.style.cssText='max-width:100%;max-height:100vh;object-fit:contain;display:block;animation:fblFadeIn .2s ease';
                img.onload=function(){ $('#fblSpinner').addClass('hide'); };
                img.onerror=function(){ fblIframePost(row.link); };
                img.src=row.thumb;
                $mc.append(img);
            } else { fblIframePost(row.link); }

        } else if(row.type==='video'||row.type==='reel'){
            fblRenderVideo(row);

        } else if(row.type==='link'){
            fblIframePost(row.link);

        } else {
            // status
            $('#fblSpinner').addClass('hide');
            $mc.html('<div class="fbl-status-wrap"><div class="fbl-status-card">'
                +'<div class="fbl-status-icon"><i class="fas fa-align-left"></i></div>'
                +'<div class="fbl-status-text">'+(row.msg||'No caption')+'</div>'
                +'</div></div>');
        }
    }

    /* ── Video embed — native <video> player first, iframe fallback ── */
    function fblRenderVideo(row){
        var $mc=$('#fblMediaContent');

        /* ①  Direct .mp4 from Graph API → native player (best) */
        if(row.videourl){
            $mc.html(
                '<video id="fblVideo" controls autoplay playsinline '
                +'style="width:100%;height:100%;max-height:100vh;background:#000;display:block;" '
                +'preload="metadata">'
                +'<source src="'+row.videourl+'" type="video/mp4">'
                +'</video>'
            );
            var vid=document.getElementById('fblVideo');
            vid.oncanplay=function(){ $('#fblSpinner').addClass('hide'); };
            vid.onerror=function(){ fblVideoFbEmbed(row); };   // fallback
            return;
        }

        /* ② No stored URL → try to fetch via AJAX from our own endpoint */
        if(row.link){
            var postId=fblExtractVideoId(row.link);
            if(postId){
                $.get('{{ route("facebook-post.videourl") }}',{post_id:postId},function(res){
                    if(res.url){
                        row.videourl=res.url;   // cache for next time
                        fblRenderVideo(row);
                    } else {
                        fblVideoFbEmbed(row);
                    }
                }).fail(function(){ fblVideoFbEmbed(row); });
                return;
            }
        }

        /* ③ Fallback: FB iframe embed */
        fblVideoFbEmbed(row);
    }

    /* Facebook plugins/video.php embed */
    function fblVideoFbEmbed(row){
        var $mc=$('#fblMediaContent');
        var link=row.link||'';
        var videoId=fblExtractVideoId(link);
        var src=videoId
            ? 'https://www.facebook.com/video/embed?video_id='+videoId
            : 'https://www.facebook.com/plugins/video.php?href='+encodeURIComponent(link)
              +'&show_text=false&width=960&autoplay=1';

        $mc.html('<div class="fbl-video-wrap">'
            +'<iframe src="'+src+'" allowfullscreen="true" scrolling="no" '
            +'style="border:none;overflow:hidden" '
            +'allow="autoplay;clipboard-write;encrypted-media;picture-in-picture;web-share">'
            +'</iframe></div>');
        $('#fblSpinner').addClass('hide');
    }

    /* Extract numeric video ID from Facebook URL */
    function fblExtractVideoId(url){
        if(!url)return null;
        var patterns=[/\/videos?\/(\d{10,})/,/\/reel\/(\d{10,})/,/[?&]v=(\d{10,})/,/\/(\d{10,})\/?(?:\?|$)/];
        for(var i=0;i<patterns.length;i++){var m=url.match(patterns[i]);if(m&&m[1])return m[1];}
        return null;
    }

    /* Stop video when closing */
    function fblStopVideo(){
        var vid=document.getElementById('fblVideo');
        if(vid){ vid.pause(); vid.src=''; }
    }

    function fblIframePost(link){
        if(!link){ $('#fblSpinner').addClass('hide'); return; }
        var src='https://www.facebook.com/plugins/post.php?href='
            +encodeURIComponent(link)+'&show_text=true&width=540&appId=';
        $('#fblMediaContent').html('<div class="fbl-link-wrap">'
            +'<iframe src="'+src+'" scrolling="no" style="border:none;overflow:hidden" '
            +'allowfullscreen allow="autoplay;clipboard-write;encrypted-media;picture-in-picture;web-share">'
            +'</iframe></div>');
        $('#fblMediaContent iframe').on('load',function(){$('#fblSpinner').addClass('hide');});
    }

    /* ── Populate sidebar ── */
    function fblPopulateSidebar(row){
        // Page avatar + name
        var $av=$('#fblPageAv');
        $av.html('<span style="font-size:18px;font-weight:800">'+row.pageAv+'</span>');
        $('#fblPageName').text(row.page||'Facebook Page');
        $('#fblPostTime span').text(row.time||'');

        // Type pill
        var cfg=fblTypeCfg[row.type]||fblTypeCfg.status;
        $('#fblTypePill').text(cfg.icon+' '+cfg.label).attr('class','fbl-type-pill '+cfg.cls);

        // Caption
        var $cap=$('#fblCaption');
        var msg=row.msg||'';
        $cap.text(msg);
        if(msg.length>200){
            $cap.addClass('collapsed');
            $('#fblSeeMore').show().text('See more');
        } else {
            $cap.removeClass('collapsed');
            $('#fblSeeMore').hide();
        }

        // Engagement
        $('#fblReach').text(row.reach||0);
        $('#fblLikes').text(row.likes||0);
        $('#fblCmts').text(row.cmts||0);
        $('#fblShares').text(row.shares||0);

        // Links
        $('#fblOpenFb,#fblViewFb').attr('href',row.link||'#');
    }

    /* ── Open ── */
    function fblOpenRow(idx){
        fblIdx=idx;
        var row=fblRows[fblIdx];
        if(!row)return;
        fblRenderMedia(row);
        fblPopulateSidebar(row);
        // nav arrows
        $('#fblPrev,#fblNext').prop('hidden', fblRows.length<=1);
        if(!fblOpen){
            $fbl.addClass('open');$('body').css('overflow','hidden');fblOpen=true;
        }
    }

    /* ── Close ── */
    function fblCloseBox(){
        fblStopVideo();
        $fbl.removeClass('open');$('body').css('overflow','');
        setTimeout(function(){
            $('#fblMediaContent').empty();
            $('#fblSpinner').removeClass('hide');
        },240);
        fblOpen=false;
    }

    /* ── Thumb / message click → open ── */
    $(document).on('click','.fm-thumb-wrap',function(){
        fblCollect();
        var link=$(this).data('link');
        fblRows.forEach(function(r,i){ if(r.link===link)fblIdx=i; });
        fblOpenRow(fblIdx);
    });
    $(document).on('click','.fm-msg-text',function(){
        var link=$(this).data('link');
        var $w=$('.fm-thumb-wrap[data-link="'+link+'"]').first();
        if($w.length)$w.trigger('click');
    });

    /* ── Navigation ── */
    $('#fblPrev').on('click',function(){fblOpenRow((fblIdx-1+fblRows.length)%fblRows.length);});
    $('#fblNext').on('click',function(){fblOpenRow((fblIdx+1)%fblRows.length);});

    /* ── Close triggers ── */
    $('#fblClose,#fblSbClose').on('click',fblCloseBox);
    $fbl.on('click',function(e){
        if($(e.target).is($fbl)||$(e.target).is('#fblMediaCol'))fblCloseBox();
    });
    $(document).on('keydown',function(e){
        if(!fblOpen)return;
        if(e.key==='Escape')fblCloseBox();
        if(e.key==='ArrowLeft')$('#fblPrev').trigger('click');
        if(e.key==='ArrowRight')$('#fblNext').trigger('click');
    });

    /* ── See more toggle ── */
    $('#fblSeeMore').on('click',function(){
        var $cap=$('#fblCaption');
        var collapsed=$cap.hasClass('collapsed');
        $cap.toggleClass('collapsed',!collapsed);
        $(this).text(collapsed?'See less':'See more');
    });

    /* ── Copy link ── */
    $('#fblCopyLink').on('click',function(){
        var link=fblRows[fblIdx]&&fblRows[fblIdx].link||'';
        if(navigator.clipboard)navigator.clipboard.writeText(link);
        else{var $i=$('<input>').val(link).appendTo('body').select();document.execCommand('copy');$i.remove();}
        toastr.success('Link copied!');
    });

    /* ═══════════════════════════════════
       ACTION MENU
    ═══════════════════════════════════ */
    var $menu=$('#vmActionMenu'),menuOpen=false,menuRow=null;
    $(document).on('click','.vm-act-btn',function(e){
        e.stopPropagation();
        var $btn=$(this),$row=$btn.closest('tr');
        if(menuOpen&&menuRow&&menuRow.is($row)){closeMenu();return;}
        var id=$btn.data('id'),postId=$btn.data('postid'),link=$btn.data('link'),title=$btn.data('title');
        $('#amPreview,#amCopy,#amRefresh,#amDelete').data('id',id).data('postid',postId).data('link',link).data('title',title);
        $('#amEdit').data('id',id);$('#amFb').attr('href',link||'#');
        $menu.appendTo('body');
        var rect=this.getBoundingClientRect();
        $menu.css({top:(rect.bottom+window.scrollY+4)+'px',left:Math.max(8,rect.right+window.scrollX-188)+'px'}).addClass('show');
        $btn.addClass('open');menuRow=$row;menuOpen=true;
    });
    function closeMenu(){$menu.removeClass('show');$('.vm-act-btn.open').removeClass('open');menuOpen=false;menuRow=null;}
    $(document).on('click',function(e){if(!$(e.target).closest('#vmActionMenu').length)closeMenu();});
    $(document).on('scroll resize',closeMenu);
    $('#amPreview').on('click',function(){
        closeMenu();
        var link=$(this).data('link');
        var $w=$('.fm-thumb-wrap[data-link="'+link+'"]').first();
        if($w.length){ $w.trigger('click'); }
        else {
            fblCollect();
            fblRows.forEach(function(r,i){ if(r.link===link)fblIdx=i; });
            if(fblIdx>=0)fblOpenRow(fblIdx);
        }
    });

    /* ═══════════════════════════════════
       EDIT POST
    ═══════════════════════════════════ */
    $('#amEdit').on('click',function(){
        var id=$(this).data('id');closeMenu();
        $('#editLoader').show();$('#editForm').hide();$('#editSaveBtn').data('id',id);
        $('#editModal').modal('show');
        $.getJSON(ROUTE+'/'+id+'/edit_json',function(v){
            $('#eMsg').val(v.message||'');$('#ePage').val(v.page_id||'');$('#eType').val(v.post_type||'status');
            $('#eStatus').val(v.is_active!==undefined?v.is_active:1);$('#eLink').val(v.permalink_url||'');
            if(v.published_at)$('#ePubAt').val(v.published_at.replace(' ','T').substring(0,16));else $('#ePubAt').val('');
            $('#editLoader').hide();$('#editForm').show();
        }).fail(function(){toastr.error('Failed to load post!');$('#editModal').modal('hide');});
    });
    $('#editSaveBtn').on('click',function(){
        var id=$(this).data('id');
        $.ajax({url:ROUTE+'/'+id,type:'POST',data:new FormData($('#editForm')[0]),processData:false,contentType:false,
            success:function(){$('#editModal').modal('hide');table.ajax.reload(null,false);toastr.success('Post updated!');},
            error:function(xhr){toastr.error(xhr.responseJSON?.message||'Update failed!');}
        });
    });

    /* ═══════════════════════════════════
       REFRESH INSIGHTS
    ═══════════════════════════════════ */
    $('#amRefresh').on('click',function(){
        closeMenu();var id=$(this).data('id');toastr.info('Refreshing insights...');
        $.post(INSIGHT_URL+'/'+id+'/refresh-insight',{_token:CSRF},function(r){
            table.ajax.reload(null,false);toastr.success(r.success||'Insights refreshed!');
        }).fail(function(xhr){toastr.error(xhr.responseJSON?.error||'Failed!');});
    });

    /* ═══════════════════════════════════
       DELETE POST
    ═══════════════════════════════════ */
    $('#amDelete').on('click',function(){
        closeMenu();var id=$(this).data('id');
        if(!confirm('Delete this post?'))return;
        $.post(ROUTE+'/'+id,{_method:'DELETE',_token:CSRF},function(){
            table.ajax.reload(null,false);toastr.success('Post deleted!');
        });
    });

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

    /* ═══════════════════════════════════
       BULK ACTIONS
    ═══════════════════════════════════ */
    $('#vmSelectAll').on('change',function(){$('#vmTable tbody .nl-check').prop('checked',this.checked);updateBulk();});
    $(document).on('change','.nl-check',function(){if(!this.checked)$('#vmSelectAll').prop('checked',false);updateBulk();});
    function getSelected(){return $('.nl-check:checked').map(function(){return $(this).val();}).get();}
    function updateBulk(){var n=getSelected().length;$('#vmBulkCount').text(n);$('#vmBulk').toggleClass('show',n>0);}
    $('#vmBulkClose').on('click',function(){$('.nl-check,#vmSelectAll').prop('checked',false);updateBulk();});
    $('#vmBulkDel').on('click',function(){
        var ids=getSelected();if(!ids.length||!confirm('Delete '+ids.length+' post(s)?'))return;
        $.post(ROUTE,{_token:CSRF,bulk_delete:ids},function(r){table.ajax.reload(null,false);toastr.success(r.success||'Deleted!');$('#vmSelectAll').prop('checked',false);updateBulk();});
    });
    $('#vmBulkAct').on('click',function(){
        var ids=getSelected();if(!ids.length)return;
        $.post(ROUTE,{_token:CSRF,bulk_status:ids,status_value:1},function(r){table.ajax.reload(null,false);toastr.success(r.success||'Activated!');});
    });
    $('#vmBulkDeact').on('click',function(){
        var ids=getSelected();if(!ids.length)return;
        $.post(ROUTE,{_token:CSRF,bulk_status:ids,status_value:0},function(r){table.ajax.reload(null,false);toastr.success(r.success||'Hidden!');});
    });

    /* ═══════════════════════════════════
       SYNC MODAL
    ═══════════════════════════════════ */
    $('#startSyncBtn').on('click',function(){
        var pageId=$('#syncPageId').val();
        if(!pageId){toastr.warning('Please select a page!');return;}
        var types=[];$('input[name="sync_types[]"]:checked').each(function(){types.push($(this).val());});
        if(!types.length){toastr.warning('Select at least one content type!');return;}
        var $btn=$(this);
        $btn.prop('disabled',true).html('<i class="fas fa-sync-alt fa-spin"></i> Syncing...');
        $('#syncProgress').show();$('#syncFill').css({width:'8%'});
        $('#syncStatus').text('Connecting to Facebook Graph API...');$('#syncSub').text('Fetching page & post info...');$('#syncCount').text('');
        var t1=setTimeout(function(){$('#syncFill').css('width','35%');$('#syncStatus').text('Fetching posts...');},2000);
        var t2=setTimeout(function(){$('#syncFill').css('width','65%');$('#syncStatus').text('Downloading engagement data...');},6000);
        $.ajax({
            url:SYNC_ROUTE,type:'POST',timeout:300000,
            data:{_token:CSRF,page_id:pageId,types:types,max_pages:$('#syncMaxPages').val()},
            success:function(res){
                clearTimeout(t1);clearTimeout(t2);
                $('#syncFill').css('width','100%');$('#syncStatus').text('✓ Sync complete!');
                $('#syncCount').text(res.synced+' posts');$('#syncSub').text(res.success);
                toastr.success(res.success);table.ajax.reload(null,false);
                setTimeout(function(){$('#syncModal').modal('hide');},3500);
            },
            error:function(xhr){
                clearTimeout(t1);clearTimeout(t2);
                var msg=xhr.responseJSON?.error||'Sync failed!';
                $('#syncFill').css({width:'100%',background:'#ef4444'});
                $('#syncStatus').text('✗ Sync failed');$('#syncSub').text(msg);toastr.error(msg);
            },
            complete:function(){$btn.prop('disabled',false).html('<i class="fas fa-sync-alt"></i> Start Sync');}
        });
    });
    $('#syncModal').on('hidden.bs.modal',function(){
        $('#syncProgress').hide();$('#syncFill').css({width:'0%',background:'#1877f2'});
    });

    /* ═══════════════════════════════════
       PAGE MANAGER — TAB SWITCH
    ═══════════════════════════════════ */
    $(document).on('click','.pgm-tab',function(){switchPgmTab($(this).data('pgm-tab'));});

    /* ═══════════════════════════════════
       SAVE NEW PAGE + AUTO SYNC
       Flow:
         1. POST to facebook-pages.store
         2. Controller saves page AND runs syncFacebookPage()
         3. Response returns {success, page, synced, errors}
         4. Modal closes → table reloads → toast shown
    ═══════════════════════════════════ */
    $('#pgmSaveBtn').on('click',function(){
        if(!$('#pgm_pid').val().trim()){toastr.warning('Facebook Page ID required!');return;}
        if(!$('#pgm_name').val().trim()){toastr.warning('Page Name required!');return;}
        if(!$('#pgm_token').val().trim()){toastr.warning('Access Token required!');return;}

        var $btn=$(this);
        $btn.prop('disabled',true).html('<i class="fas fa-spinner fa-spin"></i> Saving...');
        $('#pgmSaving').addClass('show');
        $('#pgmSavingMsg').text('Saving page info…');

        // Update message after 1s to indicate sync started
        var msgTimer=setTimeout(function(){$('#pgmSavingMsg').text('Auto-syncing posts from Facebook… please wait');},1000);

        $.ajax({
            url:PAGE_STORE, type:'POST', data:new FormData($('#pgmForm')[0]),
            processData:false, contentType:false, timeout:300000,
            success:function(res){
                clearTimeout(msgTimer);
                // Add page to all dropdowns
                var label=res.page.name+(res.page.username?' · @'+res.page.username:'');
                $('#syncPageId').append($('<option>').val(res.page.id).text(label).prop('selected',true));
                $('select[name="page_id"]').append($('<option>').val(res.page.id).text(res.page.name));
                $('#filter_page').append($('<option>').val(res.page.id).text(res.page.name));
                $('#ePage').append($('<option>').val(res.page.id).text(res.page.name));

                // Update badge count
                $('#pgmCount').text(parseInt($('#pgmCount').text()||0)+1);

                // Prepend to list
                var thumb=res.page.thumbnail?'<img src="'+res.page.thumbnail+'" alt="">':'<i class="fab fa-facebook-f"></i>';
                var idSpan='<span class="pgm-id">'+res.page.facebook_page_id+'</span>';
                var usrSpan=res.page.username?'<span>@'+res.page.username+'</span>':'';
                var catSpan=res.page.category?'<span>'+res.page.category+'</span>':'';
                var rowHtml='<div class="pgm-item" id="pgm-row-'+res.page.id+'">'
                    +'<div class="pgm-thumb">'+thumb+'</div>'
                    +'<div class="pgm-info" style="flex:1;min-width:0"><div class="pgm-name">'+res.page.name+'</div>'
                    +'<div class="pgm-meta">'+usrSpan+catSpan+idSpan+'</div></div>'
                    +'<div class="pgm-actions">'
                    +'<button class="pgm-badge on pgm-toggle" data-id="'+res.page.id+'" data-active="1"><i class="fas fa-eye"></i> Active</button>'
                    +'<div class="pgm-act-row">'
                    +'<button class="pgm-icon-btn edit-btn pgm-edit-open" data-id="'+res.page.id+'" title="Edit"><i class="fas fa-edit"></i></button>'
                    +'<button class="pgm-icon-btn danger pgm-del" data-id="'+res.page.id+'" title="Delete"><i class="fas fa-trash"></i></button>'
                    +'</div></div></div>'
                    +'<div class="pgm-edit-form" id="pgm-edit-'+res.page.id+'">'
                    +'<div class="pgm-edit-grid">'
                    +'<div><label class="pgm-ef-label">Page Name <span style="color:#ef4444">*</span></label><input type="text" class="pgm-ef-input pef-name" value="'+res.page.name+'" placeholder="Page Name"></div>'
                    +'<div><label class="pgm-ef-label">Username</label><input type="text" class="pgm-ef-input pef-username" value="'+(res.page.username||'')+'" placeholder="@username"></div>'
                    +'<div><label class="pgm-ef-label">Category</label><input type="text" class="pgm-ef-input pef-category" value="'+(res.page.category||'')+'" placeholder="e.g. Media"></div>'
                    +'<div><label class="pgm-ef-label">Page URL</label><input type="url" class="pgm-ef-input pef-page_url" value="'+(res.page.page_url||'')+'" placeholder="https://facebook.com/..."></div>'
                    +'</div>'
                    +'<div><label class="pgm-ef-label">About</label><input type="text" class="pgm-ef-input pef-about" value="'+(res.page.about||'')+'" placeholder="Short description" style="margin-bottom:8px"></div>'
                    +'<div><label class="pgm-ef-label">Access Token</label><textarea class="pgm-ef-input pgm-ef-token pef-access_token" placeholder="Leave blank to keep existing token"></textarea></div>'
                    +'<div class="pgm-edit-actions">'
                    +'<button class="pgm-ef-btn pgm-ef-cancel pgm-edit-close" data-id="'+res.page.id+'"><i class="fas fa-times"></i> Cancel</button>'
                    +'<button class="pgm-ef-btn pgm-ef-save pgm-edit-save" data-id="'+res.page.id+'"><i class="fas fa-save"></i> Save Changes</button>'
                    +'</div></div>';
                $('#pgm-empty').remove();
                $('#pgmList').prepend(rowHtml);

                // Reset form
                $('#pgmForm')[0].reset();$('#pgm_active').prop('checked',true);

                // Reload table
                table.ajax.reload(null,false);

                // Close modal
                $('#pageMgrModal').modal('hide');

                // Toast with sync result
                var msg=res.success||'Page saved!';
                if(res.errors&&res.errors.length){
                    toastr.warning(msg+' (some errors: '+res.errors.join(', ')+')');
                } else {
                    toastr.success(msg);
                }
            },
            error:function(xhr){
                clearTimeout(msgTimer);
                var errs=xhr.responseJSON?.errors||{};
                toastr.error(Object.values(errs).flat().join(', ')||xhr.responseJSON?.message||'Save failed!');
            },
            complete:function(){
                $('#pgmSaving').removeClass('show');
                $btn.prop('disabled',false).html('<i class="fas fa-save"></i> Save & Sync');
            }
        });
    });

    /* ═══════════════════════════════════
       PAGE ACTIONS: TOGGLE / EDIT / DELETE
    ═══════════════════════════════════ */

    /* ── Toggle Active/Inactive ── */
    $(document).on('click','.pgm-toggle',function(){
        var $btn=$(this), id=$btn.data('id'), isActive=parseInt($btn.data('active'));
        var newVal=isActive?0:1;
        $btn.prop('disabled',true);
        $.post(PAGE_DESTROY+'/'+id+'/toggle',{_token:CSRF,is_active:newVal},function(res){
            $btn.data('active',newVal);
            if(newVal){
                $btn.removeClass('off').addClass('on').html('<i class="fas fa-eye"></i> Active');
            } else {
                $btn.removeClass('on').addClass('off').html('<i class="fas fa-eye-slash"></i> Inactive');
            }
            toastr.success(res.success||'Status updated!');
        }).fail(function(){toastr.error('Failed!');}).always(function(){$btn.prop('disabled',false);});
    });

    /* ── Open inline edit form ── */
    $(document).on('click','.pgm-edit-open',function(){
        var id=$(this).data('id');
        // Close any other open forms
        $('.pgm-edit-form.open').not('#pgm-edit-'+id).removeClass('open');
        $('#pgm-edit-'+id).toggleClass('open');
        // Scroll into view
        if($('#pgm-edit-'+id).hasClass('open')){
            setTimeout(function(){$('#pgm-edit-'+id)[0].scrollIntoView({behavior:'smooth',block:'nearest'});},100);
        }
    });

    /* ── Close inline edit form ── */
    $(document).on('click','.pgm-edit-close',function(){
        var id=$(this).data('id');$('#pgm-edit-'+id).removeClass('open');
    });

    /* ── Save edited page ── */
    $(document).on('click','.pgm-edit-save',function(){
        var $btn=$(this), id=$btn.data('id');
        var $form=$('#pgm-edit-'+id);
        var name=$form.find('.pef-name').val().trim();
        if(!name){toastr.warning('Page Name required!');return;}
        var payload={
            _token:CSRF, _method:'PUT',
            name:name,
            username:$form.find('.pef-username').val().trim(),
            category:$form.find('.pef-category').val().trim(),
            page_url:$form.find('.pef-page_url').val().trim(),
            about:$form.find('.pef-about').val().trim(),
        };
        var token=$form.find('.pef-access_token').val().trim();
        if(token)payload.access_token=token;

        $btn.prop('disabled',true).html('<i class="fas fa-spinner fa-spin"></i> Saving...');
        $.post(PAGE_DESTROY+'/'+id,payload,function(res){
            // Update displayed name
            $('#pgm-row-'+id+' .pgm-name').text(name);
            $('#pgm-edit-'+id).removeClass('open');
            // Update dropdown options
            $('#syncPageId,select[name="page_id"],#filter_page,#ePage').find('option[value="'+id+'"]').text(name);
            toastr.success(res.success||'Page updated!');
        }).fail(function(xhr){
            var errs=xhr.responseJSON?.errors||{};
            toastr.error(Object.values(errs).flat().join(', ')||'Update failed!');
        }).always(function(){$btn.prop('disabled',false).html('<i class="fas fa-save"></i> Save Changes');});
    });

    /* ── Delete page ── */
    $(document).on('click','.pgm-del',function(){
        var id=$(this).data('id');
        if(!confirm('Delete this Facebook Page?\nPosts will remain in the database.'))return;
        $.post(PAGE_DESTROY+'/'+id,{_method:'DELETE',_token:CSRF},function(){
            $('#pgm-row-'+id+',#pgm-edit-'+id).fadeOut(300,function(){$(this).remove();});
            $('#syncPageId,select[name="page_id"],#filter_page,#ePage').find('option[value="'+id+'"]').remove();
            $('#pgmCount').text(Math.max(0,parseInt($('#pgmCount').text()||0)-1));
            if(!$('.pgm-item').length){
                $('#pgmList').html('<div class="pgm-empty" id="pgm-empty"><i class="fab fa-facebook-f"></i><p>No pages added yet.</p><button class="vm-btn vm-btn-primary" onclick="switchPgmTab(\'add\')"><i class="fas fa-plus"></i> Add First Page</button></div>');
            }
            toastr.success('Page deleted!');
        }).fail(function(){toastr.error('Delete failed!');});
    });

    /* Reset sync modal on close */
    $('#pageMgrModal').on('hidden.bs.modal',function(){
        $('#pgmSaving').removeClass('show');
    });

});

/* ── Global helpers ── */
function openPageMgr(tab){switchPgmTab(tab||'list');$('#pageMgrModal').modal('show');}
function switchPgmTab(name){
    $('.pgm-tab').removeClass('active');$('[data-pgm-tab="'+name+'"]').addClass('active');
    $('.pgm-pane').removeClass('active');$('#pgm-pane-'+name).addClass('active');
    $('#pgm-footer-add,#pgm-footer-list').hide();
    $('#pgm-footer-'+(name==='add'?'add':'list')).show();
}
</script>
@endsection