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

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

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

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

        .payin-vs-filter-header::before,
        .payin-vs-report-header::before {
            content: "";
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at top right, rgba(255, 255, 255, 0.16), transparent 34%),
                linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 55%);
            pointer-events: none;
        }

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

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

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

        .payin-vs-report-table thead th {
            white-space: nowrap;
        }

        .payin-vs-report-table tbody tr:nth-child(odd) {
            background: rgba(148, 163, 184, 0.1);
        }

        .payin-vs-summary {
            border-top: 1px solid var(--admin-border);
            display: flex;
            flex-wrap: wrap;
            gap: 1rem 2rem;
        }

        .payin-vs-summary-item {
            font-size: 1.15rem;
            font-weight: 700;
            color: #64748b;
        }

        .payin-vs-summary-item strong {
            color: #475569;
        }

        .payin-vs-loading {
            opacity: 0.72;
            pointer-events: none;
            transition: opacity 0.2s ease;
        }

        @media (max-width: 767.98px) {
            .payin-vs-filter-form .col-6 {
                width: 50%;
            }

            .payin-vs-summary-item {
                font-size: 1rem;
            }
        }
    </style>
@endpush

@section('content')
    @php
        $exportUrl = route($reportRoute, array_filter([
            'start_date' => $filters['start_date'],
            'end_date' => $filters['end_date'],
            'export' => 'xls',
        ], fn ($value) => $value !== ''));
        $totalCollection = $rows->sum('total_collection');
        $totalSettlement = $rows->sum('total_settlement_debit');
        $totalPayouts = $rows->sum('total_payouts');
        $totalClosingBalance = (float) optional($rows->last())->closing_balance;
    @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">
            <div class="card-header payin-vs-filter-header py-3">
                <div class="fw-bold">Export Filter</div>
            </div>
            <div class="card-body p-4">
                <form method="GET" action="{{ route($reportRoute) }}" class="row g-3 align-items-end payin-vs-filter-form" id="payinVsPayoutFilterForm">
                    <div class="col-12 col-md-6 col-xl-3">
                        <label class="form-label small text-muted">Start Date</label>
                        <input type="date" name="start_date" class="form-control filter-input" value="{{ $filters['start_date'] }}">
                    </div>
                    <div class="col-12 col-md-6 col-xl-3">
                        <label class="form-label small text-muted">End Date</label>
                        <input type="date" name="end_date" class="form-control filter-input" value="{{ $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($reportRoute) }}" class="btn btn-outline-secondary w-100">Reset</a>
                    </div>
                </form>
            </div>
        </section>

        <section class="card admin-card border-0" id="payinVsPayoutReportCard">
            <div class="card-header payin-vs-report-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="{{ $exportUrl }}" class="btn btn-outline-light rounded-pill px-4">Export Xls</a>
                </div>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table align-middle mb-0 payin-vs-report-table">
                        <thead class="table-light">
                            <tr>
                                <th class="px-4 py-3 small text-muted text-uppercase">Sr no.</th>
                                <th class="px-4 py-3 small text-muted text-uppercase">Date</th>
                                <th class="px-4 py-3 small text-muted text-uppercase">Total Collection</th>
                                <th class="px-4 py-3 small text-muted text-uppercase">Collection Fee</th>
                                <th class="px-4 py-3 small text-muted text-uppercase">Total Payouts</th>
                                <th class="px-4 py-3 small text-muted text-uppercase">Payouts Fee</th>
                                <th class="px-4 py-3 small text-muted text-uppercase">Net Balance</th>
                                <th class="px-4 py-3 small text-muted text-uppercase">Last Day Negative Balance</th>
                                <th class="px-4 py-3 small text-muted text-uppercase">Total Credit</th>
                                <th class="px-4 py-3 small text-muted text-uppercase">Total Settlement (Debit)</th>
                                <th class="px-4 py-3 small text-muted text-uppercase">Closing Balance</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($rows as $index => $row)
                                <tr>
                                    <td class="px-4 py-3">{{ $index + 1 }}</td>
                                    <td class="px-4 py-3">{{ $row->report_date }}</td>
                                    <td class="px-4 py-3">{{ number_format((float) $row->total_collection, 2) }} PKR</td>
                                    <td class="px-4 py-3">{{ number_format((float) $row->collection_fee, 2) }} PKR</td>
                                    <td class="px-4 py-3">{{ number_format((float) $row->total_payouts, 2) }} PKR</td>
                                    <td class="px-4 py-3">{{ number_format((float) $row->payouts_fee, 2) }} PKR</td>
                                    <td class="px-4 py-3">{{ number_format((float) $row->net_balance, 2) }} PKR</td>
                                    <td class="px-4 py-3">{{ number_format((float) $row->last_day_negative_balance, 2) }} PKR</td>
                                    <td class="px-4 py-3">{{ number_format((float) $row->total_credit, 2) }} PKR</td>
                                    <td class="px-4 py-3">{{ number_format((float) $row->total_settlement_debit, 2) }} PKR</td>
                                    <td class="px-4 py-3">{{ number_format((float) $row->closing_balance, 2) }} PKR</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="11" class="text-center text-muted py-5">No report data found for the selected filters.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <div class="p-4 payin-vs-summary">
                    <div class="payin-vs-summary-item">Total Collection : <strong>{{ number_format((float) $totalCollection, 2) }} PKR</strong></div>
                    <div class="payin-vs-summary-item">Total Settlement : <strong>{{ number_format((float) $totalSettlement, 2) }} PKR</strong></div>
                    <div class="payin-vs-summary-item">Total Payouts : <strong>{{ number_format((float) $totalPayouts, 2) }} PKR</strong></div>
                    <div class="payin-vs-summary-item">Total Closing Balance : <strong>{{ number_format($totalClosingBalance, 2) }} PKR</strong></div>
                </div>
            </div>
        </section>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const form = document.getElementById('payinVsPayoutFilterForm');
            const reportCard = document.getElementById('payinVsPayoutReportCard');

            if (!form || !reportCard) {
                return;
            }

            let submitTimer = null;

            const triggerSubmit = function () {
                window.clearTimeout(submitTimer);
                reportCard.classList.add('payin-vs-loading');

                submitTimer = window.setTimeout(function () {
                    form.requestSubmit();
                }, 350);
            };

            form.querySelectorAll('.filter-input').forEach(function (input) {
                input.addEventListener('change', triggerSubmit);
                input.addEventListener('input', triggerSubmit);
            });
        });
    </script>
@endpush