@extends('layouts.app')

@section('content')
<div class="contents">
   <div class="crm mb-25">
<div class="container-fluid">
       <h2 class="breadcrumb-title mb-4">Add New Question</h2>
    <form method="POST" action="{{ route('questions.store') }}">
        @csrf
            <div class="row">
                    <div class="col-md-6 mb-3">
            <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>
                <option value="">Select an Option</option>
                @foreach(questionaire() as $s)
                    <option value="{{ $s->id }}">
                        {{ $s->title }}
                    </option>
                @endforeach
            </select>
                    </div>
                     <div class="col-md-6 mb-3" 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">
                <option value="">Select Section</option>
                @foreach($sections as $s)
                    <option value="{{ $s->id }}">{{ $s->name }}</option>
                @endforeach
            </select>
        </div>
  <div class="col-md-6 mb-3">
             <label for="category_name" class="il-gray fs-14 fw-500 align-center mb-2">Question Text</label>
            <textarea name="question_text" class="form-control ih-medium ip-light radius-xs b-light px-15" rows="2" required></textarea>
        </div>

  <div class="col-md-6 mb-3">
            <label for="category_name" class="il-gray fs-14 fw-500 align-center mb-2">Question Type</label>
            <select name="question_type" class="form-control ih-medium ip-light radius-xs b-light px-15">
                <option value="radio">Radio</option>
                <option value="objective">Objective</option>
                <option value="multiselect">Multiselect</option>
                <option value="text">Text</option>
            </select>
        </div>
            </div>

        {{-- Dynamic Options --}}
        <div class="mb-3">
            <div id="option-wrapper">
                <div class="d-flex mb-2 option-item">
                    <input type="text" name="options[]" class="form-control ih-medium ip-light radius-xs b-light me-2" placeholder="Enter option text">
                    <button type="button" class="btn btn-danger remove-option">X</button>
                </div>
            </div>
         
        </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</button>
                        <button type="submit" class="btn btn-primary btn-squared">Save Question</button>
  
                 </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