@extends('admin.layouts.app', ['title' => 'Payout 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(16, 185, 129, 0.16), transparent 32%),
                linear-gradient(135deg, #f8fafc 0%, #edfdf7 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(16, 185, 129, 0.14), transparent 30%),
                linear-gradient(135deg, #ffffff 0%, #f6fffb 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: #0f766e;
        }
        .assignment-stat-card.assignments .assignment-stat-icon {
            color: #2563eb;
        }
        .assignment-stat-card.methods .assignment-stat-icon {
            color: #b45309;
        }
        html[data-theme="dark"] .assignment-stat-card {
            border-color: rgba(148, 163, 184, 0.16);
            background:
                radial-gradient(circle at top right, rgba(16, 185, 129, 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(16, 185, 129, 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: #ecfdf5;
            color: #047857;
            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-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->payoutMethods->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="payoutAssignmentSuccessAlert"></div>
    <div class="alert alert-danger d-none" id="payoutAssignmentErrorAlert"></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>Payout Method Assignment</span>
                </div>
                <div class="row g-3 mt-1" id="payoutAssignmentStats">
                    <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-wallet2"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="card admin-card border-0" id="payoutAssignmentListCard">
            <div class="card-header payment-panel-header payment-panel-header-list py-3">
                <div class="fw-bold">Payout Gateway Assignment List</div>
                <div class="small">{{ $users->total() }} total merchants found</div>
            </div>
            <div class="card-body p-4 pb-0">
                <form method="GET" action="{{ route('admin.payments.payout_method_assignment.index') }}" class="row g-3 payment-filter-form mb-4" id="payoutAssignmentSearchForm">
                    <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="payoutAssignmentSearchInput" autocomplete="off">
                            <i class="bi bi-search payment-search-icon"></i>
                        </div>
                    </div>
                </form>
            </div>
            <div id="payoutAssignmentResults">
            <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 Payout 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
                                    $assignedIds = $user->payoutMethods->pluck('id')->map(fn ($id) => (int) $id)->values();
                                @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 ($user->payoutMethods as $method)
                                                <span class="gateway-badge">
                                                    <i class="bi bi-wallet2"></i>
                                                    {{ $method->name }}
                                                </span>
                                            @empty
                                                <span class="gateway-badge gateway-badge-empty">No payout 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="#managePayoutGatewayModal"
                                            data-user-id="{{ $user->id }}"
                                            data-user-name="{{ $user->name }}"
                                            data-user-email="{{ $user->email }}"
                                            data-selected-gateways='@json($assignedIds)'
                                        >
                                            Manage
                                        </button>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="px-4 py-4 text-center text-muted">No users found for payout 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="managePayoutGatewayModal" tabindex="-1" aria-labelledby="managePayoutGatewayModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form method="POST" id="managePayoutGatewayForm">
                    @csrf
                    @method('PUT')

                    <div class="modal-header">
                        <h2 class="modal-title fs-5" id="managePayoutGatewayModalLabel">Assign Payout 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="payoutGatewayModalUserName">User</div>
                            <div class="gateway-user-meta" id="payoutGatewayModalUserEmail">user@example.com</div>
                        </div>

                        <div class="gateway-method-grid">
                            @forelse ($methods as $method)
                                <label class="gateway-method-option {{ $method->status ? '' : 'inactive' }}">
                                    <div class="d-flex align-items-start gap-3">
                                        <input
                                            class="form-check-input mt-1 payout-gateway-checkbox"
                                            type="checkbox"
                                            name="gateway_ids[]"
                                            value="{{ $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>
                                </label>
                            @empty
                                <div class="text-muted">No payout 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="payoutAssignmentSubmitButton">Save Changes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const modal = document.getElementById('managePayoutGatewayModal');
            const form = document.getElementById('managePayoutGatewayForm');
            const searchForm = document.getElementById('payoutAssignmentSearchForm');
            const searchInput = document.getElementById('payoutAssignmentSearchInput');
            const userName = document.getElementById('payoutGatewayModalUserName');
            const userEmail = document.getElementById('payoutGatewayModalUserEmail');
            const checkboxes = Array.from(document.querySelectorAll('.payout-gateway-checkbox'));
            const successAlert = document.getElementById('payoutAssignmentSuccessAlert');
            const errorAlert = document.getElementById('payoutAssignmentErrorAlert');
            const submitButton = document.getElementById('payoutAssignmentSubmitButton');
            const baseUrl = @json(url('/admin/payments/payout-method-assignment'));
            const query = @json(http_build_query(array_filter(['search' => $search, 'page' => request('page')])));
            const modalInstance = bootstrap.Modal.getOrCreateInstance(modal);

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

                return methods.map(function (method) {
                    return '<span class="gateway-badge"><i class="bi bi-wallet2"></i> ' + method.name + '</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('payoutAssignmentStats');
                                const results = doc.getElementById('payoutAssignmentResults');
                                const currentStats = document.getElementById('payoutAssignmentStats');
                                const currentResults = document.getElementById('payoutAssignmentResults');

                                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 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) {
                    checkbox.checked = selectedSet.has(checkbox.value);
                });

                hideAlerts();
            });

            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 payout 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="#managePayoutGatewayModal"]');

                        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);
                            })));
                        }
                    }

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