@extends('layouts.app')

@section('content')
<div class="container py-5">
    <h3 class="mb-4 text-center"><i class="fas fa-box-open me-2"></i>Detalle del Pedido #{{ $pedido->id }}</h3>

    <div class="mb-3">
        <strong>Estado:</strong> 
        <span class="badge bg-{{ $pedido->status === 'pendiente' ? 'warning text-dark' : ($pedido->status === 'cancelado' ? 'danger' : 'success') }}">
            {{ ucfirst($pedido->status) }}
        </span>
    </div>

    <table class="table table-bordered align-middle">
        <thead class="table-light">
            <tr>
                <th>Producto</th>
                <th>Cantidad</th>
                <th>Precio Unitario</th>
                <th>Subtotal</th>
            </tr>
        </thead>
        <tbody>
            @foreach($pedido->items as $item)
                <tr>
                    <td>{{ $item->product->name }}</td>
                    <td>{{ $item->quantity }}</td>
                    <td>${{ number_format($item->unit_price, 2) }}</td>
                    <td>${{ number_format($item->subtotal, 2) }}</td>
                </tr>
            @endforeach
        </tbody>
    </table>

    <div class="text-end mt-3 fs-5">
        <strong>Total:</strong> ${{ number_format($pedido->total, 2) }}
    </div>

    <div class="mt-4">
        <a href="{{ route('cliente.perfil.perfil') }}" class="btn btn-outline-primary">
            <i class="fas fa-arrow-left me-1"></i> Volver a perfil
        </a>
    </div>
</div>
@endsection