@extends('layouts.master')

@section('content')
  <div class="container">
    @include('pages.auth.assessment.details')
  </div>
@stop

@section('sub-content')
  <div class="view-assessments-content">
    @include('pages.auth.assessment.view-navs')
    <div class="view-assessment-form {{ $pageName }}">
      <div class="row">
        <div class="col text-center text-lg-end">
          <a href="/">
            <img class="img-fluid" src="{{ URL::to('/') }}/images/common/leadershipedge-logo.jpg" alt="Image"/>
          </a>
        </div>
      </div>
      <div class="row text-center">
        <div class="col">
          <h2>Behavioral Interview Questions</h2>
        </div>
      </div>
      <form class="{{ $assessment->stage === App\Models\Assessment::STAGE_COMPLETED ? 'form-disable' : '' }}" id="interviewForm" action="/assessment/{{ $assessment->id }}/interview" method="post">
        @csrf
        <div class="accordion">
          @foreach($interviewQuestions as $interviewQuestion)
            <div class="accordion-item">
              <h2 class="accordion-header">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#relationshipGroup" aria-expanded="true" aria-controls="relationshipGroup">
                  {{ $interviewQuestion['question']->question_name}}
                </button>
              </h2>
              <div id="relationshipGroup" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
                <div class="accordion-body">
                  <div class="row">
                    <div class="col-lg-10 offset-lg-1">
                      <div class="description">{{ $interviewQuestion['question']->description}}</div>
                      <div class=question-text>{{ $interviewQuestion['question']->question_text}}</div>
                      <div class="list-group">
                        @foreach($interviewQuestion['answers'] as $answerOption)
                          <label class="list-group-item">
                            <input class="form-check-input me-1" type="checkbox" value="{{ $answerOption->id }}" name="question[{{$interviewQuestion['question']->id}}][]" {{ $answerOption->isChecked ? 'checked' : '' }}>
                            {{ $answerOption->answer_text }}
                          </label>
                        @endforeach
                      </div>
                      <div class="form-floating mt-3">
                        <textarea name="question[{{$interviewQuestion['question']->id}}][desc]" class="form-control" placeholder="Leave a comment here" id="descriptionQuestion{{$interviewQuestion['question']->id}}">{{ $interviewQuestion['question']->comments ?? '' }}</textarea>
                        <label for="descriptionQuestion{{$interviewQuestion['question']->id}}">Leave a comment here</label>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          @endforeach
        </div>
        <div class="mt-4 row">
          <div class="col text-center">
            <div class="d-grid gap-2 d-md-block">
              <button type="submit" class="btn btn-primary btn-lg">Save Changes</button>
              <button id="saveAndMoveBtn" type="button" class="btn btn-primary btn-lg">Save Changes And Move To Next Stage</button>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
@stop

@section('footer-scripts')
  <script type="text/javascript">
    $(document).ready(function() {
      var redirect = false
      $('#saveAndMoveBtn').click(function() {
        redirect = true
        $('#interviewForm').submit()
      })

      $('#interviewForm').on('submit', function () {
        $('#global-loading').removeClass('d-none').addClass('d-block')
        if (redirect) {
          var input = $('<input>')
            .attr('type', 'hidden')
            .attr('name', 'redirect')
            .val(true);
          $('#interviewForm').append(input)
        }
        return true
      })
    })
  </script>
@endsection