@extends('admin.layouts.master')

@section('title', 'City Management')

@section('css')
<style>
*,*::before,*::after { box-sizing:border-box; }

/* ── Header ── */
.nl-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; padding-bottom:16px; border-bottom:2px solid var(--line); flex-wrap:wrap; gap:12px; }
.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; }

/* ── Buttons ── */
.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.pri { background:var(--acc); color:#fff; box-shadow:0 2px 8px rgba(90,103,216,.35); }
.nl-btn.pri:hover { background:var(--acc-dark); color:#fff; transform:translateY(-1px); }
.nl-btn.sec { background:var(--surface); color:var(--ink); border:1.5px solid var(--line); }
.nl-btn.sec:hover { background:var(--sb-hover-bg); border-color:var(--acc-mid); color:var(--acc); }
.nl-btn.danger { background:#ef4444; color:#fff; }
.nl-btn.danger:hover { background:#dc2626; }
.nl-btn:disabled { opacity:.5; cursor:not-allowed; }

/* ── Stats ── */
.nl-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:22px; }
@media(max-width:900px){ .nl-stats { grid-template-columns:repeat(2,1fr); } }
.nl-stat { background:var(--panel); border:1.5px solid var(--line); border-left:3px solid var(--acc); padding:14px 16px; display:flex; align-items:center; gap:12px; transition:box-shadow .2s; }
.nl-stat:hover { box-shadow:0 4px 18px rgba(90,103,216,.1); }
.nl-stat.s2 { border-left-color:#10b981; }
.nl-stat.s3 { border-left-color:#f59e0b; }
.nl-stat.s4 { border-left-color:#ef4444; }
.nl-stat-ic { width:40px; height:40px; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; border-radius:3px; background:var(--acc-soft); color:var(--acc); }
.nl-stat.s2 .nl-stat-ic { background:rgba(16,185,129,.12); color:#10b981; }
.nl-stat.s3 .nl-stat-ic { background:rgba(245,158,11,.12); color:#f59e0b; }
.nl-stat.s4 .nl-stat-ic { background:rgba(239,68,68,.12); color:#ef4444; }
.nl-stat-val { font-size:24px; 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 { 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.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:spin .75s linear infinite; }
@keyframes 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: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 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: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; 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); }

/* ── Table ── */
.nl-table-wrap { overflow-x:auto; }
table.nl-tbl { width:100% !important; border-collapse:collapse; font-size:13px; }
table.nl-tbl 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; }
table.nl-tbl thead th.sorting::after      { content:' ⇅'; opacity:.3; font-size:10px; }
table.nl-tbl thead th.sorting_asc::after  { content:' ↑'; color:var(--acc); font-size:10px; }
table.nl-tbl thead th.sorting_desc::after { content:' ↓'; color:var(--acc); font-size:10px; }
table.nl-tbl tbody td { padding:10px 14px !important; border-bottom:1px solid var(--line) !important; vertical-align:middle !important; background:var(--panel) !important; }
table.nl-tbl tbody tr:last-child td { border-bottom:none !important; }
table.nl-tbl tbody tr:hover td { background:var(--sb-hover-bg) !important; }
table.nl-tbl tbody tr { animation:rowIn .2s ease both; }
@keyframes rowIn { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }

/* ── Badge ── */
.nl-badge { display:inline-flex; align-items:center; gap:4px; 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.green { background:rgba(16,185,129,.1); color:#10b981; }
.nl-badge.muted { background:rgba(0,0,0,.06); color:var(--muted); }

/* ── Action btns ── */
.tac { width:28px; height:28px; border:1.5px solid var(--line); background:var(--surface); color:var(--muted); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; font-size:11px; border-radius:3px; transition:all .14s; }
.tac:hover { background:var(--acc-soft); color:var(--acc); border-color:var(--acc-mid); }
.tac.del:hover { background:rgba(239,68,68,.1); color:#ef4444; border-color:#ef4444; }

/* ── Footer ── */
.nl-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-pg { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
#nl-pg .pgb { 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-pg .pgb:hover:not(.dis):not(.act):not(.ell) { background:var(--sb-hover-bg); border-color:var(--acc-mid); color:var(--acc); }
#nl-pg .pgb.act   { background:var(--acc); border-color:var(--acc); color:#fff; }
#nl-pg .pgb.dis   { opacity:.4; cursor:not-allowed; pointer-events:none; }
#nl-pg .pgb.ell   { border-color:transparent; background:transparent; cursor:default; pointer-events:none; }

/* ── Bulk Bar ── */
.nl-bulk { 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.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); }
.nl-bulk-del  { background:rgba(239,68,68,.12); color:#ef4444; }
.nl-bulk-cls  { 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-cls:hover { background:rgba(239,68,68,.1); color:#ef4444; }

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

/* ── Modal ── */
.vc-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1000; align-items:center; justify-content:center; padding:16px; }
.vc-overlay.show { display:flex; }
.vc-modal { background:var(--panel); border:1.5px solid var(--line); width:100%; max-width:560px; border-radius:4px; overflow:hidden; box-shadow:0 20px 56px rgba(0,0,0,.22); animation:mIn .18s ease; max-height:92vh; display:flex; flex-direction:column; }
.vc-modal-sm { max-width:420px; }
@keyframes mIn { from{transform:scale(.95) translateY(-8px);opacity:0} to{transform:scale(1) translateY(0);opacity:1} }
.vc-modal-hd { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; background:var(--surface); border-bottom:1.5px solid var(--line); flex-shrink:0; }
.vc-modal-hd h3 { font-size:15px; font-weight:700; color:var(--ink); margin:0; display:flex; align-items:center; gap:9px; }
.vc-modal-hd h3 i { color:var(--acc); }
.vc-modal-close { width:28px; height:28px; border:1.5px solid var(--line); background:var(--surface); color:var(--muted); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:13px; border-radius:3px; transition:all .14s; }
.vc-modal-close:hover { background:rgba(239,68,68,.1); color:#ef4444; border-color:#ef4444; }
.vc-modal-body { padding:20px; overflow-y:auto; flex:1; }
.vc-modal-ft { padding:13px 20px; background:var(--surface); border-top:1.5px solid var(--line); display:flex; gap:8px; justify-content:flex-end; flex-shrink:0; }

/* form */
.vc-fld { margin-bottom:15px; }
.vc-fld label { display:block; font-size:10.5px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px; }
.vc-fld label .req { color:#ef4444; margin-left:2px; }
.vc-inp { width:100%; height:38px; padding:0 11px; border:1.5px solid var(--line); background:var(--surface); color:var(--ink); font-size:13px; outline:none; border-radius:3px; transition:border-color .14s; }
.vc-inp:focus { border-color:var(--acc); }
.vc-inp.err { border-color:#ef4444 !important; }
.vc-err { font-size:11.5px; color:#ef4444; margin-top:3px; display:none; }
.vc-row2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:480px){ .vc-row2 { grid-template-columns:1fr; } }

/* delete confirm */
.del-body { padding:28px 20px; text-align:center; }
.del-body .del-ic { font-size:40px; color:#ef4444; opacity:.75; display:block; margin-bottom:16px; }
.del-body h4 { font-size:16px; font-weight:700; color:var(--ink); margin:0 0 8px; }
.del-body p  { font-size:13px; color:var(--muted); margin:0; line-height:1.6; }

/* ── Toast ── */
#nlToasts { position:fixed; top:16px; right:16px; z-index:9999; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
.nl-toast { display:flex; align-items:center; gap:10px; padding:11px 16px; max-width:340px; background:var(--panel); border:1.5px solid var(--line); border-radius:3px; box-shadow:0 4px 18px rgba(0,0,0,.12); font-size:13px; font-weight:600; color:var(--ink); pointer-events:auto; animation:tIn .18s ease; }
@keyframes tIn { from{transform:translateX(24px);opacity:0} to{transform:translateX(0);opacity:1} }
.nl-toast.s { border-left:3px solid #10b981; } .nl-toast.s i { color:#10b981; }
.nl-toast.e { border-left:3px solid #ef4444; } .nl-toast.e i { color:#ef4444; }
.nl-toast.w { border-left:3px solid #f59e0b; } .nl-toast.w i { color:#f59e0b; }

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


@section('content')
<div id="nlToasts"></div>

{{-- Header --}}
<div class="nl-header">
    <div class="nl-header-left">
        <h1><i class="fas fa-city"></i> City Management</h1>
        <p>Manage all cities and their divisions</p>
    </div>
    <button class="nl-btn pri" id="btnCreate">
        <i class="fas fa-plus"></i> New City
    </button>
</div>

{{-- Stats --}}
<div class="nl-stats">
    <div class="nl-stat ">
        <div class="nl-stat-ic"><i class="fas fa-map-marked-alt"></i></div>
        <div><div class="nl-stat-val" id="sDivision">—</div><div class="nl-stat-lbl">Divisions</div></div>
    </div>

    <div class="nl-stat s2">
        <div class="nl-stat-ic"><i class="fas fa-city"></i></div>
        <div><div class="nl-stat-val" id="sTotal">—</div><div class="nl-stat-lbl">Total Cities</div></div>
    </div>

    <div class="nl-stat s3">
        <div class="nl-stat-ic"><i class="fas fa-layer-group"></i></div>
        <div><div class="nl-stat-val" id="sUpazila">—</div><div class="nl-stat-lbl">Total Upazilas</div></div>
    </div>
    <div class="nl-stat s4">
        <div class="nl-stat-ic"><i class="fas fa-users"></i></div>
        <div><div class="nl-stat-val" id="sPopulation">—</div><div class="nl-stat-lbl">Total Population</div></div>
    </div>
</div>

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

    <div class="nl-loader 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...">
            </div>
            <select id="filterDivision" class="nl-select">
                <option value="">All Divisions</option>
                @foreach($divisions as $div)
                    <option value="{{ $div->id }}">{{ $div->name }}</option>
                @endforeach
            </select>
        </div>
        <div class="nl-controls-right">
            <button class="nl-btn sec" id="nlRefresh" title="Refresh">
                <i class="fas fa-sync-alt"></i>
            </button>
        </div>
    </div>

    {{-- Table --}}
    <div class="nl-table-wrap">
        <table class="nl-tbl" id="cityTable">
            <thead>
                <tr>
                    <th style="width:36px;"><input type="checkbox" id="selectAll" class="nl-check"></th>
                    <th style="width:50px;">#</th>
                    <th>Name (EN / বাংলা)</th>
                    <th style="width:160px;">Division</th>
                    <th style="width:130px;">Upazilas</th>
                    <th style="width:140px;">Population</th>
                    <th style="width:80px;text-align:center;">Actions</th>
                </tr>
            </thead>
            <tbody id="cityTableBody"></tbody>
        </table>
    </div>

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


{{-- Bulk Bar --}}
<div class="nl-bulk" id="nlBulk">
    <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="nlBulkDel"><i class="fas fa-trash"></i> Delete</button>
    <div class="nl-bulk-sep"></div>
    <button class="nl-bulk-cls" id="nlBulkClose"><i class="fas fa-times"></i></button>
</div>


{{-- CREATE / EDIT MODAL --}}
<div class="vc-overlay" id="formModal">
    <div class="vc-modal">
        <div class="vc-modal-hd">
            <h3 id="fModalTitle"><i class="fas fa-plus-circle"></i> New City</h3>
            <div class="vc-modal-close" id="closeForm"><i class="fas fa-times"></i></div>
        </div>
        <div class="vc-modal-body">
            <input type="hidden" id="fId">

            <div class="vc-row2">
                <div class="vc-fld">
                    <label>Name (EN) <span class="req">*</span></label>
                    <input type="text" class="vc-inp" id="fEnName" placeholder="English name">
                    <div class="vc-err" id="errEnName">English name is required</div>
                </div>
                <div class="vc-fld">
                    <label>Name (বাংলা) <span class="req">*</span></label>
                    <input type="text" class="vc-inp" id="fName" placeholder="বাংলা নাম">
                    <div class="vc-err" id="errName">বাংলা নাম আবশ্যক</div>
                </div>
            </div>

            <div class="vc-row2">
                <div class="vc-fld">
                    <label>Division <span class="req">*</span></label>
                    <select class="vc-inp" id="fDivision">
                        <option value="">— Select Division —</option>
                        @foreach($divisions as $div)
                            <option value="{{ $div->id }}">{{ $div->name }}</option>
                        @endforeach
                    </select>
                    <div class="vc-err" id="errDivision">Division is required</div>
                </div>
                <div class="vc-fld">
                    <label>Population</label>
                    <input type="number" class="vc-inp" id="fPopulation" placeholder="e.g. 5000000" min="0">
                </div>
            </div>
        </div>
        <div class="vc-modal-ft">
            <button class="nl-btn sec" id="cancelForm">Cancel</button>
            <button class="nl-btn pri" id="submitBtn">
                <i class="fas fa-save"></i>
                <span id="submitLabel">Create City</span>
            </button>
        </div>
    </div>
</div>


{{-- DELETE CONFIRM MODAL --}}
<div class="vc-overlay" id="delModal">
    <div class="vc-modal vc-modal-sm">
        <div class="vc-modal-hd">
            <h3><i class="fas fa-trash"></i> Delete City</h3>
            <div class="vc-modal-close" id="closeDel"><i class="fas fa-times"></i></div>
        </div>
        <div class="del-body">
            <i class="fas fa-exclamation-triangle del-ic"></i>
            <h4>Are you sure?</h4>
            <p>You are about to delete <strong id="delName"></strong>.<br>
            <span style="color:#ef4444;font-weight:700">This cannot be undone.</span></p>
        </div>
        <div class="vc-modal-ft">
            <button class="nl-btn sec" id="cancelDel">Cancel</button>
            <button class="nl-btn danger" id="confirmDel">
                <i class="fas fa-trash"></i>
                <span id="delBtnLabel">Yes, Delete</span>
            </button>
        </div>
    </div>
</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>
$(function () {

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

    /* ════════════════════════════════════════
       Toast
    ════════════════════════════════════════ */
    var TI = { s:'fa-check-circle', e:'fa-times-circle', w:'fa-exclamation-triangle' };
    function toast(type, msg) {
        var el = $('<div class="nl-toast ' + type + '"><i class="fas ' + TI[type] + '"></i><span>' + msg + '</span></div>');
        $('#nlToasts').append(el);
        setTimeout(function () {
            el.css({ transition:'all .2s', opacity:0, transform:'translateX(24px)' });
            setTimeout(function () { el.remove(); }, 220);
        }, 3500);
    }

    /* ════════════════════════════════════════
       DataTable
    ════════════════════════════════════════ */
    var table = $('#cityTable').DataTable({
        processing  : false,
        serverSide  : true,
        lengthChange: false,
        searching   : false,
        autoWidth   : false,
        pageLength  : 20,
        ajax: {
            url : ROUTE,
            type: 'GET',
            data: function (d) {
                d.search_query  = $('#nlSearch').val();
                d.division_id   = $('#filterDivision').val();
            },
            dataSrc: function (json) {
                if (json.stats) {
                    $('#sTotal').text(json.stats.total       ?? '—');
                    $('#sDivision').text(json.stats.divisions ?? '—');
                    $('#sUpazila').text(json.stats.upazilas  ?? '—');
                    $('#sPopulation').text(json.stats.population ?? '—');
                }
                return json.data;
            }
        },
        columns: [
            { data: 'checkbox',  orderable: false, searchable: false, width: '36px'  },
            { data: 'row_num',   orderable: false, searchable: false, width: '50px'  },
            { data: 'name',      orderable: true                                     },
            { data: 'division',  orderable: false, searchable: false, width: '160px' },
            { data: 'upazilas',  orderable: false, searchable: false, width: '130px' },
            { data: 'population',orderable: false, searchable: false, width: '140px' },
            { data: 'action',    orderable: false, searchable: false, width: '80px'  },
        ],
        order : [[2, 'asc']],
        dom   : '<"nl-dt-hidden-pg"p>t',
        language: {
            emptyTable : '<div style="text-align:center;padding:48px;color:var(--muted)"><i class="fas fa-city" style="font-size:32px;display:block;margin-bottom:12px;opacity:.3"></i><p style="font-size:14px;font-weight:600;margin:0">No cities found</p></div>',
            zeroRecords: '<div style="text-align:center;padding:48px;color:var(--muted)"><i class="fas fa-search" style="font-size:32px;display:block;margin-bottom:12px;opacity:.3"></i><p style="font-size:14px;font-weight:600;margin:0">No matching cities</p></div>',
        },
        drawCallback: function () {
            renderFooter();
            toggleBulk();
        }
    });

    $('#cityTable').on('preXhr.dt', function () { $('#nlLoader').addClass('show'); });
    $('#cityTable').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;

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

        var html = '<span class="pgb' + (page === 0 ? ' dis' : '') + '" data-page="prev"><i class="fas fa-angle-left"></i></span>';
        buildRange(page, pages).forEach(function (p) {
            html += p === '...'
                ? '<span class="pgb ell">…</span>'
                : '<span class="pgb' + (p === page ? ' act' : '') + '" data-page="' + p + '">' + (p + 1) + '</span>';
        });
        html += '<span class="pgb' + (page >= pages - 1 ? ' dis' : '') + '" data-page="next"><i class="fas fa-angle-right"></i></span>';
        $('#nl-pg').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-pg .pgb:not(.dis):not(.ell):not(.act)', 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 timer;
    $('#nlSearch, #filterDivision').on('input change', function () {
        clearTimeout(timer);
        timer = setTimeout(function () { table.ajax.reload(); }, 350);
    });

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

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

    /* ════════════════════════════════════════
       CREATE / EDIT MODAL
    ════════════════════════════════════════ */
    var editingId = null;

    /* open create */
    $('#btnCreate').on('click', function () {
        editingId = null;
        clearForm();
        $('#fModalTitle').html('<i class="fas fa-plus-circle"></i> New City');
        $('#submitLabel').text('Create City');
        $('#formModal').addClass('show');
        setTimeout(function () { $('#fEnName').focus(); }, 100);
    });

    /* open edit */
    $(document).on('click', '.btn-edit', function () {
        var id = $(this).data('id');
        $.ajax({
            url : ROUTE + '/' + id,
            type: 'GET',
            success: function (res) {
                if (!res.success) { toast('e', 'Failed to load city'); return; }
                var d = res.data;
                editingId = d.id;
                $('#fId').val(d.id);
                $('#fEnName').val(d.en_name || '');
                $('#fName').val(d.name || '');
                $('#fDivision').val(d.division_id || '');
                $('#fPopulation').val(d.population || '');
                clearErrors();
                $('#fModalTitle').html('<i class="fas fa-pen"></i> Edit City');
                $('#submitLabel').text('Update City');
                $('#formModal').addClass('show');
                setTimeout(function () { $('#fEnName').focus(); }, 100);
            },
            error: function () { toast('e', 'Network error'); }
        });
    });

    function closeForm() { $('#formModal').removeClass('show'); editingId = null; }
    $('#closeForm, #cancelForm').on('click', closeForm);
    $('#formModal').on('click', function (e) { if (e.target === this) closeForm(); });

    /* validate */
    function validate() {
        clearErrors(); var ok = true;
        if (!$('#fEnName').val().trim()) {
            $('#fEnName').addClass('err'); $('#errEnName').show(); ok = false;
        }
        if (!$('#fName').val().trim()) {
            $('#fName').addClass('err'); $('#errName').show(); ok = false;
        }
        if (!$('#fDivision').val()) {
            $('#fDivision').addClass('err'); $('#errDivision').show(); ok = false;
        }
        return ok;
    }
    function clearErrors() {
        $('.vc-inp').removeClass('err'); $('.vc-err').hide();
    }
    function clearForm() {
        $('#fId, #fEnName, #fName, #fPopulation').val('');
        $('#fDivision').val('');
        clearErrors();
    }

    /* submit */
    $('#submitBtn').on('click', function () {
        if (!validate()) return;
        var btn = $(this).prop('disabled', true);
        btn.html('<i class="fas fa-spinner fa-spin"></i> <span id="submitLabel">Saving...</span>');

        var isEdit = !!editingId;
        var data = {
            _token     : CSRF,
            en_name    : $('#fEnName').val().trim(),
            name       : $('#fName').val().trim(),
            division_id: $('#fDivision').val(),
            population : $('#fPopulation').val() || null,
        };
        if (isEdit) data._method = 'PUT';

        $.ajax({
            url : isEdit ? ROUTE + '/' + editingId : ROUTE,
            type: 'POST',
            data: data,
            success: function (res) {
                btn.prop('disabled', false)
                   .html('<i class="fas fa-save"></i> <span id="submitLabel">' + (isEdit ? 'Update City' : 'Create City') + '</span>');
                if (res.success) {
                    toast('s', res.message || 'Saved successfully');
                    closeForm();
                    table.ajax.reload(null, false);
                } else {
                    toast('e', res.message || 'Operation failed');
                }
            },
            error: function (xhr) {
                btn.prop('disabled', false)
                   .html('<i class="fas fa-save"></i> <span id="submitLabel">' + (isEdit ? 'Update City' : 'Create City') + '</span>');
                if (xhr.status === 422) {
                    var errors = xhr.responseJSON?.errors || {};
                    Object.values(errors).forEach(function (m) { toast('w', m[0]); });
                } else {
                    toast('e', 'Network error');
                }
            }
        });
    });

    /* ════════════════════════════════════════
       DELETE MODAL
    ════════════════════════════════════════ */
    var deleteId = null;

    $(document).on('click', '.btn-del', function () {
        deleteId = $(this).data('id');
        $('#delName').text('"' + $(this).data('name') + '"');
        $('#delModal').addClass('show');
    });

    function closeDel() { $('#delModal').removeClass('show'); deleteId = null; }
    $('#closeDel, #cancelDel').on('click', closeDel);
    $('#delModal').on('click', function (e) { if (e.target === this) closeDel(); });

    $('#confirmDel').on('click', function () {
        if (!deleteId) return;
        $(this).prop('disabled', true)
               .html('<i class="fas fa-spinner fa-spin"></i> <span id="delBtnLabel">Deleting...</span>');

        $.ajax({
            url : ROUTE + '/' + deleteId,
            type: 'POST',
            data: { _token: CSRF, _method: 'DELETE' },
            success: function (res) {
                $('#confirmDel').prop('disabled', false)
                               .html('<i class="fas fa-trash"></i> <span id="delBtnLabel">Yes, Delete</span>');
                if (res.success) {
                    toast('s', res.message || 'City deleted');
                    closeDel();
                    table.ajax.reload(null, false);
                } else {
                    toast('e', res.message || 'Delete failed');
                }
            },
            error: function () {
                $('#confirmDel').prop('disabled', false)
                               .html('<i class="fas fa-trash"></i> <span id="delBtnLabel">Yes, Delete</span>');
                toast('e', 'Network error');
            }
        });
    });

    /* ════════════════════════════════════════
       CHECKBOX / BULK
    ════════════════════════════════════════ */
    $('#selectAll').on('change', function () {
        $('#cityTable tbody .nl-check').prop('checked', this.checked);
        toggleBulk();
    });
    $(document).on('change', '.nl-check', function () {
        if (!this.checked) $('#selectAll').prop('checked', false);
        toggleBulk();
    });

    function getSelected() {
        return $('.nl-check:checked').map(function () { return $(this).val(); }).get();
    }
    function toggleBulk() {
        var n = getSelected().length;
        $('#nlBulkCount').text(n);
        n > 0 ? $('#nlBulk').addClass('show') : $('#nlBulk').removeClass('show');
    }

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

    $('#nlBulkDel').on('click', function () {
        var ids = getSelected();
        if (!ids.length || !confirm('Delete ' + ids.length + ' cities?')) return;
        $.ajax({
            url : ROUTE + '/bulk-delete',
            type: 'POST',
            data: { _token: CSRF, ids: ids },
            success: function (res) {
                table.ajax.reload(null, false);
                toast('s', res.message || ids.length + ' cities deleted');
                $('.nl-check, #selectAll').prop('checked', false); toggleBulk();
            },
            error: function () { toast('e', 'Network error'); }
        });
    });

    /* ESC closes modals */
    $(document).on('keydown', function (e) {
        if (e.key !== 'Escape') return;
        closeForm(); closeDel();
    });

});
</script>
@endsection