@extends('layouts.app')

@section('content')

<form id="questionsForm">
<div>
   
</div>
        @foreach($questions as $q)
        <div  class="columns" style='border-bottom:1px solid #ccc;'>
                    <div class="column is-4" style='border-right:1px solid #ccc'>
                          <img src='{{ $q->url }}' width='80%' />
                          @if(!empty($q->url2))
                            <p><img src="{{ $q->url2 }}" width="80%" /></p>
                          @endif
                    <div>
                          <div  style='margin-top:25px;'>
                            @for($i = 1; $i <= 5; $i++)    
                                <div style='padding:5px 10px' class="answer-option"  >
                                    <img src="{{ $q->{'ans' . $i} }}"  class="answer-image">
                                </div>
                            @endfor
                           </div>
                    </div>
                    
                    </div>
                    <div class="column is-4">
                        <div> Question ID: {{$q->id}} </div>
                        <div> Correct Answer : {{$q->answer}} </div>
                        <div> <b>{{$q->section}}</b> </div>
                        <div> {{$q->subsection}} </div>
                          
                    </div>
                    <div class="column is-4">
                   
                    @if(in_array($q->id, $selectedQuestions))
                        <div id="remove-{{ $q->id }}">
                            <a href="javascript:void(0)" class='has-text-danger' onclick="removeQuestion({{ $q->id }}, {{ $paper_id }})">Remove</a>
                        </div>
                        <div id="add-{{ $q->id }}" style="display:none;">
                            <a href="javascript:void(0)" class='has-text-success'  onclick="addQuestion({{ $q->id }}, {{ $paper_id }})">Add New</a>
                        </div>
                    @else
                        <div id="add-{{ $q->id }}">
                            <a href="javascript:void(0)" class='has-text-success'  onclick="addQuestion({{ $q->id }}, {{ $paper_id }})">Add New</a>
                        </div>
                        <div id="remove-{{ $q->id }}" style="display:none;">
                            <a href="javascript:void(0)" class='has-text-danger'  onclick="removeQuestion({{ $q->id }}, {{ $paper_id }})">Remove</a>
                        </div>
                    @endif



                          
                    </div>
        </div>  
        @endforeach






    <div class="mt-4">{{ $questions->links() }}</div>



</form>




<script>
    document.getElementById('questionsForm').addEventListener('submit', function(event) {
        event.preventDefault(); // Prevent the form from submitting normally

        var form = this;
        var formData = new FormData(form);

        // Send AJAX request
        fetch('{{ route('papers.storequestion', $paper_id) }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
            },
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('Updated Succesfully')
               // document.getElementById('notification').style.display = 'block'; // Show success notification
            }
        })
        .catch(error => console.error('Error:', error));
    });

  
   // Add Question
function addQuestion(questionId, paperId) {
    fetch('{{ route('papers.addorremove') }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({
            question_id: questionId,
            paper_id: paperId,
            action:'add'
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Hide Add button, show Remove button
            document.getElementById('add-' + questionId).style.display = 'none';
            document.getElementById('remove-' + questionId).style.display = 'block';
        }
    })
    .catch(error => console.error('Error:', error));
}

// Remove Question
function removeQuestion(questionId, paperId) {
    fetch('{{ route('papers.addorremove') }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({
            question_id: questionId,
            paper_id: paperId,
            action:'remove'
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Hide Remove button, show Add button
            document.getElementById('remove-' + questionId).style.display = 'none';
            document.getElementById('add-' + questionId).style.display = 'block';
        }
    })
    .catch(error => console.error('Error:', error));
}

</script>

   

@endsection