@extends('frontend.layouts.app')


@section('content')

<style>
    .disabled {
        opacity: 0.2; /* Dim the button */
        pointer-events: none; /* Prevent pointer events (clicks) */
    }


    #previous-button {
        float: left;
    }
    #next-button, #submit-button {
        float: right;
    }

</style>

<div class="breadcumb-wrapper" data-bg-src="{{asset('frontend')}}/assets/img/bg/breadcumb-bg.jpg" data-overlay="title" data-opacity="8">
    <div class="breadcumb-shape" data-bg-src="{{asset('frontend')}}/assets/img/bg/breadcumb_shape_1_1.png"></div>
    <div class="shape-mockup breadcumb-shape2 jump d-lg-block d-none" data-right="30px" data-bottom="30px"><img
            src="{{asset('frontend')}}/assets/img/bg/breadcumb_shape_1_2.png" alt="shape"></div>
    <div class="shape-mockup breadcumb-shape3 jump-reverse d-lg-block d-none" data-left="50px" data-bottom="80px">
        <img src="{{asset('frontend')}}/assets/img/bg/breadcumb_shape_1_3.png" alt="shape"></div>
    <div class="container">
        <div class="breadcumb-content text-center">
            <h1 class="breadcumb-title">Courses Page</h1>
            <ul class="breadcumb-menu">
                <li><a href="index.html">Home</a></li>
                <li>Courses</li>
            </ul>
        </div>
    </div>
</div>
<section class="space-top space-extra2-bottom">
    <div class="container">
        <div class="row">
            <div style="margin:0 auto; background:rgb(255, 255, 255); box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px; border-right:2px solid rgb(16, 126, 126)" class="col-xl-8 col-lg-8 order-lg-2 mt-5">
                <div style="display:flex">
                    <img style="width:5%" src="{{ asset('/frontend/assets/img/pharmacology.svg') }}" />
                    <div style="margin-top:15px; margin-left:12px">
                        <h6 class="m-0 p-0">Pharmacology</h6>
                        <p style="margin-top:-5px"> Questions: {{ $questions->count() }}</p>
                    </div>
                </div>
                <hr style="margin-top:-10px; margin-bottom:17px">

                <div id="question-container">
                    @foreach ($questions as $index => $question)
                        <div class="question" data-index="{{ $index }}" style="display: {{ $index === 0 ? 'block' : 'none' }};">
                            <p>{{$question->question}}</p>
                            <div class="row p-3">

                                    @foreach ($question->answers as $answer)
                                        <input type="hidden" class="question_id"/>
                                        <input type="hidden" name="find_answer" id="find_answer" class="btn"/>
                                        <input type="hidden" name="correct_answer" id="correct_answer" class="btn" value=""/>
                                        <input type="hidden" name="find_answer_id" id="find_answer_id" class="btn"/>
                                        <div style="border: 1px solid rgb(197, 196, 196); border-radius: 7px" class="col-xl-12 col-lg-12  mb-4">
                                            <input type="text" readonly name="option" onclick="checkAnswer()" id="user_answer" class="btn question_option" style="font-size: 18px; border-radius: 7px; text-align:left; font-size:17px" value="{{ $answer->answer }}"/>
                                        </div>
                                    @endforeach
                                    <input type="hidden" class="userSelectedID">
                                    <button style="background:rgb(19, 125, 151); font-size:19px; border:1px solid rgb(19, 125, 151); color:white; border-radius:4px; text-align:center; padding-left:20px; padding-right:20px; padding-top:6px; padding-bottom:6px; float: right;" class="btn me-2 btn-primary see_answer" disabled>See Answer</button>

                            </div>
                        </div>
                    @endforeach
                </div>

                <div class="d-flex justify-content-between mt-3">
                    <button  class="btn btn-primary mb-4 px-4 previous-button" style="display: none;">Previous</button>
                    <button class="btn btn-primary mb-4 px-4 next-button">Next</button>
                    <button class="btn btn-primary mb-4 px-4 submit-button" style="display: none;">Submit</button>
                </div>

            </div>
        </div>




    </div>
</section>
@endsection

@push('js')
<script>

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });


    // Start  pagination form ajax code here
    document.addEventListener('DOMContentLoaded', function () {
        const questions = document.querySelectorAll('.question');

        console.log(questions);
        let currentIndex = 0;

        const previousButton = document.getElementByClass('previous-button');
        const nextButton = document.getElementByClass('next-button');
        const submitButton = document.getElementByClass('submit-button');

        function showQuestion(index) {
            questions.forEach((question, i) => {
                question.style.display = i === index ? 'block' : 'none';
            });

            previousButton.style.display = index === 0 ? 'none' : 'inline-block';
            nextButton.style.display = index === questions.length - 1 ? 'none' : 'inline-block';
            submitButton.style.display = index === questions.length - 1 ? 'inline-block' : 'none';

            if (index === 0 && nextButton.style.display === 'inline-block') {
            nextButton.style.float = 'right';
            } else {
                nextButton.style.float = 'none';
            }
        }

        previousButton.addEventListener('click', () => {
            if (currentIndex > 0) {
                currentIndex--;
                showQuestion(currentIndex);
            }
        });

        nextButton.addEventListener('click', () => {
            if (currentIndex < questions.length - 1) {
                currentIndex++;
                showQuestion(currentIndex);
            }
        });

        showQuestion(currentIndex);
    });

// End  pagination form ajax code here



        function checkAnswer(id)
        {
            $('.userSelectedID').val(id);
            $('.see_answer').prop('disabled', false);
        }

        $('.see_answer').on('click',function(e){
            e.preventDefault();

            var givenAnswer =  $('.userSelectedID').val();
            var question_id =  $('.question_id').val();

            $.ajax({
                url:"{{ route('frontend.get.correct.answer') }}",
                type: 'post',
                data: {
                    id: question_id,
                    given: givenAnswer
                },
                success: function (response) {

                    console.log(response);

                },
                error: function (error) {
                    // Show Toastr error message
                    toastr.error(error.responseJSON.message);
                }
            });

        })



</script>
@endpush