@extends('layout.layout')

@push('links')
<link href="{{ asset('css/fullcalendar/main.min.css') }}" rel="stylesheet" type="text/css">
<style type="text/css">
  body {
    padding-top: 0;
  }
  .card-img-top {
    max-height: 480px;
    margin-top: -0.5rem;
  }
  .card .card-header {
    background-color: #ffffff;
    color: #20619d;
  }
  .card #dataTable a:visited {
    color: #004a8f;
  }
</style>
@endpush

@section('content')
<div class="row mb-3">
  <div class="col-md-5 ml-auto">
    <div class="card">
      <h3 class="card-header align-middle">
        最新消息
        @if (count($results) > 4)
          <a class="btn btn-success choose float-right mx-2 my-n1 py-1" href="{{route('news.index')}}" title="更多消息">
            <span class="fas fa-eye">&ensp;</span>更多消息
          </a>
        @endif
      </h3>
      <div class="">
        <table class="table table-striped table-hover mb-0" id="dataTable">
          <tbody>
            @foreach ($results as $i => $news)
              <tr>
                <td class="align-middle">{{$news->title}}</td>
                <td class="align-middle">{!! substr($news->created_at, 0, 10) !!}</td>
                <td class="text-right">
                  <a class="btn btn-dark" href="{{route('news.show', $news->id)}}" title="{{$news->title}}">
                    <span class="fas fa-eye">&ensp;</span>詳細
                  </a>
                </td>
              </tr>
            @endforeach
          </tbody>
          <tfoot>
          </tfoot>
        </table>
      </div>
    </div>
  </div>
  <div class="col-md-5 mr-auto">
    <div class="card">
      <h3 class="card-header align-middle border-bottom">
        場地租借行事曆
        <a href="{{(\Auth::check()) ? route('user.rent.site') : route('login')}}" class="btn btn-success choose float-right mx-2 my-n1 py-1" type="button" title="我要租借"><span class="fas fa-sign-out-alt">&ensp;</span>我要租借</a>
      </h3>
      <div class="card-body px-3">
        <div id="calendar-container">
          <div id="calendar"></div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

{{-- Script --}}
@push('scripts')
<script type="text/javascript" src="{{ asset('js/fullcalendar/main.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/fullcalendar/locales-all.min.js') }}"></script>
<script type="text/javascript">
  document.addEventListener('DOMContentLoaded', function() {
    let calendarEl = document.getElementById('calendar');
    let calendar = new FullCalendar.Calendar(calendarEl, {
      dayMaxEventRows: 1,
      locale: 'zh-tw',
      displayEventTime: false,
      events: "{{route('rent.fullcalendar')}}",
      selectable: true, 
      dateClick: function() {
        window.location.href = "@if (\Auth::check()){{route('user.rent.site')}}@else{{route('login')}}@endif";
      },
      datesSet: function (info) {
        let className = "fc-toolbar-title";
        $('.'+className).parent().html('<h4 class="'+className+'">'+info.view.title+'</h4>');
        $('.fc-col-header-cell').attr('scope', 'col');
        $('.fc-daygrid-day').each(function() {
          $(this).find('.fc-daygrid-day-number').attr('title', $(this).data('date')).attr('href', "#/");
        });
      },
      moreLinkDidMount: function (info) {
        info.el.setAttribute('href', "#/");
        info.el.setAttribute('title', $(info.el).closest('td').data('date') + '租借資訊');
      },
      moreLinkClick:function(info){
        window.setTimeout(function() {
          let element = $('.fc-more-popover .fc-popover-close');
          element.wrap('<a href="#/" title="關閉' + getCurrentDate(info.date) + '租借資訊"></a>');
          $('.fc-more-popover a').keyup(function (event) {
              if (event.which === 13) {
                  $('.fc-more-popover').remove();
              }
          });
        }, 10);
      }
    });
    calendar.render();
  });
  function getCurrentDate(date) {
    var month = date.getMonth() + 1;
    var day = date.getDate();
    if (month < 10) month = '0' + month;
    if (day < 10) day = '0' + day;

    return date.getFullYear() + '-' + month + '-' + day;
  }
</script>
@endpush