@extends('admin.layouts.master')

@section('title', 'Section 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,#4a55d4); 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:#3b82f6; }
.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(59,130,246,.12); color:#3b82f6; }
.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:180px; max-width:280px; }
.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)} }

/* ══ Badges ══ */
.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.red   { background:rgba(239,68,68,.1); color:#ef4444; }
.nl-badge.blue  { background:rgba(59,130,246,.1); color:#3b82f6; }
.nl-badge.muted { background:rgba(0,0,0,.06); color:var(--muted); }

/* ══ Action icon buttons ══ */
.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; }
.tac.tog:hover { background:rgba(16,185,129,.1); color:#10b981; border-color:#10b981; }

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

/* ══ Image thumb ══ */
.nl-thumb { width:56px; height:38px; object-fit:cover; border-radius:3px; border:1.5px solid var(--line); }
.nl-thumb-ph { width:56px; height:38px; border-radius:3px; border:1.5px solid var(--line); background:var(--acc-soft); color:var(--acc); display:inline-flex; align-items:center; justify-content:center; font-size:14px; }

/* ══ Footer Pagination ══ */
.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; }

/* ══ Modal overlay ══ */
.vc-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1000; align-items:flex-start; justify-content:center; padding:24px 16px; overflow-y:auto; }
.vc-overlay.show { display:flex; }
.vc-modal { background:var(--panel); border:1.5px solid var(--line); width:100%; max-width:820px; border-radius:4px; overflow:hidden; box-shadow:0 20px 56px rgba(0,0,0,.22); animation:mIn .18s ease; margin:auto; }
.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; }
.vc-modal-ft { padding:13px 20px; background:var(--surface); border-top:1.5px solid var(--line); display:flex; gap:8px; justify-content:flex-end; }

/* ══ Form fields ══ */
.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-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:72px; 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:18px; }
@media(max-width:600px){ .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:0 0 12px; padding-bottom:6px; border-bottom:1.5px solid var(--line); }

/* ══ Config cards ══ */
.cfg-card { background:var(--surface); border:1.5px solid var(--line); border-radius:4px; padding:11px 13px; margin-bottom:8px; }
.cfg-card-hd { display:flex; align-items:center; gap:10px; }
.cfg-card-body { margin-top:11px; padding-top:11px; border-top:1px dashed var(--line); display:none; }
.cfg-card-body.open { display:block; }

/* ══ Toggle switch ══ */
.nl-toggle { position:relative; display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-size:13px; font-weight:600; color:var(--ink); user-select:none; }
.nl-toggle input { position:absolute; opacity:0; width:0; height:0; }
.nl-toggle-track { width:36px; height:20px; background:var(--line); border-radius:20px; position:relative; transition:background .18s; flex-shrink:0; }
.nl-toggle input:checked ~ .nl-toggle-track { background:var(--acc); }
.nl-toggle-thumb { position:absolute; top:3px; left:3px; width:14px; height:14px; background:#fff; border-radius:50%; transition:transform .18s; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.nl-toggle input:checked ~ .nl-toggle-track .nl-toggle-thumb { transform:translateX(16px); }

/* ══ Checkbox pill group ══ */
.nl-chk-group { display:flex; flex-wrap:wrap; gap:7px; }
.nl-chk-item { display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border:1.5px solid var(--line); border-radius:6px; cursor:pointer; font-size:12px; font-weight:600; color:var(--muted); transition:all .14s; user-select:none; }
.nl-chk-item:has(input:checked) { border-color:var(--acc); background:var(--acc-soft); color:var(--acc); }
.nl-chk-item input { width:0; height:0; opacity:0; position:absolute; }

/* ══ Section type tag group ══ */
.nl-tag-group { display:flex; flex-wrap:wrap; gap:7px; }
.nl-tag-item { display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border:1.5px solid var(--line); border-radius:6px; cursor:pointer; font-size:12px; font-weight:600; color:var(--muted); transition:all .14s; user-select:none; }
.nl-tag-item:has(input:checked) { border-color:var(--acc); background:var(--acc-soft); color:var(--acc); }
.nl-tag-item input { width:0; height:0; opacity:0; position:absolute; }

/* ══ Upload area ══ */
.nl-upload-area { border:2px dashed var(--line); border-radius:4px; padding:18px; text-align:center; cursor:pointer; transition:border-color .18s; background:var(--surface); position:relative; }
.nl-upload-area:hover { border-color:var(--acc); }
.nl-upload-area input[type="file"] { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }
.nl-upload-icon { font-size:22px; color:var(--muted); margin-bottom:6px; }
.nl-upload-text { font-size:12px; font-weight:600; color:var(--muted); }
.nl-preview-wrap { margin-top:10px; position:relative; display:none; }
.nl-preview-wrap img { width:100%; max-height:140px; object-fit:cover; border-radius:3px; border:1.5px solid var(--line); }
.nl-preview-rm { position:absolute; top:5px; right:5px; width:22px; height:22px; background:rgba(239,68,68,.9); color:#fff; border:none; border-radius:3px; cursor:pointer; font-size:10px; display:flex; align-items:center; justify-content:center; }

/* ══ Delete modal ══ */
.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; }

/* ══ Toasts ══ */
#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-puzzle-piece"></i> Section Management</h1>
        <p>Manage homepage sections and layout configuration</p>
    </div>
    <button class="nl-btn pri" id="btnCreate">
        <i class="fas fa-plus"></i> New Section
    </button>
</div>

{{-- ══ Stats ══ --}}
<div class="nl-stats">
    <div class="nl-stat">
        <div class="nl-stat-ic"><i class="fas fa-puzzle-piece"></i></div>
        <div><div class="nl-stat-val" id="sTotal">—</div><div class="nl-stat-lbl">Total Sections</div></div>
    </div>
    <div class="nl-stat s2">
        <div class="nl-stat-ic"><i class="fas fa-check-circle"></i></div>
        <div><div class="nl-stat-val" id="sActive">—</div><div class="nl-stat-lbl">Active</div></div>
    </div>
    <div class="nl-stat s3">
        <div class="nl-stat-ic"><i class="fas fa-ad"></i></div>
        <div><div class="nl-stat-val" id="sAds">—</div><div class="nl-stat-lbl">Ads Sections</div></div>
    </div>
    <div class="nl-stat s4">
        <div class="nl-stat-ic"><i class="fas fa-toggle-off"></i></div>
        <div><div class="nl-stat-val" id="sInactive">—</div><div class="nl-stat-lbl">Inactive</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="10">10</option>
                    <option value="25">25</option>
                    <option value="50">50</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, file...">
            </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 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="sectionTable">
            <thead>
                <tr>
                    <th style="width:36px;"><input type="checkbox" id="selectAll" class="nl-check"></th>
                    <th style="width:50px;">#</th>
                    <th style="width:70px;">Image</th>
                    <th>Display Name</th>
                    <th style="width:150px;">File Name</th>
                    <th>Configuration</th>
                    <th style="width:90px;">Status</th>
                    <th style="width:90px;text-align:center;">Actions</th>
                </tr>
            </thead>
            <tbody></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 Section</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">

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

                    <div class="vc-fld">
                        <label>File Name <span class="req">*</span></label>
                        <select class="vc-inp" id="fFileName">
                            <option value="">-- Select Blade File --</option>
                            @if(isset($fileNames) && $fileNames->count() > 0)
                                @foreach($fileNames as $file)
                                    <option value="{{ $file }}">{{ $file }}.blade.php</option>
                                @endforeach
                            @endif
                        </select>
                        <div class="vc-err" id="errFileName">File name is required</div>
                    </div>

                    <div class="vc-fld">
                        <label>Display Name <span class="req">*</span></label>
                        <input type="text" class="vc-inp" id="fDisplayName" placeholder="e.g. Hero Slider Section">
                        <div class="vc-err" id="errDisplayName">Display name is required</div>
                    </div>

                    <div class="vc-fld">
                        <label>Short Details / Note</label>
                        <textarea class="vc-textarea" id="fNote" placeholder="Brief description..."></textarea>
                    </div>

                    <div class="vc-fld">
                        <label>Active Status</label>
                        <label class="nl-toggle">
                            <input type="checkbox" id="fStatus" checked>
                            <div class="nl-toggle-track"><div class="nl-toggle-thumb"></div></div>
                            <span id="fStatusLabel">Active</span>
                        </label>
                    </div>

                    <div class="vc-fld">
                        <label>Section Image / Demo</label>
                        <div class="nl-upload-area" id="uploadArea">
                            <input type="file" id="fImage" accept="image/*">
                            <div class="nl-upload-icon"><i class="fas fa-cloud-upload-alt"></i></div>
                            <div class="nl-upload-text">Click to upload · 600×400px · Max 2MB</div>
                        </div>
                        <div class="nl-preview-wrap" id="previewWrap">
                            <img id="imgPreview" src="" alt="Preview">
                            <button class="nl-preview-rm" id="btnRmImage" type="button"><i class="fas fa-times"></i></button>
                        </div>
                    </div>
                </div>

                {{-- RIGHT col: Configuration --}}
                <div>
                    <div class="vc-section-title"><i class="fas fa-cog"></i> Configuration</div>

                    {{-- Category --}}
                    <div class="cfg-card">
                        <div class="cfg-card-hd">
                            <label class="nl-toggle">
                                <input type="checkbox" id="fHasCategory" class="cfg-toggle" data-target="cfgCategory">
                                <div class="nl-toggle-track"><div class="nl-toggle-thumb"></div></div>
                            </label>
                            <span style="font-size:13px;font-weight:700;color:var(--ink);">
                                <i class="fas fa-folder" style="color:var(--acc);margin-right:4px;"></i> Enable Categories
                            </span>
                        </div>
                        <div class="cfg-card-body" id="cfgCategory">
                            <div class="vc-fld" style="margin-bottom:0;">
                                <label>Total Categories <small style="text-transform:none;font-weight:400;">(0 = unlimited)</small></label>
                                <input type="number" class="vc-inp" id="fTotalCategory" min="0" value="0">
                            </div>
                        </div>
                    </div>

                    {{-- Widgets --}}
                    <div class="cfg-card">
                        <div class="cfg-card-hd">
                            <label class="nl-toggle">
                                <input type="checkbox" id="fHasWidgets" class="cfg-toggle" data-target="cfgWidgets">
                                <div class="nl-toggle-track"><div class="nl-toggle-thumb"></div></div>
                            </label>
                            <span style="font-size:13px;font-weight:700;color:var(--ink);">
                                <i class="fas fa-puzzle-piece" style="color:#3b82f6;margin-right:4px;"></i> Enable Widgets
                            </span>
                        </div>
                        <div class="cfg-card-body" id="cfgWidgets">
                            <div class="vc-fld" style="margin-bottom:0;">
                                <label>Total Widgets <small style="text-transform:none;font-weight:400;">(0 = unlimited)</small></label>
                                <input type="number" class="vc-inp" id="fTotalWidgets" min="0" value="0">
                            </div>
                        </div>
                    </div>

                    {{-- Ads --}}
                    <div class="cfg-card">
                        <div class="cfg-card-hd">
                            <label class="nl-toggle">
                                <input type="checkbox" id="fHasAds" class="cfg-toggle" data-target="cfgAds">
                                <div class="nl-toggle-track"><div class="nl-toggle-thumb"></div></div>
                            </label>
                            <span style="font-size:13px;font-weight:700;color:var(--ink);">
                                <i class="fas fa-ad" style="color:#f59e0b;margin-right:4px;"></i> Enable Ads
                            </span>
                        </div>
                        <div class="cfg-card-body" id="cfgAds">
                            <div class="vc-fld">
                                <label>Total Ads <small style="text-transform:none;font-weight:400;">(0 = unlimited)</small></label>
                                <input type="number" class="vc-inp" id="fTotalAds" min="0" value="0">
                            </div>
                            <div class="vc-fld" style="margin-bottom:0;">
                                <label>Ads Position</label>
                                <div class="nl-chk-group">
                                    <label class="nl-chk-item"><input type="checkbox" id="adsTop" value="top"> <i class="fas fa-arrow-up"></i> Top</label>
                                    <label class="nl-chk-item"><input type="checkbox" id="adsBottom" value="bottom"> <i class="fas fa-arrow-down"></i> Bottom</label>
                                    <label class="nl-chk-item"><input type="checkbox" id="adsSide" value="side"> <i class="fas fa-arrow-right"></i> Side</label>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Section Types --}}
                    <div class="vc-section-title" style="margin-top:16px;"><i class="fas fa-tags"></i> Section Type</div>
                    <div class="nl-tag-group">
                        <label class="nl-tag-item"><input type="checkbox" id="fIsLeadNews">   <i class="fas fa-star"></i> Lead News</label>
                        <label class="nl-tag-item"><input type="checkbox" id="fIsMainNews">   <i class="fas fa-newspaper"></i> Main News</label>
                        <label class="nl-tag-item"><input type="checkbox" id="fIsAdsSection"> <i class="fas fa-ad"></i> Ads Section</label>
                        <label class="nl-tag-item"><input type="checkbox" id="fIsHeader">     <i class="fas fa-heading"></i> Header</label>
                        <label class="nl-tag-item"><input type="checkbox" id="fIsFooter">     <i class="fas fa-shoe-prints"></i> Footer</label>
                    </div>
                </div>

            </div>{{-- end vc-row2 --}}
        </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 Section</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 Section</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("sections.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 = $('#sectionTable').DataTable({
        processing  : false,
        serverSide  : true,
        lengthChange: false,
        searching   : false,
        autoWidth   : false,
        pageLength  : 10,
        ajax: {
            url : ROUTE,
            type: 'GET',
            data: function (d) {
                d.search        = { value: $('#nlSearch').val() };
                d.filter_status = $('#filterStatus').val();
            },
            dataSrc: function (json) {
                if (json.stats) {
                    $('#sTotal').text(json.stats.total    ?? '—');
                    $('#sActive').text(json.stats.active  ?? '—');
                    $('#sInactive').text(json.stats.inactive ?? '—');
                    $('#sAds').text(json.stats.ads        ?? '—');
                }
                return json.data;
            }
        },
        columns: [
            { data: 'checkbox',  orderable: false, searchable: false, width: '36px'  },
            { data: 'id',        orderable: true,  searchable: false, width: '50px'  },
            { data: 'image',     orderable: false, searchable: false, width: '70px'  },
            { data: 'name',      orderable: true                                     },
            { data: 'file_name', orderable: false, searchable: false, width: '150px' },
            { data: 'settings',  orderable: false, searchable: false                 },
            { data: 'status',    orderable: false, searchable: false, width: '90px'  },
            { data: 'action',    orderable: false, searchable: false, width: '90px'  },
        ],
        order : [[1, 'desc']],
        dom   : '<"nl-dt-hidden-pg"p>t',
        language: {
            emptyTable : '<div style="text-align:center;padding:48px;color:var(--muted)"><i class="fas fa-puzzle-piece" style="font-size:32px;display:block;margin-bottom:12px;opacity:.3"></i><p style="font-size:14px;font-weight:600;margin:0">No sections 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 sections</p></div>',
        },
        drawCallback: function () { renderFooter(); toggleBulk(); }
    });

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

    /* ════ Config card toggles ════ */
    $(document).on('change', '.cfg-toggle', function () {
        $('#' + $(this).data('target'))[this.checked ? 'addClass' : 'removeClass']('open');
    });

    /* ════ Status label ════ */
    $('#fStatus').on('change', function () {
        $('#fStatusLabel').text(this.checked ? 'Active' : 'Inactive');
    });

    /* ════ Image preview ════ */
    $('#fImage').on('change', function () {
        if (!this.files || !this.files[0]) return;
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#imgPreview').attr('src', e.target.result);
            $('#previewWrap').show();
        };
        reader.readAsDataURL(this.files[0]);
    });
    $('#btnRmImage').on('click', function (e) {
        e.preventDefault();
        $('#fImage').val('');
        $('#imgPreview').attr('src', '');
        $('#previewWrap').hide();
    });

    /* ════ Toggle status (inline) ════ */
    $(document).on('click', '.btn-toggle-status', function () {
        var id = $(this).data('id');
        $.ajax({
            url : ROUTE,
            type: 'GET',
            data: { toggle_status: true, section_id: id },
            success: function (res) {
                toast('s', res.success || 'Status updated');
                table.ajax.reload(null, false);
            },
            error: function () { toast('e', 'Network error'); }
        });
    });

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

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

    /* ════ EDIT MODAL ════ */
    $(document).on('click', '.btn-edit', function () {
        var id = $(this).data('id');
        $.ajax({
            url : ROUTE,
            type: 'GET',
            data: { get_section: true, section_id: id },
            success: function (res) {
                if (!res.section) { toast('e', 'Section not found'); return; }
                var d        = res.section;
                var settings = {};
                try {
                    settings = (typeof d.settings === 'string')
                        ? JSON.parse(d.settings)
                        : (d.settings || {});
                } catch (e) {}

                editingId = d.id;
                clearForm();

                $('#fFileName').val(d.file_name || '');
                $('#fDisplayName').val(d.display_name || '');
                $('#fNote').val(d.short_details || '');

                var isActive = d.status == 1;
                $('#fStatus').prop('checked', isActive);
                $('#fStatusLabel').text(isActive ? 'Active' : 'Inactive');

                /* Config */
                if (settings.category) {
                    $('#fHasCategory').prop('checked', true).trigger('change');
                    $('#fTotalCategory').val(settings.total_category || 0);
                }
                if (settings.widgets) {
                    $('#fHasWidgets').prop('checked', true).trigger('change');
                    $('#fTotalWidgets').val(settings.total_widgets || 0);
                }
                if (settings.ads) {
                    $('#fHasAds').prop('checked', true).trigger('change');
                    $('#fTotalAds').val(settings.total_ads || 0);
                    var pos = settings.ads_position || [];
                    if (Array.isArray(pos)) {
                        pos.forEach(function (p) {
                            if (p === 'top')    $('#adsTop').prop('checked', true);
                            if (p === 'bottom') $('#adsBottom').prop('checked', true);
                            if (p === 'side')   $('#adsSide').prop('checked', true);
                        });
                    }
                }

                $('#fIsLeadNews').prop('checked',   !!settings.is_lead_news);
                $('#fIsMainNews').prop('checked',   !!settings.is_main_news);
                $('#fIsAdsSection').prop('checked', !!settings.is_ads_section);
                $('#fIsHeader').prop('checked',     !!settings.is_header);
                $('#fIsFooter').prop('checked',     !!settings.is_footer);

                /* Image preview */
                if (d.image) {
                    $('#imgPreview').attr('src', '{{ asset("") }}' + d.image);
                    $('#previewWrap').show();
                }

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

    /* Validation */
    function validate() {
        clearErrors();
        var ok = true;
        if (!$('#fFileName').val())           { $('#fFileName').addClass('err');    $('#errFileName').show();    ok = false; }
        if (!$('#fDisplayName').val().trim()) { $('#fDisplayName').addClass('err'); $('#errDisplayName').show(); ok = false; }
        return ok;
    }
    function clearErrors() { $('.vc-inp').removeClass('err'); $('.vc-err').hide(); }
    function clearForm() {
        $('#fFileName, #fDisplayName, #fNote').val('');
        $('#fStatus').prop('checked', true);
        $('#fStatusLabel').text('Active');
        $('#fImage').val('');
        $('#imgPreview').attr('src', '');
        $('#previewWrap').hide();
        /* Config */
        $('#fHasCategory, #fHasWidgets, #fHasAds').prop('checked', false);
        $('#cfgCategory, #cfgWidgets, #cfgAds').removeClass('open');
        $('#fTotalCategory, #fTotalWidgets, #fTotalAds').val(0);
        $('#adsTop, #adsBottom, #adsSide').prop('checked', false);
        /* Types */
        $('#fIsLeadNews, #fIsMainNews, #fIsAdsSection, #fIsHeader, #fIsFooter').prop('checked', false);
        clearErrors();
    }

    /* ════ Submit (FormData for file upload) ════ */
    $('#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 formData = new FormData();
        formData.append('_token',        CSRF);
        formData.append('file_name',     $('#fFileName').val());
        formData.append('display_name',  $('#fDisplayName').val().trim());
        formData.append('note',          $('#fNote').val().trim());
        if ($('#fStatus').is(':checked')) formData.append('status', '1');

        var imgFile = $('#fImage')[0].files[0];
        if (imgFile) formData.append('section_demo', imgFile);

        if ($('#fHasCategory').is(':checked')) {
            formData.append('category',       '1');
            formData.append('total_category', $('#fTotalCategory').val());
        }
        if ($('#fHasWidgets').is(':checked')) {
            formData.append('widgets',        '1');
            formData.append('total_widgets',  $('#fTotalWidgets').val());
        }
        if ($('#fHasAds').is(':checked')) {
            formData.append('ads',        '1');
            formData.append('total_ads',  $('#fTotalAds').val());
            if ($('#adsTop').is(':checked'))    formData.append('ads_position[]', 'top');
            if ($('#adsBottom').is(':checked')) formData.append('ads_position[]', 'bottom');
            if ($('#adsSide').is(':checked'))   formData.append('ads_position[]', 'side');
        }
        if ($('#fIsLeadNews').is(':checked'))   formData.append('is_lead_news',   '1');
        if ($('#fIsMainNews').is(':checked'))   formData.append('is_main_news',   '1');
        if ($('#fIsAdsSection').is(':checked')) formData.append('is_ads_section', '1');
        if ($('#fIsHeader').is(':checked'))     formData.append('is_header',      '1');
        if ($('#fIsFooter').is(':checked'))     formData.append('is_footer',      '1');

        if (isEdit) formData.append('_method', 'PUT');

        var url = isEdit
            ? '{{ route("sections.update", ":id") }}'.replace(':id', editingId)
            : '{{ route("sections.store") }}';

        $.ajax({
            url         : url,
            type        : 'POST',
            data        : formData,
            processData : false,
            contentType : false,
            success: function (res) {
                var label = isEdit ? 'Update Section' : 'Create Section';
                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 Section' : 'Create Section';
                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,
            type: 'GET',
            data: { delete_id: deleteId },
            success: function (res) {
                $('#confirmDel').prop('disabled', false)
                               .html('<i class="fas fa-trash"></i> <span id="delBtnLabel">Yes, Delete</span>');
                toast('s', res.success || 'Section deleted');
                closeDel();
                table.ajax.reload(null, false);
            },
            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 () {
        $('#sectionTable 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 + ' section(s)?')) return;
        $.ajax({
            url : ROUTE,
            type: 'GET',
            data: { selected_ids: ids },
            success: function (res) {
                table.ajax.reload(null, false);
                toast('s', res.success || ids.length + ' sections deleted');
                $('.nl-check, #selectAll').prop('checked', false);
                toggleBulk();
            },
            error: function () { toast('e', 'Network error'); }
        });
    });

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

});
</script>
@endsection