@extends('layouts.layouts')

@section('title', 'Customer Orders | Book Store')
@section('header-title', 'Customer orders')

@section('content')
    <div class="crud-heading">
        <div>
            <p class="dashboard-eyebrow">Order management</p>
            <h1>Customer orders</h1>
            <p>Review customer details and finish orders when they have been delivered.</p>
        </div>
        <span class="order-count">{{ $orders->count() }} {{ $orders->count() === 1 ? 'order' : 'orders' }}</span>
    </div>

    @if ($errors->has('order'))
        <div class="alert alert-danger dashboard-alert">{{ $errors->first('order') }}</div>
    @endif

    @if ($orders->isEmpty())
        <div class="empty-state">
            <span class="empty-state-mark">+</span>
            <h2>No customer orders yet</h2>
            <p>Orders placed by customers will appear here.</p>
        </div>
    @else
        <div class="order-list">
            @foreach ($orders as $order)
                <article class="order-card">
                    <div class="order-card-header">
                        <div>
                            <span class="order-number">{{ $order->order_number }}</span>
                            <h3>{{ $order->user->name }}</h3>
                            <p>{{ $order->user->email }} &middot; {{ $order->address->phone }}</p>
                        </div>
                        <span class="order-status order-status-{{ $order->status }}">{{ ucfirst($order->status) }}</span>
                    </div>

                    <div class="order-card-body">
                        <div>
                            <strong>Delivery address</strong>
                            <p>{{ $order->address->address_line_1 }}@if ($order->address->address_line_2), {{ $order->address->address_line_2 }}@endif, {{ $order->address->city }}</p>
                        </div>
                        <div>
                            <strong>Items</strong>
                            <p>{{ $order->items->map(fn ($item) => $item->book->title . ' × ' . $item->quantity)->join(', ') }}</p>
                        </div>
                        <strong class="order-total">Rs. {{ number_format((float) $order->total, 2) }}</strong>
                    </div>

                    @if ($order->status !== 'completed' && $order->status !== 'cancelled')
                        <form method="POST" action="{{ route('orders.complete', $order) }}" class="order-card-actions">
                            @csrf
                            @method('PATCH')
                            <button type="submit" class="btn btn-accent">Mark as completed</button>
                        </form>
                    @endif
                </article>
            @endforeach
        </div>
    @endif

    <style>
        .order-count { color: #64717c; font-weight: 700; }
        .order-list { display: grid; gap: 1rem; }
        .order-card { border: 1px solid #dce5eb; border-radius: 12px; padding: 1.25rem; background: #fff; }
        .order-card-header, .order-card-body { display: flex; justify-content: space-between; gap: 1rem; }
        .order-card-header { align-items: flex-start; border-bottom: 1px solid #edf1f3; padding-bottom: 1rem; }
        .order-number { color: #64717c; font-size: .8rem; font-weight: 700; letter-spacing: .05em; }
        .order-card h3 { margin: .35rem 0 .2rem; }
        .order-card p { color: #64717c; margin: 0; font-size: .9rem; }
        .order-status { border-radius: 999px; padding: .35rem .7rem; font-size: .78rem; font-weight: 700; text-transform: capitalize; }
        .order-status-completed { background: #dff5e8; color: #19703c; }
        .order-status-cancelled { background: #fde5e2; color: #a93226; }
        .order-status-pending, .order-status-confirmed, .order-status-processing, .order-status-shipped, .order-status-delivered { background: #fff1d6; color: #805b11; }
        .order-card-body { align-items: end; padding: 1rem 0; }
        .order-card-body strong { font-size: .82rem; }
        .order-total { white-space: nowrap; font-size: 1rem !important; color: #102a43; }
        .order-card-actions { border-top: 1px solid #edf1f3; padding-top: 1rem; text-align: right; }
        @media (max-width: 700px) { .order-card-header, .order-card-body { flex-direction: column; align-items: flex-start; } .order-status { order: -1; } }
    </style>
@endsection