<div>
	<div class="row justify-content-center align-items-center minh-100">

		<div class="col-md-12">
			<div class="row" style="background-color: rgba(243, 120, 53, 0.6);padding: 20px;">
				<div class="col-md-12" align="right">
					<h1 style="font-family:  Aldo the Apache;font-size: 5vw;">
						MISIONES <br> DISPONIBLES
					</h1>
				</div>
			</div><br>
		</div>
		@if($MisionMode)
			<div class="col-md-12">
				<div class="form-group"> 
				    <label for="exampleFormControlSelect1"><b>Seleccione año</b></label>
				    <select class="form-control" id="exampleFormControlSelect1" wire:model="anho">
						@for($i = 2019; $i <= $anho; $i++)
				    		<option value="{{$i}}" {{ $anho == $i ? 'selected="selected"' : '' }}>{{$i}}</option>
						@endfor
				    </select>
				</div>
			</div>
			@php
				$meses = array("Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Setiembre", "Octubre", "Noviembre", "Diciembre");
				$contador=01;
			@endphp

			@foreach ($meses as $element)
				<button wire:click="selectmes({{ $contador }})"><div class="col-md-3 misiones" style="margin: 10px;">
					<div class="row" style="background-color: black;padding: 5px;cursor: pointer;">
						<div class="col-9" style="color: white">
							<p><b>{{ $element }}</b></p>
						</div>
						<div class="col-3" style="color: red;text-align: center;">
							<b>+</b>
						</div>
					</div>
				</div></button>
				@php
					$contador+=1;
				@endphp
			@endforeach
			<button class="btn btn-success" wire:click="selectmes('3')">aqui</button>
		@else
			@foreach ($misiones as $value)
				<div class="col-md-5 misiones" style="margin: 10px;" data-toggle="modal" data-target="#exampleModal{{ $value->id }}">
					<div class="row" style="background-color: black;padding: 5px;cursor: pointer;">
						<div class="col-9" style="color: white">
							<p><b>{{ $value->titulo }}</b></p>
						</div>
						<div class="col-3" style="color: red;text-align: center;">
							<b>+</b>
						</div>
					</div>
				</div>

				<div class="modal fade" id="exampleModal{{ $value->id }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
				  	<div class="modal-dialog modal-lg" role="document">
				    	<div class="modal-content">
				      		<div class="modal-header">
				        		<h5 class="modal-title" id="exampleModalLabel"><b>{{ $value->titulo }}</b>   <a href="evidencias/create/{{ $value->id }}"><button class="btn btn-success btn-sm">Subir evidencia</button></a></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>Puntos:</b> {{number_format($value->puntos, 0, '', '.')}}</p>
				        		@if ($value->puntos_extras != 0)
				        			<p><b>Puntos extras:</b> {{number_format($value->puntos_extras, 0, '', '.')}}</p>
				        		@endif
				        		<p><b>Fecha límite:</b> {{ $value->fecha_limite }}</p>
				        		<p><b>Información:</b></p>
				        		<?= $value->descripcion ?>
				      		</div>
				      		<div class="modal-footer">
						        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
				      		</div>
				    	</div>
				  	</div>
				</div>
			@endforeach
		@endif
	</div>
</div>