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

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

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

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

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

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

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

        .report-filter-card .form-check-input {
            width: 1.2rem;
            height: 1.2rem;
        }

        .report-filter-inline-check {
            min-height: 3rem;
            display: flex;
            align-items: center;
            gap: 0.55rem;
            padding-top: 1.55rem;
        }

        .report-filter-inline-check .form-check-input {
            margin-top: 0;
            flex: 0 0 auto;
        }

        .report-filter-inline-check .form-check-label {
            margin-bottom: 0;
        }

        .report-filter-card .btn {
            font-weight: 700;
        }

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

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

        .report-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;
        }

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

        .report-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;
        }

        .report-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;
        }

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

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

        @media (max-width: 767.98px) {
            .report-filter-card .card-body {
                padding: 1rem;
            }

            .report-filter-card .form-label {
                margin-bottom: 0.35rem;
                font-size: 0.82rem;
            }

            .report-filter-card .form-control,
            .report-filter-card .btn {
                min-height: 2.75rem;
                font-size: 0.92rem;
                padding-inline: 0.9rem;
            }

            .report-filter-inline-check {
                min-height: 2.75rem;
                padding-top: 0;
                padding-inline: 0.15rem;
            }

            .report-filter-inline-check .form-check-label {
                font-size: 0.95rem;
            }

            .report-list-header {
                padding-block: 0.9rem !important;
            }

            .report-filter-card .col-6,
            .report-filter-card .col-xl-1,
            .report-filter-card .col-xl-2,
            .report-filter-card .col-xl-3 {
                width: 100%;
            }
        }
    </style>
@endpush

@section('content')
    @php
        $emptyPayinVsPayoutTableHtml = view('admin.reports.partials._daywise_payin_vs_payout_table', [
            'rows' => collect(),
            'hasSearched' => false,
            'allUsers' => false,
        ])->render();
        $emptyPayinVsPayoutSummaryHtml = view('admin.reports.partials._daywise_payin_vs_payout_summary', [
            'rows' => collect(),
        ])->render();
    @endphp
    <div class="d-grid gap-4">
        <section>
            <div>
                <h1 class="h2 fw-bold mb-2">{{ $title }}</h1>
                <div class="text-muted">{{ $subtitle }}</div>
            </div>
        </section>

        <section class="card admin-card border-0 report-filter-card">
            <div class="card-header report-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="payinVsPayoutErrorAlert"></div>
                <form method="GET" action="{{ route($reportRoute) }}" class="row g-3 align-items-end" id="payinVsPayoutFilterForm">
                    <div class="col-12 col-md-6 col-xl-3">
                        <label class="form-label small text-muted">Search Merchants</label>
                        <div class="report-user-combobox">
                            <input type="hidden" name="user_id" id="payinVsPayoutUserIdInput" value="{{ $filters['user_id'] ?? '' }}">
                            <input type="search" name="search" class="form-control report-user-input" id="payinVsPayoutSearchInput" value="{{ $filters['search'] }}" placeholder="Search merchants..." autocomplete="off">
                            <button type="button" class="report-user-toggle" id="payinVsPayoutUserToggle" aria-label="Toggle merchants dropdown">
                                <i class="bi bi-chevron-down"></i>
                            </button>
                            <div class="report-user-dropdown d-none" id="payinVsPayoutUserDropdown"></div>
                        </div>
                    </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="payinVsPayoutStartDate" value="{{ $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="payinVsPayoutEndDate" value="{{ $filters['end_date'] }}">
                    </div>
                    <div class="col-12 col-md-6 col-xl-2">
                        <div class="report-filter-inline-check">
                            <input class="form-check-input" type="checkbox" name="all_users" id="payinVsPayoutAllUsers" value="1" {{ $filters['all_users'] ? 'checked' : '' }}>
                            <label class="form-check-label" for="payinVsPayoutAllUsers">All Merchants</label>
                        </div>
                    </div>
                    <div class="col-6 col-xl-1">
                        <button type="submit" class="btn btn-dark w-100" id="payinVsPayoutSearchButton">Search</button>
                    </div>
                    <div class="col-6 col-xl-2">
                        <a href="{{ route($reportRoute) }}" class="btn btn-outline-secondary w-100" id="payinVsPayoutResetButton">Reset</a>
                    </div>
                </form>
            </div>
        </section>

        <section class="card admin-card border-0">
            <div class="card-header report-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($reportRoute, ['start_date' => $filters['start_date'], 'end_date' => $filters['end_date'], 'search' => $filters['search'], 'user_id' => $filters['user_id'] ?? null, 'all_users' => $filters['all_users'] ? 1 : null, 'export' => 'xls']) }}" class="btn btn-outline-light rounded-pill px-4" id="payinVsPayoutExportButton">Export Xls</a>
                </div>
            </div>
            <div class="card-body p-0">
                <div id="payinVsPayoutTableWrap">
                    @include('admin.reports.partials._daywise_payin_vs_payout_table', ['rows' => $rows, 'hasSearched' => $hasSearched, 'allUsers' => $allUsers ?? false])
                </div>
                <div id="payinVsPayoutSummaryWrap">
                    @include('admin.reports.partials._daywise_payin_vs_payout_summary', ['rows' => $rows])
                </div>
            </div>
        </section>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const form = document.getElementById('payinVsPayoutFilterForm');
            const errorAlert = document.getElementById('payinVsPayoutErrorAlert');
            const searchInput = document.getElementById('payinVsPayoutSearchInput');
            const startDateInput = document.getElementById('payinVsPayoutStartDate');
            const endDateInput = document.getElementById('payinVsPayoutEndDate');
            const allUsersInput = document.getElementById('payinVsPayoutAllUsers');
            const userIdInput = document.getElementById('payinVsPayoutUserIdInput');
            const resetButton = document.getElementById('payinVsPayoutResetButton');
            const exportButton = document.getElementById('payinVsPayoutExportButton');
            const userDropdown = document.getElementById('payinVsPayoutUserDropdown');
            const userToggle = document.getElementById('payinVsPayoutUserToggle');
            const tableWrap = document.getElementById('payinVsPayoutTableWrap');
            const summaryWrap = document.getElementById('payinVsPayoutSummaryWrap');
            const userOptions = @json($userOptions ?? []);
            let activeOptionIndex = -1;

            const syncSelectedUserIdFromInput = function () {
                if (!userIdInput || !searchInput) {
                    return;
                }

                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 hideDropdown = function () {
                userDropdown?.classList.add('d-none');
                activeOptionIndex = -1;
            };

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

                const normalizedTerm = (term || '').trim().toLowerCase();

                if (allUsersInput?.checked) {
                    hideDropdown();
                    return;
                }

                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="report-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 () {
                if (!userDropdown) {
                    return;
                }

                Array.from(userDropdown.querySelectorAll('.report-user-option')).forEach(function (option, index) {
                    option.classList.toggle('is-active', index === activeOptionIndex);
                });
            };

            const setLoading = function (state) {
                if (tableWrap) {
                    tableWrap.style.opacity = state ? '0.55' : '1';
                }
                if (summaryWrap) {
                    summaryWrap.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 fetchReport = async function () {
                hideError();
                setLoading(true);

                try {
                    const params = new URLSearchParams(new FormData(form));
                    const response = await fetch(form.action + '?' + params.toString(), {
                        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 || '';
                    summaryWrap.innerHTML = data.summary_html || '';
                    window.adminInitMobileTables?.(document);
                    syncExportUrl();
                } 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 () {
                if (userIdInput) {
                    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('.report-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 || '';
                    if (userIdInput) {
                        userIdInput.value = activeOption.dataset.id || '';
                    }
                    hideDropdown();
                }
            });

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

                if (!option) {
                    return;
                }

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

            userToggle?.addEventListener('click', function () {
                if (allUsersInput?.checked) {
                    return;
                }

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

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

            allUsersInput?.addEventListener('change', function () {
                if (allUsersInput.checked) {
                    searchInput.value = '';
                    if (userIdInput) {
                        userIdInput.value = '';
                    }
                    searchInput.setAttribute('disabled', 'disabled');
                    hideDropdown();
                } else {
                    searchInput.removeAttribute('disabled');
                }
            });

            resetButton?.addEventListener('click', function (event) {
                event.preventDefault();
                form.reset();
                searchInput.removeAttribute('disabled');
                searchInput.value = '';
                if (userIdInput) {
                    userIdInput.value = '';
                }
                hideDropdown();
                syncExportUrl();
                tableWrap.innerHTML = @json($emptyPayinVsPayoutTableHtml);
                summaryWrap.innerHTML = @json($emptyPayinVsPayoutSummaryHtml);
                window.adminInitMobileTables?.(document);
            });

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

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

            if (isInitialState || !hasQueryFilters) {
                searchInput.value = '';
                if (userIdInput) {
                    userIdInput.value = '';
                }

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

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

                if (allUsersInput) {
                    allUsersInput.checked = false;
                }

                tableWrap.innerHTML = @json($emptyPayinVsPayoutTableHtml);
                summaryWrap.innerHTML = @json($emptyPayinVsPayoutSummaryHtml);
                window.adminInitMobileTables?.(document);
                history.replaceState({}, document.title, form.action);
            }

            if (allUsersInput?.checked) {
                searchInput.setAttribute('disabled', 'disabled');
            }

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