@extends('frontend.layouts.app')


@section('content')

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

                @foreach ($questions as $question)
                <p>{{$question->question}}</p>
                <div class="row p-3">
                    <form action="#" method="POST" id="seeAnswerForm">
                    @foreach ($question->answers as $answer)
                    <input type="hidden" name="id" value="{{ $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="{{($answer->is_correct == '1') ? $answer->id : '' }}"/>
                    <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 p-3 mb-4">
                        <input type="text" name="option" id="answer" class="btn question_option" style="font-size: 18px; border-radius: 7px; text-align:left; font-size:17px" value="{{ $answer->answer }}"/>
                    </div>
                    @endforeach

                    <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: right;" class="btn me-2 disabled btn btn-primary" id="answer">See Answer</a>
                </form>
                </div>
                @endforeach

                <div class="d-flex justify-content-between mt-3">
                 <a href="#" class="btn btn-primary mb-4 px-4">Previous</a>
                    <a href="#" class="btn btn-primary mb-4 px-4">Next</a>
                </div>

            </div>
        </div>




    </div>
</section>
@endsection

@push('js')
<script>

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

    $(document).ready(function(){


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

          $('#answer').removeClass('disabled');
          var data =  $(this).val();
          var dataId =  $(this).attr('id');
          $('#find_answer').val(data);
          $('#find_answer_id').val(dataId);

        });



        $(document).on('submit', '#questionSubmit', function(event) {

// Prevent the default form submission
event.preventDefault();

// Serialize the form data
var formData = new FormData($(this)[0]);


// Send AJAX request
$.ajax({
    url: $(this).attr('action'),
    type: $(this).attr('method'),
    data: formData,
    contentType: false,
    processData: false,
    success: function(res) {
        console.log(res);


        var click_ans = $('#find_answer').val();
        var click_id =  $('#find_answer_id').val();

        var ans = res.right_answer;
        var dataId = res.dataId;

        // Example of handling status
        if (res.status === 'correct') {

            if( click_ans === ans){
                $('#'+click_id).css('background','#3CB043')
            }else{
                $('#'+click_id).css('background','#FF0000')
            }

        } else if (res.status === 'wrong') {
            $('#'+click_id).css('background','#FF0000')
            $('#'+dataId).css('background','#3CB043')
        }
    },
    error: function(xhr, status, error) {
        // Handle errors
        console.error(xhr.responseText);
    }
});
});


    });








    // $(document).ready(function() {
    //     $('').on('click', function(e) {
    //         e.preventDefault();
    //         let id = $(this).data('id');
    //         var selectedOption = $('input[name="option"]:checked').val();
    //         alert(selectedOption);
    //     });
    // });




    </script>
@endpush