Sindbad~EG File Manager

<div>
	<div class="row">
	    <div class="col-md-12" align="center"><br><br>
	  		<h1 style="font-size: 5vw;">LOGROS OBTENIDOS</h1>
		</div>
	</div>
	<div class="row">
		@if(!$detalle)
			
			<div class="col-md-12" align="center">
				<div style="background-color: #fff;margin:5px;border-radius: 10px;">
					<div class="row">
						<div class="col-md-2">
							<img src="/frontend/12.png" width="100px">
						</div>
						<div class="col-md-2 d-flex align-items-center justify-content-center">
							<br><b style="color: #009fd9;">MONEDAS DISPONIBLES</b>
						</div>
						<div class="col-md-4">
							<div style="background-color: #009fd9;color:white;margin: 10px;padding: 10px;border-radius: 50px; ">
								<span style="font-size: 2vw;">{{ $monedasobtenidas-$monedasusadas }}</span>
							</div>
						</div>
						<div class="col-md-4">
							<a href="catalogo">
								<div style="background-color: #009fd9;color:white;margin: 10px;padding: 10px;border-radius: 50px;">
									<span style="font-size: 2vw;">IR AL CATALOGO</span>
								</div>
							</a>
						</div>
					</div>
				</div>
			</div> 
			<div class="col-md-12">
				<div style="background-color: white;margin:5px;border-radius: 10px;">
					<div class="row">
						<div class="col-md-4 d-flex align-items-center justify-content-center flex-column">
							<img src="/frontend/13.png" width="150px">
							<b style="color: #009fd9; font-size: 2vw;">MONEDAS DISPONIBLES</b>
						</div>
						<div class="col-md-8">
							<div class="row" style="background-color: #009fd9;color:white;border-radius: 10px;margin:10px;padding:10px">
								<div class="col-md-6" style="padding: 10px;" align="center">EDUCACION</div>
								<div class="col-md-6">
									@for($x=0; $x<$logroseducacion; $x++)
										<img src="/frontend/14.png" width="40px">
									@endfor
								</div>
								<div class="col-md-6" style="padding: 10px;" align="center">RESPONSABILIDAD SOCIAL</div>
								<div class="col-md-6">
									@for($x=0; $x<$logrosresponsabilidad; $x++)
										<img src="/frontend/14.png" width="40px">
									@endfor
								</div>
								<div class="col-md-6" style="padding: 10px;" align="center">CULTURA SOCIAL</div>
								<div class="col-md-6">
									@for($x=0; $x<$logroscultura; $x++)
										<img src="/frontend/14.png" width="40px">
									@endfor
								</div>
								<div class="col-md-6" style="padding: 10px;" align="center">SALUD</div>
								<div class="col-md-6">
									@for($x=0; $x<$logrossalud; $x++)
										<img src="/frontend/14.png" width="40px">
									@endfor
								</div> 
								<div class="col-md-6" style="padding: 10px;" align="center">NUEVA CATEGORÍA</div>
								<div class="col-md-6">
									@for($x=0; $x<$logrosnueva; $x++)
										<img src="/frontend/14.png" width="40px">
									@endfor
								</div> 
							</div>
						</div>
					</div>
					<br>
				</div>
			</div>
			<div class="col-md-12" align="center"><br>
				<button class="btn" style="background-color: #009fd9; color: white;" wire:click="detalle()">IR AL DETALLE</button>  <br><br>
			</div>
		@else
			<div class="col-md-12" align="center">
				<button class="btn" style="background-color: #009fd9; color: white;"  wire:click="detalle()">LOGROS</button><hr>
			</div>
			<div class="col-md-12" style="background-color: white;border-radius: 10px;padding: 10px;">
				<table class="table">
					<thead class="thead-dark">
						<tr>
							<th scope="col">Nº</th>
							<th scope="col">Misión</th>
							<th scope="col">Monedas</th>
							<th scope="col">Comentario</th>
						</tr>
					</thead> 
					<tbody>
						@foreach($detalles as $det)
							<tr>
								<td>{{$det->id}}</td>
								<td>{{$det->titulo}}</td>
								<td>{{$det->monedas}}</td>
								<td><?= $det->descripcion ?></td>
							</tr>
						@endforeach
					</tbody>
				</table>
			</div>
		@endif
	</div>
</div>