@include('admin.partials.header')
@include('admin.partials.sidebar')
@include('admin.partials.topbar')
@include('admin.partials.management-styles')

@php
    $statistics = $statistics ?? [
        'gross_revenue' => 0,
        'transactions' => 0,
        'completed' => 0,
        'pending' => 0,
        'failed' => 0,
    ];
    $statusClass = ['completed' => 'success', 'pending' => 'warning', 'failed' => 'danger'];
    $sort = $sort ?? 'newest';
    $sortLabel = $sort === 'oldest' ? 'Oldest first' : 'Newest first';
@endphp

<style>
    .payment-icon {
        align-items: center;
        background: var(--color-surface-container-low);
        border-radius: 10px;
        color: var(--color-primary);
        display: flex;
        flex-shrink: 0;
        height: 42px;
        justify-content: center;
        width: 42px;
    }

    .payment-amount {
        font-family: 'JetBrains Mono', monospace;
        font-size: 13px;
        font-weight: 700;
        white-space: nowrap;
    }

    .payment-sort-form {
        position: relative;
    }

    .payment-sort-form .material-symbols-outlined {
        left: 16px;
        pointer-events: none;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    .payment-sort-select {
        appearance: none;
        background: #fff;
        border: 1px solid var(--color-outline-variant);
        border-radius: 12px;
        color: var(--color-on-surface);
        font-family: 'JetBrains Mono', monospace;
        font-size: 14px;
        padding: 10px 42px 10px 44px;
    }

    .payment-filter-card {
        background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
    }

    .payment-filter-form {
        align-items: end;
        display: grid;
        gap: 12px;
        grid-template-columns: minmax(260px, 1.5fr) repeat(2, minmax(150px, 1fr)) auto;
    }

    .payment-filter-field label {
        color: var(--color-on-surface-variant);
        display: block;
        font-family: 'JetBrains Mono', monospace;
        font-size: 11px;
        font-weight: 700;
        margin-bottom: 6px;
        text-transform: uppercase;
    }

    .payment-filter-form .form-control {
        border: 1px solid var(--color-outline-variant);
        border-radius: 12px;
        min-height: 44px;
    }

    .payment-filter-actions {
        display: flex;
        gap: 8px;
    }

    @media (max-width: 991.98px) {
        .payment-filter-form {
            grid-template-columns: 1fr 1fr;
        }

        .payment-filter-actions {
            grid-column: 1 / -1;
        }
    }

    @media (max-width: 575.98px) {
        .payment-filter-form {
            grid-template-columns: 1fr;
        }
    }
</style>

<main id="main" class="pt-4">
    <section class="d-flex flex-column flex-md-row align-items-md-end justify-content-between gap-3 mb-4">
        <div>
            <div class="admin-breadcrumb"><span>Admin</span><span class="material-symbols-outlined"
                    style="font-size:16px;">chevron_right</span><span class="active">Payments</span></div>
            <h2 class="admin-page-title">Payments & Transactions</h2>
            <p class="admin-page-subtitle">Review all provider subscription transactions, newest first.</p>
        </div>
        <form class="payment-sort-form js-ajax-filter" method="GET" action="{{ route('admin.payments.index') }}">
            @if ($status)
                <input name="status" type="hidden" value="{{ $status }}">
            @endif
            @if (!empty($filters['search']))
                <input name="search" type="hidden" value="{{ $filters['search'] }}">
            @endif
            @if (!empty($filters['date_from']))
                <input name="date_from" type="hidden" value="{{ $filters['date_from'] }}">
            @endif
            @if (!empty($filters['date_to']))
                <input name="date_to" type="hidden" value="{{ $filters['date_to'] }}">
            @endif
            <span class="material-symbols-outlined" style="font-size:18px;">sort</span>
            <select class="payment-sort-select" name="sort">
                <option value="newest" @selected($sort === 'newest')>Newest First</option>
                <option value="oldest" @selected($sort === 'oldest')>Oldest First</option>
            </select>
        </form>
    </section>

    <section class="admin-card payment-filter-card mb-4">
        <div class="admin-card-body">
            <div class="d-flex flex-column flex-lg-row justify-content-between gap-2 mb-3">
                <div>
                    <h3 class="admin-card-title mb-1">Filter transactions</h3>
                    <p class="admin-meta mb-0">Search payment identifiers or provider details, then narrow by
                        transaction date.</p>
                </div>
            </div>
            <form class="payment-filter-form js-ajax-filter" method="GET"
                action="{{ route('admin.payments.index') }}">
                @if ($status)
                    <input name="status" type="hidden" value="{{ $status }}">
                @endif
                <input name="sort" type="hidden" value="{{ $sort }}">
                <div class="payment-filter-field">
                    <label for="payment-search">Search</label>
                    <input id="payment-search" class="form-control" name="search" type="search"
                        value="{{ $filters['search'] ?? '' }}" placeholder="Payment ID, order ID, provider">
                </div>
                <div class="payment-filter-field">
                    <label for="payment-date-from">From</label>
                    <input id="payment-date-from" class="form-control" name="date_from" type="date"
                        value="{{ $filters['date_from'] ?? '' }}">
                </div>
                <div class="payment-filter-field">
                    <label for="payment-date-to">To</label>
                    <input id="payment-date-to" class="form-control" name="date_to" type="date"
                        value="{{ $filters['date_to'] ?? '' }}">
                </div>
                <div class="payment-filter-actions">
                    <a class="btn btn-outline-secondary js-ajax-link"
                        href="{{ route('admin.payments.index', array_filter(['status' => $status, 'sort' => $sort])) }}">Reset</a>
                </div>
            </form>
        </div>
    </section>

    <section class="row g-3 mb-4">
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="admin-stat">
                <div class="d-flex justify-content-between">
                    <div class="admin-stat-icon"><span class="material-symbols-outlined">payments</span></div><span
                        class="admin-status success">Completed</span>
                </div>
                <p class="admin-stat-value">Rs {{ number_format((float) $statistics['gross_revenue'], 2) }}</p>
                <p class="admin-stat-label">Gross revenue</p>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="admin-stat">
                <div class="d-flex justify-content-between">
                    <div class="admin-stat-icon"><span class="material-symbols-outlined">receipt_long</span></div><span
                        class="admin-status neutral">All time</span>
                </div>
                <p class="admin-stat-value">{{ number_format((int) $statistics['transactions']) }}</p>
                <p class="admin-stat-label">Transactions processed</p>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="admin-stat">
                <div class="d-flex justify-content-between">
                    <div class="admin-stat-icon"><span class="material-symbols-outlined">schedule</span></div><span
                        class="admin-status warning">Open</span>
                </div>
                <p class="admin-stat-value">{{ number_format((int) $statistics['pending']) }}</p>
                <p class="admin-stat-label">Pending payments</p>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="admin-stat">
                <div class="d-flex justify-content-between">
                    <div class="admin-stat-icon"><span class="material-symbols-outlined">warning</span></div><span
                        class="admin-status danger">Needs review</span>
                </div>
                <p class="admin-stat-value">{{ number_format((int) $statistics['failed']) }}</p>
                <p class="admin-stat-label">Failed payments</p>
            </div>
        </div>
    </section>

    <div class="admin-tabs">
        @php $paymentFilterQuery = array_filter(['sort' => $sort, 'search' => $filters['search'] ?? null, 'date_from' => $filters['date_from'] ?? null, 'date_to' => $filters['date_to'] ?? null]); @endphp
        <a class="admin-tab js-ajax-link text-decoration-none {{ $status === null ? 'active' : '' }}"
            href="{{ route('admin.payments.index', $paymentFilterQuery) }}">All Transactions <span
                class="admin-tab-count">{{ number_format((int) $statistics['transactions']) }}</span></a>
        <a class="admin-tab js-ajax-link text-decoration-none {{ $status === 'completed' ? 'active' : '' }}"
            href="{{ route('admin.payments.index', array_merge($paymentFilterQuery, ['status' => 'completed'])) }}">Completed
            <span class="admin-tab-count">{{ number_format((int) $statistics['completed']) }}</span></a>
        <a class="admin-tab js-ajax-link text-decoration-none {{ $status === 'pending' ? 'active' : '' }}"
            href="{{ route('admin.payments.index', array_merge($paymentFilterQuery, ['status' => 'pending'])) }}">Pending
            <span class="admin-tab-count">{{ number_format((int) $statistics['pending']) }}</span></a>
        <a class="admin-tab js-ajax-link text-decoration-none {{ $status === 'failed' ? 'active' : '' }}"
            href="{{ route('admin.payments.index', array_merge($paymentFilterQuery, ['status' => 'failed'])) }}">Failed
            <span class="admin-tab-count">{{ number_format((int) $statistics['failed']) }}</span></a>
    </div>

    <section class="admin-card">
        <div class="admin-card-body d-flex flex-column flex-lg-row justify-content-between gap-3">
            <div>
                <h3 class="admin-card-title">Transaction Ledger</h3>
                <p class="admin-meta mt-1">All payment records ordered by {{ strtolower($sortLabel) }}</p>
            </div>
            <div class="admin-toolbar"><span class="admin-chip">{{ $sortLabel }}</span><span
                    class="admin-meta">{{ $payments->total() }} records</span></div>
        </div>
        <div class="table-responsive">
            <table class="table admin-table mb-0">
                <thead>
                    <tr>
                        <th>Transaction</th>
                        <th>Provider</th>
                        <th>Plan</th>
                        <th>Method</th>
                        <th>Status</th>
                        <th>Date</th>
                        <th>Amount</th>
                        <th class="text-end">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($payments as $payment)
                        @php
                            $providerName =
                                $payment->provider_business_name ?:
                                ($payment->provider_name ?:
                                ($payment->provider_mobile ?:
                                'Unknown provider'));
                            $planLabel = trim(
                                ($payment->category_name ? $payment->category_name . ' ' : '') .
                                    ($payment->duration_months ? $payment->duration_months . ' month' : 'Subscription'),
                            );
                            $date = $payment->paid_at ?: $payment->created_at;
                        @endphp
                        <tr>
                            <td>
                                <div class="d-flex align-items-center gap-3">
                                    <div class="payment-icon"><span
                                            class="material-symbols-outlined">workspace_premium</span></div>
                                    <div>
                                        <p class="admin-name">
                                            PAY-{{ str_pad((string) $payment->id, 6, '0', STR_PAD_LEFT) }}</p>
                                        <p class="admin-meta">
                                            {{ $payment->razorpay_payment_id ?: ($payment->razorpay_order_id ?: 'Order pending') }}
                                        </p>
                                    </div>
                                </div>
                            </td>
                            <td>{{ $providerName }}</td>
                            <td><span class="admin-chip">{{ $planLabel }}</span></td>
                            <td>{{ $payment->payment_method ?: 'Razorpay' }}</td>
                            <td><span
                                    class="admin-status {{ $statusClass[$payment->status] ?? 'neutral' }}">{{ ucfirst($payment->status) }}</span>
                            </td>
                            <td class="admin-meta">
                                {{ \Illuminate\Support\Carbon::parse($date)->format('d M Y, h:i A') }}</td>
                            <td class="payment-amount">{{ $payment->currency }}
                                {{ number_format((float) $payment->final_amount, 2) }}</td>
                            <td class="text-end"><button class="admin-action" type="button"><span
                                        class="material-symbols-outlined">more_vert</span></button></td>
                        </tr>
                    @empty
                        <tr>
                            <td class="text-center admin-meta py-5" colspan="8">No transactions found.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="admin-pagination">{{ $payments->links('pagination::bootstrap-5') }}</div>
    </section>
</main>

<script>
    (() => {
        const initAdminAjaxFilters = () => {
            const main = document.getElementById('main');
            const forms = [...document.querySelectorAll('.js-ajax-filter')];
            let debounceTimer = null;

            const formUrl = (form) => {
                const url = new URL(form.action, window.location.origin);
                const data = new FormData(form);

                data.forEach((value, key) => {
                    if (String(value).trim() !== '') {
                        url.searchParams.append(key, value);
                    }
                });

                return url;
            };

            const loadUrl = async (url, push = true) => {
                const response = await fetch(url, {
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                });
                const html = await response.text();
                const nextMain = new DOMParser().parseFromString(html, 'text/html').querySelector(
                    '#main');

                if (!nextMain || !main) {
                    window.location.href = url;
                    return;
                }

                main.innerHTML = nextMain.innerHTML;

                if (push) {
                    window.history.pushState({}, '', url);
                }

                initAdminAjaxFilters();
            };

            forms.forEach((form) => {
                form.addEventListener('submit', (event) => event.preventDefault());

                form.querySelectorAll('input[type="search"]').forEach((input) => {
                    input.addEventListener('input', () => {
                        clearTimeout(debounceTimer);
                        debounceTimer = setTimeout(() => loadUrl(formUrl(form)), 350);
                    });
                });

                form.querySelectorAll('select,input[type="date"]').forEach((input) => {
                    input.addEventListener('change', () => loadUrl(formUrl(form)));
                });
            });

            document.querySelectorAll('.js-ajax-link, .admin-pagination a').forEach((link) => {
                link.addEventListener('click', (event) => {
                    event.preventDefault();
                    loadUrl(link.href);
                });
            });
        };

        window.addEventListener('popstate', () => window.location.reload());
        initAdminAjaxFilters();
    })();
</script>

@include('admin.partials.footer')