@extends('admin.layouts.master')

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

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

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

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

.nl-stats { display:grid; grid-template-columns:repeat(3,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-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-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; }

.nl-card { background:var(--panel); border:1.5px solid var(--line); overflow:hidden; position:relative; }

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

.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:180px; max-width:260px; }
.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-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)} }

.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.amber { background:rgba(245,158,11,.1); color:#f59e0b; }
.nl-badge.muted { background:rgba(0,0,0,.06); color:var(--muted); }

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

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

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

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

.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:600px; 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; }

.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 .14px; }
.vc-inp:focus { border-color:var(--acc); }
.vc-inp.err { border-color:#ef4444 !important; }
.vc-textarea { width:100%; padding:9px 11px; border:1.5px solid var(--line); background:var(--surface); color:var(--ink); font-size:13px; outline:none; border-radius:3px; resize:vertical; min-height:80px; transition:border-color .14s; }
.vc-textarea:focus { border-color:var(--acc); }
.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:520px){ .vc-row2 { grid-template-columns:1fr; } }
.vc-section-title { font-size:10.5px; font-weight:800; color:var(--acc); text-transform:uppercase; letter-spacing:.8px; margin:18px 0 10px; padding-bottom:6px; border-bottom:1.5px solid var(--line); }

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

#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-map-pin"></i> Upazila Management</h1>
        <p>Manage all upazilas with location details</p>
    </div>
    <button class="nl-btn pri" id="btnCreate">
        <i class="fas fa-plus"></i> New Upazila
    </button>
</div>

{{-- Stats --}}
<div class="nl-stats">
    <div class="nl-stat">
        <div class="nl-stat-ic"><i class="fas fa-map-pin"></i></div>
        <div><div class="nl-stat-val" id="sTotal">—</div><div class="nl-stat-lbl">Total Upazilas</div></div>
    </div>
    <div class="nl-stat s2">
        <div class="nl-stat-ic"><i class="fas fa-map-marked-alt"></i></div>
        <div><div class="nl-stat-val" id="sDivisions">—</div><div class="nl-stat-lbl">Divisions</div></div>
    </div>
    <div class="nl-stat s3">
        <div class="nl-stat-ic"><i class="fas fa-city"></i></div>
        <div><div class="nl-stat-val" id="sCities">—</div><div class="nl-stat-lbl">Cities</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 name, code...">
            </div>
            {{-- Division filter: selecting loads cities --}}
            <select id="filterDivision" class="nl-select">
                <option value="">All Divisions</option>
                @foreach($divisions as $division)
                    <option value="{{ $division->id }}">
                        {{ $division->name }} | {{ $division->en_name }}
                    </option>
                @endforeach
            </select>
            <select id="filterCity" class="nl-select">
                <option value="">All Cities</option>
                @foreach($cities as $city)
                    <option value="{{ $city->id }}">
                        {{ $city->name }} | {{ $city->en_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="upazilaTable">
            <thead>
                <tr>
                    <th style="width:36px;"><input type="checkbox" id="selectAll" class="nl-check"></th>
                    <th style="width:50px;">#</th>
                    <th style="width:50px;">Flag</th>
                    <th>Name (EN / বাংলা)</th>
                    <th style="width:90px;">Code</th>
                    <th>Location</th>
                    <th style="width:120px;">Population</th>
                    <th style="width:90px;">Unions</th>
                    <th style="width:80px;text-align:center;">Actions</th>
                </tr>
            </thead>
            <tbody id="upazilaTableBody"></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 Upazila</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">

            {{-- Basic Info --}}
            <div class="vc-section-title"><i class="fas fa-info-circle"></i> Basic Information</div>

            <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 (বাংলা)</label>
                    <input type="text" class="vc-inp" id="fName" placeholder="বাংলা নাম">
                </div>
            </div>

            <div class="vc-row2">
                <div class="vc-fld">
                    <label>Code</label>
                    <input type="text" class="vc-inp" id="fCode" placeholder="e.g. UP-001">
                </div>
                <div class="vc-fld">
                    <label>Flag <span style="font-size:9px;font-weight:400;text-transform:none;">(emoji / URL)</span></label>
                    <input type="text" class="vc-inp" id="fFlag" placeholder="🏳 or https://...">
                </div>
            </div>

            {{-- Location --}}
            <div class="vc-section-title"><i class="fas fa-map-marker-alt"></i> Location</div>

            <div class="vc-row2">
                <div class="vc-fld">
                    <label>Division</label>
                    <select class="vc-inp" id="fDivision">
                        <option value="">Select Division</option>
                        @foreach($divisions as $division)
                            <option value="{{ $division->id }}">
                                {{ $division->name }} | {{ $division->en_name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="vc-fld">
                    <label>City / District</label>
                    <select class="vc-inp" id="fCity">
                        <option value="">Select City</option>
                    </select>
                </div>
            </div>

            {{-- Details --}}
            <div class="vc-section-title"><i class="fas fa-list-alt"></i> Details</div>

            <div class="vc-row2">
                <div class="vc-fld">
                    <label>Population</label>
                    <input type="text" class="vc-inp" id="fPopulation" placeholder="e.g. 250000">
                </div>
                <div class="vc-fld">
                    <label>Unions</label>
                    <input type="text" class="vc-inp" id="fUnions" placeholder="e.g. 12">
                </div>
            </div>

            <div class="vc-fld">
                <label>Stream Link</label>
                <input type="text" class="vc-inp" id="fStreamLink" placeholder="https://...">
            </div>

            <div class="vc-fld">
                <label>History</label>
                <textarea class="vc-textarea" id="fHistory" placeholder="Brief history (optional)"></textarea>
            </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 Upazila</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 Upazila</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("upazila.index") }}';
    var URL_CITIES = '{{ route("upazila.get-cities") }}';

    /* ════ 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 = $('#upazilaTable').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.filter_division = $('#filterDivision').val();
                d.filter_city     = $('#filterCity').val();
            },
            dataSrc: function (json) {
                if (json.stats) {
                    $('#sTotal').text(json.stats.total       ?? '—');
                    $('#sDivisions').text(json.stats.divisions ?? '—');
                    $('#sCities').text(json.stats.cities      ?? '—');
                }
                return json.data;
            }
        },
        columns: [
            { data: 'checkbox',   orderable: false, searchable: false, width: '36px'  },
            { data: 'row_num',    orderable: false, searchable: false, width: '50px'  },
            { data: 'flag',       orderable: false, searchable: false, width: '50px'  },
            { data: 'name',       orderable: true                                     },
            { data: 'code',       orderable: false, searchable: false, width: '90px'  },
            { data: 'location',   orderable: false, searchable: false                 },
            { data: 'population', orderable: false, searchable: false, width: '120px' },
            { data: 'unions',     orderable: false, searchable: false, width: '90px'  },
            { data: 'action',     orderable: false, searchable: false, width: '80px'  },
        ],
        order : [[3, 'asc']],
        dom   : '<"nl-dt-hidden-pg"p>t',
        language: {
            emptyTable : '<div style="text-align:center;padding:48px;color:var(--muted)"><i class="fas fa-map-pin" style="font-size:32px;display:block;margin-bottom:12px;opacity:.3"></i><p style="font-size:14px;font-weight:600;margin:0">No upazilas 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 upazilas</p></div>',
        },
        drawCallback: function () { renderFooter(); toggleBulk(); }
    });

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

    /* ════ Filter: Division → load cities dynamically ════ */
    $('#filterDivision').on('change', function () {
        var did = $(this).val();
        $('#filterCity').empty().append('<option value="">All Cities</option>');
        if (did) {
            $.get(URL_CITIES, { division_id: did }, function (data) {
                $.each(data, function (i, item) {
                    var label = (item.name && item.en_name)
                        ? item.name + ' | ' + item.en_name
                        : (item.name || item.en_name);
                    $('#filterCity').append('<option value="' + item.id + '">' + label + '</option>');
                });
            });
        }
        table.ajax.reload();
    });

    /* ════ Search / filterCity / Refresh ════ */
    var timer;
    $('#nlSearch, #filterCity').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'); });
    });

    /* ════ Helpers for modal dropdowns ════ */
    function populateCityDropdown(selector, data, selectedId) {
        var $el = $(selector).empty().append('<option value="">Select City</option>');
        $.each(data, function (i, item) {
            var label = (item.name && item.en_name)
                ? item.name + ' | ' + item.en_name
                : (item.name || item.en_name);
            $el.append('<option value="' + item.id + '"' + (item.id == selectedId ? ' selected' : '') + '>' + label + '</option>');
        });
    }

    function resetCityDropdown() {
        $('#fCity').empty().append('<option value="">Select City</option>');
    }

    /* ════ Modal: Division → City cascade ════ */
    $('#fDivision').on('change', function () {
        var did = $(this).val();
        resetCityDropdown();
        if (!did) return;
        $.get(URL_CITIES, { division_id: did }, function (data) {
            populateCityDropdown('#fCity', data, null);
        });
    });

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

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

    $(document).on('click', '.btn-edit', function () {
        var id = $(this).data('id');
        $.get(ROUTE + '/' + id, function (res) {
            if (!res.success) { toast('e', 'Failed to load upazila'); return; }
            var d = res.data;
            editingId = d.id;
            $('#fId').val(d.id);
            $('#fEnName').val(d.en_name || '');
            $('#fName').val(d.name || '');
            $('#fCode').val(d.code || '');
            $('#fFlag').val(d.flag || '');
            $('#fPopulation').val(d.population || '');
            $('#fUnions').val(d.unions || '');
            $('#fStreamLink').val(d.stream_link || '');
            $('#fHistory').val(d.history || '');

            /* Set division, then load cities and select the saved city */
            $('#fDivision').val(d.division_id || '');
            resetCityDropdown();

            if (d.division_id) {
                $.get(URL_CITIES, { division_id: d.division_id }, function (cities) {
                    populateCityDropdown('#fCity', cities, d.city_id);
                });
            }

            clearErrors();
            $('#fModalTitle').html('<i class="fas fa-pen"></i> Edit Upazila');
            $('#submitLabel').text('Update Upazila');
            $('#formModal').addClass('show');
            setTimeout(function () { $('#fEnName').focus(); }, 100);
        }).fail(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(); });

    function validate() {
        clearErrors();
        var ok = true;
        if (!$('#fEnName').val().trim()) {
            $('#fEnName').addClass('err'); $('#errEnName').show(); ok = false;
        }
        return ok;
    }
    function clearErrors() { $('.vc-inp').removeClass('err'); $('.vc-err').hide(); }
    function clearForm() {
        $('#fId, #fEnName, #fName, #fCode, #fFlag, #fPopulation, #fUnions, #fStreamLink, #fHistory').val('');
        $('#fDivision').val('');
        resetCityDropdown();
        clearErrors();
    }

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

        var isEdit = !!editingId;
        var data = {
            _token      : CSRF,
            en_name     : $('#fEnName').val().trim(),
            name        : $('#fName').val().trim(),
            code        : $('#fCode').val().trim(),
            flag        : $('#fFlag').val().trim(),
            division_id : $('#fDivision').val() || null,
            city_id     : $('#fCity').val() || null,
            population  : $('#fPopulation').val().trim(),
            unions      : $('#fUnions').val().trim(),
            stream_link : $('#fStreamLink').val().trim(),
            history     : $('#fHistory').val().trim(),
        };
        if (isEdit) data._method = 'PUT';

        $.ajax({
            url : isEdit ? ROUTE + '/' + editingId : ROUTE,
            type: 'POST',
            data: data,
            success: function (res) {
                var label = isEdit ? 'Update Upazila' : 'Create Upazila';
                btn.prop('disabled', false).html('<i class="fas fa-save"></i> <span id="submitLabel">' + label + '</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) {
                var label = isEdit ? 'Update Upazila' : 'Create Upazila';
                btn.prop('disabled', false).html('<i class="fas fa-save"></i> <span id="submitLabel">' + label + '</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>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 || 'Upazila 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 () {
        $('#upazilaTable 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()
            .filter(function (v) { return !isNaN(v) && v !== ''; });
    }
    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 + ' upazila(s)?')) 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 + ' upazilas deleted');
                $('.nl-check, #selectAll').prop('checked', false); toggleBulk();
            },
            error: function () { toast('e', 'Network error'); }
        });
    });

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

});
</script>
@endsection