@extends('front.layouts.app')
@section('title', 'Order #'.$order->order_number)
@section('content')
<div class="page-header">
    <h1><span>Order</span> #{{ $order->order_number }}</h1>
</div>
<div class="section">
    <div class="section-inner">
        <div class="breadcrumb">
            <a href="{{ route('home') }}">Home</a><span>/</span>
            <a href="{{ route('orders') }}">Orders</a><span>/</span>
            <span>{{ $order->order_number }}</span>
        </div>

        <div style="display:grid;grid-template-columns:2fr 1fr;gap:30px">
            <div>
                <div class="card" style="background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:20px">
                    <h3 style="font-family:var(--font-heading);color:#fff;margin-bottom:15px">Order Items</h3>
                    <table class="cart-table">
                        <tr><th>Product</th><th>Price</th><th>Qty</th><th>Subtotal</th></tr>
                        @foreach($order->items as $item)
                        <tr>
                            <td>{{ $item->product_name }}</td>
                            <td>${{ number_format($item->price, 2) }}</td>
                            <td>{{ $item->quantity }}</td>
                            <td>${{ number_format($item->subtotal, 2) }}</td>
                        </tr>
                        @endforeach
                    </table>
                    <div style="text-align:right;margin-top:15px;font-size:1.2rem">
                        <strong>Total: ${{ number_format($order->total, 2) }}</strong>
                    </div>
                </div>
            </div>

            <div>
                <div class="card" style="background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:20px;margin-bottom:20px">
                    <h3 style="font-family:var(--font-heading);color:#fff;margin-bottom:15px">Order Details</h3>
                    <p style="color:var(--text-muted)"><strong style="color:#fff">Status:</strong> <span class="badge" style="background:{{ $order->status == 'completed' ? '#1a3a2e' : ($order->status == 'processing' ? '#1a2a4a' : '#3a3020') }};color:{{ $order->status == 'completed' ? '#6fcf97' : ($order->status == 'processing' ? '#5a9af0' : '#f0c040') }};padding:3px 10px;border-radius:20px;font-size:0.75rem">{{ ucfirst($order->status) }}</span></p>
                    <p style="color:var(--text-muted)"><strong style="color:#fff">Payment:</strong> {{ ucfirst($order->payment_status) }}</p>
                    <p style="color:var(--text-muted)"><strong style="color:#fff">Date:</strong> {{ $order->created_at->format('M d, Y h:i A') }}</p>
                </div>

                <div class="card" style="background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:20px">
                    <h3 style="font-family:var(--font-heading);color:#fff;margin-bottom:15px">Shipping Address</h3>
                    <p style="color:var(--text-muted)">{{ $order->shipping_address ?? 'N/A' }}</p>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
