@extends('admin.layouts.app', ['title' => 'Sub Admins'])

@push('head')
    <style>
        .sub-admin-modal .modal-dialog {
            margin: 1rem auto;
        }

        .sub-admin-modal .modal-content {
            display: flex;
            flex-direction: column;
            max-height: calc(100vh - 2rem);
            overflow: hidden;
        }

        .sub-admin-modal .modal-header,
        .sub-admin-modal .modal-footer {
            position: sticky;
            z-index: 2;
            background: var(--bs-modal-bg, #fff);
        }

        .sub-admin-modal .modal-header {
            top: 0;
        }

        .sub-admin-modal .modal-footer {
            bottom: 0;
        }

        .sub-admin-modal form {
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
            min-height: 0;
            overflow: hidden;
        }

        .sub-admin-modal .modal-body {
            flex: 1 1 auto;
            min-height: 0;
            max-height: calc(100vh - 11rem);
            overflow-y: auto;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
        }

        #assignMerchantsModal .modal-header {
            color: #f8fbff;
            background:
                radial-gradient(circle at top right, rgba(255, 255, 255, 0.18), transparent 34%),
                linear-gradient(135deg, #0f766e 0%, #0f9a8a 50%, #38b2ac 100%);
        }

        #assignMerchantsModal .modal-footer {
            background: linear-gradient(180deg, rgba(240, 253, 250, 0.96), rgba(236, 253, 245, 0.92));
        }

        #assignMerchantsModal .modal-body {
            background: linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(241, 245, 249, 0.94));
        }

        #assignMerchantsModal .form-control {
            background: #fff;
            border-color: rgba(148, 163, 184, 0.24);
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
        }

        #assignMerchantsModal [data-merchant-card] .card,
        #assignMerchantsModal [data-dealer-card] .card {
            border-radius: 1.1rem;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94));
            border: 1px solid rgba(148, 163, 184, 0.18) !important;
            box-shadow: 0 14px 28px rgba(15, 23, 42, 0.06);
            transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
        }

        #assignMerchantsModal [data-merchant-card] .card:hover,
        #assignMerchantsModal [data-dealer-card] .card:hover {
            transform: translateY(-1px);
            border-color: rgba(15, 118, 110, 0.3) !important;
            box-shadow: 0 18px 34px rgba(15, 23, 42, 0.1);
        }

        #assignMerchantsModal .sub-admin-merchant-checkbox,
        #assignMerchantsModal .sub-admin-dealer-checkbox {
            accent-color: #0f766e;
        }

        #assignMerchantsModal [data-merchant-card]:has(.sub-admin-merchant-checkbox:checked) .card,
        #assignMerchantsModal [data-dealer-card]:has(.sub-admin-dealer-checkbox:checked) .card {
            border-color: rgba(15, 118, 110, 0.42) !important;
            background: linear-gradient(180deg, rgba(204, 251, 241, 0.52), rgba(240, 253, 250, 0.96));
            box-shadow: 0 18px 34px rgba(15, 118, 110, 0.12);
        }

        #assignMerchantsModal .badge.text-bg-light {
            background: rgba(226, 232, 240, 0.72) !important;
            color: #334155 !important;
        }

        #assignMerchantsModal .assign-split-panel {
            border: 1px solid rgba(148, 163, 184, 0.22);
            border-radius: 1rem;
            padding: 0.9rem;
            background: rgba(255, 255, 255, 0.72);
        }

        #assignMerchantsModal .assign-split-panel-title {
            padding-bottom: 0.55rem;
            margin-bottom: 0.75rem;
            border-bottom: 1px dashed rgba(148, 163, 184, 0.45);
        }

        @media (min-width: 1200px) {
            #assignMerchantsModal .assign-split-panel.dealer-panel {
                border-left: 3px solid rgba(15, 118, 110, 0.35);
            }
        }

        html[data-theme="dark"] #assignMerchantsModal .form-control {
            background: rgba(15, 23, 42, 0.88);
            border-color: rgba(148, 163, 184, 0.18);
            color: #e2e8f0;
            box-shadow: 0 12px 26px rgba(0, 0, 0, 0.22);
        }

        html[data-theme="dark"] #assignMerchantsModal .form-control::placeholder {
            color: #94a3b8;
        }

        html[data-theme="dark"] #assignMerchantsModal [data-merchant-card] .card,
        html[data-theme="dark"] #assignMerchantsModal [data-dealer-card] .card {
            background: linear-gradient(180deg, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.94));
            border-color: rgba(148, 163, 184, 0.16) !important;
            box-shadow: 0 16px 30px rgba(0, 0, 0, 0.26);
        }

        html[data-theme="dark"] #assignMerchantsModal [data-merchant-card] .card:hover,
        html[data-theme="dark"] #assignMerchantsModal [data-dealer-card] .card:hover {
            border-color: rgba(45, 212, 191, 0.32) !important;
        }

        html[data-theme="dark"] #assignMerchantsModal [data-merchant-card]:has(.sub-admin-merchant-checkbox:checked) .card,
        html[data-theme="dark"] #assignMerchantsModal [data-dealer-card]:has(.sub-admin-dealer-checkbox:checked) .card {
            border-color: rgba(45, 212, 191, 0.42) !important;
            background: linear-gradient(180deg, rgba(15, 118, 110, 0.28), rgba(15, 23, 42, 0.94));
            box-shadow: 0 18px 36px rgba(13, 148, 136, 0.18);
        }

        html[data-theme="dark"] #assignMerchantsModal .badge.text-bg-light {
            background: rgba(51, 65, 85, 0.9) !important;
            color: #cbd5e1 !important;
            border-color: rgba(148, 163, 184, 0.16) !important;
        }

        html[data-theme="dark"] #assignMerchantsModal .assign-split-panel {
            border-color: rgba(148, 163, 184, 0.2);
            background: rgba(15, 23, 42, 0.42);
        }

        html[data-theme="dark"] #assignMerchantsModal .assign-split-panel-title {
            border-bottom-color: rgba(148, 163, 184, 0.35);
        }

        @media (max-width: 767.98px) {
            .sub-admin-modal .modal-dialog {
                margin: 0.5rem;
                max-width: none;
                height: calc(100vh - 1rem);
            }

            .sub-admin-modal .modal-content {
                height: 100%;
                max-height: calc(100vh - 1rem);
                border-radius: 0.85rem;
            }

            .sub-admin-modal .modal-header,
            .sub-admin-modal .modal-footer {
                padding: 0.75rem 0.9rem;
            }

            .sub-admin-modal .modal-body {
                padding: 0.85rem;
                max-height: calc(100vh - 8.5rem);
            }
        }

        .sub-admin-permission-badges {
            display: flex;
            flex-wrap: wrap;
            gap: 0.4rem;
        }

        .sub-admin-permission-badge {
            display: inline-flex;
            align-items: center;
            padding: 0.35rem 0.65rem;
            border-radius: 999px;
            font-size: 0.76rem;
            font-weight: 700;
            line-height: 1.1;
            background: rgba(37, 99, 235, 0.08);
            color: #1d4ed8;
            border: 1px solid rgba(37, 99, 235, 0.16);
        }

        html[data-theme="dark"] .sub-admin-permission-badge {
            background: rgba(59, 130, 246, 0.16);
            color: #bfdbfe;
            border-color: rgba(96, 165, 250, 0.22);
        }
    </style>
@endpush

@section('content')
    @php($dealers = $dealers ?? \App\Models\Dealer::query()
        ->select('id', 'name', 'username', 'email', 'status')
        ->orderBy('name')
        ->orderBy('id')
        ->get())
    <div class="d-flex align-items-center justify-content-between flex-wrap gap-3 mb-4">
        <div>
            <h1 class="h4 mb-0">Sub Admins</h1>
            <div class="text-muted small">Create sub admins, assign reusable roles, and control merchant access.</div>
        </div>
        <div class="d-flex gap-2 flex-wrap">
            <a href="{{ route('admin.sub_admin_roles.index') }}" class="btn btn-outline-primary btn-sm">
                <i class="bi bi-shield-check me-1"></i> Manage Roles
            </a>
            <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#createSubAdminModal" data-sub-admin-create-trigger @disabled($roles->isEmpty())>
                <i class="bi bi-person-plus me-1"></i> Create Sub Admin
            </button>
        </div>
    </div>

    @if ($roles->isEmpty())
        <div class="alert alert-warning">
            No active roles available. Create a role first from <a href="{{ route('admin.sub_admin_roles.index') }}" class="alert-link">Sub Admin Roles</a>.
        </div>
    @endif

    <div id="subAdminPageAlert" class="d-none"></div>

    <div class="card admin-card">
        <div class="card-body">
            @if (session('status'))
                <div class="alert alert-success">{{ session('status') }}</div>
            @endif

            @if ($errors->any())
                <div class="alert alert-danger">{{ $errors->first() }}</div>
            @endif

            <form method="GET" action="{{ route('admin.sub_admins.index') }}" class="row g-2 mb-4" id="subAdminSearchForm">
                <div class="col-md-6">
                    <input type="search" name="search" class="form-control" id="subAdminSearchInput" value="{{ $search }}" placeholder="Search sub admin by name, email, or role">
                </div>
            </form>

            <div class="table-responsive">
                <table class="table align-middle">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Status</th>
                            <th>Role</th>
                            <th>Assigned Access</th>
                            <th>Permissions</th>
                            <th class="text-end">Actions</th>
                        </tr>
                    </thead>
                    <tbody id="subAdminTableBody">
                        @forelse ($subAdmins as $subAdmin)
                            @include('admin.sub_admins._row', ['subAdmin' => $subAdmin])
                        @empty
                            <tr id="subAdminEmptyState">
                                <td colspan="7" class="text-center text-muted py-4">No sub admins found.</td>
                            </tr>
                        @endforelse
                        <tr id="subAdminFilteredEmptyState" class="d-none">
                            <td colspan="7" class="text-center text-muted py-4">No sub admins found.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            {{ $subAdmins->links() }}
        </div>
    </div>

    <div class="modal fade sub-admin-modal" id="createSubAdminModal" tabindex="-1" aria-labelledby="createSubAdminModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <div>
                        <h5 class="modal-title" id="createSubAdminModalLabel">Create Sub Admin</h5>
                        <div class="text-muted small">Create a sub admin and assign one reusable role.</div>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form method="POST" action="{{ route('admin.sub_admins.store') }}" id="createSubAdminForm">
                    @csrf
                    <div class="modal-body">
                        @include('admin.sub_admins._form', [
                            'mode' => 'create',
                            'subAdmin' => $newSubAdmin,
                            'roles' => $roles,
                            'fieldPrefix' => 'create_sub_admin_',
                            'showActions' => false,
                        ])
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary" @disabled($roles->isEmpty())>Create Sub Admin</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade sub-admin-modal" id="editSubAdminModal" tabindex="-1" aria-labelledby="editSubAdminModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <div>
                        <h5 class="modal-title" id="editSubAdminModalLabel">Edit Sub Admin</h5>
                        <div class="text-muted small">Update sub admin account details, role, and merchant access.</div>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form method="POST" id="editSubAdminForm">
                    @csrf
                    @method('PUT')
                    <div class="modal-body">
                        @include('admin.sub_admins._form', [
                            'mode' => 'edit',
                            'subAdmin' => new \App\Models\Admin(['is_active' => true]),
                            'roles' => $roles,
                            'fieldPrefix' => 'edit_sub_admin_',
                            'showActions' => false,
                        ])
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Save Changes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade sub-admin-modal" id="assignMerchantsModal" tabindex="-1" aria-labelledby="assignMerchantsModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <div>
                        <h5 class="modal-title" id="assignMerchantsModalLabel">Assign Merchants &amp; Dealers</h5>
                        <div class="text-muted small" id="assignMerchantsModalMeta">Choose which merchants and dealers this sub admin can access.</div>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form method="POST" id="assignMerchantsForm">
                    @csrf
                    @method('PUT')

                    <div class="modal-body">
                        <div class="row g-3 align-items-center mb-4">
                            <div class="col-lg-7">
                                <label for="subAdminMerchantSearch" class="form-label small text-muted mb-1">Search merchants or dealers</label>
                                <div class="position-relative">
                                    <i class="bi bi-search position-absolute top-50 translate-middle-y ms-3 text-muted"></i>
                                    <input type="search" id="subAdminMerchantSearch" class="form-control ps-5" placeholder="Search by name, username, or email">
                                </div>
                            </div>
                            <div class="col-lg-5">
                                <div class="small text-muted mb-1">Assigned access</div>
                                <div class="fw-semibold" id="subAdminMerchantCount">0 merchants | 0 dealers</div>
                            </div>
                        </div>

                        <div class="row g-3">
                            <div class="col-12 col-xl-6">
                                <div class="assign-split-panel merchant-panel">
                                <div class="fw-semibold small text-uppercase text-muted assign-split-panel-title">Merchants</div>
                                <div class="row g-3" id="subAdminMerchantGrid">
                                    @forelse ($users as $user)
                                        <div class="col-12 col-md-6" data-merchant-card data-search="{{ strtolower(trim(implode(' ', array_filter([$user->name, $user->username, $user->email])))) }}">
                                            <div class="card h-100 border-0 shadow-sm">
                                                <div class="card-body">
                                                    <div class="form-check mb-3">
                                                        <input class="form-check-input sub-admin-merchant-checkbox" type="checkbox" name="assigned_user_ids[]" value="{{ $user->id }}" id="modal_assigned_user_{{ $user->id }}">
                                                        <label class="form-check-label fw-semibold" for="modal_assigned_user_{{ $user->id }}">{{ $user->name }}</label>
                                                    </div>
                                                    <div class="small text-muted mb-2">{{ $user->email }}</div>
                                                    <div class="d-flex flex-wrap gap-2">
                                                        <span class="badge text-bg-light border">{{ $user->username ?: 'No username' }}</span>
                                                        <span class="badge {{ $user->status ? 'text-bg-success' : 'text-bg-secondary' }}">{{ $user->status ? 'Active' : 'Inactive' }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @empty
                                        <div class="col-12">
                                            <div class="text-center text-muted py-4">No merchants found.</div>
                                        </div>
                                    @endforelse
                                </div>
                                <div id="subAdminMerchantEmptyState" class="text-center text-muted py-4 d-none">No merchants match your search.</div>
                                </div>
                            </div>

                            <div class="col-12 col-xl-6">
                                <div class="assign-split-panel dealer-panel">
                                <div class="fw-semibold small text-uppercase text-muted assign-split-panel-title">Dealers</div>
                                <div class="row g-3" id="subAdminDealerGrid">
                                    @forelse ($dealers as $dealer)
                                        <div class="col-12 col-md-6" data-dealer-card data-search="{{ strtolower(trim(implode(' ', array_filter([$dealer->name, $dealer->username, $dealer->email])))) }}">
                                            <div class="card h-100 border-0 shadow-sm">
                                                <div class="card-body">
                                                    <div class="form-check mb-3">
                                                        <input class="form-check-input sub-admin-dealer-checkbox" type="checkbox" name="assigned_dealer_ids[]" value="{{ $dealer->id }}" id="modal_assigned_dealer_{{ $dealer->id }}">
                                                        <label class="form-check-label fw-semibold" for="modal_assigned_dealer_{{ $dealer->id }}">{{ $dealer->name }}</label>
                                                    </div>
                                                    <div class="small text-muted mb-2">{{ $dealer->email }}</div>
                                                    <div class="d-flex flex-wrap gap-2">
                                                        <span class="badge text-bg-light border">{{ $dealer->username ?: 'No username' }}</span>
                                                        <span class="badge {{ $dealer->status ? 'text-bg-success' : 'text-bg-secondary' }}">{{ $dealer->status ? 'Active' : 'Inactive' }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @empty
                                        <div class="col-12">
                                            <div class="text-center text-muted py-4">No dealers found.</div>
                                        </div>
                                    @endforelse
                                </div>
                                <div id="subAdminDealerEmptyState" class="text-center text-muted py-4 d-none">No dealers match your search.</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Save Access Assignment</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const searchInput = document.getElementById('subAdminSearchInput');
    const filteredEmptyState = document.getElementById('subAdminFilteredEmptyState');
    const tableBody = document.getElementById('subAdminTableBody');
    const pageAlert = document.getElementById('subAdminPageAlert');

    const createModal = document.getElementById('createSubAdminModal');
    const editModal = document.getElementById('editSubAdminModal');
    const assignModal = document.getElementById('assignMerchantsModal');
    const createForm = document.getElementById('createSubAdminForm');
    const editForm = document.getElementById('editSubAdminForm');
    const assignForm = document.getElementById('assignMerchantsForm');

    const createModalInstance = createModal ? bootstrap.Modal.getOrCreateInstance(createModal) : null;
    const editModalInstance = editModal ? bootstrap.Modal.getOrCreateInstance(editModal) : null;
    const assignModalInstance = assignModal ? bootstrap.Modal.getOrCreateInstance(assignModal) : null;

    const assignModalMeta = document.getElementById('assignMerchantsModalMeta');
    const assignMerchantSearchInput = document.getElementById('subAdminMerchantSearch');
    const assignMerchantCount = document.getElementById('subAdminMerchantCount');
    const assignMerchantEmptyState = document.getElementById('subAdminMerchantEmptyState');
    const assignDealerEmptyState = document.getElementById('subAdminDealerEmptyState');

    const merchantCheckboxSelector = '.sub-admin-merchant-checkbox';
    const dealerCheckboxSelector = '.sub-admin-dealer-checkbox';
    const csrfToken = createForm?.querySelector('input[name="_token"]')?.value || assignForm?.querySelector('input[name="_token"]')?.value || '';
    const assignmentState = new Map();

    const showPageAlert = function (type, message) {
        if (!pageAlert) return;
        pageAlert.className = 'alert alert-' + type;
        pageAlert.textContent = message;
        pageAlert.classList.remove('d-none');
    };

    const clearPageAlert = function () {
        if (!pageAlert) return;
        pageAlert.className = 'd-none';
        pageAlert.textContent = '';
    };

    const parseIds = function (jsonText) {
        try {
            const data = JSON.parse(jsonText || '[]');
            if (!Array.isArray(data)) return [];
            return data.map((id) => Number(id)).filter((id) => Number.isFinite(id));
        } catch (e) {
            return [];
        }
    };

    const getButtonAssignmentState = function (button) {
        return {
            users: parseIds(button?.getAttribute('data-assigned-user-ids')),
            dealers: parseIds(button?.getAttribute('data-assigned-dealer-ids')),
        };
    };

    document.querySelectorAll('[data-sub-admin-assign-trigger]').forEach(function (button) {
        const id = button.getAttribute('data-sub-admin-id');
        if (!id) return;
        assignmentState.set(String(id), getButtonAssignmentState(button));
    });

    const applyFilter = function () {
        if (!searchInput || !filteredEmptyState) return;

        const query = searchInput.value.trim().toLowerCase();
        let visibleCount = 0;

        Array.from(document.querySelectorAll('[data-sub-admin-row]')).forEach(function (row) {
            const haystack = row.getAttribute('data-search') || '';
            const show = query === '' || haystack.includes(query);
            row.classList.toggle('d-none', !show);
            if (show) visibleCount += 1;
        });

        filteredEmptyState.classList.toggle('d-none', visibleCount !== 0);
    };

    const updateAssignedMerchantCount = function () {
        if (!assignMerchantCount || !assignForm) return;
        const merchantCount = assignForm.querySelectorAll(merchantCheckboxSelector + ':checked').length;
        const dealerCount = assignForm.querySelectorAll(dealerCheckboxSelector + ':checked').length;
        assignMerchantCount.textContent = merchantCount + ' merchants | ' + dealerCount + ' dealers';
    };

    const applyMerchantSearch = function () {
        const query = (assignMerchantSearchInput?.value || '').trim().toLowerCase();
        let merchantVisible = 0;
        let dealerVisible = 0;

        document.querySelectorAll('[data-merchant-card]').forEach(function (card) {
            const haystack = card.getAttribute('data-search') || '';
            const show = query === '' || haystack.includes(query);
            card.classList.toggle('d-none', !show);
            if (show) merchantVisible += 1;
        });

        document.querySelectorAll('[data-dealer-card]').forEach(function (card) {
            const haystack = card.getAttribute('data-search') || '';
            const show = query === '' || haystack.includes(query);
            card.classList.toggle('d-none', !show);
            if (show) dealerVisible += 1;
        });

        if (assignMerchantEmptyState) assignMerchantEmptyState.classList.toggle('d-none', merchantVisible !== 0);
        if (assignDealerEmptyState) assignDealerEmptyState.classList.toggle('d-none', dealerVisible !== 0);
    };

    const resetAssignmentChecks = function () {
        if (!assignForm) return;
        assignForm.querySelectorAll(merchantCheckboxSelector + ',' + dealerCheckboxSelector).forEach(function (checkbox) {
            checkbox.checked = false;
        });
    };

    const upsertTableRow = function (subAdminId, rowHtml, prepend) {
        if (!tableBody || !rowHtml) return;

        const selector = '[data-sub-admin-row][data-sub-admin-id="' + subAdminId + '"]';
        const currentRow = tableBody.querySelector(selector);

        if (currentRow) {
            currentRow.outerHTML = rowHtml;
        } else {
            const emptyState = document.getElementById('subAdminEmptyState');
            if (emptyState) emptyState.remove();
            const filteredState = document.getElementById('subAdminFilteredEmptyState');
            if (prepend && filteredState) {
                filteredState.insertAdjacentHTML('beforebegin', rowHtml);
            } else {
                tableBody.insertAdjacentHTML('beforeend', rowHtml);
            }
        }

        applyFilter();
    };

    const fillEditForm = function (button) {
        if (!button || !editForm) return;

        editForm.setAttribute('action', "{{ url('/admin/sub-admins') }}/" + button.getAttribute('data-sub-admin-id'));
        editForm.querySelector('#edit_sub_admin_name').value = button.getAttribute('data-sub-admin-name') || '';
        editForm.querySelector('#edit_sub_admin_email').value = button.getAttribute('data-sub-admin-email') || '';
        editForm.querySelector('#edit_sub_admin_is_active').value = button.getAttribute('data-sub-admin-status') || '1';
        editForm.querySelector('#edit_sub_admin_admin_role_id').value = button.getAttribute('data-sub-admin-role-id') || '';
        editForm.querySelector('#edit_sub_admin_password').value = '';
        editForm.querySelector('#edit_sub_admin_password_confirmation').value = '';
    };

    const submitSubAdminForm = async function (formElement, modalInstance, options) {
        if (!formElement) return;
        const action = formElement.getAttribute('action');
        if (!action) return;

        const submitButton = formElement.querySelector('button[type="submit"]');
        const originalLabel = submitButton ? submitButton.innerHTML : '';
        const formData = new FormData(formElement);

        clearPageAlert();
        if (submitButton) {
            submitButton.disabled = true;
            submitButton.textContent = options.loadingText;
        }

        try {
            const response = await fetch(action, {
                method: 'POST',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': csrfToken,
                    'Accept': 'application/json'
                },
                body: formData
            });
            const payload = await response.json();

            if (!response.ok) {
                const message = payload?.message || payload?.errors?.[Object.keys(payload.errors || {})[0]]?.[0] || 'Request failed.';
                throw new Error(message);
            }

            if (payload?.row_html && payload?.sub_admin_id) {
                upsertTableRow(payload.sub_admin_id, payload.row_html, !!options.prepend);
            }

            if (modalInstance) modalInstance.hide();
            if (options.resetAfterSuccess) formElement.reset();
            showPageAlert('success', payload?.message || options.successText);
        } catch (error) {
            showPageAlert('danger', error.message || 'Unable to save.');
        } finally {
            if (submitButton) {
                submitButton.disabled = false;
                submitButton.innerHTML = originalLabel;
            }
        }
    };

    if (createModal && createForm) {
        createModal.addEventListener('show.bs.modal', function () {
            createForm.reset();
        });
    }

    if (editModal) {
        editModal.addEventListener('show.bs.modal', function (event) {
            fillEditForm(event.relatedTarget);
        });
    }

    if (searchInput) {
        searchInput.addEventListener('input', applyFilter);
    }

    if (createForm) {
        createForm.addEventListener('submit', function (event) {
            event.preventDefault();
            submitSubAdminForm(createForm, createModalInstance, {
                loadingText: 'Creating...',
                successText: 'Sub admin created successfully.',
                prepend: true,
                resetAfterSuccess: true
            });
        });
    }

    if (editForm) {
        editForm.addEventListener('submit', function (event) {
            event.preventDefault();
            submitSubAdminForm(editForm, editModalInstance, {
                loadingText: 'Saving...',
                successText: 'Sub admin updated successfully.',
                prepend: false,
                resetAfterSuccess: false
            });
        });
    }

    document.addEventListener('click', async function (event) {
        const assignTrigger = event.target.closest('[data-sub-admin-assign-trigger]');
        if (!assignTrigger || !assignForm || !assignModalInstance) return;

        event.preventDefault();
        clearPageAlert();

        const subAdminId = assignTrigger.getAttribute('data-sub-admin-id');
        const subAdminName = assignTrigger.getAttribute('data-sub-admin-name') || 'Sub admin';
        const subAdminEmail = assignTrigger.getAttribute('data-sub-admin-email') || '';
        const cachedState = assignmentState.get(String(subAdminId));
        const fallbackState = getButtonAssignmentState(assignTrigger);
        let assignedUserIds = cachedState?.users ?? fallbackState.users;
        let assignedDealerIds = cachedState?.dealers ?? fallbackState.dealers;

        assignForm.setAttribute('action', "{{ url('/admin/sub-admins') }}/" + subAdminId + '/assign-merchants');
        if (assignModalMeta) {
            assignModalMeta.textContent = 'Choose which merchants and dealers ' + subAdminName + ' (' + subAdminEmail + ') can access.';
        }

        try {
            const response = await fetch("{{ url('/admin/sub-admins') }}/" + subAdminId + "/assignments", {
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                }
            });
            if (response.ok) {
                const payload = await response.json();
                assignedUserIds = (payload?.assigned_user_ids || []).map((id) => Number(id)).filter((id) => Number.isFinite(id));
                assignedDealerIds = (payload?.assigned_dealer_ids || []).map((id) => Number(id)).filter((id) => Number.isFinite(id));
                assignmentState.set(String(subAdminId), {
                    users: assignedUserIds,
                    dealers: assignedDealerIds,
                });
            }
        } catch (e) {
            // Fallback to cached/button state
        }

        resetAssignmentChecks();
        assignForm.querySelectorAll(merchantCheckboxSelector).forEach(function (checkbox) {
            checkbox.checked = assignedUserIds.includes(Number(checkbox.value));
        });
        assignForm.querySelectorAll(dealerCheckboxSelector).forEach(function (checkbox) {
            checkbox.checked = assignedDealerIds.includes(Number(checkbox.value));
        });

        if (assignMerchantSearchInput) assignMerchantSearchInput.value = '';
        updateAssignedMerchantCount();
        applyMerchantSearch();
        assignModalInstance.show();
    });

    if (assignForm) {
        const getSelectedIds = function (selector) {
            return Array.from(assignForm.querySelectorAll(selector + ':checked'))
                .map(function (checkbox) {
                    return Number(checkbox.value);
                })
                .filter(function (id) {
                    return Number.isFinite(id);
                });
        };

        const syncRowAssignButtonData = function (subAdminId, selectedUserIds, selectedDealerIds) {
            if (!subAdminId) return;
            const row = document.querySelector('[data-sub-admin-row][data-sub-admin-id="' + subAdminId + '"]');
            const button = row?.querySelector('[data-sub-admin-assign-trigger]');
            if (!button) return;

            const nextState = {
                users: selectedUserIds,
                dealers: selectedDealerIds,
            };
            button.setAttribute('data-assigned-user-ids', JSON.stringify(nextState.users));
            button.setAttribute('data-assigned-dealer-ids', JSON.stringify(nextState.dealers));
            assignmentState.set(String(subAdminId), nextState);
        };

        assignForm.addEventListener('change', function (event) {
            if (event.target.matches(merchantCheckboxSelector) || event.target.matches(dealerCheckboxSelector)) {
                updateAssignedMerchantCount();
            }
        });

        assignForm.addEventListener('submit', async function (event) {
            event.preventDefault();
            const action = assignForm.getAttribute('action');
            if (!action) return;

            const submitButton = assignForm.querySelector('button[type="submit"]');
            const originalLabel = submitButton ? submitButton.innerHTML : '';
            if (submitButton) {
                submitButton.disabled = true;
                submitButton.textContent = 'Saving...';
            }

            const selectedUserIds = getSelectedIds(merchantCheckboxSelector);
            const selectedDealerIds = getSelectedIds(dealerCheckboxSelector);

            try {
                const response = await fetch(action, {
                    method: 'POST',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': csrfToken,
                        'Accept': 'application/json'
                    },
                    body: new FormData(assignForm)
                });

                const payload = await response.json();
                if (!response.ok) {
                    const message = payload?.message || payload?.errors?.[Object.keys(payload.errors || {})[0]]?.[0] || 'Assignment update failed.';
                    throw new Error(message);
                }

                if (payload?.row_html && payload?.sub_admin_id) {
                    upsertTableRow(payload.sub_admin_id, payload.row_html, false);
                    syncRowAssignButtonData(payload.sub_admin_id, selectedUserIds, selectedDealerIds);
                }

                assignModalInstance?.hide();
                showPageAlert('success', payload?.message || 'Merchant and dealer assignment updated successfully.');
            } catch (error) {
                showPageAlert('danger', error.message || 'Assignment update failed.');
            } finally {
                if (submitButton) {
                    submitButton.disabled = false;
                    submitButton.innerHTML = originalLabel;
                }
            }
        });
    }

    if (assignMerchantSearchInput) {
        assignMerchantSearchInput.addEventListener('input', applyMerchantSearch);
    }

    const openMode = new URLSearchParams(window.location.search).get('open');
    if (openMode === 'create' && createModalInstance && !(document.querySelector('[data-sub-admin-create-trigger]')?.disabled)) {
        createModalInstance.show();
    }

    applyFilter();
    updateAssignedMerchantCount();
    applyMerchantSearch();
});
</script>
@endpush