@extends('layouts.user')
@section('title', 'My Orders')
@section('topbar-title', 'My Orders')

@section('content')
<div class="page-header">
    <h1>My Orders</h1>
</div>
<div class="card">
    @if($orders->isEmpty())
    <div style="padding:60px;text-align:center;color:var(--muted);">
        <i class="fa fa-receipt" style="font-size:3rem;margin-bottom:16px;display:block;opacity:0.2;"></i>
        <p>No orders yet. <a href="{{ route('home') }}" style="color:var(--accent);">Browse products</a> to get started.</p>
    </div>
    @else
    <div style="overflow-x:auto;">
        <table>
            <thead>
                <tr><th>Invoice</th><th>Product</th><th>Plan</th><th>Server IP</th><th>Amount</th><th>Status</th><th>Date</th></tr>
            </thead>
            <tbody>
                @foreach($orders as $order)
                <tr>
                    <td style="font-family:monospace;font-size:0.78rem;color:var(--muted);">{{ $order->invoice_number }}</td>
                    <td style="font-weight:600;">{{ $order->plan->product->name }}</td>
                    <td style="font-size:0.82rem;color:var(--muted);">{{ $order->billing_cycle }}</td>
                    <td style="font-family:monospace;font-size:0.8rem;color:var(--muted);">{{ $order->server_ip }}</td>
                    <td style="font-weight:600;">${{ number_format($order->amount, 2) }}</td>
                    <td><span class="badge badge-{{ $order->status }}">{{ ucfirst($order->status) }}</span></td>
                    <td style="font-size:0.8rem;color:var(--muted);">{{ $order->created_at->format('M j, Y') }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    <div style="padding:14px 16px;border-top:1px solid var(--border);">{{ $orders->links() }}</div>
    @endif
</div>
@endsection