@extends('layouts.frontend') @section('contenido')
    <style>
        body {
			background: url(/gamificacion/frontend/fondoprincipal.jpg) no-repeat center center fixed;
			-webkit-background-size: cover;
			-moz-background-size: cover;
			-o-background-size: cover;
			background-size: cover;
		}
    </style>
        <?php
            use App\Models\Modal;
            $popup=Modal::first();
        ?>
        <livewire:navbar></livewire:navbar>
        <div class="container">
            @if(!Auth::check())
                <style>
                    body {
                        background: url(/gamificacion/frontend/fondoprincipal.jpg) no-repeat center center fixed !important;
                        -webkit-background-size: cover;
                        -moz-background-size: cover;
                        -o-background-size: cover;
                        background-size: cover;
                    }
                </style>
                <div class="row justify-content-center align-items-center minh-100">
                    <div class="col-lg-12" align="center" style="position:relative"><br><br>
                        <img class="preloader" src="/gamificacion/frontend/1.png" alt="logo" width="30%">
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12" align="center">
                        <h1 style="font-size: 5vw; color: #FF0000 !important;">En Proceso de Actualización</h1>
                    </div>
                </div>
            @else
                <div class="row justify-content-center align-items-center minh-100">
                    <div class="col-lg-12" align="center" style="position:relative"><br><br>
                        <img class="preloader" src="/gamificacion/frontend/logo.png" alt="logo" width="50%">
                    </div>
                </div>
            @endif
        </div>
        @if($popup)
            @if($popup->estado == 1)
                <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">{{$popup->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($popup->tipo == 'imagen')
                                    <img src="{{ asset('modal/'.$popup->enlace) }}" width="100%"><br>
                                @elseif($popup->tipo == 'video')
                                    <video src="{{ asset('modal/'.$popup->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').modal('show')
                </script>
            @endif
        @endif
@stop