@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  style="margin-left:20px;font-size;11px">{{$paper->display_name}} </div>
</div>

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


<table class="table is-striped is-fullwidth is-hoverable">
    <thead>
        <tr>
           
            <th>Question ID</th>
            <th>Display Order</th>
            <th>Correct Answer</th>
            <th>Section</th>
          
            <th>Sub Section</th>
            <th>Q Level</th>
            
            <th>Has Q2</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        @foreach($questions as $q)
        <tr>
            
            <td>{{ $q->id }}</td>
            <td>
                <input type="text" name="number[]" value="{{ $q->number }}" style="width: 50px;border-radius: 0;" class="input is-small" />
            </td>
            <td>
            <input type="text" name="answer[]" value="{{ $q->answer }}" style="width: 50px;border-radius: 0;" class="input is-small" />
        
                </td>
            <td>
            <div class="control" style="font-size: 10px;">
                            <div class="select">
                            <select name="section_id[]" style="border-radius: 0;" id="section_id" class="section-select" 
                        data-row-index="{{ $loop->index }}">
                                <option value="">Select Section</option>
                                @foreach($sections as $section)
                                    <option value="{{ $section->id }}" 
                                        {{ $q->section_id == $section->id ? 'selected' : '' }}>
                                        {{ $section->name }}
                                    </option>
                                @endforeach
                            </select>
                            </div>
                        </div>
            
        </td>
       
            
            <td>
               
                <div class="control" style="font-size: 10px;">
                            <div class="select">
                <select name="subsection_id[]" style="border-radius: 0;" id="subsection_id" class="subsection-select" 
                        data-row-index="{{ $loop->index }}">
       
            
                <option value="{{ $q->subsection_id }}" >
                   
                {{ $q->subsection }}
                </option>
            
      
    </select>
    </div>
    </div>

    


            </td>
            <td>
            <input type="text" name="level[]" value="{{ $q->level }}" style="width: 50px;border-radius: 0;" class="input is-small" />
        
            </td>
           
            <td>
                <!--
                <input type="text" name="q2[]" value="{{ $q->has_q2 }}" style="width: 50px;border-radius: 0;" class="input is-small" />{{ $q->number }}
-->
<span style="padding-right:4px">{{ $q->number }}</span>
                
<input type="checkbox" name="has_q2[{{$q->id}}]" value="1" {{ $q->has_q2 == 1 ? 'checked' : '' }}>


            
            </td>
            <td>
                <input type="hidden" name="question_ids[]" value="{{ $q->id }}">
                <a href="{{ route('questions.view', ['ukey' => $q->ukey]) }}" style="border-radius: 0;" class="button is-small is-primary">Edit</a>
                {{-- 
                Uncomment below if you want delete functionality:
                <form action="{{ route('papers.removeQuestion.post',['id'=>$id ,'question_id'=>$q->id]) }}" method="POST" style="display:inline;">
                    @csrf
                    <button type="submit" class="button is-small is-danger">Delete</button>
                </form> 
                --}}
            </td>
        </tr>
        @endforeach
    </tbody>
</table>


         

      
    <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>

@php
$filteredQuestions = $questions->mapWithKeys(function ($question) {
    return [$question->number => $question->id];
});

    @endphp


    <style>
      

        table {
            font-size:11px;
        }
    </style> 

<div>{{ json_encode($filteredQuestions) }}
</div>

<script>
$(document).ready(function() {
    // Handle section change for any row
    $(document).on('change', '.section-select', function() {
        const sectionId = $(this).val();
        const rowIndex = $(this).data('row-index');
        const subsectionSelect = $(`.subsection-select[data-row-index="${rowIndex}"]`);
        
        if (sectionId) {
            subsectionSelect.html('<option value="">Loading...</option>');
            
            $.ajax({
                url: 'https://www.ganithaya.com/dev/mcq/admin/public/get-subsections/' + sectionId,
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    subsectionSelect.empty();
                    
                    if (data.length > 0) {
                        $.each(data, function(key, value) {
                            subsectionSelect.append(
                                $('<option></option>').attr('value', value.id).text(value.name)
                            );
                        });
                    } else {
                        subsectionSelect.append(
                            $('<option></option>').attr('value', '').text('No subsections available')
                        );
                    }
                },
                error: function() {
                    subsectionSelect.empty().append(
                        $('<option></option>').attr('value', '').text('Error loading subsections')
                    );
                }
            });
        } else {
            subsectionSelect.empty().append(
                $('<option></option>').attr('value', '').text('Select Section First')
            );
        }
    });
});
</script>

@endsection