@extends('layout.layout')

{{-- 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">
<style nonce="{{ csp_nonce() }}">
  .hidden{
    display: none;
  }
</style>
@endpush

{{-- Content --}}
@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 id="knowledgeForm" method="post" enctype="multipart/form-data">
        @csrf
      <div class="form-group row">
        <label class="col-form-label col-12 col-sm-3 text-sm-center" for="SelectYear">
          <span class="align-middle"><span class="text-red">※&ensp;</span><b>年度</b></span>
        </label>
        @php
        $year = old('year',isset($model->year)?$model->year:(\Carbon\Carbon::now()->format('Y')-1911))
        @endphp
        <div class="input-group col-12 col-sm-9">
          <select name="year" id="SelectYear" class="selectpicker form-control {{ $errors->has('year') ? ' is-invalid' : '' }}" data-live-search="true">
            <option value="">請選擇年度</option>
            @foreach($year_options as $option)
            <option value="{{$option->id}}"
            @if($year==$option->id)
            selected
            @endif
            >{{$option->name}}</option>
            @endforeach
          </select>
          <small class="form-text text-muted w-100"></small>
          @if ($errors->has('year'))
            @foreach($errors->get('year') as $error)
            <div class="invalid-feedback">
              {{ $error }}
            </div>
            @endforeach
          @endif
        </div>
      </div>
      <div class="form-group row">
        <label class="col-form-label col-12 col-sm-3 text-sm-center" for="InputName">
          <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" name="name" class="form-control {{ $errors->has('name') ? ' is-invalid' : '' }}" id="InputName" value="{{ old('name',isset($model->name)?$model->name:null) }}" placeholder="名稱" required>
          <small class="form-text text-muted w-100"></small>
          @if ($errors->has('name'))
            @foreach($errors->get('name') as $error)
            <div class="invalid-feedback">
              {{ $error }}
            </div>
            @endforeach
          @endif
        </div>
      </div>
      <div class="form-group row">
        <label class="col-form-label col-12 col-sm-3 text-sm-center" for="InputContent">
          <span class="align-middle"><b>內容摘要</b></span>
        </label>
        <div class="input-group col-12 col-sm-9">
          <textarea type="text" name="content" class="form-control {{ $errors->has('content') ? ' is-invalid' : '' }}" id="InputContent" rows="5">{{ old('content',isset($model->content)?$model->content:null) }}</textarea>
          <small class="form-text text-muted w-100"></small>
          @if ($errors->has('content'))
            @foreach($errors->get('content') as $error)
            <div class="invalid-feedback">
              {{ $error }}
            </div>
            @endforeach
          @endif
        </div>
      </div>
      <div class="form-group row period-group">
        <label class="col-form-label col-12 col-sm-3 text-sm-center" for="InputStartDate">
          <span class="align-middle"><span class="text-red">※&ensp;</span><b>起始日</b></span>
        </label>
        <div class="input-group col-12 col-sm-9">
          <div class="input-group-prepend">
            <span class="input-group-text" id="start_date_des">從</span>
          </div>
          <input type="text" name="start_date" class="form-control start_date {{ $errors->has('start_date') ? ' is-invalid' : '' }}" id="InputStartDate" value="{{ old('start_date',isset($model->start_date)?$model->start_date_tw:null) }}" data-range="start" aria-label="起始日" aria-describedby="start_date_des" readonly>
          @if ($errors->has('start_date'))
            @foreach($errors->get('start_date') as $error)
            <div class="invalid-feedback">
              {{ $error }}
            </div>
            @endforeach
          @endif
        </div>
      </div>
      <div class="form-group row period-group">
        <label class="col-form-label col-12 col-sm-3 text-sm-center" for="InputEndDate">
          <span class="align-middle"><span class="text-red">※&ensp;</span><b>迄止日</b></span>
        </label>
        <div class="input-group col-12 col-sm-9">
          <div class="input-group-prepend">
            <span class="input-group-text" id="end_date_des">至</span>
          </div>
          <input type="text" name="end_date" class="form-control end_date {{ $errors->has('end_date') ? ' is-invalid' : '' }}" id="InputEndDate" value="{{ old('end_date',isset($model->end_date)?$model->end_date_tw:null) }}" data-range="end" aria-label="結束日" aria-describedby="end_date_des" readonly>
          @if ($errors->has('end_date'))
            @foreach($errors->get('end_date') as $error)
            <div class="invalid-feedback">
              {{ $error }}
            </div>
            @endforeach
          @endif
        </div>
      </div>
      <div class="form-group row">
        <label class="col-form-label col-12 col-sm-3 text-sm-center" for="InputFileUrl">
          <span class="align-middle"><b>附件</b></span>
          <div><small class="text-danger">(大小不能超過10MB)</small></div>
        </label>
        <div class="col-12 col-sm-9 file-section file">
          @component('component.single_file',['name'=>'file','model'=>isset($model)?$model:null,'file_url'=>isset($model->file_display_name)?route('knowledge.file',['knowledge'=>$model, 'filename' => $model->file_display_name]):null,'mimes'=>'image/jpeg,image/png,.doc,.odt,.ods,.pdf'])
          @endcomponent
          <small class="form-text text-muted w-100">上傳格式：.jpeg, .png, .doc, .pdf, .odt, .ods</small>
        </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>
        @php
        $is_public = old('is_public',isset($model->is_public)?$model->is_public:null)
        @endphp
        <div class="col-12 col-sm-9">
          <div class="row h-100 align-items-center">
            <div class="col-12">
              <div class="form-check">
                <input type="checkbox" class="form-check-input {{ $errors->has('is_public') ? ' is-invalid' : '' }}" id="isPublicY" name="is_public" value="1"
                @if($is_public==1)
                checked
                @endif
                >
                <label class="form-check-label" for="isPublicY">公開</label>
                <small class="form-text text-muted w-100"></small>
                @if ($errors->has('is_public'))
                  @foreach($errors->get('is_public') as $error)
                  <div class="invalid-feedback">
                    {{ $error }}
                  </div>
                  @endforeach
                @endif
              </div>
            </div>
          </div>
        </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

{{-- Script --}}
@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-tw-year-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="{{ asset('js/jquery-timepicker-addon/tw-year.js') }}"></script>
<script type="text/javascript" src="{{ asset('node_modules/moment/min/moment.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/jquery-timepicker-addon/tw-year-cfg.js') }}"></script>
<script type="text/javascript" src="{{ Module::asset('knowledge:js/file.js')}}"></script>
<script nonce="{{ csp_nonce() }}">
function date_check(start,end){

  var res = true;
  if(start.length>0&&end.length>0){
    if(start<=end){
    }else if(start>end){
      res = false;
    }
  }

  return res ;
}
$(document).ready(function() {
  var datepickerDefSetting  = Object.assign(datepicker_cfg,
    {
      onSelect: function (selectedDateTime){
         var range = $(this).data('range');
         if (range=='start') {
           var end = $('.end_date').val();
           if(date_check(selectedDateTime,end)){}else{
             $(this).val('');
             alert('開始日期請小於結束日期！');
           }
         }else if (range=='end') {
           var start = $('.start_date').val();
           if(date_check(start, selectedDateTime)){}else{
             $(this).val('');
             alert('結束日期請大於開始日期！');
           }
         }
       }
     });
  $('#InputStartDate').datepicker(datepickerDefSetting);
  $('#InputEndDate').datepicker(datepickerDefSetting);
  $('.submit-btn').on("click", function() {
    var form = $("#knowledgeForm");
    if (!form[0].checkValidity()) {

      form[0].reportValidity();
      return;
    }
    var start = $('.start_date').val();
    var end = $('.end_date').val();
    var invalid = false;
    if (start=='') {
      alert('請填寫開始日期！');
      invalid = true;
    }else if (end=='') {
      alert('請填寫結束日期！');
      invalid = true;
    }
    if (invalid) {
      return;
    }
    if(!date_check(start,end)){
      $('.end_date').val(null);
      alert('開始日期請小於結束日期！');
      invalid = true;
    }
    if (invalid) {
      return;
    }

    form.submit();
  });
});
</script>
@endpush