@extends('admin.layouts.master')

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

@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>
/* ============================================================
   NEWS LIST — Premium DataTable Design
============================================================ */
/* ===== Solaiman Lipi Font ===== */
@import url('https://fonts.maateen.me/solaiman-lipi/font.css');

.nl-title-text,
.nl-reporter,
.nl-cat-badge,
.nl-location {
    font-family: 'SolaimanLipi', Arial, sans-serif !important;
}
/* ── 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);
}

/* ── Stat Strip ── */
.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; }

/* ── Main Card ── */
.nl-card {
    background: var(--panel);
    border: 1.5px solid var(--line);
    overflow: hidden;
    transition: background .3s, border-color .3s;
    position: relative; /* loader এর জন্য দরকার */
}

/* ── Loader Overlay ── */
.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 ease;
}
.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 Bar ── */
.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); }

.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;
    white-space: nowrap;
}
.nl-filter-btn:hover, .nl-filter-btn.active {
    border-color: var(--acc);
    color: var(--acc);
    background: var(--acc-soft);
}
.nl-filter-btn .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; }

/* ── Filter Panel ── */
.nl-filter-panel {
    padding: 14px 20px;
    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(140px, 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"] {
    width: 100%;
    height: 34px;
    padding: 0 10px;
    border: 1.5px solid var(--line);
    background: var(--panel);
    color: var(--ink);
    font-size: 12.5px;
    font-weight: 500;
    border-radius: 6px;
    outline: none;
    transition: border-color .18s;
}
.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); }

/* ── DataTable Styles ── */
.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;
    transition: color .18s;
}
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: ' ↑'; opacity: 1; color: var(--acc); font-size: 10px; }
table.nl-table thead th.sorting_desc::after   { content: ' ↓'; opacity: 1; 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 .25s ease both; }
@keyframes nl-row-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

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

/* ── Title cell ── */
.nl-title-text {
    font-size: 17px; font-weight: 500; color: var(--ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.45;
    margin-bottom: 4px;
}
.nl-reporter { font-size: 11.5px; color: var(--acc); font-weight: 600; display: flex; align-items: center; gap: 4px; }
.nl-reporter i { font-size: 10px; }

/* ── Category badge ── */
.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;
}

/* ── Location ── */
.nl-location { font-size: 12px; color: var(--muted); line-height: 1.5; max-width: 140px; }

/* ── Views ── */
.nl-views { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: #10b981; }
.nl-views i { font-size: 11px; }

/* ── Position Badge ── */
.nl-pos {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 30px; height: 24px; padding: 0 8px;
    font-size: 12px; font-weight: 800;
    border-radius: 6px; cursor: pointer; transition: all .18s; border: none;
}
.nl-pos.has-pos { background: rgba(90,103,216,.12); color: var(--acc); }
.nl-pos.no-pos  { background: var(--surface); color: var(--muted); border: 1.5px dashed var(--line); }
.nl-pos:hover { transform: scale(1.1); }
.nl-pos.lead-pos.has-pos { background: rgba(239,68,68,.12);  color: #ef4444; }
.nl-pos.main-pos.has-pos { background: rgba(16,185,129,.12); color: #10b981; }

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

/* ── Status Toggle ── */
.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; }

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

/* ── Action Menu ── */
.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; }

.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; }

/* ── Custom Pagination 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: 3px; }
.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-page-btn:hover:not(.disabled):not(.active) { background: var(--sb-hover-bg); border-color: var(--acc-mid); color: var(--acc); }
.nl-page-btn.active { background: var(--acc); border-color: var(--acc); color: #fff; box-shadow: 0 2px 8px rgba(90,103,216,.35); }
.nl-page-btn.disabled { color: var(--muted); background: var(--surface); cursor: not-allowed; opacity: .5; }

/* ── Floating Bulk Actions ── */
.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; }

/* ── Position Modal ── */
.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; }
.nl-modal .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;
}
.nl-modal .btn-close-x:hover { background: rgba(239,68,68,.1); color: #ef4444; }

/* ── Empty state ── */
.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; }

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


@section('content')

{{-- ── Page Header ── --}}
<div class="nl-header">
    <div class="nl-header-left">
        <h1><i class="fas fa-newspaper"></i>News Management</h1>
        <p>Manage, filter and publish all news articles</p>
    </div>
    <div class="nl-header-right">
        <a href="{{ route('news.create') }}" class="nl-btn nl-btn-primary">
            <i class="fas fa-plus"></i> Create News
        </a>
    </div>
</div>

{{-- ── Stats Strip ── --}}
<div class="nl-stats">
    <div class="nl-stat-item">
        <div class="nl-stat-icon"><i class="fas fa-newspaper"></i></div>
        <div>
            <div class="nl-stat-val" id="statTotal">—</div>
            <div class="nl-stat-lbl">Total News</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-star"></i></div>
        <div>
            <div class="nl-stat-val" id="statLead">—</div>
            <div class="nl-stat-lbl">Lead News</div>
        </div>
    </div>
    <div class="nl-stat-item s4">
        <div class="nl-stat-icon"><i class="fas fa-fire"></i></div>
        <div>
            <div class="nl-stat-val" id="statMain">—</div>
            <div class="nl-stat-lbl">Main News</div>
        </div>
    </div>
</div>

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

    {{-- ★ LOADER — nl-card এর প্রথম child হিসেবে রাখুন ★ --}}
    <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="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...">
            </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>Division</label>
                <select id="filter_division">
                    <option value="">All Divisions</option>
                    @foreach (divisions() as $div)
                        <option value="{{ $div->id }}">{{ $div->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="nl-filter-item">
                <label>City</label>
                <select id="filter_city">
                    <option value="">All Cities</option>
                    @foreach (cities() as $city)
                        <option value="{{ $city->id }}">{{ $city->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="nl-filter-item">
                <label>Upazila</label>
                <select id="filter_upazila">
                    <option value="">All Upazilas</option>
                    @foreach (upazillas() as $upz)
                        <option value="{{ $upz->id }}">{{ $upz->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="nl-filter-item">
                <label>From Date</label>
                <input type="date" id="filter_from">
            </div>
            <div class="nl-filter-item">
                <label>To Date</label>
                <input type="date" id="filter_to">
            </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="newsTable">
            <thead>
                <tr>
                    <th style="width:36px;"><input type="checkbox" id="nlSelectAll" class="nl-check"></th>
                    <th style="width:70px;">Status</th>
                    <th style="width:96px;">Thumbnail</th>
                    <th>Title / Reporter</th>
                    <th>Category</th>
                    <th>Location</th>
                    <th style="width:70px;">Views</th>
                    <th style="width:60px;">Lead</th>
                    <th style="width:60px;">Main</th>
                    <th style="width:110px;">Published</th>
                    <th style="width:46px;text-align:center;">Act</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>

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

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


{{-- ── Bulk Action 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>


{{-- ── Position Modal ── --}}
<div class="modal fade nl-modal" id="positionModal" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <form id="positionForm" method="POST">
            @csrf
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="positionModalTitle">Set 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" name="type"    id="pmType">
                    <input type="hidden" name="news_id" id="pmNewsId">
                    <div class="form-group">
                        <label>Position Number</label>
                        <input type="number" name="position" 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="submit" class="nl-btn nl-btn-primary"><i class="fas fa-save"></i> Save</button>
                </div>
            </div>
        </form>
    </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
    </a>
    <button class="nl-menu-item" id="amLead">
        <i class="fas fa-star" style="color:#ef4444"></i> Set Lead Position
    </button>
    <button class="nl-menu-item" id="amMain">
        <i class="fas fa-fire" style="color:#10b981"></i> Set Main 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> Delete
    </button>
</div>

@endsection


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

<script>
$(function () {

    /* ════════════════════════════════════════════
       DataTable Init
    ════════════════════════════════════════════ */
    var table = $('#newsTable').DataTable({
        processing  : false,
        serverSide  : true,
        responsive  : true,
        lengthChange: false,
        searching   : false,
        autoWidth   : false,
        pageLength  : 10,
        ajax: {
            url : '{{ route("news.index") }}',
            type: 'GET',
            data: function (d) {
                d.title     = $('#nlSearch').val();
                d.category  = $('#filter_category').val();
                d.division  = $('#filter_division').val();
                d.city      = $('#filter_city').val();
                d.upazila   = $('#filter_upazila').val();
                d.from_date = $('#filter_from').val();
                d.to_date   = $('#filter_to').val();
                d.perPage   = $('#perPage').val();
            },
            dataSrc: function (json) {
                if (json.stats) {
                    $('#statTotal').text(json.stats.total  ?? '—');
                    $('#statActive').text(json.stats.active ?? '—');
                    $('#statLead').text(json.stats.lead   ?? '—');
                    $('#statMain').text(json.stats.main   ?? '—');
                }
                return json.data;
            }
        },
        columns: [
            { data: 'checkbox',   orderable: false, searchable: false },
            { data: 'status',     orderable: false, searchable: false },
            { data: 'thumbnail',  orderable: false, searchable: false },
            { data: 'title' },
            { data: 'category',   orderable: false },
            { data: 'location',   orderable: false },
            { data: 'views' },
            { data: 'lead' },
            { data: 'main' },
            { data: 'created_at' },
            { data: 'action',     orderable: false, searchable: false }
        ],
        order : [[9, 'desc']],
        dom   : 't',
        language: {
            emptyTable : '<div class="nl-empty"><i class="fas fa-inbox"></i><p>No news found</p></div>',
            zeroRecords: '<div class="nl-empty"><i class="fas fa-search"></i><p>No matching records</p></div>',
        },
        drawCallback: function () {
            toggleBulkBar();
        }
    });

    /* ════════════════════════════════════════════
       Loader show → preXhr | hide + footer → xhr
    ════════════════════════════════════════════ */
    $('#newsTable').on('preXhr.dt', function () {
        $('#nlLoader').addClass('show');
    });

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

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

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

        /* Pagination */
        var $pg = $('#nlPagination').empty();
        if (pages <= 1) return;

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

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

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

    /* Smart page range: always show first, last, current ±1, ellipsis */
    function buildRange(cur, total) {
        if (total <= 7) {
            var r = [];
            for (var i = 0; i < total; i++) r.push(i);
            return r;
        }
        if (cur <= 3)         return [0, 1, 2, 3, 4, '...', total - 1];
        if (cur >= total - 4) return [0, '...', total-5, total-4, total-3, total-2, total-1];
        return [0, '...', cur - 1, cur, cur + 1, '...', total - 1];
    }

    /* ════════════════════════════════════════════
       Filters
    ════════════════════════════════════════════ */
    var filterTimer;
    $('#nlSearch').on('input', function () {
        clearTimeout(filterTimer);
        filterTimer = setTimeout(function () { table.ajax.reload(); }, 350);
    });
    $('#filter_category,#filter_division,#filter_city,#filter_upazila,#filter_from,#filter_to').on('change', function () {
        table.ajax.reload();
        updateFilterDot();
    });
    $('#perPage').on('change', function () {
        var v = parseInt($(this).val());
        table.page.len(v === -1 ? 1e4 : v).draw();
    });
    $('#nlFilterToggle').on('click', function () {
        $(this).toggleClass('active');
        $('#nlFilterPanel').toggleClass('show');
    });
    $('#nlFilterReset').on('click', function () {
        $('#filter_category,#filter_division,#filter_city,#filter_upazila,#filter_from,#filter_to').val('');
        $('#nlSearch').val('');
        $('#perPage').val('10');
        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_division').val() ||
            $('#filter_city').val() || $('#filter_upazila').val() ||
            $('#filter_from').val() || $('#filter_to').val());
        $('#nlFilterToggle').toggleClass('has-filters', has);
    }

    /* ════════════════════════════════════════════
       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'));
        $('#amLead,#amMain,#amDelete,#amCopy').data('id', $btn.data('id')).data('link', $btn.data('link'));

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

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

    function closeMenu() {
        $menu.removeClass('show');
        $('.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("news.index") }}', { toggle_status: true, news_id: id }, function (r) {
            table.ajax.reload(null, false);
            toastr.success(r.success);
        });
    });

    /* ════════════════════════════════════════════
       Position Modal
    ════════════════════════════════════════════ */
    $('#amLead').on('click', function () {
        closeMenu();
        $('#pmType').val('lead'); $('#pmNewsId').val($(this).data('id')); $('#pmPosition').val('');
        $('#positionModalTitle').text('Set Lead Position');
        $('#positionModal').modal('show');
    });
    $('#amMain').on('click', function () {
        closeMenu();
        $('#pmType').val('main'); $('#pmNewsId').val($(this).data('id')); $('#pmPosition').val('');
        $('#positionModalTitle').text('Set Main Position');
        $('#positionModal').modal('show');
    });
    $(document).on('click', '.nl-pos', function () {
        var id = $(this).data('id'), type = $(this).data('type');
        $('#pmType').val(type); $('#pmNewsId').val(id); $('#pmPosition').val('');
        $('#positionModalTitle').text('Set ' + type.charAt(0).toUpperCase() + type.slice(1) + ' Position');
        $('#positionModal').modal('show');
    });
    $('#positionForm').on('submit', function (e) {
        e.preventDefault();
        $.get('{{ url("news/main-lead/update") }}', $(this).serialize(), function () {
            $('#positionModal').modal('hide');
            table.ajax.reload(null, false);
            toastr.success('Position updated!');
        });
    });

    /* ════════════════════════════════════════════
       Copy Link
    ════════════════════════════════════════════ */
    $('#amCopy').on('click', function () {
        closeMenu();
        var link = $(this).data('link');
        navigator.clipboard
            ? navigator.clipboard.writeText(link)
            : (function () { 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('Delete this news?')) return;
        $.get('{{ route("news.index") }}', { delete_id: id }, function (r) {
            table.ajax.reload(null, false);
            toastr.success(r.success);
        });
    });

    /* ════════════════════════════════════════════
       Bulk Actions
    ════════════════════════════════════════════ */
    $('#nlSelectAll').on('change', function () {
        $('#newsTable 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 + ' news?')) return;
        $.get('{{ route("news.index") }}', { 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("news.index") }}', { 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("news.index") }}', { status_ids: ids, status_value: 0 }, function (r) {
            table.ajax.reload(null, false);
            toastr.success(r.success);
        });
    });

});
</script>
@endsection