@extends('admin.layouts.master')

@section('title', 'Lead News Management')

@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">
@if(file_exists(public_path('admin/plugins/select2/css/select2.min.css')))
<link rel="stylesheet" href="{{asset('/admin/')}}/plugins/select2/css/select2.min.css">
@endif
<style>
/* ── Page 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; border-radius:8px; font-size:13px; font-weight:600; border:none; cursor:pointer; transition:all .18s; text-decoration:none; white-space:nowrap; }
.nl-btn-primary   { background:var(--acc); color:#fff; box-shadow:0 2px 8px rgba(90,103,216,.35); }
.nl-btn-primary:hover { background:var(--acc-dark); color:#fff; transform:translateY(-1px); box-shadow:0 4px 14px rgba(90,103,216,.45); }
.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-mid); 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,background .3s; }
.nl-stat-item:hover { box-shadow:0 4px 18px rgba(90,103,216,.12); }
.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; position:relative; }

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

/* ── Controls ── */
.nl-controls { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; border-bottom:1.5px solid var(--line); background:var(--surface); flex-wrap:wrap; }
.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:220px; max-width:320px; }
.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); }

/* ── Drag hint ── */
.nl-drag-hint { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:7px; background:var(--acc-soft); color:var(--acc); font-size:12px; font-weight:600; border:1.5px solid var(--acc-mid); white-space:nowrap; }

/* ── 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; 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)} }

/* ── Drag Handle ── */
.drag-handle { cursor:grab; color:var(--muted); font-size:15px; padding:4px 6px; border-radius:5px; display:inline-flex; align-items:center; transition:all .15s; }
.drag-handle:hover { color:var(--acc); background:var(--acc-soft); }
.drag-handle:active { cursor:grabbing; }
tr.sortable-ghost  td { background:var(--acc-soft) !important; opacity:.65; }
tr.sortable-chosen td { background:var(--sb-hover-bg) !important; box-shadow:0 4px 20px rgba(90,103,216,.15); }
tr.sortable-drag      { opacity:.9; }

/* ── Position Badge ── */
.nl-pos-badge { display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:26px; padding:0 9px; background:rgba(239,68,68,.1); color:#ef4444; font-size:13px; font-weight:900; border-radius:6px; cursor:pointer; border:none; transition:all .18s; }
.nl-pos-badge:hover { background:rgba(239,68,68,.22); transform:scale(1.08); }

/* ── Status ── */
.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; white-space:nowrap; }
.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; }

/* ── Title ── */
.nl-title-text {font-family:var(--font-bengali) !important;  font-size:15px;  color:var(--ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; max-width:480px; line-height:1.45; }

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

/* ── 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-mid); 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; }

/* ── Table Footer ── */
.nl-table-footer { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; border-top:1.5px solid var(--line); background:var(--surface); flex-wrap:wrap; gap:10px; }
.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-mid); color:var(--acc); }
#nl-pagination .nl-page-btn.active   { background:var(--acc); border-color:var(--acc); color:#fff; box-shadow:0 2px 8px rgba(90,103,216,.35); }
#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; }

/* ── Modals ── */
.nl-modal .modal-content { background:var(--panel) !important; border:1.5px solid var(--line) !important; border-radius:14px !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; }
.nl-modal .modal-body    { padding:18px !important; }
.nl-modal .form-group label { font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.7px; margin-bottom:6px; }
.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:14px !important; font-weight:600 !important; padding:8px 14px !important; }
.nl-modal .form-control:focus { border-color:var(--acc) !important; box-shadow:0 0 0 3px rgba(90,103,216,.18) !important; }
.nl-modal .modal-footer  { border-top:1.5px solid var(--line) !important; padding:12px 18px !important; }
.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; }
.btn-close-x:hover { background:rgba(239,68,68,.1); color:#ef4444; }

/* Select2 theme support */
.nl-modal .select2-container--default .select2-selection--single { background:var(--surface) !important; border:1.5px solid var(--line) !important; border-radius:8px !important; height:42px !important; }
.nl-modal .select2-container--default .select2-selection--single .select2-selection__rendered { line-height:42px !important; color:var(--ink) !important; padding-left:12px !important; }
.nl-modal .select2-container--default .select2-selection--single .select2-selection__arrow { height:40px !important; }
.select2-dropdown { background:var(--panel) !important; border-color:var(--line) !important; border-radius:10px !important; }
.select2-results__option { color:var(--ink) !important; }
.select2-results__option--highlighted { background:var(--acc-soft) !important; color:var(--acc) !important; }
.select2-search__field { background:var(--surface) !important; color:var(--ink) !important; border-color:var(--line) !important; border-radius:6px !important; }

.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; }
.nl-dt-hidden-pg { display:none !important; }
</style>
@endsection


@section('content')

{{-- Page Header --}}
<div class="nl-header">
    <div class="nl-header-left">
        <h1><i class="fas fa-star"></i> Lead News Management</h1>
        <p>Drag to reorder positions · Manage all lead news articles</p>
    </div>
    <div class="nl-header-right">
        <button class="nl-btn nl-btn-primary" id="btnAddLeadNews">
            <i class="fas fa-plus"></i> Add Lead News
        </button>
    </div>
</div>

{{-- Stats --}}
<div class="nl-stats">
    <div class="nl-stat-item">
        <div class="nl-stat-icon"><i class="fas fa-star"></i></div>
        <div><div class="nl-stat-val" id="statTotal">—</div><div class="nl-stat-lbl">Total Lead</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-sort-numeric-up"></i></div>
        <div><div class="nl-stat-val" id="statMaxPos">—</div><div class="nl-stat-lbl">Max Position</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">

    <div class="nl-loader-overlay show" id="nlLoader">
        <div class="nl-loader-ring"></div>
        <div class="nl-loader-dots"><span></span><span></span><span></span></div>
        <div class="nl-loader-text">Loading...</div>
    </div>

    {{-- 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="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...">
            </div>
            <div class="nl-drag-hint">
                <i class="fas fa-grip-vertical"></i> Drag to reorder
            </div>
        </div>
        <div class="nl-controls-right">
            <button class="nl-btn nl-btn-secondary" id="nlRefreshBtn" title="Refresh">
                <i class="fas fa-sync-alt"></i>
            </button>
        </div>
    </div>

    {{-- Table --}}
    {{-- Columns: checkbox | handle | position | status | title | created_at | action --}}
    <div class="nl-table-wrap">
        <table class="nl-table" id="leadTable">
            <thead>
                <tr>
                    <th style="width:36px;"><input type="checkbox" id="nlSelectAll" class="nl-check"></th>
                    <th style="width:32px;"></th>{{-- drag handle --}}
                    <th style="width:80px;">Position</th>
                    <th style="width:110px;">Status</th>
                    <th>Title</th>
                    <th style="width:140px;">Created At</th>
                    <th style="width:46px;text-align:center;">Action</th>
                </tr>
            </thead>
            <tbody id="leadTableBody"></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>


{{-- Add Lead News Modal --}}
<div class="modal fade nl-modal" id="addLeadModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fas fa-plus" style="color:var(--acc);margin-right:8px"></i>Add News to Lead</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="form-group mb-3">
                    <label>Select News</label>
                    <select id="addNewsSelect" class="form-control" style="width:100%">
                        <option value="">-- Search and select a news article --</option>
                        @foreach ($allNews as $news)
                            <option value="{{ $news->id }}">{{ $news->title }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group">
                    <label>Position <span style="font-size:10px;font-weight:400;text-transform:none;letter-spacing:0">(Optional — leave empty to add at end)</span></label>
                    <input type="number" id="addNewsPosition" class="form-control" placeholder="e.g. 1" min="1">
                    <small style="font-size:11px;color:var(--muted);margin-top:5px;display:block;">
                        <i class="fas fa-info-circle" style="color:var(--acc)"></i>
                        Existing positions will shift automatically if you specify one.
                    </small>
                </div>
            </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="btnConfirmAdd">
                    <i class="fas fa-plus"></i> Add to Lead
                </button>
            </div>
        </div>
    </div>
</div>


{{-- Update Position Modal --}}
<div class="modal fade nl-modal" id="positionModal" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fas fa-list-ol" style="color:var(--acc);margin-right:8px"></i>Update Position</h5>
                <button type="button" class="btn-close-x" data-dismiss="modal"><i class="fas fa-times"></i></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="pmLeadId">
                <div class="form-group mb-3">
                    <label>News</label>
                    <div id="pmNewsTitle" style="font-size:13px;font-weight:600;color:var(--ink);padding:8px 12px;background:var(--surface);border-radius:7px;border:1.5px solid var(--line);">—</div>
                </div>
                <div class="form-group">
                    <label>New Position</label>
                    <input type="number" id="pmPosition" class="form-control" placeholder="e.g. 1" min="1" required>
                </div>
            </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="btnSavePosition">
                    <i class="fas fa-save"></i> Save Position
                </button>
            </div>
        </div>
    </div>
</div>


{{-- Action Menu --}}
<div class="nl-action-menu" id="nlActionMenu">
    <a class="nl-menu-item" id="amView" href="#" target="_blank">
        <i class="fas fa-eye" style="color:#10b981"></i> View Article
    </a>
    <a class="nl-menu-item" id="amEdit" href="#">
        <i class="fas fa-edit" style="color:#f59e0b"></i> Edit News
    </a>
    <button class="nl-menu-item" id="amPosition">
        <i class="fas fa-list-ol" style="color:var(--acc)"></i> Update Position
    </button>
    <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> Remove from Lead
    </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>

{{-- SortableJS for drag & drop --}}
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.2/Sortable.min.js"></script>

@if(file_exists(public_path('admin/plugins/select2/js/select2.min.js')))
<link rel="stylesheet" href="{{asset('/admin/')}}/plugins/select2/css/select2.min.css">
<script src="{{asset('/admin/')}}/plugins/select2/js/select2.min.js"></script>
@endif

<script>
$(function () {

    var ROUTE = '{{ route("news.lead-news.list") }}';

    /* ════════════════════════════════════════
       DataTable Init
       columns: 0=checkbox | 1=handle | 2=position | 3=status | 4=title | 5=created_at | 6=action
    ════════════════════════════════════════ */
    var table = $('#leadTable').DataTable({
        processing  : false,
        serverSide  : true,
        responsive  : false,
        lengthChange: false,
        searching   : false,
        autoWidth   : false,
        pageLength  : 20,
        ajax: {
            url : ROUTE,
            type: 'GET',
            data: function (d) {
                d.title = $('#nlSearch').val();
            },
            dataSrc: function (json) {
                if (json.stats) {
                    $('#statTotal').text(json.stats.total      ?? '—');
                    $('#statActive').text(json.stats.active    ?? '—');
                    $('#statMaxPos').text(json.stats.max_pos   ?? '—');
                    $('#statInactive').text(json.stats.inactive ?? '—');
                }
                return json.data;
            }
        },
        columns: [
            { data: 'checkbox',   orderable: false, searchable: false, width: '36px'  },
            { data: 'handle',     orderable: false, searchable: false, width: '32px'  },
            { data: 'position',   orderable: true,                     width: '80px'  },
            { data: 'status',     orderable: false, searchable: false, width: '110px' },
            { data: 'title',      orderable: false, searchable: true                  },
            { data: 'created_at', orderable: true,                     width: '140px' },
            { data: 'action',     orderable: false, searchable: false, width: '46px'  }
        ],
        order : [[2, 'asc']],
        dom   : '<"nl-dt-hidden-pg"p>t',
        language: {
            emptyTable : '<div class="nl-empty"><i class="fas fa-star"></i><p>No lead news found</p></div>',
            zeroRecords: '<div class="nl-empty"><i class="fas fa-search"></i><p>No matching records</p></div>',
        },
        drawCallback: function () {
            renderFooter();
            toggleBulkBar();
            initSortable();
        }
    });

    /* Loader */
    $('#leadTable').on('preXhr.dt', function () { $('#nlLoader').addClass('show'); });
    $('#leadTable').on('xhr.dt',    function () { $('#nlLoader').removeClass('show'); });

    /* ════════════════════════════════════════
       Drag & Drop — SortableJS
    ════════════════════════════════════════ */
    var sortableInstance = null;

    function initSortable() {
        if (sortableInstance) { sortableInstance.destroy(); sortableInstance = null; }

        var tbody = document.getElementById('leadTableBody');
        if (!tbody) return;

        sortableInstance = Sortable.create(tbody, {
            handle      : '.drag-handle',
            animation   : 160,
            ghostClass  : 'sortable-ghost',
            chosenClass : 'sortable-chosen',
            dragClass   : 'sortable-drag',
            onEnd: function () {
                var orderedIds = [];
                $('#leadTableBody tr[data-id]').each(function () {
                    orderedIds.push($(this).data('id'));
                });
                if (!orderedIds.length) return;

                $('#nlLoader').addClass('show');
                $.get(ROUTE, { drag_reorder: true, ordered_ids: orderedIds }, function (r) {
                    toastr.success(r.success || 'Order updated!');
                    table.ajax.reload(null, false);
                }).fail(function () {
                    toastr.error('Failed to update order!');
                    $('#nlLoader').removeClass('show');
                });
            }
        });
    }

    /* ════════════════════════════════════════
       Footer 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 === 0) {
            $('#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 pages = [0];
        if (cur > 3) pages.push('...');
        var from = Math.max(1, cur - 2), to = Math.min(total - 2, cur + 2);
        for (var i = from; i <= to; i++) pages.push(i);
        if (cur < total - 4) pages.push('...');
        pages.push(total - 1);
        return pages;
    }

    $(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');
    });

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

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

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

    /* ════════════════════════════════════════
       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; }

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

        $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);

    /* ════════════════════════════════════════
       Status Toggle
    ════════════════════════════════════════ */
    $(document).on('click', '.nl-status', function () {
        var id = $(this).data('id');
        if (!confirm('Change status?')) return;
        $.get(ROUTE, { toggle_status: true, lead_id: id }, function (r) {
            table.ajax.reload(null, false);
            toastr.success(r.success);
        });
    });

    /* ════════════════════════════════════════
       Position Badge → Modal
    ════════════════════════════════════════ */
    $(document).on('click', '.nl-pos-badge', function () {
        openPositionModal($(this).data('id'), $(this).data('pos'), $(this).data('title'));
    });

    $('#amPosition').on('click', function () {
        closeMenu();
        openPositionModal($(this).data('id'), $(this).data('pos'), $(this).data('title'));
    });

    function openPositionModal(id, pos, title) {
        $('#pmLeadId').val(id);
        $('#pmPosition').val(pos || '');
        $('#pmNewsTitle').text(title || '—');
        $('#positionModal').modal('show');
    }

    $('#btnSavePosition').on('click', function () {
        var id  = $('#pmLeadId').val();
        var pos = $('#pmPosition').val();
        if (!pos || pos < 1) { toastr.error('Please enter a valid position!'); return; }
        $.get(ROUTE, { update_position: true, lead_id: id, position: pos }, function (r) {
            $('#positionModal').modal('hide');
            table.ajax.reload(null, false);
            toastr.success(r.success || 'Position updated!');
        }).fail(function () { toastr.error('Something went wrong!'); });
    });

    /* ════════════════════════════════════════
       Add Lead News Modal
    ════════════════════════════════════════ */
    $('#btnAddLeadNews').on('click', function () {
        if ($.fn.select2) $('#addNewsSelect').val(null).trigger('change');
        else $('#addNewsSelect').val('');
        $('#addNewsPosition').val('');
        $('#addLeadModal').modal('show');
    });

    if ($.fn.select2) {
        $('#addNewsSelect').select2({
            dropdownParent: $('#addLeadModal'),
            placeholder   : '-- Search and select news --',
            allowClear    : true,
            width         : '100%'
        });
    }

    $('#btnConfirmAdd').on('click', function () {
        var newsId = $('#addNewsSelect').val();
        var pos    = $('#addNewsPosition').val();
        if (!newsId) { toastr.error('Please select a news article!'); return; }
        $.get(ROUTE, { add_news_id: newsId, add_position: pos || '' }, function (r) {
            $('#addLeadModal').modal('hide');
            table.ajax.reload();
            toastr.success(r.success || 'News added to lead!');
        }).fail(function () { toastr.error('Something went wrong!'); });
    });

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

    /* ════════════════════════════════════════
       Single Delete
    ════════════════════════════════════════ */
    $('#amDelete').on('click', function () {
        closeMenu();
        var id = $(this).data('id');
        if (!confirm('Remove this news from lead list?')) return;
        $.get(ROUTE, { delete_id: id }, function (r) {
            table.ajax.reload(null, false);
            toastr.success(r.success);
        });
    });

    /* ════════════════════════════════════════
       Bulk Actions
    ════════════════════════════════════════ */
    $('#nlSelectAll').on('change', function () {
        $('#leadTable 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('Remove ' + ids.length + ' news from lead?')) return;
        $.get(ROUTE, { selected_ids: ids }, function (r) {
            table.ajax.reload(null, false); toastr.success(r.success);
            $('#nlSelectAll').prop('checked', false); toggleBulkBar();
        });
    });

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

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

});
</script>
@endsection