@extends('layouts.app')

@section('title', 'Order History')

@section('styles')
<style>
    h1 {
        font-family: 'Abril Fatface', cursive;
        font-size: 2.5rem;
        color: var(--primary-color);
        margin-bottom: 2rem;
    }

    .empty-state {
        text-align: center;
    }

    .empty-state p {
        color: #666;
        margin-bottom: 1.5rem;
        font-size: 1.1rem;
    }

    .orders-list {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .order-card {
        padding: 1.5rem;
        border-left: 4px solid var(--primary-color);
    }

    .order-header {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1rem;
        margin-bottom: 1rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid #eee;
    }

    .order-info {
        flex: 1;
    }

    .order-number {
        font-family: 'Abril Fatface', cursive;
        font-size: 1.1rem;
        color: var(--primary-color);
        font-weight: 600;
    }

    .order-date {
        color: #666;
        font-size: 0.9rem;
    }

    .order-status {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .order-total {
        text-align: right;
    }

    .total-amount {
        font-family: 'Abril Fatface', cursive;
        font-size: 1.3rem;
        color: var(--primary-color);
        font-weight: 600;
    }

    .order-items {
        margin: 1rem 0;
        padding: 1rem 0;
        border-bottom: 1px solid #f0f0f0;
    }

    .item {
        display: flex;
        justify-content: space-between;
        padding: 0.5rem 0;
        font-size: 0.9rem;
    }

    .item-name {
        color: #333;
    }

    .item-qty {
        color: #666;
        margin: 0 1rem;
    }

    .item-price {
        color: var(--primary-color);
        font-weight: 600;
    }

    .order-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 1rem;
    }

    .customer-info {
        font-size: 0.9rem;
        color: #666;
    }

    .customer-info strong {
        color: var(--primary-color);
    }

    .order-actions {
        display: flex;
        gap: 0.5rem;
    }

    .btn-small {
        background-color: var(--accent-primary);
        color: white;
        border: none;
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.3s;
        font-weight: 600;
        text-decoration: none;
    }

    .btn-small:hover {
        background-color: #c09191;
    }

    @media (max-width: 768px) {
        .order-header {
            grid-template-columns: 1fr;
            gap: 0.5rem;
        }

        .order-total {
            text-align: left;
        }
    }
</style>
@endsection

@section('content')
<main class="container">
    <h1>Order History</h1>

    @if($orders->count() > 0)
        <div class="orders-list">
            @foreach($orders as $order)
            <div class="order-card card">
                <!-- Order Header -->
                <div class="order-header">
                    <div class="order-info">
                        <div class="order-number">{{ $order->order_number }}</div>
                        <div class="order-date">{{ $order->created_at->format('M d, Y') }}</div>
                    </div>

                    <div class="order-status">
                        <span class="status-badge {{ $order->status }}">
                            {{ ucfirst($order->status) }}
                        </span>
                    </div>

                    <div class="order-total">
                        <div class="total-amount">${{ number_format($order->total, 2) }}</div>
                    </div>
                </div>

                <!-- Order Items -->
                <div class="order-items">
                    @foreach($order->items as $item)
                    <div class="item">
                        <span class="item-name">{{ $item->product->name }}</span>
                        <span class="item-qty">Qty: {{ $item->quantity }}</span>
                        <span class="item-price">${{ number_format($item->quantity * $item->price, 2) }}</span>
                    </div>
                    @endforeach
                </div>

                <!-- Order Footer -->
                <div class="order-footer">
                    <div class="customer-info">
                        <strong>{{ $order->customer_name }}</strong><br>
                        {{ $order->customer_email }}
                    </div>

                    <div class="order-actions">
                        <button class="btn-small" onclick="printOrder({{ $order->id }})">Print</button>
                        <a href="{{ route('product-detail', $order->items->first()->product) }}" class="btn-small">View Items</a>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    @else
        <div class="empty-state card--pink">
            <p>No orders found. Start shopping today!</p>
            <a href="{{ route('wallpapers') }}" class="btn">Browse Products</a>
        </div>
    @endif
</main>

<script>
    function printOrder(orderId) {
        window.print();
    }
</script>
@endsection