@extends('layouts.admin')

@section('title', 'Order Details')
@section('heading', 'Order Details')

@push('styles')
    <style>
        .details-grid {
            display: grid;
            grid-template-columns: 1.1fr 0.9fr;
            gap: 20px;
        }
        .panel { padding: 24px; }
        .item-row, .meta-row {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            padding: 14px 0;
            border-bottom: 1px solid var(--admin-line);
        }
        .field { display: grid; gap: 8px; margin-bottom: 16px; }
        select, textarea {
            width: 100%;
            padding: 14px 16px;
            border-radius: 18px;
            border: 1px solid rgba(123, 91, 47, 0.22);
            background: rgba(255, 255, 255, 0.72);
            font: inherit;
        }
        textarea { min-height: 120px; resize: vertical; }
        @media (max-width: 920px) {
            .details-grid { grid-template-columns: 1fr; }
        }
    </style>
@endpush

@section('toolbar')
    <a class="button ghost-button" href="{{ route('admin.orders.index') }}">Back to Orders</a>
@endsection

@section('content')
    <section class="details-grid">
        <article class="card panel">
            <h2 style="margin-top:0;">{{ $order->order_number }}</h2>
            <div class="meta-row"><span>Customer</span><strong>{{ $order->customer_name }}</strong></div>
            <div class="meta-row"><span>Email</span><strong>{{ $order->email }}</strong></div>
            <div class="meta-row"><span>Phone</span><strong>{{ $order->phone }}</strong></div>
            <div class="meta-row"><span>Address</span><strong>{{ $order->shipping_address }}, {{ $order->city }}, {{ $order->postal_code }}</strong></div>
            <div class="meta-row"><span>Total</span><strong>${{ number_format((float) $order->total_amount, 2) }}</strong></div>

            <h3 style="margin-top: 28px;">Items</h3>
            @foreach ($order->items as $item)
                <div class="item-row">
                    <div>
                        <strong>{{ $item->product_name }}</strong>
                        <div class="meta-text">Qty {{ $item->quantity }}</div>
                    </div>
                    <span>${{ number_format((float) $item->subtotal, 2) }}</span>
                </div>
            @endforeach
        </article>

        <form class="card panel" action="{{ route('admin.orders.update', $order) }}" method="POST">
            @csrf
            @method('PUT')
            <h2 style="margin-top:0;">Update Order</h2>

            <div class="field">
                <label for="status">Status</label>
                <select id="status" name="status">
                    @foreach ($statuses as $status)
                        <option value="{{ $status }}" {{ old('status', $order->status) === $status ? 'selected' : '' }}>
                            {{ ucfirst($status) }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="field">
                <label for="notes">Notes</label>
                <textarea id="notes" name="notes">{{ old('notes', $order->notes) }}</textarea>
            </div>

            <button type="submit">Save Changes</button>
        </form>
    </section>
@endsection