@extends('admin.layouts.master')

@section('title', 'Manage Categories')

@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>
/* ════════════════════════════════════════════
   CATEGORY — News datatable pattern
════════════════════════════════════════════ */

.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:8px; }
.nl-btn-primary   { background:var(--acc); color:#fff; box-shadow:0 2px 8px rgba(90,103,216,.3); }
.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 — 5টি card ── */
.nl-stats { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:22px; }
@media(max-width:1024px){ .nl-stats { grid-template-columns:repeat(3,1fr); } }
@media(max-width:600px) { .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; border-radius:10px; transition:box-shadow .2s; }
.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:#8b5cf6; }
.nl-stat-item.s5 { border-left-color:#3b82f6; }
.nl-stat-icon { width:38px; height:38px; background:var(--acc-soft); border-radius:9px; 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(139,92,246,.12);  color:#8b5cf6; }
.nl-stat-item.s5 .nl-stat-icon { background:rgba(59,130,246,.12);  color:#3b82f6; }
.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); border-radius:12px; 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; 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; }
.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; }

/* ── 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 { 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; }
.nl-filter-item select: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); }

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

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

/* Name + bn_name + slug একসাথে */
.nl-cat-name { font-size:13px; font-weight:700; color:var(--ink); }
.nl-cat-bn   { font-size:11.5px; color:var(--muted); margin-top:1px; font-weight:500; }
.nl-cat-slug {
    display:inline-flex; align-items:center; gap:4px;
    margin-top:4px; padding:2px 7px;
    background:var(--acc-soft); color:var(--acc);
    font-size:10.5px; font-weight:600;
    border-radius:4px; font-family:monospace;
    max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.nl-cat-slug i { font-size:9px; flex-shrink:0; }

.nl-badge-main { display:inline-flex; align-items:center; gap:4px; padding:3px 9px; background:var(--acc-soft); color:var(--acc); font-size:11px; font-weight:700; border-radius:20px; }
.nl-badge-sub  { display:inline-flex; align-items:center; gap:4px; padding:3px 9px; background:rgba(245,158,11,.1); color:#f59e0b; font-size:11px; font-weight:700; border-radius:20px; }

.nl-news-count { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; background:var(--surface); border:1.5px solid var(--line); border-radius:20px; font-size:12px; font-weight:700; color:var(--ink); }
.nl-news-count i { font-size:10px; color:var(--acc); }

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

/* ── Action ── */
.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; }
.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; 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); }
.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 rgba(90,103,216,.3); }
#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); 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-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; margin:0; }
.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; background:var(--surface) !important; }
.nl-modal .form-group    { margin-bottom:16px; }
.nl-modal .form-group:last-child { margin-bottom:0; }
.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; transition:border-color .18s,box-shadow .18s !important; width:100%; }
.nl-modal .form-control:focus { border-color:var(--acc) !important; box-shadow:0 0 0 3px rgba(90,103,216,.15) !important; }
.nl-modal .form-control::placeholder { color:var(--muted); opacity:.6; }

/* Slug preview inside modal */
.nl-slug-preview { display:flex; align-items:center; gap:6px; margin-top:6px; padding:6px 10px; background:var(--acc-soft); border-radius:6px; font-size:12px; font-family:monospace; color:var(--acc); font-weight:600; min-height:30px; }
.nl-slug-preview i { font-size:10px; flex-shrink:0; }
.nl-slug-preview span { word-break:break-all; }

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

.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('page_title', 'Manage Categories')

@section('content')

{{-- ── Header ── --}}
<div class="nl-header">
    <div class="nl-header-left">
        <h1><i class="fas fa-list-alt"></i> Manage Categories</h1>
        <p>Create and manage news categories and sub-categories</p>
    </div>
    <div class="nl-header-right">
        <button class="nl-btn nl-btn-primary" id="addBtn">
            <i class="fas fa-plus"></i> Add Category
        </button>
    </div>
</div>

{{-- ── Stats — 5টি card ── --}}
<div class="nl-stats">
    <div class="nl-stat-item">
        <div class="nl-stat-icon"><i class="fas fa-list-alt"></i></div>
        <div><div class="nl-stat-val" id="statTotal">—</div><div class="nl-stat-lbl">Total Cat.</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-layer-group"></i></div>
        <div><div class="nl-stat-val" id="statMain">—</div><div class="nl-stat-lbl">Main</div></div>
    </div>
    <div class="nl-stat-item s4">
        <div class="nl-stat-icon"><i class="fas fa-code-branch"></i></div>
        <div><div class="nl-stat-val" id="statSub">—</div><div class="nl-stat-lbl">Sub</div></div>
    </div>
    <div class="nl-stat-item s5">
        <div class="nl-stat-icon"><i class="fas fa-newspaper"></i></div>
        <div><div class="nl-stat-val" id="statTotalNews">—</div><div class="nl-stat-lbl">Total News</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 name / slug...">
            </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>Type</label>
                <select id="filter_type">
                    <option value="">All Types</option>
                    <option value="main">Main Category</option>
                    <option value="sub">Sub Category</option>
                </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>Parent Category</label>
                <select id="filter_parent">
                    <option value="">All Parents</option>
                    @foreach($parent_categories as $p)
                        <option value="{{ $p->id }}">{{ $p->name }}</option>
                    @endforeach
                </select>
            </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="categoryTable">
            <thead>
                <tr>
                    <th style="width:36px;"><input type="checkbox" id="nlSelectAll" class="nl-check"></th>
                    <th style="width:55px;">ID</th>
                    <th>Name / Slug</th>
                    <th style="width:160px;">Parent</th>
                    <th style="width:130px;">Total News</th>
                    <th style="width:110px;">Status</th>
                    <th style="width:50px;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-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>


{{-- 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>
    <div class="nl-menu-sep"></div>
    <button class="nl-menu-item danger" id="amDelete">
        <i class="fas fa-trash"></i> Delete
    </button>
</div>


{{-- Category Modal --}}
<div class="modal fade nl-modal" id="categoryModal" tabindex="-1">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitle">
                    <i class="fas fa-plus-circle"></i> Add New Category
                </h5>
                <button type="button" class="btn-close-x" data-dismiss="modal">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <form id="categoryForm">
                @csrf
                <input type="hidden" name="category_id" id="category_id">
                <div class="modal-body">

                    <div class="form-group">
                        <label>English Name <span style="color:#ef4444">*</span></label>
                        <input type="text" name="name" id="catName" class="form-control"
                               placeholder="Enter English name" required autocomplete="off">
                        {{-- Slug live preview --}}
                        <div class="nl-slug-preview" id="slugPreview">
                            <i class="fas fa-link"></i>
                            <span id="slugPreviewText">slug এখানে দেখাবে...</span>
                        </div>
                    </div>

                    <div class="form-group">
                        <label>Bangla Name</label>
                        <input type="text" name="bn_name" id="catBnName" class="form-control"
                               placeholder="বাংলা নাম লিখুন">
                    </div>

                    <div class="form-group">
                        <label>
                            Parent Category
                            <span style="font-size:10px;font-weight:400;text-transform:none;letter-spacing:0;color:var(--muted)">
                                (ফাঁকা = Main Category)
                            </span>
                        </label>
                        <select name="parent_category_id" id="catParent" class="form-control">
                            <option value="">— None (Main Category) —</option>
                            @foreach($parent_categories as $p)
                                <option value="{{ $p->id }}">{{ $p->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="form-group">
                        <label>Status</label>
                        <select name="isActive" id="catIsActive" class="form-control">
                            <option value="1">Active</option>
                            <option value="0">Inactive</option>
                        </select>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="nl-btn nl-btn-secondary" data-dismiss="modal">
                        <i class="fas fa-times"></i> Cancel
                    </button>
                    <button type="submit" class="nl-btn nl-btn-primary" id="catSaveBtn">
                        <i class="fas fa-save"></i> Save Category
                    </button>
                </div>
            </form>
        </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>
$(function () {

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

    /* ═══════════════════════════════════
       Slug helper — JS side preview only
       Server generate করে, এটা শুধু UI
    ═══════════════════════════════════ */
    function toSlug(str) {
        return str.toLowerCase()
            .trim()
            .replace(/[^\w\s-]/g, '')
            .replace(/[\s_]+/g, '-')
            .replace(/^-+|-+$/g, '');
    }

    $('#catName').on('input', function () {
        var slug = toSlug($(this).val());
        $('#slugPreviewText').text(slug || 'slug এখানে দেখাবে...');
    });

    /* ═══════════════════════════════════
       DataTable
    ═══════════════════════════════════ */
    var table = $('#categoryTable').DataTable({
        processing  : false,
        serverSide  : true,
        responsive  : true,
        lengthChange: false,
        searching   : false,
        autoWidth   : false,
        pageLength  : 10,
        ajax: {
            url : ROUTE,
            type: 'GET',
            data: function (d) {
                d.search_name   = $('#nlSearch').val();
                d.filter_type   = $('#filter_type').val();
                d.filter_status = $('#filter_status').val();
                d.filter_parent = $('#filter_parent').val();
                d.perPage       = $('#perPage').val();
            },
            dataSrc: function (json) {
                if (json.stats) {
                    $('#statTotal').text(json.stats.total       ?? '—');
                    $('#statActive').text(json.stats.active     ?? '—');
                    $('#statMain').text(json.stats.main         ?? '—');
                    $('#statSub').text(json.stats.sub           ?? '—');
                    $('#statTotalNews').text(json.stats.total_news ?? '—');
                }
                return json.data;
            }
        },
        columns: [
            { data: 'checkbox', orderable: false, searchable: false, width: '36px'  },
            { data: 'id',       orderable: true,                     width: '55px'  },
            { data: 'name',     orderable: true                                     },  // name+slug cell
            { data: 'parent',   orderable: false, searchable: false, width: '160px' },
            { data: 'news',     orderable: true,  searchable: false, width: '130px' },  // ← sortable
            { data: 'status',   orderable: false, searchable: false, width: '110px' },
            { data: 'action',   orderable: false, searchable: false, width: '50px'  },
        ],
        order : [[1, 'desc']],
        dom   : '<"nl-dt-hidden-pg"p>t',
        language: {
            emptyTable : '<div class="nl-empty"><i class="fas fa-list-alt"></i><p>No categories found</p></div>',
            zeroRecords: '<div class="nl-empty"><i class="fas fa-search"></i><p>No matching records</p></div>',
        },
        drawCallback: function () { renderFooter(); toggleBulkBar(); }
    });

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

        $('#nl-info').html(
            !filtered
                ? 'No entries found'
                : '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) {
            html += p === '...'
                ? '<span class="nl-page-btn ellipsis">…</span>'
                : '<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');
    });

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

    $('#filter_type, #filter_status, #filter_parent').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_type, #filter_status, #filter_parent').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_type').val() || $('#filter_status').val() || $('#filter_parent').val());
        $('#nlFilterToggle').toggleClass('has-filters', has);
    }

    /* ═══════════════════════════════════
       isActive Toggle
    ═══════════════════════════════════ */
    $(document).on('click', '.nl-status', function () {
        var id = $(this).data('id');
        if (!confirm('Status পরিবর্তন করবেন?')) return;
        $.post(ROUTE, {
            _token        : '{{ csrf_token() }}',
            toggle_status : 1,
            category_id   : id
        }, function (res) {
            table.ajax.reload(null, false);
            toastr && toastr.success(res.success || 'Status updated!');
        }).fail(function () {
            toastr && toastr.error('Something went wrong!');
        });
    });

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

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

        $('#amEdit').data({
            id      : $btn.data('id'),
            name    : $btn.data('name'),
            bn      : $btn.data('bn'),
            slug    : $btn.data('slug'),
            parent  : $btn.data('parent'),
            isactive: $btn.data('isactive'),
        });
        $('#amDelete').data('id', $btn.data('id')).data('name', $btn.data('name'));

        $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');
        currentBtn = $btn; menuOpen = true;
    });

    function closeMenu() {
        $menu.removeClass('show');
        if (currentBtn) currentBtn.removeClass('open');
        menuOpen = false; currentBtn = null;
    }
    $(document).on('click', function (e) {
        if (!$(e.target).closest('#nlActionMenu').length) closeMenu();
    });

    /* ═══════════════════════════════════
       Add Modal
    ═══════════════════════════════════ */
    $('#addBtn').on('click', function () {
        $('#categoryForm')[0].reset();
        $('#category_id').val('');
        $('#catIsActive').val('1');
        $('#slugPreviewText').text('slug এখানে দেখাবে...');
        $('#modalTitle').html('<i class="fas fa-plus-circle"></i> Add New Category');
        $('#catSaveBtn').html('<i class="fas fa-save"></i> Save Category');
        $('#categoryModal').modal('show');
    });

    /* ═══════════════════════════════════
       Edit — slug preview ও দেখাও
    ═══════════════════════════════════ */
    $('#amEdit').on('click', function () {
        var d = $(this).data();
        closeMenu();
        $('#category_id').val(d.id);
        $('#catName').val(d.name);
        $('#catBnName').val(d.bn || '');
        $('#catParent').val(d.parent || '');
        $('#catIsActive').val(d.isactive !== undefined ? d.isactive : 1);
        // slug preview — current slug দেখাও
        $('#slugPreviewText').text(d.slug || toSlug(d.name));
        $('#modalTitle').html('<i class="fas fa-edit"></i> Edit Category');
        $('#catSaveBtn').html('<i class="fas fa-save"></i> Update Category');
        $('#categoryModal').modal('show');
    });

    /* ═══════════════════════════════════
       Save / Update
    ═══════════════════════════════════ */
    $('#categoryForm').on('submit', function (e) {
        e.preventDefault();
        var $btn = $('#catSaveBtn');
        $btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Saving...');

        $.ajax({
            url    : ROUTE,
            method : 'POST',
            data   : $(this).serialize(),
            success: function (res) {
                $('#categoryModal').modal('hide');
                table.ajax.reload(null, false);
                toastr && toastr.success(res.success || 'Category saved! Slug: ' + (res.slug || ''));
            },
            error: function (xhr) {
                var msg = xhr.responseJSON && xhr.responseJSON.message
                    ? xhr.responseJSON.message : 'Something went wrong!';
                toastr && toastr.error(msg);
            },
            complete: function () {
                $btn.prop('disabled', false).html('<i class="fas fa-save"></i> Save Category');
            }
        });
    });

    /* ═══════════════════════════════════
       Single Delete
    ═══════════════════════════════════ */
    $('#amDelete').on('click', function () {
        var id   = $(this).data('id');
        var name = $(this).data('name');
        closeMenu();
        if (!confirm('"' + name + '" ডিলিট করবেন? এটি পূর্বাবস্থায় ফেরানো যাবে না।')) return;

        $.post(ROUTE, { _token: '{{ csrf_token() }}', delete_id: id }, function (res) {
            table.ajax.reload(null, false);
            toastr && toastr.success(res.success || 'Deleted!');
        }).fail(function (xhr) {
            var msg = xhr.responseJSON && xhr.responseJSON.error
                ? xhr.responseJSON.error : 'Delete failed!';
            toastr && toastr.error(msg);
        });
    });

    /* ═══════════════════════════════════
       Checkboxes
    ═══════════════════════════════════ */
    $('#nlSelectAll').on('change', function () {
        $('#categoryTable 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();
    });

    /* ═══════════════════════════════════
       Bulk Delete
    ═══════════════════════════════════ */
    $('#nlBulkDelete').on('click', function () {
        var ids = getSelected();
        if (!ids.length || !confirm(ids.length + 'টি category ডিলিট করবেন?')) return;
        $.post(ROUTE, { _token: '{{ csrf_token() }}', selected_ids: ids }, function (res) {
            table.ajax.reload(null, false);
            toastr && toastr.success(res.success || 'Deleted!');
            $('#nlSelectAll').prop('checked', false);
            toggleBulkBar();
        }).fail(function () {
            toastr && toastr.error('Bulk delete failed!');
        });
    });

    /* Modal X */
    $(document).on('click', '.btn-close-x', function () {
        $(this).closest('.modal').modal('hide');
    });

});
</script>
@endsection