@extends('layout.layout')

{{-- Style --}}
@push('links')
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ttskch/select2-bootstrap4-theme/dist/select2-bootstrap4.min.css">
@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="editForm" 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="SelectStatus">
            <span class="align-middle"><span class="text-red">※&ensp;</span><b>公告狀態</b></span>
          </label>
          <div class="input-group col-12 col-sm-9">
            @php
            $status_id = old('status_id',isset($model)?$model->status_id:'');
            @endphp
            <select name="status_id" class="selectpicker form-control {{ $errors->has('status_id') ? ' is-invalid' : '' }}" id="SelectStatus" data-live-search="true" required>
              <option value="">請選擇公告狀態</option>
              @foreach($status_options as $option)
              <option value="{{$option->id}}"
              @if($status_id==$option->id)
              selected
              @endif
              >{{$option->name}}</option>
              @endforeach
            </select>
            <small class="form-text text-muted" style="width:100%;"></small>
            @if ($errors->has('status_id'))
              @foreach($errors->get('status_id') 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="SelectSite">
            <span class="align-middle"><span class="text-red">※&ensp;</span><b>活動</b></span>
          </label>
          <div class="input-group col-12 col-sm-9">
            @php
            $activity_id = old('activity_id',isset($model)?$model->activity_id:'');
            @endphp
            <select name="activity_id" class="select2 form-control {{ $errors->has('activity_id') ? ' is-invalid' : '' }}" id="SelectSite" data-live-search="true" required>
              <option value="">請選擇活動</option>
              @foreach($activity_options as $option)
              <option value="{{$option->id}}"
              @if($option->id==$activity_id)
              selected
              @endif
              >{{$option->name}}</option>
              @endforeach
            </select>
            <small class="form-text text-muted" style="width:100%;"></small>
            @if ($errors->has('activity_id'))
              @foreach($errors->get('activity_id') 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="title" class="form-control {{ $errors->has('title') ? ' is-invalid' : '' }}" id="InputName" value="{{ old('title',isset($model->title)?$model->title:null) }}" placeholder="公告標題" required>
            <small class="form-text text-muted" style="width:100%;"></small>
            @if ($errors->has('title'))
              @foreach($errors->get('title') 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="InputDescription">
            <span class="align-middle"><span class="text-red">※&ensp;</span><b>公告內文</b></span>
          </label>
          <div class="input-group col-12 col-sm-9">
            <textarea type="text" name="content" class="form-control textarea-editor {{ $errors->has('content') ? ' is-invalid' : '' }}" id="InputDescription" rows="5">{{ old('content',isset($model->content)?$model->content:null) }}</textarea>
            <small class="form-text text-muted" style="width:100%;"></small>
            @if ($errors->has('content'))
              @foreach($errors->get('content') as $error)
              <div class="invalid-feedback">
                {{ $error }}
              </div>
              @endforeach
            @endif
          </div>
        </div>

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

{{-- Script --}}
@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js" integrity="sha256-AFAYEOkzB6iIKnTYZOdUf9FFje6lOTYdwRJKwTN5mks=" crossorigin="anonymous"></script>
<script type="text/javascript" src="{{ asset('js/tinymce/tinymce.js') }}"></script>
<script>

$(document).ready(function() {
  $('.select2').select2({
    theme: 'bootstrap4',
  });
  buildTinymce();

  $('.activity_news-submit-btn').on("click", function() {
    var form = $("#editForm");
    var is_valid = true;

    if (!form[0].checkValidity()) {

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

    var content = $('[name=content]').val();
    if (typeof content =='undefined'||content.length<=0) {
      alert('『公告內文』為必填!');
      is_valid = false;
    }


    if (!is_valid) {
      return;
    }

    LoadingCover.show();

    form.submit();
  });
});
// 載入TinyMce
function buildTinymce() {
  tinymce.init({
    selector:'textarea.textarea-editor',
    menubar: false,
    plugins: "link code",
    toolbar: 'undo redo | formatselect | fontsizeselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link removeformat code | help',
    height: 300,
    width: '100%',
    setup:function(ed) {
     ed.on('change', function(e) {
         $("#"+ed.id).text(ed.getContent());
     });
    }
  });
}
</script>
@endpush