@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">
<link href="{{ asset('css/datatable/datatables.min.css') }}" rel="stylesheet" type="text/css">
<style nonce="{{ csp_nonce() }}">
  .hidden{
    display: none;
  }
  #ui-datepicker-div{
    z-index: 1051 !important;
  }
</style>
@endpush

{{-- Content --}}
@section('content')
<div class="row mb-3 mb-sm-0 btn-action-section">
  <div class="col-md text-right">
    @if($has_subscribe)
    <button class="btn btn-lg btn-success">
      <span class="fas fa-check">&ensp;</span>已訂閱
    </button>
    @else
    <button class="btn btn-lg btn-success" data-toggle="modal" data-target="#bulletinModal">
      <span class="fas fa-plus fa-fw">&ensp;</span>加入我的訂閱
    </button>
    @endif
  </div>
</div>
<div class="row">
  <div class="col-12 form-inline">
    <input type="hidden" name="bulletin_id" value="{{request()->bulletin->id}}" />
    <div class="input-group mb-2 mr-2">
      <select name="type_id" class="form-control custom-select mb-2 mr-2">
        <option value="all">全部公告類型</option>
        @foreach($type_options as $type)
        <option value="{{$type->id}}">{{$type->name}}</option>
        @endforeach
      </select>
    </div>
  </div>
  <div class="col-12 overflow-auto mb-5">
    <table class="table table-striped table-hover steps-datatable" id="dataTable">
      <thead class="thead-light text-center">
        <tr>
          <th scope="col">標題</th>
          <th scope="col">類別</th>
          <th scope="col">佈告欄</th>
          <th scope="col">發布單位</th>
          <th scope="col">公告日期</th>
          <th scope="col"></th>
        </tr>
      </thead>
      <tbody>
        <tr><td colspan="6" class="text-center">查無資料</td></tr>
      </tbody>
      <tfoot></tfoot>
    </table>
  </div>
</div>

{{-- Modal --}}
<div class="modal fade" id="bulletinModal" tabindex="-1" role="dialog" aria-labelledby="bulletinModalTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
    <div class="modal-content bulletinModal-content">
      <div class="modal-header">
        <h5 class="modal-title">訂閱設定</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="row" id="bulletinForm-response-alert"></div>
        <form id="bulletinForm">
          @csrf
          <div class="form-group">
            <label for="InputNotification"><b>※</b>是否寄送通知</label>
            <div class="radio-group ">
              <div class="custom-control custom-radio custom-control-inline">
                <input type="radio" class="custom-control-input" id="notificationY" name="notification" value="1" required checked>
                <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" id="notificationN" name="notification" value="0">
                <label class="custom-control-label" for="notificationN">否</label>
              </div>
            </div>
          </div>
          <div class="form-group">
            <label for="InputSubcribeType"><b>※</b>訂閱時間類型</label>
            <div class="radio-group ">
              <div class="custom-control custom-radio custom-control-inline">
                <input type="radio" class="custom-control-input" id="SubscribeTypeL" name="subscription_type_id" value="1" required checked>
                <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" id="SubscribeTypeP" name="subscription_type_id" value="5">
                <label class="custom-control-label" for="SubscribeTypeP">限時訂閱</label>
              </div>
              @endif
            </div>
          </div>
          <div class="form-group period-group hidden">
            <label for="InputStartDate">訂閱起始日</label>
            <div class="input-group">
              <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" id="InputStartDate" data-range="start" aria-label="起始日" aria-describedby="start_date_des" readonly>
              <input type="hidden" name="formal_start_date" readonly>
            </div>
          </div>
          <div class="form-group period-group hidden">
            <label for="InputEndDate">訂閱結束日</label>
            <div class="input-group">
              <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" id="InputEndDate" data-range="end" aria-label="結束日" aria-describedby="end_date_des" readonly>
              <input type="hidden" name="formal_end_date" readonly>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary bulletinFormSubmit">儲存</button>
      </div>
    </div>
  </div>
</div>


{{-- 公布欄Modal --}}
@include('bulletin::announcement/components/modal-show')

<input type="hidden" id="js-datatable-url" value="{{ $datatable_url }}" />
<input type="hidden" id="js-subscribe-url" value="{{ $subscribe_url }}" />
@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="{{ asset('js/datatable/datatables.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/datatable/datatable-default-setting.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 type="text/javascript" src="{{ Module::asset('bulletin:js/show.js') }}"></script>
@endpush