@extends('admin.layouts.master')
@section('title', 'Video 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>
/* ══════════════════════════════════════════════════════════
   VIDEO MANAGER — Organized, Clean, YouTube-grade UI
══════════════════════════════════════════════════════════ */

/* ── Page Header ── */
.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-yt-logo { width:42px;height:42px;background:#ff0000;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.vm-yt-logo i { color:#fff;font-size:18px; }
.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; }

/* ── Buttons ── */
.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:var(--acc);color:#fff; }
.vm-btn-primary:hover { background:var(--acc-dark);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:var(--acc);color:var(--acc); }
.vm-btn-red { background:rgba(239,68,68,.1);color:#ef4444;border:1.5px solid rgba(239,68,68,.3); }
.vm-btn-red:hover { background:rgba(239,68,68,.2);color:#dc2626; }

/* ── Stats Grid ── */
.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;cursor:default; }
.vm-stat:hover { transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.1); }
.vm-stat.c-red    { border-top-color:#ef4444; }
.vm-stat.c-blue   { border-top-color:#3b82f6; }
.vm-stat.c-purple { border-top-color:#8b5cf6; }
.vm-stat.c-green  { border-top-color:#10b981; }
.vm-stat.c-orange { border-top-color:#f59e0b; }
.vm-stat.c-pink   { border-top-color:#ec4899; }
.vm-stat.c-acc    { border-top-color:var(--acc); }
.vm-stat-icon { width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:13px;margin-bottom:8px; }
.vm-stat.c-red    .vm-stat-icon { background:rgba(239,68,68,.1);color:#ef4444; }
.vm-stat.c-blue   .vm-stat-icon { background:rgba(59,130,246,.1);color:#3b82f6; }
.vm-stat.c-purple .vm-stat-icon { background:rgba(139,92,246,.1);color:#8b5cf6; }
.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-pink   .vm-stat-icon { background:rgba(236,72,153,.1);color:#ec4899; }
.vm-stat.c-acc    .vm-stat-icon { background:var(--acc-soft);color:var(--acc); }
.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:var(--acc);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:var(--acc); }
.vm-sb-search input::placeholder { color:var(--muted);opacity:.6; }
.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:var(--acc);border-left-color:var(--acc); }
.vm-tab.active { background:var(--acc-soft);color:var(--acc);font-weight:700;border-left-color:var(--acc); }
.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:var(--acc);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:var(--acc);color:#fff;border-color:var(--acc); }
.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"] { 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;-webkit-appearance:none; }
.vm-sb-filter select:focus, .vm-sb-filter input:focus { border-color:var(--acc); }
.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); }

/* ── Table Card ── */
.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 { display:flex;align-items:center;gap:7px; }
.vm-card-bar-right { display:flex;align-items:center;gap:6px; }
.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;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2364748b' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 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:var(--acc);background:var(--acc-soft);color:var(--acc); }

/* ── Table ── */
.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:var(--acc) !important; }
table.vm-table thead th.sorting_asc, table.vm-table thead th.sorting_desc { color:var(--acc) !important; }
table.vm-table thead th.sorting::after { content:' ⇅';opacity:.25;font-size:10px; }
table.vm-table thead th.sorting_asc::after  { content:' ↑';color:var(--acc); }
table.vm-table thead th.sorting_desc::after { content:' ↓';color:var(--acc); }
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 ── */
.vm-thumb-wrap { position:relative;display:inline-block;width:100px;cursor:pointer;flex-shrink:0; }
.vm-thumb { width:100px;height:60px;object-fit:cover;display:block;transition:filter .2s; }
table.vm-table tbody tr:hover .vm-thumb { filter:brightness(.85); }
.vm-thumb-play { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s; }
.vm-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 .vm-thumb-play { opacity:1; }
.vm-thumb-dur { position:absolute;bottom:3px;right:3px;background:rgba(0,0,0,.85);color:#fff;font-size:9.5px;font-weight:700;padding:1px 5px; }

/* ── Title cell ── */
.vm-title-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:340px;line-height:1.45;margin-bottom:5px;cursor:pointer;transition:color .14s; }
.vm-title-text:hover { color:var(--acc); }
.vm-meta-row { display:flex;align-items:center;gap:6px;flex-wrap:wrap; }
.vm-pl-tag { display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:600;color:var(--muted);background:var(--surface);border:1px solid var(--line);padding:2px 7px; }
.vm-pl-tag i { font-size:8px; }
.vm-yt-link { display:inline-flex;align-items:center;gap:4px;padding:2px 8px;background:rgba(239,68,68,.1);color:#ef4444;font-size:10.5px;font-weight:700;text-decoration:none;transition:all .15s; }
.vm-yt-link:hover { background:rgba(239,68,68,.2);color:#ef4444; }

/* ── Status, Type, Views, Date ── */
.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); }
.nl-type-badge { display:inline-flex;align-items:center;gap:5px;padding:4px 9px;font-size:10.5px;font-weight:700;white-space:nowrap; }
.nl-type-badge.type-video { background:rgba(59,130,246,.1);color:#3b82f6; }
.nl-type-badge.type-live  { background:rgba(239,68,68,.1);color:#ef4444; }
.nl-type-badge.type-short { background:rgba(139,92,246,.1);color:#8b5cf6; }
.nl-type-badge.type-live i { animation:vmPulse 1.2s ease-in-out infinite; }
@keyframes vmPulse { 0%,100%{opacity:1} 50%{opacity:.2} }
.nl-views strong { font-size:13px;font-weight:800;color:var(--ink); }
.nl-date strong { display:block;font-weight:700;color:var(--ink);font-size:12px; }
.nl-date { font-size:11.5px;color:var(--muted);line-height:1.5;white-space:nowrap; }
.nl-channel-cell { display:flex;align-items:center;gap:7px; }
.nl-ch-av { width:26px;height:26px;background:var(--acc);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex-shrink:0; }

/* ── Checkbox & Action btn ── */
.vm-chk { width:15px;height:15px;accent-color:var(--acc);cursor:pointer; }
.nl-check { width:15px;height:15px;accent-color:var(--acc);cursor:pointer; }
.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:var(--acc);background:var(--acc-soft);color:var(--acc); }

/* ── Table Footer ── */
.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:var(--acc);color:var(--acc);background:var(--acc-soft); }
#vm-pagination .vm-pg.active   { background:var(--acc);border-color:var(--acc);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:175px;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:var(--acc); }
.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; }
.vm-menu-item.dl-item { color:#10b981; }
.vm-menu-item.dl-item:hover { background:rgba(16,185,129,.08);color:#059669; }

/* ── 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-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-micon { width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;background:var(--acc-soft);color:var(--acc); }
.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; }
.vm-form-label .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:var(--acc);box-shadow:0 0 0 3px rgba(90,103,216,.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:var(--acc);background:var(--acc-soft);color:var(--acc); }
.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:var(--acc);color:#fff; }

/* ── Progress ── */
.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:var(--acc);transition:width .5s ease;width:0%; }
.vm-log-box { display:none;background:var(--surface);border:1px solid var(--line);padding:10px 12px;max-height:150px;overflow-y:auto;font-size:11.5px;color:var(--muted);line-height:1.7;margin-top:8px; }

/* ── Lightbox ── */
.vm-lightbox { position:fixed;inset:0;z-index:999999;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all .25s ease;backdrop-filter:blur(6px); }
.vm-lightbox.active { opacity:1;visibility:visible; }
.vm-lightbox-inner { position:relative;width:90vw;max-width:960px;transform:scale(.94);transition:transform .25s ease; }
.vm-lightbox.active .vm-lightbox-inner { transform:scale(1); }
.vm-lightbox-video { position:relative;width:100%;padding-top:56.25%;background:#000; }
.vm-lightbox-video iframe { position:absolute;inset:0;width:100%;height:100%;border:none; }
.vm-lightbox-bar { background:#111;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px; }
.vm-lightbox-title { font-size:13.5px;font-weight:700;color:#fff;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.vm-lightbox-actions { display:flex;align-items:center;gap:8px;flex-shrink:0; }
.vm-lb-btn { display:inline-flex;align-items:center;gap:6px;padding:6px 12px;font-size:11.5px;font-weight:700;border:none;cursor:pointer;transition:all .15s;text-decoration:none;border-radius:0; }
.vm-lb-yt { background:#ff0000;color:#fff; }
.vm-lb-yt:hover { background:#cc0000;color:#fff; }
.vm-lb-close { background:rgba(255,255,255,.1);color:#fff; }
.vm-lb-close:hover { background:rgba(255,255,255,.2); }

/* ── Download Modal ── */
.dl-service-btn { display:flex;align-items:center;gap:10px;padding:10px 12px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);text-decoration:none;cursor:pointer;transition:all .15s;border-radius:0;width:100%;text-align:left;font-family:inherit;font-size:13px;font-weight:600; }
.dl-service-btn:hover { border-color:var(--acc);background:var(--acc-soft);color:var(--acc);text-decoration:none; }
.dl-service-btn:hover .dl-svc-icon { background:var(--acc);color:#fff; }
.dl-svc-icon { width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-size:12px;background:var(--panel);border:1px solid var(--line);flex-shrink:0;transition:all .15s;color:var(--muted); }
.dl-svc-name { flex:1; }
.dl-svc-badge { font-size:9.5px;font-weight:700;padding:2px 6px;border-radius:3px;text-transform:uppercase;letter-spacing:.4px;background:rgba(16,185,129,.12);color:#10b981; }
.dl-svc-badge.warn { background:rgba(245,158,11,.12);color:#f59e0b; }

/* ── Channel Modal ── */
.ch-tab-btn { display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:11px 16px;font-size:12.5px;font-weight:700;color:var(--muted);background:transparent;border:none;cursor:pointer;border-bottom:2.5px solid transparent;transition:all .15s; }
.ch-tab-btn:hover  { color:var(--acc);background:var(--acc-soft); }
.ch-tab-btn.active { color:var(--acc);border-bottom-color:var(--acc);background:var(--panel); }
.ch-tab-count { display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:18px;padding:0 6px;font-size:10px;font-weight:800;background:var(--acc);color:#fff;border-radius:20px; }
.ch-sync-box { background:var(--surface);border:1.5px solid var(--line);padding:14px;margin-bottom:14px; }
.ch-sync-header { display:flex;align-items:center;gap:10px;margin-bottom:12px; }
.ch-sync-icon { width:34px;height:34px;background:rgba(239,68,68,.1);color:#ef4444;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0; }
.ch-card { display:flex;align-items:center;gap:12px;padding:10px 12px;border:1.5px solid var(--line);background:var(--panel);margin-bottom:8px;transition:all .15s; }
.ch-card:last-child { margin-bottom:0; }
.ch-card:hover { border-color:var(--acc);background:var(--acc-soft);transform:translateX(2px); }
.ch-card-av { width:44px;height:44px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:900;color:#fff;overflow:hidden;position:relative; }
.ch-card-av img { width:100%;height:100%;object-fit:cover;border-radius:50%;position:absolute;inset:0; }
.ch-card-info  { flex:1;min-width:0; }
.ch-card-name  { font-size:13.5px;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px; }
.ch-card-meta  { display:flex;align-items:center;gap:6px;flex-wrap:wrap; }
.ch-card-handle { font-size:11px;color:var(--muted);font-weight:600; }
.ch-subs-badge { font-size:10.5px;font-weight:700;color:#10b981;background:rgba(16,185,129,.1);padding:2px 7px;display:inline-flex;align-items:center;gap:3px; }
.ch-vid-badge  { font-size:10.5px;font-weight:700;color:#3b82f6;background:rgba(59,130,246,.1);padding:2px 7px;display:inline-flex;align-items:center;gap:3px; }
.ch-ytid-badge { font-size:10px;color:var(--muted);font-family:monospace;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.ch-card-actions { display:flex;align-items:center;gap:5px;flex-shrink:0; }
.ch-act-btn { width:30px;height:30px;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;text-decoration:none; }
.ch-act-btn:hover       { border-color:var(--acc);background:var(--acc-soft);color:var(--acc); }
.ch-act-btn.yt:hover    { border-color:#ef4444;background:rgba(239,68,68,.08);color:#ef4444; }
.ch-act-btn.full-sync:hover  { border-color:#f59e0b;background:rgba(245,158,11,.08);color:#f59e0b; }
.ch-act-btn.info-sync:hover  { border-color:#3b82f6;background:rgba(59,130,246,.08);color:#3b82f6; }
.ch-act-btn.danger:hover { border-color:#ef4444;background:rgba(239,68,68,.08);color:#ef4444; }
.ch-spin { animation:vm-spin .7s linear infinite; }

/* ── Manual toggle ── */
.ch-manual-toggle { display:flex;align-items:center;gap:8px;cursor:pointer;padding:8px 0;user-select:none; }
.ch-manual-toggle input[type="checkbox"] { width:15px;height:15px;accent-color:var(--acc);cursor:pointer;flex-shrink:0; }
.ch-manual-toggle span { font-size:12.5px;font-weight:600;color:var(--muted);transition:color .15s; }
.ch-manual-toggle:has(input:checked) span { color:var(--acc); }
#chManualForm { display:none;margin-top:8px;padding-top:12px;border-top:1px solid var(--line);animation:vmRowIn .2s ease; }

/* ── Full Sync Progress in Channel Modal ── */
.ch-fullsync-progress { display:none;margin-top:16px;padding:14px;background:var(--surface);border:1.5px solid var(--line); }

/* ── Misc ── */
.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; }
.vm-spinner { width:32px;height:32px;border:3px solid var(--line);border-top-color:var(--acc);border-radius:50%;animation:vm-spin .7s linear infinite; }
@keyframes vm-spin { to{ transform:rotate(360deg) } }
.vm-dt-hd { display:none !important; }
[data-theme="dim"] .vm-form-control[type="date"],
[data-theme="dark"] .vm-form-control[type="date"],
[data-theme="dim"] .vm-form-control[type="datetime-local"],
[data-theme="dark"] .vm-form-control[type="datetime-local"],
[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')
@php
    $grouped = $playlists->groupBy('type');
    $plTypeLabels = [
        'uploads' => '📹 Uploads',
        'shorts'  => '⚡ Shorts',
        'live'    => '🔴 Live',
        'custom'  => '📋 Custom',
    ];
@endphp

{{-- ══ PAGE HEADER ══ --}}
<div class="vm-header">
    <div class="vm-header-brand">
        <div class="vm-yt-logo"><i class="fab fa-youtube"></i></div>
        <div>
            <div class="vm-header-title">Video Manager</div>
            <div class="vm-header-sub">Channel · Uploads · Shorts · Live · Playlists</div>
        </div>
    </div>
    <div class="vm-header-actions">
        <button class="vm-btn vm-btn-red" data-toggle="modal" data-target="#syncModal">
            <i class="fas fa-sync-alt"></i> Sync YouTube
        </button>
        <button class="vm-btn vm-btn-secondary" data-toggle="modal" data-target="#channelModal">
            <i class="fas fa-tv"></i> Channels
        </button>
        <button class="vm-btn vm-btn-primary" data-toggle="modal" data-target="#createModal">
            <i class="fas fa-plus"></i> Add Video
        </button>
    </div>
</div>

{{-- ══ STATS CARDS ══ --}}
<div class="vm-stats-grid">
    <div class="vm-stat c-red">
        <div class="vm-stat-icon"><i class="fas fa-users"></i></div>
        <div class="vm-stat-val" id="statSubs">—</div>
        <div class="vm-stat-lbl">Subscribers</div>
    </div>
    <div class="vm-stat c-acc">
        <div class="vm-stat-icon"><i class="fas fa-film"></i></div>
        <div class="vm-stat-val" id="statTotal">—</div>
        <div class="vm-stat-lbl">Total Videos</div>
    </div>
    <div class="vm-stat c-blue">
        <div class="vm-stat-icon"><i class="fas fa-video"></i></div>
        <div class="vm-stat-val" id="statVideos">—</div>
        <div class="vm-stat-lbl">Videos</div>
    </div>
    <div class="vm-stat c-purple">
        <div class="vm-stat-icon"><i class="fas fa-bolt"></i></div>
        <div class="vm-stat-val" id="statShorts">—</div>
        <div class="vm-stat-lbl">Shorts</div>
    </div>
    <div class="vm-stat c-pink">
        <div class="vm-stat-icon"><i class="fas fa-circle" style="font-size:9px"></i></div>
        <div class="vm-stat-val" id="statLive">—</div>
        <div class="vm-stat-lbl">Live</div>
    </div>
    <div class="vm-stat c-orange">
        <div class="vm-stat-icon"><i class="fas fa-list"></i></div>
        <div class="vm-stat-val" id="statPlaylists">—</div>
        <div class="vm-stat-lbl">Playlists</div>
    </div>
    <div class="vm-stat c-green">
        <div class="vm-stat-icon"><i class="fas fa-eye"></i></div>
        <div class="vm-stat-val" id="statActive">—</div>
        <div class="vm-stat-lbl">Active</div>
    </div>
</div>

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

    {{-- ── SIDEBAR ── --}}
    <div class="vm-sidebar">

        {{-- Search --}}
        <div class="vm-sb-sec">
            <div class="vm-sb-search">
                <i class="fas fa-search"></i>
                <input type="text" id="vmSearch" placeholder="Search videos...">
            </div>
        </div>

        {{-- Playlist Filter — FIRST --}}
        <div class="vm-sb-sec">
            <div class="vm-sb-label"><i class="fas fa-list"></i> Playlist</div>
            <div class="vm-sb-filter">
                <select id="filter_playlist">
                    <option value="">All Playlists</option>
                    @foreach ($grouped as $type => $pls)
                        <optgroup label="{{ $plTypeLabels[$type] ?? ucfirst($type) }}">
                            @foreach ($pls as $pl)
                                <option value="{{ $pl->id }}">{{ $pl->name }}</option>
                            @endforeach
                        </optgroup>
                    @endforeach
                </select>
            </div>
        </div>

        {{-- Content Type Tabs --}}
        <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 Content <span class="vm-tab-cnt" id="tc-all">—</span>
            </button>
            <button class="vm-tab" data-tab="videos">
                <span class="vm-tab-ico" style="color:#3b82f6"><i class="fas fa-video"></i></span>
                Videos <span class="vm-tab-cnt" id="tc-videos">—</span>
            </button>
            <button class="vm-tab" data-tab="shorts">
                <span class="vm-tab-ico" style="color:#8b5cf6"><i class="fas fa-bolt"></i></span>
                Shorts <span class="vm-tab-cnt" id="tc-shorts">—</span>
            </button>
            <button class="vm-tab" data-tab="live">
                <span class="vm-tab-ico" style="color:#ef4444"><i class="fas fa-circle" style="font-size:8px"></i></span>
                Live <span class="vm-tab-cnt" id="tc-live">—</span>
            </button>
        </div>

        {{-- Channel — filters based on selected channel --}}
        <div class="vm-sb-sec">
            <div class="vm-sb-label"><i class="fas fa-tv"></i> Channel</div>
            <div class="vm-sb-filter">
                <select id="filter_channel">
                    <option value="">All Channels</option>
                    @foreach($channels as $ch)
                        <option value="{{ $ch->id }}">{{ $ch->name }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        {{-- Category --}}
        <div class="vm-sb-sec">
            <div class="vm-sb-label"><i class="fas fa-tag"></i> Category</div>
            <div class="vm-sb-filter">
                <select id="filter_category">
                    <option value="">All Categories</option>
                    @foreach ($categories as $cat)
                        <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                        @foreach ($cat->children as $child)
                            <option value="{{ $child->id }}">&nbsp;&nbsp;↳ {{ $child->name }}</option>
                        @endforeach
                    @endforeach
                </select>
            </div>
        </div>

        {{-- Status / Date --}}
        <div class="vm-sb-sec">
            <div class="vm-sb-label"><i class="fas fa-filter"></i> More Filters</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>
            <div class="vm-sb-filter">
                <label>Published Date</label>
                <input type="date" id="filter_date">
            </div>
            <button class="vm-sb-reset" id="vmReset">
                <i class="fas fa-times"></i> Reset Filters
            </button>
        </div>

    </div>{{-- end sidebar --}}

    {{-- ── TABLE CARD ── --}}
    <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" class="vm-chk"></th>
                        <th style="width:110px">Thumb</th>
                        <th>Title / Info</th>
                        <th style="width:120px">Channel</th>
                        <th style="width:76px">Type</th>
                        <th style="width:72px">Views</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>{{-- end layout --}}


{{-- ══════════════════════════════════════════
   LIGHTBOX PLAYER
══════════════════════════════════════════ --}}
<div class="vm-lightbox" id="vmLightbox">
    <div class="vm-lightbox-inner">
        <div class="vm-lightbox-video">
            <iframe id="vmPlayer" src="" allowfullscreen allow="autoplay; encrypted-media"></iframe>
        </div>
        <div class="vm-lightbox-bar">
            <div class="vm-lightbox-title" id="vmPlayerTitle">—</div>
            <div class="vm-lightbox-actions">
                <a class="vm-lb-btn vm-lb-yt" id="vmPlayerYt" href="#" target="_blank">
                    <i class="fab fa-youtube"></i> YouTube
                </a>
                <button class="vm-lb-btn vm-lb-close" id="vmLbClose">
                    <i class="fas fa-times"></i> Close
                </button>
            </div>
        </div>
    </div>
</div>


{{-- ══════════════════════════════════════════
   SYNC MODAL (Header button — Sync YouTube)
══════════════════════════════════════════ --}}
<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" style="background:rgba(239,68,68,.1);color:#ef4444">
                        <i class="fab fa-youtube"></i>
                    </span>
                    Sync from YouTube
                </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">Channel <span class="req">*</span></label>
                        <select id="syncChannelId" class="vm-form-control">
                            <option value="">— Select a channel —</option>
                            @foreach ($channels as $ch)
                                <option value="{{ $ch->id }}" data-ytid="{{ $ch->youtube_channel_id }}">
                                    {{ $ch->name }}@if($ch->handle) · @{{ $ch->handle }}@endif
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="vm-form-group">
                        <label class="vm-form-label">Max Pages per Playlist
                            <span style="text-transform:none;letter-spacing:0;font-weight:400">(1 page = 50 videos)</span>
                        </label>
                        <input type="number" id="syncMaxPages" class="vm-form-control" value="20" min="1" max="100">
                    </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="uploads" checked>
                            <span class="ti" style="color:#3b82f6"><i class="fas fa-video"></i></span> Videos (Uploads)
                        </label>
                        <label class="vm-type-chk">
                            <input type="checkbox" name="sync_types[]" value="shorts" checked>
                            <span class="ti" style="color:#8b5cf6"><i class="fas fa-bolt"></i></span> Shorts
                        </label>
                        <label class="vm-type-chk">
                            <input type="checkbox" name="sync_types[]" value="live" checked>
                            <span class="ti" style="color:#ef4444"><i class="fas fa-circle"></i></span> Live Streams
                        </label>
                        <label class="vm-type-chk">
                            <input type="checkbox" name="sync_types[]" value="custom" checked>
                            <span class="ti" style="color:#f59e0b"><i class="fas fa-list"></i></span> Custom Playlists
                        </label>
                    </div>
                </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:var(--acc)" 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 class="vm-log-box" id="syncLog"></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>


{{-- ══════════════════════════════════════════
   CHANNEL MANAGER MODAL
══════════════════════════════════════════ --}}
<div class="modal fade vm-modal" id="channelModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title">
                    <span class="vm-micon" style="background:rgba(59,130,246,.1);color:#3b82f6">
                        <i class="fas fa-tv"></i>
                    </span>
                    Channel Manager
                </h5>
                <button type="button" class="vm-modal-close" data-dismiss="modal"><i class="fas fa-times"></i></button>
            </div>

            {{-- Tab Nav --}}
            <div style="display:flex;border-bottom:1.5px solid var(--line);background:var(--surface);">
                <button class="ch-tab-btn active" data-chtab="list" style="flex:1">
                    <i class="fas fa-list"></i> All Channels
                    <span class="ch-tab-count" id="chTabCount">—</span>
                </button>
                <button class="ch-tab-btn" data-chtab="create" style="flex:1">
                    <i class="fas fa-plus"></i> Add Channel
                </button>
            </div>

            <div class="modal-body" style="padding:0 !important;min-height:420px;">

                {{-- ── TAB: LIST ── --}}
                <div class="ch-tab-pane active" id="chtab-list">
                    <div style="padding:10px 14px;border-bottom:1px solid var(--line);background:var(--surface);">
                        <div style="position:relative;">
                            <i class="fas fa-search" style="position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:11px;pointer-events:none;"></i>
                            <input type="text" id="chSearch" placeholder="Search by name, handle, channel ID..."
                                style="width:100%;height:34px;padding:0 10px 0 30px;border:1.5px solid var(--line);background:var(--panel);color:var(--ink);font-size:12.5px;outline:none;border-radius:0;">
                        </div>
                    </div>
                    <div style="padding:10px 14px;min-height:360px;">
                        <div style="text-align:center;padding:60px 0;color:var(--muted);" id="chListLoader">
                            <div class="vm-spinner" style="margin:0 auto 10px;"></div>
                            <div style="font-size:13px;font-weight:600;">Loading channels...</div>
                        </div>
                        <div id="chListInner" style="display:none;"></div>
                        <div id="chListEmpty" style="display:none;text-align:center;padding:60px 0;color:var(--muted);">
                            <i class="fas fa-tv" style="font-size:36px;opacity:.2;display:block;margin-bottom:10px;"></i>
                            <p style="font-size:14px;font-weight:600;margin:0;">No channels yet.</p>
                            <p style="font-size:12px;margin:6px 0 0;">Add Channel tab থেকে channel যোগ করুন।</p>
                        </div>
                    </div>
                </div>

                {{-- ── TAB: CREATE ── --}}
                <div class="ch-tab-pane" id="chtab-create" style="display:none;">
                    <div style="padding:18px 20px;">

                        {{-- YouTube Sync Box --}}
                        <div class="ch-sync-box">
                            <div class="ch-sync-header">
                                <span class="ch-sync-icon"><i class="fab fa-youtube"></i></span>
                                <div>
                                    <div style="font-size:13px;font-weight:800;color:var(--ink);">YouTube @Handle দিয়ে Sync করুন</div>
                                    <div style="font-size:11px;color:var(--muted);margin-top:1px;">
                                        @Handle দিলে channel info + সকল Videos, Shorts, Playlists, Live একসাথে fetch হবে
                                    </div>
                                </div>
                            </div>

                            {{-- Handle Input --}}
                            <div style="display:flex;gap:8px;align-items:flex-start;">
                                <div style="flex:1;">
                                    <div style="position:relative;">
                                        <span style="position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:15px;font-weight:800;pointer-events:none;line-height:1;">@</span>
                                        <input type="text" id="chSyncInput" placeholder="ChannelHandle"
                                            style="width:100%;height:40px;padding:0 12px 0 26px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font-size:14px;outline:none;border-radius:0;font-weight:600;">
                                    </div>
                                    <div style="font-size:10.5px;color:var(--muted);margin-top:5px;">
                                        <i class="fas fa-info-circle" style="color:var(--acc);"></i>
                                        youtube.com/<strong>@YourChannel</strong> — handle অংশটুকু লিখুন (@ ছাড়া)
                                    </div>
                                </div>
                                <button type="button" id="chSyncFetchBtn" class="vm-btn vm-btn-primary" style="height:40px;padding:0 18px;flex-shrink:0;margin-top:0;">
                                    <i class="fas fa-sync-alt"></i> Fetch & Sync All
                                </button>
                            </div>

                            {{-- Sync Progress (inline) --}}
                            <div id="chSyncProgress" style="display:none;margin-top:12px;">
                                <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;">
                                    <div style="font-size:12.5px;font-weight:700;color:var(--ink);" id="chSyncStatus">Connecting...</div>
                                    <div style="font-size:11.5px;font-weight:800;color:var(--acc);" id="chSyncCountLabel"></div>
                                </div>
                                <div style="height:4px;background:var(--line);overflow:hidden;border-radius:2px;margin-bottom:5px;">
                                    <div id="chSyncFill" style="height:100%;background:var(--acc);transition:width .5s ease;width:0%;"></div>
                                </div>
                                <div style="font-size:11px;color:var(--muted);" id="chSyncSubStatus">Please wait...</div>
                            </div>

                            {{-- Preview after fetch --}}
                            <div id="chSyncPreview" style="display:none;margin-top:12px;padding:12px;border:1.5px solid #10b981;background:rgba(16,185,129,.06);">
                                <div style="display:flex;align-items:center;gap:10px;">
                                    <div style="position:relative;flex-shrink:0;">
                                        <img id="chSyncThumb" src="" alt="" style="width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid #10b981;">
                                        <span style="position:absolute;bottom:-2px;right:-2px;width:18px;height:18px;background:#10b981;border-radius:50%;display:flex;align-items:center;justify-content:center;">
                                            <i class="fas fa-check" style="font-size:8px;color:#fff;"></i>
                                        </span>
                                    </div>
                                    <div style="flex:1;min-width:0;">
                                        <div id="chSyncName" style="font-size:14px;font-weight:800;color:var(--ink);"></div>
                                        <div id="chSyncMeta" style="font-size:11.5px;color:var(--muted);margin-top:2px;"></div>
                                        <div id="chSyncResult" style="font-size:11px;color:#10b981;font-weight:700;margin-top:4px;"></div>
                                    </div>
                                    <button type="button" id="chSyncDoneBtn" class="vm-btn vm-btn-secondary" style="padding:6px 12px;font-size:11.5px;flex-shrink:0;">
                                        <i class="fas fa-list"></i> View Channels
                                    </button>
                                </div>
                            </div>

                            {{-- Manual Add Toggle --}}
                            <div style="margin-top:14px;padding-top:12px;border-top:1px solid var(--line);">
                                <label class="ch-manual-toggle">
                                    <input type="checkbox" id="chManualToggle">
                                    <span><i class="fas fa-keyboard" style="margin-right:5px;font-size:11px;"></i> Manually add channel (handle নেই?)</span>
                                </label>
                            </div>
                        </div>

                        {{-- Manual Form (hidden by default) --}}
                        <div id="chManualForm">
                            <form id="chCreateForm">
                                @csrf
                                <div class="vm-grid-2">
                                    <div class="vm-form-group">
                                        <label class="vm-form-label">Channel Name <span class="req">*</span></label>
                                        <input type="text" name="name" id="chFName" class="vm-form-control" placeholder="e.g. Channel S Online" required>
                                    </div>
                                    <div class="vm-form-group">
                                        <label class="vm-form-label">YouTube Channel ID <span class="req">*</span></label>
                                        <input type="text" name="youtube_channel_id" id="chFYtId" class="vm-form-control" placeholder="UCxxxxxxxxxxxxxxxxxxxxxx" required>
                                    </div>
                                    <div class="vm-form-group">
                                        <label class="vm-form-label">Handle</label>
                                        <div style="position:relative;">
                                            <span style="position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:13px;font-weight:700;pointer-events:none;">@</span>
                                            <input type="text" name="handle" id="chFHandle" class="vm-form-control" placeholder="ChannelHandle" style="padding-left:24px;">
                                        </div>
                                    </div>
                                    <div class="vm-form-group">
                                        <label class="vm-form-label">Subscribers</label>
                                        <input type="number" name="subscribers" id="chFSubs" class="vm-form-control" placeholder="0" min="0">
                                    </div>
                                    <div class="vm-form-group" style="grid-column:1/-1;">
                                        <label class="vm-form-label">Thumbnail URL</label>
                                        <div style="display:flex;gap:8px;align-items:center;">
                                            <input type="text" name="thumbnail" id="chFThumb" class="vm-form-control" placeholder="https://...">
                                            <img id="chFThumbPrev" src="" alt="" style="width:38px;height:38px;object-fit:cover;border-radius:50%;border:1.5px solid var(--line);display:none;flex-shrink:0;">
                                        </div>
                                    </div>
                                    <div class="vm-form-group" style="grid-column:1/-1;">
                                        <label class="vm-form-label">Description</label>
                                        <textarea name="description" id="chFDesc" class="vm-form-control" rows="2" placeholder="Optional..."></textarea>
                                    </div>
                                </div>
                            </form>
                        </div>

                    </div>
                </div>

                {{-- ── TAB: EDIT ── --}}
                <div class="ch-tab-pane" id="chtab-edit" style="display:none;">
                    <div style="padding:18px 20px;">
                        <div style="display:flex;align-items:center;gap:10px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line);">
                            <div style="position:relative;flex-shrink:0;">
                                <img id="chEditThumb" src="" style="width:44px;height:44px;object-fit:cover;border-radius:50%;border:2px solid var(--acc);display:none;">
                                <div id="chEditAvatar" style="width:44px;height:44px;background:var(--acc);color:#fff;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:900;border-radius:50%;"></div>
                            </div>
                            <div style="flex:1;min-width:0;">
                                <div id="chEditNameLabel" style="font-size:14px;font-weight:800;color:var(--ink);"></div>
                                <div id="chEditHandleLabel" style="font-size:12px;color:var(--muted);"></div>
                            </div>
                            <button type="button" id="chResyncBtn" class="vm-btn vm-btn-secondary" style="padding:5px 12px;font-size:11.5px;flex-shrink:0;">
                                <i class="fab fa-youtube" style="color:#ef4444;"></i> Re-sync Info
                            </button>
                            <button type="button" id="chEditBack" class="vm-btn vm-btn-secondary" style="padding:5px 12px;font-size:11px;flex-shrink:0;">
                                <i class="fas fa-arrow-left"></i> Back
                            </button>
                        </div>
                        <form id="chEditForm">
                            @csrf
                            <input type="hidden" id="chEditId">
                            <div class="vm-grid-2">
                                <div class="vm-form-group">
                                    <label class="vm-form-label">Channel Name <span class="req">*</span></label>
                                    <input type="text" name="name" id="chEName" class="vm-form-control" required>
                                </div>
                                <div class="vm-form-group">
                                    <label class="vm-form-label">YouTube Channel ID</label>
                                    <input type="text" name="youtube_channel_id" id="chEYtId" class="vm-form-control">
                                </div>
                                <div class="vm-form-group">
                                    <label class="vm-form-label">Handle</label>
                                    <div style="position:relative;">
                                        <span style="position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:13px;font-weight:700;pointer-events:none;">@</span>
                                        <input type="text" name="handle" id="chEHandle" class="vm-form-control" style="padding-left:24px;">
                                    </div>
                                </div>
                                <div class="vm-form-group">
                                    <label class="vm-form-label">Subscribers</label>
                                    <input type="number" name="subscribers" id="chESubs" class="vm-form-control" min="0">
                                </div>
                                <div class="vm-form-group" style="grid-column:1/-1;">
                                    <label class="vm-form-label">Thumbnail URL</label>
                                    <input type="text" name="thumbnail" id="chEThumbUrl" class="vm-form-control" placeholder="https://...">
                                </div>
                                <div class="vm-form-group" style="grid-column:1/-1;">
                                    <label class="vm-form-label">Description</label>
                                    <textarea name="description" id="chEDesc" class="vm-form-control" rows="2"></textarea>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

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

            <div class="modal-footer">
                <button type="button" class="vm-btn vm-btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="vm-btn vm-btn-primary" id="chSaveBtn" style="display:none;">
                    <i class="fas fa-save"></i> Save Channel
                </button>
                <button type="button" class="vm-btn vm-btn-primary" id="chUpdateBtn" style="display:none;">
                    <i class="fas fa-save"></i> Update Channel
                </button>
            </div>

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


{{-- ══════════════════════════════════════════
   CREATE VIDEO MODAL
══════════════════════════════════════════ --}}
<div class="modal fade vm-modal" id="createModal" tabindex="-1">
    <div class="modal-dialog modal-md">
        <form action="{{ route('video.store') }}" method="POST" enctype="multipart/form-data" class="modal-content">
            @csrf
            <div class="modal-header">
                <h5 class="modal-title">
                    <span class="vm-micon"><i class="fas fa-plus"></i></span> Add Video 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">YouTube Video ID <span class="req">*</span></label>
                    <input type="text" name="youtube_video_id" class="vm-form-control" placeholder="dQw4w9WgXcQ" required>
                </div>
                <div class="vm-form-group">
                    <label class="vm-form-label">Title <span class="req">*</span></label>
                    <input type="text" name="title" class="vm-form-control" placeholder="Video title" required>
                </div>
                <div class="vm-grid-2">
                    <div class="vm-form-group">
                        <label class="vm-form-label">Channel <span class="req">*</span></label>
                        <select name="channel_id" class="vm-form-control" required>
                            <option value="">— Select —</option>
                            @foreach ($channels as $ch)
                                <option value="{{ $ch->id }}">{{ $ch->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="vm-form-group">
                        <label class="vm-form-label">Playlist</label>
                        <select name="playlist_id" class="vm-form-control">
                            <option value="">— None —</option>
                            @foreach ($grouped as $type => $pls)
                                <optgroup label="{{ $plTypeLabels[$type] ?? ucfirst($type) }}">
                                    @foreach ($pls as $pl)
                                        <option value="{{ $pl->id }}">{{ $pl->name }}</option>
                                    @endforeach
                                </optgroup>
                            @endforeach
                        </select>
                    </div>
                    <div class="vm-form-group">
                        <label class="vm-form-label">Type</label>
                        <select name="type" class="vm-form-control">
                            <option value="video">Video</option>
                            <option value="live">Live</option>
                            <option value="short">Short</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" style="grid-column:1/-1">
                        <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">Description</label>
                    <textarea name="description" class="vm-form-control" rows="3" placeholder="Optional..."></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 Video</button>
            </div>
        </form>
    </div>
</div>


{{-- ══════════════════════════════════════════
   EDIT VIDEO 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 Video
                </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')
                    <input type="hidden" id="editId">
                    <div class="vm-form-group">
                        <label class="vm-form-label">Title</label>
                        <input type="text" name="title" id="eTitle" class="vm-form-control">
                    </div>
                    <div class="vm-grid-2">
                        <div class="vm-form-group">
                            <label class="vm-form-label">Channel</label>
                            <select name="channel_id" id="eChannel" class="vm-form-control">
                                @foreach ($channels as $ch)
                                    <option value="{{ $ch->id }}">{{ $ch->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="vm-form-group">
                            <label class="vm-form-label">Playlist</label>
                            <select name="playlist_id" id="ePlaylist" class="vm-form-control">
                                <option value="">— None —</option>
                                @foreach ($grouped as $type => $pls)
                                    <optgroup label="{{ $plTypeLabels[$type] ?? ucfirst($type) }}">
                                        @foreach ($pls as $pl)
                                            <option value="{{ $pl->id }}">{{ $pl->name }}</option>
                                        @endforeach
                                    </optgroup>
                                @endforeach
                            </select>
                        </div>
                        <div class="vm-form-group">
                            <label class="vm-form-label">Type</label>
                            <select name="type" id="eType" class="vm-form-control">
                                <option value="video">Video</option>
                                <option value="live">Live</option>
                                <option value="short">Short</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" style="grid-column:1/-1">
                            <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">Description</label>
                        <textarea name="description" id="eDesc" class="vm-form-control" rows="3"></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>


{{-- ══════════════════════════════════════════
   DOWNLOAD MODAL
══════════════════════════════════════════ --}}
<div class="modal fade vm-modal" id="downloadModal" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <span class="vm-micon" style="background:rgba(16,185,129,.1);color:#10b981">
                        <i class="fas fa-download"></i>
                    </span>
                    Download Video
                </h5>
                <button type="button" class="vm-modal-close" data-dismiss="modal"><i class="fas fa-times"></i></button>
            </div>
            <div class="modal-body">
                <div style="display:flex;align-items:center;gap:10px;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--line);">
                    <img id="dlThumb" src="" alt="" style="width:80px;height:50px;object-fit:cover;flex-shrink:0;background:var(--surface);">
                    <div style="min-width:0;">
                        <div id="dlTitle" style="font-size:12.5px;font-weight:700;color:var(--ink);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.4;margin-bottom:4px;"></div>
                        <a id="dlYtLink" href="#" target="_blank" style="font-size:11px;color:#ef4444;text-decoration:none;display:inline-flex;align-items:center;gap:4px;">
                            <i class="fab fa-youtube"></i> YouTube
                        </a>
                    </div>
                </div>
                <div style="font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);margin-bottom:10px;">Choose Download Service</div>
                <div style="display:flex;flex-direction:column;gap:7px;" id="dlServiceList"></div>
                <div style="margin-top:12px;padding:9px 11px;background:var(--surface);border:1px solid var(--line);">
                    <div style="font-size:10.5px;color:var(--muted);line-height:1.6;">
                        <i class="fas fa-info-circle" style="color:var(--acc);margin-right:4px;"></i>
                        একটি service এ click করলে নতুন tab এ খুলবে।
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="vm-btn vm-btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>


{{-- ── Action Menu ── --}}
<div class="vm-action-menu" id="vmActionMenu">
    <button class="vm-menu-item" id="amPlay"><i class="fas fa-play" style="color:var(--acc)"></i> Play in Lightbox</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="amYt" href="#" target="_blank"><i class="fab fa-youtube" style="color:#ef4444"></i> Open on YouTube</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 dl-item" id="amDownload"><i class="fas fa-download" style="color:#10b981"></i> Download</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>
/* ══════════════════════════════════════════════════════════════
   VIDEO MANAGER — Main JS
══════════════════════════════════════════════════════════════ */
$(function () {

    var ROUTE      = '{{ route("video.index") }}';
    var SYNC_ROUTE = '{{ route("video.sync") }}';
    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.channel  = $('#filter_channel').val();
                d.playlist = $('#filter_playlist').val();
                d.category = $('#filter_category').val();
                d.status   = $('#filter_status').val();
                d.date     = $('#filter_date').val();
                d.perPage  = $('#perPage').val();
            },
            dataSrc: function (json) {
                if (json.stats) {
                    var s = json.stats, fmt = vmFmt;
                    $('#statTotal').text(fmt(s.total||0));
                    $('#statVideos').text(fmt(s.videos||0));
                    $('#statShorts').text(fmt(s.shorts||0));
                    $('#statLive').text(fmt(s.live||0));
                    $('#statPlaylists').text(fmt(s.playlists||0));
                    $('#statActive').text(fmt(s.active||0));
                    $('#statSubs').text(fmt(s.subscribers||0));
                    $('#tc-all').text(s.total||'0');
                    $('#tc-videos').text(s.videos||'0');
                    $('#tc-shorts').text(s.shorts||'0');
                    $('#tc-live').text(s.live||'0');
                }
                return json.data;
            }
        },
        columns: [
            { data:'checkbox',     orderable:false, searchable:false, width:'34px' },
            { data:'thumbnail',    orderable:false, searchable:false, width:'110px' },
            { data:'title',        orderable:true },
            { data:'channel',      orderable:false, searchable:false, width:'120px' },
            { data:'type',         orderable:true,  searchable:false, width:'76px' },
            { data:'views',        orderable:true,  searchable:false, width:'72px' },
            { 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-youtube"></i><p>No videos found. Sync from YouTube to get started.</p></div>',
            zeroRecords: '<div class="vm-empty"><i class="fas fa-search"></i><p>No matching videos 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();
    });

    /* ════════════════════════════════
       SIDEBAR FILTERS
       — Playlist filter changes also update the playlist filter dynamically
       — Channel filter loads only playlists of that channel
    ════════════════════════════════ */
    var ft;
    $('#vmSearch').on('input', function () {
        clearTimeout(ft);
        ft = setTimeout(function () { table.ajax.reload(); }, 350);
    });

    $('#filter_channel').on('change', function () {
        loadSidebarPlaylists($(this).val());
        table.ajax.reload();
    });

    $('#filter_playlist,#filter_category,#filter_status,#filter_date').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_channel,#filter_playlist,#filter_category,#filter_status,#filter_date').val('');
        $('#vmSearch').val('');
        activeTab = 'all';
        $('.vm-tab').removeClass('active');
        $('[data-tab="all"]').addClass('active');
        loadSidebarPlaylists('');
        table.ajax.reload();
    });

    $('#vmRefresh').on('click', function () {
        var $i = $(this).find('i').addClass('fa-spin');
        table.ajax.reload(function () { $i.removeClass('fa-spin'); });
    });

    /* Load playlists for selected channel in sidebar */
    function loadSidebarPlaylists(channelId) {
        var url = ROUTE + '/playlists-for-channel';
        $.getJSON(url, { channel_id: channelId }, function (res) {
            var opts = '<option value="">All Playlists</option>';
            var grouped = res.grouped || {};
            var labels = { uploads:'📹 Uploads', shorts:'⚡ Shorts', live:'🔴 Live', custom:'📋 Custom' };
            $.each(grouped, function (type, pls) {
                opts += '<optgroup label="' + (labels[type]||type) + '">';
                $.each(pls, function (i, pl) {
                    opts += '<option value="' + pl.id + '">' + vmEsc(pl.name) + '</option>';
                });
                opts += '</optgroup>';
            });
            $('#filter_playlist').html(opts);
        }).fail(function () {
            // silently skip if route doesn't exist yet
        });
    }

    /* ════════════════════════════════
       PAGINATION
    ════════════════════════════════ */
    function renderPagination() {
        var api = table.page.info();
        var page = api.page, pages = api.pages;
        var total = api.recordsTotal, filtered = api.recordsDisplay;
        var start = api.start + 1, end = api.end;

        $('#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', '.vm-status,.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!');
        });
    });

    /* ════════════════════════════════
       LIGHTBOX PLAYER
    ════════════════════════════════ */
    var $lb = $('#vmLightbox');
    function openLightbox(ytId, title) {
        $('#vmPlayer').attr('src', 'https://www.youtube.com/embed/' + ytId + '?autoplay=1&rel=0');
        $('#vmPlayerTitle').text(title || 'Video');
        $('#vmPlayerYt').attr('href', 'https://www.youtube.com/watch?v=' + ytId);
        $lb.addClass('active');
        $('body').css('overflow', 'hidden');
    }
    function closeLightbox() {
        $lb.removeClass('active');
        setTimeout(function () { $('#vmPlayer').attr('src',''); }, 300);
        $('body').css('overflow', '');
    }
    $('#vmLbClose').on('click', closeLightbox);
    $lb.on('click', function (e) { if ($(e.target).is($lb)) closeLightbox(); });
    $(document).on('keydown', function (e) { if (e.key==='Escape') closeLightbox(); });
    $(document).on('click', '.vm-thumb-wrap, .vm-title-text', function () {
        var ytId = $(this).data('ytid'), title = $(this).data('title');
        if (ytId) openLightbox(ytId, title);
    });

    /* ════════════════════════════════
       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'), ytId = $btn.data('ytid'), title = $btn.data('title');
        $('#amPlay').data('ytid', ytId).data('title', title);
        $('#amEdit').data('id', id);
        $('#amYt').attr('href', 'https://www.youtube.com/watch?v=' + ytId);
        $('#amCopy,#amDelete,#amDownload').data('id', id).data('ytid', ytId);
        $menu.appendTo('body');
        var rect = this.getBoundingClientRect();
        var left = Math.max(8, rect.right + window.scrollX - 178);
        $menu.css({ top:(rect.bottom+window.scrollY+4)+'px', left:left+'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);
    $('#amPlay').on('click', function () { closeMenu(); openLightbox($(this).data('ytid'), $(this).data('title')); });

    /* ════════════════════════════════
       EDIT MODAL
    ════════════════════════════════ */
    $('#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) {
            $('#editId').val(v.id); $('#eTitle').val(v.title||''); $('#eDesc').val(v.description||'');
            $('#eChannel').val(v.channel_id||''); $('#ePlaylist').val(v.playlist_id||'');
            $('#eType').val(v.type||'video'); $('#eStatus').val(v.is_active!==undefined?v.is_active:1);
            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 video!'); $('#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('Video updated!'); },
            error: function (xhr) { toastr.error(xhr.responseJSON?.message||'Update failed!'); }
        });
    });

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

    /* ════════════════════════════════
       COPY LINK
    ════════════════════════════════ */
    $('#amCopy').on('click', function () {
        closeMenu();
        var link = 'https://www.youtube.com/watch?v=' + $(this).data('ytid');
        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!');
    });

    /* ════════════════════════════════
       DOWNLOAD MODAL
    ════════════════════════════════ */
    var DL_SERVICES = [
        { name:'cobalt.tools', badge:'Recommended', badgeCls:'', icon:'fas fa-bolt', color:'#6366f1',
          url: function(id){ return 'https://cobalt.tools/#'+id; }, note:'Free · No ads · MP4 / MP3' },
        { name:'y2mate.com', badge:'Popular', badgeCls:'warn', icon:'fas fa-download', color:'#f59e0b',
          url: function(id){ return 'https://www.y2mate.com/youtube/'+id; }, note:'MP4 & MP3 · Multiple quality' },
        { name:'yt1s.com', badge:'Fast', badgeCls:'warn', icon:'fas fa-play-circle', color:'#ef4444',
          url: function(id){ return 'https://yt1s.com/youtube-to-mp4?q=https://www.youtube.com/watch?v='+id; }, note:'MP4 & MP3 · Simple UI' },
        { name:'savefrom.net', badge:'', badgeCls:'', icon:'fas fa-save', color:'#10b981',
          url: function(id){ return 'https://en.savefrom.net/#url=https://www.youtube.com/watch?v='+id; }, note:'Direct MP4 link' },
    ];

    $('#amDownload').on('click', function () {
        closeMenu();
        var ytId = $(this).data('ytid');
        var title = $('#amPlay').data('title') || '';
        var thumb = $('table.vm-table tbody .vm-thumb[data-ytid="'+ytId+'"]').attr('src') || '';
        var html = '';
        $.each(DL_SERVICES, function (i, svc) {
            html += '<a href="'+svc.url(ytId)+'" target="_blank" rel="noopener" class="dl-service-btn">'
                + '<span class="dl-svc-icon" style="color:'+svc.color+'"><i class="'+svc.icon+'"></i></span>'
                + '<span class="dl-svc-name">'+svc.name
                + '<span style="display:block;font-size:11px;font-weight:400;color:var(--muted);margin-top:1px;">'+svc.note+'</span></span>'
                + (svc.badge ? '<span class="dl-svc-badge '+svc.badgeCls+'">'+svc.badge+'</span>' : '')
                + '</a>';
        });
        $('#dlTitle').text(title); $('#dlThumb').attr('src',thumb);
        $('#dlYtLink').attr('href','https://www.youtube.com/watch?v='+ytId);
        $('#dlServiceList').html(html);
        $('#downloadModal').modal('show');
    });

    /* ════════════════════════════════
       BULK ACTIONS
    ════════════════════════════════ */
    $('#vmSelectAll').on('change', function () {
        $('#vmTable tbody .vm-chk,.nl-check').prop('checked', this.checked);
        updateBulk();
    });
    $(document).on('change', '.vm-chk,.nl-check', function () {
        if (!this.checked) $('#vmSelectAll').prop('checked', false);
        updateBulk();
    });
    function getSelected() { return $('.vm-chk:checked,.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 () { $('.vm-chk,.nl-check,#vmSelectAll').prop('checked',false); updateBulk(); });
    $('#vmBulkDel').on('click', function () {
        var ids=getSelected(); if(!ids.length||!confirm('Delete '+ids.length+' video(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 (Header button)
    ════════════════════════════════ */
    $('#startSyncBtn').on('click', function () {
        var channelId = $('#syncChannelId').val();
        if (!channelId) { toastr.warning('Please select a channel!'); 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).prop('disabled',true).html('<i class="fas fa-sync-alt fa-spin"></i> Syncing...');
        $('#syncProgress').show();
        $('#syncFill').css({width:'8%',background:'var(--acc)'});
        $('#syncStatus').text('Connecting to YouTube API...');
        $('#syncSub').text('Fetching channel & playlist info...');
        $('#syncCount').text('');
        var t1=setTimeout(function(){ $('#syncFill').css('width','30%'); $('#syncStatus').text('Fetching playlists...'); },1500);
        var t2=setTimeout(function(){ $('#syncFill').css('width','55%'); $('#syncStatus').text('Downloading videos...'); $('#syncSub').text('Syncing: '+types.join(', ')); },4000);
        $.ajax({
            url: SYNC_ROUTE, type:'POST',
            data:{ _token:CSRF, channel_id:channelId, types:types, max_pages:$('#syncMaxPages').val() },
            timeout:300000,
            success: function (res) {
                clearTimeout(t1); clearTimeout(t2);
                $('#syncFill').css('width','100%');
                $('#syncStatus').text('✓ Sync complete!');
                $('#syncCount').text(res.synced+' videos');
                $('#syncSub').text(res.success);
                if(res.log&&res.log.length) $('#syncLog').show().text(res.log.join('\n'));
                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:'var(--acc)'});
    });

    /* ── Shared helpers ── */
    function vmFmt(n) {
        n = parseInt(n)||0;
        if(n>=1000000) return (n/1000000).toFixed(1)+'M';
        if(n>=1000)    return (n/1000).toFixed(1)+'K';
        return n.toString();
    }
    function vmEsc(s) { return $('<div>').text(s||'').html(); }
    window.vmFmt = vmFmt;
    window.vmEsc = vmEsc;

});
</script>


<script>
/* ══════════════════════════════════════════════════════════════
   CHANNEL MANAGER JS
══════════════════════════════════════════════════════════════ */
$(function () {

    var CH_ROUTE     = '{{ route("youtube.channel.index") }}';
    var CH_SYNC_INFO = '{{ route("youtube.channel.sync") }}';  // info only
    var CH_SYNC_FULL = '{{ route("video.sync") }}';            // full content sync
    var CSRF         = '{{ csrf_token() }}';
    var COLORS       = ['#5a67d8','#10b981','#ef4444','#f59e0b','#8b5cf6','#ec4899','#3b82f6'];

    /* ════════════════
       TAB SWITCHING
    ════════════════ */
    $(document).on('click', '.ch-tab-btn', function () { switchChTab($(this).data('chtab')); });
    function switchChTab(tab) {
        $('.ch-tab-btn').removeClass('active');
        $('[data-chtab="'+tab+'"]').addClass('active');
        $('.ch-tab-pane').hide();
        $('#chtab-'+tab).show();
        $('#chSaveBtn').toggle(tab==='create');
        $('#chUpdateBtn').toggle(tab==='edit');
        if (tab==='list') loadChannels();
    }
    $('#channelModal').on('show.bs.modal', function () { switchChTab('list'); });

    /* ════════════════
       CHANNEL LIST
    ════════════════ */
    var chSearchTimer;
    function loadChannels() {
        $('#chListLoader').show();
        $('#chListInner,#chListEmpty').hide();
        $.getJSON(CH_ROUTE, { search:$('#chSearch').val()||'', json:1 }, function (res) {
            $('#chListLoader').hide();
            var list = res.data||res;
            $('#chTabCount').text(list.length);
            if (!list.length) { $('#chListEmpty').show(); return; }
            var html = '';
            $.each(list, function (i, ch) {
                var color   = COLORS[i % COLORS.length];
                var initial = (ch.name||'C').charAt(0).toUpperCase();
                html += '<div class="ch-card" data-id="'+ch.id+'">';
                html += '<div class="ch-card-av" style="background:'+color+';">';
                if (ch.thumbnail) html += '<img src="'+vmEsc(ch.thumbnail)+'" onerror="this.remove()">';
                html += initial+'</div>';
                html += '<div class="ch-card-info">';
                html += '<div class="ch-card-name">'+vmEsc(ch.name)+'</div>';
                html += '<div class="ch-card-meta">';
                if (ch.handle)             html += '<span class="ch-card-handle">@'+vmEsc(ch.handle)+'</span>';
                if (ch.subscribers)        html += '<span class="ch-subs-badge"><i class="fas fa-users" style="font-size:9px"></i> '+vmFmt(ch.subscribers)+'</span>';
                if (ch.videos_count!=null) html += '<span class="ch-vid-badge"><i class="fas fa-film" style="font-size:9px"></i> '+ch.videos_count+' videos</span>';
                if (ch.youtube_channel_id) html += '<span class="ch-ytid-badge" title="'+vmEsc(ch.youtube_channel_id)+'">'+vmEsc(ch.youtube_channel_id)+'</span>';
                html += '</div></div>';
                html += '<div class="ch-card-actions">';
                if (ch.youtube_channel_id) {
                    html += '<a href="https://www.youtube.com/channel/'+ch.youtube_channel_id+'" target="_blank" class="ch-act-btn yt" title="YouTube এ দেখুন"><i class="fab fa-youtube"></i></a>';
                    html += '<button class="ch-act-btn full-sync ch-fullsync-btn" data-id="'+ch.id+'" data-name="'+vmEsc(ch.name)+'" data-ytid="'+vmEsc(ch.youtube_channel_id)+'" data-handle="'+vmEsc(ch.handle||'')+'" data-thumb="'+vmEsc(ch.thumbnail||'')+'" data-subs="'+(ch.subscribers||0)+'" title="Full Sync — Videos, Playlists, Shorts, Live সব sync করো"><i class="fas fa-sync-alt"></i></button>';
                    html += '<button class="ch-act-btn info-sync ch-infosync-btn" data-id="'+ch.id+'" data-ytid="'+vmEsc(ch.youtube_channel_id)+'" title="Info Sync — Subscribers, thumbnail update করো"><i class="fas fa-info-circle"></i></button>';
                }
                html += '<button class="ch-act-btn ch-edit-btn" data-id="'+ch.id+'" title="Edit"><i class="fas fa-edit"></i></button>';
                html += '<button class="ch-act-btn danger ch-del-btn" data-id="'+ch.id+'" data-name="'+vmEsc(ch.name)+'" title="Delete"><i class="fas fa-trash"></i></button>';
                html += '</div></div>';
            });
            $('#chListInner').html(html).show();
        }).fail(function () { $('#chListLoader').hide(); $('#chListEmpty').show(); });
    }
    $('#chSearch').on('input', function () {
        clearTimeout(chSearchTimer);
        chSearchTimer = setTimeout(loadChannels, 300);
    });

    /* ════════════════════════════════════════════════════
       FULL SYNC from channel list card
       — Sends @handle to existing video.sync route
       — Shows inline progress inside channel modal
    ════════════════════════════════════════════════════ */
    $(document).on('click', '.ch-fullsync-btn', function () {
        var $btn   = $(this);
        var id     = $btn.data('id');
        var handle = $btn.data('handle');
        var name   = $btn.data('name');

        if (!handle) { toastr.warning('"'+name+'" এর @handle নেই! Edit করে handle যোগ করুন।'); return; }
        if (!confirm('"'+name+'" এর সকল Videos, Shorts, Playlists, Live sync করবেন?')) return;

        $btn.prop('disabled',true).html('<i class="fas fa-sync-alt ch-spin"></i>');

        // Show inline progress on the card
        var $card = $btn.closest('.ch-card');
        if (!$card.find('.ch-card-prog').length) {
            $card.after('<div class="ch-card-prog" style="padding:8px 12px;background:var(--surface);border:1px dashed var(--acc);border-top:none;margin-bottom:8px;">'
                +'<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:3px;">'
                +'<span style="font-size:11.5px;font-weight:700;color:var(--ink);" class="prog-status">Connecting...</span>'
                +'<span style="font-size:11px;font-weight:800;color:var(--acc);" class="prog-count"></span></div>'
                +'<div style="height:3px;background:var(--line);overflow:hidden;">'
                +'<div class="prog-fill" style="height:100%;background:var(--acc);transition:width .5s ease;width:0%;"></div></div>'
                +'<div style="font-size:10.5px;color:var(--muted);margin-top:3px;" class="prog-sub">Syncing all content...</div>'
                +'</div>');
        }
        var $prog = $card.next('.ch-card-prog');
        $prog.show();
        $prog.find('.prog-fill').css('width','8%');
        var t1 = setTimeout(function(){ $prog.find('.prog-fill').css('width','30%'); $prog.find('.prog-status').text('Fetching playlists...'); }, 1500);
        var t2 = setTimeout(function(){ $prog.find('.prog-fill').css('width','55%'); $prog.find('.prog-status').text('Downloading videos...'); }, 4000);
        var t3 = setTimeout(function(){ $prog.find('.prog-fill').css('width','75%'); $prog.find('.prog-status').text('Saving to database...'); }, 10000);

        $.ajax({
            url: CH_SYNC_FULL, type:'POST', timeout:600000,
            data:{ _token:CSRF, channel_id:id, types:['uploads','shorts','live','custom'], max_pages:20 },
            success: function (res) {
                clearTimeout(t1); clearTimeout(t2); clearTimeout(t3);
                $prog.find('.prog-fill').css({width:'100%',background:'#10b981'});
                $prog.find('.prog-status').text('✓ Done!');
                $prog.find('.prog-count').text(res.synced+' videos');
                $prog.find('.prog-sub').text(res.success||'Sync complete!');
                toastr.success('"'+name+'" — '+res.synced+' videos synced!');
                if (typeof table !== 'undefined') table.ajax.reload(null,false);
                loadChannels();
                vmRefreshDropdowns();
                setTimeout(function(){ $prog.slideUp(function(){ $prog.remove(); }); }, 4000);
            },
            error: function (xhr) {
                clearTimeout(t1); clearTimeout(t2); clearTimeout(t3);
                var msg = xhr.responseJSON?.error||'Sync failed!';
                $prog.find('.prog-fill').css({width:'100%',background:'#ef4444'});
                $prog.find('.prog-status').text('✗ Failed');
                $prog.find('.prog-sub').text(msg);
                toastr.error(msg);
            },
            complete: function () {
                $btn.prop('disabled',false).html('<i class="fas fa-sync-alt"></i>');
            }
        });
    });

    /* ════════════════
       INFO SYNC (ⓘ button)
    ════════════════ */
    $(document).on('click', '.ch-infosync-btn', function () {
        var $btn = $(this), id=$(this).data('id'), ytId=$(this).data('ytid');
        if (!ytId) return toastr.warning('YouTube Channel ID নেই!');
        $btn.prop('disabled',true).find('i').addClass('ch-spin');
        $.post(CH_SYNC_INFO, { _token:CSRF, youtube_channel_id:ytId, channel_id:id }, function (res) {
            toastr.success(res.success||'Channel info updated!');
            loadChannels();
            vmRefreshDropdowns();
        }).fail(function (xhr) {
            toastr.error(xhr.responseJSON?.error||'Info sync failed!');
        }).always(function () {
            $btn.prop('disabled',false).find('i').removeClass('ch-spin');
        });
    });

    /* ════════════════════════════════════════════════════
       ADD CHANNEL — @Handle Fetch & Full Sync
       Fetch channel info + immediately sync all content
    ════════════════════════════════════════════════════ */
    $('#chSyncFetchBtn').on('click', function () {
        var handle = $('#chSyncInput').val().trim().replace(/^@/, '');
        if (!handle) return toastr.warning('@Handle লিখুন!');

        var $btn = $(this).prop('disabled',true).html('<i class="fas fa-sync-alt fa-spin"></i> Syncing...');
        $('#chSyncPreview').hide();
        $('#chSyncProgress').show();
        $('#chSyncFill').css({width:'8%',background:'var(--acc)'});
        $('#chSyncStatus').text('Connecting to YouTube API...');
        $('#chSyncSubStatus').text('Fetching @'+handle+' channel info...');
        $('#chSyncCountLabel').text('');

        var t1 = setTimeout(function(){ $('#chSyncFill').css('width','25%'); $('#chSyncStatus').text('Channel found! Fetching playlists...'); }, 2000);
        var t2 = setTimeout(function(){ $('#chSyncFill').css('width','50%'); $('#chSyncStatus').text('Downloading videos...'); $('#chSyncSubStatus').text('Syncing Videos, Shorts, Playlists, Live...'); }, 5000);
        var t3 = setTimeout(function(){ $('#chSyncFill').css('width','75%'); $('#chSyncStatus').text('Saving to database...'); }, 12000);

        // Step 1: Create/fetch channel by handle
        $.post(CH_SYNC_INFO, { _token:CSRF, youtube_channel_id:'@'+handle }, function (res) {
            var ch = res.channel;
            var chDbId = ch.id || res.id;

            $('#chSyncFill').css('width','30%');
            $('#chSyncStatus').text('Channel found! Syncing content...');
            clearTimeout(t1);

            // Step 2: Full content sync
            $.ajax({
                url: CH_SYNC_FULL, type:'POST', timeout:600000,
                data:{ _token:CSRF, channel_id:chDbId, types:['uploads','shorts','live','custom'], max_pages:20 },
                success: function (res2) {
                    clearTimeout(t2); clearTimeout(t3);
                    $('#chSyncFill').css({width:'100%',background:'#10b981'});
                    $('#chSyncStatus').text('✓ All done!');
                    $('#chSyncCountLabel').text(res2.synced+' videos');
                    $('#chSyncSubStatus').text('Videos, Shorts, Playlists, Live সব sync হয়ে গেছে!');

                    $('#chSyncThumb').attr('src', ch.thumbnail||'');
                    $('#chSyncName').text(ch.name||'');
                    var meta = [];
                    if (ch.handle) meta.push('@'+ch.handle);
                    if (ch.subscribers) meta.push(vmFmt(ch.subscribers)+' subscribers');
                    if (ch.youtube_channel_id) meta.push(ch.youtube_channel_id);
                    $('#chSyncMeta').text(meta.join('  ·  '));
                    $('#chSyncResult').text(res2.synced+' videos, shorts, playlists synced ✓');
                    $('#chSyncProgress').hide();
                    $('#chSyncPreview').show();

                    toastr.success('"'+ch.name+'" — '+res2.synced+' videos synced!');
                    loadChannels();
                    vmRefreshDropdowns();
                    if (typeof table !== 'undefined') table.ajax.reload(null,false);
                },
                error: function (xhr2) {
                    clearTimeout(t2); clearTimeout(t3);
                    var msg2 = xhr2.responseJSON?.error||'Content sync failed!';
                    $('#chSyncFill').css({width:'100%',background:'#ef4444'});
                    $('#chSyncStatus').text('✗ Content sync failed');
                    $('#chSyncSubStatus').text(msg2);
                    toastr.error(msg2);
                }
            });
        }).fail(function (xhr) {
            clearTimeout(t1); clearTimeout(t2); clearTimeout(t3);
            var msg = xhr.responseJSON?.error||'Channel not found!';
            $('#chSyncFill').css({width:'100%',background:'#ef4444'});
            $('#chSyncStatus').text('✗ Failed');
            $('#chSyncSubStatus').text(msg);
            toastr.error(msg);
        }).always(function () {
            $btn.prop('disabled',false).html('<i class="fas fa-sync-alt"></i> Fetch & Sync All');
        });
    });
    $('#chSyncInput').on('keydown', function (e) { if(e.key==='Enter') $('#chSyncFetchBtn').trigger('click'); });
    $('#chSyncDoneBtn').on('click', function () { switchChTab('list'); });

    /* ════════════════
       MANUAL TOGGLE
    ════════════════ */
    $('#chManualToggle').on('change', function () {
        $('#chManualForm').slideToggle(200);
    });
    $('#chFThumb').on('input', function () {
        var v=$(this).val();
        v ? $('#chFThumbPrev').attr('src',v).show() : $('#chFThumbPrev').hide();
    });

    /* ════════════════
       MANUAL SAVE
    ════════════════ */
    $('#chSaveBtn').on('click', function () {
        var data = {};
        $('#chCreateForm').serializeArray().forEach(function(f){ data[f.name]=f.value; });
        data._token = CSRF;
        if (!data.name||!data.youtube_channel_id) return toastr.warning('Name এবং YouTube Channel ID required!');
        var $btn = $(this).prop('disabled',true).html('<i class="fas fa-spinner fa-spin"></i> Saving...');
        $.post(CH_ROUTE, data, function (res) {
            toastr.success(res.success||'Channel created!');
            $('#chCreateForm')[0].reset();
            $('#chFThumbPrev').hide();
            switchChTab('list');
            vmRefreshDropdowns();
        }).fail(function (xhr) {
            var errs = xhr.responseJSON?.errors;
            toastr.error(errs ? Object.values(errs).flat().join(' | ') : (xhr.responseJSON?.message||'Failed!'));
        }).always(function(){ $btn.prop('disabled',false).html('<i class="fas fa-save"></i> Save Channel'); });
    });

    /* ════════════════
       EDIT CHANNEL
    ════════════════ */
    $(document).on('click', '.ch-edit-btn', function () { loadChEdit($(this).data('id')); });
    function loadChEdit(id) {
        $.getJSON(CH_ROUTE+'/'+id+'/edit_json', function (ch) {
            $('#chEditId').val(ch.id);
            $('#chEName').val(ch.name||''); $('#chEYtId').val(ch.youtube_channel_id||'');
            $('#chEHandle').val(ch.handle||''); $('#chESubs').val(ch.subscribers||0);
            $('#chEDesc').val(ch.description||''); $('#chEThumbUrl').val(ch.thumbnail||'');
            $('#chEditAvatar').text((ch.name||'C').charAt(0).toUpperCase()).show();
            if (ch.thumbnail) { $('#chEditThumb').attr('src',ch.thumbnail).show(); $('#chEditAvatar').hide(); } else { $('#chEditThumb').hide(); }
            $('#chEditNameLabel').text(ch.name||'');
            $('#chEditHandleLabel').text(ch.handle?'@'+ch.handle:(ch.youtube_channel_id||''));
            $('#chResyncBtn').data('id',ch.id).data('ytid',ch.youtube_channel_id||'');
            $('#chUpdateBtn').data('id',id);
            switchChTab('edit');
        }).fail(function(){ toastr.error('Failed to load channel!'); });
    }
    $('#chEditBack').on('click', function(){ switchChTab('list'); });
    $('#chResyncBtn').on('click', function () {
        var id=$(this).data('id'), ytId=$(this).data('ytid');
        if (!ytId) return toastr.warning('YouTube Channel ID নেই!');
        var $btn=$(this).prop('disabled',true).html('<i class="fas fa-spinner fa-spin"></i>');
        $.post(CH_SYNC_INFO, { _token:CSRF, youtube_channel_id:ytId, channel_id:id }, function(res){
            toastr.success(res.success); loadChEdit(id); vmRefreshDropdowns();
        }).fail(function(xhr){ toastr.error(xhr.responseJSON?.error||'Sync failed!'); })
        .always(function(){ $btn.prop('disabled',false).html('<i class="fab fa-youtube" style="color:#ef4444;"></i> Re-sync Info'); });
    });

    /* ════════════════
       UPDATE CHANNEL
    ════════════════ */
    $('#chUpdateBtn').on('click', function () {
        var id=$(this).data('id'), data={};
        $('#chEditForm').serializeArray().forEach(function(f){ data[f.name]=f.value; });
        data._method='PUT'; data._token=CSRF;
        var $btn=$(this).prop('disabled',true).html('<i class="fas fa-spinner fa-spin"></i> Updating...');
        $.post(CH_ROUTE+'/'+id, data, function(res){
            toastr.success(res.success||'Channel updated!'); switchChTab('list'); vmRefreshDropdowns();
        }).fail(function(xhr){ toastr.error(xhr.responseJSON?.message||'Update failed!'); })
        .always(function(){ $btn.prop('disabled',false).html('<i class="fas fa-save"></i> Update Channel'); });
    });

    /* ════════════════
       DELETE CHANNEL
    ════════════════ */
    $(document).on('click', '.ch-del-btn', function () {
        var id=$(this).data('id'), name=$(this).data('name');
        if (!confirm('"'+name+'" delete করবেন?\nএই channel এর সব video এর channel_id null হয়ে যাবে।')) return;
        $.post(CH_ROUTE+'/'+id, { _method:'DELETE', _token:CSRF }, function(res){
            toastr.success(res.success||'Deleted!'); loadChannels(); vmRefreshDropdowns();
        }).fail(function(xhr){ toastr.error(xhr.responseJSON?.message||'Delete failed!'); });
    });

    /* ════════════════════════════════════════
       REFRESH ALL CHANNEL DROPDOWNS
    ════════════════════════════════════════ */
    function vmRefreshDropdowns() {
        $.getJSON(CH_ROUTE, { json:1 }, function (res) {
            var list = res.data||res;
            var cur1 = $('#filter_channel').val();
            $('#filter_channel').html('<option value="">All Channels</option>');
            $('#syncChannelId').html('<option value="">— Select a channel —</option>');
            $('select[name="channel_id"]').html('<option value="">— Select —</option>');
            $.each(list, function(i,ch){
                var opt = '<option value="'+ch.id+'">'+vmEsc(ch.name)+'</option>';
                $('#filter_channel').append(opt);
                $('select[name="channel_id"]').append(opt);
                $('#syncChannelId').append('<option value="'+ch.id+'" data-ytid="'+vmEsc(ch.youtube_channel_id||'')+'">'
                    +vmEsc(ch.name)+(ch.handle?' · @'+vmEsc(ch.handle):'')+'</option>');
            });
            $('#filter_channel').val(cur1);
        });
    }
    window.vmRefreshDropdowns = vmRefreshDropdowns;

});
</script>

@endsection