@extends('backend.student.layouts.right_side_bar')
@section('studentBody')
    <!-- Main Container -->
    <main id="main-container">
        <!-- Hero -->
        <div class="bg-body-light">
            <div class="content content-full">
                <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center">
                    <h1 class="flex-sm-fill font-size-h2 font-w400 mt-2 mb-0 mb-sm-2">{{$heading}}</h1>
                    <a href="{{url('student/exams')}}" class="btn btn-danger"><i class="fa fa-backspace"></i> Back</a>
                </div>
            </div>
        </div>
        <!-- END Hero -->

        <div class="content pr-0 pl-0">
        @include('layouts.message')
        <!-- Patients -->
            <div class="block block-rounded js-appear-enabled animated fadeIn" data-toggle="appear">
                <div class="block-content block-content-full">
                    <div class="row">
                        <div class="col-sm-8">
                            <div class="p-1 border">
                                <span class="font-weight-bold font-size-h4 text-primary-dark">Exam Details</span>
                                <table class="table">
                                    <tr>
                                        <td>Title</td>
                                        <td>{{$exam->title}} ({{$exam->subject->name}})</td>
                                    </tr>
                                    <tr>
                                        <td>Level/Stream</td>
                                        <td>{{$exam->level->name}}/{{$exam->stream->name}}</td>
                                    </tr>
                                    <tr>
                                        <td>Exam Date</td>
                                        <td>
                                            <span>Start Date :{{$exam->start_date}} </span><br>
                                            <span>End Date: {{$exam->end_date}}</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Total Question</td>
                                        <td>{{count($exam->objectiveQuestions)}} Questions</td>
                                    </tr>
                                    <tr>
                                        <td>Marks/Per Question (Default)</td>
                                        <td>{{$exam->default_marks}} Point</td>
                                    </tr>
                                    <tr>
                                        <td>Time/Per Question (Default)</td>
                                        <td>{{$exam->default_time}} Second</td>
                                    </tr>
                                    @if(isset($exam->details))
                                        <tr>
                                            <td colspan="2">
                                                <span class="font-weight-bold font-size-h4 text-primary-dark">Aditional Instruction</span>
                                                <hr>
                                                <div>
                                                    {!! $exam->details !!}
                                                </div>
                                            </td>
                                        </tr>
                                    @endif
                                </table>
                            </div>
                        </div>
                        <div class="col-sm-4 text-center">
                            <div class="p-1 border">
                                <span class="font-weight-bold font-size-h4 text-primary-dark">College Details</span>
                                <hr>
                                <div class="justify-content-center">
                                    @if(config('filesystems.storage')::disk(config('filesystems.diskName'))->exists(config('filesystems.storagePath').'clients/'.$client->user->name.'/'.$client->logo))
                                        <div class="mb-1 mt-1">
                                            <img src="{{config('filesystems.asset').'clients/'.$client->user->name.'/'.$client->logo}}"  class="img-avatar img-fluid img-circle" style="width: 50px;" alt="User Image">
                                        </div>
                                    @endif
                                    <span class="font-size-base font-weight-bold">{{$client->company_name}}</span><br>
                                    <span class="font-size-base">{{$client->district->name}}</span><br>
                                    <span class="font-size-base">{{$client->user->email}}</span><br>
                                    <span class="font-size-base">{{$client->office_contact}}</span>
                                </div>
                            </div>
                            @if(\App\Model\NewStudentExam::where('student_id',$student->id)->where('exam_id',$exam->id)->where('status','completed')->first())
                                <div class="action mt-3 mb-2 border-bottom pb-2">
                                    <button class="btn btn-success"><i class="fa fa-check-circle"></i> You Have Completed this Exam</button>
                                </div>
                            @elseif($exam->status=='public' && $exam->start_date <= date('Y-m-d H:i') && $exam->end_date >= date('Y-m-d H:i'))
                                <div class="action mt-3 mb-2 border-bottom pb-2">
                                    @if(count($exam->objectiveQuestions)>0)
                                        <a href="{{url('student/exams'.'/'.$exam->id.'/startExam')}}" onclick="return confirm('Are you sure to start this exam? **Keep in mind that Question set (next page) would be invalid after limited exam time. Try to give Answer in time.')" class="btn btn-success"><i class="fa fa-check-circle"></i> Start Exam</a>
                                    @else
                                        <a href="javascript:void(0)" class="btn btn-danger"><i class="fa fa-info-circle"></i> Exam Not Ready Yet !</a>
                                    @endif
                                </div>
                                <span class="font-weight-bold">Before Start Exam:</span>
                                <span class="text-danger font-weight-bold">
                                    **Keep in mind that Question set (next page) would be invalid after limited exam time. Try to give Answer in time.
                                </span>
                            @elseif($student->type=='test')
                                <div class="action mt-3 mb-2 border-bottom pb-2">
                                    <a href="{{url('student/exams'.'/'.$exam->id.'/startExam')}}" onclick="return confirm('Are you sure to start this exam? **Keep in mind that Question set (next page) would be invalid after limited exam time. Try to give Answer in time.')" class="btn btn-success"><i class="fa fa-check-circle"></i> Start Exam</a>
                                </div>
                                <span class="font-weight-bold">Before Start Exam:</span>
                                <span class="text-danger font-weight-bold">
                                    **Keep in mind that Question set (next page) would be invalid after limited exam time. Try to give Answer in time.
                                </span>
                            @else
                                <div class="action mt-3 mb-2 border-bottom pb-2">
                                    <span class="btn btn-success mb-2" id="countdown_title">
                                        Exam Starts in
                                        <span id="clockdiv"></span>
                                    </span>
                                    <a id="start_exam" style="display:none;" href="{{url('student/exams'.'/'.$exam->id.'/startExam')}}" onclick="return confirm('Are you sure to start this exam? **Keep in mind that Question set (next page) would be invalid after limited exam time. Try to give Answer in time.')" class="btn btn-success"><i class="fa fa-check-circle"></i> Start Exam</a>
                                    {{--<button class="btn btn-success"><i class="fa fa-check-circle"></i> Exam Start at {{$exam->start_date}}</button>--}}
                                    <div id="exam_info" style="display:none;">
                                        <span class="font-weight-bold">Before Start Exam:</span>
                                        <span class="text-danger font-weight-bold">
                                        **Keep in mind that Question set (next page) would be invalid after limited exam time. Try to give Answer in time.
                                    </span>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            <!-- END Patients -->

        </div>
    </main>
    <!-- END Main Container -->
@endsection
@section('after_js')
    <script>
        $(document).bind("contextmenu",function(e) {
            e.preventDefault();
        });

    </script>
    <script type="application/javascript">
        // Set the date we're counting down to
        @php
        $date = date('Y-m-d H:i:s',strtotime($exam->start_date));
        @endphp
        var countDownDate = new Date("{{$date}}").getTime();

        // Update the count down every 1 second
        var x = setInterval(function() {

            // Get today's date and time
            var now = new Date().getTime();

            // Find the distance between now and the count down date
            var distance = countDownDate - now;

            // Time calculations for days, hours, minutes and seconds
            var days = Math.floor(distance / (1000 * 60 * 60 * 24));
            var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);

            // Output the result in an element with id="demo"
            document.getElementById("clockdiv").innerHTML = days + " Day " + hours + " Hours "
                + minutes + " Minute " + seconds + " Second ";

            // If the count down is over, write some text
            if (distance < 0) {
                clearInterval(x);
                $("#countdown_title").hide();
                $("#clockdiv").hide();
                $("#start_exam").show();
                $("#exam_info").show();
            }
        }, 1000);
    </script>
@endsection