@extends('admin.layouts.master')

@section('title', 'Manage Daily News')

@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 / DAILY NEWS — DataTable Theme Design
   news-list / lead-news এর মতো same system
═══════════════════════════════════════════════ */

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

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

/* ── Stats ── */
.nl-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:22px; }
@media(max-width:768px){ .nl-stats { grid-template-columns:repeat(2,1fr); } }
.nl-stat-item { background:var(--panel); border:1.5px solid var(--line); border-left:3px solid var(--acc); padding:14px 16px; display:flex; align-items:center; gap:12px; transition:box-shadow .2s; }
.nl-stat-item:hover { box-shadow:0 4px 18px color-mix(in srgb, var(--acc) 12%, transparent); }
.nl-stat-item.s2 { border-left-color:#10b981; }
.nl-stat-item.s3 { border-left-color:#f59e0b; }
.nl-stat-item.s4 { border-left-color:#ef4444; }
.nl-stat-icon { width:38px; height:38px; background:var(--acc-soft); display:flex; align-items:center; justify-content:center; font-size:15px; color:var(--acc); flex-shrink:0; }
.nl-stat-item.s2 .nl-stat-icon { background:rgba(16,185,129,.12); color:#10b981; }
.nl-stat-item.s3 .nl-stat-icon { background:rgba(245,158,11,.12);  color:#f59e0b; }
.nl-stat-item.s4 .nl-stat-icon { background:rgba(239,68,68,.12);   color:#ef4444; }
.nl-stat-val { font-size:22px; font-weight:900; color:var(--ink); line-height:1; }
.nl-stat-lbl { font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.8px; margin-top:3px; }

/* ── Card ── */
.nl-card { background:var(--panel); border:1.5px solid var(--line); overflow:hidden; }

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

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

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

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

/* ── Table ── */
.nl-table-wrap { overflow-x:auto; }
table.nl-table { width:100% !important; border-collapse:collapse; font-size:13px; }
table.nl-table thead th { background:var(--surface) !important; color:var(--muted) !important; font-size:10.5px !important; font-weight:800 !important; text-transform:uppercase !important; letter-spacing:1px !important; padding:12px 14px !important; border-bottom:2px solid var(--line) !important; border-top:none !important; white-space:nowrap; cursor:pointer; user-select:none; }
table.nl-table thead th:hover { color:var(--acc) !important; }
table.nl-table thead th.sorting_asc,
table.nl-table thead th.sorting_desc { color:var(--acc) !important; }
table.nl-table thead th.sorting::after      { content:' ⇅'; opacity:.3; font-size:10px; }
table.nl-table thead th.sorting_asc::after  { content:' ↑'; color:var(--acc); font-size:10px; }
table.nl-table thead th.sorting_desc::after { content:' ↓'; color:var(--acc); font-size:10px; }
table.nl-table tbody td { padding:10px 14px !important; border-bottom:1px solid var(--line) !important; color:var(--ink) !important; vertical-align:middle !important; background:var(--panel) !important; transition:background .15s; }
table.nl-table tbody tr:last-child td { border-bottom:none !important; }
table.nl-table tbody tr:hover td { background:var(--sb-hover-bg) !important; }
table.nl-table tbody tr { animation:nl-row-in .22s ease both; }
@keyframes nl-row-in { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }

/* ── Cells ── */
.nl-thumb { width:80px; height:52px; object-fit:cover; border-radius:6px; box-shadow:0 2px 8px rgba(0,0,0,.12); display:block; transition:transform .2s; }
table.nl-table tbody tr:hover .nl-thumb { transform:scale(1.06); }

.nl-title-text { font-size:13px; font-weight:600; color:var(--ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; max-width:320px; line-height:1.45; margin-bottom:3px; }
.nl-sub-text   { font-size:11.5px; color:var(--muted); font-weight:500; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; max-width:320px; }

.nl-cat-badge { display:inline-block; padding:3px 9px; background:var(--acc-soft); color:var(--acc); font-size:11px; font-weight:700; border-radius:20px; white-space:nowrap; }

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

.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-status i { font-size:11px; }

.nl-check { width:16px; height:16px; accent-color:var(--acc); cursor:pointer; }

/* ── Video link tag ── */
.nl-video-tag { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; background:rgba(239,68,68,.1); color:#ef4444; font-size:11px; font-weight:700; border-radius:20px; text-decoration:none; transition:all .18s; }
.nl-video-tag:hover { background:rgba(239,68,68,.2); color:#ef4444; }

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

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

/* ── Footer / Pagination ── */
.nl-table-footer { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-top:1.5px solid var(--line); background:var(--surface); flex-wrap:wrap; gap:10px; }
.nl-info { font-size:12.5px; color:var(--muted); font-weight:600; }
.nl-info strong { color:var(--ink); }
#nl-pagination { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
#nl-pagination .nl-page-btn { display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:34px; padding:0 10px; border-radius:7px; font-size:13px; font-weight:600; color:var(--ink); background:var(--panel); border:1.5px solid var(--line); cursor:pointer; transition:all .18s; user-select:none; }
#nl-pagination .nl-page-btn:hover:not(.disabled):not(.active):not(.ellipsis) { background:var(--sb-hover-bg); border-color:var(--acc); color:var(--acc); }
#nl-pagination .nl-page-btn.active   { background:var(--acc); border-color:var(--acc); color:#fff; box-shadow:0 2px 8px color-mix(in srgb, var(--acc) 35%, transparent); }
#nl-pagination .nl-page-btn.disabled { opacity:.4; cursor:not-allowed; pointer-events:none; }
#nl-pagination .nl-page-btn.ellipsis { border-color:transparent; background:transparent; cursor:default; pointer-events:none; }

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

/* ── Modal ── */
.nl-modal .modal-content { background:var(--panel) !important; border:1.5px solid var(--line) !important; border-radius:12px !important; overflow:hidden; }
.nl-modal .modal-header  { background:var(--surface) !important; border-bottom:1.5px solid var(--line) !important; padding:14px 18px !important; }
.nl-modal .modal-title   { font-size:14px !important; font-weight:800 !important; color:var(--ink) !important; display:flex; align-items:center; gap:8px; }
.nl-modal .modal-title i { color:var(--acc); }
.nl-modal .modal-body    { padding:20px !important; }
.nl-modal .modal-footer  { border-top:1.5px solid var(--line) !important; padding:12px 18px !important; gap:8px; }
.nl-modal .form-group    { margin-bottom:16px; }
.nl-modal .form-group label { font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.6px; margin-bottom:6px; display:block; }
.nl-modal .form-control  { background:var(--surface) !important; border:1.5px solid var(--line) !important; color:var(--ink) !important; border-radius:8px !important; font-size:13px !important; padding:9px 12px !important; outline:none !important; }
.nl-modal .form-control:focus { border-color:var(--acc) !important; box-shadow:0 0 0 3px color-mix(in srgb, var(--acc) 18%, transparent) !important; }
.nl-modal .form-control::placeholder { color:var(--muted); opacity:.6; }

.btn-close-x { width:28px; height:28px; border-radius:7px; border:none; background:var(--surface); color:var(--muted); cursor:pointer; font-size:13px; display:flex; align-items:center; justify-content:center; transition:all .18s; flex-shrink:0; }
.btn-close-x:hover { background:rgba(239,68,68,.1); color:#ef4444; }

/* Thumbnail upload in modal */
.vd-thumb-wrap { position:relative; cursor:pointer; display:block; }
.vd-thumb-wrap input[type="file"] { display:none; }
.vd-thumb-empty { border:2px dashed var(--line); background:var(--surface); padding:24px; text-align:center; border-radius:8px; transition:all .2s; }
.vd-thumb-wrap:hover .vd-thumb-empty { border-color:var(--acc); background:var(--acc-soft); }
.vd-thumb-empty i    { font-size:26px; color:var(--muted); opacity:.5; display:block; margin-bottom:6px; }
.vd-thumb-empty span { font-size:12px; font-weight:600; color:var(--muted); }
.vd-thumb-preview { position:relative; border:1.5px solid var(--line); border-radius:8px; overflow:hidden; }
.vd-thumb-preview img { width:100%; height:140px; object-fit:cover; display:block; transition:filter .2s; }
.vd-thumb-wrap:hover .vd-thumb-preview img { filter:brightness(.6); }
.vd-thumb-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:6px; flex-direction:column; opacity:0; transition:opacity .2s; }
.vd-thumb-wrap:hover .vd-thumb-overlay { opacity:1; }
.vd-thumb-overlay i    { font-size:20px; color:#fff; }
.vd-thumb-overlay span { font-size:11px; font-weight:700; color:#fff; }

/* Grid in modal */
.nl-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:576px){ .nl-form-grid { grid-template-columns:1fr; } }

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

/* DT hidden pg */
.nl-dt-hidden-pg { display:none !important; }

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


@section('content')

{{-- Header --}}
<div class="nl-header">
    <div class="nl-header-left">
        <h1><i class="fas fa-video"></i>Daily News / Video</h1>
        <p>Manage all daily news schedules and video entries</p>
    </div>
    <div class="nl-header-right">
        <button class="nl-btn nl-btn-primary" data-toggle="modal" data-target="#createVideoModal">
            <i class="fas fa-plus"></i> New Video
        </button>
    </div>
</div>

{{-- Stats --}}
<div class="nl-stats">
    <div class="nl-stat-item">
        <div class="nl-stat-icon"><i class="fas fa-video"></i></div>
        <div><div class="nl-stat-val" id="statTotal">—</div><div class="nl-stat-lbl">Total Videos</div></div>
    </div>
    <div class="nl-stat-item s2">
        <div class="nl-stat-icon"><i class="fas fa-check-circle"></i></div>
        <div><div class="nl-stat-val" id="statActive">—</div><div class="nl-stat-lbl">Active</div></div>
    </div>
    <div class="nl-stat-item s3">
        <div class="nl-stat-icon"><i class="fas fa-calendar-day"></i></div>
        <div><div class="nl-stat-val" id="statToday">—</div><div class="nl-stat-lbl">Today</div></div>
    </div>
    <div class="nl-stat-item s4">
        <div class="nl-stat-icon"><i class="fas fa-times-circle"></i></div>
        <div><div class="nl-stat-val" id="statInactive">—</div><div class="nl-stat-lbl">Inactive</div></div>
    </div>
</div>

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

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

    {{-- Filter Panel --}}
    <div class="nl-filter-panel" id="nlFilterPanel">
        <div class="nl-filter-grid">
            <div class="nl-filter-item">
                <label>Category</label>
                <select id="filter_category">
                    <option value="">All Categories</option>
                    @foreach ($categories as $cat)
                        <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="nl-filter-item">
                <label>Status</label>
                <select id="filter_status">
                    <option value="">All Status</option>
                    <option value="1">Active</option>
                    <option value="0">Inactive</option>
                </select>
            </div>
            <div class="nl-filter-item">
                <label>Date</label>
                <input type="date" id="filter_date">
            </div>
            <button class="nl-filter-reset" id="nlFilterReset">
                <i class="fas fa-times"></i> Reset
            </button>
        </div>
    </div>

    {{-- Table --}}
    <div class="nl-table-wrap">
        <table class="nl-table" id="videoTable">
            <thead>
                <tr>
                    <th style="width:36px;"><input type="checkbox" id="nlSelectAll" class="nl-check"></th>
                    <th style="width:90px;">Thumbnail</th>
                    <th>Title / Sub Title</th>
                    <th style="width:120px;">Category</th>
                    <th style="width:80px;">Status</th>
                    <th style="width:160px;">Schedule</th>
                    <th style="width:110px;">Date</th>
                    <th style="width:46px;text-align:center;">Act</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>

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

</div>


{{-- Bulk Bar --}}
<div class="nl-bulk-bar" id="nlBulkBar">
    <span class="nl-bulk-count"><span id="nlBulkCount">0</span> selected</span>
    <div class="nl-bulk-sep"></div>
    <button class="nl-bulk-btn nl-bulk-act"   id="nlBulkActivate">  <i class="fas fa-check"></i> Activate</button>
    <button class="nl-bulk-btn nl-bulk-deact" id="nlBulkDeactivate"><i class="fas fa-times"></i> Deactivate</button>
    <button class="nl-bulk-btn nl-bulk-del"   id="nlBulkDelete">   <i class="fas fa-trash"></i> Delete</button>
    <div class="nl-bulk-sep"></div>
    <button class="nl-bulk-close" id="nlBulkClose"><i class="fas fa-times"></i></button>
</div>


{{-- Create Modal --}}
<div class="modal fade nl-modal" id="createVideoModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <form action="{{ route('video.store') }}" method="POST" enctype="multipart/form-data" class="modal-content">
            @csrf
            <div class="modal-header">
                <h5 class="modal-title"><i class="fas fa-plus"></i>Add New Video</h5>
                <button type="button" class="btn-close-x" data-dismiss="modal"><i class="fas fa-times"></i></button>
            </div>
            <div class="modal-body">
                <div class="nl-form-grid">
                    <div class="form-group">
                        <label>Title <span style="color:#ef4444">*</span></label>
                        <input type="text" name="title" class="form-control" placeholder="Enter video title" required>
                    </div>
                    <div class="form-group">
                        <label>Sub Title</label>
                        <input type="text" name="sub_title" class="form-control" placeholder="Optional sub title">
                    </div>
                    <div class="form-group">
                        <label>Video Link <span style="color:#ef4444">*</span></label>
                        <input type="text" name="video_link" class="form-control" placeholder="https://youtube.com/..." required>
                    </div>
                    <div class="form-group">
                        <label>Category <span style="color:#ef4444">*</span></label>
                        <select name="category_id" class="form-control" required>
                            <option value="">— Select Category —</option>
                            @foreach ($categories as $cat)
                                <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Start Datetime</label>
                        <input type="datetime-local" name="start_datetime" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>End Datetime</label>
                        <input type="datetime-local" name="end_datetime" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>Date</label>
                        <input type="date" name="date" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>Status</label>
                        <select name="status" class="form-control">
                            <option value="1">Active</option>
                            <option value="0">Inactive</option>
                        </select>
                    </div>
                </div>

                {{-- Thumbnail Upload --}}
                <div class="form-group" style="margin-top:4px;">
                    <label>Thumbnail</label>
                    <label class="vd-thumb-wrap" for="createThumbInput">
                        <input type="file" id="createThumbInput" name="thumbnail" accept="image/*" class="vd-thumb-file">
                        <div class="vd-thumb-empty" id="createThumbZone">
                            <i class="fas fa-cloud-upload-alt"></i>
                            <span>Click to upload thumbnail</span>
                        </div>
                    </label>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="nl-btn nl-btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="submit" class="nl-btn nl-btn-primary"><i class="fas fa-save"></i> Save Video</button>
            </div>
        </form>
    </div>
</div>


{{-- Action Menu --}}
<div class="nl-action-menu" id="nlActionMenu">
    <button class="nl-menu-item" id="amEdit"><i class="fas fa-edit" style="color:#f59e0b"></i> Edit</button>
    <a class="nl-menu-item" id="amVideo" href="#" target="_blank"><i class="fas fa-play-circle" style="color:#ef4444"></i> Watch Video</a>
    <button class="nl-menu-item" id="amCopy"><i class="fas fa-clipboard" style="color:var(--acc)"></i> Copy Link</button>
    <div class="nl-menu-sep"></div>
    <button class="nl-menu-item danger" id="amDelete"><i class="fas fa-trash"></i> Delete</button>
</div>

{{-- Edit Modal --}}
<div class="modal fade nl-modal" id="editVideoModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fas fa-edit"></i>Edit Video</h5>
                <button type="button" class="btn-close-x" data-dismiss="modal"><i class="fas fa-times"></i></button>
            </div>
            <div class="modal-body" id="editModalBody">
                {{-- Loading state --}}
                <div id="editLoader" style="text-align:center;padding:40px;">
                    <div style="width:36px;height:36px;border:3px solid var(--line);border-top-color:var(--acc);border-radius:50%;animation:nl-spin .7s linear infinite;margin:0 auto 12px;"></div>
                    <div style="font-size:13px;color:var(--muted);font-weight:600;">Loading...</div>
                </div>
                {{-- Form filled via AJAX --}}
                <form id="editVideoForm" method="POST" enctype="multipart/form-data" style="display:none;">
                    @csrf
                    @method('PUT')
                    <input type="hidden" id="editVideoId" name="_vid_id">
                    <div class="nl-form-grid">
                        <div class="form-group">
                            <label>Title <span style="color:#ef4444">*</span></label>
                            <input type="text" name="title" id="editTitle" class="form-control" placeholder="Enter video title" required>
                        </div>
                        <div class="form-group">
                            <label>Sub Title</label>
                            <input type="text" name="sub_title" id="editSubTitle" class="form-control" placeholder="Optional sub title">
                        </div>
                        <div class="form-group">
                            <label>Video Link <span style="color:#ef4444">*</span></label>
                            <input type="text" name="video_link" id="editVideoLink" class="form-control" placeholder="https://youtube.com/...">
                        </div>
                        <div class="form-group">
                            <label>Category <span style="color:#ef4444">*</span></label>
                            <select name="category_id" id="editCategory" class="form-control">
                                <option value="">— Select Category —</option>
                                @foreach ($categories as $cat)
                                    <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Start Datetime</label>
                            <input type="datetime-local" name="start_datetime" id="editStartDatetime" class="form-control">
                        </div>
                        <div class="form-group">
                            <label>End Datetime</label>
                            <input type="datetime-local" name="end_datetime" id="editEndDatetime" class="form-control">
                        </div>
                        <div class="form-group">
                            <label>Date</label>
                            <input type="date" name="date" id="editDate" class="form-control">
                        </div>
                        <div class="form-group">
                            <label>Status</label>
                            <select name="status" id="editStatus" class="form-control">
                                <option value="1">Active</option>
                                <option value="0">Inactive</option>
                            </select>
                        </div>
                    </div>
                    {{-- Thumbnail --}}
                    <div class="form-group" style="margin-top:4px;">
                        <label>Thumbnail <span style="font-size:11px;font-weight:400;text-transform:none;letter-spacing:0;color:var(--muted)">(leave empty to keep current)</span></label>
                        <label class="vd-thumb-wrap" for="editThumbInput">
                            <input type="file" id="editThumbInput" name="thumbnail" accept="image/*">
                            <div id="editThumbZone" class="vd-thumb-empty">
                                <i class="fas fa-cloud-upload-alt"></i>
                                <span>Click to change thumbnail</span>
                            </div>
                        </label>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="nl-btn nl-btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="nl-btn nl-btn-primary" id="editSaveBtn">
                    <i class="fas fa-save"></i> Update Video
                </button>
            </div>
        </div>
    </div>
</div>

@endsection


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

<script>
$(function () {

    var ROUTE = '{{ route("video.index") }}';

    /* ════════════════ DataTable ════════════════ */
    var table = $('#videoTable').DataTable({
        processing  : false,
        serverSide  : true,
        responsive  : true,
        lengthChange: false,
        searching   : false,
        autoWidth   : false,
        pageLength  : 10,
        ajax: {
            url : ROUTE,
            type: 'GET',
            data: function (d) {
                d.title    = $('#nlSearch').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) {
                    $('#statTotal').text(json.stats.total    ?? '—');
                    $('#statActive').text(json.stats.active  ?? '—');
                    $('#statToday').text(json.stats.today    ?? '—');
                    $('#statInactive').text(json.stats.inactive ?? '—');
                }
                return json.data;
            }
        },
        columns: [
            { data: 'checkbox',   orderable: false, searchable: false, width: '36px'  },
            { data: 'thumbnail',  orderable: false, searchable: false, width: '90px'  },
            { data: 'title',      orderable: true                                     },
            { data: 'category',   orderable: false, searchable: false, width: '120px' },
            { data: 'status',     orderable: false, searchable: false, width: '80px'  },
            { data: 'schedule',   orderable: false, searchable: false, width: '160px' },
            { data: 'created_at', orderable: true,                     width: '110px' },
            { data: 'action',     orderable: false, searchable: false, width: '46px'  }
        ],
        order : [[6, 'desc']],
        dom   : '<"nl-dt-hidden-pg"p>t',
        language: {
            emptyTable : '<div class="nl-empty"><i class="fas fa-video"></i><p>No videos found</p></div>',
            zeroRecords: '<div class="nl-empty"><i class="fas fa-search"></i><p>No matching records</p></div>',
        },
        drawCallback: function () {
            renderFooter();
            toggleBulkBar();
        }
    });

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

        if (!filtered) {
            $('#nl-info').html('No entries found');
        } else {
            $('#nl-info').html(
                'Showing <strong>' + start + '–' + end + '</strong> of <strong>' + filtered + '</strong>'
                + (filtered !== total ? ' (filtered from <strong>' + total + '</strong>)' : '')
                + ' entries'
            );
        }

        var html = '';
        html += '<span class="nl-page-btn' + (page === 0 ? ' disabled' : '') + '" data-page="prev"><i class="fas fa-angle-left"></i></span>';
        buildRange(page, pages).forEach(function (p) {
            if (p === '...') html += '<span class="nl-page-btn ellipsis">…</span>';
            else             html += '<span class="nl-page-btn' + (p === page ? ' active' : '') + '" data-page="' + p + '">' + (p + 1) + '</span>';
        });
        html += '<span class="nl-page-btn' + (page >= pages - 1 ? ' disabled' : '') + '" data-page="next"><i class="fas fa-angle-right"></i></span>';
        $('#nl-pagination').html(html);
    }

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

    $(document).on('click', '#nl-pagination .nl-page-btn: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');
    });

    /* ════════════════ Filters ════════════════ */
    var filterTimer;
    $('#nlSearch').on('input', function () {
        clearTimeout(filterTimer);
        filterTimer = setTimeout(function () { table.ajax.reload(); }, 350);
    });

    $('#filter_category,#filter_status,#filter_date').on('change', function () {
        table.ajax.reload(); updateFilterDot();
    });

    $('#perPage').on('change', function () {
        var v = $(this).val();
        table.page.len(v === '-1' ? 100000 : parseInt(v)).draw();
    });

    $('#nlFilterToggle').on('click', function () {
        $(this).toggleClass('active');
        $('#nlFilterPanel').toggleClass('show');
    });

    $('#nlFilterReset').on('click', function () {
        $('#filter_category,#filter_status,#filter_date').val('');
        $('#nlSearch').val(''); updateFilterDot(); table.ajax.reload();
    });

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

    function updateFilterDot() {
        var has = !!($('#filter_category').val() || $('#filter_status').val() || $('#filter_date').val());
        $('#nlFilterToggle').toggleClass('has-filters', has);
    }

    /* ════════════════ Status Toggle ════════════════ */
    $(document).on('click', '.nl-status', function () {
        var id = $(this).data('id');
        if (!confirm('Change status?')) return;
        $.ajax({
            url : '{{ route("video.destroy", ":id") }}'.replace(':id', id),
            type: 'POST',
            data: { _method: 'PUT', _token: '{{ csrf_token() }}', toggle_status: 1 },
            success: function (r) { table.ajax.reload(null, false); toastr.success('Status updated!'); }
        });
    });

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

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

        $('#amEdit').data('id', $btn.data('id'));
        $('#amVideo').attr('href', $btn.data('video') || '#');
        $('#amDelete,#amCopy').data('id', $btn.data('id')).data('link', $btn.data('video') || '');

        $menu.appendTo('body');
        var rect = this.getBoundingClientRect();
        var left = rect.right + window.scrollX - 180;
        if (left < 8) left = 8;
        $menu.css({ top: (rect.bottom + window.scrollY + 4) + 'px', left: left + 'px' }).addClass('show');
        $btn.addClass('open');
        currentRow = $row; menuOpen = true;
    });

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

    /* ════════════════ Edit Modal ════════════════ */
    $('#amEdit').on('click', function () {
        var id = $(this).data('id');
        closeMenu();

        /* Reset modal */
        $('#editLoader').show();
        $('#editVideoForm').hide();
        $('#editSaveBtn').data('id', id);
        $('#editVideoModal').modal('show');

        /* Fetch video data */
        $.getJSON(ROUTE + '/' + id + '/edit', function (v) {
            $('#editVideoId').val(v.id);
            $('#editTitle').val(v.title || '');
            $('#editSubTitle').val(v.sub_title || '');
            $('#editVideoLink').val(v.video_link || '');
            $('#editCategory').val(v.category_id || '');
            $('#editStatus').val(v.status !== undefined ? v.status : 1);
            $('#editDate').val(v.date ? v.date.substring(0, 10) : '');

            /* datetime-local format: 2024-01-15T14:30 */
            if (v.start_datetime) $('#editStartDatetime').val(v.start_datetime.replace(' ', 'T').substring(0, 16));
            else $('#editStartDatetime').val('');
            if (v.end_datetime) $('#editEndDatetime').val(v.end_datetime.replace(' ', 'T').substring(0, 16));
            else $('#editEndDatetime').val('');

            /* Thumbnail preview */
            if (v.thumbnail) {
                $('#editThumbZone')
                    .removeClass('vd-thumb-empty').addClass('vd-thumb-preview')
                    .html('<img src="{{ asset("/") }}" style="display:none" id="editThumbImg" alt="thumb">'
                        + '<div class="vd-thumb-overlay"><i class="fas fa-camera"></i><span>Change</span></div>');
                $('#editThumbImg').attr('src', '{{ asset("/") }}' + v.thumbnail).show();
            } else {
                $('#editThumbZone')
                    .removeClass('vd-thumb-preview').addClass('vd-thumb-empty')
                    .html('<i class="fas fa-cloud-upload-alt"></i><span>Click to change thumbnail</span>');
            }

            $('#editLoader').hide();
            $('#editVideoForm').show();
        }).fail(function () {
            toastr.error('Failed to load video data!');
            $('#editVideoModal').modal('hide');
        });
    });

    /* Edit thumbnail preview */
    $('#editThumbInput').on('change', function () {
        var file = this.files[0]; if (!file) return;
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#editThumbZone')
                .removeClass('vd-thumb-empty').addClass('vd-thumb-preview')
                .html('<img src="' + e.target.result + '" alt="Preview">'
                    + '<div class="vd-thumb-overlay"><i class="fas fa-camera"></i><span>Change</span></div>');
        };
        reader.readAsDataURL(file);
    });

    /* Edit form submit */
    $('#editSaveBtn').on('click', function () {
        var id = $(this).data('id');
        var formData = new FormData($('#editVideoForm')[0]);
        formData.set('_method', 'PUT');

        $.ajax({
            url        : ROUTE + '/' + id,
            type       : 'POST',
            data       : formData,
            processData: false,
            contentType: false,
            success: function (r) {
                $('#editVideoModal').modal('hide');
                table.ajax.reload(null, false);
                toastr.success('Video updated successfully!');
            },
            error: function (xhr) {
                var msg = xhr.responseJSON && xhr.responseJSON.message
                    ? xhr.responseJSON.message : 'Update failed!';
                toastr.error(msg);
            }
        });
    });

    /* ════════════════ Delete ════════════════ */
    $('#amDelete').on('click', function () {
        closeMenu();
        var id = $(this).data('id');
        if (!confirm('Delete this video?')) return;
        $.ajax({
            url : '{{ route("video.destroy", ":id") }}'.replace(':id', id),
            type: 'POST',
            data: { _method: 'DELETE', _token: '{{ csrf_token() }}' },
            success: function (r) { table.ajax.reload(null, false); toastr.success('Video deleted!'); }
        });
    });

    /* ════════════════ Copy Link ════════════════ */
    $('#amCopy').on('click', function () {
        closeMenu();
        var link = $(this).data('link');
        if (!link) { toastr.warning('No video link available!'); return; }
        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!');
    });

    /* ════════════════ Checkboxes ════════════════ */
    $('#nlSelectAll').on('change', function () {
        $('#videoTable tbody .nl-check').prop('checked', this.checked); toggleBulkBar();
    });
    $(document).on('change', '.nl-check', function () {
        if (!this.checked) $('#nlSelectAll').prop('checked', false); toggleBulkBar();
    });

    function getSelected() { return $('.nl-check:checked').map(function () { return $(this).val(); }).get(); }

    function toggleBulkBar() {
        var n = getSelected().length;
        $('#nlBulkCount').text(n);
        n > 0 ? $('#nlBulkBar').addClass('show') : $('#nlBulkBar').removeClass('show');
    }

    $('#nlBulkClose').on('click', function () {
        $('.nl-check,#nlSelectAll').prop('checked', false); toggleBulkBar();
    });

    $('#nlBulkDelete').on('click', function () {
        var ids = getSelected();
        if (!ids.length || !confirm('Delete ' + ids.length + ' videos?')) return;
        $.post(ROUTE, { _token: '{{ csrf_token() }}', bulk_delete: ids }, function (r) {
            table.ajax.reload(null, false); toastr.success(r.success || 'Deleted!');
            $('#nlSelectAll').prop('checked', false); toggleBulkBar();
        });
    });

    $('#nlBulkActivate').on('click', function () {
        var ids = getSelected(); if (!ids.length) return;
        $.post(ROUTE, { _token: '{{ csrf_token() }}', bulk_status: ids, status_value: 1 }, function (r) {
            table.ajax.reload(null, false); toastr.success(r.success || 'Activated!');
        });
    });

    $('#nlBulkDeactivate').on('click', function () {
        var ids = getSelected(); if (!ids.length) return;
        $.post(ROUTE, { _token: '{{ csrf_token() }}', bulk_status: ids, status_value: 0 }, function (r) {
            table.ajax.reload(null, false); toastr.success(r.success || 'Deactivated!');
        });
    });

    /* ════════════════ Thumbnail Preview ════════════════ */
    $('#createThumbInput').on('change', function () {
        var file = this.files[0]; if (!file) return;
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#createThumbZone')
                .removeClass('vd-thumb-empty')
                .addClass('vd-thumb-preview')
                .html('<img src="' + e.target.result + '" alt="Preview"><div class="vd-thumb-overlay"><i class="fas fa-camera"></i><span>Change</span></div>');
        };
        reader.readAsDataURL(file);
    });

});
</script>
@endsection