@extends('layout/layout')

{{-- Style --}}
@push('links')
<link href="{{ Module::asset('user:css/index.css') }}" rel="stylesheet" type="text/css">
@endpush

@section('content')

<div class="grid-stack"></div>

<div class="row">
  <div class="col-4">
    <div class="p-3 invisible gridstack-item" id="announcement-component" data-id="announcement">
      <h4 class="text-center">電子公告</h4>
      <hr>
      <table class="table table-striped table-hover table-sm" id="bulletinDataTable">
        <thead class="thead-light text-center">
          <tr>
            <th scope="col" class="w-150px">公告日期</th>
            <th scope="col">標題</th>
          </tr>
        </thead>
        <tbody>
          @if($announcements->count() == 0)
            <tr><td colspan="2" class="text-center">查無資料</td></tr>
          @endif
          @foreach($announcements as $item)
            <tr>
              <td class="text-center text-nowrap">{{ \Carbon::parse($item->start_date)->twFormat() }}</td>
              <td>
                <button type="button" class="btn btn-link p-0 btn-announcement-detail" data-url="{{$item['json_url']}}">
                  {{ $item['display_title'] }}
                </button>
              </td>
            </tr>
          @endforeach
        </tbody>
        <tfoot></tfoot>
      </table>
      <div class="more-link text-right">
        <a href="{{$announcement_url}}">查看更多...</a>
      </div>
    </div>
  </div>
  <div class="col-4">
    <div class="p-3 invisible gridstack-item" id="message-component" data-id="message">
      <h4 class="text-center">訊息</h4>
      <hr>
      <table class="table table-striped table-hover table-sm" id="messageDataTable">
        <thead class="thead-light text-center">
          <tr>
            <th scope="col">標題</th>
          </tr>
        </thead>
        <tbody>
          @if($messages->count()>0)
          @foreach($messages as $item)
          <tr>
            <td><span class="message-detail-btn detail-btn" data-url="{{ $item->show_url }}">{{$item->display_title}}</span></td>
          </tr>
          @endforeach
          @else
          <tr><td colspan="2" class="text-center">查無資料</td></tr>
          @endif
        </tbody>
        <tfoot></tfoot>
      </table>
      <div class="more-link text-right">
        <a href="{{$message_url}}">查看更多...</a>
      </div>
    </div>
  </div>
</div>

{{-- 訊息Modal --}}
<div class="modal fade" id="messageModal" tabindex="-1" role="dialog" aria-labelledby="messageModalTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
    <div class="modal-content messageModal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="messageModalTitle">訊息</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>
    </div>
  </div>
</div>

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

<input type="hidden" id="js-gridstack-url" value="{{ $gridstack_url }}" />
@endsection

{{-- Meta --}}
@push('meta')
<meta name="panel-gridstack" content="{{ json_encode($panel_gridstack) }}">
@endpush

{{-- Script --}}
@push('scripts')
<script type="text/javascript" src="{{ Module::asset('user:js/components/index_message_modal_body.precompiled.js') }}"></script>
<script type="text/javascript" src="{{ Module::asset('user:js/index.js') }}"></script>
<script type="text/javascript" src="{{ Module::asset('user:js/components/index-gridstack.js') }}"></script>
@endpush