<div>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Usuarios') }}
        </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">Crear usuario</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 nombre" 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></th>
                          <th>Nombre</th>
                          <th>Correo</th>
                          <th>Creado</th>
                          <th>Acciones</th>
                        </tr>
                      </thead>
                      <tbody>
                        @forelse ($users as $user)
                            <th>{{ $user->id }}</th>
                            <th>{{ $user->name }}</th>
                            <th>{{ $user->email }}</th>
                            <th>{{ $user->created_at }}</th>
                            <th class="flex gap-2">
                                <button wire:click="edit({{$user->id}})" class="btn btn-secondary flex gap-1">
                                    <svg xmlns="http://www.w3.org/2000/svg" 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="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
                                    </svg>
                                    <span>
                                        Editar Usuario
                                    </span>                                      
                                </button>
                                
                            </th>
                            </tr>
                            @empty
                            {{$users->links()}}
                            <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 usuarios registradas en el sistema.</span>
                            </div>
                            @endforelse
                        </tbody>
                    </table>
                    {{$users->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</h3>

            <div class="form-group">
                <div class="form-field">
                    <label for="nombre" class="form-label font-bold">Nombre:</label>
                    <input id="nombre" wire:model.defer="user.name" type="text" placeholder="Nombre del usuario" class="input max-w-full" />
                </div>
            </div>
            @error('user.nombre')<span class="block text-sm mx-2 text-error">{{ $message }}</span>@enderror  

            <div class="form-group">
                <div class="form-field">
                    <label for="email" class="form-label font-bold">Usuario:</label>
                <input id="email" wire:model.defer="user.email" type="email" placeholder="correo@example.com" class="input max-w-full" />
                </div>
            </div>
            @error('user.email')<span class="block text-sm mx-2 text-error">{{ $message }}</span>@enderror  

            <div class="form-group">
                <div class="form-field">
                    <label for="password" class="form-label font-bold">Contraseña</label>
                <input id="password" wire:model.defer="password" type="password" placeholder="Contraseña" class="input max-w-full" />
                </div>
            </div>
            @error('password')<span class="block text-sm mx-2 text-error">{{ $message }}</span>@enderror  

            <div class="form-group">
                <div class="form-field">
                    <label for="role" class="form-label font-bold">Role</label>
                    <select id="role" wire:model="role_id" class="select max-w-full">
                        <option>Selecciona un Rol</option>
                        @foreach ($roles as $role)
                            <option value="{{ $role->id }}">{{ $role->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            @error('role_id')<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>
