@extends('layouts.app')
@section('title', 'Lịch sử thanh toán')

@section('content')
    @include('partials.header')

    <!-- Main content offset for sidebar -->
    <div class="lg:ml-64">
        @include('partials.topbar')

        <div class="max-w-4xl mx-auto py-8 px-4 sm:px-6">

            {{-- Page Title --}}
            <div class="mb-6">
                <h1 class="text-2xl font-bold text-text">📋 Lịch sử thanh toán</h1>
                <p class="text-sm text-text-muted mt-1">{{ $orders->total() }} giao dịch</p>
            </div>

            <div class="rounded-2xl shadow-sm border border-accent/15 overflow-hidden bg-secondary">

                @if($orders->isEmpty())
                <div class="p-16 text-center">
                    <div class="text-6xl mb-4">📭</div>
                    <p class="text-text-muted text-sm font-medium">Chưa có giao dịch nào</p>
                    <a href="{{ url('/pricing') }}" class="inline-flex items-center gap-2 mt-4 px-5 py-2.5 bg-accent hover:bg-accent-dark text-white font-bold text-sm rounded-xl transition-all shadow-md border-0 cursor-pointer">
                        Nâng cấp ngay
                    </a>
                </div>
                @else
                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead>
                            <tr class="text-text-muted text-xs uppercase tracking-wider bg-primary/40 border-b border-accent/10">
                                <th class="px-6 py-3.5 text-left font-semibold">#</th>
                                <th class="px-6 py-3.5 text-left font-semibold">Gói</th>
                                <th class="px-6 py-3.5 text-left font-semibold">Số tiền</th>
                                <th class="px-6 py-3.5 text-left font-semibold">Nội dung CK</th>
                                <th class="px-6 py-3.5 text-left font-semibold">Trạng thái</th>
                                <th class="px-6 py-3.5 text-left font-semibold">Thời gian</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-accent/10">
                            @foreach($orders as $i => $order)
                            <tr class="hover:bg-accent/5 transition-colors">
                                <td class="px-6 py-4 text-text-muted font-mono text-xs">{{ $orders->firstItem() + $i }}</td>
                                <td class="px-6 py-4">
                                    <span class="font-semibold text-text">
                                        @if($order->plan_id === 'premium') 👑 Premium
                                        @elseif($order->plan_id === 'pro') ⚡ Pro
                                        @else 🌟 Free
                                        @endif
                                    </span>
                                </td>
                                <td class="px-6 py-4 font-bold text-red-400">{{ number_format($order->amount) }}đ</td>
                                <td class="px-6 py-4">
                                    <code class="text-xs bg-primary border border-accent/25 px-2.5 py-1 rounded-lg text-accent font-mono">{{ $order->transfer_content }}</code>
                                </td>
                                <td class="px-6 py-4">
                                    @if($order->status === 'completed')
                                        <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-semibold bg-green-500/10 text-green-400 border border-green-500/20">✅ Thành công</span>
                                    @elseif($order->status === 'pending')
                                        <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-semibold bg-amber-500/10 text-amber-400 border border-amber-500/20">⏳ Đang chờ</span>
                                    @elseif($order->status === 'amount_mismatch')
                                        <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-semibold bg-red-500/10 text-red-400 border border-red-500/20">❌ Sai số tiền</span>
                                    @else
                                        <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-semibold bg-primary text-text-muted border border-accent/10">{{ $order->status }}</span>
                                    @endif
                                </td>
                                <td class="px-6 py-4 text-text-muted text-xs whitespace-nowrap">{{ $order->created_at }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                @endif
            </div>

            {{-- Pagination --}}
            @if($orders->hasPages())
            <div class="mt-6 flex justify-center">
                <nav class="flex items-center gap-1">
                    @if($orders->onFirstPage())
                        <span class="px-3 py-2 text-sm text-text-muted/40 rounded-lg">← Trước</span>
                    @else
                        <a href="{{ $orders->previousPageUrl() }}" class="px-3 py-2 text-sm text-text-muted hover:bg-secondary rounded-lg transition-colors">← Trước</a>
                    @endif

                    @foreach($orders->getUrlRange(1, $orders->lastPage()) as $page => $url)
                        @if($page == $orders->currentPage())
                            <span class="px-3.5 py-2 text-sm font-bold bg-accent text-white rounded-lg shadow-sm">{{ $page }}</span>
                        @else
                            <a href="{{ $url }}" class="px-3.5 py-2 text-sm text-text-muted hover:bg-secondary rounded-lg transition-colors">{{ $page }}</a>
                        @endif
                    @endforeach

                    @if($orders->hasMorePages())
                        <a href="{{ $orders->nextPageUrl() }}" class="px-3 py-2 text-sm text-text-muted hover:bg-secondary rounded-lg transition-colors">Sau →</a>
                    @else
                        <span class="px-3 py-2 text-sm text-text-muted/40 rounded-lg">Sau →</span>
                    @endif
                </nav>
            </div>
            @endif

        </div>

        @include('partials.footer')
    </div>
@endsection