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

<div style="display:flex">
  
    <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>


<div style="display: flex; flex-wrap: wrap; gap: 20px; max-width: 100%;">
    @foreach($questions as $q)
    <div style="width: 100%; max-width: 350px; min-width: 300px; margin-bottom: 30px;">
        <h3 style="margin-bottom: 10px;">
            {{ $q->id }} | {{ $q->section }} // {{ $q->subsection }} | Level {{ $q->level }}
        </h3>
        <div style="border: 1px solid #ddd; padding: 10px;">
            <img 
                src="https://physics10000.b-cdn.net/{{$q->id}}-Q-1.png" 
                class="question-image" 
                style="max-width: 100%; height: auto;"
                onerror="this.onerror=null;this.src='https://via.placeholder.com/500x300?text=Image+Not+Available';"
                alt="Question {{ $q->id }}"
            >
        </div>
        @if((int)$q->has_q2===1)
                <div>
                    <img src="https://physics10000.b-cdn.net/{{$q->id}}-Q-2.png" class="question-image">
                </div>
            @endif


            
            <div class="answers-container" style="margin-top: 25px; display: flex; flex-direction: column; gap: 15px;">
    @for($i = 1; $i <= 5; $i++)
        <div class="answer-option" style=" position: relative; border: 1px solid #e0e0e0; border-radius: 0px; background: #f9f9f9;">
            <!-- Answer Image with Error Handling -->
            <div style="">
                <img 
                    src="https://physics10000.b-cdn.net/{{$q->id}}-A-{{$i}}.png" 
                    class="answer-image" 
                    style="max-width: 100%; height: auto;"
                    onerror="this.onerror=null; this.src='{{ asset('images/image-missing.png') }}'"
                    alt="Answer option {{$i}}"
                >
            </div>
            
            <!-- Correct/Wrong Icons -->
            <div class="mark-icon correct-mark" style="display: none; position: absolute; top: 10px; right: 10px;">
                <img src="{{ asset('images/correct.png') }}" width="35px" alt="Correct">
            </div>
            <div class="mark-icon wrong-mark" style="display: none; position: absolute; top: 10px; right: 10px;">
                <img src="{{ asset('images/wrong.png') }}" width="35px" alt="Wrong">
            </div>
        </div>
    @endfor
</div>

    </div>
    @endforeach
</div>


         

   




</form>
                </div>




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

<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