@extends('user.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-header .small {
            color: rgba(240, 245, 250, 0.78) !important;
        }

        .report-list-header .small {
            color: rgba(236, 253, 245, 0.82) !important;
        }

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

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

        .report-table-footer {
            border-top: 1px solid var(--admin-border);
        }

        @media (max-width: 767.98px) {
            .report-filter-form .col-6 {
                width: 50%;
            }
        }
    </style>
@endpush

@section('content')
    @php
        $totalOrders = $rows->sum('total_orders');
        $totalAmount = $rows->sum('gross_amount');
        $exportUrl = route($reportRoute, array_filter([
            'type' => $filters['type'],
            'start_date' => $filters['start_date'],
            'end_date' => $filters['end_date'],
            'export' => 'xls',
        ], fn ($value) => $value !== ''));
    @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 report-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 report-filter-form">
                    <div class="col-12 col-md-6 col-xl-2">
                        <label class="form-label small text-muted">{{ $typeLabel }}</label>
                        <select name="type" class="form-select">
                            <option value="">All Type</option>
                            @foreach ($types as $type)
                                <option value="{{ $type }}" @selected($filters['type'] === $type)>{{ ucfirst($type) }}</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" 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" 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">
            <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="{{ $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">
                        <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 Orders</th>
                                <th class="px-4 py-3 small text-muted text-uppercase">Gross Amount</th>
                                <th class="px-4 py-3 small text-muted text-uppercase">Fee Charges</th>
                                <th class="px-4 py-3 small text-muted text-uppercase">Vat Charges</th>
                                <th class="px-4 py-3 small text-muted text-uppercase">Net Amount</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">{{ $row->total_orders }}</td>
                                    <td class="px-4 py-3">{{ number_format((float) $row->gross_amount, 2) }} PKR</td>
                                    <td class="px-4 py-3">{{ number_format((float) $row->fee_charges, 2) }}</td>
                                    <td class="px-4 py-3">{{ number_format((float) $row->vat_charges, 2) }}</td>
                                    <td class="px-4 py-3">{{ number_format((float) $row->net_amount, 2) }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" 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 report-table-footer fw-semibold">
                    Total Orders : {{ $totalOrders }}
                    <span class="ms-4">Total Amount: {{ number_format((float) $totalAmount, 2) }} PKR</span>
                </div>
            </div>
        </section>
    </div>
@endsection