@extends('layouts.customer')

@section('title', 'Pedido #' . substr($order->uuid, 0, 8))

@section('customer-content')
<div class="space-y-6">
    <!-- Header Pedido -->
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold flex items-center gap-3">
                Pedido #{{ substr($order->uuid, 0, 8) }}
                <span class="text-sm px-2.5 py-0.5 rounded-full border font-medium
                    {{ $order->status == 'approved' ? 'bg-green-50 text-green-700 border-green-200' : 
                       ($order->status == 'rejected' ? 'bg-red-50 text-red-700 border-red-200' : 'bg-yellow-50 text-yellow-700 border-yellow-200') }}">
                    {{ ucfirst($order->status == 'pending' ? 'Pendiente' : $order->status) }}
                </span>
            </h1>
            <p class="text-sm text-gray-500 mt-1">Realizado el {{ $order->created_at->format('d/m/Y \a \l\a\s h:i A') }}</p>
        </div>
        
        <a href="{{ route('customer.orders') }}" class="text-sm text-gray-600 hover:text-gray-900 flex items-center gap-1">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
            Volver
        </a>
    </div>

    <div class="grid md:grid-cols-3 gap-6">
        <!-- Detalle Items -->
        <div class="md:col-span-2 space-y-6">
            <div class="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden">
                <div class="px-6 py-4 border-b bg-gray-50/50">
                    <h3 class="font-bold">Artículos</h3>
                </div>
                <div class="p-6 space-y-4">
                    @foreach($order->items as $item)
                    <div class="flex items-center justify-between pb-4 border-b last:border-0 last:pb-0">
                        <div class="flex items-center gap-4">
                            <div class="h-16 w-16 bg-gray-100 rounded-md overflow-hidden flex-shrink-0">
                                @if($item->image)
                                    <img src="{{ $item->image }}" alt="{{ $item->product_name }}" class="w-full h-full object-cover">
                                @else
                                    <div class="w-full h-full flex items-center justify-center text-gray-400">
                                        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                                    </div>
                                @endif
                            </div>
                            <div>
                                <h4 class="font-medium text-gray-900">{{ $item->product_name }}</h4>
                                <p class="text-sm text-gray-500">{{ $item->quantity }} x ${{ number_format($item->price, 2) }}</p>
                            </div>
                        </div>
                        <div class="text-right">
                            <p class="font-bold text-gray-900">${{ number_format($item->quantity * $item->price, 2) }}</p>
                        </div>
                    </div>
                    @endforeach
                    
                    <div class="pt-4 border-t flex justify-between items-center text-lg mt-4">
                        <span class="font-bold">Total</span>
                        <span class="font-bold text-primary">${{ number_format($order->total, 2) }}</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Info Lateral -->
        <div class="space-y-6">
            <div class="bg-white rounded-lg shadow-sm border border-gray-100 p-6">
                <h3 class="font-bold border-b pb-2 mb-4">Datos del Pago</h3>
                <div class="space-y-3 text-sm">
                    <div>
                        <span class="text-gray-500 block">Método</span>
                        <span class="font-medium uppercase">{{ str_replace('_', ' ', $order->payment_method) }}</span>
                    </div>
                    <div>
                        <span class="text-gray-500 block">Referencia</span>
                        <span class="font-mono bg-gray-100 px-2 py-1 rounded">{{ $order->payment_proof }}</span>
                    </div>
                    @if($order->bank_name)
                    <div>
                        <span class="text-gray-500 block">Banco Origen</span>
                        <span class="font-medium">{{ $order->bank_name }}</span>
                    </div>
                    @endif
                </div>
            </div>

            <div class="bg-white rounded-lg shadow-sm border border-gray-100 p-6">
                <h3 class="font-bold border-b pb-2 mb-4">Información de Envío</h3>
                <div class="space-y-3 text-sm">
                    <div>
                        <span class="text-gray-500 block">Cliente</span>
                        <span class="font-medium">{{ $order->customer_name }}</span>
                    </div>
                    <div>
                        <span class="text-gray-500 block">Teléfono</span>
                        <span class="font-medium">{{ $order->customer_phone }}</span>
                    </div>
                    <div>
                         <span class="text-gray-500 block">Identidad</span>
                         <span class="font-medium">{{ $order->customer_identity }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection