@extends('admin.layouts.app', ['title' => 'Payment Gateway Assignment'])

@push('head')
    <style>
        .payment-panel-header {
            position: relative;
            overflow: hidden;
            border: 0;
        }
        .payment-panel-header::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at top right, rgba(255, 255, 255, 0.18), transparent 34%),
                linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 55%);
            pointer-events: none;
        }
        .payment-panel-header > * { position: relative; z-index: 1; }
        .payment-panel-header-search {
            background: linear-gradient(135deg, #243b53 0%, #334e68 52%, #486581 100%);
            color: #f8fbff;
        }
        .payment-panel-header-list {
            background: linear-gradient(135deg, #0f766e 0%, #0f9a8a 50%, #38b2ac 100%);
            color: #f8fffe;
        }
        .assignment-page-badge {
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(148, 163, 184, 0.16);
            background:
                radial-gradient(circle at top right, rgba(37, 99, 235, 0.16), transparent 32%),
                linear-gradient(135deg, #f8fafc 0%, #eef4ff 100%);
            color: #1e293b;
            box-shadow: 0 12px 24px rgba(15, 23, 42, 0.05);
        }
        .assignment-page-badge::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.24), transparent 58%);
            pointer-events: none;
        }
        .assignment-page-badge > * {
            position: relative;
            z-index: 1;
        }
        .payment-filter-form .form-control,
        .payment-filter-form .btn { min-height: 3rem; }
        .payment-filter-form .payment-filter-actions {
            display: flex;
            align-items: end;
        }
        .payment-search-shell {
            position: relative;
        }
        .payment-search-shell .form-control {
            padding-right: 2.75rem;
        }
        .payment-search-icon {
            position: absolute;
            top: 50%;
            right: 1rem;
            transform: translateY(-50%);
            color: var(--admin-muted);
            pointer-events: none;
        }
        .gateway-badge-list {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }
        .assignment-stat-card {
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(148, 163, 184, 0.14);
            border-radius: 1.25rem;
            background:
                radial-gradient(circle at top right, rgba(37, 99, 235, 0.14), transparent 30%),
                linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
            box-shadow: 0 16px 34px rgba(15, 23, 42, 0.06);
        }
        .assignment-stat-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.26), transparent 58%);
            pointer-events: none;
        }
        .assignment-stat-card > * {
            position: relative;
            z-index: 1;
        }
        .assignment-stat-icon {
            width: 3rem;
            height: 3rem;
            border-radius: 1rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.72);
            box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.14);
            font-size: 1.2rem;
        }
        .assignment-stat-card.users .assignment-stat-icon {
            color: #2563eb;
        }
        .assignment-stat-card.assignments .assignment-stat-icon {
            color: #7c3aed;
        }
        .assignment-stat-card.methods .assignment-stat-icon {
            color: #0f766e;
        }
        html[data-theme="dark"] .assignment-stat-card {
            border-color: rgba(148, 163, 184, 0.16);
            background:
                radial-gradient(circle at top right, rgba(59, 130, 246, 0.16), transparent 30%),
                linear-gradient(135deg, rgba(15, 23, 42, 0.96) 0%, rgba(17, 24, 39, 0.94) 100%);
            box-shadow: 0 18px 36px rgba(0, 0, 0, 0.26);
        }
        html[data-theme="dark"] .assignment-stat-card::before {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), transparent 58%);
        }
        html[data-theme="dark"] .assignment-stat-icon {
            background: rgba(15, 23, 42, 0.45);
        }
        html[data-theme="dark"] .assignment-page-badge {
            border-color: rgba(148, 163, 184, 0.2);
            background:
                radial-gradient(circle at top right, rgba(59, 130, 246, 0.18), transparent 32%),
                linear-gradient(135deg, rgba(30, 41, 59, 0.92) 0%, rgba(15, 23, 42, 0.96) 100%);
            color: #e2e8f0;
            box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22);
        }
        .gateway-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            border-radius: 999px;
            padding: 0.42rem 0.75rem;
            background: #eff6ff;
            color: #1d4ed8;
            font-size: 0.82rem;
            font-weight: 600;
            line-height: 1;
        }
        .gateway-badge-empty {
            background: #f8fafc;
            color: #64748b;
        }
        .gateway-method-grid {
            display: grid;
            gap: 0.85rem;
        }
        .gateway-method-option {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            border: 1px solid var(--admin-border);
            border-radius: 1rem;
            padding: 0.85rem 1rem;
            background: var(--admin-panel);
        }
        .gateway-method-option.inactive {
            opacity: 0.72;
        }
        .gateway-method-meta {
            display: flex;
            flex-direction: column;
            gap: 0.1rem;
        }
        .gateway-sub-method-wrap {
            margin-top: 0.85rem;
            padding-top: 0.85rem;
            border-top: 1px dashed rgba(148, 163, 184, 0.35);
        }
        .gateway-sub-method-toggle {
            width: 100%;
            border: 0;
            background: transparent;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
            padding: 0;
            color: var(--admin-muted);
            font-size: 0.78rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }
        .gateway-sub-method-toggle i {
            font-size: 0.95rem;
            transition: transform 0.2s ease;
        }
        .gateway-sub-method-toggle[aria-expanded="true"] i {
            transform: rotate(180deg);
        }
        .gateway-sub-method-label {
            font-size: 0.78rem;
            font-weight: 700;
            color: var(--admin-muted);
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }
        .gateway-sub-method-grid {
            display: grid;
            gap: 0.5rem;
            margin-top: 0.75rem;
        }
        .gateway-sub-method-grid.is-scrollable {
            max-height: 18rem;
            overflow-y: auto;
            padding-right: 0.25rem;
        }
        .gateway-sub-method-grid.is-scrollable::-webkit-scrollbar {
            width: 0.4rem;
        }
        .gateway-sub-method-grid.is-scrollable::-webkit-scrollbar-thumb {
            background: rgba(148, 163, 184, 0.6);
            border-radius: 999px;
        }
        .gateway-sub-method-option {
            display: flex;
            align-items: flex-start;
            gap: 0.65rem;
            padding: 0.65rem 0.75rem;
            border-radius: 0.85rem;
            background: rgba(148, 163, 184, 0.08);
        }
        .gateway-sub-method-option .form-check-input {
            margin-top: 0.15rem;
        }
        .gateway-sub-method-option small {
            display: block;
            color: var(--admin-muted);
        }
        .gateway-method-code {
            color: var(--admin-muted);
            font-size: 0.8rem;
        }
        .gateway-user-meta {
            color: var(--admin-muted);
            font-size: 0.9rem;
        }
    </style>
@endpush

@section('content')
    @php
        $assignedGatewayCount = $users->getCollection()->sum(fn ($user) => $user->payinMethodAssignments->count());
    @endphp

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

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

    <div class="alert alert-success d-none" id="payinAssignmentSuccessAlert"></div>
    <div class="alert alert-danger d-none" id="payinAssignmentErrorAlert"></div>

    <div class="d-grid gap-3">
        <section class="card admin-card border-0">
            <div class="card-body p-4">
                <div class="d-inline-flex align-items-center gap-2 px-3 py-2 rounded-pill small fw-bold text-uppercase assignment-page-badge">
                    <i class="bi bi-diagram-3"></i>
                    <span>Payin Method Assignment</span>
                </div>
                <div class="row g-3 mt-1" id="payinAssignmentStats">
                    <div class="col-12 col-md-4">
                        <div class="assignment-stat-card users p-3 h-100">
                            <div class="d-flex align-items-center justify-content-between gap-3">
                                <div>
                                    <div class="small text-muted mb-1">Merchants On Page</div>
                                    <div class="fs-4 fw-bold">{{ $users->count() }}</div>
                                </div>
                                <div class="assignment-stat-icon">
                                    <i class="bi bi-people-fill"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-md-4">
                        <div class="assignment-stat-card assignments p-3 h-100">
                            <div class="d-flex align-items-center justify-content-between gap-3">
                                <div>
                                    <div class="small text-muted mb-1">Visible Assignments</div>
                                    <div class="fs-4 fw-bold">{{ $assignedGatewayCount }}</div>
                                </div>
                                <div class="assignment-stat-icon">
                                    <i class="bi bi-check2-square"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-md-4">
                        <div class="assignment-stat-card methods p-3 h-100">
                            <div class="d-flex align-items-center justify-content-between gap-3">
                                <div>
                                    <div class="small text-muted mb-1">Available Gateways</div>
                                    <div class="fs-4 fw-bold">{{ $methods->count() }}</div>
                                </div>
                                <div class="assignment-stat-icon">
                                    <i class="bi bi-credit-card-2-front-fill"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="card admin-card border-0" id="payinAssignmentListCard">
            <div class="card-header payment-panel-header payment-panel-header-list py-3">
                <div class="fw-bold">Payin Gateway Assignment List</div>
                <div class="small">{{ $users->total() }} total users found</div>
            </div>
            <div class="card-body p-4 pb-0">
                <form method="GET" action="{{ route('admin.payments.payin_method_assignment.index') }}" class="row g-3 payment-filter-form mb-4" id="payinAssignmentSearchForm">
                    <div class="col-12">
                        <div class="payment-search-shell">
                            <input type="search" name="search" class="form-control" value="{{ $search }}" placeholder="Search user by name, username, or email..." id="payinAssignmentSearchInput" autocomplete="off">
                            <i class="bi bi-search payment-search-icon"></i>
                        </div>
                    </div>
                </form>
            </div>
            <div id="payinAssignmentResults">
            <div class="card-body p-0">
                <div class="table-responsive p-3">
                    <table class="table align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th class="px-4 py-3 small text-muted text-uppercase">Name</th>
                                <th class="px-4 py-3 small text-muted text-uppercase">Email</th>
                                <th class="px-4 py-3 small text-muted text-uppercase">Status</th>
                                <th class="px-4 py-3 small text-muted text-uppercase">Assigned Gateways</th>
                                <th class="px-4 py-3 small text-muted text-uppercase text-end">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($users as $user)
                                @php
                                    $assignments = $user->payinMethodAssignments
                                        ->filter(fn ($assignment) => $assignment->gateway)
                                        ->values();
                                    $assignedIds = $assignments->pluck('gateway_id')->map(fn ($id) => (int) $id)->values();
                                    $selectedSubMethodMap = $assignments->mapWithKeys(function ($assignment) {
                                        $subMethodIds = collect(explode(',', (string) $assignment->sub_method_ids))
                                            ->filter(fn ($id) => $id !== '')
                                            ->map(fn ($id) => (int) $id)
                                            ->values()
                                            ->all();

                                        return [(int) $assignment->gateway_id => $subMethodIds];
                                    });
                                @endphp
                                <tr data-user-row-id="{{ $user->id }}">
                                    <td class="px-4 py-3">
                                        <div class="fw-semibold">{{ $user->name }}</div>
                                        <div class="gateway-user-meta">{{ $user->username ?: 'No username' }}</div>
                                    </td>
                                    <td class="px-4 py-3">{{ $user->email }}</td>
                                    <td class="px-4 py-3">
                                        <span class="badge {{ $user->status ? 'text-bg-success' : 'text-bg-secondary' }}">
                                            {{ $user->status ? 'Active' : 'Inactive' }}
                                        </span>
                                    </td>
                                    <td class="px-4 py-3">
                                        <div class="gateway-badge-list" data-assigned-gateways>
                                            @forelse ($assignments as $assignment)
                                                @php
                                                    $method = $assignment->gateway;
                                                    $selectedSubMethodIds = collect(explode(',', (string) $assignment->sub_method_ids))
                                                        ->filter(fn ($id) => $id !== '')
                                                        ->map(fn ($id) => (int) $id)
                                                        ->values();
                                                    $subMethodNames = ($methods->firstWhere('id', (int) $assignment->gateway_id)?->subMethods ?? collect())
                                                        ->whereIn('id', $selectedSubMethodIds)
                                                        ->pluck('name')
                                                        ->values();
                                                @endphp
                                                <span class="gateway-badge">
                                                    <i class="bi bi-credit-card-2-front"></i>
                                                    {{ $method->name }}
                                                    @if ($subMethodNames->isNotEmpty())
                                                        : {{ $subMethodNames->implode(', ') }}
                                                    @endif
                                                </span>
                                            @empty
                                                <span class="gateway-badge gateway-badge-empty">No gateway assigned</span>
                                            @endforelse
                                        </div>
                                    </td>
                                    <td class="px-4 py-3 text-end">
                                        <button
                                            type="button"
                                            class="btn btn-dark btn-sm"
                                            data-bs-toggle="modal"
                                            data-bs-target="#managePayinGatewayModal"
                                            data-user-id="{{ $user->id }}"
                                            data-user-name="{{ $user->name }}"
                                            data-user-email="{{ $user->email }}"
                                            data-selected-gateways='@json($assignedIds)'
                                            data-selected-sub-methods='@json($selectedSubMethodMap)'
                                        >
                                            Manage
                                        </button>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="px-4 py-4 text-center text-muted">No users found for payment gateway assignment.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="card-footer bg-transparent border-0 pt-0 px-4 pb-4">
                {{ $users->links() }}
            </div>
            </div>
        </section>
    </div>

    <div class="modal fade" id="managePayinGatewayModal" tabindex="-1" aria-labelledby="managePayinGatewayModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form method="POST" id="managePayinGatewayForm">
                    @csrf
                    @method('PUT')

                    <div class="modal-header">
                        <h2 class="modal-title fs-5" id="managePayinGatewayModalLabel">Assign Payment Gateways</h2>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <div class="modal-body">
                        <div class="mb-3">
                            <div class="fw-semibold" id="gatewayModalUserName">User</div>
                            <div class="gateway-user-meta" id="gatewayModalUserEmail">user@example.com</div>
                        </div>

                        <div class="gateway-method-grid">
                            @forelse ($methods as $method)
                                <label class="gateway-method-option {{ $method->status ? '' : 'inactive' }}">
                                    <div class="w-100">
                                        <div class="d-flex align-items-start justify-content-between gap-3">
                                            <div class="d-flex align-items-start gap-3">
                                                <input
                                                    class="form-check-input mt-1 gateway-checkbox"
                                                    type="checkbox"
                                                    name="gateway_ids[]"
                                                    value="{{ $method->id }}"
                                                    data-gateway-toggle="{{ $method->id }}"
                                                >
                                                <div class="gateway-method-meta">
                                                    <span class="fw-semibold">{{ $method->name }}</span>
                                                    <span class="gateway-method-code">
                                                        {{ $method->code }}
                                                        @if ($method->wallet_company)
                                                            . {{ $method->wallet_company }}
                                                        @endif
                                                        @unless ($method->status)
                                                            . Inactive
                                                        @endunless
                                                    </span>
                                                </div>
                                            </div>
                                            <span class="badge {{ $method->status ? 'text-bg-light' : 'text-bg-secondary' }}">
                                                {{ $method->status ? 'Available' : 'Inactive' }}
                                            </span>
                                        </div>
                                        @if ($method->subMethods->isNotEmpty())
                                            <div class="gateway-sub-method-wrap d-none" data-gateway-submethods="{{ $method->id }}">
                                                <button
                                                    type="button"
                                                    class="gateway-sub-method-toggle"
                                                    data-submethod-toggle="{{ $method->id }}"
                                                    aria-expanded="false"
                                                >
                                                    <span class="gateway-sub-method-label">Sub Methods</span>
                                                    <i class="bi bi-chevron-down"></i>
                                                </button>
                                                <div class="gateway-sub-method-grid d-none {{ $method->subMethods->count() > 4 ? 'is-scrollable' : '' }}" data-submethod-panel="{{ $method->id }}">
                                                    @foreach ($method->subMethods as $subMethod)
                                                        <label class="gateway-sub-method-option">
                                                            <input
                                                                class="form-check-input gateway-submethod-checkbox"
                                                                type="checkbox"
                                                                name="sub_method_ids[{{ $method->id }}][]"
                                                                value="{{ $subMethod->id }}"
                                                                data-parent-gateway-id="{{ $method->id }}"
                                                            >
                                                            <div>
                                                                <div class="fw-semibold">{{ $subMethod->name }}</div>
                                                                <small>
                                                                    {{ $subMethod->store_id ?: 'No store id' }}
                                                                    @if ($subMethod->website)
                                                                        . {{ $subMethod->website }}
                                                                    @endif
                                                                </small>
                                                            </div>
                                                        </label>
                                                    @endforeach
                                                </div>
                                            </div>
                                        @endif
                                    </div>
                                </label>
                            @empty
                                <div class="text-muted">No payin methods available yet.</div>
                            @endforelse
                        </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-success" id="payinAssignmentSubmitButton">Save Changes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const modal = document.getElementById('managePayinGatewayModal');
            const form = document.getElementById('managePayinGatewayForm');
            const searchForm = document.getElementById('payinAssignmentSearchForm');
            const searchInput = document.getElementById('payinAssignmentSearchInput');
            const userName = document.getElementById('gatewayModalUserName');
            const userEmail = document.getElementById('gatewayModalUserEmail');
            const checkboxes = Array.from(document.querySelectorAll('.gateway-checkbox'));
            const subMethodCheckboxes = Array.from(document.querySelectorAll('.gateway-submethod-checkbox'));
            const successAlert = document.getElementById('payinAssignmentSuccessAlert');
            const errorAlert = document.getElementById('payinAssignmentErrorAlert');
            const submitButton = document.getElementById('payinAssignmentSubmitButton');
            const baseUrl = @json(url('/admin/payments/payin-method-assignment'));
            const query = @json(http_build_query(array_filter(['search' => $search, 'page' => request('page')])));
            const modalInstance = bootstrap.Modal.getOrCreateInstance(modal);

            function toggleSubMethodWrap(gatewayId, isVisible) {
                document.querySelectorAll('[data-gateway-submethods="' + gatewayId + '"]').forEach(function (wrap) {
                    wrap.classList.toggle('d-none', !isVisible);
                });

                if (!isVisible) {
                    document.querySelectorAll('[data-submethod-panel="' + gatewayId + '"]').forEach(function (panel) {
                        panel.classList.add('d-none');
                    });

                    document.querySelectorAll('[data-submethod-toggle="' + gatewayId + '"]').forEach(function (toggle) {
                        toggle.setAttribute('aria-expanded', 'false');
                    });

                    document.querySelectorAll('.gateway-submethod-checkbox[data-parent-gateway-id="' + gatewayId + '"]').forEach(function (checkbox) {
                        checkbox.checked = false;
                    });
                }
            }

            function renderAssignedMethods(methods) {
                if (!Array.isArray(methods) || methods.length === 0) {
                    return '<span class="gateway-badge gateway-badge-empty">No gateway assigned</span>';
                }

                return methods.map(function (method) {
                    const subNames = Array.isArray(method.sub_method_names) && method.sub_method_names.length
                        ? ': ' + method.sub_method_names.join(', ')
                        : '';

                    return '<span class="gateway-badge"><i class="bi bi-credit-card-2-front"></i> ' + method.name + subNames + '</span>';
                }).join('');
            }

            function showAlert(element, message) {
                element.textContent = message;
                element.classList.remove('d-none');
                window.scrollTo({ top: 0, behavior: 'smooth' });
            }

            function hideAlerts() {
                successAlert.classList.add('d-none');
                errorAlert.classList.add('d-none');
            }

            if (searchForm && searchInput) {
                let searchTimer;

                searchInput.addEventListener('input', function () {
                    window.clearTimeout(searchTimer);
                    searchTimer = window.setTimeout(function () {
                        const searchValue = searchInput.value;
                        const url = new URL(searchForm.getAttribute('action'), window.location.origin);

                        if (searchValue.trim() !== '') {
                            url.searchParams.set('search', searchValue);
                        }

                        fetch(url.toString(), {
                            headers: {
                                'X-Requested-With': 'XMLHttpRequest',
                            },
                        })
                            .then(function (response) {
                                if (!response.ok) {
                                    throw new Error('Unable to load search results.');
                                }

                                return response.text();
                            })
                            .then(function (html) {
                                const parser = new DOMParser();
                                const doc = parser.parseFromString(html, 'text/html');
                                const stats = doc.getElementById('payinAssignmentStats');
                                const results = doc.getElementById('payinAssignmentResults');
                                const currentStats = document.getElementById('payinAssignmentStats');
                                const currentResults = document.getElementById('payinAssignmentResults');

                                if (stats && currentStats) {
                                    currentStats.innerHTML = stats.innerHTML;
                                }

                                if (results && currentResults) {
                                    currentResults.innerHTML = results.innerHTML;
                                }

                                const nextUrl = new URL(window.location.href);

                                if (searchValue.trim() !== '') {
                                    nextUrl.searchParams.set('search', searchValue);
                                } else {
                                    nextUrl.searchParams.delete('search');
                                }

                                nextUrl.searchParams.delete('page');
                                window.history.replaceState({}, '', nextUrl.toString());
                            })
                            .catch(function () {
                                // Keep current results if the background search fails.
                            });
                    }, 350);
                });
            }

            modal.addEventListener('show.bs.modal', function (event) {
                const button = event.relatedTarget;
                const selectedGateways = JSON.parse(button.getAttribute('data-selected-gateways') || '[]');
                const selectedSubMethods = JSON.parse(button.getAttribute('data-selected-sub-methods') || '{}');
                const selectedSet = new Set(selectedGateways.map(String));
                const userId = button.getAttribute('data-user-id');
                const action = query ? `${baseUrl}/${userId}?${query}` : `${baseUrl}/${userId}`;

                form.setAttribute('action', action);
                userName.textContent = button.getAttribute('data-user-name') || 'User';
                userEmail.textContent = button.getAttribute('data-user-email') || '';

                checkboxes.forEach(function (checkbox) {
                    const isChecked = selectedSet.has(checkbox.value);
                    checkbox.checked = isChecked;
                    toggleSubMethodWrap(checkbox.value, isChecked);
                });

                subMethodCheckboxes.forEach(function (checkbox) {
                    const parentGatewayId = checkbox.getAttribute('data-parent-gateway-id');
                    const selectedIds = Array.isArray(selectedSubMethods[parentGatewayId]) ? selectedSubMethods[parentGatewayId].map(String) : [];
                    checkbox.checked = selectedIds.includes(checkbox.value);
                });

                hideAlerts();
            });

            checkboxes.forEach(function (checkbox) {
                checkbox.addEventListener('change', function () {
                    toggleSubMethodWrap(checkbox.value, checkbox.checked);
                });
            });

            document.querySelectorAll('[data-submethod-toggle]').forEach(function (toggle) {
                toggle.addEventListener('click', function () {
                    const gatewayId = toggle.getAttribute('data-submethod-toggle');
                    const panel = document.querySelector('[data-submethod-panel="' + gatewayId + '"]');

                    if (!panel) {
                        return;
                    }

                    const willOpen = panel.classList.contains('d-none');
                    panel.classList.toggle('d-none', !willOpen);
                    toggle.setAttribute('aria-expanded', willOpen ? 'true' : 'false');
                });
            });

            form.addEventListener('submit', async function (event) {
                event.preventDefault();
                hideAlerts();

                submitButton.disabled = true;
                submitButton.textContent = 'Saving...';

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

                    const data = await response.json();

                    if (!response.ok) {
                        throw new Error(data.message || 'Unable to update payment gateway assignment.');
                    }

                    const userId = String(data.user_id);
                    const row = document.querySelector('[data-user-row-id="' + userId + '"]');

                    if (row) {
                        const container = row.querySelector('[data-assigned-gateways]');
                        const manageButton = row.querySelector('[data-bs-target="#managePayinGatewayModal"]');

                        if (container) {
                            container.innerHTML = renderAssignedMethods(data.assigned_methods || []);
                        }

                        if (manageButton) {
                            manageButton.setAttribute('data-selected-gateways', JSON.stringify((data.assigned_methods || []).map(function (method) {
                                return Number(method.id);
                            })));
                            const subMethodMap = {};

                            (data.assigned_methods || []).forEach(function (method) {
                                subMethodMap[String(method.id)] = Array.isArray(method.sub_method_ids) ? method.sub_method_ids.map(Number) : [];
                            });

                            manageButton.setAttribute('data-selected-sub-methods', JSON.stringify(subMethodMap));
                        }
                    }

                    showAlert(successAlert, data.message || 'Payment gateway assignment updated successfully.');
                    modalInstance.hide();
                } catch (error) {
                    showAlert(errorAlert, error.message || 'Unable to update payment gateway assignment.');
                } finally {
                    submitButton.disabled = false;
                    submitButton.textContent = 'Save Changes';
                }
            });
        });
    </script>
@endpush