@extends('layouts.app')

@section('content')
<form action="{{ route('papers.viewquestions.post', $id )}}" method="POST" enctype="multipart/form-data">
            @csrf

<div style="display:flex">
    <div style="margin-right:20px">
        <a href="{{ route('papers.addquestion', $id) }}" style="border-radius: 0; " class="button is-small is-primary">Add Question</a>                  
    </div>
    <div class="field">
        <div class="control">
            <button  style="border-radius: 0;" class="button is-small is-primary" type="submit">Update Question</button>
        </div>
    </div>
</div>

<div id="notification" style="display: none;" class="notification is-success">
            Questions updated successfully!
</div>

        @foreach($questions as $q)
        <div  class="columns" style='border-bottom:1px solid #ccc'>
                    <div class="column is-6">
                          <img src='{{ $q->desktop }}' width='100%' />
                    </div>
                    <div class="column is-2">
                        <div> Question ID: {{$q->id}} </div>
                        <div> Correct Answer : {{$q->answer}} </div>
                        <div> <b>{{$q->section}}</b> </div>
                       




                    </div>
                    <div class="column is-2">
                      Order : <input style="width:30px;border:1px solid #ccc" type='text' name='number[]' value='{{$q->number}}' /> 


                      <input type="hidden" name="question_ids[]" value="{{ $q->id }}"  >   
                    </div>
                    <div class="column is-2">
                        <div style='display: flex;'>
                         <!--   <div style='margin-right: 10px;'>
                        <form action="{{ route('papers.removeQuestion.post',['id'=>$id ,'question_id'=>$q->id]) }}" method="POST">
                        @csrf
                            <button type="submit" class="button is-small is-primary" style="border-radius: 0;" onclick="deleteQuestion({{ $q->id }})">Delete</button>
                        </form>
                        </div> -->
                        <div>
                            <a class="button is-small is-primary" style="border-radius: 0;"  href="{{route('questions.view', ['ukey' => $q->ukey])}}">edit</a>
                        </div>
                        </div>
                    </div>
        </div>  
        @endforeach
    <div class="mt-4">{{ $questions->links() }}</div>
    <!-- Tooltip container for displaying the image -->
<div id="imageTooltip" style="display: none; position: absolute; border: 1px solid #ddd; background-color: white; padding: 5px;">
    <img src="" id="tooltipImage" style="max-width: 400px; ">
</div>





</form>


   

@endsection