@extends('layouts.master')

@section('content')
  <div class="cover-image"></div>
  <div class="page-description">
    @if ($step === 1)
      @lang('descriptions.monothema-detailed-voting.crud')
    @elseif ($step === 2)
      @lang('descriptions.monothema-detailed-voting.request-approval')
    @endif
  </div>
  <div class="page-content">
    @if (Helper::createMode())
      @if (isset($voting))
        <form method="POST" action="{{ route('monothema-detailed-voting.store') }}" class="monothema-detailed-voting-form model" enctype="multipart/form-data"
          accept-charset="UTF-8">
        @else
          <form method="POST" action="{{ route('monothema-detailed-voting.store') }}" class="monothema-detailed-voting-form" enctype="multipart/form-data"
            accept-charset="UTF-8">
      @endif
    @elseif (Helper::editMode())
      <form method="POST" action="{{ route('monothema-detailed-voting.update', $voting->id) }}" class="monothema-detailed-voting-form"
        enctype="multipart/form-data" accept-charset="UTF-8">
    @endif
    @csrf
    @php
      for ($i = 1; $i <= 6; $i++) {
          ${"option_title_$i"} = '';
          ${"option_description_$i"} = '';
          ${"option_image_$i"} = '';
          ${"option_image_URL_$i"} = '';
      }
      if (isset($voting)) {
          if (isset($voting->option_list) && count($voting->option_list) > 0) {
              for ($i = 1; $i <= 6; $i++) {
                  if (isset($voting->option_list[$i - 1])) {
                      ${"option_title_$i"} = $voting->option_list[$i - 1]['title'];
                      ${"option_description_$i"} = $voting->option_list[$i - 1]['description'];
                      ${"option_image_$i"} = $voting->option_list[$i - 1]['image'];
                  }
              }
          }
      } else {
          for ($i = 1; $i <= 6; $i++) {
              if (old("option-title-$i")) {
                  ${"option_title_$i"} = old("option-title-$i");
              }
              if (old("option-description-$i")) {
                  ${"option_description_$i"} = old("option-description-$i");
              }
              if (old("option-image-$i")) {
                  ${"option_image_$i"} = old("option-image-$i");
              }
          }
      }
      // Collection all media ids from all the options
      $option_image_ids = [];
      for ($i = 1; $i <= 6; $i++) {
          if (${"option_image_$i"} !== '') {
              $option_image_ids[] = ${"option_image_$i"};
          }
      }
      // Get thumbnails for all the option images via IDs
      $thumbnails = Helper::getScalaMediaThumbnailList($option_image_ids);
      for ($i = 1; $i <= 6; $i++) {
          foreach ($thumbnails as $thumbnail) {
              if ((int) ${"option_image_$i"} === (int) $thumbnail['id']) {
                  ${"option_image_URL_$i"} = $thumbnail['thumbnail'];
                  break;
              }
          }
      }
    @endphp
    <div class="form-container">
      <div class="monothema-detailed-voting-container">
        @if ($step === 1)
          <!-- Tracking -->
          <input type="hidden" name="template_id">
          <input type="hidden" name="template_name">
          <input type="hidden" name="category_id">
          <input type="hidden" name="sub_category_id">

          <input type="hidden" name="step" value="1">
          <input type="checkbox" name="go-to-preview" value="1" id="go-to-preview" class="hidden">
          <div class="form-group @if ($errors->has('title')) has-error @endif">
            <div class="form-control-title">
              <span>Tragen Sie hier die Aufforderung zur Abstimmung ein:</span>
            </div>
            <div class="form-control-hint">z.B. "Stimmen Sie hier ab, welcher Verein 1.000 Euro bekommen soll.</div>
            <input type="text" name="title" class="monothema-detailed-voting-title form-control" placeholder="..." maxlength="75" value="{{ !empty($voting->title) ? $voting->title : old('title') }}">
          </div>
          <div class="form-group @if ($errors->has('description')) has-error @endif">
            <div class="form-control-title">
              <span>Beschreiben Sie hier die Details zum Abstimmungsverfahren:</span>
            </div>
            <div class="form-control-hint">z.B. wie lange das Voting läuft, worüber genau abgestimmt wird, etc.</div>
            <textarea name="description" class="monothema-detailed-voting-description" placeholder="..." maxlength="160"></textarea>
          </div>
          @for ($i = 1; $i <= 6; $i++)
            <div class="detailed-voting-option option-{{ $i }}">
              <div class="detailed-voting-option-number">
                Option {{ $i }}
              </div>
              <div class="form-group image-placeholder-area">
                <div class="form-control-title">
                  <span>Wählen Sie ein Bild aus:</span>
                </div>
                <div class="form-group image-placeholder @if ($errors->has('option-image-' . $i)) has-error @endif" style="background-image: url({{ ${"option_image_URL_$i"} }})">
                  <div class="grey-button clear-image" @if (${"option_image_URL_$i"}) style="display: block" @endif>Löschen</div>
                  <div class="grey-button upload-new-image">Eigenes Bild laden</div>
                  <div class="grey-button select-new-image select-detailed-voting-option" position="{{ $i }}">Bilddatenbank</div>
                  <input type="file" name="upload_option_image_'.$i" class="upload-detailed-voting-option-image-" hidden', 'accept="image/*">
                                          <input type="hidden" name="option-image-' .$i" value="{{ !empty(${"option_image_$i"}) ? ${"option_image_$i"} : '' }}"
                    class="option-image-value detailed-voting-option-image-">
                </div>
              </div>
              <div class="form-group @if ($errors->has('option-title-' . $i)) has-error @endif">
                <div class="form-control-title">
                  <span>Tragen Sie hier den Namen der Abstimmungsoption ein:</span>
                </div>
                <input type="text" name="option-title-'.$i" value="{{ !empty(${"option_title_$i"}) ? ${"option_title_$i"} : '' }}"
                  class="monothema-detailed-voting-option-title form-control" placeholder="..." maxlength="50">
              </div>
              <div class="form-group @if ($errors->has('option-description-' . $i)) has-error @endif">
                <div class="form-control-title">
                  <span>Beschreiben Sie hier die Details dieser Option:</span>
                </div>
                <textarea name="option-description-'.$i" class="monothema-detailed-voting-option-description" placeholder="..."
                  maxlength="370">{{ !empty(${"option_description_$i"}) ? ${"option_description_$i"} : '' }}</textarea>
              </div>
            </div>
          @endfor
          <!-- <div class="red-button add-option">+</div> -->
        @elseif ($step === 2)
          <input type="hidden" name="step" value="2">
          <input type="checkbox" name="approval" value="1" id="approval" class="hidden">
          <input type="hidden" name="landscape_preview" value="{{ !empty($previews[0]) ? $previews[0] : '' }}">
          <div class="preview-slideshow">
            <div class="message-preview landscape-preview preview-slide" style="background-image: url({{ $previews[0] }})"></div>
            @for ($i = 0; $i < count($voting->option_list); $i++)
              @if ($voting->option_list[$i]['title'] !== '')
                @php
                  $preview = str_replace('1.png', $i + 3 . '.png', $previews[0]);
                @endphp
                <div class="message-preview landscape-preview preview-slide" style="background-image: url({{ $preview }})"></div>
              @endif
            @endfor
            <div class="show-previous-arrow">
              << Zurück</div>
                <div class="show-next-arrow">Weiter >></div>
            </div>
            <div class="approval-options">
              @include ('partials.approvers')
            </div>
        @endif
      </div>
    </div>
    @include ('partials.action_btns')
    </form>
  </div>
@endsection

@section('back_button')
  @if ($step === 1)
    <a href="{{ route('monothema-detailed-voting.index') }}" class="grey-button">Zurück</a>
  @elseif ($step === 2)
    @if (Helper::createMode())
      <a href="{{ route('monothema-detailed-voting.create.step-1') }}" class="grey-button">Zurück</a>
    @elseif (Helper::editMode())
      <a href="{{ route('monothema-detailed-voting.edit.step-1', $voting->id) }}" class="grey-button">Zurück</a>
    @endif
  @endif
@endsection