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

{{-- Style --}}
@push('links')
<link href="{{ asset('js/jquery-ui-1.12.1/jquery-ui.min.css') }}" rel="stylesheet" type="text/css">
<link href="{{ asset('js/jquery-ui-1.12.1/jquery-ui.theme.min.css') }}" rel="stylesheet" type="text/css">
@endpush

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

@section('content')
@include('custom::component.reply-btn', ['url' => $back_route])
<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" id="surveyForm">
        {{csrf_field()}}

        @foreach ($formData as $data)
          {!! $helper->render($data) !!}
        @endforeach


        {{-- 說明 --}}
        <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">
            <textarea class="form-control textarea-editer" name="description" rows="5">{{old('description', $survey->description)}}</textarea>
          </div>
        </div>

        {{-- 開始時間 --}}
        <div class="form-group row">
          <label class="col-form-label col-12 col-sm-3 text-sm-center">
            <span class="align-middle"><b>開始填寫時間</b></span>
          </label>
          <div class="input-group col-12 col-sm-9">
            <input type="text" class="form-control start_date" name="started_at" data-range="start" value="{{old('started_at', $survey->started_at)}}" 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"><b>結束填寫時間</b></span>
          </label>
          <div class="input-group col-12 col-sm-9">
            <input type="text" class="form-control end_date" name="finished_at" data-range="end" value="{{old('finished_at', $survey->finished_at)}}" 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(config('survey.survey_status') as $key => $string)
              <div class="custom-control custom-radio mb-2">
                <input type="radio" class="custom-control-input" name="status" id="status-{{$key}}" value="{{$key}}"
                  {{($key == $survey->status) ? 'checked':''}}
                />
                <label class="custom-control-label" for="status-{{$key}}">{{$string}}</label>
              </div>
            @endforeach
          </div>
        </div>

        <div class="text-center mt-5">
          <button type="button" class="btn btn-lg btn-success font-weight-bold submit-btn">儲存</button>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<script type="text/javascript" src="{{ asset('js/jquery-ui-1.12.1/jquery-ui.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/jquery-timepicker-addon/jquery-ui-timepicker-addon.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/jquery-timepicker-addon/i18n/jquery-ui-timepicker-zh-TW.js') }}"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script type="text/javascript" src="{{ asset('js/tinymce/tinymce.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset('js/datepicker-default-setting.js') }}"></script>
<script type="text/javascript" src="{{ Module::asset('survey:js/date.js') }}"></script>
<script type="text/javascript">
  $(document).ready(function(){
    buildTinymce();
    var dateFormat = "yy-mm-dd";

    var started_at = $("input[name=started_at]").datepicker(datepicker_cfg);

    var finished_at = $("input[name=finished_at]").datepicker(datepicker_cfg);

    $(document).on('click', '.submit-btn', function() {
      var form = $("#surveyForm");
      if (!form[0].checkValidity()) {

        form[0].reportValidity();
        return;
      }

      var description = $('[name=description]').val();
      if (typeof description =='undefined'||description.length<=0) {
        alert('『前言/說明』為必填!');
        return;
      }
      form.submit();
    });

  });

  // 載入TinyMce
  function buildTinymce() {
    tinymce.init({
      selector:'textarea.textarea-editer',
      menubar: false,
      toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help',
      height: 300,
      setup:function(ed) {
       ed.on('change', function(e) {
           $("[name="+ed.id+"]").text(ed.getContent());
       });
      }
    });
  }

</script>
@endpush