<div>
    <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-responsive">
		    <table class="table table-striped" id="example">
		        <thead>
		            <tr>
		                <th>ID</th>
		                <th>Desafío</th>
		                <th>Moneda</th>
		                <th>Categoria</th>
						<th>Fechas</th>
		                <th>Acciones</th> 
		            </tr>
		        </thead>
		        <tbody>
		            @foreach($desafios as $value)
		            <tr>
		                <td>{{ $value->id }}</td>
		                <td>{{ $value->titulo }}</td>
		                <td>{{ $value->moneda }}</td>
		                <td>
		                	@if($value->tipo == 1)
		                		Educación
		                	@elseif($value->tipo == 2)
		                		Salud
		                	@elseif($value->tipo == 3)
		                		Responsabilidad Social
		                	@elseif($value->tipo == 4)
		                		Cultura Itae
		                	@endif
		                </td>
						<td>
							<b>Inicio: </b>{{ $value->fecha_inicio }}<br>
							<b>Fin: </b>{{ $value->fecha_limite }}
						</td>
		                <td>
		                	<button class="btn btn-success btn-sm" wire:click="edit({{ $value->id }})" data-toggle="modal" data-target="#exampleModalleer"><i class="fas fa-eye"></i></button>
			                <a href="{{ url('/admin/desafioindividual/'.$value->id.'/edit') }}"><button class="btn btn-primary btn-sm"><i class="fas fa-edit"></i></button></a>
			                <button type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#exampleModal{{ $value->id }}"><i class="fas fa-trash-alt"></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">Eliminar Desafio</h5>
							        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
							          <span aria-hidden="true">&times;</span>
							        </button>
							      </div>
							      <div class="modal-body">
							        <p>¿Realmente quiere eliminar el desafío {{ $value->titulo }}?</p>
							      </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">Eliminar</button>
							      </div>
							    </div>
							  </div>
							</div>
		                </td>
		            </tr>
		            @endforeach
		        </tbody>
		    </table>
		</div>
	</div>
	<div class="col-12">
	    @if($desafios->count())
	        	{{ $desafios->links() }} 
	    @else
	        	No hay resultados para la búsqueda "{{ $buscar }}"
	    @endif
	</div>
	<!-- Modal -->
	<div class="modal fade" id="exampleModalleer" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	  	<div class="modal-dialog" role="document">
	    	<div class="modal-content">
	    		@if($encabezado)
		      		<div class="modal-header">
		        		<h5 class="modal-title" id="exampleModalLabel">Desafío</h5>
	        			<button type="button" class="close" data-dismiss="modal" aria-label="Close">
	          				<span aria-hidden="true">&times;</span>
	        			</button>
		      		</div>
		      		<div class="modal-body">
		        		<p><b>Desafío: </b>{{ $encabezado->titulo }}</p>
		        		<p><b>Descripción: </b></p>
		        		<?= $encabezado->descripcion ?>
		        		<p><b>Monedas: </b>{{ $encabezado->moneda }}</p>
		        		<p><b>Reconocimiento: </b>{{ $encabezado->reconocimiento }}</p>
		        		<p><b>Insignia: </b><img src="/imgsystem/insignia/{{ $encabezado->insignia }}" width="30px"></p>
		        		<p><b>Categoria: </b>
		        			@if($encabezado->tipo == 1)
		                		Educación
		                	@elseif($encabezado->tipo == 2)
		                		Salud
		                	@elseif($encabezado->tipo == 3)
		                		Responsabilidad Social
		                	@elseif($encabezado->tipo == 4)
		                		Cultura Itae
		                	@endif
		        		</p>
		        		<p><b>Desafio inicia el: </b>{{ $encabezado->fecha_inicio }}</p>
						<p><b>Desafio finaliza el: </b>{{ $encabezado->fecha_limite }}</p>
		        		<p><b>Usuarios Matriculados: </b></p>
		        		<ul>
		        			@foreach ($usuarios as $element)
		        				<li>{{ $element->name }}</li>
		        			@endforeach
		        		</ul>
		      		</div>
		      		<div class="modal-footer">
				        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
		      		</div>
		      	@endif
	    	</div>
	  	</div>
	</div>
</div>