@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-primary d-flex justify-content-between align-items-center">
        <h4 class="mb-0 text-white">Create Exam</h4>
      </div>

      <div class="card-body p-4">
        <form action="{{route('admin.exam.store')}}" method="POST" id="examForm">
          @csrf
          <div class="row mb-3">
            <!-- Course -->
            <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 @error('course_id') is-invalid @enderror" required>
                <option value="">-- Choose Course --</option>
                @foreach ($courses as $course)
                  <option value="{{ $course->id }}" {{ old('course_id') == $course->id ? 'selected' : '' }}>
                    {{ $course->title }}
                  </option>
                @endforeach
              </select>
              @error('course_id')
                <div class="invalid-feedback">{{ $message }}</div>
              @enderror
            </div>

            <!-- Exam Title -->
            <div class="col-md-6">
              <label class="form-label">Exam Title <span class="text-danger">*</span></label>
              <input type="text" name="title" class="form-control @error('title') is-invalid @enderror"
                placeholder="Enter exam title" value="{{ old('title') }}" required>
              @error('title')
                <div class="invalid-feedback">{{ $message }}</div>
              @enderror
            </div>
          </div>


          <div class="row mb-3">
            <!-- Start Time -->
            <div class="col-md-6">
              <label class="form-label">Start Time <span class="text-danger">*</span></label>
              <input type="datetime-local" name="start_time"
                class="form-control @error('start_time') is-invalid @enderror"
                value="{{ old('start_time') }}" required>
              @error('start_time')
                <div class="invalid-feedback">{{ $message }}</div>
              @enderror
            </div>

            <!-- End Time -->
            <div class="col-md-6">
              <label class="form-label">End Time <span class="text-danger">*</span></label>
              <input type="datetime-local" name="end_time"
                class="form-control @error('end_time') is-invalid @enderror"
                value="{{ old('end_time') }}" required>
              @error('end_time')
                <div class="invalid-feedback">{{ $message }}</div>
              @enderror
            </div>
          </div>

          <div class="row mb-3">
            <!-- Duration -->
            <div class="col-md-4">
              <label class="form-label">Duration (Minutes) <span class="text-danger">*</span></label>
              <input type="number" name="duration_minutes"
                class="form-control @error('duration_minutes') is-invalid @enderror"
                placeholder="e.g. 60" value="{{ old('duration_minutes') }}" required>
              @error('duration_minutes')
                <div class="invalid-feedback">{{ $message }}</div>
              @enderror
            </div>

        

            <!-- Total Marks -->
            <div class="col-md-4">
              <label class="form-label">Total Marks <span class="text-danger">*</span></label>
              <input type="number" name="total_marks"
                class="form-control @error('total_marks') is-invalid @enderror"
                placeholder="e.g. 100" value="{{ old('total_marks') }}" required>
              @error('total_marks')
                <div class="invalid-feedback">{{ $message }}</div>
              @enderror
            </div>
   <!-- Status -->
          <div class="mb-4 col-md-4">
            <label class="form-label">Status <span class="text-danger">*</span></label>
            <select name="status" class="form-select @error('status') is-invalid @enderror" required>
              <option value="draft" {{ old('status') == 'draft' ? 'selected' : '' }}>Draft</option>
              <option value="active" {{ old('status') == 'active' ? 'selected' : '' }}>Active</option>
              <option value="inactive" {{ old('status') == 'inactive' ? 'selected' : '' }}>Inactive</option>
            </select>
            @error('status')
              <div class="invalid-feedback">{{ $message }}</div>
            @enderror
          </div>

          </div>

       

                        <!-- Question List -->
                        <div id="questionsWrapper">
                            <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 1</h6>

                                <div class="mb-3">
                                    <label class="form-label">Question</label>
                                    <textarea class="form-control" name="questions[0][question]" rows="2" placeholder="Enter question" required></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[0][correct_answer]" value="option_{{ $i }}"
                                                required>
                                        </div>
                                        <input type="text" class="form-control"
                                            name="questions[0][option_{{ $i }}]"
                                            placeholder="Option {{ $i }}" required>
                                    </div>
                                @endfor
                            </div>
                        </div>

                        <div class="d-flex justify-content-between align-items-center mt-4">
                            <!-- Add Question Button -->
                            <button type="button" id="addQuestionBtn" class="btn btn-primary fw-semibold">
                                + Add Question
                            </button>

                          
                        </div>

          <div class="d-flex justify-content-between align-items-center mt-4">
            <button type="reset" class="btn btn-outline-secondary">Reset</button>
            <button type="submit" class="btn btn-primary">Save Exam</button>
          </div>
        </form>
      </div>
    </div>

  </div>
</div>
@endsection

@push('js')
    <script>
        $(document).ready(function() {

            let questionIndex = 1;

            // Add new question
            $('#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" aria-label="Remove"></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++;
            });

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