@extends('admin.layouts.app', ['title' => 'Payout Transaction Report'])

@push('head')
    <style>
        .transaction-filter-header,
        .transaction-list-header {
            position: relative;
            overflow: hidden;
            border: 0;
            color: #f8fbff;
        }

        .transaction-filter-header {
            background: linear-gradient(135deg, #243b53 0%, #334e68 52%, #486581 100%);
        }

        .transaction-list-header {
            background: linear-gradient(135deg, #0f766e 0%, #0f9a8a 50%, #38b2ac 100%);
        }

        .transaction-filter-header::before,
        .transaction-list-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;
        }

        .transaction-filter-header > *,
        .transaction-list-header > * {
            position: relative;
            z-index: 1;
        }

        .transaction-filter-form .form-control,
        .transaction-filter-form .form-select,
        .transaction-filter-form .btn {
            min-height: 3rem;
            border-radius: 999px;
        }

        .transaction-filter-form .btn {
            font-weight: 700;
        }

        .transaction-user-combobox {
            position: relative;
        }

        .transaction-user-input {
            padding-right: 3rem;
        }

        .transaction-user-toggle {
            position: absolute;
            top: 50%;
            right: 0.75rem;
            transform: translateY(-50%);
            width: 2rem;
            height: 2rem;
            border: 0;
            background: transparent;
            color: #64748b;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
        }

        .transaction-user-toggle:hover,
        .transaction-user-toggle:focus {
            background: rgba(148, 163, 184, 0.14);
            color: #0f172a;
            outline: none;
        }

        .transaction-user-dropdown {
            position: absolute;
            top: calc(100% + 0.45rem);
            left: 0;
            right: 0;
            z-index: 30;
            max-height: 18rem;
            overflow-y: auto;
            border: 1px solid rgba(148, 163, 184, 0.28);
            border-radius: 1rem;
            background: #fff;
            box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12);
            padding: 0.45rem;
        }

        .transaction-user-option {
            width: 100%;
            border: 0;
            background: transparent;
            display: block;
            text-align: left;
            border-radius: 0.8rem;
            padding: 0.75rem 0.85rem;
            font-size: 0.92rem;
            color: #1f2937;
        }

        .transaction-user-option:hover,
        .transaction-user-option:focus,
        .transaction-user-option.is-active {
            background: #eaf2ff;
            color: #0f172a;
            outline: none;
        }

        .transaction-user-option small {
            display: block;
            margin-top: 0.18rem;
            color: #64748b;
            font-size: 0.78rem;
        }

        .transaction-pagination .pagination {
            margin-bottom: 0;
            gap: 0.35rem;
            flex-wrap: wrap;
        }

        .transaction-pagination .page-link,
        .transaction-pagination .page-item span {
            min-width: 2.4rem;
            min-height: 2.4rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 0.85rem;
            font-size: 0.92rem;
            line-height: 1;
            padding: 0.55rem 0.8rem;
        }

        .transaction-pagination .page-link svg,
        .transaction-pagination .page-item span svg {
            width: 0.9rem;
            height: 0.9rem;
        }

        .transaction-table-wrap,
        .transaction-pagination-wrap {
            transition: opacity 0.18s ease;
        }

        @media (max-width: 767.98px) {
            .transaction-filter-form .form-control,
            .transaction-filter-form .form-select,
            .transaction-filter-form .btn {
                min-height: 2.75rem;
                font-size: 0.92rem;
                padding-inline: 0.9rem;
            }

            .transaction-filter-form .col-6,
            .transaction-filter-form .col-xl-2 {
                width: 100%;
            }
        }
    </style>
@endpush

@section('content')
    @php
        $emptyTransactionPaginator = new \Illuminate\Pagination\LengthAwarePaginator(collect(), 0, 10, 1, [
            'path' => route('admin.reports.payout_transaction.index'),
        ]);
        $emptyPayoutTransactionTableHtml = view('admin.reports.partials._payout_transaction_report_table', ['orders' => $emptyTransactionPaginator])->render();
        $emptyPayoutTransactionPaginationHtml = view('admin.reports.partials._payout_transaction_report_pagination', ['orders' => $emptyTransactionPaginator])->render();
    @endphp

    <div class="d-grid gap-4">
        <section>
            <div>
                <h1 class="h2 fw-bold mb-2">Payout Transaction Report</h1>
                <div class="text-muted">Dashboard / Payout Transaction Report</div>
            </div>
        </section>

        <section class="card admin-card border-0">
            <div class="card-header transaction-filter-header py-4">
                <div class="fw-bold fs-5">Export Filter</div>
            </div>
            <div class="card-body p-4">
                <div class="alert alert-danger d-none" id="payoutTransactionReportErrorAlert"></div>
                <form method="GET" action="{{ route('admin.reports.payout_transaction.index') }}" class="row g-3 align-items-end transaction-filter-form" id="payoutTransactionReportFilterForm" autocomplete="off">
                    <div class="col-12 col-md-6 col-xl-2">
                        <label class="form-label small text-muted">Search Merchants</label>
                        <div class="transaction-user-combobox">
                            <input type="hidden" name="user_id" id="payoutTransactionReportUserIdInput" value="{{ $filters['user_id'] ?? '' }}">
                            <input type="search" name="search" class="form-control transaction-user-input" id="payoutTransactionReportSearchInput" value="{{ $filters['search'] ?? '' }}" placeholder="Search merchants..." autocomplete="off">
                            <button type="button" class="transaction-user-toggle" id="payoutTransactionReportUserToggle" aria-label="Toggle merchants dropdown">
                                <i class="bi bi-chevron-down"></i>
                            </button>
                            <div class="transaction-user-dropdown d-none" id="payoutTransactionReportUserDropdown"></div>
                        </div>
                    </div>
                    <div class="col-12 col-md-6 col-xl-2">
                        <label class="form-label small text-muted">Type</label>
                        <select name="gateway_id" class="form-select" id="payoutTransactionReportGatewaySelect">
                            <option value="">All Type</option>
                            @foreach ($gatewayOptions as $gateway)
                                <option value="{{ $gateway->id }}" @selected(($filters['gateway_id'] ?? null) == $gateway->id)>{{ $gateway->name ?: $gateway->wallet_company ?: $gateway->code }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-12 col-md-6 col-xl-2">
                        <label class="form-label small text-muted">Start Date</label>
                        <input type="date" name="start_date" class="form-control" id="payoutTransactionReportStartDate" value="{{ !empty($hasSearched) ? ($filters['start_date'] ?? '') : '' }}">
                    </div>
                    <div class="col-12 col-md-6 col-xl-2">
                        <label class="form-label small text-muted">End Date</label>
                        <input type="date" name="end_date" class="form-control" id="payoutTransactionReportEndDate" value="{{ !empty($hasSearched) ? ($filters['end_date'] ?? '') : '' }}">
                    </div>
                    <div class="col-6 col-xl-2">
                        <button type="submit" class="btn btn-dark w-100">Search</button>
                    </div>
                    <div class="col-6 col-xl-2">
                        <a href="{{ route('admin.reports.payout_transaction.index') }}" class="btn btn-outline-secondary w-100" id="payoutTransactionReportResetButton">Reset</a>
                    </div>
                </form>
            </div>
        </section>

        <section class="card admin-card border-0">
            <div class="card-header transaction-list-header py-3">
                <div class="d-flex align-items-center justify-content-between gap-3 flex-wrap">
                    <div class="fw-bold">Reports</div>
                    <a href="{{ route('admin.reports.payout_transaction.index', ['search' => $filters['search'] ?? '', 'user_id' => $filters['user_id'] ?? null, 'gateway_id' => $filters['gateway_id'] ?? null, 'start_date' => $filters['start_date'] ?? '', 'end_date' => $filters['end_date'] ?? '', 'export' => 'xls']) }}" class="btn btn-outline-light rounded-pill px-4" id="payoutTransactionReportExportButton">Export Xls</a>
                </div>
            </div>
            <div class="card-body p-0">
                <div id="payoutTransactionReportTableWrap" class="transaction-table-wrap">
                    @include('admin.reports.partials._payout_transaction_report_table', ['orders' => $orders])
                </div>
                <div id="payoutTransactionReportPaginationWrap" class="transaction-pagination-wrap">
                    @include('admin.reports.partials._payout_transaction_report_pagination', ['orders' => $orders])
                </div>
            </div>
        </section>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const form = document.getElementById('payoutTransactionReportFilterForm');
            const tableWrap = document.getElementById('payoutTransactionReportTableWrap');
            const paginationWrap = document.getElementById('payoutTransactionReportPaginationWrap');
            const resetButton = document.getElementById('payoutTransactionReportResetButton');
            const exportButton = document.getElementById('payoutTransactionReportExportButton');
            const errorAlert = document.getElementById('payoutTransactionReportErrorAlert');
            const searchInput = document.getElementById('payoutTransactionReportSearchInput');
            const userIdInput = document.getElementById('payoutTransactionReportUserIdInput');
            const userDropdown = document.getElementById('payoutTransactionReportUserDropdown');
            const userToggle = document.getElementById('payoutTransactionReportUserToggle');
            const userOptions = @json($userOptions ?? []);
            let activeOptionIndex = -1;

            const hideDropdown = function () {
                userDropdown?.classList.add('d-none');
                activeOptionIndex = -1;
            };

            const renderUserDropdown = function (term, forceOpen = false) {
                if (!userDropdown) {
                    return;
                }

                const normalizedTerm = (term || '').trim().toLowerCase();
                const matches = userOptions.filter(function (option) {
                    return !normalizedTerm || option.label.toLowerCase().includes(normalizedTerm);
                }).slice(0, 8);

                if (!matches.length || (!forceOpen && !normalizedTerm)) {
                    userDropdown.innerHTML = '';
                    hideDropdown();
                    return;
                }

                userDropdown.innerHTML = matches.map(function (option, index) {
                    const parts = option.label.split(' | ');
                    const title = parts.shift() || option.value;
                    const meta = parts.join(' | ');

                    return `
                        <button type="button" class="transaction-user-option${index === 0 ? ' is-active' : ''}" data-id="${option.id}" data-value="${option.value.replace(/"/g, '&quot;')}">
                            ${title}
                            ${meta ? `<small>${meta}</small>` : ''}
                        </button>
                    `;
                }).join('');

                userDropdown.classList.remove('d-none');
                activeOptionIndex = 0;
            };

            const applyActiveOption = function () {
                Array.from(userDropdown?.querySelectorAll('.transaction-user-option') || []).forEach(function (option, index) {
                    option.classList.toggle('is-active', index === activeOptionIndex);
                });
            };

            const syncSelectedUserIdFromInput = function () {
                const typed = (searchInput?.value || '').trim().toLowerCase();

                if (!typed) {
                    userIdInput.value = '';
                    return;
                }

                const exactMatch = userOptions.find(function (option) {
                    return option.value.trim().toLowerCase() === typed || option.label.trim().toLowerCase() === typed;
                });

                userIdInput.value = exactMatch ? String(exactMatch.id) : '';
            };

            const setLoading = function (state) {
                if (tableWrap) {
                    tableWrap.style.opacity = state ? '0.55' : '1';
                }
                if (paginationWrap) {
                    paginationWrap.style.opacity = state ? '0.55' : '1';
                }
            };

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

            const showError = function (message) {
                errorAlert.textContent = message;
                errorAlert.classList.remove('d-none');
            };

            const syncExportUrl = function () {
                if (!exportButton) {
                    return;
                }

                const params = new URLSearchParams(new FormData(form));
                params.set('export', 'xls');
                exportButton.href = form.action + '?' + params.toString();
            };

            const updateHistory = function (url) {
                if (window.history && window.history.replaceState) {
                    window.history.replaceState({}, document.title, url);
                }
            };

            const fetchReport = async function (url = null) {
                hideError();
                setLoading(true);

                try {
                    const requestUrl = url || (form.action + '?' + new URLSearchParams(new FormData(form)).toString());
                    const response = await fetch(requestUrl, {
                        headers: {
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest',
                        },
                    });

                    const data = await response.json();

                    if (!response.ok) {
                        throw new Error(data.message || 'Unable to fetch report.');
                    }

                    tableWrap.innerHTML = data.table_html || '';
                    paginationWrap.innerHTML = data.pagination_html || '';
                    window.adminInitMobileTables?.(document);
                    syncExportUrl();
                    updateHistory(requestUrl);
                } catch (error) {
                    showError(error.message || 'Unable to fetch report.');
                } finally {
                    setLoading(false);
                }
            };

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

            searchInput?.addEventListener('input', function () {
                userIdInput.value = '';
                renderUserDropdown(searchInput.value, true);
            });

            searchInput?.addEventListener('focus', function () {
                renderUserDropdown(searchInput.value, true);
            });

            searchInput?.addEventListener('keydown', function (event) {
                const options = Array.from(userDropdown?.querySelectorAll('.transaction-user-option') || []);

                if (!options.length || userDropdown?.classList.contains('d-none')) {
                    return;
                }

                if (event.key === 'ArrowDown') {
                    event.preventDefault();
                    activeOptionIndex = Math.min(activeOptionIndex + 1, options.length - 1);
                    applyActiveOption();
                    return;
                }

                if (event.key === 'ArrowUp') {
                    event.preventDefault();
                    activeOptionIndex = Math.max(activeOptionIndex - 1, 0);
                    applyActiveOption();
                    return;
                }

                if (event.key === 'Enter' && activeOptionIndex >= 0) {
                    event.preventDefault();
                    const activeOption = options[activeOptionIndex];
                    searchInput.value = activeOption.dataset.value || '';
                    userIdInput.value = activeOption.dataset.id || '';
                    hideDropdown();
                }
            });

            userDropdown?.addEventListener('mousedown', function (event) {
                const option = event.target.closest('.transaction-user-option');

                if (!option) {
                    return;
                }

                event.preventDefault();
                searchInput.value = option.dataset.value || '';
                userIdInput.value = option.dataset.id || '';
                hideDropdown();
            });

            userToggle?.addEventListener('click', function () {
                if (userDropdown?.classList.contains('d-none')) {
                    renderUserDropdown(searchInput.value, true);
                } else {
                    hideDropdown();
                }
            });

            document.addEventListener('click', function (event) {
                if (!event.target.closest('.transaction-user-combobox')) {
                    hideDropdown();
                }
            });

            resetButton?.addEventListener('click', function (event) {
                event.preventDefault();
                form.reset();
                searchInput.value = '';
                userIdInput.value = '';
                hideDropdown();
                syncExportUrl();
                fetchReport(form.action);
            });

            paginationWrap?.addEventListener('click', function (event) {
                const link = event.target.closest('a.page-link');

                if (!link || !link.href) {
                    return;
                }

                event.preventDefault();
                fetchReport(link.href);
            });

            const isInitialState = @json(empty($hasSearched));
            const hasQueryFilters = (() => {
                const params = new URLSearchParams(window.location.search);

                return ['search', 'user_id', 'gateway_id', 'start_date', 'end_date'].some(function (key) {
                    return (params.get(key) || '').trim() !== '';
                });
            })();

            if (isInitialState || !hasQueryFilters) {
                searchInput.value = '';
                userIdInput.value = '';
                const gatewaySelect = document.getElementById('payoutTransactionReportGatewaySelect');
                const startDateInput = document.getElementById('payoutTransactionReportStartDate');
                const endDateInput = document.getElementById('payoutTransactionReportEndDate');

                if (gatewaySelect) {
                    gatewaySelect.value = '';
                }

                if (startDateInput) {
                    startDateInput.value = '';
                }

                if (endDateInput) {
                    endDateInput.value = '';
                }

                tableWrap.innerHTML = @json($emptyPayoutTransactionTableHtml);
                paginationWrap.innerHTML = @json($emptyPayoutTransactionPaginationHtml);
                window.adminInitMobileTables?.(document);
                history.replaceState({}, document.title, form.action);
            }

            syncExportUrl();
        });
    </script>
@endpush