@extends('admin.layouts.app', ['title' => __('admin.users')])

@push('head')
    <style>
        .admin-module-hero {
            position: relative;
            overflow: hidden;
            border: 0;
            border-radius: 0.5rem;
            padding: 1.25rem 1.35rem;
            margin-bottom: 1rem;
            color: #f8fbff;
            background: linear-gradient(135deg, #243b53 0%, #334e68 52%, #486581 100%);
            box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
        }

        .admin-module-hero::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;
        }

        .admin-module-hero > * {
            position: relative;
            z-index: 1;
        }

        .admin-module-hero .text-muted {
            color: rgba(240, 245, 250, 0.78) !important;
        }

        .admin-module-hero .btn {
            border-radius: 999px;
            font-weight: 700;
        }

        .admin-user-modal .modal-body {
            max-height: min(78vh, 900px);
            overflow-y: auto;
        }
    </style>
@endpush

@section('content')
    <div class="admin-module-hero d-flex align-items-center justify-content-between flex-wrap gap-3">
        <div>
            <h1 class="h4 mb-0">{{ __('admin.users') }}</h1>
            {{-- <div class="small text-white">{{ __('admin.users_subtitle') }}</div> --}}
        </div>
        <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#createUserModal">
            <i class="bi bi-person-plus me-1"></i> {{ __('admin.create_user') }}
        </button>
    </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

            <div class="alert alert-success d-none" id="adminUsersSuccessAlert"></div>
            <div class="alert alert-danger d-none" id="adminUsersErrorAlert"></div>

            <form method="GET" action="{{ route('admin.users.index') }}" class="row g-2 mb-4" id="adminUserSearchForm">
                <div class="col-md-6">
                    <input
                        type="search"
                        name="search"
                        class="form-control"
                        id="adminUserSearchInput"
                        value="{{ $search }}"
                        placeholder="{{ __('admin.search_users') }}"
                        autocomplete="off">
                </div>
            </form>

            <div class="table-responsive">
                <table class="table align-middle">
                    <thead>
                        <tr>
                            <th>{{ __('admin.auth_name') }}</th>
                            <th>{{ __('admin.username') }}</th>
                            <th>{{ __('admin.auth_email') }}</th>
                            <th>{{ __('admin.phone') }}</th>
                            <th>{{ __('admin.status') }}</th>
                            <th>{{ __('admin.last_login') }}</th>
                            <th class="text-end">{{ __('admin.actions') }}</th>
                        </tr>
                    </thead>
                    <tbody id="adminUsersTableBody">
                        @forelse ($users as $user)
                            @include('admin.users._row', ['user' => $user])
                        @empty
                            <tr id="adminUsersEmptyState">
                                <td colspan="7" class="text-center text-muted py-4">{{ __('admin.no_users_found') }}</td>
                            </tr>
                        @endforelse
                        <tr id="adminUsersFilteredEmptyState" class="d-none">
                            <td colspan="7" class="text-center text-muted py-4">{{ __('admin.no_users_found') }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>

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

    <div class="modal fade" id="createUserModal" tabindex="-1" aria-labelledby="createUserModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable admin-user-modal">
            <div class="modal-content">
                <form method="POST" action="{{ route('admin.users.store') }}" id="createUserForm">
                    <div class="modal-header">
                        <h2 class="modal-title fs-5" id="createUserModalLabel">{{ __('admin.create_user') }}</h2>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        @include('admin.users._form', ['mode' => 'create', 'user' => $newUser, 'isModal' => true, 'formPrefix' => 'create_user'])
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="editUserModal" tabindex="-1" aria-labelledby="editUserModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable admin-user-modal">
            <div class="modal-content">
                <form method="POST" id="editUserForm">
                    @method('PUT')
                    <div class="modal-header">
                        <h2 class="modal-title fs-5" id="editUserModalLabel">{{ __('admin.edit_user') }}</h2>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        @include('admin.users._form', ['mode' => 'edit', 'user' => new \App\Models\User(), 'isModal' => true, 'formPrefix' => 'edit_user'])
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const form = document.getElementById('adminUserSearchForm');
            const input = document.getElementById('adminUserSearchInput');
            const filteredEmptyState = document.getElementById('adminUsersFilteredEmptyState');
            const tableBody = document.getElementById('adminUsersTableBody');
            const successAlert = document.getElementById('adminUsersSuccessAlert');
            const errorAlert = document.getElementById('adminUsersErrorAlert');
            const createForm = document.getElementById('createUserForm');
            const editForm = document.getElementById('editUserForm');
            const createModal = document.getElementById('createUserModal');
            const editModal = document.getElementById('editUserModal');

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

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

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

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

                Array.from(document.querySelectorAll('[data-user-row]')).forEach(function (row) {
                    const haystack = row.getAttribute('data-search') || '';
                    const shouldShow = query === '' || haystack.includes(query);
                    row.classList.toggle('d-none', !shouldShow);

                    if (shouldShow) {
                        visibleCount += 1;
                    }
                });

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

            const upsertRow = function (rowHtml, userId, prependRow = false) {
                if (!tableBody || !rowHtml) {
                    return;
                }

                const wrapper = document.createElement('tbody');
                wrapper.innerHTML = rowHtml.trim();
                const nextRow = wrapper.firstElementChild;

                if (!nextRow) {
                    return;
                }

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

                if (existingRow) {
                    existingRow.replaceWith(nextRow);
                } else {
                    const emptyRow = document.getElementById('adminUsersEmptyState');

                    if (emptyRow) {
                        emptyRow.remove();
                    }

                    if (prependRow) {
                        tableBody.prepend(nextRow);
                    } else {
                        tableBody.appendChild(nextRow);
                    }
                }

                applyFilter();
            };

            const setValue = function (id, value) {
                const field = document.getElementById(id);

                if (field) {
                    field.value = value || '';
                }
            };

            const submitUserForm = async function (formElement, options) {
                hideAlerts();

                const submitButton = formElement.querySelector('button[type="submit"]');
                const originalLabel = submitButton ? submitButton.textContent : '';

                if (submitButton) {
                    submitButton.disabled = true;
                    submitButton.textContent = 'Saving...';
                }

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

                    const data = await response.json();

                    if (!response.ok) {
                        const message = data.message || Object.values(data.errors || {}).flat()[0] || 'Unable to save merchant.';
                        throw new Error(message);
                    }

                    upsertRow(data.row_html, data.user_id, options.prependRow);
                    bootstrap.Modal.getOrCreateInstance(options.modalElement).hide();

                    if (options.resetAfterSuccess) {
                        formElement.reset();
                    }

                    showAlert(successAlert, data.message || 'Merchant saved successfully.');
                } catch (error) {
                    showAlert(errorAlert, error.message || 'Unable to save merchant.');
                } finally {
                    if (submitButton) {
                        submitButton.disabled = false;
                        submitButton.textContent = originalLabel;
                    }
                }
            };

            if (form) {
                form.addEventListener('submit', function (event) {
                    event.preventDefault();
                });
            }

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

            if (createForm && createModal) {
                createForm.addEventListener('submit', function (event) {
                    event.preventDefault();
                    submitUserForm(createForm, {
                        modalElement: createModal,
                        prependRow: true,
                        resetAfterSuccess: true,
                    });
                });
            }

            if (editModal && editForm) {
                editModal.addEventListener('show.bs.modal', function (event) {
                    const button = event.relatedTarget;

                    if (!button) {
                        return;
                    }

                    editForm.setAttribute('action', "{{ url('/admin/users') }}/" + button.getAttribute('data-user-id'));
                    setValue('edit_user_name', button.getAttribute('data-name'));
                    setValue('edit_user_username', button.getAttribute('data-username'));
                    setValue('edit_user_email', button.getAttribute('data-email'));
                    setValue('edit_user_phone', button.getAttribute('data-phone'));
                    setValue('edit_user_city', button.getAttribute('data-city'));
                    setValue('edit_user_country', button.getAttribute('data-country'));
                    setValue('edit_user_address', button.getAttribute('data-address'));
                    setValue('edit_user_about_me', button.getAttribute('data-about-me'));
                    setValue('edit_user_profile_picture', button.getAttribute('data-profile-picture'));
                    setValue('edit_user_status', button.getAttribute('data-status'));
                    setValue('edit_user_public_key', button.getAttribute('data-public-key'));
                    setValue('edit_user_secret_key', button.getAttribute('data-secret-key'));
                    setValue('edit_user_disburse_public_key', button.getAttribute('data-disburse-public-key'));
                    setValue('edit_user_disburse_secret_key', button.getAttribute('data-disburse-secret-key'));
                    setValue('edit_user_aes_secret_key', button.getAttribute('data-aes-secret-key'));
                    setValue('edit_user_aes_iv', button.getAttribute('data-aes-iv'));
                    setValue('edit_user_password', '');
                    setValue('edit_user_password_confirmation', '');
                });

                editForm.addEventListener('submit', function (event) {
                    event.preventDefault();
                    submitUserForm(editForm, {
                        modalElement: editModal,
                        prependRow: false,
                        resetAfterSuccess: false,
                    });
                });
            }
        });
    </script>
@endpush