@extends('user.layouts.app', ['title' => 'Sandbox Payout Orders'])

@push('head')
    <style>
        .order-panel-header { position: relative; overflow: hidden; border: 0; }
        .order-panel-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;
        }
        .order-panel-header > * { position: relative; z-index: 1; }
        .order-panel-header-search { background: linear-gradient(135deg, #243b53 0%, #334e68 52%, #486581 100%); color: #f8fbff; }
        .order-panel-header-list { background: linear-gradient(135deg, #0f766e 0%, #0f9a8a 50%, #38b2ac 100%); color: #f8fffe; }
        .order-search-form .form-control,
        .order-search-form .form-select,
        .order-search-form .btn { min-height: 3rem; }
    </style>
@endpush

@section('content')
    @php
        $pageAmount = $orders->sum('amount');
        $completedCount = $orders->where('status', 1)->count();
        $pendingCount = $orders->where('status', 0)->count();
        $failedCount = $orders->where('status', 2)->count();
    @endphp
    <div class="d-grid gap-3">
        <section class="card admin-card border-0">
            <div class="card-body p-4">
                <div class="d-inline-flex align-items-center gap-2 px-3 py-2 rounded-pill bg-primary-subtle text-primary small fw-bold text-uppercase">
                    <i class="bi bi-shield-lock"></i>
                    <span>Sandbox / Payout Orders</span>
                </div>
                <div class="mt-3">
                    <h1 class="h3 fw-bold mb-2">Sandbox Payout Orders</h1>
                </div>
                <div class="row g-3 mt-1">
                    <div class="col-12 col-md-4"><div class="rounded-4 p-3 bg-body-tertiary h-100"><div class="small text-muted mb-1">Visible Amount</div><div class="fs-4 fw-bold">Rs {{ number_format((float) $pageAmount, 2) }}</div></div></div>
                    <div class="col-12 col-md-4"><div class="rounded-4 p-3 bg-body-tertiary h-100"><div class="small text-muted mb-1">Pending</div><div class="fs-4 fw-bold">{{ $pendingCount }}</div></div></div>
                    <div class="col-12 col-md-4"><div class="rounded-4 p-3 bg-body-tertiary h-100"><div class="small text-muted mb-1">Failed</div><div class="fs-4 fw-bold">{{ $failedCount }}</div></div></div>
                </div>
            </div>
        </section>
        <section class="card admin-card border-0">
            <div class="card-header order-panel-header order-panel-header-search py-3">
                <div class="fw-bold">Search Orders</div>
                <div class="small">Filter by order id, dates, or status</div>
            </div>
            <div class="card-body p-4">
                <form method="GET" action="{{ route('user.payments.sandbox_payout_orders.index') }}" class="row g-3 order-search-form">
                    <div class="col-12 col-md-6 col-xl-4"><input type="text" name="order_id" class="form-control" value="{{ $filters['order_id'] }}" placeholder="Order ID / Wallet Order ID / UTR"></div>
                    <div class="col-12 col-md-6 col-xl-2"><input type="date" name="start_date" class="form-control" value="{{ $filters['start_date'] }}"></div>
                    <div class="col-12 col-md-6 col-xl-2"><input type="date" name="end_date" class="form-control" value="{{ $filters['end_date'] }}"></div>
                    <div class="col-12 col-md-6 col-xl-2">
                        <select name="status" class="form-select">
                            <option value="">All Status</option>
                            <option value="0" @selected($filters['status'] === '0')>Pending</option>
                            <option value="1" @selected($filters['status'] === '1')>Completed</option>
                            <option value="2" @selected($filters['status'] === '2')>Failed</option>
                        </select>
                    </div>
                    <div class="col-6 col-xl-1"><button type="submit" class="btn btn-dark w-100">Search</button></div>
                    <div class="col-6 col-xl-1"><a href="{{ route('user.payments.sandbox_payout_orders.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 order-panel-header order-panel-header-list py-3">
                <div class="fw-bold">Sandbox Payout List</div>
                <div class="small">{{ $orders->total() }} sandbox payout orders found</div>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive p-3">
                    <table class="table align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th class="px-4 py-3 small text-muted text-uppercase">Order ID</th>
                                <th class="px-4 py-3 small text-muted text-uppercase">Wallet Order ID</th>
                                <th class="px-4 py-3 small text-muted text-uppercase">Amount</th>
                                <th class="px-4 py-3 small text-muted text-uppercase">Wallet Type</th>
                                <th class="px-4 py-3 small text-muted text-uppercase">Status</th>
                                <th class="px-4 py-3 small text-muted text-uppercase">Created Time</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($orders as $order)
                                @php
                                    $statusLabel = match ((int) $order->status) { 1 => 'Completed', 2 => 'Failed', default => 'Pending' };
                                    $statusClass = match ((int) $order->status) { 1 => 'success', 2 => 'danger', default => 'warning' };
                                @endphp
                                <tr>
                                    <td class="px-4 py-3"><div class="fw-bold">{{ $order->order_id ?: 'N/A' }}</div><div class="small text-muted">{{ $order->utr ?: 'No UTR' }}</div></td>
                                    <td class="px-4 py-3">{{ $order->wallet_order_id ?: 'N/A' }}</td>
                                    <td class="px-4 py-3 fw-bold">Rs {{ number_format((float) $order->amount, 2) }}</td>
                                    <td class="px-4 py-3">{{ $order->wallet_type ? ucfirst($order->wallet_type) : 'N/A' }}</td>
                                    <td class="px-4 py-3"><span class="badge text-bg-{{ $statusClass }}">{{ $statusLabel }}</span></td>
                                    <td class="px-4 py-3">{{ $order->created_at?->format('d M Y, h:i A') ?: '-' }}</td>
                                </tr>
                            @empty
                                <tr><td colspan="6" class="text-center text-muted py-5">No sandbox payout orders found for the current filters.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                <div class="p-3 pt-0">{{ $orders->links() }}</div>
            </div>
        </section>
    </div>
@endsection