@extends('layouts.master')

@section('content')
  <div class="cover-image"></div>
  <div class="page-description">
    @if ($step === 1)
      @lang('descriptions.monothema-quiz.crud')
    @elseif ($step === 18)
      @lang('descriptions.monothema-quiz.request-approval')
    @endif
  </div>
  <div class="page-content">
    @if (Helper::createMode())
      @if (isset($quiz))
        <form method="POST" action="{{ route('monothema-quiz.store') }}" class="quiz-form model" enctype="multipart/form-data" accept-charset="UTF-8">
          <p></p>
        @else
          <form method="POST" action="{{ route('monothema-quiz.store') }}" class="quiz-form" enctype="multipart/form-data" accept-charset="UTF-8">
      @endif
    @elseif (Helper::editMode())
      <form method="POST" action="{{ route('monothema-quiz.update', $quiz->id) }}" class="quiz-form" enctype="multipart/form-data" accept-charset="UTF-8">
    @endif
    @csrf
    <div class="form-container">
      <div class="quiz-container">
        @php
          $image_URL = '';
          $question = '';
          $answer_1 = '';
          $answer_2 = '';
          $answer_3 = '';
          $selected_answer = 0;

          if (isset($quiz)) {
              if ($step === 1) {
                  $image_URL = Helper::getScalaMediaThumbnail($quiz->image);
              } elseif ($step >= 2 && isset($quiz->all_questions[$step - 2])) {
                  $context = $quiz->all_questions[$step - 2];
                  $question = $context['question'];
                  $answer_1 = $context['answer_1'];
                  $answer_2 = $context['answer_2'];
                  $answer_3 = $context['answer_3'];
                  $selected_answer = (int) $context['selected_answer'];
              }
          }
        @endphp
        <input type="hidden" name="step" value="{{ !empty($step) ? $step : '' }}">
        <input type="checkbox" name="go-next" value="1" id="go-next" class="hidden">

        @if ($step === 1)
          <input type="hidden" name="image" class="quiz-image-input">
          <div class="form-group @if ($errors->has('preset_name')) has-error @endif">
            <div class="form-control-title">
              <span>Vorlagenname:</span>
            </div>
            <input type="text" name="preset_name" class="preset-name" value="{{ !empty($quiz->preset_name) ? $quiz->preset_name : old('preset_name') }}">
          </div>
          <div class="form-group @if ($errors->has('title')) has-error @endif">
            <div class="form-control-title">
              <span>Tragen Sie hier die Überschrift ein:</span>
            </div>
            <div class="form-control-hint">(Diese kann zweizeilig angezeigt werden. Nutzen Sie die Enter-Taste, um ihre Überschrift umzubrechen.)</div>
            <textarea name="title" class="quiz-title" placeholder="..." maxlength="100"></textarea>
          </div>
          <div class="form-group @if ($errors->has('theme')) has-error @endif">
            <div class="form-control-title">
              <span>Tragen Sie hier das Oberthema Ihres Quizes ein:</span>
            </div>
            <div class="form-control-hint">(Das Oberthema ist <u>keine Überschrift</u> und sollte idealerweise nur aus einem Wort bestehen.)</div>
            <input type="text" name="theme" class="quiz-theme" placeholder="..." maxlength="30" value="{{ !empty($quiz->theme) ? $quiz->theme : old('theme') }}">
          </div>
          <div class="form-group image-placeholder-area">
            <div class="form-control-title">
              <span>Wählen Sie ein Hintergrundbild aus:</span>
              <!-- <a role="button" tabindex="0" data-placement="bottom" data-trigger="focus" data-toggle="popover" data-content="Alle Bilder unterliegen Bildrechten und wir haben für unsere Werbemittel darüber hinaus einen hohen Qualitätsanspruch. Daher ist es an dieser Stelle nicht möglich, eigene Bilder hochzuladen." class="glyphicon glyphicon-info-sign" aria-hidden="true" data-original-title="Bildrechte">
                                      <i class="material-icons">info</i>
                                  </a> -->
            </div>
            <div class="form-control-hint">(Dieses wird prominent über die ganze Fläche des Bildschirmes angezeigt.)</div>
            <div class="form-group image-placeholder quiz-image @if ($errors->has('image')) has-error @endif" style="background-image: url({{ $image_URL }})">
              <div class="grey-button select-new-image select-quiz-image">Bilddatenbank</div>
            </div>
          </div>
        @elseif ($step === 18)
          <input type="checkbox" name="approval" value="1" id="approval" class="hidden">
          @include ('partials.quiz_preview')
          <div class="approval-options">
            @include ('partials.approvers')
          </div>
        @else
          <div class="form-group @if ($errors->has('question')) has-error @endif">
            <div class="form-control-title">
              <span>Tragen Sie hier Frage {{ $step - 1 }} ein:</span>
            </div>
            <div class="form-control-hint">(Achten Sie bitte darauf, dass die Frage einfach und klar formuliert ist.)</div>
            <textarea name="question" class="quiz-question" placeholder="..." maxlength="100">{{ !empty($question) ? $question : '' }}</textarea>
          </div>
          <div class="answers-block">
            <div class="form-group @if ($errors->has('answer_1')) has-error @endif">
              <div class="form-control-title">
                <span>Tragen Sie hier Antwortmöglichkeit A ein:</span>
              </div>
              <input type="text" name="answer_1" value="{{ !empty($answer_1) ? $answer_1 : '' }}" class="quiz-answer" placeholder="..." maxlength="50">
            </div>
            <div class="form-group @if ($errors->has('answer_2')) has-error @endif">
              <div class="form-control-title">
                <span>Tragen Sie hier Antwortmöglichkeit B ein:</span>
              </div>
              <input type="text" name="answer_2" value="{{ !empty($answer_2) ? $answer_2 : '' }}" class="quiz-answer" placeholder="..." maxlength="50">
            </div>
            <div class="form-group @if ($errors->has('answer_3')) has-error @endif">
              <div class="form-control-title">
                <span>Tragen Sie hier Antwortmöglichkeit C ein:</span>
              </div>
              <input type="text" name="answer_3" value="{{ !empty($answer_3) ? $answer_3 : '' }}" class="quiz-answer" placeholder="..." maxlength="50">
            </div>
          </div>
          <div class="answer-selection-block @if ($errors->has('selected_answer')) has-error @endif">
            @for ($i = 1; $i <= 3; $i++)
              @php
                $value = null;
                if ($i === $selected_answer) {
                    $value = true;
                }
              @endphp
              <div class="custom-control custom-radio">
                <input type="radio" name="selected_answer" value="{{ !empty($i) ? $i : '' }}" @if ($value) checked @endif id="selected-answer-"
                  class="custom-control-input form-check-input">
                <label class="custom-control-label form-label" for="selected-answer-{{ $i }}">Dies ist die richtige Antwort:</label>
              </div>
            @endfor
          </div>
        @endif
      </div>
    </div>
    <div class="action-buttons">
      <button type="submit" class="red-button quiz-save-and-close">@lang('generic.btn-save-close')</button>
      @if ($step === 18)
        <button type="submit" class="quiz-save-and-send-approval red-button">@lang('generic.btn-save-send-approval')</button>
      @else
        <button type="submit" class="quiz-go-to-next-step red-button">
          @if ($step === 17)
            @lang('generic.btn-preview-approval')
          @else
            WEITER ZUR {{ $step }}. FRAGE
          @endif
        </button>
      @endif
    </div>
    </form>
  </div>
@endsection

@section('back_button')
  @if (Gate::allows('admin-mode'))
    @if ($step === 1)
      <a href="{{ route('monothema-quiz.index') }}" class="grey-button">Zurück</a>
    @else
      @if (Helper::createMode())
        <a href="{{ route('monothema-quiz.create.step', [$step - 1]) }}" class="grey-button">Zurück</a>
      @elseif (Helper::editMode())
        <a href="{{ route('monothema-quiz.edit.step', [$quiz->id, $step - 1]) }}" class="grey-button">Zurück</a>
      @endif
    @endif
  @else
    <a href="{{ route('monothema') }}" class="grey-button">Zurück</a>
  @endif
@endsection