@extends('backend.layout.app')

@section('content')
<div class="page-content">
  <div class="container-fluid">

    <div class="card shadow-md border-0 rounded-4">
      <div class="card-header bg-warning d-flex justify-content-between align-items-center">
        <h4 class="mb-0 text-dark">Edit Quiz</h4>
      </div>

      <div class="card-body p-4">
        <form action="{{ route('admin.quiz.update', $quiz->id) }}" method="POST" id="quizForm">
          @csrf
          @method('PUT')

          <!-- Course & Module -->
          <div class="row mb-3">
            <div class="col-md-6">
              <label class="form-label">Course <span class="text-danger">*</span></label>
              <select id="course_id" name="course_id" class="form-select select2" required>
                <option value="">-- Choose Course --</option>
                @foreach ($courses as $course)
                  <option value="{{ $course->id }}" {{ $quiz->module->course_id == $course->id ? 'selected' : '' }}>
                    {{ $course->title }}
                  </option>
                @endforeach
              </select>
            </div>

            <div class="col-md-6">
              <label class="form-label">Module <span class="text-danger">*</span></label>
              <select id="module_id" name="module_id" class="form-select select2" required>
                @foreach ($modules as $module)
                  <option value="{{ $module->id }}" {{ $quiz->module_id == $module->id ? 'selected' : '' }}>
                    {{ $module->title }}
                  </option>
                @endforeach
              </select>
            </div>
          </div>

          <!-- Quiz Title -->
          <div class="mb-4">
            <label for="quizTitle" class="form-label fw-semibold">Quiz Title</label>
            <input type="text" class="form-control" id="quizTitle" name="title" value="{{ $quiz->title }}" required>
          </div>

          <!-- Existing Questions -->
          <div id="questionsWrapper">
            @foreach ($quiz->questions as $index => $q)
              <div class="question-block border rounded-3 p-3 mb-4 bg-light position-relative">
                <button type="button" class="btn-close position-absolute top-0 end-0 m-2 remove-question" aria-label="Remove"></button>
                <h6 class="fw-bold mb-3">Question {{ $index + 1 }}</h6>

                <div class="mb-3">
                  <label class="form-label">Question</label>
                  <textarea class="form-control" name="questions[{{ $index }}][question]" rows="2" required>{{ $q->question }}</textarea>
                </div>

                <label class="form-label">Options</label>
                @for ($i = 1; $i <= 4; $i++)
                  <div class="input-group mb-2">
                    <div class="input-group-text">
                      <input class="form-check-input mt-0" type="radio"
                        name="questions[{{ $index }}][correct_answer]"
                        value="option_{{ $i }}"
                        {{ $q->correct_answer == "option_$i" ? 'checked' : '' }} required>
                    </div>
                    <input type="text" class="form-control" name="questions[{{ $index }}][option_{{ $i }}]"
                      value="{{ $q['option_'.$i] }}" placeholder="Option {{ $i }}" required>
                  </div>
                @endfor
              </div>
            @endforeach
          </div>

          <!-- Buttons -->
          <div class="d-flex justify-content-between align-items-center mt-4">
            <button type="button" id="addQuestionBtn" class="btn btn-primary fw-semibold">
              + Add Question
            </button>
            <div>
              <button type="reset" class="btn btn-outline-secondary me-2">Reset</button>
              <button type="submit" class="btn btn-success">Update Quiz</button>
            </div>
          </div>
        </form>
      </div>
    </div>

  </div>
</div>
@endsection

@push('js')
<script>
$(document).ready(function() {
  let questionIndex = {{ $quiz->questions->count() }};

  $('#addQuestionBtn').click(function() {
    let newQuestion = `
      <div class="question-block border rounded-3 p-3 mb-4 bg-light position-relative">
        <button type="button" class="btn-close position-absolute top-0 end-0 m-2 remove-question"></button>
        <h6 class="fw-bold mb-3">Question ${questionIndex + 1}</h6>
        <div class="mb-3">
          <label class="form-label">Question</label>
          <textarea class="form-control" name="questions[${questionIndex}][question]" rows="2" placeholder="Enter question" required></textarea>
        </div>
        <label class="form-label">Options</label>
        ${[1,2,3,4].map(i => `
          <div class="input-group mb-2">
            <div class="input-group-text">
              <input class="form-check-input mt-0" type="radio" name="questions[${questionIndex}][correct_answer]" value="option_${i}" required>
            </div>
            <input type="text" class="form-control" name="questions[${questionIndex}][option_${i}]" placeholder="Option ${i}" required>
          </div>
        `).join('')}
      </div>
    `;
    $('#questionsWrapper').append(newQuestion);
    questionIndex++;
  });

  $(document).on('click', '.remove-question', function() {
    $(this).closest('.question-block').remove();
  });
});
</script>
@endpush