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

@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 .btn {
            border-radius: 999px;
            font-weight: 700;
        }
        .admin-payin-sub-method-modal .modal-content {
            border: 0;
            border-radius: 1rem;
            overflow: hidden;
        }
        .admin-payin-sub-method-modal .modal-body {
            max-height: min(78vh, 900px);
            overflow-y: auto;
            padding: 1.25rem;
        }
        .admin-payin-sub-method-modal .modal-footer,
        .admin-payin-sub-method-modal .modal-header {
            padding-inline: 1.25rem;
        }
        @media (max-width: 575.98px) {
            .admin-payin-sub-method-modal .modal-dialog {
                margin: 0.5rem;
            }
            .admin-payin-sub-method-modal .modal-body {
                max-height: calc(100vh - 8.5rem);
                padding: 1rem;
            }
            .admin-payin-sub-method-modal .form-label {
                font-size: 0.86rem;
                margin-bottom: 0.35rem;
            }
            .admin-payin-sub-method-modal .form-control,
            .admin-payin-sub-method-modal .form-select {
                min-height: 2.5rem;
                font-size: 0.92rem;
                padding: 0.55rem 0.8rem;
            }
            .admin-payin-sub-method-modal .btn {
                min-height: 2.5rem;
            }
        }
    </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">Payin Sub Methods</h1>
        </div>
        <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#createPayinSubMethodModal">
            <i class="bi bi-plus-lg me-1"></i> Add Payin Sub Method
        </button>
    </div>

    @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="payinSubMethodSuccessAlert"></div>
    <div class="alert alert-danger d-none" id="payinSubMethodErrorAlert"></div>

    <div class="card admin-card">
        <div class="card-body">
            <form method="GET" action="{{ route('admin.payments.payin_sub_methods.index') }}" class="row g-2 mb-4" id="payinSubMethodSearchForm">
                <div class="col-md-6">
                    <input type="search" name="search" class="form-control" id="payinSubMethodSearchInput" value="{{ $search }}" placeholder="Search by payin method, name, api key, store id, or website..." autocomplete="off">
                </div>
            </form>

            <div class="table-responsive">
                <table class="table align-middle">
                    <thead>
                        <tr>
                            <th>Payin Gateway</th>
                            <th>Name</th>
                            <th>Api Key</th>
                            <th>Store ID</th>
                            <th>Website</th>
                            <th class="text-end">Actions</th>
                        </tr>
                    </thead>
                    <tbody id="payinSubMethodsTableBody">
                        @forelse ($subMethods as $subMethod)
                            @include('admin.payin_sub_methods._row', ['subMethod' => $subMethod])
                        @empty
                            <tr id="payinSubMethodsEmptyState">
                                <td colspan="6" class="text-center text-muted py-4">No payin sub methods found.</td>
                            </tr>
                        @endforelse
                        <tr id="payinSubMethodsFilteredEmptyState" class="d-none">
                            <td colspan="6" class="text-center text-muted py-4">No payin sub methods found.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div class="pt-2">
                {{ $subMethods->onEachSide(1)->links('pagination::bootstrap-5') }}
            </div>
        </div>
    </div>

    <div class="modal fade" id="createPayinSubMethodModal" tabindex="-1" aria-labelledby="createPayinSubMethodModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable admin-payin-sub-method-modal">
            <div class="modal-content">
                <form method="POST" action="{{ route('admin.payments.payin_sub_methods.store') }}" id="createPayinSubMethodForm">
                    @csrf
                    <div class="modal-header">
                        <h2 class="modal-title fs-5" id="createPayinSubMethodModalLabel">Create Payin Sub Method</h2>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        @include('admin.payin_sub_methods._modal_form', ['prefix' => 'create', 'mode' => 'create', 'payinMethods' => $payinMethods])
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="editPayinSubMethodModal" tabindex="-1" aria-labelledby="editPayinSubMethodModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable admin-payin-sub-method-modal">
            <div class="modal-content">
                <form method="POST" id="editPayinSubMethodForm">
                    @csrf
                    @method('PUT')
                    <div class="modal-header">
                        <h2 class="modal-title fs-5" id="editPayinSubMethodModalLabel">Edit Payin Sub Method</h2>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        @include('admin.payin_sub_methods._modal_form', ['prefix' => 'edit', 'mode' => 'edit', 'payinMethods' => $payinMethods])
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const searchForm = document.getElementById('payinSubMethodSearchForm');
            const searchInput = document.getElementById('payinSubMethodSearchInput');
            const filteredEmptyState = document.getElementById('payinSubMethodsFilteredEmptyState');
            const tableBody = document.getElementById('payinSubMethodsTableBody');
            const successAlert = document.getElementById('payinSubMethodSuccessAlert');
            const errorAlert = document.getElementById('payinSubMethodErrorAlert');
            const createForm = document.getElementById('createPayinSubMethodForm');
            const editForm = document.getElementById('editPayinSubMethodForm');
            const createModal = document.getElementById('createPayinSubMethodModal');
            const editModal = document.getElementById('editPayinSubMethodModal');

            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 (!searchInput || !filteredEmptyState) {
                    return;
                }

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

                Array.from(document.querySelectorAll('[data-payin-sub-method-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, subMethodId, prependRow) {
                const wrapper = document.createElement('tbody');
                wrapper.innerHTML = rowHtml.trim();
                const nextRow = wrapper.firstElementChild;

                if (!nextRow) {
                    return;
                }

                const existingRow = document.querySelector('[data-sub-method-id="' + subMethodId + '"]');

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

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

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

                applyFilter();
            };

            const removeRow = function (subMethodId) {
                const row = document.querySelector('[data-sub-method-id="' + subMethodId + '"]');

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

                if (!document.querySelector('[data-payin-sub-method-row]')) {
                    const emptyRow = document.createElement('tr');
                    emptyRow.id = 'payinSubMethodsEmptyState';
                    emptyRow.innerHTML = '<td colspan="6" class="text-center text-muted py-4">No payin sub methods found.</td>';
                    tableBody.prepend(emptyRow);
                }

                applyFilter();
            };

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

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

            const submitForm = 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 payin sub method.';
                        throw new Error(message);
                    }

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

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

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

            const bindDeleteButtons = function () {
                document.querySelectorAll('[data-delete-sub-method]').forEach(function (button) {
                    if (button.dataset.boundDelete === '1') {
                        return;
                    }

                    button.dataset.boundDelete = '1';
                    button.addEventListener('click', async function () {
                        if (!confirm('Delete this payin sub method?')) {
                            return;
                        }

                        hideAlerts();

                        try {
                            const response = await fetch(button.getAttribute('data-delete-url'), {
                                method: 'POST',
                                headers: {
                                    'Accept': 'application/json',
                                    'X-Requested-With': 'XMLHttpRequest',
                                },
                                body: (() => {
                                    const formData = new FormData();
                                    formData.append('_token', '{{ csrf_token() }}');
                                    formData.append('_method', 'DELETE');
                                    return formData;
                                })(),
                            });

                            const data = await response.json();

                            if (!response.ok) {
                                throw new Error(data.message || 'Unable to delete payin sub method.');
                            }

                            removeRow(button.getAttribute('data-sub-method-id'));
                            showAlert(successAlert, data.message || 'Payin sub method deleted successfully.');
                        } catch (error) {
                            showAlert(errorAlert, error.message || 'Unable to delete payin sub method.');
                        }
                    });
                });
            };

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

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

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

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

                    editForm.setAttribute('action', "{{ url('/admin/payments/payin-sub-methods') }}/" + button.getAttribute('data-sub-method-id'));
                    setValue('edit_parent_payin_method_id', button.getAttribute('data-parent-payin-method-id'));
                    setValue('edit_name', button.getAttribute('data-name'));
                    setValue('edit_api_key', button.getAttribute('data-api-key'));
                    setValue('edit_store_id', button.getAttribute('data-store-id'));
                    setValue('edit_website', button.getAttribute('data-website'));
                });

                editForm.addEventListener('submit', function (event) {
                    event.preventDefault();
                    submitForm(editForm, {
                        modalElement: editModal,
                        prependRow: false,
                        resetAfterSuccess: false,
                    });
                });
            }

            bindDeleteButtons();

            const observer = new MutationObserver(function () {
                bindDeleteButtons();
            });

            if (tableBody) {
                observer.observe(tableBody, { childList: true });
            }
        });
    </script>
@endpush