@extends('layouts.new-app')
@section('content')
<style>
    .text25 {
        font-size: 25px !important;
    }

    .text20 {
        font-size: 20px !important;
    }

    .textrem {
        display: block !important;
        font-size: 1.1rem !important;
    }

    .size20 {
        height: 20px !important;
        width: 20px !important;
    }

    .box {
        border: 1px solid rgb(106, 102, 102);
    }

    .radio label .check {
        height: 20px !important;
        width: 20px !important;
    }

    .circle {
        height: 20px !important;
        width: 20px !important;
    }

    .lineIntend {
        padding-left: 2em;
        text-indent: -1.9em;
    }

    .green-text {
        color: green !important;
    }

    .red-text {
        color: red !important;
    }
</style>

<div class="container-fluid">
    <div class="col-md-12 col-sm-12 col-lg-12">
        <div class="row">
            <div class="col-md-6 col-sm-6 col-lg-6 breadcrumbcustomize">
                <div class="row">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ url('/home') }}">Home</a></li>
                            <li class="breadcrumb-item"><a href="{{ url('/user/chapter-home/1') }}">Operator 'AB'</a>
                            </li>
                            <li class="breadcrumb-item active" aria-current="page">Introduction</li>
                        </ol>
                    </nav>
                </div>
            </div>
            <div class="col-md-6 col-sm-6 col-lg-6">
                <div class="row">
                    <div class="col-md-7 col-sm-7 col-lg-7 col-xs-12">
                        <div class="audio float-right" style="">
                            {!! Form::evaluationAudioBlock($chapter) !!}
                        </div>
                    </div>
                    <div class="col-md-5 col-sm-5 col-lg-5 col-xs-12 mobilealigncenter">
                        <div class="float-right">
                            <div class="btn-group">
                                <button type="button" class="btn btnfacility dropdown-toggle" data-toggle="dropdown"
                                    aria-haspopup="true" aria-expanded="false" id="facultyBtn">
                                    <i class="fa fa-info-circle" aria-hidden="true"></i> Faculty Info
                                </button>
                                @include('faculty')
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div>
    <div class="wrapper d-flex align-items-stretch" style="margin-top:-10px;">
        <!-- Page Content  -->
        <div id="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12 col-sm-12 col-lg-12">
                        <div class="chapterscontainer" style="margin: 0px;">
                            <div class="chaperheader">
                                <div class="col-md-12 col-sm-12 col-lg-12 chaptertitletxt text-center">
                                    <img src="{{ asset('theme/images/Ohio-logo.png') }}" class="img-thumbnail"
                                        style=" float:left;background-color:#1f60ba;" width="80" ;>
                                    {{ ucwords($chapter_name) }} <span class="float-right"></span>
                                </div>
                            </div>
                            <div class="col-md-12 col-sm-12 col-lg-12 chapterdiscription">
                                {!! Form::open(['route'=>'save.exam', 'method'=>'POST', 'id'=>'formExam']) !!}
                                {!! Form::hidden('chapter_id', $chapter, []) !!}
                                <div class="col-md-12 col-sm-12 col-lg-12">
                                    <div class="row clearfix box p-3">
                                        <h5 class="text-center underline" style="justify-content: center;">
                                            <b class="text20">Chapter {{$chapter}} - Evaluation</b>
                                            <span class="float-right"><b class="italic underline">Score:</b>
                                                @if(!is_null($exam))
                                                {{ $exam->correct }}/{{ $exam->questions }}
                                                @if($exam->correct == $exam->questions)
                                                <b class="text-success"> Success</b>
                                                @php
                                                $active = 1;
                                                @endphp
                                                @else
                                                <b class="text-danger"> Retake</b>
                                                @php
                                                $active = 0;
                                                @endphp
                                                @endif
                                                @else
                                                0/{{ count($questions) }}
                                                @php
                                                $active = 0;
                                                $noexam = 1;
                                                @endphp
                                                @endif
{!! Form::hidden('noexam', isset($noexam)?$noexam:0, ['id'=>'noexam']) !!}
                                                @php
                                                function checking($exdetails, $qid, $qc, $opt) {
                                                if($exdetails != []) {

                                                if(isset($exdetails[$qid]) && $qc == $opt && $exdetails[$qid] == $qc) {
                                                return 'checked disabled';
                                                } elseif(isset($exdetails[$qid]) && $exdetails[$qid] == $opt) {
                                                return 'checked disabled';
                                                } else {
                                                return 'disabled';
                                                }
                                                } else {
                                                return 'disabled';
                                                }
                                                }

                                                function checkingClass($exdetails, $qid, $qc, $opt) {
                                                if($exdetails != []) {
                                                if(isset($exdetails[$qid]) && $qc == $opt && $exdetails[$qid] == $qc) {
                                                return 'green-text';
                                                } elseif(isset($exdetails[$qid]) && $exdetails[$qid] == $opt) {
                                                return 'red-text';
                                                } else {
                                                return '';
                                                }
                                                } else {
                                                return '';
                                                }
                                                }
                                                @endphp
                                            </span>
                                        </h5>
                                        @foreach ($questions as $key=>$question)
                                        <div class="col-md-12 mt-3 radio-group">
                                            <p class="row mb-0 lineIntend textrem"><span class="mr-3">{{ $key+1
                                                    }}.</span>
                                                {{ $question->question }}</p> <br>
                                            <div class="col-md-12">
                                                @foreach ($question->options as $ansr => $item)
                                                <div class="radio ">
                                                    <label>
                                                        <input type="radio" class="filled-in size20" id="radiobox19"
                                                            name="question-{{ $question->id }}" value="{{ $ansr+1 }}"
                                                            required {{ checking($details, $question->id,
                                                        $question->correct, $ansr+1) }}>
                                                    </label>
                                                    <span
                                                        class="{{ checkingClass($details, $question->id, $question->correct, $ansr+1) }}">{{
                                                        $item->option }}</span>
                                                </div>
                                                @endforeach
                                            </div>
                                        </div>
                                        @endforeach
                                        <div class="col-md-12 mt-3 text-center">
                                            <button class="btn btn-warning" type="button"
                                                onclick="$('#formExam')[0].reset();" @if($active == 1) style="display: none;" @endif>Reset</button>

                                            <button class="btn btn-success" type="submit" style="display: none;" id="submitBtn">Submit Exam </button>

                                            @if(isset($noexam))
                                            <button class="btn btn-success" type="submit">Submit Exam </button>
                                            @endif

                                            <button class="btn btn-info" type="button" onclick="retakeExam()" @if($active == 1 && !isset($noexam)) style="display: none;" @endif id="retakeBtn">Retake Exam </button>
                                            <sub
                                                class="italic"
                                                style="position: absolute; bottom: 0px; right: 1px; font-size: 9px;" title="*Note: Need to score 100% before proceeding to next chapter, Retake evaluation if needed">*Note: Need to score 100% before proceeding to next chapter, Retake evaluation if needed</sub>
                                        </div>
                                    </div>
                                </div>
                                {!! Form::close() !!}
                            </div>
                            <div class="col-md-12 col-sm-12 col-lg-12 chapterbuttons"
                                style="border-bottom: 1px solid #f1f1f1; margin-bottom:20px;">
                                <div class="row">
                                    <div class="col-md-6 col-sm-6 col-lg-6">
                                        <a href="{{ url('/user/chapter-home/1') }}"
                                            class="btn btn-outline-primary buttoncustom">CANCEL</a>
                                    </div>
                                    <div class="col-md-6 col-sm-6 col-lg-6 rightbuttons">
                                        @if($chapter != 10)
                                        @if($active == 1)
                                        <a href="{{ url('/user/page/1-'.($chapter+1).'-1') }}"
                                            class="btn buttonorange">GO TO CHAPTER {{ $chapter+1 }}</a>
                                        @else
                                        <a href="javascript::void(0)" class="btn buttonorange examAlert">GO TO CHAPTER
                                            {{ $chapter+1 }}</a>
                                        @endif
                                        @else
                                        @if($active == 1)
                                        <a href="{{ url('/user/exam/100') }}" class="btn buttonorange">TAKE FINAL
                                            EVALUATION</a>
                                        @else
                                        <a href="javascript::void(0)" class="btn buttonorange examAlert">TAKE FINAL
                                            EVALUATION</a>
                                        @endif
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <div class="row" style="padding-bottom: 20px;" id="sliderDiv"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="sliderblank">
            <div class="custom-close">
                <button type="button" id="sidebarCollapse" class="btn btn-outline-success">
                    <i class="fa fa-bars" aria-hidden="true"></i>
                    <span class="sr-only">Toggle Menu</span>
                    CHAPTERS
                </button>
            </div>
            <nav id="sidebar">
                <div class="rightmenu" id="sidebar-wrapper-div"></div>
            </nav>
        </div>
    </div>
</div>

{{ Form::hidden('operator', 1, ['id'=>'operator']) }}
{{ Form::hidden('chapter', $chapter, ['id'=>'chapter']) }}
{{ Form::hidden('slide', 'test', ['id'=>'slide']) }}
<script src="{{ asset('js/chapter-slides.js') }}"></script>

<script>
    $(function() {
        $('#formExam').validate({
            rules: {
                'radio': {
                    required: true
                },
            },
            highlight: function (input) {
                $(input).parents('.form-line').addClass('error');
            },
            unhighlight: function (input) {
                $(input).parents('.form-line').removeClass('error');
            },
            errorPlacement: function (error, element) {
                $(element).parents('.radio-group').append(error);
            }
        });
    });

    $(document).ready(function() {
      /* show lightbox when clicking a thumbnail */
      $('a.thumb').click(function(event){
         event.preventDefault();
         var content = $('.modal-body');
         content.empty();
            var title = $(this).attr("title");
            $('.modal-title').html(title);
            content.html($(this).html());
            $(".modal-profile").modal({show:true});
      });
   });

    (function($) {
        "use strict";
        var fullHeight = function() {
            $('.js-fullheight').css('height', $(window).height());
            $(window).resize(function(){
                    $('.js-fullheight').css('height', $(window).height());
            });
        };

        fullHeight();

        $('#sidebarCollapse').on('click', function () {
            //   $('#sidebar').toggleClass('active');
            $('#sidebar').show();
        });
    })(jQuery);

    $(".examAlert").on('click', function() {
        swal({
            title: 'Please score 100% in chapter evaluation to proceed further. Please retake evaluation.',
        });
    });
    
    // Retake Exam
    function retakeExam() {
        // reset text colors
        $('#formExam').find("span").removeClass('green-text');
        $('#formExam').find("span").removeClass('red-text');
        // reset form inputs
        $('#formExam').find("input").removeAttr('checked');
        $('#formExam').find("input").removeAttr('disabled');
        // showing submit button
        $("#submitBtn").show();
        $("#retakeBtn").hide();
        window.scrollTo(0,0);
    }
    
    $(document).ready(function() {
        var exm = $("#noexam").val();
        if(exm == 1) {
            // reset form inputs
            $('#formExam').find("input").removeAttr('disabled');
            $("#retakeBtn").hide();
        }
    })
</script>
@endsection