<div><br><br>
    <div class="card">
    	<div class="card-header">
		    <div class="col-12">
		  		<div class="form-group">
					<input wire:model="buscar" type="search" class="form-control" placeholder="Buscar" />
		  		</div>
		  	</div>
		</div>
		<div class="card-body">
		    <table class="table table-bordered">
		        <thead>
		            <tr>
		                <th>ID</th>
		                <th>Usuarios</th>
		                <th>Email</th>
		                <th>Puesto</th>
		                <th>Fecha de ingreso</th>
		                <th>Opciones</th>
		            </tr>
		        </thead>
		        <tbody>
		            @foreach($usuarios as $value)
			            <tr>
			                <td>{{ $value->id }}</td>
			                <td>{{ $value->name }}</td>
			                <td>{{ $value->email }}</td>
			                <td>{{ $value->puesto }}</td>
			                <td>{{ $value->ingreso }}</td>
			                <td>
			                	@if($value->estado == 1)
				                	<button type="button" class="btn btn-success btn-sm" data-toggle="modal" data-target="#exampleModal{{ $value->id }}"><i class="fas fa-user"></i></button>
				                @else
				                	<button type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#exampleModal{{ $value->id }}"><i class="fas fa-user-slash"></i></button>
				                @endif

				                <button type="button" wire:click="edit({{ $value->id }})" class="btn btn-info btn-sm" data-toggle="modal" data-target="#exampleModal-editar"><i class="fas fa-edit"></i></button>

								<!-- Modal -->
								<div class="modal fade" id="exampleModal{{ $value->id }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
								  	<div class="modal-dialog" role="document">
								    	<div class="modal-content">
								      		<div class="modal-header">
								        		<h5 class="modal-title" id="exampleModalLabel">
										        	@if($value->estado == 1)
									                	Bloquear acceso de usuario 
									                @else
									                	Activar acceso de usuario 
									                @endif
										        </h5>
										        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
										          	<span aria-hidden="true">&times;</span>
										        </button>
								      		</div>
											<div class="modal-body">
												@if($value->estado == 1)
													<p>¿Realmente quiere bloquear acceso del usuario: {{ $value->name }}?</p>
												@else
													<p>¿Realmente quiere activar acceso del usuario: {{ $value->name }}?</p>
												@endif
											</div>
								      		<div class="modal-footer">
								        		<button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
								        		<button type="button" wire:click="delete({{ $value->id }})" class="btn btn-danger" data-dismiss="modal">Confirmar</button>
								      		</div>
								    	</div>
								  	</div>
								</div>
			                </td>
			            </tr>
		            @endforeach
		        </tbody>
		    </table>
		</div>
    </div>
    <!-- Modal -->
	<div class="modal fade" wire:ignore.self id="exampleModal-editar" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	  	<div class="modal-dialog" role="document">
	    	<div class="modal-content">
		      	<div class="modal-header">
			        <h5 class="modal-title" id="exampleModalLabel">
			        	Editar usuario: {{ $name }}
			        </h5>
			        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
			          	<span aria-hidden="true">&times;</span>
			        </button>
		      	</div>
		      	<div class="modal-body">
		      		<div class="form-group">
				      	<label for="">Nombre y Apellido</label>
				        <input type="text" class="form-control" wire:model="name" required>
				        @error('name') <span class="text-danger">{{ $message }}</span>@enderror
				    </div>
				    <div class="form-group">
				      	<label for="">Cargo</label>
				        <input type="text" class="form-control" wire:model="puesto" required>
				        @error('puesto') <span class="text-danger">{{ $message }}</span>@enderror
				    </div>
				    <div class="form-group">
				      	<label for="">Fecha de ingreso</label>
				        <input type="date" class="form-control" wire:model="ingreso" required>
				        @error('ingreso') <span class="text-danger">{{ $message }}</span>@enderror
				    </div>
		      	</div>
		      	<div class="modal-footer">
			        <button type="button" wire:click="cancel()" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
			        <button type="button" wire:click.prevent="update()" class="btn btn-success">Confirmar</button>
		      	</div>
		    </div>
		</div>
	</div>
    <div class="col-12">
        @if($usuarios->count())
	        	{{ $usuarios->links() }}
	    @else
	        	No hay resultados para la búsqueda "{{ $buscar }}"
	    @endif
    </div>
</div>