@extends('layouts.app')
@section('content')
<div class="contents">
   <div class="crm mb-25">
      <div class="container-fluid">
         <h2 class="breadcrumb-title mb-4">Questionaire</h2>
         <form method="POST" action="{{ route('questions.update', $question->id) }}">
            @csrf @method('PUT')
            <div class="row">
               <div class="col-md-6">
                  <div class="form-group">
                     <label for="category_name" class="il-gray fs-14 fw-500 align-center mb-2">
                     Questionaire
                     </label>
                     <select name="questionnaire_id" id="questionnaire_id" class="form-control ih-medium ip-light radius-xs b-light px-15" required>
                     @foreach(questionaire() as $s)
                     <option value="{{ $s->id }}" {{ $s->id == $question->questionnaire_id ? 'selected' : '' }}>
                     {{ $s->title }}
                     </option>
                     @endforeach
                     </select>
                  </div>
               </div>
                <div class="col-md-6" id="section_wrapper">
                <label for="category_name" class="il-gray fs-14 fw-500 align-center mb-2">Section</label>
               <select name="section_id" class="form-control ih-medium ip-light radius-xs b-light px-15" id="section_id">
               @foreach($sections as $s)
               <option value="{{ $s->id }}" {{ $s->id == $question->section_id ? 'selected' : '' }}>
               {{ $s->name }}
               </option>
               @endforeach
               </select>
                </div>
                          <div class="col-md-6">
                        <label for="category_name" class="mb-2 il-gray fs-14 fw-500 align-center">
                      Question Text
                     </label>

               <textarea name="question_text" class="form-control ih-medium ip-light radius-xs b-light px-15">{{ $question->question_text }}</textarea>
            </div>
            </div>
           
           
            <div class="mb-3">
                  <label for="category_name" class="mb-2 il-gray fs-14 fw-500 align-center">Question Type</label>
               <select name="question_type" class="form-control ih-medium ip-light radius-xs b-light px-15">
               <option value="radio" {{ $question->question_type == 'radio' ? 'selected' : '' }}>Radio</option>
               <option value="objective" {{ $question->question_type == 'objective' ? 'selected' : '' }}>objective</option>
               <option value="text" {{ $question->question_type == 'text' ? 'selected' : '' }}>Text</option>
               </select>
            </div>

            {{-- Dynamic Options --}}
            <div class="mb-3">
               <div id="option-wrapper">
                  @foreach(questionoptions($question->id) as $option)
                  <div class="d-flex mb-2 option-item">
                     <input type="text" name="options[]" class="form-control me-2" value="{{ $option->option_text }}">
                     <button type="button" class="btn btn-danger remove-option">X</button>
                  </div>
                  @endforeach
               </div>
                <div class="d-flex justify-content-between">
                  <a href="{{ route('questions.index') }}" class="btn btn-secondary ">Back</a>
              <div class="d-flex justify-content-end gap-2">
               <button type="button" class="btn btn-primary btn-squared" id="add-option">Add Option <i class="fa-solid fa-plus ms-2"></i></button>
                <button type="submit" class="btn btn-primary btn-squared ">Update Question <i class="fa-solid fa-plus ms-2"></i></button>
              </div>
            </div>
           
            
            </div>
         </form>
      </div>
   </div>
</div>
<script>
   document.getElementById('add-option').addEventListener('click', function() {
       const wrapper = document.getElementById('option-wrapper');
       const div = document.createElement('div');
       div.classList.add('d-flex', 'mb-2', 'option-item');
       div.innerHTML = `
           <input type="text" name="options[]" class="form-control me-2" placeholder="Enter option text">
           <button type="button" class="btn btn-danger remove-option">X</button>
       `;
       wrapper.appendChild(div);
   });
   
   document.addEventListener('click', function(e) {
       if (e.target.classList.contains('remove-option')) {
           e.target.closest('.option-item').remove();
       }
   });
</script>
@endsection