@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="subscriptionForm" method="post">
        @csrf
      <div class="form-group row">
        <label class="col-12 col-sm-3 text-sm-center">
          <span class="align-middle"><b>佈告欄類型</b></span>
        </label>
        <div class="col-12 col-sm-9">
          <span class="align-middle">{{$model->type_name}}</span>
        </div>
      </div>
      <div class="form-group row">
        <label class="col-12 col-sm-3 text-sm-center">
          <span class="align-middle"><b>佈告欄</b></span>
        </label>
        <div class="col-12 col-sm-9">
          <span class="align-middle">{{$model->display_name}}</span>
        </div>
      </div>
      <div class="form-group row">
        <label class="col-12 col-sm-3 text-sm-center">
          <span class="align-middle"><span class="text-red">※&ensp;</span><b>是否寄送通知</b></span>
        </label>
        @php
        $notification = old('notification',isset($model)?$model->notification:1);
        @endphp
        <div class="col-12 col-sm-9 radio-group {{ $errors->has('notification') ? ' is-invalid' : '' }}">
          <div class="custom-control custom-radio custom-control-inline">
            <input type="radio" class="custom-control-input {{ $errors->has('notification') ? ' is-invalid' : '' }}" id="notificationY" name="notification" value="1" required
            @if($notification==1)
            checked
            @endif
            >
            <label class="custom-control-label" for="notificationY">是</label>
          </div>
          <div class="custom-control custom-radio custom-control-inline">
            <input type="radio" class="custom-control-input {{ $errors->has('notification') ? ' is-invalid' : '' }}" id="notificationN" name="notification" value="0"
            @if($notification==0)
            checked
            @endif
            >
            <label class="custom-control-label" for="notificationN">否</label>
          </div>
        </div>
        @if ($errors->has('notification'))
          @foreach($errors->get('notification') as $error)
          <div class="invalid-feedback">
            {{ $error }}
          </div>
          @endforeach
        @endif
      </div>
      <div class="form-group row">
        <label class="col-12 col-sm-3 text-sm-center">
          <span class="align-middle"><span class="text-red">※&ensp;</span><b>訂閱時間類型</b></span>
        </label>
        @php
        $subscription_type_id = old('subscription_type_id',isset($model)?$model->subscription_type_id:1);
        @endphp
        <div class="col-12 col-sm-9 radio-group {{ $errors->has('subscription_type_id') ? ' is-invalid' : '' }}">
          <div class="custom-control custom-radio custom-control-inline">
            <input type="radio" class="custom-control-input {{ $errors->has('subscription_type_id') ? ' is-invalid' : '' }}" id="SubscribeTypeL" name="subscription_type_id" value="1" required
            @if($subscription_type_id==1)
            checked
            @endif
            >
            <label class="custom-control-label" for="SubscribeTypeL">永久</label>
          </div>
          @if(!$has_department)
            <div class="custom-control custom-radio custom-control-inline">
              <input type="radio" class="custom-control-input {{ $errors->has('subscription_type_id') ? ' is-invalid' : '' }}" id="SubscribeTypeP" name="subscription_type_id" value="5"
              @if($subscription_type_id==5)
              checked
              @endif
              >
              <label class="custom-control-label" for="SubscribeTypeP">限時訂閱</label>
            </div>
          @endif
        </div>
        @if ($errors->has('subscription_type_id'))
          @foreach($errors->get('subscription_type_id') as $error)
          <div class="invalid-feedback">
            {{ $error }}
          </div>
          @endforeach
        @endif
      </div>
      <div class="form-group row period-group @if($subscription_type_id!=5)hidden @endif">
        <label class="col-form-label col-12 col-sm-3 text-sm-center" for="InputStartDate">
          <span class="align-middle"><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="subscription_start" class="form-control start_date {{ $errors->has('formal_start_date') ? ' is-invalid' : '' }}" id="InputStartDate" value="{{ old('subscription_start',isset($model->subscription_start)?\Carbon\Carbon::parse($model->subscription_start)->twFormat():null) }}" data-range="start" aria-label="起始日" aria-describedby="start_date_des" readonly>
          <input type="hidden" name="formal_start_date" value="{{ old('formal_start_date',isset($model->subscription_start)?$model->subscription_start:null) }}" readonly>
          @if ($errors->has('formal_start_date'))
            @foreach($errors->get('formal_start_date') as $error)
            <div class="invalid-feedback">
              {{ $error }}
            </div>
            @endforeach
          @endif
        </div>
      </div>
      <div class="form-group row period-group @if($subscription_type_id!=5)hidden @endif">
        <label class="col-form-label col-12 col-sm-3 text-sm-center" for="InputEndDate">
          <span class="align-middle"><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="subscription_end" class="form-control end_date {{ $errors->has('formal_end_date') ? ' is-invalid' : '' }}" id="InputEndDate" value="{{ old('subscription_end',isset($model->subscription_end)?\Carbon\Carbon::parse($model->subscription_end)->twFormat():null) }}" data-range="end" aria-label="結束日" aria-describedby="end_date_des" readonly>
          <input type="hidden" name="formal_end_date" value="{{ old('formal_end_date',isset($model->subscription_end)?$model->subscription_end:null) }}" readonly>
          @if ($errors->has('formal_end_date'))
            @foreach($errors->get('formal_end_date') 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 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="{{ Module::asset('calendar:js/datepicker/tw-year.js') }}"></script>
<script type="text/javascript" src="{{ asset('node_modules/moment/min/moment.min.js') }}"></script>
<script type="text/javascript" src="{{ Module::asset('calendar:js/helper.js') }}"></script>
<script type="text/javascript" src="{{ Module::asset('bulletin:js/tw-year.js') }}"></script>
<script nonce="{{ csp_nonce() }}">
$(document).ready(function() {
  $('#InputStartDate').datepicker(datepicker_cfg);
  $('#InputEndDate').datepicker(datepicker_cfg);
  $('[name=subscription_type_id]').on("click", function() {
      var type_id = $(this).val();
      $('.period-group').addClass('hidden');
      $('[name=subscription_start]').attr("required",false);
      $('[name=subscription_end]').attr("required",false);
      if (type_id==5) {
        $('.period-group').removeClass('hidden');
        $('[name=subscription_start]').attr("required",true);
        $('[name=subscription_end]').attr("required",true);
      }else {
        $('[name=subscription_start]').val('');
        $('[name=subscription_end]').val('');
      }
  });
  $('.submit-btn').on("click", function() {
    var form = $("#subscriptionForm");
    if (!form[0].checkValidity()) {

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

    var subscription_type_id = $('[name=subscription_type_id]:checked').val();

    if (subscription_type_id==5) {
      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