@extends('backend.layouts.app')
@section('head')
    <style>
        .question {
            width: 75%;
        }

        .options {
            position: relative;
            padding-left: 40px;
        }

        #options label {
            display: block;
            margin-bottom: 15px;
            font-size: 14px;
            cursor: pointer;
        }

        .options input {
            opacity: 0;
        }

        .checkmark {
            position: absolute;
            top: -1px;
            left: 0;
            height: 25px;
            width: 25px;
            border: 2px solid #ddd;
            border-radius: 50%;
        }

        .options input:checked~.checkmark:after {
            display: block;
        }

        .options .checkmark:after {
            content: "";
            width: 10px;
            height: 10px;
            display: block;
            background: white;
            position: absolute;
            top: 50%;
            left: 50%;
            border-radius: 50%;
            transform: translate(-50%, -50%) scale(0);
            transition: 300ms ease-in-out 0s;
        }

        .options input[type="radio"]:checked~.checkmark {
            background: #21bf73;
            transition: 300ms ease-in-out 0s;
        }

        .options input[type="radio"]:checked~.checkmark:after {
            transform: translate(-50%, -50%) scale(1);
        }
        .gradient-custom {
            /* fallback for old browsers */
            background: #f6d365;

            /* Chrome 10-25, Safari 5.1-6 */
            background: -webkit-linear-gradient(to right bottom, rgba(246, 211, 101, 1), rgba(253, 160, 133, 1));

            /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
            background: linear-gradient(to right bottom, rgba(246, 211, 101, 1), rgba(253, 160, 133, 1))
        }

        #countdown {
            position: relative;
            margin: auto;
            margin-top: 100px;
            height: 40px;
            width: 40px;
            text-align: center;
        }

        #countdown-number {
            color: rgb(73, 69, 69);
            display: inline-block;
            line-height: 40px;
        }

        svg {
            position: absolute;
            top: 0;
            right: 0;
            width: 40px;
            height: 40px;
            transform: rotateY(-180deg) rotateZ(-90deg);
        }

        svg circle {
            stroke-dasharray: 113px;
            stroke-dashoffset: 0px;
            stroke-linecap: round;
            stroke-width: 2px;
            stroke: rgb(83, 57, 57);
            fill: none;
            animation: countdown 60s linear infinite forwards;
        }

        @keyframes countdown {
            from {
                stroke-dashoffset: 0px;
            }

            to {
                stroke-dashoffset: 113px;
            }
        }

        .numberCircle {
            border-radius: 50%;
            width: 36px;
            height: 36px;
            padding: 8px;
            background: #fff;
            border: 2px solid #666;
            color: #666;
            text-align: center;
            font: 32px Arial, sans-serif;
        }

        .ques_panel {
            border: 2px solid;
            padding: 7px;
            border-radius: 50%;
            margin: 4px;
            line-height: 45px;
        }
        .countdown-container {
            position: relative;
            width: 300px;
            height: 100px;
            background-color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            font-weight: bold;
            color: #3498db;
        }
        .school-name{
            display: flex;
            align-items: center;
        }
        .school-name h1{
            font-size: 40px;
            font-weight: 800;
            /*padding-top: 25px;*/
            line-height: 36px;
            color: darkgoldenrod;
            margin: 0;
        }
        .qimg img {
            width: 20%;
            aspect-ratio: 3/2;
            object-fit: contain;
            border: 1px solid;
            cursor: pointer;
        }
        @media(max-width:980px) {
            .school-name h1{
                font-size: 32px;
                line-height: 150%;
            }
            .countdown-container{
                font-size: 42px !important;
                width: auto;
            }
            .question {
                width: 100%;
                word-spacing: 2px;
            }
        }
        @media(max-width:769px) {
            .school-name h1{
                font-size: 30px;
            }
            .countdown-container{
                font-size: 36px !important;
            }
        }
        @media(max-width:576px) {
            .question {
                width: 100%;
                word-spacing: 2px;
            }
            .school-name{
                display: block;
                width: 100%;
                text-align: center;
            }
        }

        .count{
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-items: flex-start;
        }
        .ques_panel {
            border: 2px solid;
            padding: 0;
            width: 34px;
            height: 34px;
            border-radius: 50%;
            margin: 4px;
            line-height: 45px;
            display: inline-flex;
            justify-content: center;
            align-items: center;
        }
        /* Image Galleries Css */
    </style>
@endsection
@section('content')
    <div class="row">
        <div class="card">
            <div class="row">
                <div class="col-lg-auto col-sm-auto d-flex justify-content-sm-start justify-content-center">
                    @php
                        $logo = 'placeholder';
                        if (\Auth::user()->user_type == 'school' || \Auth::user()->user_type == 'admin') {
                            $logo = \Auth::user()->school_logo ?? $logo;
                        } elseif (\Auth::user()->user_type == 'teacher' || \Auth::user()->user_type == 'student') {
                            $logo = \Auth::user()->school->school_logo ?? $logo;
                        }
                    @endphp
                    <div class="schooolLogo__wr d-flex gap-1 flex-wrap mt-2">
                        <img src="{{ uploaded_asset($logo) }}" class="img-fluid" alt="" style="height: 80px; width: auto;">
                    </div>
                </div>
                <div class="col d-flex">
                    <div class="school-name">
                        <h1>{{ $student->school->name }}</h1>
                    </div>
                    {{-- <span class="card-title mb-0" style="color: darkgoldenrod; font-size: 32px; font-weight:500; margin-top: 2px"></span> --}}
                </div>
                
                <div class="col-lg-auto col-sm-auto">
                    <div class="countdown-container" id="countdown-container" style="font-size: 45px">
                        <!-- Countdown label will be updated dynamically here -->
                    </div>
                </div>
            </div>
            
        </div>
        <div class="col-lg-4 col-md-6 col-sm-12 d-flex">
            <div class="card">
                <div class="card-header">
                    <h6>Exam Details</h6>
                </div>
                <div class="card-body h-100 sc-details">
                    <div class="row g-3 justify-content-start">
                        <!--end col-->
                        <div class="col-xxl-12 col-sm-12">
                            <h3>{{$exam->title}}</h3>
                        </div>
                        
                        <div class="col-xxl-12 col-sm-12">
                            <table class="table table-hover">
                                <tbody>
                                    <tr>
                                        <th scope="row">Grade</th>
                                        <td>{{ $exam->grade->name }}</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">Section</th>
                                        <td>Section 1</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">Date and Time</th>
                                        <td>{{ date('d M Y, h:i A', strtotime($exam->date_and_time)) }}</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">Duration</th>
                                        @php
                                            $hour = floor($exam->duration / 60);
                                            $min = $exam->duration % 60;
                                        @endphp
                                        <td class="">{{ $hour . ': ' . $min . '0 Hours' }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="col-xxl-12 col-sm-12">
                            <h5 class="fst-italic mb-2">Instruction:</h5>
                            <p>{!!$exam->description !!}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-5 col-md-6 col-sm-12 d-flex">
            <div class="card w-100">
                <div class="card-header">
                    <h6>Answer Board</h6>
                </div>
                <input type="hidden" id="qid" data-id="{{ encrypt($current_ques->id) }}">
                <div class="container my-1">
                    <div class="question ml-sm-5 pl-sm-5 pt-2">
                        <div class="py-2 h5" id="ques_title"><b> {!! $current_ques->name !!}</b></div>
                        @if($ques_image != null)
                        <div class="qimg mb-5">
                            @foreach ($ques_image as $img)
                                <span class="img-order">{{$loop->iteration}}</span>
                                <img class="ques-img" src="{{uploaded_asset($img)}}" alt=''>
                            @endforeach
                        </div>
                        @endif
                        <div class="ml-md-3 ml-sm-3 pl-md-5 pt-sm-0 pt-3" id="options">
                            <label class="options">{{ $current_ques->option_one }}
                                <input type="radio" onClick="update(this)" name="ques" value="option_one"
                                    @if ($selected_opt == 'option_one') checked @endif>
                                <span class="checkmark"></span>
                            </label>
                            <label class="options">{{ $current_ques->option_tow }}
                                <input type="radio" onClick="update(this)" name="ques" value="option_tow"
                                    @if ($selected_opt == 'option_tow') checked @endif>
                                <span class="checkmark"></span>
                            </label>
                            <label class="options">{{ $current_ques->option_three }}
                                <input type="radio" onClick="update(this)" name="ques" value="option_three"
                                    @if ($selected_opt == 'option_three') checked @endif>
                                <span class="checkmark"></span>
                            </label>
                            <label class="options">{{ $current_ques->option_four }}
                                <input type="radio" onClick="update(this)" name="ques" value="option_four"
                                    @if ($selected_opt == 'option_four') checked @endif>
                                <span class="checkmark"></span>
                            </label>

                        </div>
                    </div>
                    <div class="row justify-content-start py-3">
                        <div class="col-auto">
                            <button class="btn btn-outline-dark" id="prev" data-page="{{ $current_page }}"
                                data-url="{{ route('next_and_prev', [$current_page, encrypt($current_ques->id)]) }}">Back</button>
                        </div>
                        <div class="col-auto">
                            <button class="btn btn-primary" id="next"
                                data-url="{{ route('next_and_prev', [$current_page, encrypt($current_ques->id)]) }}">Next</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-3 d-flex">
            <div class="row">
                <div class="col-md-12 d-flex">
                    <div class="card">
                        <div class="card-header">
                            <h6>Question Panel</h6>
                        </div>
                        <div class="card-body">
                            <div class="count">
                                {!! $ques_panel_html !!}
                            </div>

                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
@endsection
@section('modal')
    <div id="img_modal" class="modal fade" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true"
        style="display: none;">
        <div class="modal-dialog  modal-dialog-centered">
            <div class="modal-content">
                <img src="" alt="" id="zoom_img">
            </div>
        </div>
    </div>

    <div class="modal fade" id="finshedModal" tabindex="-1" aria-labelledby="exampleModalgridLabel" aria-modal="true"
        data-bs-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <form action="{{route('finieshed')}}" method="POST">
                <div class="col-xxl-12 col-lg-12">
                    <div class="card card-body text-center">
                        <div class="avatar-sm mx-auto mb-3">
                            <div class="text-warning fs-17 rounded">
                                <h1 class="text-warning"><i class="las la-exclamation-circle"></i></h1>
                            </div>
                        </div>
                        
                            @csrf
                            <input type="hidden" name="exam_id" value="{{ $exam->id }}" id="">

                            <h4 class="card-title">Total Questions ( {{ $exam->questions->count() }} ) </h4>
                            <h4 class="card-title attempt">Attempted Questions (
                                {{ \App\Models\QuestionsResult::where('exam_id', $exam->id)->where('student_id', \Auth::user()->id)->where('is_correct', '!=', 2)->count() }}
                                )</h4>
                            <a type="button" data-bs-dismiss="modal"
                                class="mb-2 btn btn-warning btn-label waves-effect waves-light" onclick="recheck()"><i
                                    class="ri-error-warning-line label-icon align-middle fs-16 me-2"></i> Recheck
                                Questions</a>
                            <button type="submit" class="btn btn-success btn-label waves-effect waves-light"><i
                                    class="ri-check-double-line label-icon align-middle fs-16 me-2"></i> Finished
                                Exam</button>
                    </div>
                </div>
            </form>

            </div>
        </div>
    </div>
@endsection
@section('script')
    <script>
        
        $(document).ready(function() {

            $("#tag_" + $('#prev').attr("data-page")).css('background-color', '#5bc0de');
            var total_count_q = "{{ $total_count }}"
            var page_count_btn = $('#prev').attr("data-page");
            $('#next, #prev, .ques_panel').click(function() {
                console.time('AJAX Request Time'); 

                if ($(this).attr('data-page') <= 1) {
                    return;
                }
                
                $this = $(this);
                
                var postData = {
                    _token: '{{ csrf_token() }}',
                    exam_id: '{{ $current_ques->exam_id }}',
                    order_by_column_val: '{{ $order_by_column_val }}',
                    order_by_type_val: '{{ $order_by_type_val }}',
                    current_page: '{{ $current_page }}',
                    type: $this.attr('id'),
                    jump_question: $this.attr('data-q-id'),
                }

                $.ajax({
                    url: $this.attr('data-url'),
                    type: 'POST',
                    data: postData,
                    dataType: 'json',
                    success: function(data) {
                        var cr_page = data.current_page;
                        var over = false;
                        if(parseInt(cr_page) > parseInt(total_count_q)){
                            over = true;
                            if(over){
                                $('#finshedModal').modal('show');
                            }
                        }
                        
                        var url = '{{ url('next-prev-only') }}' + '/' + cr_page + '/' + data.id;
                        
                        $('#prev').attr("data-page", cr_page);
                        var title = `<b> ${data.ques_title}</b>`;
                        $.each(data.bg_color, function(index, value) {
                            var element = $('.ques_panel[data-page="' + value.id + '"]');
                            element.css('background-color', value.color);
                        });
                        $("#tag_" + $('#prev').attr("data-page")).css('background-color', '#5bc0de');
                        
                        $('#ques_title').html(title);
                        $('.qimg').html(data.ques_image)
                        $('#options').html(data.options);
                        $('#next, #prev').attr('data-url', url);
                        $('#qid').attr('data-id', data.id);

                    },
                    error: function(error) {
                        console.error('Error:', error);
                    },
                    complete: function() {
                        console.timeEnd('AJAX Request Time'); 
                    }
                });
            })
        })
        function recheck() {
            $('#prev').click();
        }
        function update(el) {

            var postData = {
                _token: '{{ csrf_token() }}',
                exam_id: '{{ $exam->id }}',
                id: $('#qid').attr("data-id"),
                ans: el.value,
            }

            $.ajax({
                url: "{{ route('submit_ques') }}",
                type: 'POST',
                data: postData,
                dataType: 'json',
                success: function(data) {
                    $("#tag_" + $('#prev').attr("data-page")).addClass('active bg-success');
                    $('.attempt').text('Attempted Questions ('+data+' )');
                },
                error: function(error) {
                    console.error('Error:', error);
                }
            });
        }

        $('.ques-img').click(function() {
            $('#zoom_img').attr('src', $(this).attr('src'));
            $('#img_modal').modal('show')
        })

        let countdownTime = "{{ $duration }}";
        // Get DOM elements
        const countdownContainer = document.getElementById('countdown-container');

        // Update the countdown label every second
        const countdownInterval = setInterval(() => {
            const hours = Math.floor(countdownTime / 3600);
            const minutes = Math.floor((countdownTime % 3600) / 60);
            const seconds = countdownTime % 60;

            const formattedTime =
                `${String(hours).padStart(2, '0')} : ${String(minutes).padStart(2, '0')} : ${String(seconds).padStart(2, '0')}`;

            countdownContainer.textContent = formattedTime;
            
            if (countdownTime <= 0) {
                clearInterval(countdownInterval);
                countdownContainer.textContent = 'Time\'s up!';
                location.href = "{{route('student.dashboard')}}"
            }

            countdownTime--;
        }, 1000);
    </script>
@endsection