Sindbad~EG File Manager

<div>
	<style>
		body {
			background-image: url('/frontend/misiones.png');
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
		}
		.cardpuntajes{
			background-color: white;
			border-radius: 25px;
			padding: 10px;
			border: 4px solid #c29e52;
		}
		.carousel-inner {
			padding: 30px; /* Ajusta el espacio interno */
			display: flex;
			justify-content: flex-start; /* Lleva todo a la derecha */
		}
		.carousel-item {
		transition: transform 0.5s ease; /* Transición suave */
		}
	</style>
	<div class="row">
		<div class="col-lg-6" style="text-align: left;">
			<h1 style="font-size: 3vw;">Misiones</h1>
			<h1 style="font-size: 3vw;">individuales</h1>
			<img src="/frontend/puntaje.png" alt="" style="width: 50%; display: block; margin: 0 auto;">
		</div>
		<div class="col-lg-6">
			<br><br><br><br>
			<div id="myCarousel" class="carousel slide" data-ride="carousel">
				<div class="carousel-inner">
					<!-- Cada "item" del carrusel contendrá 3 tarjetas -->
					<div class="carousel-item active">
						<div class="row">
							<!-- Tarjeta 1 -->
							<div class="col-md-3">
								<div style="border-radius:10px;color:white;padding: 30px;margin: 10px;cursor:pointer; animation: pulse 1.5s infinite;" onclick="mostrar('educacion')">
									<div class="row">
										<div class="col-md-12" align="center">
											<img src="{{ asset('/frontend/8.png') }}" height="120px" alt="">
										</div>
									</div>
								</div>
							</div>
							<!-- Tarjeta 2 -->
							<div class="col-md-3">
								<div style="border-radius:10px;color:white;padding: 30px;margin: 10px;cursor:pointer; animation: pulse 1.5s infinite;" onclick="mostrar('salud')">
									<div class="row">
										<div class="col-md-12" align="center">
											<img src="{{ asset('/frontend/10.png') }}" height="120px" alt="">
										</div>
									</div>
								</div>
							</div>
							<!-- Tarjeta 3 -->
							<div class="col-md-3">
								<div style="border-radius:10px;color:white;padding: 30px;margin: 10px;cursor:pointer; animation: pulse 1.5s infinite;" onclick="mostrar('responsabilidad')">
									<div class="row">
										<div class="col-md-12" align="center">
											<img src="{{ asset('/frontend/9.png') }}" height="120px" alt="">
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- Segundo grupo de 3 tarjetas -->
					<div class="carousel-item">
						<div class="row">
							<!-- Tarjeta 4 -->
							<div class="col-md-3">
								<div style="border-radius:10px;color:white;padding: 30px;margin: 10px;cursor:pointer; animation: pulse 1.5s infinite;" onclick="mostrar('social')">
									<div class="row">
										<div class="col-md-12" align="center">
											<img src="{{ asset('/frontend/11.png') }}" height="120px" alt="">
										</div>
									</div>
								</div>
							</div>
							<!-- Tarjeta 5 -->
							<div class="col-md-3">
								<div style="border-radius:10px;color:white;padding: 30px;margin: 10px;cursor:pointer; animation: pulse 1.5s infinite;" onclick="mostrar('nueva')">
									<div class="row">
										<div class="col-md-12" align="center">
											<img src="{{ asset('/frontend/new.png') }}" height="120px" alt="">
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- Controles del carrusel -->
				<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev" style="animation: heartbeat 1.5s infinite;">
					<img src="/frontend/prev.png" alt="Anterior" style="width: 40px;">
					<span class="sr-only">Anterior</span>
				</a>
				<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next" style="animation: heartbeat 1.5s infinite;">
					<img src="/frontend/next.png" alt="Siguiente" style="width: 40px;">
					<span class="sr-only">Siguiente</span>
				</a>
			</div>

			<style>
				@keyframes pulse {
					0% {
						transform: scale(1);
					}
					50% {
						transform: scale(1.02);
					}
					100% {
						transform: scale(1);
					}
				}
				@keyframes heartbeat {
					0%, 100% {
						transform: scale(1);
					}
					50% {
						transform: scale(1.2);
					}
				}
			</style>

			<!-- Contenido inferior -->
			<div id="educacion" style="display:none;background-color: #fff;padding: 15px;margin: 10px;width: 100%;border-radius: 25px;border: 4px solid #c29e52;" class="todo">
				<div class="row">
					@php
						$activo=false;
					@endphp
					@foreach($educacion as $value)
						@php $activo=true; @endphp
						<table class="table">
							<thead style="background-color: white; color: #c29e52;">
								<tr>
									<th>Mision Educación</th>
									<th>Puntos</th>
									<th>Obtenidos</th>
								</tr>
							</thead>
							<tbody>
								<tr style="background-color: #f0f0f0; color: black; cursor:pointer;" data-toggle="modal" data-target="#exampleModalleer{{ $value->id }}">
									<td>{{ $value->titulo }}</td>
									<td>{{ $value->moneda }}</td>
									<td>Obtenidos</td>
								</tr>
							</tbody>
						</table>
						<!-- 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">Desafío: {{ $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 Solar
											@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 de Educación</p>
						</div>
					@endif
				</div>
			</div>
			<!-- Contenido inferior -->
			<div id="salud" style="display:none;background-color: #fff;padding: 15px;margin: 10px;width: 100%;border-radius: 25px;border: 4px solid #c29e52;" class="todo">
				<div class="row">
					@php
						$activo=false;
					@endphp
					@foreach ($salud as $value)
						@php $activo=true; @endphp
						<table class="table">
							<thead style="background-color: white; color: #c29e52;">
								<tr>
									<th>Mision Salud</th>
									<th>Puntos</th>
									<th>Obtenidos</th>
								</tr>
							</thead>
							<tbody>
								<tr style="background-color: #f0f0f0; color: black; cursor:pointer;" data-toggle="modal" data-target="#exampleModalleer{{ $value->id }}">
									<td>{{ $value->titulo }}</td>
									<td>{{ $value->moneda }}</td>
									<td>Obtenidos</td>
								</tr>
							</tbody>
						</table>
						<!-- 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">Desafío: {{ $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 Solar
											@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 de Salud</p>
						</div>
					@endif
				</div>
			</div>
			<!-- Contenido inferior -->
			<div id="responsabilidad" style="display:none;background-color: #fff;padding: 15px;margin: 10px;width: 100%;border-radius: 25px;border: 4px solid #c29e52;" class="todo">
				<div class="row">
					@php
						$activo=false;
					@endphp
					@foreach ($responsabilidad as $value)
						@php $activo=true; @endphp
						<table class="table">
							<thead style="background-color: white; color: #c29e52;">
								<tr>
									<th>Mision Responsabilidad</th>
									<th>Puntos</th>
									<th>Obtenidos</th>
								</tr>
							</thead>
							<tbody>
								<tr style="background-color: #f0f0f0; color: black; cursor:pointer;" data-toggle="modal" data-target="#exampleModalleer{{ $value->id }}">
									<td>{{ $value->titulo }}</td>
									<td>{{ $value->moneda }}</td>
									<td>Obtenidos</td>
								</tr>
							</tbody>
						</table>
						<!-- 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">Desafío: {{ $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 Solar
											@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 de Responsabilidad</p>
						</div>
					@endif
				</div>
			</div>
			<!-- Contenido inferior -->
			<div id="social" style="display:none;background-color: #fff;padding: 15px;margin: 10px;width: 100%;border-radius: 25px;border: 4px solid #c29e52;" class="todo">
				<div class="row">
					@php
						$activo=false;
					@endphp
					@foreach ($social as $value)
						@php $activo=true; @endphp
						<table class="table">
							<thead style="background-color: white; color: #c29e52;">
								<tr>
									<th>Mision Cultutal</th>
									<th>Puntos</th>
									<th>Obtenidos</th>
								</tr>
							</thead>
							<tbody>
								<tr style="background-color: #f0f0f0; color: black; cursor:pointer;" data-toggle="modal" data-target="#exampleModalleer{{ $value->id }}">
									<td>{{ $value->titulo }}</td>
									<td>{{ $value->moneda }}</td>
									<td>Obtenidos</td>
								</tr>
							</tbody>
						</table>
						<!-- 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">Desafío: {{ $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 Solar
											@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 sociales disponibles</p>
						</div>
					@endif
				</div>
			</div>
			<!-- Contenido inferior -->
			<div id="nueva" style="display:none;background-color: #fff;padding: 15px;margin: 10px;width: 100%;border-radius: 25px;border: 4px solid #c29e52;" class="todo">
				<div class="row">
					@php
						$activo=false;
					@endphp
					@foreach ($nueva as $value)
						@php $activo=true; @endphp
						<table class="table">
							<thead style="background-color: white; color: #c29e52;">
								<tr>
									<th>Mision Nueva</th>
									<th>Puntos</th>
									<th>Obtenidos</th>
								</tr>
							</thead>
							<tbody>
								<tr style="background-color: #f0f0f0; color: black; cursor:pointer;" data-toggle="modal" data-target="#exampleModalleer{{ $value->id }}">
									<td>{{ $value->titulo }}</td>
									<td>{{ $value->moneda }}</td>
									<td>Obtenidos</td>
								</tr>
							</tbody>
						</table>
						<!-- 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">Desafío: {{ $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 Solar
											@elseif($value->tipo == 5)
												Nueva Categoría
											@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>