@extends('master')
@push('styles')
    <style>

        .reg-filter-card {
            background: var(--white);
            border-radius: 14px;
            border: 1px solid var(--gray-200);
            padding: 18px 22px;
            margin-bottom: 16px;
        }
        .reg-filter-head {
            font-family: 'Sora', sans-serif;
            font-size: 13px; font-weight: 600;
            color: var(--gray-600);
            margin-bottom: 14px;
            display: flex; align-items: center; gap: 6px;
        }
        .reg-filter-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
        .reg-filter-field { display: flex; flex-direction: column; gap: 5px; flex: 1 1 140px; min-width: 120px; }
        .reg-filter-label { font-size: 11px; font-weight: 500; color: var(--gray-600); }
        .reg-filter-input {
            padding: 8px 10px; font-size: 13px;
            border-radius: 10px;
            border: 1.5px solid var(--gray-200);
            background: var(--gray-50);
            color: var(--gray-900);
            outline: none; width: 100%;
            transition: border-color 0.15s;
            font-family: 'DM Sans', sans-serif;
        }
        .reg-filter-input:focus { border-color: var(--red-main); }
        .btn-reg-filter {
            padding: 8px 20px; font-size: 13px; font-weight: 600;
            background: var(--red-main); color: white; border: none;
            border-radius: 10px; cursor: pointer;
            white-space: nowrap; transition: background 0.15s;
            font-family: 'Sora', sans-serif;
            box-shadow: 0 3px 10px rgba(163,45,45,0.22);
        }
        .btn-reg-filter:hover { background: var(--red-800); }
        .btn-reg-reset {
            padding: 8px 14px; font-size: 13px; font-weight: 500;
            background: var(--white); color: var(--gray-600);
            border: 1.5px solid var(--gray-200);
            border-radius: 10px; cursor: pointer;
            white-space: nowrap; transition: background 0.15s;
            font-family: 'DM Sans', sans-serif;
        }
        .btn-reg-reset:hover { background: var(--gray-50); }

        /* Table Card */
        .reg-table-card {
            background: var(--white);
            border-radius: 14px;
            border: 1px solid var(--gray-200);
            overflow: hidden;
        }
        .reg-table-header {
            padding: 16px 22px;
            display: flex; align-items: center; justify-content: space-between;
            border-bottom: 1px solid var(--gray-200);
            flex-wrap: wrap; gap: 10px;
        }
        .reg-table-header-left { display: flex; align-items: center; gap: 10px; }
        .reg-table-title {
            font-family: 'Sora', sans-serif;
            font-size: 15px; font-weight: 600; color: var(--gray-900);
        }
        .reg-badge-count {
            font-size: 11px; font-weight: 600; padding: 3px 9px;
            background: var(--red-pale); color: var(--red-800);
            border-radius: 20px; border: 1px solid var(--red-light);
        }
        .btn-tambah {
            display: flex; align-items: center; gap: 6px;
            padding: 8px 18px; font-size: 13px; font-weight: 600;
            background: var(--red-main); color: white; border: none;
            border-radius: 10px; cursor: pointer;
            transition: background 0.15s;
            font-family: 'Sora', sans-serif;
            box-shadow: 0 3px 10px rgba(163,45,45,0.22);
        }
        .btn-tambah:hover { background: var(--red-800); }
        .btn-tambah svg { width: 14px; height: 14px; }

        /* Table */
        .reg-table-scroll { overflow-x: auto; }
        .reg-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 750px; }
        .reg-table thead th {
            padding: 10px 16px; text-align: left; font-size: 11px; font-weight: 600;
            color: var(--gray-600); text-transform: uppercase; letter-spacing: 0.05em;
            background: var(--gray-50);
            border-bottom: 1px solid var(--gray-200);
            white-space: nowrap; font-family: 'Sora', sans-serif;
        }
        .reg-table thead th.sortable { cursor: pointer; user-select: none; }
        .reg-table thead th.sortable:hover { color: var(--gray-900); }
        .sort-icon { margin-left: 3px; opacity: 0.4; font-size: 10px; }
        .reg-table tbody tr {
            border-bottom: 1px solid var(--gray-100);
            transition: background 0.12s;
        }
        .reg-table tbody tr:last-child { border-bottom: none; }
        .reg-table tbody tr:hover { background: var(--gray-50); }
        .reg-table tbody td { padding: 12px 16px; vertical-align: middle; }
        .td-no { color: var(--gray-400); font-size: 12px; }
        .td-name { font-weight: 500; color: var(--gray-900); }

        /* Role Badges */
        .role-badge {
            display: inline-block; font-size: 11px; font-weight: 600;
            padding: 3px 10px; border-radius: 20px; font-family: 'Sora', sans-serif;
        }
        .role-fa    { background: #E6F1FB; color: #185FA5; border: 1px solid #B5D4F4; }
        .role-agro  { background: #EAF3DE; color: #3B6D11; border: 1px solid #C0DD97; }
        .role-mm    { background: #FAEEDA; color: #854F0B; border: 1px solid #FAC775; }

        /* Status Badges */
        .status-badge {
            display: inline-block; font-size: 11px; font-weight: 600;
            padding: 3px 10px; border-radius: 20px; font-family: 'Sora', sans-serif;
        }
        .status-aktif    { background: #EAF3DE; color: #3B6D11; border: 1px solid #C0DD97; }
        .status-pending  { background: #FAEEDA; color: #854F0B; border: 1px solid #FAC775; }
        .status-nonaktif { background: var(--gray-100); color: var(--gray-600); border: 1px solid var(--gray-200); }

        /* Assignee chips */
        .assign-chip {
            display: inline-flex; align-items: center; gap: 5px;
            font-size: 11px; padding: 2px 8px; border-radius: 20px;
            background: var(--gray-100);
            border: 1px solid var(--gray-200);
            color: var(--gray-600); margin: 2px 2px 2px 0;
        }
        .assign-dot {
            width: 5px; height: 5px; border-radius: 50%;
            background: var(--red-main); flex-shrink: 0;
        }

        /* Action buttons */
        .action-btn {
            background: none; border: 1px solid var(--gray-200);
            border-radius: 8px; padding: 4px 10px;
            cursor: pointer; color: var(--gray-600); font-size: 11px; font-weight: 500;
            transition: all 0.12s; margin-right: 4px; font-family: 'DM Sans', sans-serif;
        }
        .action-btn:hover { background: var(--gray-100); color: var(--gray-900); }
        .action-del { color: var(--red-main); border-color: var(--red-light); }
        .action-del:hover { background: var(--red-pale); color: var(--red-800); }

        /* Empty */
        .reg-empty {
            padding: 48px 20px; text-align: center;
            color: var(--gray-400); font-size: 13px;
            display: none;
        }

        /* Pagination */
        .reg-table-footer {
            padding: 14px 22px;
            display: flex; align-items: center; justify-content: space-between;
            border-top: 1px solid var(--gray-200);
            flex-wrap: wrap; gap: 10px;
        }
        .pag-info { font-size: 12px; color: var(--gray-400); }
        .pag-btns { display: flex; align-items: center; gap: 4px; }
        .pag-btn {
            min-width: 32px; height: 32px;
            display: flex; align-items: center; justify-content: center;
            border: 1.5px solid var(--gray-200);
            border-radius: 8px;
            background: var(--white);
            color: var(--gray-900); font-size: 12px; font-weight: 600;
            cursor: pointer; transition: all 0.12s; padding: 0 8px;
            font-family: 'Sora', sans-serif;
        }
        .pag-btn:hover:not(:disabled) { background: var(--gray-100); }
        .pag-btn.active { background: var(--red-main); color: white; border-color: var(--red-main); }
        .pag-btn:disabled { opacity: 0.3; cursor: not-allowed; }
        .pag-ellipsis { font-size: 12px; color: var(--gray-400); padding: 0 4px; }

        /* ── MODAL ── */
        .modal-backdrop {
            display: none;
            position: fixed; inset: 0;
            background: rgba(0,0,0,0.42);
            z-index: 500;
            align-items: center; justify-content: center;
        }
        .modal-backdrop.open { display: flex; }
        .modal {
            background: var(--white);
            border-radius: 16px;
            border: 1px solid var(--gray-200);
            width: 100%; max-width: 500px;
            margin: 20px;
            max-height: 90vh; overflow-y: auto;
            box-shadow: 0 20px 60px rgba(0,0,0,0.18);
        }
        .modal-head {
            padding: 20px 22px 16px;
            display: flex; align-items: center; justify-content: space-between;
            border-bottom: 1px solid var(--gray-200);
            position: sticky; top: 0; background: var(--white); z-index: 2;
        }
        .modal-title {
            font-family: 'Sora', sans-serif;
            font-size: 15px; font-weight: 600; color: var(--gray-900);
        }
        .modal-close {
            background: none; border: none; cursor: pointer;
            color: var(--gray-400); padding: 6px; border-radius: 8px; line-height: 1;
            transition: all 0.15s;
        }
        .modal-close:hover { background: var(--gray-100); color: var(--gray-900); }
        .modal-body { padding: 20px 22px; display: flex; flex-direction: column; gap: 16px; }

        .form-group { display: flex; flex-direction: column; gap: 6px; }
        .form-label {
            font-size: 12px; font-weight: 500; color: var(--gray-600);
            font-family: 'Sora', sans-serif;
        }
        .form-label .required { color: var(--red-main); }
        .form-input {
            padding: 9px 12px; font-size: 13px;
            border: 1.5px solid var(--gray-200);
            border-radius: 10px;
            background: var(--gray-50);
            color: var(--gray-900); outline: none;
            transition: border-color 0.15s;
            font-family: 'DM Sans', sans-serif; width: 100%;
        }
        .form-input:focus { border-color: var(--red-main); background: var(--white); }

        .assign-section {
            background: var(--gray-50);
            border: 1.5px solid var(--gray-200);
            border-radius: 12px;
            padding: 14px; display: flex; flex-direction: column; gap: 8px;
        }
        .assign-section-label {
            font-size: 11px; font-weight: 600; color: var(--gray-600);
            font-family: 'Sora', sans-serif; text-transform: uppercase;
            letter-spacing: 0.04em; margin-bottom: 2px;
        }
        .assign-row { display: flex; align-items: center; gap: 8px; }
        .assign-row .form-input { flex: 1; }
        .btn-add-row {
            display: flex; align-items: center; gap: 5px;
            padding: 6px 12px; font-size: 12px; font-weight: 500;
            background: none; border: 1.5px dashed var(--gray-200);
            border-radius: 8px; cursor: pointer;
            color: var(--gray-600); transition: all 0.12s;
            font-family: 'DM Sans', sans-serif;
        }
        .btn-add-row:hover { background: var(--white); border-color: var(--gray-400); color: var(--gray-900); }
        .btn-del-row {
            background: none; border: 1px solid var(--red-light);
            border-radius: 8px; padding: 6px 9px;
            cursor: pointer; color: var(--red-main); font-size: 14px;
            line-height: 1; flex-shrink: 0; transition: all 0.12s;
        }
        .btn-del-row:hover { background: var(--red-pale); }

        .modal-footer {
            padding: 16px 22px;
            border-top: 1px solid var(--gray-200);
            display: flex; gap: 8px; justify-content: flex-end;
            position: sticky; bottom: 0; background: var(--white);
        }
        .btn-modal-cancel {
            padding: 9px 18px; font-size: 13px; font-weight: 500;
            background: var(--white); color: var(--gray-600);
            border: 1.5px solid var(--gray-200);
            border-radius: 10px; cursor: pointer;
            font-family: 'DM Sans', sans-serif; transition: all 0.15s;
        }
        .btn-modal-cancel:hover { background: var(--gray-100); }
        .btn-modal-save {
            padding: 9px 22px; font-size: 13px; font-weight: 600;
            background: var(--red-main); color: white; border: none;
            border-radius: 10px; cursor: pointer;
            font-family: 'Sora', sans-serif; transition: background 0.15s;
            box-shadow: 0 3px 10px rgba(163,45,45,0.22);
        }
        .btn-modal-save:hover { background: var(--red-800); }

        /* Confirm dialog */
        .confirm-backdrop {
            display: none; position: fixed; inset: 0;
            background: rgba(0,0,0,0.42); z-index: 600;
            align-items: center; justify-content: center;
        }
        .confirm-backdrop.open { display: flex; }
        .confirm-box {
            background: var(--white); border-radius: 14px;
            border: 1px solid var(--gray-200);
            padding: 24px 24px 20px;
            width: 100%; max-width: 360px; margin: 20px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.18);
        }
        .confirm-title {
            font-family: 'Sora', sans-serif;
            font-size: 15px; font-weight: 600; margin-bottom: 8px; color: var(--gray-900);
        }
        .confirm-text { font-size: 13px; color: var(--gray-600); margin-bottom: 20px; line-height: 1.5; }
        .confirm-btns { display: flex; gap: 8px; justify-content: flex-end; }

        /* Toast */
        .toast {
            position: fixed; bottom: 24px; right: 24px;
            background: var(--gray-900); color: white;
            padding: 10px 18px; border-radius: 10px;
            font-size: 13px; font-weight: 500;
            z-index: 999; opacity: 0;
            transition: opacity 0.25s, transform 0.25s;
            transform: translateY(10px);
            pointer-events: none;
        }
        .toast.show { opacity: 1; transform: translateY(0); }
        .toast.success { background: #2d6a4f; }
        .toast.error { background: var(--red-800); }
        .page-view { display: none; }
        .page-view.active { display: block; }
    </style>
@endpush
@section('content')
    <div class="page-view active">

        <!-- Filter Card -->
        <div class="reg-filter-card">
            <div class="reg-filter-head">
                <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M2 4h12M4 8h8M6 12h4"/></svg>
                Filter Data
            </div>
            <div class="reg-filter-row">
                <div class="reg-filter-field">
                    <div class="reg-filter-label">Nama Lengkap</div>
                    <input class="reg-filter-input" id="f-nama" placeholder="Cari nama..." />
                </div>
                <div class="reg-filter-field">
                    <div class="reg-filter-label">Jabatan</div>
                    <select class="reg-filter-input" id="f-role">
                        <option value="">Semua</option>
                        <option value="FA">FA</option>
                        <option value="Agronomi">Agronomi</option>
                        <option value="Marketing Manager">Marketing Manager</option>
                    </select>
                </div>
                <div class="reg-filter-field">
                    <div class="reg-filter-label">Status</div>
                    <select class="reg-filter-input" id="f-status">
                        <option value="">Semua</option>
                        <option value="Aktif">Aktif</option>
                        <option value="Pending">Pending</option>
                        <option value="Nonaktif">Nonaktif</option>
                    </select>
                </div>
                <div class="reg-filter-field">
                    <div class="reg-filter-label">Di-assign ke</div>
                    <input class="reg-filter-input" id="f-assign" placeholder="Nama assignee..." />
                </div>
                <div style="display:flex;gap:8px;align-self:flex-end;">
                    <button class="btn-reg-filter" onclick="applyFilter()">Terapkan</button>
                    <button class="btn-reg-reset" onclick="resetFilter()">Reset</button>
                </div>
            </div>
        </div>

        <!-- Table Card -->
        <div class="reg-table-card">
            <div class="reg-table-header">
                <div class="reg-table-header-left">
                    <span class="reg-table-title">Data Pendaftaran</span>
                    <span class="reg-badge-count" id="badge-count">0 data</span>
                </div>
                <button class="btn-tambah" onclick="openModal()">
                    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round">
                        <path d="M8 3v10M3 8h10"/>
                    </svg>
                    Tambah Data
                </button>
            </div>

            <div class="reg-table-scroll">
                <table class="reg-table">
                    <thead>
                    <tr>
                        <th style="width:44px">No.</th>
                        <th class="sortable" onclick="sortBy('nama')">Nama Lengkap <span class="sort-icon" id="sort-nama">↕</span></th>
                        <th class="sortable" onclick="sortBy('jabatan')">Jabatan <span class="sort-icon" id="sort-jabatan">↕</span></th>
                        <th>Di-assign ke</th>
                        <th>Status</th>
                        <th>Tgl. Daftar</th>
                        <th style="text-align:center;width:110px">Aksi</th>
                    </tr>
                    </thead>
                    <tbody id="tbl-body"></tbody>
                </table>
            </div>

            <div id="reg-empty" class="reg-empty">Tidak ada data yang ditemukan.</div>

            <div class="reg-table-footer">
                <div class="pag-info" id="pag-info"></div>
                <div class="pag-btns" id="pag-btns"></div>
            </div>
        </div>

    </div>

    <div class="modal-backdrop" id="modal">
        <div class="modal">
            <div class="modal-head">
                <span class="modal-title" id="modal-title">Tambah Data Pendaftaran</span>
                <button class="modal-close" onclick="closeModal()">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round">
                        <path d="M3 3l10 10M13 3L3 13"/>
                    </svg>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <div class="form-label">Nama Lengkap <span class="required">*</span></div>
                    <input class="form-input" id="inp-nama" placeholder="Masukkan nama lengkap" />
                </div>
                <div class="form-group">
                    <div class="form-label">Jabatan <span class="required">*</span></div>
                    <select class="form-input" id="inp-role" onchange="onRoleChange()">
                        <option value="">— Pilih jabatan —</option>
                        <option value="FA">FA</option>
                        <option value="Agronomi">Agronomi</option>
                        <option value="Marketing Manager">Marketing Manager</option>
                    </select>
                </div>

                <!-- FA → assign ke Agronomi -->
                <div id="sec-fa" style="display:none">
                    <div class="assign-section">
                        <div class="assign-section-label">Assign ke Agronomi</div>
                        <div id="rows-fa"></div>
                        <button class="btn-add-row" onclick="addRow('fa')">
                            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M6 2v8M2 6h8"/></svg>
                            Tambah Agronomi
                        </button>
                    </div>
                </div>

                <!-- Agronomi → assign ke Marketing Manager -->
                <div id="sec-agro" style="display:none">
                    <div class="assign-section">
                        <div class="assign-section-label">Assign ke Marketing Manager</div>
                        <div id="rows-agro"></div>
                        <button class="btn-add-row" onclick="addRow('agro')">
                            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M6 2v8M2 6h8"/></svg>
                            Tambah Marketing Manager
                        </button>
                    </div>
                </div>

                <div class="form-group">
                    <div class="form-label">Status</div>
                    <select class="form-input" id="inp-status">
                        <option value="Pending">Pending</option>
                        <option value="Aktif">Aktif</option>
                        <option value="Nonaktif">Nonaktif</option>
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn-modal-cancel" onclick="closeModal()">Batal</button>
                <button class="btn-modal-save" onclick="saveData()">Simpan Data</button>
            </div>
        </div>
    </div>

    <!-- CONFIRM DELETE -->
    <div class="confirm-backdrop" id="confirm-modal">
        <div class="confirm-box">
            <div class="confirm-title">Hapus Data?</div>
            <div class="confirm-text" id="confirm-text">Data ini akan dihapus secara permanen dan tidak dapat dikembalikan.</div>
            <div class="confirm-btns">
                <button class="btn-modal-cancel" onclick="closeConfirm()">Batal</button>
                <button class="btn-modal-save" id="confirm-ok" onclick="confirmDelete()">Hapus</button>
            </div>
        </div>
    </div>

    <!-- TOAST -->
    <div class="toast" id="toast"></div>
@endsection
@push('scripts')
    <script>

        const agronomiList = ['Budi Santoso', 'Sari Dewi', 'Hendra Kusuma', 'Rina Pratiwi'];
        const mmList       = ['Dita Rahayu', 'Fajar Nugraha', 'Mega Lestari'];

        let tableData = [
            { id:1,  nama:'Ahmad Fauzi',      jabatan:'FA',                assignTo:['Budi Santoso'],              status:'Aktif',    tgl:'2026-03-10' },
            { id:2,  nama:'Siti Rahayu',      jabatan:'Agronomi',          assignTo:['Dita Rahayu'],               status:'Aktif',    tgl:'2026-03-12' },
            { id:3,  nama:'Budi Santoso',     jabatan:'Marketing Manager', assignTo:[],                            status:'Aktif',    tgl:'2026-03-15' },
            { id:4,  nama:'Dewi Anggraini',   jabatan:'FA',                assignTo:['Sari Dewi','Hendra Kusuma'], status:'Pending',  tgl:'2026-03-18' },
            { id:5,  nama:'Rizky Pratama',    jabatan:'FA',                assignTo:['Rina Pratiwi'],              status:'Aktif',    tgl:'2026-03-20' },
            { id:6,  nama:'Nadia Putri',      jabatan:'Agronomi',          assignTo:['Fajar Nugraha'],             status:'Pending',  tgl:'2026-03-22' },
            { id:7,  nama:'Hendra Wijaya',    jabatan:'Marketing Manager', assignTo:[],                            status:'Aktif',    tgl:'2026-03-25' },
            { id:8,  nama:'Linda Susanti',    jabatan:'FA',                assignTo:['Budi Santoso'],              status:'Nonaktif', tgl:'2026-03-28' },
            { id:9,  nama:'Fajar Maulana',    jabatan:'Agronomi',          assignTo:['Mega Lestari'],              status:'Aktif',    tgl:'2026-04-01' },
            { id:10, nama:'Yuni Safitri',     jabatan:'FA',                assignTo:['Sari Dewi'],                 status:'Aktif',    tgl:'2026-04-03' },
            { id:11, nama:'Eka Prasetyo',     jabatan:'Marketing Manager', assignTo:[],                            status:'Pending',  tgl:'2026-04-05' },
            { id:12, nama:'Mira Wulandari',   jabatan:'FA',                assignTo:['Hendra Kusuma'],             status:'Aktif',    tgl:'2026-04-08' },
        ];

        let nextId   = 13;
        let filtered = [...tableData];
        let sortKey  = null, sortAsc = true;
        let page     = 1;
        const PER_PAGE = 8;
        renderTable();
        function fmtDate(d) {
            const [y,m,dy] = d.split('-');
            return `${dy}/${m}/${y}`;
        }

        function roleBadge(r) {
            const cls = r === 'FA' ? 'role-fa' : r === 'Agronomi' ? 'role-agro' : 'role-mm';
            return `<span class="role-badge ${cls}">${r}</span>`;
        }

        function statusBadge(s) {
            const cls = s === 'Aktif' ? 'status-aktif' : s === 'Pending' ? 'status-pending' : 'status-nonaktif';
            return `<span class="status-badge ${cls}">${s}</span>`;
        }

        function assignChips(arr) {
            if (!arr || !arr.length) return '<span style="color:var(--gray-400);font-size:12px">—</span>';
            return arr.map(a => `<span class="assign-chip"><span class="assign-dot"></span>${a}</span>`).join('');
        }

        function applyFilter() {
            const fNama   = document.getElementById('f-nama').value.toLowerCase().trim();
            const fRole   = document.getElementById('f-role').value;
            const fStatus = document.getElementById('f-status').value;
            const fAssign = document.getElementById('f-assign').value.toLowerCase().trim();

            filtered = tableData.filter(d =>
                (!fNama   || d.nama.toLowerCase().includes(fNama)) &&
                (!fRole   || d.jabatan === fRole) &&
                (!fStatus || d.status === fStatus) &&
                (!fAssign || d.assignTo.some(a => a.toLowerCase().includes(fAssign)))
            );

            if (sortKey) doSort(sortKey);
            page = 1;
            renderTable();
        }

        function resetFilter() {
            ['f-nama','f-role','f-status','f-assign'].forEach(id => document.getElementById(id).value = '');
            filtered = [...tableData];
            sortKey  = null; sortAsc = true;
            document.querySelectorAll('.sort-icon').forEach(el => el.textContent = '↕');
            page = 1;
            renderTable();
        }

        function sortBy(key) {
            if (sortKey === key) sortAsc = !sortAsc;
            else { sortKey = key; sortAsc = true; }
            document.querySelectorAll('.sort-icon').forEach(el => el.textContent = '↕');
            const ico = document.getElementById('sort-' + key);
            if (ico) ico.textContent = sortAsc ? '↑' : '↓';
            doSort(key);
            page = 1;
            renderTable();
        }

        function doSort(key) {
            filtered.sort((a, b) => {
                const va = a[key] || '', vb = b[key] || '';
                return sortAsc ? va.localeCompare(vb) : vb.localeCompare(va);
            });
        }

        function renderTable() {
            const total = filtered.length;
            const pages = Math.max(1, Math.ceil(total / PER_PAGE));
            if (page > pages) page = pages;
            const start = (page - 1) * PER_PAGE;
            const end   = Math.min(start + PER_PAGE, total);
            const slice = filtered.slice(start, end);

            document.getElementById('badge-count').textContent = total + ' data';

            const tbody = document.getElementById('tbl-body');
            const empty = document.getElementById('reg-empty');

            if (!slice.length) {
                tbody.innerHTML = '';
                empty.style.display = 'block';
            } else {
                empty.style.display = 'none';
                tbody.innerHTML = slice.map((d, i) => `
            <tr>
                <td class="td-no">${start + i + 1}</td>
                <td><div class="td-name">${d.nama}</div></td>
                <td>${roleBadge(d.jabatan)}</td>
                <td>${assignChips(d.assignTo)}</td>
                <td>${statusBadge(d.status)}</td>
                <td style="font-size:12px;color:var(--gray-400);white-space:nowrap">${fmtDate(d.tgl)}</td>
                <td style="text-align:center;white-space:nowrap">
                    <button class="action-btn" onclick="editRow(${d.id})">Edit</button>
                    <button class="action-btn action-del" onclick="askDelete(${d.id}, '${d.nama.replace(/'/g,"\\'")}')">Hapus</button>
                </td>
            </tr>`).join('');
            }

            // Pagination info
            document.getElementById('pag-info').textContent = total
                ? `Menampilkan ${start + 1}–${end} dari ${total} data`
                : 'Tidak ada data';

            // Pagination buttons
            const pBtns = document.getElementById('pag-btns');
            let html = `<button class="pag-btn" onclick="goPage(${page - 1})" ${page <= 1 ? 'disabled' : ''}>‹</button>`;
            for (let p = 1; p <= pages; p++) {
                if (pages > 7 && p > 2 && p < pages - 1 && Math.abs(p - page) > 1) {
                    if (p === 3 || p === pages - 2) html += `<span class="pag-ellipsis">…</span>`;
                    continue;
                }
                html += `<button class="pag-btn ${p === page ? 'active' : ''}" onclick="goPage(${p})">${p}</button>`;
            }
            html += `<button class="pag-btn" onclick="goPage(${page + 1})" ${page >= pages ? 'disabled' : ''}>›</button>`;
            pBtns.innerHTML = html;
        }

        function goPage(p) {
            const pages = Math.ceil(filtered.length / PER_PAGE);
            if (p < 1 || p > pages) return;
            page = p;
            renderTable();
        }

        /* ── DELETE ── */
        let deleteTargetId = null;

        function askDelete(id, nama) {
            deleteTargetId = id;
            document.getElementById('confirm-text').textContent =
                `Data "${nama}" akan dihapus secara permanen dan tidak dapat dikembalikan.`;
            document.getElementById('confirm-modal').classList.add('open');
        }

        function closeConfirm() {
            document.getElementById('confirm-modal').classList.remove('open');
            deleteTargetId = null;
        }

        function confirmDelete() {
            if (deleteTargetId === null) return;
            tableData = tableData.filter(d => d.id !== deleteTargetId);
            filtered  = filtered.filter(d => d.id !== deleteTargetId);
            closeConfirm();
            renderTable();
            showToast('Data berhasil dihapus.', 'success');
        }

        /* ── MODAL ── */
        let editId = null;

        function openModal() {
            editId = null;
            document.getElementById('modal-title').textContent = 'Tambah Data Pendaftaran';
            document.getElementById('inp-nama').value   = '';
            document.getElementById('inp-role').value   = '';
            document.getElementById('inp-status').value = 'Pending';
            onRoleChange([]);
            document.getElementById('modal').classList.add('open');
        }

        function editRow(id) {
            const d = tableData.find(x => x.id === id);
            if (!d) return;
            editId = id;
            document.getElementById('modal-title').textContent = 'Edit Data Pendaftaran';
            document.getElementById('inp-nama').value   = d.nama;
            document.getElementById('inp-role').value   = d.jabatan;
            document.getElementById('inp-status').value = d.status;
            onRoleChange(d.assignTo || []);
            document.getElementById('modal').classList.add('open');
        }

        function closeModal() {
            document.getElementById('modal').classList.remove('open');
        }

        function onRoleChange(existing) {
            const role    = document.getElementById('inp-role').value;
            const secFa   = document.getElementById('sec-fa');
            const secAgro = document.getElementById('sec-agro');
            secFa.style.display   = role === 'FA'       ? 'block' : 'none';
            secAgro.style.display = role === 'Agronomi' ? 'block' : 'none';

            if (role === 'FA')       buildRows('fa',   agronomiList, existing !== undefined ? existing : []);
            if (role === 'Agronomi') buildRows('agro', mmList,       existing !== undefined ? existing : []);
        }

        function buildRows(type, list, existing) {
            const container = document.getElementById('rows-' + type);
            container.innerHTML = '';
            const vals = (existing && existing.length) ? existing : [''];
            vals.forEach(v => addRowWithVal(type, list, v));
        }

        function addRow(type) {
            const list = type === 'fa' ? agronomiList : mmList;
            addRowWithVal(type, list, '');
        }

        function addRowWithVal(type, list, val) {
            const container = document.getElementById('rows-' + type);
            const row = document.createElement('div');
            row.className = 'assign-row';
            row.innerHTML = `
        <select class="form-input assign-select-${type}" style="flex:1">
            <option value="">— Pilih —</option>
            ${list.map(l => `<option value="${l}" ${l === val ? 'selected' : ''}>${l}</option>`).join('')}
        </select>
        <button class="btn-del-row" onclick="this.parentNode.remove()">×</button>`;
            container.appendChild(row);
        }

        function saveData() {
            const nama   = document.getElementById('inp-nama').value.trim();
            const role   = document.getElementById('inp-role').value;
            const status = document.getElementById('inp-status').value;

            if (!nama) { showToast('Nama lengkap wajib diisi.', 'error'); return; }
            if (!role) { showToast('Jabatan wajib dipilih.', 'error'); return; }

            let assignTo = [];
            if (role === 'FA') {
                assignTo = [...document.querySelectorAll('.assign-select-fa')].map(s => s.value).filter(Boolean);
            } else if (role === 'Agronomi') {
                assignTo = [...document.querySelectorAll('.assign-select-agro')].map(s => s.value).filter(Boolean);
            }

            const today = new Date().toISOString().slice(0, 10);

            if (editId !== null) {
                // Update existing
                const d  = tableData.find(x => x.id === editId);
                const fd = filtered.find(x => x.id === editId);
                if (d)  Object.assign(d,  { nama, jabatan: role, assignTo, status });
                if (fd) Object.assign(fd, { nama, jabatan: role, assignTo, status });
                showToast('Data berhasil diperbarui.', 'success');
            } else {
                // Insert new
                const newRow = { id: nextId++, nama, jabatan: role, assignTo, status, tgl: today };
                tableData.unshift(newRow);
                filtered.unshift(newRow);
                showToast('Data berhasil ditambahkan.', 'success');
            }

            closeModal();
            page = 1;
            renderTable();
        }

        let toastTimer = null;
        function showToast(msg, type) {
            const t = document.getElementById('toast');
            t.textContent = msg;
            t.className = 'toast ' + (type || '');
            clearTimeout(toastTimer);
            requestAnimationFrame(() => {
                requestAnimationFrame(() => { t.classList.add('show'); });
            });
            toastTimer = setTimeout(() => { t.classList.remove('show'); }, 2800);
        }

        /* Close modal on backdrop click */
        document.getElementById('modal').addEventListener('click', function(e) {
            if (e.target === this) closeModal();
        });
        document.getElementById('confirm-modal').addEventListener('click', function(e) {
            if (e.target === this) closeConfirm();
        });
    </script>

@endpush