<div>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Ventas Especiales') }}
        </h2>
    </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 venta especial</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 codigo" 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
            <div class="bg-white text-neutral overflow-hidden shadow-xl sm:rounded-lg p-1">
                <div class="overflow-x-auto">
                    <table class="table table-zebra mb-4">
                      <!-- head -->
                      <thead>
                        <tr class="text-neutral">
                          <th>Codigo</th>
                          <th>Pago Efectivo</th>
                          <th>Pago Tarjeta</th>
                          <th>Pago Tarjeta Vales</th>
                          <th>Pago Nota Credito</th>
                          <th>Pago Transferencia</th>
                          <th>Total a pagar</th>
                          <th>Registrado por</th>
                          <th>Fecha</th>
                          <th>Acciones</th>
                        </tr>
                      </thead>
                      <tbody>
                        @forelse ($ventas as $venta)
                            <th>{{ $venta->codigo }}</th>
                            <th>{{ $venta->pago_efectivo }}</th>
                            <th>{{ $venta->pago_tarjeta }}</th>
                            <th>{{ $venta->pago_vales }}</th>
                            <th>{{ $venta->nota_credito }}</th>
                            <th>{{ $venta->pago_transferencia }}</th>
                            <th>{{ $venta->precio_venta }}</th>
                            <th>{{ $venta->user->name }}</th>
                            <th>{{ $venta->created_at }}</th>
                            <th>
                                @if ($venta->is_liquidado)
                                Liquidado
                                @else
                                    <button wire:click="liquidar({{ $venta->id }})" class="btn btn-sm btn-secondary">Liquidar</button>
                                @endif
                                @role('admin') 
                                    <button wire:click="editDate({{ $venta->id }})" class="btn btn-sm btn-primary">Editar Fecha</button>
                                    <button wire:click="delete({{ $venta->id }})" class="btn btn-sm btn-error">Eliminar</button> 
                                @endrole
                            </th>
                            </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 ventas registradas en el sistema.</span>
                            </div>
                        @endforelse
                        </tbody>
                    </table>
                    {{$ventas->links()}}
                </div>

            </div>
        </div>
    </div>
    
    <input class="modal-state" wire:model.defer="modal" id="modal-1" type="checkbox" />
    <div class="modal">
        <label class="modal-overlay" for="modal-1"></label>
        <div class="modal-content flex flex-col gap-5 max-w-md w-1/2">
            <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 Venta Especial</h3>

            <div class="form-group">
                <div class="form-field">
                    <label for="codigo" class="form-label font-bold">Codigo:</label>
                    <input id="codigo" wire:model="ventaEspecial.codigo" type="text" placeholder="Codigo de venta o folio" class="input max-w-full input-enter" />
                </div>
            </div>
            @error('ventaEspecial.codigo')<span class="block text-sm mx-2 text-error">{{ $message }}</span>@enderror  

            <div class="form-group">
                <div class="form-field">
                    <label for="vales" class="form-label font-bold">Precio Total:</label>
                <input id="vales" wire:model="ventaEspecial.precio_venta" type="number" step="any" placeholder="Pago con tarjeta de credito" class="input max-w-full input-enter" />
                </div>
            </div>
            @error('ventaEspecial.precio_venta')<span class="block text-sm mx-2 text-error">{{ $message }}</span>@enderror 

            <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>
            </div>
            @error('ventaEspecial.pago_efectivo')<span class="block text-sm mx-2 text-error">{{ $message }}</span>@enderror  

            <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 de debito" class="input max-w-full input-enter" />
                </div>
            </div>
            @error('ventaEspecial.pago_tarjeta')<span class="block text-sm mx-2 text-error">{{ $message }}</span>@enderror  

            <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" />
                </div>
            </div>
            @error('ventaEspecial.pago_transferencia')<span class="block text-sm mx-2 text-error">{{ $message }}</span>@enderror 

            <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 credito" class="input max-w-full input-enter" />
                </div>
            </div>
            @error('ventaEspecial.pago_vales')<span class="block text-sm mx-2 text-error">{{ $message }}</span>@enderror 
            
            <div class="form-group">
                <div class="form-field">
                    <label for="vales" class="form-label font-bold">Nota Credito:</label>
                <input id="vales" wire:model="ventaEspecial.nota_credito" type="number" step="any" placeholder="Pago con nota de credito" class="input max-w-full input-enter" />
                </div>
            </div>
            @error('ventaEspecial.nota_credito')<span class="block text-sm mx-2 text-error">{{ $message }}</span>@enderror 

            <div class="flex gap-3">
                <button wire:click="save()" class="btn btn-success btn-block">Guardar</button>
            </div>
        </div>
    </div>

    <input class="modal-state" wire:model.defer="modalLiquidar" id="modal-2" type="checkbox" />
    <div class="modal">
        <label class="modal-overlay" for="modal-2"></label>
        <div class="modal-content flex flex-col gap-5 max-w-md w-1/2">
            <label for="modal-2" class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</label>
            
            <h3 class="font-bold text-lg">Liquidar Venta Especial</h3>
            <div class="flex gap-5 justify-center">
                <h4 class="font-bold text-sm">Saldo abonado: <span class="text-success">{{ $abonado }}</span></h4>
                <h4 class="font-bold text-sm"></span></h4>
            </div>

            <div class="flex gap-5 justify-evenly">
                <h4 class="font-bold text-sm">Cambio: <span class="text-success">{{ $cambio }}</span></h4>
                <h4 class="font-bold text-sm">Saldo a pagar: <span class="text-error">{{ $faltante }}</span></h4>
            </div>

            <div class="form-group">
                <div class="form-field">
                    <label for="codigo" class="form-label font-bold">Codigo:</label>
                    <input disabled id="codigo" wire:model="ventaEspecial.codigo" type="text" placeholder="Codigo de venta o folio" class="input max-w-full input-enter" />
                </div>
            </div>
            @error('ventaEspecial.codigo')<span class="block text-sm mx-2 text-error">{{ $message }}</span>@enderror  

            <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>
            </div>
            @error('ventaEspecial.pago_efectivo')<span class="block text-sm mx-2 text-error">{{ $message }}</span>@enderror  

            <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>
            </div>
            @error('ventaEspecial.pago_tarjeta')<span class="block text-sm mx-2 text-error">{{ $message }}</span>@enderror  

            <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" />
                </div>
            </div>
            @error('ventaEspecial.pago_transferencia')<span class="block text-sm mx-2 text-error">{{ $message }}</span>@enderror  

            <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 credito" class="input max-w-full input-enter" />
                </div>
            </div>
            @error('ventaEspecial.pago_vales')<span class="block text-sm mx-2 text-error">{{ $message }}</span>@enderror 
            
            <div class="form-group">
                <div class="form-field">
                    <label for="n-credito" class="form-label font-bold">Nota Credito:</label>
                <input id="n-credito" wire:model="ventaEspecial.nota_credito" type="number" step="any" placeholder="Pago con nota de credito" class="input max-w-full input-enter" />
                </div>
            </div>
            @error('ventaEspecial.nota_credito')<span class="block text-sm mx-2 text-error">{{ $message }}</span>@enderror 

            <div class="form-group">
                <div class="form-field">
                    <label for="vales" class="form-label font-bold">Precio Total:</label>
                <input id="vales" disabled wire:model="ventaEspecial.precio_venta" type="number" step="any" placeholder="Pago con tarjeta de credito" class="input max-w-full input-enter" />
                </div>
            </div>
            @error('ventaEspecial.precio_venta')<span class="block text-sm mx-2 text-error">{{ $message }}</span>@enderror 
            @if (session()->has('message_abono'))
                <span class="block text-lg mx-auto text-error">{{ session('message_abono') }}</span>
            @endif
            @if (session()->has('error'))
                <span class="block text-lg mx-auto text-error">{{ session('error') }}</span>
            @endif
            <div class="flex gap-3">
                <button wire:click="saveLiquidar()" class="btn btn-success btn-block">Guardar</button>
            </div>
        </div>
    </div>

    <input class="modal-state" wire:model.defer="modalDate" id="modal-3" type="checkbox" />
    <div class="modal">
        <label class="modal-overlay" for="modal-3"></label>
        <div class="modal-content flex flex-col gap-5 max-w-md w-1/2">
            <label for="modal-3" class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</label>
            
            <h3 class="font-bold text-lg">Cambiar Fecha de Venta Especial</h3>

            <div class="form-group">
                <div class="form-field">
                    <label for="fecha" class="form-label font-bold">Fecha Venta Especial:</label>
                    <input id="fecha" wire:model="created_at" type="datetime-local" placeholder="Fecha venta especial" class="input max-w-full input-enter" />
                </div>
            </div>
            @error('created_at')<span class="block text-sm mx-2 text-error">{{ $message }}</span>@enderror  

            <div class="flex gap-3">
                <button wire:click="saveDate()" class="btn btn-success btn-block input-enter">Guardar</button>
            </div>
        </div>
    </div>
</div>
