<x-app-layout :title="'Pedido '.$pedido->codigo">
    @php $m = \App\Models\Restaurante::actual()->moneda; @endphp
    <x-page-header :title="'Pedido '.$pedido->codigo" :subtitle="$pedido->created_at->isoFormat('dddd D MMM, HH:mm')">
        <a href="{{ route('pedidos.index') }}" class="btn-secondary">← Volver</a>
    </x-page-header>

    <div class="grid grid-cols-1 gap-4 lg:grid-cols-3">
        <div class="card lg:col-span-2">
            <p class="mb-4 text-sm font-bold text-slate-700">Detalle del pedido</p>
            <table class="w-full text-sm">
                <thead>
                    <tr class="border-b border-slate-100 text-left text-xs uppercase tracking-wide text-slate-400">
                        <th class="py-2 font-semibold">Producto</th>
                        <th class="py-2 text-center font-semibold">Cant.</th>
                        <th class="py-2 text-right font-semibold">Precio</th>
                        <th class="py-2 text-right font-semibold">Subtotal</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-50">
                    @foreach ($pedido->items as $it)
                        <tr>
                            <td class="py-2.5 font-semibold text-slate-700">{{ $it->nombre_producto }}</td>
                            <td class="py-2.5 text-center text-slate-600">{{ $it->cantidad }}</td>
                            <td class="py-2.5 text-right text-slate-600">{{ $m }} {{ number_format($it->precio,2) }}</td>
                            <td class="py-2.5 text-right font-semibold text-slate-700">{{ $m }} {{ number_format($it->subtotal,2) }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
            <div class="mt-4 ml-auto max-w-xs space-y-1 text-sm">
                <div class="flex justify-between text-slate-500"><span>Subtotal</span><span>{{ $m }} {{ number_format($pedido->subtotal,2) }}</span></div>
                <div class="flex justify-between text-slate-500"><span>Descuento</span><span>- {{ $m }} {{ number_format($pedido->descuento,2) }}</span></div>
                <div class="flex justify-between text-slate-500"><span>IGV</span><span>{{ $m }} {{ number_format($pedido->impuesto,2) }}</span></div>
                <div class="flex justify-between border-t border-slate-100 pt-1 text-base font-extrabold text-slate-800"><span>Total</span><span>{{ $m }} {{ number_format($pedido->total,2) }}</span></div>
            </div>
        </div>

        <div class="space-y-4">
            <div class="card">
                <p class="mb-3 text-sm font-bold text-slate-700">Información</p>
                <dl class="space-y-2 text-sm">
                    <div class="flex justify-between"><dt class="text-slate-400">Estado</dt><dd><span class="badge bg-{{ $pedido->color_estado }}-50 text-{{ $pedido->color_estado }}-600">{{ ucfirst($pedido->estado) }}</span></dd></div>
                    <div class="flex justify-between"><dt class="text-slate-400">Tipo</dt><dd class="capitalize text-slate-700">{{ $pedido->tipo }}</dd></div>
                    <div class="flex justify-between"><dt class="text-slate-400">Mesa</dt><dd class="text-slate-700">{{ $pedido->mesa?->nombre ?? '—' }}</dd></div>
                    <div class="flex justify-between"><dt class="text-slate-400">Cliente</dt><dd class="text-slate-700">{{ $pedido->cliente?->nombre ?? 'Genérico' }}</dd></div>
                    <div class="flex justify-between"><dt class="text-slate-400">Atendido por</dt><dd class="text-slate-700">{{ $pedido->user?->name ?? '—' }}</dd></div>
                    <div class="flex justify-between"><dt class="text-slate-400">Pago</dt><dd class="text-slate-700">{{ $pedido->metodo_pago ? ucfirst($pedido->metodo_pago) : '—' }}</dd></div>
                </dl>
            </div>

            @if($pedido->estado !== 'pagado' && $pedido->estado !== 'cancelado')
            <div class="card">
                <p class="mb-3 text-sm font-bold text-slate-700">Cambiar estado</p>
                <form method="POST" action="{{ route('pedidos.estado', $pedido) }}" class="space-y-3">
                    @csrf @method('PATCH')
                    <select name="estado" class="form-input-c">
                        @foreach (['pendiente'=>'Pendiente','preparando'=>'Preparando','servido'=>'Servido','pagado'=>'Marcar como pagado','cancelado'=>'Cancelar'] as $k=>$v)
                            <option value="{{ $k }}" @selected($pedido->estado==$k)>{{ $v }}</option>
                        @endforeach
                    </select>
                    <select name="metodo_pago" class="form-input-c">
                        <option value="efectivo">Efectivo</option>
                        <option value="tarjeta">Tarjeta</option>
                        <option value="yape">Yape</option>
                        <option value="plin">Plin</option>
                        <option value="transferencia">Transferencia</option>
                    </select>
                    <button class="btn-primary w-full">Actualizar</button>
                </form>
            </div>
            @endif
        </div>
    </div>
</x-app-layout>
