@extends('admin.layouts.master')

@section('title', 'User 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">
<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); }

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

/* ── Avatar ── */
.usr-avatar { width:36px; height:36px; border-radius:50%; border:2px solid var(--line); object-fit:cover; transition:transform .18s; }
.usr-avatar:hover { transform:scale(1.12); }

/* ── User Name Cell ── */
.usr-name  { font-size:13px; font-weight:700; color:var(--ink); line-height:1.3; }
.usr-email { font-size:11.5px; color:var(--muted); margin-top:2px; }

/* ── Badge ── */
.nl-badge { display:inline-flex; align-items:center; padding:3px 9px; border-radius:20px; font-size:11px; font-weight:700; white-space:nowrap; }
.nl-badge-acc   { background:color-mix(in srgb,var(--acc) 12%,transparent); color:var(--acc); }
.nl-badge-muted { background:rgba(0,0,0,.06); color:var(--muted); }

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

/* ── 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:190px; 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-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; }

.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-users"></i> User Management</h1>
        <p>Manage all system users, roles and status</p>
    </div>
    <div class="nl-header-right">
        <a href="{{ route('users.create') }}" class="nl-btn nl-btn-primary">
            <i class="fas fa-plus"></i> New User
        </a>
    </div>
</div>

{{-- Stats --}}
<div class="nl-stats">
    <div class="nl-stat-item">
        <div class="nl-stat-icon"><i class="fas fa-users"></i></div>
        <div><div class="nl-stat-val" id="statTotal">—</div><div class="nl-stat-lbl">Total Users</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-user-tag"></i></div>
        <div><div class="nl-stat-val" id="statRoles">—</div><div class="nl-stat-lbl">With Roles</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 name, email, phone...">
            </div>
            <select id="filterStatus" class="nl-select">
                <option value="">All Status</option>
                <option value="1">Active</option>
                <option value="0">Inactive</option>
            </select>
        </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 --}}
    <div class="nl-table-wrap">
        <table class="nl-table" id="usersTable">
            <thead>
                <tr>
                    <th style="width:36px;"><input type="checkbox" id="nlSelectAll" class="nl-check"></th>
                    <th style="width:50px;">Photo</th>
                    <th>Name / Email</th>
                    <th style="width:130px;">Phone</th>
                    <th style="width:160px;">Designation</th>
                    <th style="width:120px;">Status</th>
                    <th style="width:140px;">Created At</th>
                    <th style="width:46px;text-align:center;">Action</th>
                </tr>
            </thead>
            <tbody id="usersTableBody"></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>
    <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">
    <a class="nl-menu-item" id="amEdit" href="#">
        <i class="fas fa-edit" style="color:#f59e0b"></i> Edit User
    </a>
    <button class="nl-menu-item" id="amToggle">
        <i class="fas fa-toggle-on" style="color:#10b981"></i> Toggle Status
    </button>
</div>

@endsection


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

    var CSRF  = '{{ csrf_token() }}';
    var ROUTE = '{{ route("users.index") }}';

    /* ════════════════════════════════════════
       DataTable Init — server-side
    ════════════════════════════════════════ */
    var table = $('#usersTable').DataTable({
        processing  : false,
        serverSide  : true,
        responsive  : false,
        lengthChange: false,
        searching   : false,
        autoWidth   : false,
        pageLength  : 20,
        ajax: {
            url : ROUTE,
            type: 'GET',
            data: function (d) {
                d.search_query = $('#nlSearch').val();
                d.status       = $('#filterStatus').val();
            },
            dataSrc: function (json) {
                if (json.stats) {
                    $('#statTotal').text(json.stats.total    ?? '—');
                    $('#statActive').text(json.stats.active  ?? '—');
                    $('#statRoles').text(json.stats.roles    ?? '—');
                    $('#statInactive').text(json.stats.inactive ?? '—');
                }
                return json.data;
            }
        },
        columns: [
            { data: 'checkbox',    orderable: false, searchable: false, width: '36px'  },
            { data: 'photo',       orderable: false, searchable: false, width: '50px'  },
            { data: 'name',        orderable: true                                     },
            { data: 'phone',       orderable: false, searchable: false, width: '130px' },
            { data: 'designation', orderable: false, searchable: false, width: '160px' },
            { data: 'status',      orderable: false, searchable: false, width: '120px' },
            { data: 'created_at',  orderable: true,                     width: '140px' },
            { data: 'action',      orderable: false, searchable: false, width: '46px'  },
        ],
        order : [[6, 'desc']],
        dom   : '<"nl-dt-hidden-pg"p>t',
        language: {
            emptyTable : '<div class="nl-empty"><i class="fas fa-users"></i><p>No users found</p></div>',
            zeroRecords: '<div class="nl-empty"><i class="fas fa-search"></i><p>No matching users</p></div>',
        },
        drawCallback: function () {
            renderFooter();
            toggleBulkBar();
        }
    });

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

    /* ════════════════════════════════════════
       Footer Pagination
    ════════════════════════════════════════ */
    function renderFooter() {
        var api      = table.page.info();
        var total    = api.recordsTotal, filtered = api.recordsDisplay;
        var page     = api.page, pages = api.pages;
        var start    = api.start + 1, 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 / Filter / Refresh
    ════════════════════════════════════════ */
    var filterTimer;
    $('#nlSearch, #filterStatus').on('input change', 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; }

        $('#amEdit').attr('href', $btn.data('edit'));
        $('#amToggle').data('id', $btn.data('id'));

        $menu.appendTo('body');
        var rect = this.getBoundingClientRect();
        var left = rect.right + window.scrollX - 190;
        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 — inline row click
    ════════════════════════════════════════ */
    $(document).on('click', '.nl-status', function () {
        var id = $(this).data('id');
        $.ajax({
            url : '/users/' + id + '/toggle-status',
            type: 'POST',
            data: { _token: CSRF },
            success: function () {
                table.ajax.reload(null, false);
                showToast('success', 'Status changed successfully');
            },
            error: function () { showToast('error', 'Something went wrong!'); }
        });
    });

    /* Action menu toggle */
    $('#amToggle').on('click', function () {
        closeMenu();
        var id = $(this).data('id');
        $.ajax({
            url : '/users/' + id + '/toggle-status',
            type: 'POST',
            data: { _token: CSRF },
            success: function () {
                table.ajax.reload(null, false);
                showToast('success', 'Status changed successfully');
            },
            error: function () { showToast('error', 'Something went wrong!'); }
        });
    });

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

    $('#nlBulkActivate').on('click', function () {
        var ids = getSelected(); if (!ids.length) return;
        $.post('{{ route("users.bulk-status") }}', { _token: CSRF, ids: ids, status: 1 }, function () {
            table.ajax.reload(null, false);
            showToast('success', ids.length + ' users activated');
            $('#nlSelectAll').prop('checked', false); toggleBulkBar();
        }).fail(function () { showToast('error', 'Something went wrong!'); });
    });

    $('#nlBulkDeactivate').on('click', function () {
        var ids = getSelected(); if (!ids.length) return;
        $.post('{{ route("users.bulk-status") }}', { _token: CSRF, ids: ids, status: 0 }, function () {
            table.ajax.reload(null, false);
            showToast('success', ids.length + ' users deactivated');
            $('#nlSelectAll').prop('checked', false); toggleBulkBar();
        }).fail(function () { showToast('error', 'Something went wrong!'); });
    });

});
</script>
@endsection