<x-app-layout>
    <x-slot name="header">
        <h2 class="serif" style="font-size: 1.3rem; color: var(--cream); font-weight: 400; letter-spacing: 0.05em;">
            {{ __('Admin / Customer Orders') }}
        </h2>
    </x-slot>

    <style>
        .admin-table-container {
            background: #fff;
            border-radius: 4px;
            border: 1px solid rgba(26,24,20,0.08);
            overflow: hidden;
        }
        .admin-table { width: 100%; border-collapse: collapse; text-align: left; }
        .admin-table th {
            background: var(--ivory);
            padding: 1rem 1.5rem;
            font-size: 0.65rem;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: var(--warm-gray);
            font-weight: 600;
            border-bottom: 1px solid rgba(26,24,20,0.06);
        }
        .admin-table td {
            padding: 1.25rem 1.5rem;
            font-size: 0.9rem;
            color: var(--ink);
            border-bottom: 1px solid rgba(26,24,20,0.04);
            vertical-align: middle;
        }
        .status-select {
            background: var(--ivory);
            border: 1px solid rgba(26,24,20,0.1);
            border-radius: 2px;
            font-size: 0.75rem;
            padding: 0.25rem 0.5rem;
            color: var(--charcoal);
            outline: none;
        }
        .status-select:focus { border-color: var(--amber); }

        .order-badge {
            font-size: 0.65rem;
            font-weight: 700;
            text-transform: uppercase;
            padding: 0.25rem 0.5rem;
            border-radius: 2px;
        }
        .badge-pending { background: #fff8e1; color: #b8860b; }
        .badge-processing { background: #e3f2fd; color: #1976d2; }
        .badge-shipped { background: #f3e5f5; color: #7b1fa2; }
        .badge-delivered { background: #e8f5e9; color: #2e7d32; }
        .badge-cancelled { background: #ffebee; color: #c62828; }
    </style>

    <div style="padding: 4rem 0 8rem;">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            
            @if(session('success'))
                <div class="alert-animate" style="background: var(--success); color: #fff; padding: 1rem 1.5rem; border-radius: 2px; margin-bottom: 3rem; font-size: 0.9rem; display: flex; align-items: center; gap: 0.75rem;">
                    <svg style="width:20px;height:20px;" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                    {{ session('success') }}
                </div>
            @endif

            <div class="admin-table-container">
                <table class="admin-table">
                    <thead>
                        <tr>
                            <th>Order ID</th>
                            <th>Customer</th>
                            <th>Items</th>
                            <th>Total</th>
                            <th>Status</th>
                            <th style="text-align: right;">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($orders as $order)
                            <tr>
                                <td style="font-weight: 600;">#MSN-{{ str_pad($order->id, 5, '0', STR_PAD_LEFT) }}</td>
                                <td>
                                    <div style="font-weight: 600;">{{ $order->user->name }}</div>
                                    <div style="font-size: 0.75rem; color: var(--mist);">{{ $order->user->email }}</div>
                                </td>
                                <td>
                                    <div style="font-size: 0.8rem; color: var(--warm-gray);">
                                        @foreach($order->items as $item)
                                            {{ $item->product->name }} (x{{ $item->quantity }}){{ !$loop->last ? ',' : '' }}
                                        @endforeach
                                    </div>
                                </td>
                                <td style="font-weight: 600; color: var(--amber);">৳{{ number_format($order->total_amount, 2) }}</td>
                                <td>
                                    <span class="order-badge badge-{{ $order->status }}">
                                        {{ $order->status }}
                                    </span>
                                </td>
                                <td style="text-align: right;">
                                    <div style="display: flex; justify-content: flex-end; align-items: center; gap: 1rem;">
                                        <a href="{{ route('invoice.download', $order) }}" style="font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; color: var(--sage); text-decoration: underline;">Invoice</a>
                                        <form action="{{ route('admin.orders.update', $order) }}" method="POST" style="display: inline-flex; gap: 0.5rem; align-items: center;">
                                            @csrf
                                            @method('PATCH')
                                            <select name="status" class="status-select" onchange="this.form.submit()">
                                                <option value="pending" {{ $order->status == 'pending' ? 'selected' : '' }}>Pending</option>
                                                <option value="processing" {{ $order->status == 'processing' ? 'selected' : '' }}>Processing</option>
                                                <option value="shipped" {{ $order->status == 'shipped' ? 'selected' : '' }}>Shipped</option>
                                                <option value="delivered" {{ $order->status == 'delivered' ? 'selected' : '' }}>Delivered</option>
                                                <option value="cancelled" {{ $order->status == 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                                            </select>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

        </div>
    </div>
</x-app-layout>
