@extends('admin.layout.content')

@section('content')
    <div class="content-manager-container px-3 py-4">

        {{-- Flash Messages --}}
        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show flash-alert" role="alert">
                <i class="material-symbols-outlined align-middle me-1">check_circle</i> {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif
        @if (session('error'))
            <div class="alert alert-danger alert-dismissible fade show flash-alert" role="alert">
                <i class="material-symbols-outlined align-middle me-1">error</i> {{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        <div
            class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center gap-3 mb-4">
            <div>
                <h2 class="content-manager-title h3 mb-1">Manajemen Pembeli</h2>
                <p class="text-muted mb-0">Kelola akun pengguna dengan role pembeli</p>
            </div>
            <button class="btn-add-content d-inline-flex align-items-center gap-2 shadow-sm" data-bs-toggle="modal"
                data-bs-target="#modalCreate">
                <span class="material-symbols-outlined">add</span>
                Tambah Pembeli
            </button>
        </div>

        <div class="content-manager-card">
            {{-- Filter Bar --}}
            <div
                class="content-filter-bar d-flex flex-column flex-sm-row-reverse justify-content-between align-items-stretch align-items-sm-center gap-3 mb-3">
                <div class="search-box-wrapper">
                    <span class="material-symbols-outlined">search</span>
                    <input type="text" id="search-input" class="form-control search-box-input"
                        placeholder="Cari username / nama / email...">
                </div>
                <div class="d-flex align-items-center gap-2">
                    <span class="text-muted small text-nowrap">Tampilkan:</span>
                    <div class="dropdown show-entries-wrapper position-relative">
                        <button
                            class="btn dropdown-toggle dropdown-toggle-select d-flex align-items-center justify-content-between"
                            type="button" id="entriesDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                            <span id="selected-entry-value">10</span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-entries" aria-labelledby="entriesDropdown">
                            <li><a class="dropdown-item active" href="#" data-value="10">10</a></li>
                            <li><a class="dropdown-item" href="#" data-value="25">25</a></li>
                            <li><a class="dropdown-item" href="#" data-value="50">50</a></li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="table-responsive">
                <table class="table content-data-table mb-0 align-middle">
                    <thead>
                        <tr>
                            <th style="width: 60px;">No</th>
                            <th>Username</th>
                            <th>Nama Lengkap</th>
                            <th>Email</th>
                            <th>Status</th>
                            <th class="text-center" style="width: 140px;">Aksi</th>
                        </tr>
                    </thead>
                    <tbody id="user-tbody">
                        @forelse($buyers as $index => $buyer)
                            <tr class="user-row" data-username="{{ $buyer->username }}"
                                data-fullname="{{ $buyer->full_name ?? '' }}" data-email="{{ $buyer->email }}">
                                <td class="row-index-number">{{ $index + 1 }}</td>
                                <td>{{ $buyer->username }}</td>
                                <td>{{ $buyer->full_name ?? '-' }}</td>
                                <td>{{ $buyer->email }}</td>
                                <td>{!! $buyer->is_verified
                                    ? '<span class="badge bg-success">Terverifikasi</span>'
                                    : '<span class="badge bg-warning">Belum</span>' !!}</td>
                                <td class="text-center">
                                    <div class="d-inline-flex gap-1">
                                        <button class="btn-table-action btn-action-view" title="Detail"
                                            data-bs-toggle="modal" data-bs-target="#modalShow"
                                            data-username="{{ $buyer->username }}"
                                            data-fullname="{{ $buyer->full_name ?? '-' }}"
                                            data-email="{{ $buyer->email }}"
                                            data-phone="{{ $buyer->phone_number ?? '-' }}"
                                            data-verified="{{ $buyer->is_verified ? 'Terverifikasi' : 'Belum' }}"
                                            data-role="Pembeli"
                                            data-created="{{ $buyer->created_at ? $buyer->created_at->format('d/m/Y H:i') : '-' }}">
                                            <span class="material-symbols-outlined">visibility</span>
                                        </button>
                                        <button class="btn-table-action btn-action-edit" title="Edit"
                                            data-bs-toggle="modal" data-bs-target="#modalEdit"
                                            data-id="{{ $buyer->user_id }}" data-username="{{ $buyer->username }}"
                                            data-fullname="{{ $buyer->full_name ?? '' }}" data-email="{{ $buyer->email }}"
                                            data-phone="{{ $buyer->phone_number ?? '' }}"
                                            data-verified="{{ $buyer->is_verified ? '1' : '0' }}">
                                            <span class="material-symbols-outlined">edit</span>
                                        </button>
                                        <button class="btn-table-action btn-action-delete" title="Hapus"
                                            data-bs-toggle="modal" data-bs-target="#modalDelete"
                                            data-id="{{ $buyer->user_id }}"
                                            data-name="{{ $buyer->full_name ?? $buyer->username }}">
                                            <span class="material-symbols-outlined">delete</span>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr class="empty-row">
                                <td colspan="6" class="text-center text-muted py-4">Tidak ada data pembeli.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            {{-- Pagination Bawah --}}
            <div
                class="content-pagination-bar d-flex flex-column flex-sm-row justify-content-between align-items-center gap-3 mt-3">
                <p class="pagination-summary" id="pagination-summary-bottom"></p>
                <nav class="d-flex align-items-center" id="pagination-nav-bottom"></nav>
            </div>
        </div>
    </div>

    {{-- MODAL CREATE --}}
    <div class="modal fade modal-modern" id="modalCreate" data-bs-backdrop="static" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-fullscreen-sm-down mx-auto px-2" style="max-width: 700px;">
            <div class="modal-content border-0 shadow">
                <form id="form-create" method="POST" action="{{ route('admin.users.store') }}">
                    @csrf
                    <input type="hidden" name="role" value="buyer">
                    <div class="modal-header border-0 pb-0 pt-4 px-4">
                        <div class="d-flex align-items-center gap-3">
                            <div class="icon-circle-wrapper bg-emerald-light border border-emerald-light flex-shrink-0">
                                <span class="material-symbols-outlined"
                                    style="font-size: 22px; color: #10b981;">person_add</span>
                            </div>
                            <div>
                                <h5 class="modal-title fw-bold text-slate-800 mb-0">Tambah Pembeli</h5>
                                <small class="text-muted d-block mt-1">Buat akun pembeli baru ke dalam sistem</small>
                            </div>
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body p-4">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label fw-semibold text-secondary small">USERNAME <span
                                        class="text-danger">*</span></label>
                                <input type="text" name="username" class="form-control form-modern-input"
                                    value="{{ old('username') }}" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold text-secondary small">NAMA LENGKAP</label>
                                <input type="text" name="full_name" class="form-control form-modern-input"
                                    value="{{ old('full_name') }}">
                                <small class="text-muted">Opsional</small>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold text-secondary small">EMAIL <span
                                        class="text-danger">*</span></label>
                                <input type="email" name="email" class="form-control form-modern-input"
                                    value="{{ old('email') }}" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold text-secondary small">NOMOR HP</label>
                                <input type="text" name="phone_number" class="form-control form-modern-input"
                                    value="{{ old('phone_number') }}" data-validate="phone" placeholder="08xxxxxxxxxx">
                                <div class="form-text text-muted">Opsional. 11–13 digit angka.</div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold text-secondary small">PASSWORD <span
                                        class="text-danger">*</span></label>
                                <div class="input-group">
                                    <input type="password" name="password" id="create-password"
                                        class="form-control form-modern-input" required>
                                    <button class="btn btn-outline-secondary toggle-password" type="button"
                                        data-target="create-password"
                                        style="border-top-right-radius: 12px; border-bottom-right-radius: 12px;">
                                        <span class="material-symbols-outlined">visibility_off</span>
                                    </button>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold text-secondary small">KONFIRMASI PASSWORD <span
                                        class="text-danger">*</span></label>
                                <div class="input-group">
                                    <input type="password" name="password_confirmation" id="create-password-confirm"
                                        class="form-control form-modern-input" required>
                                    <button class="btn btn-outline-secondary toggle-password" type="button"
                                        data-target="create-password-confirm"
                                        style="border-top-right-radius: 12px; border-bottom-right-radius: 12px;">
                                        <span class="material-symbols-outlined">visibility_off</span>
                                    </button>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-check">
                                    <input type="checkbox" name="is_verified" id="is_verified" class="form-check-input"
                                        value="1">
                                    <label class="form-check-label" for="is_verified">Verifikasi akun ini</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer border-0 pt-0 p-4 d-flex justify-content-end gap-2">
                        <button type="button" class="btn btn-modern-secondary px-4"
                            data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-modern-primary px-4">Simpan Pembeli</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- MODAL DETAIL --}}
    <div class="modal fade modal-modern" id="modalShow" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-fullscreen-sm-down mx-auto px-2" style="max-width: 700px;">
            <div class="modal-content border-0 shadow">
                <div class="modal-header border-0 pb-0 pt-4 px-4">
                    <div class="d-flex align-items-center gap-3">
                        <div class="icon-circle-wrapper bg-emerald-light border border-emerald-light flex-shrink-0">
                            <span class="material-symbols-outlined" style="font-size: 22px; color: #10b981;">badge</span>
                        </div>
                        <div>
                            <h5 class="modal-title fw-bold text-slate-800 mb-0">Detail Pembeli</h5>
                            <small class="text-muted d-block mt-1">Informasi lengkap akun</small>
                        </div>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-4">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <div class="p-3 rounded-3 h-100 bg-light border">
                                <span class="d-block text-secondary small mb-1">USERNAME</span>
                                <span id="show-username" class="fw-bold fs-5"></span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="p-3 rounded-3 h-100 bg-light border">
                                <span class="d-block text-secondary small mb-1">NAMA LENGKAP</span>
                                <span id="show-fullname"></span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="p-3 rounded-3 h-100 bg-light border">
                                <span class="d-block text-secondary small mb-1">EMAIL</span>
                                <span id="show-email"></span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="p-3 rounded-3 h-100 bg-light border">
                                <span class="d-block text-secondary small mb-1">NOMOR HP</span>
                                <span id="show-phone"></span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="p-3 rounded-3 h-100 bg-light border">
                                <span class="d-block text-secondary small mb-1">STATUS</span>
                                <span id="show-verified" class="badge"></span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="p-3 rounded-3 h-100 bg-light border">
                                <span class="d-block text-secondary small mb-1">ROLE</span>
                                <span id="show-role"></span>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="p-3 rounded-3 bg-light border">
                                <span class="d-block text-secondary small mb-1">DIBUAT PADA</span>
                                <span id="show-created"></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-0 pt-0 p-4">
                    <button type="button" class="btn btn-modern-secondary w-100" data-bs-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>

    {{-- MODAL EDIT --}}
    <div class="modal fade modal-modern" id="modalEdit" data-bs-backdrop="static" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-fullscreen-sm-down mx-auto px-2" style="max-width: 700px;">
            <div class="modal-content border-0 shadow">
                <form id="form-edit" method="POST">
                    @csrf
                    @method('PUT')
                    <div class="modal-header border-0 pb-0 pt-4 px-4">
                        <div class="d-flex align-items-center gap-3">
                            <div class="icon-circle-wrapper bg-emerald-light border border-emerald-light flex-shrink-0">
                                <span class="material-symbols-outlined"
                                    style="font-size: 22px; color: #10b981;">edit_square</span>
                            </div>
                            <div>
                                <h5 class="modal-title fw-bold text-slate-800 mb-0">Edit Pembeli</h5>
                                <small class="text-muted d-block mt-1">Perbarui data akun pembeli</small>
                            </div>
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body p-4">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label fw-semibold text-secondary small">USERNAME <span
                                        class="text-danger">*</span></label>
                                <input type="text" name="username" id="edit-username"
                                    class="form-control form-modern-input" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold text-secondary small">NAMA LENGKAP</label>
                                <input type="text" name="full_name" id="edit-fullname"
                                    class="form-control form-modern-input">
                                <small class="text-muted">Opsional</small>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold text-secondary small">EMAIL <span
                                        class="text-danger">*</span></label>
                                <input type="email" name="email" id="edit-email"
                                    class="form-control form-modern-input" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold text-secondary small">NOMOR HP</label>
                                <input type="text" name="phone_number" id="edit-phone"
                                    class="form-control form-modern-input" data-validate="phone" placeholder="08xxxxxxxxxx">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold text-secondary small">PASSWORD (kosongkan jika tidak
                                    diubah)</label>
                                <div class="input-group">
                                    <input type="password" name="password" id="edit-password"
                                        class="form-control form-modern-input">
                                    <button class="btn btn-outline-secondary toggle-password" type="button"
                                        data-target="edit-password"
                                        style="border-top-right-radius: 12px; border-bottom-right-radius: 12px;">
                                        <span class="material-symbols-outlined">visibility_off</span>
                                    </button>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold text-secondary small">KONFIRMASI PASSWORD</label>
                                <div class="input-group">
                                    <input type="password" name="password_confirmation" id="edit-password-confirm"
                                        class="form-control form-modern-input">
                                    <button class="btn btn-outline-secondary toggle-password" type="button"
                                        data-target="edit-password-confirm"
                                        style="border-top-right-radius: 12px; border-bottom-right-radius: 12px;">
                                        <span class="material-symbols-outlined">visibility_off</span>
                                    </button>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-check">
                                    <input type="checkbox" name="is_verified" id="edit-verified"
                                        class="form-check-input" value="1">
                                    <label class="form-check-label" for="edit-verified">Verifikasi akun ini</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer border-0 pt-0 p-4 d-flex justify-content-end gap-2">
                        <button type="button" class="btn btn-modern-secondary px-4"
                            data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-modern-primary px-4">Simpan Perubahan</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- MODAL DELETE --}}
    <div class="modal fade modal-modern" id="modalDelete" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered mx-auto px-3" style="max-width: 400px;">
            <div class="modal-content border-0 shadow">
                <form id="form-delete" method="POST">
                    @csrf
                    @method('DELETE')
                    <div class="modal-body text-center p-4 pt-5">
                        <div class="icon-circle-wrapper bg-danger-subtle text-danger mx-auto mb-3"
                            style="width:56px;height:56px;">
                            <span class="material-symbols-outlined"
                                style="font-size:28px;color:#ef4444;">delete_forever</span>
                        </div>
                        <h5 class="fw-bold text-slate-800 mb-2">Hapus Pembeli?</h5>
                        <p class="text-secondary mb-0 small px-1">Tindakan ini tidak dapat dibatalkan. Anda akan menghapus
                            data pembeli secara permanen:</p>
                        <div class="mt-3 p-2 rounded-3 font-monospace fw-bold text-danger bg-light" id="delete-name">
                        </div>
                    </div>
                    <div class="modal-footer bg-white border-0 d-flex gap-2 p-4 pt-0 justify-content-center">
                        <button type="button" class="btn btn-modern-secondary px-4 m-0 w-50"
                            data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-danger px-4 m-0 w-50">Ya, Hapus</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Auto close alert
            document.querySelectorAll('.flash-alert').forEach(alert => {
                setTimeout(() => bootstrap.Alert.getOrCreateInstance(alert)?.close(), 5000);
            });

            // ========== TOGGLE PASSWORD ==========
            const toggleButtons = document.querySelectorAll('.toggle-password');
            toggleButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const targetId = this.getAttribute('data-target');
                    const input = document.getElementById(targetId);
                    const iconSpan = this.querySelector('.material-symbols-outlined');
                    if (input.type === 'password') {
                        input.type = 'text';
                        iconSpan.textContent = 'visibility';
                    } else {
                        input.type = 'password';
                        iconSpan.textContent = 'visibility_off';
                    }
                });
            });

            // ========== CLIENT-SIDE FILTER & PAGINATION ==========
            const rows = Array.from(document.querySelectorAll('#user-tbody .user-row'));
            const searchInput = document.getElementById('search-input');
            const entriesSpan = document.getElementById('selected-entry-value');
            const summaryBottom = document.getElementById('pagination-summary-bottom');
            const navBottom = document.getElementById('pagination-nav-bottom');
            let currentLimit = parseInt(entriesSpan.innerText) || 10;
            let currentPage = 1;

            function updatePagination() {
                const query = searchInput.value.toLowerCase().trim();
                let matched = [];
                rows.forEach(row => {
                    const username = row.getAttribute('data-username').toLowerCase();
                    const fullname = row.getAttribute('data-fullname').toLowerCase();
                    const email = row.getAttribute('data-email').toLowerCase();
                    const match = username.includes(query) || fullname.includes(query) || email.includes(
                        query);
                    row.style.display = match ? '' : 'none';
                    if (match) matched.push(row);
                });

                const totalMatch = matched.length;
                const totalPages = Math.ceil(totalMatch / currentLimit) || 1;
                if (currentPage > totalPages) currentPage = totalPages;
                const start = (currentPage - 1) * currentLimit;
                const end = start + currentLimit;

                matched.forEach((row, idx) => {
                    if (idx >= start && idx < end) {
                        row.style.display = '';
                        const noCell = row.querySelector('.row-index-number');
                        if (noCell) noCell.innerText = idx + 1;
                    } else {
                        row.style.display = 'none';
                    }
                });

                const summaryText = totalMatch === 0 ? 'Menampilkan 0 data' :
                    `Menampilkan ${start+1} sampai ${Math.min(end, totalMatch)} dari ${totalMatch} entri`;
                if (summaryBottom) summaryBottom.innerText = summaryText;

                function renderPagination(container, totalPages, currentPage) {
                    if (!container) return;
                    container.innerHTML = '';
                    const prev = document.createElement('a');
                    prev.href = '#';
                    prev.className = `content-page-link ${currentPage === 1 ? 'disabled' : ''}`;
                    prev.innerHTML = '<span class="material-symbols-outlined">chevron_left</span>';
                    prev.addEventListener('click', (e) => {
                        e.preventDefault();
                        if (currentPage > 1) {
                            currentPage--;
                            updatePagination();
                        }
                    });
                    container.appendChild(prev);

                    for (let i = 1; i <= totalPages; i++) {
                        const link = document.createElement('a');
                        link.href = '#';
                        link.className = `content-page-link ${currentPage === i ? 'active' : ''}`;
                        link.innerText = i;
                        link.addEventListener('click', (e) => {
                            e.preventDefault();
                            currentPage = i;
                            updatePagination();
                        });
                        container.appendChild(link);
                    }

                    const next = document.createElement('a');
                    next.href = '#';
                    next.className = `content-page-link ${currentPage === totalPages ? 'disabled' : ''}`;
                    next.innerHTML = '<span class="material-symbols-outlined">chevron_right</span>';
                    next.addEventListener('click', (e) => {
                        e.preventDefault();
                        if (currentPage < totalPages) {
                            currentPage++;
                            updatePagination();
                        }
                    });
                    container.appendChild(next);
                }

                renderPagination(navBottom, totalPages, currentPage);
            }

            if (searchInput) searchInput.addEventListener('input', () => {
                currentPage = 1;
                updatePagination();
            });
            document.querySelectorAll('.dropdown-menu-entries .dropdown-item').forEach(item => {
                item.addEventListener('click', function(e) {
                    e.preventDefault();
                    document.querySelectorAll('.dropdown-menu-entries .dropdown-item').forEach(i =>
                        i.classList.remove('active'));
                    this.classList.add('active');
                    currentLimit = parseInt(this.getAttribute('data-value'));
                    entriesSpan.innerText = currentLimit;
                    currentPage = 1;
                    updatePagination();
                });
            });
            updatePagination();

            // ========== MODAL BINDING ==========
            // Modal Detail
            const modalShow = document.getElementById('modalShow');
            if (modalShow) {
                modalShow.addEventListener('show.bs.modal', function(e) {
                    let btn = e.relatedTarget;
                    document.getElementById('show-username').innerText = btn.getAttribute('data-username');
                    document.getElementById('show-fullname').innerText = btn.getAttribute(
                        'data-fullname') || '-';
                    document.getElementById('show-email').innerText = btn.getAttribute('data-email');
                    document.getElementById('show-phone').innerText = btn.getAttribute('data-phone');
                    let status = btn.getAttribute('data-verified');
                    let badge = document.getElementById('show-verified');
                    badge.innerText = status;
                    badge.className = status === 'Terverifikasi' ? 'badge bg-success' : 'badge bg-warning';
                    document.getElementById('show-role').innerText = btn.getAttribute('data-role');
                    document.getElementById('show-created').innerText = btn.getAttribute('data-created');
                });
            }

            // Modal Edit
            const modalEdit = document.getElementById('modalEdit');
            if (modalEdit) {
                modalEdit.addEventListener('show.bs.modal', function(e) {
                    let btn = e.relatedTarget;
                    if (!btn) return;
                    document.getElementById('edit-username').value = btn.getAttribute('data-username');
                    document.getElementById('edit-fullname').value = btn.getAttribute('data-fullname') ||
                    '';
                    document.getElementById('edit-email').value = btn.getAttribute('data-email');
                    document.getElementById('edit-phone').value = btn.getAttribute('data-phone') || '';
                    document.getElementById('edit-verified').checked = btn.getAttribute('data-verified') ===
                        '1';
                    document.getElementById('form-edit').action = `/admin/users/{{ session('admin_route_code') }}/${btn.getAttribute('data-id')}`;

                    // Reset password fields
                    const editPass = document.getElementById('edit-password');
                    const editPassConfirm = document.getElementById('edit-password-confirm');
                    if (editPass) {
                        editPass.value = '';
                        editPass.type = 'password';
                        const toggleBtn = editPass.parentElement.querySelector(
                            '.toggle-password .material-symbols-outlined');
                        if (toggleBtn) toggleBtn.textContent = 'visibility_off';
                    }
                    if (editPassConfirm) {
                        editPassConfirm.value = '';
                        editPassConfirm.type = 'password';
                        const toggleBtn = editPassConfirm.parentElement.querySelector(
                            '.toggle-password .material-symbols-outlined');
                        if (toggleBtn) toggleBtn.textContent = 'visibility_off';
                    }
                });
            }

            // Modal Delete
            const modalDelete = document.getElementById('modalDelete');
            if (modalDelete) {
                modalDelete.addEventListener('show.bs.modal', function(e) {
                    let btn = e.relatedTarget;
                    document.getElementById('delete-name').innerText = btn.getAttribute('data-name');
                    document.getElementById('form-delete').action = `/admin/users/{{ session('admin_route_code') }}/${btn.getAttribute('data-id')}`;
                });
            }
        });
    </script>
@endsection