@extends('layouts.frontend')
@section('contenido')
    <?php
        use App\Models\Modal;
        $popup=Modal::all();
    ?>
    <style>
        .ocultar{
            display: none !important;
        }
        .principal {
            background-color: rgb(255, 255, 255,0.7);
            border-radius: 10px;
            padding: 40px;
            margin-bottom: 20px;
        }
    </style>
    <nav class="navbar navbar-expand-sm navbar-light" >
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" style="border-color: white;">
            <i class="fa fa-bars" style="color:white;"></i>
        </button>
        <div class="collapse navbar-collapse navbar-right" style="position: absolute;top:20px;right: 0px;z-index:100" id="collapsibleNavbar">
            <ul class="navbar-nav menu">
                @if (Auth::check())
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            {{Auth::user()->name}}
                        </a>
                        <div class="dropdown-menu" style="background-color: #ccd7ed !important;" aria-labelledby="navbarDropdown">
                            @if (Auth::user()->nivel == 1)
                                <a class="dropdown-item ocultar" style="background-color: #ccd7ed !important; color: #003aa9 !important;" href="{{ url('/dashboard') }}">
                                    <b>Panel de Control</b>
                                </a>
                                <!--<div class="dropdown-divider ocultar"></div> -->
                            @endif
                            <a class="dropdown-item ocultar" style="background-color: #ccd7ed !important; color: #003aa9 !important;" href="/miperfil">
                                <b>Mi Perfil</b>
                            </a>
                            <!-- <div class="dropdown-divider ocultar"></div>
                                <a class="dropdown-item ocultar" style="background-color: #ccd7ed !important;" href="/missolicitudes">
                                Mis Solicitudes
                            </a>-->
                            <!-- <div class="dropdown-divider ocultar"></div> -->
                            <a class="dropdown-item" style="background-color: #ccd7ed !important; color: #003aa9 !important;" href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                                <b>Cerrar Sesión</b>
                            </a>
                            <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                                {{ csrf_field() }}
                            </form>
                        </div>
                    </li>
                @else
                    <li class="nav-item">
                        <a href="{{ url('/login') }}" class="nav-link inicio">Ingresar</a>
                    </li>
                @endif
            </ul>
        </div>
    </nav>
    <div class="row">
        @include('efecto.index')
        <div class="col-md-12" align="center">
            <h1 style="font-size: 42px;">¡Bienvenidos al Portal de Xfácil!</h1>
        </div>
        <div class="col-lg-4" align="center">
            <a href="https://itae.metiri.la/metiri/portal/index.php?portcod=14"><div class="principal" align="center">
                <h1 style="color:black !important;">PORTAL DE INFORMACIONES</h1>
                <img src="imgsystem/portal-informaciones.png" alt="logo" height="120px" >
            </div></a>
        </div>
        <div class="col-lg-4" align="center">
            <a href="/xfacil">
                <div class="principal" align="center">
                    <h1 style="color:black !important;">GAMIFICACIÓN</h1>
                    <img src="imgsystem/desafio.png" alt="logo" height="120px" >
                </div>
            </a>
        </div>
        <div class="col-lg-4" align="center">
            <a href="/e-learning"><div class="principal" align="center">
                <h1 style="color:black !important;">APRENDIZAJE VIRTUAL</h1>
                <img src="imgsystem/elearning.png" alt="logo" height="120px" >
            </div></a>
        </div>
    </div>
    @foreach($popup as $pop)
        <div class="modal fade" id="modal{{$pop->id}}" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">{{$pop->nombre}}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body" align="center">
                        @if($pop->tipo == 'imagen')
                            <img src="{{ asset('modal/'.$pop->enlace) }}" width="100%"><br>
                        @elseif($pop->tipo == 'video')
                            <video src="{{ asset('modal/'.$pop->enlace) }}" controls width="100%"></video><br>
                        @endif
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                    </div>
                </div>
            </div>
        </div>
        <script>
            $('#modal{{$pop->id}}').modal('show')
        </script>
    @endforeach

@stop