@extends('layouts.master')

@section('content')
  <div class="container">
    @include('pages.auth.question.delete-item-modal')
    @include('pages.auth.question.add-item-modal')
    @include('pages.auth.question.default-row-answer')
    @include('layouts.page-header')
    {{ $questions->links() }}
    <form action="" method="POST" id="saveChangesForm">
      @csrf
      <div class="col text-center mt-3 mb-3">
        <div class="d-grid gap-2 d-sm-block">
          <a href="/scoring/management">Assessment Scoring Configuration</a>
        </div>
      </div>

      <div class="col text-center mt-3 mb-3">
        <div class="d-grid gap-2 d-sm-block">
          <button type="submit" class="btn btn-primary btn-sm">Save Changes</button>
          <button type="button" class="btn btn-primary btn-sm addNewQuestion">Add New Question</button>
        </div>
      </div>

      <div class="col-6 text-center mt-3 mb-3">
        <div class="form-floating">
          <select class="form-select" id="filterBy">
            <option value="all" selected>All Compentencies</option>
            @foreach($competencies as $competency)
              <option value="{{ $competency->id }}" {{ (int)$filterBy === $competency->id ? 'selected' : '' }}>{{ $competency->name }}</option>
            @endforeach
          </select>
          <label for="filterBy">Filter By</label>
        </div>
      </div>
      <div class="col-6"></div>

      @foreach($questions as $questionKey => $question)
                                <div class="row questionContainer" id="questionContainer{{ $question->question_id }}">
          <div class="col-12 mb-3">
            <h4>Question {{ $questionKey + 1 }} <button type="button" class="btn btn-danger btn-sm deleteQuestionBtn" questionId="{{ $question->question_id }}">Delete</button></h4>
            
            @if($isInterview)
              <div class="col-6 mb-2">
                <div class="form-floating">
                  <input value="{{ $question->question_name ?? '' }}" name="question[{{ $question->question_id }}][name]" id="questionName{{ $question->question_id }}" class="form-control" placeholder="Name..." required>
                  <label for="questionName{{ $question->question_id }}">Name...</label>
                </div>
              </div>
              
              <div class="col-12 mb-2">
                <div class="form-floating">
                  <textarea name="question[{{ $question->question_id }}][description]" id="questionDescription{{ $question->question_id }}" class="form-control" placeholder="Description..." required>{{ $question->question_description ?? '' }}</textarea>
                  <label for="questionDescription{{ $question->question_id }}">Description...</label>
                </div>
              </div>
            @endif
            <div class="col-12 mb-2">
              <div class="form-floating">
                <textarea name="question[{{ $question->question_id }}][questionText]" id="questionText{{ $question->question_id }}" class="form-control" placeholder="Question..." required>{{ $question->question_text ?? '' }}</textarea>
                <label for="questionText{{ $question->question_id }}">Question Text...</label>
              </div>
            </div>
          </div>

          <div class="col-6 mt-2 table-responsive">
            <table question-id="{{ $question->question_id }}">
              <thead>
                @if($isInterview)
                  <tr>
                    <th colspan="2">
                      <label for="selectionType{{ $question->question_id }}">Selection Type</label>
                      <select class="form-select form-select-sm" name="question[{{ $question->question_id }}][selectionType]" id="selectionType{{ $question->question_id }}" required>
                          <option value="{{ App\Models\Question::TYPE_SELECT_OF_ANSWER_CHECKBOX }}" {{ $question->question_type_selection === App\Models\Question::TYPE_SELECT_OF_ANSWER_CHECKBOX ? 'selected' : '' }}>Multiple</option>
                          <option value="{{ App\Models\Question::TYPE_SELECT_OF_ANSWER_RADIO }}" {{ $question->question_type_selection === App\Models\Question::TYPE_SELECT_OF_ANSWER_RADIO ? 'selected' : '' }}>Single</option>
                      </select>
                    </th>
                  </tr>
                @endif
                <tr style="vertical-align: bottom;">
                  <th colspan="2">
                    <label for="competencyId{{ $question->question_id }}">Related To</label>
                    <select class="form-select form-select-sm" name="question[{{ $question->question_id }}][competencyId]" id="competencyId{{ $question->question_id }}" required>
                      @foreach($competencies as $competency)
                        <option value="{{ $competency->id }}" {{ $question->competency_id === $competency->id ? 'selected' : '' }}>{{ $competency->name }}</option>
                      @endforeach
                    </select>
                  </th>
                </tr>
              </thead>
            </table>
            
          </div>

          <div class="col-6 mt-2 table-responsive">

            <table question-id="{{ $question->question_id }}">
              <thead>
                <tr class="text-center">
                  <th>Answers</th>
                  <th>Scale</th>
                </tr>
              </thead>
              <tbody>

                @foreach($questionAnswerIds as $questionAnswerKey => $questionAnswerId)
                <tr>
                  <td>
                    <input name="question[{{ $question->question_id }}][{{ $questionAnswerId }}][answer]" type="text" class="form-control form-control-sm" value="{{ $questionAnswerTexts[$questionAnswerKey] }}">
                  </td>
                  <td>
                    <select class="form-select form-select-sm" name="question[{{ $question->question_id }}][{{ $questionAnswerId }}][scale]">
                      <option value="1" {{ (int)$questionAnswerScales[$questionAnswerKey] === 1 ? 'selected' : '' }}>1</option>
                      <option value="2" {{ (int)$questionAnswerScales[$questionAnswerKey] === 2 ? 'selected' : '' }}>2</option>
                      <option value="3" {{ (int)$questionAnswerScales[$questionAnswerKey] === 3 ? 'selected' : '' }}>3</option>
                      <option value="4" {{ (int)$questionAnswerScales[$questionAnswerKey] === 4 ? 'selected' : '' }}>4</option>
                      <option value="5" {{ (int)$questionAnswerScales[$questionAnswerKey] === 5 ? 'selected' : '' }}>5</option>
                      <option value="6" {{ (int)$questionAnswerScales[$questionAnswerKey] === 6 ? 'selected' : '' }}>6</option>
                    </select>
                  </td>
                </tr>
                @endforeach
              </tbody>
              <tfoot>
                <tr>
                  <td colspan="2" class="text-center">
                    <button type="button" questionId="{{ $question->question_id }}" class="btn btn-primary btn-sm addAnswer {{ count($questionAnswerIds) < 6 ? '' : 'd-none' }}">Answer +</button>
                    <button type="button" questionId="{{ $question->question_id }}" class="btn btn-danger btn-sm removeAnswer {{ count($questionAnswerIds) > 2 ? '' : 'd-none'}}">Answer -</button>
                  </td>
                </tr>
              </tfoot>
            </table>
            
          </div>

        </div>
      @endforeach

      <div class="col text-center mt-3 mb-3">
        <div class="d-grid gap-2 d-sm-block">
          <button type="submit" class="btn btn-primary btn-sm">Save Changes</button>
          <button type="submit" class="btn btn-primary btn-sm">Add New Question</button>
        </div>
      </div>
    </form>
  </div>
@stop

@section('footer-scripts')
  <script src="{{ asset('js/masterItemConfig.js') }}"></script>
@endsection