@extends('user.layouts.app', ['title' => '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%);
        }o

        .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;
        }
    </style>
@endpush

@section('content')
    @php
        $exportUrl = route('user.reports.transaction.index', 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">Transaction Report</h1>
                <div class="text-muted">Dashboard / Transaction Report</div>
            </div>
        </section>

        <section class="card admin-card border-0">
            <div class="card-header transaction-filter-header py-3">
                <div class="fw-bold">Export Filter</div>
            </div>
            <div class="card-body p-4">
                <form method="GET" action="{{ route('user.reports.transaction.index') }}" class="row g-3 align-items-end transaction-filter-form">
                    <div class="col-12 col-md-6 col-xl-2">
                        <select name="type" class="form-select">
                            <option value="">All Type</option>
                            @foreach ($walletTypes as $walletType)
                                <option value="{{ $walletType }}" @selected($filters['type'] === $walletType)>{{ ucfirst($walletType) }}</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('user.reports.transaction.index') }}" class="btn btn-outline-secondary w-100">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="{{ $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 p-4">
                    <table class="table align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th class="px-3 py-3 small text-muted text-uppercase">Client Order ID</th>
                                <th class="px-3 py-3 small text-muted text-uppercase">Transaction ID</th>
                                <th class="px-3 py-3 small text-muted text-uppercase">Requested Amount</th>
                                <th class="px-3 py-3 small text-muted text-uppercase">Status</th>
                                <th class="px-3 py-3 small text-muted text-uppercase">Wallet Type</th>
                                <th class="px-3 py-3 small text-muted text-uppercase">Gateway Response</th>
                                <th class="px-3 py-3 small text-muted text-uppercase">Created time</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($orders as $order)
                                @php
                                    $statusLabel = match ((int) $order->status) {
                                        1 => 'Paid',
                                        2 => 'Failed',
                                        default => 'Pending',
                                    };
                                    $statusClass = match ((int) $order->status) {
                                        1 => 'success',
                                        2 => 'danger',
                                        default => 'warning',
                                    };
                                @endphp
                                <tr>
                                    <td class="px-3 py-3">{{ $order->order_id ?: 'N/A' }}</td>
                                    <td class="px-3 py-3">{{ $order->wallet_order_id ?: ($order->utr ?: 'N/A') }}</td>
                                    <td class="px-3 py-3">{{ number_format((float) $order->amount, 2) }}</td>
                                    <td class="px-3 py-3"><span class="badge text-bg-{{ $statusClass }}">{{ $statusLabel }}</span></td>
                                    <td class="px-3 py-3">{{ $order->wallet_type ? ucfirst($order->wallet_type) : 'N/A' }}</td>
                                    <td class="px-3 py-3">{{ $order->api_response_msg ?: '' }}</td>
                                    <td class="px-3 py-3">{{ $order->wallet_order_date?->format('Y-m-d H:i:s') ?: '-' }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="text-center text-muted py-5">No transaction report data found for the selected filters.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </section>
    </div>
@endsection