@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="educationForm" 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="InputSchoolName">
          <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="school_name" class="form-control {{ $errors->has('school_name') ? ' is-invalid' : '' }}" id="InputSchoolName" value="{{ old('school_name',isset($model->school_name)?$model->school_name:null) }}" placeholder="學校名稱" required>
          <small class="form-text text-muted w-100"></small>
          @if ($errors->has('school_name'))
            @foreach($errors->get('school_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="InputDepartment">
          <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="department" class="form-control {{ $errors->has('department') ? ' is-invalid' : '' }}" id="InputDepartment" value="{{ old('department',isset($model->department)?$model->department:null) }}" placeholder="系所名稱" required>
          <small class="form-text text-muted w-100"></small>
          @if ($errors->has('department'))
            @foreach($errors->get('department') 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">
          <span class="align-middle"><span class="text-red">※&ensp;</span><b>修習情況</b></span>
        </label>
        @php
        $status = old('status',isset($model->status)?$model->status:null)
        @endphp
        <div class="col-12 col-sm-9">
          <div class="row h-100 align-items-center">
            <div class="col-12">
              @foreach($status_options as $option)
              <div class="form-check form-check-inline">
                <input type="radio" class="form-check-input {{ $errors->has('status') ? ' is-invalid' : '' }}" id="status{{$option->id}}" name="status" value="{{$option->name}}"
                @if($status==$option->name)
                checked
                @endif

                @if($loop->first)
                required
                @endif
                >
                <label class="form-check-label" for="status{{$option->id}}">{{$option->name}}</label>
              </div>
              @endforeach
              <small class="form-text text-muted w-100"></small>
              @if ($errors->has('status'))
                @foreach($errors->get('status') as $error)
                <div class="invalid-feedback">
                  {{ $error }}
                </div>
                @endforeach
              @endif
            </div>
          </div>
        </div>
      </div>
      <div class="form-group row">
        <label class="col-form-label col-12 col-sm-3 text-sm-center" for="InputDegree">
          <span class="align-middle"><b>獲得學位</b></span>
        </label>
        <div class="input-group col-12 col-sm-9">
          <input type="text" name="degree" class="form-control {{ $errors->has('degree') ? ' is-invalid' : '' }}" id="InputDegree" value="{{ old('degree',isset($model->degree)?$model->degree:null) }}" placeholder="獲得學位">
          <small class="form-text text-muted w-100"></small>
          @if ($errors->has('degree'))
            @foreach($errors->get('degree') 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="InputCertificationNo">
          <span class="align-middle"><b>證書日期文號</b></span>
        </label>
        <div class="input-group col-12 col-sm-9">
          <input type="text" name="certification_no" class="form-control {{ $errors->has('certification_no') ? ' is-invalid' : '' }}" id="InputCertificationNo" value="{{ old('certification_no',isset($model->certification_no)?$model->certification_no:null) }}" placeholder="證書日期文號">
          <small class="form-text text-muted w-100"></small>
          @if ($errors->has('certification_no'))
            @foreach($errors->get('certification_no') 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('user.education.file',['education'=>$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){

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

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

      form[0].reportValidity();
      return;
    }
    let start = $('.start_date').val();
    let end = $('.end_date').val();
    let 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