@extends('backend.admin_backend.admin_dashboard')
@section('admin')


<div class="container-fluid" style="background-color:white; width:100%">
    <h4 class="card-title" style="background-color:dodgerblue; padding:15px 5px; color:#fff; text-align:center">
        Update Question
    </h4>

    @if(session('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </div>
    @endif

    <form action="{{ route('admin.cbt.questions.update', $question->id) }}" method="post" enctype="multipart/form-data">
        @csrf




        <div class="form-group">
            <label for="question_text">Question Text</label>
            <textarea name="question_text" class="form-control" required>{{ $question->question_text }}</textarea>
        </div>

        
        <!-- existing image -->
        @if($question->question_image)
       <div class="mb-3">
       <label>Current Image</label><br>

        <img src="{{ asset($question->question_image) }}"
         style="max-width:300px; max-height:250px; border:1px solid #ddd; padding:5px;">
        </div>
        @endif



                    <!-- new image upload -->
                    <div class="form-group">
                <label>Change Question Image</label>
            
                <input type="file"
                       name="question_image"
                       class="form-control"
                       id="question_image">
            
                <small class="text-muted">
                                Leave empty if you don't want to change the image.
                </small>
            </div>


             <div class="mt-2">
                 <img id="previewImage"
                      src="{{ $question->question_image ? asset($question->question_image) : '' }}"
                      style="max-width:300px; display:{{ $question->question_image ? 'block' : 'none' }};">
             </div>



        <div class="form-group">
            <label for="option_a">Option A</label>
            <input type="text" name="option_a" class="form-control" required value="{{ $question->option_a }}">
        </div>

        <div class="form-group">
            <label for="option_b">Option B</label>
            <input type="text" name="option_b" class="form-control" required value="{{ $question->option_b }}">
        </div>

        <div class="form-group">
            <label for="option_c">Option C</label>
            <input type="text" name="option_c" class="form-control" required value="{{ $question->option_c }}">
        </div>

        <div class="form-group">
            <label for="option_d">Option D</label>
            <input type="text" name="option_d" class="form-control" required value="{{ $question->option_d }}">
        </div>

        <div class="form-group">
            <label for="correct_option">Correct Option</label>
            <select name="correct_option" class="form-select" required>
                <option value="A" {{ $question->correct_option == 'a' ? 'selected' : '' }}>A</option>
                <option value="B" {{ $question->correct_option == 'b' ? 'selected' : '' }}>B</option>
                <option value="C" {{ $question->correct_option == 'c' ? 'selected' : '' }}>C</option>
                <option value="D" {{ $question->correct_option == 'd' ? 'selected' : '' }}>D</option>
            </select>
        </div>	

        <div class="form-group">
            <!--<label for="mark">Mark</label> -->
            <input type="hidden" name="mark" class="form-control" required value="{{ $question->mark }}" >
        </div>

        <button type="submit" class="btn btn-primary mt-3">Update Question</button>
    </form>
</div>



<script>
document.getElementById('question_image').addEventListener('change', function(e){

    let reader = new FileReader();

    reader.onload = function(event){

        let img = document.getElementById('previewImage');

        img.src = event.target.result;
        img.style.display = 'block';
    };

    reader.readAsDataURL(e.target.files[0]);
});
</script>
@endsection