@extends('user.layouts.app', ['title' => 'Payin 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-search .small {
            color: rgba(240, 245, 250, 0.78) !important;
        }

        .order-panel-header-list {
            background: linear-gradient(135deg, #0f766e 0%, #0f9a8a 50%, #38b2ac 100%);
            color: #f8fffe;
        }

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

        .order-stat-card {
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(148, 163, 184, 0.14);
            background:
                radial-gradient(circle at top right, rgba(255, 255, 255, 0.9), transparent 36%),
                linear-gradient(135deg, rgba(248, 250, 252, 0.98), rgba(241, 245, 249, 0.92));
            box-shadow: 0 16px 34px rgba(15, 23, 42, 0.05);
        }

        .order-stat-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.24), transparent 58%);
            pointer-events: none;
        }

        .order-stat-card > * {
            position: relative;
            z-index: 1;
        }

        .order-stat-card-soft-green {
            background:
                radial-gradient(circle at top right, rgba(16, 185, 129, 0.18), transparent 32%),
                linear-gradient(135deg, #f3fffb 0%, #e5f9f1 100%);
        }

        .order-page-badge {
            border: 1px solid rgba(16, 185, 129, 0.18);
            background:
                radial-gradient(circle at top right, rgba(16, 185, 129, 0.16), transparent 34%),
                linear-gradient(135deg, #f2fffb 0%, #ddf7ec 100%);
            color: #0f766e;
            box-shadow: 0 12px 24px rgba(16, 185, 129, 0.08);
        }

        html[data-theme="dark"] .order-page-badge {
            border-color: rgba(45, 212, 191, 0.24);
            background:
                radial-gradient(circle at top right, rgba(45, 212, 191, 0.16), transparent 34%),
                linear-gradient(135deg, rgba(15, 118, 110, 0.34) 0%, rgba(17, 94, 89, 0.28) 100%);
            color: #ccfbf1;
            box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22);
        }

        html[data-theme="dark"] .order-stat-card {
            border-color: rgba(148, 163, 184, 0.16);
            background:
                radial-gradient(circle at top right, rgba(45, 212, 191, 0.14), transparent 30%),
                linear-gradient(135deg, rgba(15, 23, 42, 0.96) 0%, rgba(17, 24, 39, 0.94) 100%);
            box-shadow: 0 18px 36px rgba(0, 0, 0, 0.26);
        }

        html[data-theme="dark"] .order-stat-card::before {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), transparent 58%);
        }

        html[data-theme="dark"] .order-stat-card .small {
            color: #94a3b8 !important;
        }

        html[data-theme="dark"] .order-stat-card .fs-4,
        html[data-theme="dark"] .order-stat-card .fw-bold {
            color: #f8fafc;
        }

        .order-mobile-list {
            padding: 1rem;
        }

        .order-mobile-card {
            border: 1px solid rgba(33, 37, 41, 0.08);
            border-radius: 1.25rem;
            background: var(--bs-body-bg);
            box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);
        }

        .order-mobile-card + .order-mobile-card {
            margin-top: 1rem;
        }

        .order-mobile-card-header {
            border-bottom: 1px solid rgba(33, 37, 41, 0.08);
        }

        .order-mobile-field-list {
            display: grid;
            gap: 0.5rem;
        }

        .order-mobile-field {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 0.75rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px dashed rgba(33, 37, 41, 0.08);
        }

        .order-mobile-field:last-child {
            padding-bottom: 0;
            border-bottom: 0;
        }

        .order-mobile-label {
            flex: 0 0 42%;
            color: var(--bs-secondary-color);
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        .order-mobile-value {
            min-width: 0;
            flex: 1;
            text-align: right;
            font-size: 0.875rem;
            font-weight: 600;
            word-break: break-word;
        }

        .order-mobile-details {
            display: none;
        }

        .order-mobile-card.is-expanded .order-mobile-details {
            display: block;
        }

        .order-mobile-toggle i {
            transition: transform 0.2s ease;
        }

        .order-mobile-card.is-expanded .order-mobile-toggle i {
            transform: rotate(180deg);
        }

        .order-search-form {
            --order-search-height: 3rem;
        }

        .order-search-form .form-control,
        .order-search-form .form-select,
        .order-search-form .btn {
            min-height: var(--order-search-height);
            font-size: 0.95rem;
        }

        .order-search-form .form-control,
        .order-search-form .form-select {
            padding: 0.625rem 0.9rem;
        }

        .order-search-form .btn {
            padding: 0.625rem 1rem;
            font-weight: 600;
        }

        .order-search-form .order-search-actions {
            display: flex;
            align-items: stretch;
        }

        .order-search-form .order-search-actions .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        @media (min-width: 1200px) {
            .order-search-form {
                row-gap: 1rem;
            }

            .order-search-form .form-control,
            .order-search-form .form-select,
            .order-search-form .btn {
                font-size: 0.875rem;
            }
        }

        @media (max-width: 767.98px) {
            .order-search-form {
                row-gap: 0.75rem;
            }

            .order-search-form .form-control,
            .order-search-form .form-select,
            .order-search-form .btn {
                min-height: 44px;
                font-size: 0.9rem;
            }

            .order-search-form .form-control,
            .order-search-form .form-select {
                padding: 0.55rem 0.85rem;
            }

            .order-search-form input[type='date'] {
                padding-right: 0.65rem;
            }

            .order-search-form .col-6 {
                flex: 0 0 auto;
                width: 50%;
            }
        }

        @media (max-width: 575.98px) {
            .order-mobile-field {
                gap: 0.5rem;
            }

            .order-mobile-label {
                flex-basis: 45%;
            }

            .order-mobile-value {
                font-size: 0.82rem;
            }
        }
    </style>
@endpush

@section('content')
    @php
        $pageAmount = $orders->sum('amount');
        $jazzcashAmount = $orders
            ->filter(fn ($order) => strtolower((string) $order->wallet_type) === 'jazzcash')
            ->sum('amount');
        $easypaisaAmount = $orders
            ->filter(fn ($order) => strtolower((string) $order->wallet_type) === 'easypaisa')
            ->sum('amount');
        $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 p-lg-4">
                {{-- <div class="d-inline-flex align-items-center gap-2 px-3 py-2 rounded-pill small fw-bold text-uppercase text-nowrap order-page-badge">
                    <i class="bi bi-arrow-down-right-circle"></i>
                    <span>Payments / Payin Orders</span>
                </div> --}}

                <div class="mt-3">
                    <h1 class="h3 fw-bold mb-2 text-break">Payin Orders</h1>
                    {{-- <p class="text-muted mb-0">A cleaner order workspace designed to match your dashboard, with search tools, strong status visibility, and a tighter operations-focused table.</p> --}}
                </div>

                <div class="row g-3 mt-1">
                    <div class="col-12 col-md-6 col-xl-3">
                        <div class="rounded-4 p-3 order-stat-card order-stat-card-soft-green h-100">
                            <div class="d-flex align-items-center justify-content-between gap-3">
                                <div>
                                    <div class="small text-muted mb-1 text-nowrap">Total Amount</div>
                                    <div class="fs-4 fw-bold">Rs {{ number_format((float) $pageAmount, 2) }}</div>
                                </div>
                                <div class="fs-3 text-primary">
                                    <i class="bi bi-wallet2"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-md-6 col-xl-3">
                        <div class="rounded-4 p-3 order-stat-card order-stat-card-soft-green h-100">
                            <div class="d-flex align-items-center justify-content-between gap-3">
                                <div>
                                    <div class="small text-muted mb-1">JazzCash Amount</div>
                                    <div class="fs-4 fw-bold">Rs {{ number_format((float) $jazzcashAmount, 2) }}</div>
                                </div>
                                <div class="fs-3 text-warning">
                                    <i class="bi bi-phone"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-md-6 col-xl-3">
                        <div class="rounded-4 p-3 order-stat-card order-stat-card-soft-green h-100">
                            <div class="d-flex align-items-center justify-content-between gap-3">
                                <div>
                                    <div class="small text-muted mb-1">EasyPaisa Amount</div>
                                    <div class="fs-4 fw-bold">Rs {{ number_format((float) $easypaisaAmount, 2) }}</div>
                                </div>
                                <div class="fs-3 text-success">
                                    <i class="bi bi-cash-coin"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-md-6 col-xl-3">
                        <div class="rounded-4 p-3 order-stat-card order-stat-card-soft-green h-100">
                            <div class="d-flex align-items-center justify-content-between gap-3">
                                <div>
                                    <div class="small text-muted mb-1 text-nowrap">Failed Orders</div>
                                    <div class="fs-4 fw-bold">{{ $failedCount }}</div>
                                </div>
                                <div class="fs-3 text-danger">
                                    <i class="bi bi-exclamation-octagon"></i>
                                </div>
                            </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 text-nowrap">Search Orders</div>
                <div class="small">Refine by order id, date range, or wallet type</div>
            </div>
            <div class="card-body p-4">
                <form method="GET" action="{{ route('user.payments.payin_orders.index') }}" class="row g-3 align-items-stretch order-search-form" data-realtime-search data-realtime-delay="400">
                    <div class="col-12 col-md-6 col-xl-4 col-xxl-3">
                        <input type="text" name="order_id" class="form-control" value="{{ $filters['order_id'] }}" placeholder="Order ID / Wallet Order ID" data-realtime-input>
                    </div>
                    <div class="col-12 col-md-6 col-xl-2">
                        <input type="date" name="start_date" class="form-control" value="{{ $filters['start_date'] }}" data-realtime-change>
                    </div>
                    <div class="col-12 col-md-6 col-xl-2">
                        <input type="date" name="end_date" class="form-control" value="{{ $filters['end_date'] }}" data-realtime-change>
                    </div>
                    <div class="col-12 col-md-6 col-xl-2">
                        <select name="wallet_type" class="form-select" data-realtime-change>
                            <option value="">All Wallets</option>
                            @foreach ($walletTypes as $walletType)
                                <option value="{{ $walletType }}" @selected($filters['wallet_type'] === $walletType)>{{ ucfirst($walletType) }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-6 col-xl-1 order-search-actions">
                        <button type="submit" class="btn btn-dark w-100 text-nowrap">Search</button>
                    </div>
                    <div class="col-6 col-xl-1 order-search-actions">
                        <a href="{{ route('user.payments.payin_orders.index') }}" class="btn btn-outline-secondary w-100 text-nowrap">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 text-nowrap">Order List</div>
                <div class="small">{{ $failedCount }} failed orders visible in current result set</div>
            </div>
            <div class="card-body p-0">
                <div class="d-none d-md-block p-md-3">
                    <div class="table-responsive">
                        <table class="table align-middle mb-0 text-nowrap">
                            <thead class="table-light">
                                <tr>
                                    <th class="px-4 py-3 small text-muted text-uppercase">Client 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">Created Time</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 text-end">Action</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-4 py-3">
                                            <div class="fw-bold">{{ $order->order_id ?: 'N/A' }}</div>
                                            <div class="small text-muted">UTR: {{ $order->utr ?: 'Not available' }}</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->created_at?->format('d M Y, h:i A') ?: '-' }}</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 text-end"><button type="button" class="btn btn-dark btn-sm rounded-pill px-3 text-nowrap">Resend IPN</button></td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="7" class="text-center text-muted py-5">No payin orders found for the current filters.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="d-grid d-md-none order-mobile-list">
                    @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
                        <article class="order-mobile-card p-4">
                            <div class="order-mobile-card-header d-flex align-items-start justify-content-between gap-3 mb-3 pb-3">
                                <div class="min-w-0">
                                    <div class="small text-muted text-uppercase">Client Order ID</div>
                                    <div class="fw-bold mt-1">{{ $order->order_id ?: 'N/A' }}</div>
                                    <div class="small text-muted">{{ $order->created_at?->format('d M Y, h:i A') ?: '-' }}</div>
                                </div>
                                <span class="badge text-bg-{{ $statusClass }}">{{ $statusLabel }}</span>
                            </div>

                            <div class="order-mobile-field-list mb-3">
                                <div class="order-mobile-field">
                                    <div class="order-mobile-label">Amount</div>
                                    <div class="order-mobile-value">Rs {{ number_format((float) $order->amount, 2) }}</div>
                                </div>
                                <div class="order-mobile-field">
                                    <div class="order-mobile-label">Wallet Type</div>
                                    <div class="order-mobile-value">{{ $order->wallet_type ? ucfirst($order->wallet_type) : 'N/A' }}</div>
                                </div>
                                <div class="order-mobile-field">
                                    <div class="order-mobile-label">Wallet Order ID</div>
                                    <div class="order-mobile-value">{{ $order->wallet_order_id ?: 'N/A' }}</div>
                                </div>
                            </div>

                            <button type="button" class="btn btn-outline-primary btn-sm rounded-pill w-100 order-mobile-toggle" data-order-toggle aria-expanded="false">
                                <span>More Details</span>
                                <i class="bi bi-chevron-down ms-2"></i>
                            </button>

                            <div class="order-mobile-details mt-3">
                                <div class="order-mobile-field-list mb-3">
                                    <div class="order-mobile-field">
                                        <div class="order-mobile-label">Created Time</div>
                                        <div class="order-mobile-value">{{ $order->created_at?->format('d M Y, h:i A') ?: '-' }}</div>
                                    </div>
                                    <div class="order-mobile-field">
                                        <div class="order-mobile-label">UTR</div>
                                        <div class="order-mobile-value">{{ $order->utr ?: 'Not available' }}</div>
                                    </div>
                                    <div class="order-mobile-field">
                                        <div class="order-mobile-label">Status</div>
                                        <div class="order-mobile-value">{{ $statusLabel }}</div>
                                    </div>
                                </div>

                                <button type="button" class="btn btn-dark btn-sm rounded-pill w-100">Resend IPN</button>
                            </div>
                        </article>
                    @empty
                        <div class="text-center text-muted py-5">No payin orders found for the current filters.</div>
                    @endforelse
                </div>

                <div class="p-3 pt-md-0">
                    {{ $orders->onEachSide(1)->links('pagination::bootstrap-5') }}
                </div>
            </div>
        </section>
    </div>
@endsection