@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;
    }


    .answer-container {
        border: 1px solid rgb(197, 196, 196);
        border-radius: 7px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .correct-answer {
        background-color: rgba(0, 255, 0, 0.3) !important; /* Light green */
        border: 1px solid green;
    }

    .incorrect-answer {
        background-color: rgba(255, 0, 0, 0.3) !important; /* Light red */
        border: 1px solid red;
    }

    .percentage {
        font-size: 14px;
        margin-left: 10px;
    }

    .answer-container span {
        display: inline-block;
        height: 100%;
        width: 0;
        vertical-align: middle;
    }
</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="text-center breadcumb-content">
            <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="mt-5 col-xl-8 col-lg-8 order-lg-2">
                <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="p-0 m-0">Pharmacology</h6>
                        <p style="margin-top:-5px"> Questions: {{ Session::get('countQ') }}</p>
                    </div>
                </div>
                <hr style="margin-top:-10px; margin-bottom:17px">
                <p>{{$question->question}}</p>
                <div class="p-3 row">
                    <form id="mainForm">
                        @csrf
                        <input type="hidden" name="id" value="{{ $question->id }}"/>

                        @php
                            $correctAnswerId = $question->answer->firstWhere('is_correct', 1)->id ?? '';
                            $storedAnswerId = session('answers')[$question->id] ?? '';
                            $correctanswer = session('correctanswer')[$question->id] ?? '';

                        @endphp
                        <input type="hidden" name="correct_answer" id="correct_answer" value="{{ $correctAnswerId }}"/>
                        <input type="hidden" name="see_answer" id="see_answer" />

                        @foreach ($question->answer as $answer)
                        <div class="p-3 mb-4 col-xl-12 col-lg-12 answer-container">
                            <input type="radio" class="selected_answer " name="selected_answer" id="answer_{{ $answer->id }}"  value="{{ $answer->id }}" {{ $storedAnswerId == $answer->id ? 'checked' : '' }} />
                            <label for="answer_{{ $answer->id }}" class="answer_{{ $answer->id }}  {{ $correctanswer == $answer->id ? 'correct-answer' : '' }}" style="font-size: 18px; text-align: left; font-size: 17px;">
                                {{ $answer->answer }}
                            </label>
                        </div>

                        @endforeach
                        <span class="mt-2 alert alert-danger" id="answerError" style="display: none;">This field is required.</span>

                        <a 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:left;" class="btn me-2 btn-primary " id="seeAnswer" disabled>See Answer</a>

                        <div class="mt-3" style="float:right">

                            @if (Session::get('countQ') > 1)
                            <button type="button" class="px-4 mb-4 btn btn-primary" id="previousButton">Previous</button>

                            @endif
                            @if (Session::get('endOfQuestions') == '1')
                            <a class="px-4 mb-4 btn btn-primary disabled">End</a>
                            @else
                            <button type="submit" id="nextSubmit" class="px-4 mb-4 btn btn-primary">Next</button>
                            @endif



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


            </div>
        </div>

        <form id="previousForm" action="{{ route('frontend.questions.previous') }}" method="POST" style="display: none;">
            @csrf
            <input type="hidden" name="id" value="{{ $question->id }}"/>
        </form>


    </div>
</section>
@endsection

@push('js')


<script>

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


$(document).ready(function() {
    // $('#nextSubmit').click(function() {
    //     // Trigger the form submission
    //     $('#mainForm').submit();
    // });

    $('#mainForm').on('submit',function(e) {
        // Prevent default form submission
        e.preventDefault();
        // Clear any previous error messages
        $('#answerError').hide();

        // Check if an answer is selected
        if (!$('input[name="selected_answer"]:checked').val()) {
            $('#answerError').show();
            return;
        }

        // Serialize the form data
        var formData = $(this).serialize();

        // Submit the form data via AJAX
        $.ajax({
            url: "{{ route('frontend.questions.next') }}",
            type: 'POST',
            data: formData,
            success: function(response) {
               console.log(response);
            },
            error: function(xhr) {
                // Handle any errors here
                console.log(xhr.responseText);
            }
        });
    });
});






    // required field javascript
    document.getElementById('mainForm').addEventListener('submit', function(event) {
        var selectedAnswer = document.querySelector('input[name="selected_answer"]:checked');
        if (!selectedAnswer) {
            event.preventDefault(); // Prevent form submission
            document.getElementById('answerError').style.display = 'block'; // Show error message
        } else {
            document.getElementById('answerError').style.display = 'none'; // Hide error message
        }
    });

    // enable disable code
    document.querySelectorAll('.selected_answer').forEach((input) => {
    input.addEventListener('change', function() {
            document.getElementById('seeAnswer').disabled = false;
        });
    });

    // For pre-selected answer
    if (document.querySelector('.selected_answer:checked')) {
        document.getElementById('seeAnswer').disabled = false;
    }

        document.getElementById('seeAnswer').addEventListener('click', function() {
            var selectedAnswerId = document.querySelector('input[type="radio"][name="selected_answer"]:checked').value;
            var correctAnswerId = document.getElementById('correct_answer').value;
            $('#see_answer').val(correctAnswerId);
            var selectedAnswerElement = document.querySelector('.answer_' + selectedAnswerId);
            var correctAnswerElement = document.querySelector('.answer_' + correctAnswerId);
            if (selectedAnswerId !== correctAnswerId) {
                selectedAnswerElement.classList.add('incorrect-answer')
            }
            correctAnswerElement.classList.add('correct-answer');
        });


    document.getElementById('previousButton').addEventListener('click', function() {
        document.getElementById('mainForm').style.display = 'none';
        document.getElementById('previousForm').style.display = 'inline';
        document.getElementById('previousForm').submit();
    });






































</script>


@endpush