<div>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Reportes') }}
        </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 items-start gap-2">
                <div class="flex gap-3">
                    <div class="form-group">
                        <div class="form-field items-center flex-row">
                            <label for="fecha_inicio" class="form-label font-bold w-36">Fecha Inicial:</label>
                            <input id="fecha_inicio" wire:model="fecha_inicio" type="date" placeholder="Codigo de venta o folio" class="input max-w-full" />
                        </div>
                        @error('fecha_inicio')<span class="block text-sm mx-2 text-error">{{ $message }}</span>@enderror  
                    </div>
                    <div class="form-group">
                        <div class="form-field items-center flex-row">
                            <label for="fecha_final" class="form-label font-bold w-32">Fecha Final:</label>
                            <input id="fecha_final" wire:model="fecha_final" type="date" placeholder="Codigo de venta o folio" class="input max-w-full" />
                        </div>
                        @error('fecha_final')<span class="block text-sm mx-2 text-error">{{ $message }}</span>@enderror  
                    </div>
                </div>
                <button wire:click="export()" class="btn btn-sm btn-primary">Generar Reporte</button>
            </div>
            <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>Codigo</th>
                          <th>Pago Efectivo</th>
                          <th>Pago Tarjeta</th>
                          <th>Pago Tarjeta Vales</th>
                          <th>Pago Transferencia</th>
                          <th>Suma Pagos</th>
                          <th>Total a pagar</th>
                          <th>Registrado por</th>
                          <th>Tipo Venta</th>
                          <th>Fecha</th>
                        </tr>
                      </thead>
                        <tbody>
                            @foreach ($movimientos as $movimiento)
                            <tr>
                                <th>{{ $movimiento->codigo }}</th>
                                <th>{{ $movimiento->pago_efectivo }}</th>
                                <th>{{ $movimiento->pago_tarjeta }}</th>
                                <th>{{ $movimiento->pago_vales }}</th>
                                <th>{{ $movimiento->pago_transferencia }}</th>
                                <th>{{ $movimiento->totalAbono() }}</th>
                                <th>{{ $movimiento->precio_venta }}</th>
                                <th>{{ $movimiento->user->name }}</th>
                                <th>{{ $movimiento->estadoMovimiento->nombre }}</th>
                                <th>{{ $movimiento->created_at }}</th>
                            </tr>
                        @endforeach
                        </tbody>
                </table>
                </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</h3>

            <div class="form-group">
                <div class="form-field">
                    <label for="codigo" class="form-label font-bold">Codigo:</label>
                    <input id="codigo" wire:model="venta.codigo" type="text" placeholder="Codigo de venta o folio" class="input max-w-full" />
                </div>
            </div>
            @error('venta.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="venta.pago_efectivo" type="number" step="any" placeholder="Pago en efectivo" class="input max-w-full" />
                </div>
            </div>
            @error('venta.pago_efectivo')<span class="block text-sm mx-2 text-error">{{ $message }}</span>@enderror  

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

            <div class="form-group">
                <div class="form-field">
                    <label for="credito" class="form-label font-bold">Tarjeta Credito:</label>
                <input id="credito" wire:model="venta.pago_tarjeta_credito" type="number" step="any" placeholder="Pago con tarjeta de credito" class="input max-w-full" />
                </div>
            </div>
            @error('venta.pago_tarjeta_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">Tarjeta Vales:</label>
                <input id="vales" wire:model="venta.pago_vales" type="number" step="any" placeholder="Pago con tarjeta de credito" class="input max-w-full" />
                </div>
            </div>
            @error('venta.pago_vales')<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>
</div>
