@extends('survey::layouts.master')

@inject('helper', 'Modules\Survey\Http\Helpers\ViewHelper')

{{-- Style --}}
@push('links')
<style >
  .hidden{
    display: none;
  }
</style>
@endpush

@section('content')
@include('custom::component.reply-btn', ['url' => route('admin.survey.question.index')])
<div class="row justify-content-center">
  <div class="col-12 col-lg-10">
    <div class="shadow-sm p-3 bg-white rounded-lg pt-4">
      <form method="POST">
        {{csrf_field()}}
        {{-- 標題 --}}
        <div class="form-group row">
          <label class="col-form-label col-12 col-sm-3 text-sm-center">
            <span class="align-middle"><span class="text-red">※&ensp;</span><b>問題</b></span>
          </label>
          <div class="input-group col-12 col-sm-9">
            <input type="text" class="form-control" name="title" value="{{old('title', $question->title)}}"
              required
              {{($count)? 'readonly':''}}
            />
          </div>
        </div>

        {{-- 類型 --}}
        <div class="form-group row">
          <label class="col-form-label col-12 col-sm-3 text-sm-center">
            <span class="align-middle"><span class="text-red">※&ensp;</span><b>題型</b></span>
          </label>
          <div class="col-form-label col-12 col-sm-9">
            @foreach(['single', 'multiple', '5point', 'answer'] as $type)
              <div class="custom-control custom-radio mb-2">
                <input type="radio" class="custom-control-input" name="type" id="type-{{$type}}" value="{{$type}}"
                  {{($type == $question->type)? 'checked':''}}
                  {{($count)? 'disabled':''}}
                />
                <label class="custom-control-label" for="type-{{$type}}">{{config('survey.question_type')[$type]}}</label>
              </div>
            @endforeach
          </div>
        </div>

        {{-- 選項 --}}
        <div class="form-group row">
          <label class="col-form-label col-12 col-sm-3 text-sm-center">
            <span class="align-middle"><span class="text-red">※&ensp;</span><b>選項</b></span>
          </label>
          <div class="col-12 col-sm-9" id="option-block">
            @foreach($question->options as $key => $option)
              <div class="row mb-1 row-option">
                <div class="input-group col-md-12">
                  <div class="input-group-prepend">
                    <span class="input-group-text option-number"></span>
                  </div>
                  <input type="text" class="form-control" name="options[]" value="{{$option}}"
                    {{($count)? 'readonly':''}}
                  />
                  <div class="input-group-append">
                    <button class="btn btn-outline-secondary btn-plus" type="button" {{($count)? 'disabled':''}}>
                      <span class="fa fa-plus fa-fw"></span>
                    </button>
                    <button class="btn btn-outline-secondary btn-minus" type="button" {{($count)? 'disabled':''}}>
                      <span class="fa fa-minus fa-fw"></span>
                    </button>
                  </div>
                </div>
              </div>
            @endforeach
          </div>
        </div>

        {{-- 其他 --}}
        <div class="form-group row other-section @if($question->type!='single'&&$question->type!='multiple') hidden @endif">
          <label class="col-form-label col-12 col-sm-3 text-sm-center">
            <span class="align-middle"><b>啟用其他說明選項</b></span>
          </label>
          @php
          $has_other_des = old('has_other_des',isset($question->has_other_des)?$question->has_other_des:'N')
          @endphp
          <div class="col-form-label col-12 col-sm-9">
            <div class="custom-control custom-radio mb-2">
              <input type="radio" class="custom-control-input" name="has_other_des" id="has_other_des-Y" value="Y"
                {{$has_other_des=='Y'? 'checked':''}}
                {{($count)? 'disabled':''}}
              />
              <label class="custom-control-label" for="has_other_des-Y">是</label>
            </div>
            <div class="custom-control custom-radio mb-2">
              <input type="radio" class="custom-control-input" name="has_other_des" id="has_other_des-N" value="N"
                {{$has_other_des=='N'? 'checked':''}}
                {{($count)? 'disabled':''}}
              />
              <label class="custom-control-label" for="has_other_des-N">否</label>
            </div>
          </div>
        </div>

        {{-- 沒有引用才可以儲存 --}}
        @if(!$count)
        <div class="text-center mt-5">
          <input type="submit" class="btn btn-lg btn-success font-weight-bold submit-btn" name="submit" value="儲存" />
        </div>
        @endif
      </form>
    @if($count)
    <small class="form-text text-danger text-center mb-2">題目有被問卷引用，因此不能修改</small>
    @endif
    </div>
  </div>
</div>

{{-- 引用列表 --}}
@if($question->id)
<div class="row mb-3">
  <div class="col-md-2"></div>
  <div class="col-md-8">
    <div class="card">
      <h5 class="card-header align-middle">引用的問卷</h5>
      <div class="card-body p-3">
        <table class="table table-bordered table-hover">
          <thead class="thead-light">
            <tr>
              <th scope="row">問卷</th>
              <th scope="row">狀態</th>
              <th scope="row">起迄日</th>
              <th scope="row" class="text-center">回答數</th>
              <th scope="row">&ensp;</th>
            </tr>
          </thead>
          <tbody>
            @if(!$count)
            <tr>
              <td colspan="5" class="text-center">尚無問卷</td>
            </tr>
            @endif
            @foreach ($question->surveies as $survey)
            <tr>
              <td class="align-middle">{{$survey->title}}</td>
              <td class="align-middle">{{config('survey.survey_status')[$survey->status]}}</td>
              <td class="align-middle">
                <div>起：{{$helper->formatDate($survey->started_at)}}</div>
                <div>訖：{{$helper->formatDate($survey->finished_at)}}</div>
              </td>
              <td class="align-middle text-center">{{$survey->replies->count()}}</td>
              <td class="text-right">
                <a class="btn btn-dark" href="{{route('admin.survey.show', $survey->id)}}">詳細</a>
              </td>
            </tr>
            @endforeach
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
@endif


<div class="d-none" id="option-sample">
  <div class="row mb-1 row-option">
    <div class="input-group col-md-12">
      <div class="input-group-prepend">
        <span class="input-group-text option-number"></span>
      </div>
      <input type="text" class="form-control" name="options[]" value=""/>
      <div class="input-group-append">
        <button class="btn btn-outline-secondary btn-plus" type="button">
          <span class="fa fa-plus fa-fw"></span>
        </button>
        <button class="btn btn-outline-secondary btn-minus" type="button">
          <span class="fa fa-minus fa-fw"></span>
        </button>
      </div>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<script type="text/javascript" src="{{ Module::asset('survey:js/admin/question/create.js') }}"></script>
<script>
$(document).ready(function() {
  $('[name="type"]').on("click", function() {
      var type = $(this).val();
      $('.other-section').addClass('hidden');
      $('[name=has_other_des]').attr("required",false);
      $("#has_other_des-N").click();
      if (type=='single'||type=='multiple') {
        $('.other-section').removeClass('hidden');
        $('[name=has_other_des]').attr("required",true);
      }
  });
});
</script>
@endpush