<div>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Cancelacion') }}
        </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 cancelacion</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">
                <div class="overflow-x-auto">
                    <table class="table table-hover table-zebra">
                      <thead>
                        <tr class="text-neutral">
                          <th>Codigo</th>
                          <th>Retorno de efectivo</th>
                          <th>Motivo</th>
                          <th>Registrado por</th>
                          <th>Fecha</th>
                          @role('admin')<th>Acciones</th>@endrole
                        </tr>
                      </thead>
                      <tbody>
                        @forelse ($cancelaciones  as $cancelacion )
                            <tr>
                                <th>{{$cancelacion->codigo}}</th>
                                <th>{{$cancelacion->pago_efectivo}}</th>
                                <th>{{$cancelacion->motivo}}</th>
                                <th>{{$cancelacion->user->name}}</th>
                                <th>{{$cancelacion->created_at}}</th>
                                @role('admin') 
                                <th>
                                    <button wire:click="editDate({{ $cancelacion->id }})" class="btn btn-sm btn-primary">Editar Fecha</button>
                                    <button wire:click="delete({{ $cancelacion->id }})" class="btn btn-sm btn-error">Eliminar</button>
                                </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 cancelaciones registradas en el sistema.</span>
                            </div>
                        
                        @endforelse
                    </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 Cancelacion</h3>

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

            <div class="form-group">
                <div class="form-field">
                    <label for="motivo" class="form-label font-bold">Motivo:</label>
                {{-- <input id="motivo" wire:model="cancelacion.motivo" type="text" placeholder="Motivo de cancelacion" class="input max-w-full" /> --}}
                <textarea  id="motivo" wire:model="cancelacion.motivo" class="textarea-block textarea input-enter" placeholder="Motivo de cancelacion" ></textarea>
                </div>
            </div>
            @error('cancelacion.motivo')<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="modalDate" 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">Cambiar Fecha de Cancelacion</h3>

            <div class="form-group">
                <div class="form-field">
                    <label for="fecha" class="form-label font-bold">Fecha Cancelacion:</label>
                    <input id="fecha" wire:model="created_at" type="datetime-local" placeholder="Fecha Cancelacion" 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>
