@extends('admin.layout')
@section('title', 'Detalle de Venta - Admin IMOZA')
@section('header', 'Detalle de Venta')

@section('content')
<div class="max-w-2xl">
    <a href="{{ route('admin.sales') }}" class="text-sm text-imoza-blue-bright hover:text-imoza-blue-dark mb-4 inline-block">← Volver a ventas</a>

    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
        <div class="flex items-center justify-between mb-6">
            <div>
                <h2 class="text-lg font-bold text-imoza-blue-dark">Venta #{{ $sale->invoice_number ?: $sale->id }}</h2>
                <p class="text-sm text-gray-400">{{ $sale->created_at->format('d/m/Y H:i') }}</p>
            </div>
            <span class="px-3 py-1 rounded-lg text-sm font-bold {{ $sale->status === 'cancelled' ? 'bg-red-100 text-red-600' : 'bg-green-100 text-green-600' }}">
                {{ $sale->status === 'cancelled' ? 'Anulada' : 'Activa' }}
            </span>
        </div>

        <div class="grid grid-cols-2 gap-4 mb-6 text-sm">
            <div><span class="text-gray-400">Cliente:</span> <span class="font-semibold text-imoza-blue-dark">{{ $sale->customer->name ?? 'Cliente general' }}</span></div>
            <div><span class="text-gray-400">Vendedor:</span> <span class="font-semibold text-imoza-blue-dark">{{ $sale->user->name ?? '-' }}</span></div>
            <div><span class="text-gray-400">Método de pago:</span> <span class="font-semibold text-imoza-blue-dark">{{ $sale->payment_method }}</span></div>
            <div><span class="text-gray-400">Estado de pago:</span> <span class="font-semibold text-imoza-blue-dark">{{ $sale->payment_status }}</span></div>
        </div>

        <h3 class="font-bold text-imoza-blue-dark mb-3">Items</h3>
        <table class="w-full text-sm mb-6">
            <thead class="bg-gray-50 border-b border-gray-100">
                <tr>
                    <th class="text-left px-4 py-2 font-semibold text-gray-600">Producto</th>
                    <th class="text-right px-4 py-2 font-semibold text-gray-600">Precio</th>
                    <th class="text-right px-4 py-2 font-semibold text-gray-600">Cant.</th>
                    <th class="text-right px-4 py-2 font-semibold text-gray-600">Total</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50">
                @foreach($sale->items as $item)
                <tr>
                    <td class="px-4 py-3 font-medium text-imoza-blue-dark">{{ $item->product->name ?? 'N/A' }}</td>
                    <td class="px-4 py-3 text-right text-gray-500">${{ number_format($item->unit_price, 2) }}</td>
                    <td class="px-4 py-3 text-right text-gray-500">{{ $item->quantity }}</td>
                    <td class="px-4 py-3 text-right font-semibold text-imoza-blue-dark">${{ number_format($item->total, 2) }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>

        <div class="border-t border-gray-100 pt-4 space-y-2 text-sm">
            <div class="flex justify-between"><span class="text-gray-400">Subtotal:</span><span class="font-semibold">${{ number_format($sale->subtotal, 2) }}</span></div>
            <div class="flex justify-between"><span class="text-gray-400">Impuesto:</span><span class="font-semibold">${{ number_format($sale->tax, 2) }}</span></div>
            <div class="flex justify-between"><span class="text-gray-400">Descuento:</span><span class="font-semibold">-${{ number_format($sale->discount, 2) }}</span></div>
            <div class="flex justify-between text-lg"><span class="font-bold text-imoza-blue-dark">Total:</span><span class="font-extrabold text-imoza-blue-dark">${{ number_format($sale->total, 2) }}</span></div>
        </div>

        @if($sale->notes)
        <div class="mt-4 p-3 bg-gray-50 rounded-xl text-sm text-gray-600"><strong>Notas:</strong> {{ $sale->notes }}</div>
        @endif
    </div>
</div>
@endsection