<div>
	<div class="row">
		@include('efecto.index')
		<div class="col-lg-12" align="center">
			<h1 style="font-size: 3vw;">MISIONES INDIVIDUALES</h1>
		</div>
		<div class="col-md-6">
			<div style="background-color: #fff;border-radius:10px;color:#31467E;padding: 30px;margin: 10px;cursor:pointer;" onclick="mostrar('educacion')">
				<div class="row">
					<div class="col-md-12" align="center">
						<img src="{{ asset('/frontend/8.png') }}" height="80px" alt="">
					</div>
					<div class="col-md-6">
						<br><b>EDUCACION</b>
					</div>
					<div class="col-md-6 text-right">
						<b style="font-size:32px;">+</b>
					</div>
				</div>
			</div>
			<div id="educacion" style="display:none;background-color: #fff;padding: 30px;margin: 10px;width: 100%;" class="todo">
				<div class="row">
					@php
						$activo=false;
					@endphp
					@foreach($educacion as $value)
						@php $activo=true; @endphp
						<div class="col-md-12" style="background-color: #8E8E8E;padding: 10px;margin: 5px;cursor:pointer;" data-toggle="modal" data-target="#exampleModalleer{{ $value->id }}">
							{{ $value->titulo }}
						</div>
						<!-- Modal -->
						<div class="modal fade" id="exampleModalleer{{ $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">Misión: {{ $value->titulo }}</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>Descripción: </b></p>
										<?= $value->descripcion ?>
										<p><b>Monedas: </b>{{ $value->moneda }}</p>
										<p><b>Reconocimiento: </b>{{ $value->reconocimiento }}</p>
										<p><b>Insignia: </b><img src="/imgsystem/insignia/{{ $value->insignia }}" width="30px"></p>
										<p><b>Categoria: </b>
											@if($value->tipo == 1)
												Educación
											@elseif($value->tipo == 2)
												Salud
											@elseif($value->tipo == 3)
												Responsabilidad Social
											@elseif($value->tipo == 4)
												Cultura XFACIL
											@endif
										</p>
										<p><b>Desafio inicia el: </b>{{ $value->fecha_inicio }}</p>
										<p><b>Desafio finaliza el: </b>{{ $value->fecha_limite }}</p>
									</div>
									<div class="modal-footer">
										<button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
										<a href="/evidenciaindividual/create/{{ $value->id }}"><button type="button" class="btn btn-success">Subir evidencia</button></a>
									</div>
								</div>
							</div>
						</div>
					@endforeach
					@if($activo == false)
						<div class="col-md-12">
							<p>No tiene misiones disponibles</p>
						</div>
					@endif
				</div>
			</div>
		</div>
		<div class="col-md-6">
			<div style="background-color: #fff;border-radius:10px;color:#31467E;padding: 30px;margin: 10px;cursor:pointer;" onclick="mostrar('salud')">
				<div class="row">
					<div class="col-md-12" align="center">
						<img src="{{ asset('/frontend/10.png') }}" height="80px" alt="">
					</div>
					<div class="col-md-6">
						<br><b>SALUD</b>
					</div>
					<div class="col-md-6 text-right">
						<b style="font-size:32px;">+</b>
					</div>
				</div>
			</div>
			<div id="salud" style="display:none;background-color: #fff;padding: 30px;margin: 10px;width: 100%;" class="todo">
				<div class="row">
					@php
						$activo=false;
					@endphp
					@foreach ($salud as $value)
						@php $activo=true; @endphp
						<div class="col-md-12" style="background-color: #8E8E8E;padding: 10px;margin: 5px;cursor:pointer;" data-toggle="modal" data-target="#exampleModalleer{{ $value->id }}">
							{{ $value->titulo }}
						</div>
						<!-- Modal -->
						<div class="modal fade" id="exampleModalleer{{ $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">Misión: {{ $value->titulo }}</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>Descripción: </b></p>
										<?= $value->descripcion ?>
										<p><b>Monedas: </b>{{ $value->moneda }}</p>
										<p><b>Reconocimiento: </b>{{ $value->reconocimiento }}</p>
										<p><b>Insignia: </b><img src="/imgsystem/insignia/{{ $value->insignia }}" width="30px"></p>
										<p><b>Categoria: </b>
											@if($value->tipo == 1)
												Educación
											@elseif($value->tipo == 2)
												Salud
											@elseif($value->tipo == 3)
												Responsabilidad Social
											@elseif($value->tipo == 4)
												Cultura XFACIL
											@endif
										</p>
										<p><b>Desafio inicia el: </b>{{ $value->fecha_inicio }}</p>
										<p><b>Desafio finaliza el: </b>{{ $value->fecha_limite }}</p>
									</div>
									<div class="modal-footer">
										<button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
										<a href="/evidenciaindividual/create/{{ $value->id }}"><button type="button" class="btn btn-success">Subir evidencia</button></a>
									</div>
								</div>
							</div>
						</div>
					@endforeach
					@if($activo == false)
						<div class="col-md-12">
							<p>No tiene misiones disponibles</p>
						</div>
					@endif
				</div>
			</div>
		</div>
		<div class="col-md-6">
			<div style="background-color: #fff;border-radius:10px;color:#31467E;padding: 30px;margin: 10px;cursor:pointer;" onclick="mostrar('responsabilidad')">
				<div class="row">
					<div class="col-md-12" align="center">
						<img src="{{ asset('/frontend/9.png') }}" height="80px" alt="">
					</div>
					<div class="col-md-6">
						<b>RESPONSABILIDAD SOCIAL</b>
					</div>
					<div class="col-md-6 text-right">
						<b style="font-size:32px;">+</b>
					</div>
				</div>
			</div>
			<div id="responsabilidad" style="display:none;background-color: #fff;padding: 30px;margin: 10px;width: 100%;" class="todo">
				<div class="row">
					@php
						$activo=false;
					@endphp
					@foreach ($responsabilidad as $value)
						@php $activo=true; @endphp
						<div class="col-md-12" style="background-color: #8E8E8E;padding: 10px;margin: 5px;cursor:pointer;" data-toggle="modal" data-target="#exampleModalleer{{ $value->id }}">
							{{ $value->titulo }}
						</div>
						<!-- Modal -->
						<div class="modal fade" id="exampleModalleer{{ $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">Misión: {{ $value->titulo }}</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>Descripción: </b></p>
										<?= $value->descripcion ?>
										<p><b>Monedas: </b>{{ $value->moneda }}</p>
										<p><b>Reconocimiento: </b>{{ $value->reconocimiento }}</p>
										<p><b>Insignia: </b><img src="/imgsystem/insignia/{{ $value->insignia }}" width="30px"></p>
										<p><b>Categoria: </b>
											@if($value->tipo == 1)
												Educación
											@elseif($value->tipo == 2)
												Salud
											@elseif($value->tipo == 3)
												Responsabilidad Social
											@elseif($value->tipo == 4)
												Cultura XFACIL
											@endif
										</p>
										<p><b>Desafio inicia el: </b>{{ $value->fecha_inicio }}</p>
										<p><b>Desafio finaliza el: </b>{{ $value->fecha_limite }}</p>
									</div>
									<div class="modal-footer">
										<button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
										<a href="/evidenciaindividual/create/{{ $value->id }}"><button type="button" class="btn btn-success">Subir evidencia</button></a>
									</div>
								</div>
							</div>
						</div>
					@endforeach
					@if($activo == false)
						<div class="col-md-12">
							<p>No tiene misiones disponibles</p>
						</div>
					@endif
				</div>
			</div>
		</div>
		<div class="col-md-6">
			<div style="background-color: #fff;border-radius:10px;color:#31467E;padding: 30px;margin: 10px;cursor:pointer;" onclick="mostrar('social')">
				<div class="row">
					<div class="col-md-12" align="center">
						<img src="{{ asset('/frontend/11.png') }}" height="80px" alt="">
					</div>
					<div class="col-md-6">
						<br><b>CULTURA XFACIL</b>
					</div>
					<div class="col-md-6 text-right">
						<b style="font-size:32px;">+</b>
					</div>
				</div>
			</div>
			<div id="social" style="display:none;background-color: #fff;padding: 30px;margin: 10px;width: 100%;" class="todo">
				<div class="row">
					@php
						$activo=false;
					@endphp
					@foreach ($social as $value)
						@php $activo=true; @endphp
						<div class="col-md-12" style="background-color: #8E8E8E;padding: 10px;margin: 5px;cursor:pointer;" data-toggle="modal" data-target="#exampleModalleer{{ $value->id }}">
							{{ $value->titulo }}
						</div>
						<!-- Modal -->
						<div class="modal fade" id="exampleModalleer{{ $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">Misión: {{ $value->titulo }}</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>Descripción: </b></p>
										<?= $value->descripcion ?>
										<p><b>Monedas: </b>{{ $value->moneda }}</p>
										<p><b>Reconocimiento: </b>{{ $value->reconocimiento }}</p>
										<p><b>Insignia: </b><img src="/imgsystem/insignia/{{ $value->insignia }}" width="30px"></p>
										<p><b>Categoria: </b>
											@if($value->tipo == 1)
												Educación
											@elseif($value->tipo == 2)
												Salud
											@elseif($value->tipo == 3)
												Responsabilidad Social
											@elseif($value->tipo == 4)
												Cultura XFACIL
											@endif
										</p>
										<p><b>Desafio inicia el: </b>{{ $value->fecha_inicio }}</p>
										<p><b>Desafio finaliza el: </b>{{ $value->fecha_limite }}</p>
									</div>
									<div class="modal-footer">
										<button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
										<a href="/evidenciaindividual/create/{{ $value->id }}"><button type="button" class="btn btn-success">Subir evidencia</button></a>
									</div>
								</div>
							</div>
						</div>
					@endforeach
					@if($activo == false)
						<div class="col-md-12">
							<p>No tiene misiones disponibles</p>
						</div>
					@endif
				</div>
			</div>
		</div>
	</div>
	<script>
		function mostrar(campo) {
			$(".todo").css("display", "none");
			$("#"+campo).css("display", "inline-block");
		}
	</script>
</div>