@push('style')
  <style>
    .cke_notifications_area {
      display: none;
    }
  </style>
@endpush
@php
  use BenSampo\Enum\Enum\AnswerCheckBoxEnum;
@endphp
<div class="row">
  <div class="col">
    <div id="card-container">
      <div class="card text-white bg-primary mb-3">
        <div class="card-header text-right" data-bs-toggle="collapse" href="#collapse1" role="button" aria-expanded="true"
          aria-controls="collapse1">
          <h5 class="card-title">Câu 1</h5>
          <button type="button" class="btn btn-primary add-more" data-modal_name="{{ $modal_name }}" data-count="1">
            Thêm mới <span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                class="bi bi-plus" viewBox="0 0 16 16">
                <path
                  d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4" />
              </svg></span>
          </button>
        </div>
        <div class="collapse show" id="collapse1">
          <div class="card-body bg-white">
            <div class="form-group">
              <label class="mb-2"><span class="text-danger">*</span>Nội dung câu hỏi</label>
              <textarea class="form-control is-invalid" name="question_content" id="question_content_1" cols="30" rows="5"
                placeholder="Nội dung câu hỏi"></textarea>
            </div>
            <div class="form-group">
              <label class="mb-2">Đáp án</label>
              <div class="answer-container" id="answer-container-1">
              </div>
              <textarea class="form-control" name="answer_content" id="answer_content_1" cols="30" rows="10"></textarea>
              <div class="d-flex mt-3 flex-row-reverse gap-3">
                <div class="btn btn-primary btn-add-answer" data-question-id="1">Thêm đáp án</div>
                <div class="btn btn-warning btn-edit-answer d-none">Chỉnh sửa đáp án</div>
                <div class="btn btn-danger btn-cancel d-none">Hủy chỉnh sửa</div>
              </div>
              <input type="text" name="choices" value="" hidden>
            </div>
            <div class="form-group">
              <label class="mb-2">Câu trả lời đúng</label>
              <select class="form-control" name="result" value="">
                <option value="">Câu hỏi tự luận</option>
                <option value="A">A</option>
                <option value="B">B</option>
                <option value="C">C</option>
                <option value="D">D</option>
                <option value="E">E</option>
                <option value="F">F</option>
                <option value="G">G</option>
                <option value="H">H</option>
              </select>
            </div>
            <div class="form-group">
              <label class="mb-2">Giải thích</label>
              <textarea class="form-control" name="explanation" id="explanation_1" cols="30" rows="5"></textarea>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@push('script')
@endpush