<div>
    <x-slot name="header">
        <div class="flex justify-between">
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                {{ __('Pedidos') }}
            </h2>
            <h3 class="font-bold">Impresora: <span class="font-normal">{{auth()->user()?->impresora?->estacion ?? "Sin Asignar"}}:{{auth()->user()?->impresora?->nombre_impresora}}</span></h3>
        </div>

    </x-slot>

    <div class="py-12">

        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="mb-3 flex justify-between">
                <button wire:click="create()" class="btn btn-sm btn-primary">Registrar pedido</button>
                <div class="form-group max-w-md">
                    <div class="form-field flex flex-row items-center">
                        <label for="buscador" class="form-label font-bold">Buscar:</label>
                    <input id="buscador" wire:model="buscador" type="" placeholder="Buscar por pedido" class="input max-w-full" />
                    </div>
                </div>
            </div>
            @if (session()->has('message'))
                <div class="alert alert-success my-2">
                    <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                    <span>{{ session('message') }}</span>
                </div>
            @endif
            @if (session()->has('error'))
                <div class="alert alert-error my-2">
                    <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                    <span>{{ session('error') }}</span>
                </div>
            @endif
            <div class="bg-white text-neutral overflow-hidden shadow-xl sm:rounded-lg">
                <div class="overflow-x-auto">
                    <table class="table table-hover table-zebra">
                      <thead>
                        <tr class="text-neutral">
                          <th>Pedido</th>
                          <th>Cuenta</th>
                          <th>Recibidos</th>
                          <th>Registrado por</th>
                          <th>Entregado por</th>
                          <th>Cerrado por</th>
                          <th>Fecha</th>
                          <th>Acciones</th>
                        </tr>
                      </thead>
                      <tbody>
                        @forelse ($pedidos as $pedido)
                            <th>{{ $pedido->pedido }}</th>
                            <th>{{ $pedido->cuenta }}</th>
                            {{-- <th>{{ $pedido->folio_proveedor?$pedido->folio_proveedor:"No asignado" }}</th> --}}
                            {{-- <th>{{ $pedido->year }} {{ $pedido->marca }} {{ $pedido->modelo }}</th> --}}
                            <th>{{ $pedido->productos->where('pivot.is_arrivo', 1)->count()." de ".$pedido->productos->count()." Productos";}}</th>
                            <th>{{ $pedido->user->name }}</th>
                            <th>{{ $pedido->ventaEntregadaUser?->name ?? "Sin Entregar" }}</th>
                            <th>{{ $pedido->ventaCerradaUser?->name ?? "Sin Cerrar" }}</th>
                            <th>{{ $pedido->created_at }}</th>
                            <th class="flex gap-2">
                                <svg wire:click="show({{$pedido->id}})" xmlns="http://www.w3.org/2000/svg" class="cursor-pointer w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                </svg>     
                                <svg wire:click="imprimirTicket({{$pedido->id}},false)" xmlns="http://www.w3.org/2000/svg" class="text-sky-600 cursor-pointer w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M6.72 13.829c-.24.03-.48.062-.72.096m.72-.096a42.415 42.415 0 0110.56 0m-10.56 0L6.34 18m10.94-4.171c.24.03.48.062.72.096m-.72-.096L17.66 18m0 0l.229 2.523a1.125 1.125 0 01-1.12 1.227H7.231c-.662 0-1.18-.568-1.12-1.227L6.34 18m11.318 0h1.091A2.25 2.25 0 0021 15.75V9.456c0-1.081-.768-2.015-1.837-2.175a48.055 48.055 0 00-1.913-.247M6.34 18H5.25A2.25 2.25 0 013 15.75V9.456c0-1.081.768-2.015 1.837-2.175a48.041 48.041 0 011.913-.247m10.5 0a48.536 48.536 0 00-10.5 0m10.5 0V3.375c0-.621-.504-1.125-1.125-1.125h-8.25c-.621 0-1.125.504-1.125 1.125v3.659M18 10.5h.008v.008H18V10.5zm-3 0h.008v.008H15V10.5z" />
                                </svg>                                                               
                            @role('admin') 
                                <svg wire:click="delete({{ $pedido->id }})" xmlns="http://www.w3.org/2000/svg" class="text-error cursor-pointer w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
                                </svg> 
                            </th> 
                            @endrole
                            </tr>
                            @empty
                            <div class="alert alert-info my-4 max-w-3xl mx-auto">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                                <span>No hay pedidos registrados en el sistema.</span>
                            </div>
                            @endforelse
                        </tbody>
                </table>
                {{$pedidos->links()}}
                </div>

            </div>
        </div>
    </div>

    <input class="modal-state" wire:model.defer="modal" id="modal-1" type="checkbox" />
    <div class="modal w-screen">
        <label class="modal-overlay" for="modal-1"></label>
        <div class="modal-content flex flex-col gap-2 max-w-5xl">
            <label for="modal-1" class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</label>
            
            <h3 class="font-bold text-lg">Registrar Pedido</h3>
                
            <h4>Datos del cliente</h4>
            <div class="border-b border-gray-400 w-full"></div>
            <div class="grid grid-cols-2 gap-2">
                <div class="form-group">
                    <div class="form-field">
                        <label for="cuenta" class="form-label font-bold">Cuenta:</label>
                        <input id="cuenta" wire:model="pedido.cuenta" type="text" placeholder="Cuenta usuario" class="input max-w-full input-enter" />
                    </div>
                    @error('pedido.cuenta')<span class="block text-sm mx-2 text-error">{{ $message }}</span>@enderror  
                </div>

                <div class="form-group">
                    <div class="form-field">
                        <label for="telefono" class="form-label font-bold">Telefono:</label>
                        <input id="telefono" wire:model="pedido.telefono" type="text" maxlength="10" placeholder="Numero de telefono" class="input max-w-full input-enter" />
                    </div>
                    @error('pedido.cuenta')<span class="block text-sm mx-2 text-error">{{ $message }}</span>@enderror  
                </div>
            </div>

            <h4>Datos del vehiculo</h4>
            <div class="border-b border-gray-400 w-full"></div>
            <div class="grid grid-cols-4 gap-2">
                <div class="form-group">
                    <div class="form-field">
                        <label for="year" class="form-label font-bold">Año:</label>
                        <input id="year" wire:model="pedido.year" type="number" maxlength="4" placeholder="Año del vehiculo" class="input max-w-full input-enter" />
                    </div>
                    @error('pedido.year')<span class="block text-sm mx-2 text-error">{{ $message }}</span>@enderror  
                </div>
                <div class="form-group">
                    <div class="form-field">
                        <label for="marca" class="form-label font-bold">Marca:</label>
                        <input id="marca" wire:model="pedido.marca" type="text" placeholder="Marca del vehiculo" class="input max-w-full input-enter" />
                    </div>
                    @error('pedido.marca')<span class="block text-sm mx-2 text-error">{{ $message }}</span>@enderror  
                </div>
                <div class="form-group">
                    <div class="form-field">
                        <label for="modelo" class="form-label font-bold">Modelo:</label>
                        <input id="modelo" wire:model="pedido.modelo" type="text" placeholder="Modelo del vehiculo" class="input max-w-full input-enter" />
                        @error('pedido.modelo')<span class="block text-sm mx-2 text-error">{{ $message }}</span>@enderror  
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-field">
                        <label for="motor" class="form-label font-bold">Motor:</label>
                        <input id="motor" wire:model="pedido.motor" type="text" placeholder="Tamaño del motor" class="input max-w-full input-enter" />
                        @error('pedido.motor')<span class="block text-sm mx-2 text-error">{{ $message }}</span>@enderror  
                    </div>
                </div>
            </div>

            <div class="form-group">
                <div class="form-field">
                    <label for="comentarios" class="form-label font-bold">Comentarios:</label>
                    <textarea id="comentarios" wire:model="pedido.comentarios" type="text" placeholder="Registra el historial del pedido." class="textarea max-w-full input-enter" ></textarea>
                </div>
            </div>

            <div class="flex flex-col justify-between gap-1">
                <h4>Productos a cotizar</h4>
                <div class="">
                    <div class="dropdown dropdown-open w-full">
                        <input class="input input-block input-enter" wire:model="buscadorProducto" placeholder="Buscar pieza" />
                        @if ($buscadorProducto!="")
                            <div class="dropdown-menu w-full">
                                @forelse ($productosList as $producto)
                                    <button class="dropdown-item text-sm" wire:click="agregar({{$producto->id}})">Codigo: {{$producto->codigo}} | Descripcion: {{$producto->descripcion}}</button>                                    
                                @empty
                                    <button class="dropdown-item text-sm">No se encontraron coincidencias.</button>
                                @endforelse
                            </div>
                        @endif
                    </div>
                </div>
            </div>
            <div class="border-b border-gray-400 w-full"></div>
            <div>
            @foreach ($productos as $key => $producto)
                
            <div class="flex gap-2 items-center">
                <div class="form-group">
                    <div class="form-field">
                        <label for="codigo-{{$key}}" class="form-label font-bold">Codigo:</label>
                        <input id="codigo-{{$key}}" wire:model="productos.{{$key}}.codigo" type="text" placeholder="" class="input max-w-full input-product" />
                    </div>
                    @error("productos.{$key}.codigo")<span class="block text-xs mx-2 text-error">{{ $message }}</span>@enderror  
                </div>
                <div class="form-group col-span-3">
                    <div class="form-field">
                        <label for="descripcion-{{$key}}" class="form-label font-bold">Descripcion:</label>
                        <input id="descripcion-{{$key}}" wire:model="productos.{{$key}}.descripcion" type="text" placeholder="" class="input max-w-full input-product" />
                    </div>
                    @error("productos.{$key}.descripcion")<span class="block text-xs mx-2 text-error">{{ $message }}</span>@enderror  
                </div>
                <div class="form-group">
                    <div class="form-field">
                        <label for="linea-{{$key}}" class="form-label font-bold">Linea:</label>
                        <input id="linea-{{$key}}" wire:model="productos.{{$key}}.linea" type="text" maxlength="4" placeholder="" class="input max-w-full input-product" />
                    </div>
                    @error("productos.{$key}.linea")<span class="block text-xs mx-2 text-error">{{ $message }}</span>@enderror  
                </div>
                {{-- <div class="form-group">
                    <div class="form-field">
                        <label for="prefijo-{{$key}}" class="form-label font-bold">Prefijo:</label>
                        <input id="prefijo-{{$key}}" maxlength="8" wire:model="productos.{{$key}}.prefijo" type="text" placeholder="" class="input max-w-full input-product" />
                    </div>
                    @error("productos.{$key}.prefijo")<span class="block text-xs mx-2 text-error">{{ $message }}</span>@enderror  
                </div> --}}
                <div class="form-group gap-1">
                    <label for="cantidad-{{$key}}" class="form-label font-bold">Ruta:</label>
                    <select class="select" wire:model="productos.{{$key}}.ruta_id">
                        <option selected value="">- Ruta -</option>
                        @foreach ($rutas as $ruta)
                            <option value="{{$ruta->id}}">{{$ruta->prefijo}} - {{ $ruta->ruta }}</option>                            
                        @endforeach
                    </select>
                    @error("productos.{$key}.ruta_id")<span class="block text-xs mx-2 text-error">{{ $message }}</span>@enderror  
                </div>
                <div class="form-group">
                    <div class="form-field">
                        <label for="cantidad-{{$key}}" class="form-label font-bold">Cantidad:</label>
                        <input id="cantidad-{{$key}}" maxlength="4" wire:model="productos.{{$key}}.cantidad" type="text" placeholder="" class="input max-w-full input-product" />
                    </div>
                    @error("productos.{$key}.cantidad")<span class="block text-xs mx-2 text-error">{{ $message }}</span>@enderror  
                </div>
                <div class="form-group col-span-2">
                    <div class="form-field">
                        <label for="precio_unitario-{{$key}}" class="form-label font-bold">Precio Unitario:</label>
                        <input id="precio_unitario-{{$key}}" maxlength="6" wire:model="productos.{{$key}}.precio_unitario" type="text" placeholder="" class="input max-w-full input-product" />
                    </div>
                    @error("productos.{$key}.precio_unitario")<span class="block text-xs mx-2 text-error">{{ $message }}</span>@enderror  
                </div>

                <div class="form-group">
                    <div class="form-field">
                        <label for="total-{{$key}}" class="form-label font-bold">Total:</label>
                        <input id="total-{{$key}}" wire:model="totals.{{$key}}" type="text" disabled class="input max-w-full" />
                    </div>
                </div>
                <div>
                    <label class="form-label invisible">btn</label>
                        <svg wire:click="eliminarProducto({{$key}})" xmlns="http://www.w3.org/2000/svg" class="text-error cursor-pointer" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
                        </svg>                      
                </div>
            </div>
            @endforeach
            <p class="font-bold text-lg text-right my-2 mx-2">SubTotal: <span class="font-normal">{{round($totalPagar - $IVA,2)}}</span></p>
            <p class="font-bold text-lg text-right my-2 mx-2">IVA 8%: <span class="font-normal">{{round($IVA,2)}}</span></p>
            <p class="font-bold text-lg text-right my-2 mx-2">Total a Pagar: <span class="font-normal">{{round($totalPagar,2)}}</span></p>
            </div>

            <h4>Deposito del producto</h4>
            <div class="border-b border-gray-400 w-full"></div>

            <div class="grid grid-cols-5 gap-2">
                <div class="form-group">
                    <div class="form-field">
                        <label for="efectivo" class="form-label font-bold">Efectivo:</label>
                        <input id="efectivo" wire:model="ventaEspecial.pago_efectivo" type="number" step="any" placeholder="Pago en efectivo" class="input max-w-full input-enter" />
                    </div>
                    @error('ventaEspecial.pago_efectivo')<span class="block text-sm mx-2 text-error">{{ $message }}</span>@enderror  
                </div>
                <div class="form-group">
                    <div class="form-field">
                        <label for="tarjeta" class="form-label font-bold">Tarjeta:</label>
                        <input id="tarjeta" wire:model="ventaEspecial.pago_tarjeta" type="number" step="any" placeholder="Pago con tarjeta" class="input max-w-full input-enter" />
                    </div>
                    @error('ventaEspecial.pago_tarjeta')<span class="block text-sm mx-2 text-error">{{ $message }}</span>@enderror  
                </div>
                <div class="form-group">
                    <div class="form-field">
                        <label for="pago_transferencia" class="form-label font-bold">Transferencia:</label>
                        <input id="pago_transferencia" wire:model="ventaEspecial.pago_transferencia" type="number" step="any" placeholder="Pago con transferencia" class="input max-w-full input-enter" />
                        @error('ventaEspecial.pago_transferencia')<span class="block text-sm mx-2 text-error">{{ $message }}</span>@enderror  
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-field">
                        <label for="vales" class="form-label font-bold">Tarjeta Vales:</label>
                        <input id="vales" wire:model="ventaEspecial.pago_vales" type="number" step="any" placeholder="Pago con tarjeta de vales" class="input max-w-full input-enter" />
                        @error('ventaEspecial.pago_vales')<span class="block text-sm mx-2 text-error">{{ $message }}</span>@enderror  
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-field">
                        <label for="nota_credito" class="form-label font-bold">Nota Credito:</label>
                        <input id="nota_credito" wire:model="ventaEspecial.nota_credito" type="number" step="any" placeholder="Pago con nota de credito" class="input max-w-full input-enter" />
                        @error('ventaEspecial.nota_credito')<span class="block text-sm mx-2 text-error">{{ $message }}</span>@enderror  
                    </div>
                </div>
            </div>

            
            <div class="flex gap-3 mt-2">
                <button id="btn-add" wire:click='agregar()' class="btn btn-primary btn-block">Agregar producto [F8]</button>
                <button wire:click="save()" class="btn btn-success btn-block">Guardar [F9]</button>
            </div>
        </div>
    </div>

    












    <input class="modal-state" wire:model.defer="modalPedido" id="modal-2" type="checkbox" />
    <div class="modal w-screen">
        <label class="modal-overlay" for="modal-2"></label>
        <div class="modal-content flex flex-col gap-2 max-w-5xl">
            <label for="modal-2" class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</label>
            
            <h3 class="font-bold text-lg">Registrar Pedido</h3>
                
            <h4>Datos del cliente</h4>
            <div class="border-b border-gray-400 w-full"></div>
            <div class="grid grid-cols-2 gap-2">
                <div class="form-group">
                    <div class="form-field">
                        <label for="cuenta-pedido" class="form-label font-bold">Cuenta:</label>
                        <input id="cuenta-pedido" wire:model="pedido.cuenta" type="text" placeholder="Cuenta usuario" class="input max-w-full"  />
                    </div>
                    @error('pedido.cuenta')<span class="block text-sm mx-2 text-error">{{ $message }}</span>@enderror  
                </div>

                <div class="form-group">
                    <div class="form-field">
                        <label for="telefono-pedido" class="form-label font-bold">Telefono:</label>
                        <input id="telefono-pedido" wire:model="pedido.telefono" type="text" maxlength="10" placeholder="Numero de telefono" class="input max-w-full"  />
                    </div>
                    @error('pedido.cuenta')<span class="block text-sm mx-2 text-error">{{ $message }}</span>@enderror  
                </div>
            </div>

            <div class="grid grid-cols-2 gap-2">

                <div class="form-group">
                    <div class="form-field">
                        <label for="folio_proveedor" class="form-label font-bold">Folio Proveedor:</label>
                        <input id="folio_proveedor" wire:model="pedido.folio_proveedor" type="text" placeholder="Folio Proveedor" class="input max-w-full input-enter" />
                    </div>
                    @error('pedido.folio_proveedor')<span class="block text-sm mx-2 text-error">{{ $message }}</span>@enderror  
                </div>
    
                <div class="form-group">
                    <div class="form-field">
                        <label for="numero_remision" class="form-label font-bold">Numero Remisión:</label>
                        <input id="numero_remision" wire:model="pedido.numero_remision" type="text" placeholder="Numero Remision" class="input max-w-full input-enter" />
                    </div>
                    @error('pedido.numero_remision')<span class="block text-sm mx-2 text-error">{{ $message }}</span>@enderror  
                </div>
            </div>

            <h4>Datos del vehiculo</h4>
            <div class="border-b border-gray-400 w-full"></div>
            <div class="grid grid-cols-4 gap-2">
                <div class="form-group">
                    <div class="form-field">
                        <label for="year-pedido" class="form-label font-bold">Año:</label>
                        <input id="year-pedido" wire:model="pedido.year" type="number" maxlength="4" placeholder="Año del vehiculo" class="input max-w-full" disabled />
                    </div>
                    @error('pedido.year')<span class="block text-sm mx-2 text-error">{{ $message }}</span>@enderror  
                </div>
                <div class="form-group">
                    <div class="form-field">
                        <label for="marca-pedido" class="form-label font-bold">Marca:</label>
                        <input id="marca-pedido" wire:model="pedido.marca" type="text" placeholder="Marca del vehiculo" class="input max-w-full" disabled />
                    </div>
                    @error('pedido.marca')<span class="block text-sm mx-2 text-error">{{ $message }}</span>@enderror  
                </div>
                <div class="form-group">
                    <div class="form-field">
                        <label for="modelo-pedido" class="form-label font-bold">Modelo:</label>
                        <input id="modelo-pedido" wire:model="pedido.modelo" type="text" placeholder="Modelo del vehiculo" class="input max-w-full" disabled/>
                        @error('pedido.modelo')<span class="block text-sm mx-2 text-error">{{ $message }}</span>@enderror  
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-field">
                        <label for="motor-pedido" class="form-label font-bold">Motor:</label>
                        <input id="motor-pedido" wire:model="pedido.motor" type="text" placeholder="Tamaño del motor" class="input max-w-full" disabled/>
                        @error('pedido.motor')<span class="block text-sm mx-2 text-error">{{ $message }}</span>@enderror  
                    </div>
                </div>
            </div>

            <div class="form-group">
                <div class="form-field">
                    <label for="comentarios" class="form-label font-bold">Comentarios:</label>
                    <textarea id="comentarios" wire:model="pedido.comentarios" type="text" placeholder="Registra el historial del pedido." class="textarea max-w-full input-enter" ></textarea>
                </div>
            </div>
            
            <h4>Pedido</h4>
            <div class="border-b border-gray-400 w-full"></div>
            <div>
            @isset($this->pedido)                
            @foreach ($this->pedido->productos as $key => $producto)
                
            <div class="flex gap-2 items-center">
                <div class="form-group">
                    <div class="form-field">
                        <label for="codigo-{{$key}}-pedido" class="form-label font-bold">Codigo:</label>
                        <input id="codigo-{{$key}}-pedido" value="{{$producto->codigo}}" type="text" placeholder="" class="input max-w-full" disabled/>
                    </div>
                </div>
                <div class="form-group col-span-3">
                    <div class="form-field">
                        <label for="descripcion-{{$key}}-pedido" class="form-label font-bold">Descripcion:</label>
                        <input id="descripcion-{{$key}}-pedido" value="{{$producto->descripcion}}" type="text" placeholder="" class="input max-w-full" disabled/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-field">
                        <label for="linea-{{$key}}-pedido" class="form-label font-bold">Linea:</label>
                        <input id="linea-{{$key}}-pedido" value="{{$producto->linea}}" type="text" maxlength="4" placeholder="" class="input max-w-full" disabled/>
                    </div>
                </div>
                <div class="form-group">
                    {{-- <div class="form-field">
                        <label for="prefijo-{{$key}}-pedido" class="form-label font-bold">Prefijo:</label>
                        <input id="prefijo-{{$key}}-pedido" value="{{$producto->prefijo}}" type="text" placeholder="" class="input max-w-full" disabled/>
                    </div> --}}
                    <div class="form-field">
                        <label for="prefijo-{{$key}}-pedido" class="form-label font-bold">Ruta:</label>
                        <input id="prefijo-{{$key}}-pedido" value="{{$producto->ruta->id}}" type="text" placeholder="" class="input max-w-full" disabled/>
                    </div>
                    {{-- <div class="form-group gap-1">
                        <label for="cantidad-{{$key}}" class="form-label font-bold">Ruta:</label>
                        <select class="select" wire:model="productos.{{$key}}.ruta_id">
                            <option value="">- Ruta -</option>
                            @foreach ($rutas as $ruta)
                                <option {{$ruta->id== $productos[$key]['ruta_id'] ?"selected":""}} value="{{$ruta->id}}">{{$ruta->prefijo}} - {{ $ruta->ruta }}</option>                            
                            @endforeach
                        </select>
                        @error("productos.{$key}.ruta_id")<span class="block text-xs mx-2 text-error">{{ $message }}</span>@enderror  
                    </div> --}}
                </div>
                <div class="form-group">
                    <div class="form-field">
                        <label for="cantidad-{{$key}}-pedido" class="form-label font-bold">Cantidad:</label>
                        <input id="cantidad-{{$key}}-pedido" value="{{$producto->pivot->unidades}}" type="text" placeholder="" class="input max-w-full" disabled />
                    </div>
                </div>
                <div class="form-group col-span-2">
                    <div class="form-field">
                        <label for="precio_unitario-{{$key}}-pedido" class="form-label font-bold">Precio Unitario:</label>
                        <input id="precio_unitario-{{$key}}-pedido" value="{{$producto->pivot->precio_unitario}}" type="text" placeholder="" class="input max-w-full" disabled />
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-field">
                        <label for="arrivo-{{$key}}-pedido" class="form-label font-bold">¿Arrivo Producto?:</label>
                        <input id="arrivo-{{$key}}-pedido" wire:model="productos.{{$key}}.is_arrivo" type="checkbox" class="checkbox checkbox-primary checkbox-bordered-primary mx-auto max-w-full"/>
                    </div>
                </div>
            </div>
            @endforeach
            @endisset
            <p class="font-bold text-lg text-right my-2 mx-2">SubTotal: <span class="font-normal">{{round($this->totalPagar - $this->IVA,2)}}</span></p>
            <p class="font-bold text-lg text-right my-2 mx-2">IVA 8%: <span class="font-normal">{{round($this->IVA,2)}}</span></p>
            <p class="font-bold text-lg text-right my-2 mx-2">Total a Pagar: <span class="font-normal">{{round($this->totalPagar,2)}}</span></p>
            </div>
            <div class="flex gap-3 mt-2">
                @if (!$this->pedido?->is_venta_cerrada)
                <button wire:click="cerrarVenta()" class="btn btn-primary btn-block">Cerrar Pedido [F7]</button>
                @endif
                @if (!$this->pedido?->is_venta_entregada)
                <button wire:click="entregarVenta()" class="btn btn-secondary btn-block">Entregar Pedido [F8]</button>
                @endif
                <button wire:click="saveArrivo()" class="btn btn-success btn-block">Guardar Pedido [F9]</button>
            </div>
        </div>
    </div>
</div>
