@extends('layouts.evaluation')

@section('title')
    @lang('frontend.titles.evaluation')
@endsection

@section('content')
@include('frontend.content.modals.evaluation')
<nav class="navbar navbar-default navbar-fixed-top route-verq" data-ro="{{route('ver.quest')}}">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">
               <!-- @lang('frontend.titles.evaluation'): -->{{$screen->title}}
            </a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
            <!--<p class="navbar-text navbar-right">Tiempo restante: 01:32:27</p>-->
            <p class="navbar-text navbar-right">
            @if(!session('evaluation_result') || session('evaluation_result')['alert'] == "warning")
                @lang('frontend.titles.questions'): {{($screen->type == 1 OR $screen->type == 3)?count($questions):$number}}
            @endif
            </p>
            <!--<ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li class="dropdown-header">Nav header</li>
                        <li><a href="#">Separated link</a></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>-->
        </div><!--/.nav-collapse -->
    </div>
</nav>
<!-- Begin page content -->

@if($screen->type != 2 || (isset($flag) && $flag == 1))
<div class="backExam screen-{{$screen->id}}" data-id="{{$screen->id}}">
<div class="container" style="">
    <div class="col-xs-12 coverExam cover-{{$screen->id}} animated fadeInUp">
        <div class="col-xs-12 lazo">
            <img src="{{asset('assets/img/exams/cinta.png')}}">
            <p>
                @if($gender == 1)
                    @lang('frontend.titles.ready_male')
                @elseif ($gender == 2)
                    @lang('frontend.titles.ready_female')
                @else
                    @lang('frontend.titles.ready')
                @endif  

                
            </p>
        </div>
        <div class="hidden-xs col-sm-3 globes"><img src="{{asset('assets/img/exams/signos1.png')}}"></div>
        <div class="col-xs-12 col-sm-6 device">
            <img src="{{asset('assets/img/exams/cel-07.png')}}" alt="" class="only-portrait">
            <img src="{{asset('assets/img/exams/tablet.png')}}" alt="" class="only-landscape">
            <div class="col-xs-12">
                <div class="ok" onClick="starExam('{{$screen->id}}')">@lang('frontend.titles.letstar')</div>
            </div>
            <div class="col-xs-12">
                <div class="back" onClick="parent.prevSlide();rexam();">@lang('frontend.titles.seevideo')</div>
            </div>
        </div>
        <div class="hidden-xs col-sm-3 globes"><img src="{{asset('assets/img/exams/signos2.png')}}"></div>
    </div>
</div>
</div>
@endif
<div class="container @if($screen->type != 2) hidden @endif c-{{$screen->type}} exam-{{$screen->id}}">
    <div class="helptext">
        <p>Ajuste de texto</p>
        <span class="btn-increase ">+</span>
        <span class="btn-decrease ">-</span>
        <span class="btn-orig ">Restablecer</span>
    </div>
    <!--<div class="page-header welcomeExam">
        <h1>@lang('frontend.titles.welcomeExam')</h1>
    </div>-->
    <div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 quest-container @if(isset($flag) && $flag == 1) quest hidden @endif">
        @if(session('evaluation_result') && (session('evaluation_result')['alert'] == "danger" || session('evaluation_result')['alert'] == "success"))
            <div id="message" class="alert alert-{{ session('evaluation_result')['alert'] }} hidden">
                {{ session('evaluation_result')['message'] }}
            </div>
            <style>
                @media screen and (min-width: 768px) {
                    .modal-dialog {
                        width: 100%;
                        margin: 0px auto;
                    }
                }
            </style>
            @if(session('evaluation_result')['alert'] == "danger")
            <style>
                .quest,
                .quest-container{
                    transform: translateY(57%);
                }
            </style>
            <div class="col-sm-12 centered center">
                {{-- <div class="boton" onClick="window.location.href = '/courses-users/load-evaluation/{{$screen->id}}'">@lang('frontend.buttons.backExam')</div>
                <div class="boton" onClick="parent.prevSlide();rframe('{{$screen->id}}');">@lang('frontend.buttons.backExam')</div>--}}
                <div class="animated slideInDown  alert--modal " id="" tabindex="-1" role="" data-backdrop="">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header center centered">
                                <img src="{{asset('assets/img/icons/Bombillo2.png')}}">
                            </div>
                            <div class="modal-body" style="text-align:center;">
                                <h4 class="modal-title">@lang('frontend.titles.you_failed')</h4>
                                <div class="mtop-10" role="alert">
                                    <h3>@lang('frontend.messages.evaluation_failed')</h3>
                                    @if($readable_score)
                                    <h5 style="margin-bottom:10px">{{$readable_score}}</h5>
                                    @endif
                                    <h5>@lang('frontend.messages.you_efailed')</h5>
                                    <p class="alert_"></p>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <span type="button" class="boton" data-dismiss="modal" onClick="parent.prevSlide();rframe('{{$screen->id}}');">@lang('frontend.buttons.back')</span>
                            <!-- <span type="button" class="boton" data-dismiss="modal" >@lang('frontend.buttons.close')</span> -->
                            </div>
                        </div><!-- /.modal-content -->
                    </div><!-- /.modal-dialog -->
                </div><!-- /.modal -->
            </div>
            @else
                <style>
                    .quest,
                    .quest-container{
                        transform: translateY(57%);
                    }
                </style>
                <div class="col-sm-12 centered center">
                    {{-- <div class="boton" onClick="parent.nextSlide();rframe('{{$screen->id}}');">@lang('frontend.buttons.next')</div> --}}
                    <div class="animated slideInDown alert--modal " id="" tabindex="-1" role="" data-backdrop="">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header center centered">
                                    <img src="{{asset('assets/img/icons/Bombillo1.png')}}">
                                </div>
                                <div class="modal-body" style="text-align:center;">
                                    <h4 class="modal-title">@lang('frontend.titles.you_passed')</h4>
                                    <div class="mtop-10" role="alert">
                                        <h3>@lang('frontend.messages.evaluation_passed')</h3>
                                        @if($readable_score)
                                        <h5 style="margin-bottom:10px">{{$readable_score}}</h5>
                                        @endif
                                        <h5>@lang('frontend.messages.evaluation_passed_sub')</h5>
                                        <p class="alert_"></p>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <span type="button" class="boton" data-dismiss="modal" onClick="parent.nextSlide();rframe('{{$screen->id}}');">@lang('frontend.buttons.continue')</span>
                                </div>
                            </div><!-- /.modal-content -->
                        </div><!-- /.modal-dialog -->
                    </div><!-- /.modal -->
                </div>
                <script>parent.succesB();</script>
            @endif
            {{
                Session::forget('evaluation_result')
            }}
        @else

        <div class="page-header welcomeExam">
            <h3>@lang('frontend.titles.welcomeExam')</h3>
        </div>
            @if($screen->type == 1 || $screen->type == 3)
                @include('frontend.content.evaluation_forms.all_questions')
            @elseif($screen->type == 2)
                @include('frontend.content.evaluation_forms.one_question')
            @endif
        @endif
    </div>
</div>
</div>

<style>
    h4.modal-title{
        font-size: 22px;
    }
    .modal-body h3{
        font-size: 20px;
        margin-bottom: 10px;
    }
    .modal-content h5{
        font-size: 17px;

    }

</style>
@endsection