@extends('layout/layout')

{{-- Style --}}
@push('links')
<link href="{{ asset('css/datatable/datatables.min.css') }}" rel="stylesheet" type="text/css">
<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="{{ Module::asset('bulletin:css/announcement/manage.css') }}" rel="stylesheet" type="text/css">
@endpush

{{-- Content --}}
@section('content')
<input type="hidden" id="js-bulletin-url" value="{{$bulletinDatatableRoute}}" />
<div class="row mb-3 mb-sm-0 btn-action-section">
  <div class="col-md text-right">
    <a class="btn btn-lg btn-success" href="{{$create_url}}">
      <span class="fas fa-plus fa-fw">&ensp;</span>新增公告
    </a>
  </div>
</div>
<div class="row">
  <div class="col-12 form-inline">
    {{-- 日期選擇器 --}}
    {{-- <div class="input-group mb-2 mr-2">
      <input type="text" name="start_date" class="form-control custom-datepicker mb-2 mr-2" id="InputStartDate" data-range="start" value="" placeholder="公告起始日" readonly/>
      <input type="hidden" name="formal_start_date" value="" readonly>
    </div>
    <div class="input-group mb-2 mr-2">
      <input type="text" name="end_date" class="form-control custom-datepicker mb-2 mr-2" id="InputEndDate" data-range="end" value="" placeholder="公告結束日" readonly/>
    </div> --}}
    <div class="input-group mb-2 mr-2">
      <select name="bulletin_id" class="form-control custom-select mb-2 mr-2">
        <option value="all" selected>全部佈告欄(可編輯)</option>
        @foreach($bulletins as $bulletin)
        <option value="{{$bulletin->id}}">{{$bulletin->display_name}}</option>
        @endforeach
      </select>
    </div>
    <div class="input-group mb-2 mr-2">
      <select name="status_id" class="form-control custom-select mb-2 mr-2">
        <option value="all">全部公告狀態</option>
        @foreach($status_options as $status)
        <option value="{{$status->id}}">{{$status->name}}</option>
        @endforeach
      </select>
    </div>
    {{-- <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="bulletinDataTable">
      <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>
        </tr>
      </thead>
      <tbody>
        <tr><td colspan="5" class="text-center">查無資料</td></tr>
      </tbody>
      <tfoot></tfoot>
    </table>
  </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('node_modules/moment/min/moment.min.js') }}"></script>
<script type="text/javascript" src="{{ Module::asset('calendar:js/datepicker/tw-year.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset('js/datepicker-default-setting.js') }}"></script>
<script type="text/javascript" src="{{ Module::asset('student:js/tw-year.js') }}"></script>
<script type="text/javascript" src="{{ Module::asset('calendar:js/helper.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('bulletin:js/announcement/manage.js') }}"></script>

@endpush