@extends('admin.layouts.app', ['title' => 'Payout 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;
        }
        .gateway-company-toggle {
            display: inline-flex;
            gap: 0.4rem;
            padding: 0.35rem;
            border-radius: 999px;
            background: rgba(148, 163, 184, 0.12);
        }
        .admin-payout-modal .modal-content {
            border: 0;
            border-radius: 1rem;
            overflow: hidden;
        }
        .admin-payout-modal .modal-body {
            max-height: min(78vh, 900px);
            overflow-y: auto;
            padding: 1.25rem;
        }
        .admin-payout-modal .modal-footer,
        .admin-payout-modal .modal-header {
            padding-inline: 1.25rem;
        }
        .gateway-company-toggle input {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }
        .gateway-company-toggle label {
            min-width: 8rem;
            padding: 0.7rem 1rem;
            border-radius: 999px;
            text-align: center;
            font-weight: 700;
            cursor: pointer;
        }
        .gateway-company-toggle input:checked + label {
            background: linear-gradient(135deg, #243b53 0%, #334e68 52%, #486581 100%);
            color: #fff;
        }
        .gateway-company-panel.d-none {
            display: none !important;
        }
        @media (max-width: 575.98px) {
            .admin-payout-modal .modal-dialog {
                margin: 0.5rem;
            }
            .admin-payout-modal .modal-body {
                max-height: calc(100vh - 8.5rem);
                padding: 1rem;
            }
            .admin-payout-modal .form-label {
                font-size: 0.86rem;
                margin-bottom: 0.35rem;
            }
            .admin-payout-modal .form-control,
            .admin-payout-modal .form-select {
                min-height: 2.5rem;
                font-size: 0.92rem;
                padding: 0.55rem 0.8rem;
            }
            .admin-payout-modal .btn {
                min-height: 2.5rem;
            }
            .gateway-company-toggle {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                width: 100%;
                gap: 0.35rem;
            }
            .gateway-company-toggle label {
                min-width: 0;
                width: 100%;
                padding: 0.62rem 0.75rem;
                font-size: 0.9rem;
            }
        }
    </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">Payout Methods</h1>
            {{-- <div class="small text-white">Add EasyPaisa and JazzCash payout methods from the admin panel.</div> --}}
        </div>
        <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#createPayoutMethodModal">
            <i class="bi bi-plus-lg me-1"></i> Add Payout 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="payoutMethodSuccessAlert"></div>
    <div class="alert alert-danger d-none" id="payoutMethodErrorAlert"></div>

    <div class="card admin-card">
        <div class="card-body">
            <form method="GET" action="{{ route('admin.payments.payout_methods.index') }}" class="row g-2 mb-4" id="payoutMethodSearchForm">
                <div class="col-md-6">
                    <input type="search" name="search" class="form-control" id="payoutMethodSearchInput" value="{{ $search }}" placeholder="Search by code, name, company, or symbol..." autocomplete="off">
                </div>
            </form>

            <div class="table-responsive">
                <table class="table align-middle">
                    <thead>
                        <tr>
                            <th>Code</th>
                            <th>Name</th>
                            <th>Status</th>
                            <th>Wallet Company</th>
                            <th>Symbol</th>
                            <th class="text-end">Actions</th>
                        </tr>
                    </thead>
                    <tbody id="payoutMethodsTableBody">
                        @forelse ($methods as $method)
                            @include('admin.payout_methods._row', ['method' => $method])
                        @empty
                            <tr id="payoutMethodsEmptyState">
                                <td colspan="6" class="text-center text-muted py-4">No payout methods found.</td>
                            </tr>
                        @endforelse
                        <tr id="payoutMethodsFilteredEmptyState" class="d-none">
                            <td colspan="6" class="text-center text-muted py-4">No payout methods found.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

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

    <div class="modal fade" id="createPayoutMethodModal" tabindex="-1" aria-labelledby="createPayoutMethodModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable admin-payout-modal">
            <div class="modal-content">
                <form method="POST" action="{{ route('admin.payments.payout_methods.store') }}" id="createPayoutMethodForm" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-header">
                        <h2 class="modal-title fs-5" id="createPayoutMethodModalLabel">Create Payout Method</h2>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        @include('admin.payout_methods._modal_form', ['prefix' => 'create', 'mode' => 'create'])
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="editPayoutMethodModal" tabindex="-1" aria-labelledby="editPayoutMethodModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable admin-payout-modal">
            <div class="modal-content">
                <form method="POST" id="editPayoutMethodForm" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    <div class="modal-header">
                        <h2 class="modal-title fs-5" id="editPayoutMethodModalLabel">Edit Payout Method</h2>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        @include('admin.payout_methods._modal_form', ['prefix' => 'edit', 'mode' => 'edit'])
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const searchForm = document.getElementById('payoutMethodSearchForm');
            const searchInput = document.getElementById('payoutMethodSearchInput');
            const filteredEmptyState = document.getElementById('payoutMethodsFilteredEmptyState');
            const tableBody = document.getElementById('payoutMethodsTableBody');
            const successAlert = document.getElementById('payoutMethodSuccessAlert');
            const errorAlert = document.getElementById('payoutMethodErrorAlert');
            const createForm = document.getElementById('createPayoutMethodForm');
            const editForm = document.getElementById('editPayoutMethodForm');
            const createModal = document.getElementById('createPayoutMethodModal');
            const editModal = document.getElementById('editPayoutMethodModal');

            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-payout-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 toggleCompanyPanels = function (prefix, company) {
                document.querySelectorAll('[data-company-panel="' + prefix + '"]').forEach(function (panel) {
                    panel.classList.toggle('d-none', panel.getAttribute('data-company') !== company);
                });
            };

            const bindToggleGroup = function (prefix) {
                document.querySelectorAll('input[name="gateway_type"][data-prefix="' + prefix + '"]').forEach(function (input) {
                    input.addEventListener('change', function () {
                        toggleCompanyPanels(prefix, input.value);
                        const symbol = document.getElementById(prefix + '_symbol');

                        if (symbol) {
                            symbol.value = 'PKR';
                        }
                    });
                });
            };

            const upsertRow = function (rowHtml, methodId, prependRow) {
                const wrapper = document.createElement('tbody');
                wrapper.innerHTML = rowHtml.trim();
                const nextRow = wrapper.firstElementChild;

                if (!nextRow) {
                    return;
                }

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

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

                    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 setImageName = function (prefix, value) {
                const target = document.getElementById(prefix + '_image_name');

                if (target) {
                    target.textContent = value ? 'Current image: ' + value : '';
                }
            };

            const bindImageField = function (prefix) {
                const input = document.getElementById(prefix + '_image');
                const target = document.getElementById(prefix + '_image_name');

                if (!input || !target) {
                    return;
                }

                input.addEventListener('change', function () {
                    target.textContent = input.files && input.files[0] ? 'Selected image: ' + input.files[0].name : '';
                });
            };

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

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

                    if (options.resetAfterSuccess) {
                        formElement.reset();
                        const defaultToggle = formElement.querySelector('input[name="gateway_type"][value="easypaisa"]');

                        if (defaultToggle) {
                            defaultToggle.checked = true;
                            toggleCompanyPanels(options.prefix, 'easypaisa');
                        }

                        setImageName(options.prefix, '');
                    }

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

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

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

            bindToggleGroup('create');
            bindToggleGroup('edit');
            bindImageField('create');
            bindImageField('edit');
            toggleCompanyPanels('create', 'easypaisa');
            toggleCompanyPanels('edit', 'easypaisa');

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

            if (editModal && editForm) {
                editModal.addEventListener('show.bs.modal', function (event) {
                    const button = event.relatedTarget;
                    const parameters = JSON.parse(button.getAttribute('data-parameters') || '{}');
                    const company = button.getAttribute('data-company-type') || 'easypaisa';

                    editForm.setAttribute('action', "{{ url('/admin/payments/payout-methods') }}/" + button.getAttribute('data-method-id'));
                    setValue('edit_code', button.getAttribute('data-code'));
                    setValue('edit_name', button.getAttribute('data-name'));
                    setValue('edit_status', button.getAttribute('data-status'));
                    setValue('edit_wallet_company', button.getAttribute('data-wallet-company'));
                    setValue('edit_symbol', 'PKR');
                    setValue('edit_image', '');
                    setImageName('edit', button.getAttribute('data-image'));

                    if (company === 'easypaisa') {
                        setValue('edit_easy_client_id', parameters.client_id);
                        setValue('edit_easy_client_secret', parameters.client_secret);
                        setValue('edit_easy_subcriber_number', parameters.subcriber_number);
                        setValue('edit_easy_subcriber_pin', parameters.subcriber_pin);
                        setValue('edit_easy_x_channel', parameters.x_channel);
                        setValue('edit_jazz_client_id', '');
                        setValue('edit_jazz_client_secret', '');
                        setValue('edit_jazz_partner_id', '');
                        setValue('edit_jazz_aes_key', '');
                        setValue('edit_jazz_aes_iv', '');
                        setValue('edit_jazz_api_key_ibft', '');
                    } else {
                        setValue('edit_easy_client_id', '');
                        setValue('edit_easy_client_secret', '');
                        setValue('edit_easy_subcriber_number', '');
                        setValue('edit_easy_subcriber_pin', '');
                        setValue('edit_easy_x_channel', '');
                        setValue('edit_jazz_client_id', parameters.client_id);
                        setValue('edit_jazz_client_secret', parameters.client_secret);
                        setValue('edit_jazz_partner_id', parameters.partner_id);
                        setValue('edit_jazz_aes_key', parameters.aes_key);
                        setValue('edit_jazz_aes_iv', parameters.aes_iv);
                        setValue('edit_jazz_api_key_ibft', parameters.api_key_ibft);
                    }

                    const companyField = editForm.querySelector('input[name="gateway_type"][value="' + company + '"]');
                    if (companyField) {
                        companyField.checked = true;
                    }

                    toggleCompanyPanels('edit', company);
                });

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