@extends('layouts.app')

@section('title', 'Lịch sử giao dịch | GreenCard.vn')

@section('content')
<main class="container dash-layout">
    @include('partials.dash-sidebar')

    <section class="dash-main card-panel" style="padding:0;">
        <nav class="htabs">
            <a href="{{ route('user.purchase') }}" class="{{ $tab === 'all' ? 'active' : '' }}">Tất cả</a>
            <a href="{{ route('user.purchase', ['tab' => 'pending']) }}" class="{{ $tab === 'pending' ? 'active' : '' }}">Đang xử lý</a>
            <a href="{{ route('user.purchase', ['tab' => 'refunded']) }}" class="{{ $tab === 'refunded' ? 'active' : '' }}">Hoàn tiền</a>
            <a href="{{ route('user.purchase', ['tab' => 'success']) }}" class="{{ $tab === 'success' ? 'active' : '' }}">Thành công</a>
            <a href="{{ route('user.purchase', ['tab' => 'failed']) }}" class="{{ $tab === 'failed' ? 'active' : '' }}">Thất bại</a>
        </nav>

        @forelse($orders as $order)
            <div style="display:flex;align-items:center;gap:16px;padding:16px 24px;border-bottom:1px solid var(--line);font-size:13.5px;">
                <span class="bank-avatar" style="width:40px;height:40px;font-size:16px;">{{ $order->type === 'buy_card' ? '🎫' : '🎮' }}</span>
                <span>
                    <b>{{ $order->product }}</b><br>
                    <span style="color:var(--slate);font-size:12.5px;">{{ $order->detail }} · SL: {{ $order->quantity }}</span>
                </span>
                <span style="margin-left:auto;text-align:right;">
                    <b style="color:var(--red);">{{ number_format($order->amount, 0, ',', '.') }}đ</b><br>
                    <span style="font-size:12px;font-weight:700;color:{{ $order->status === 'success' ? 'var(--green-dark)' : ($order->status === 'failed' ? 'var(--red)' : '#b45309') }};">
                        {{ ['pending' => 'Đang xử lý', 'success' => 'Thành công', 'failed' => 'Thất bại', 'refunded' => 'Hoàn tiền'][$order->status] ?? $order->status }}
                    </span><br>
                    <span style="font-size:11.5px;color:var(--slate-light);">{{ $order->created_at->format('d/m/Y H:i') }}</span>
                </span>
            </div>
        @empty
            <div class="empty-state"></div>
        @endforelse
    </section>
</main>
@endsection