@extends('layout.layout')

@push('links')
<link href="{{ Module::asset('calendar:css/fullcalendar/main.min.css') }}" rel="stylesheet" type="text/css">
<style nonce="{{ csp_nonce() }}">
  @media only screen and (max-width: 767px) {
    .fc .fc-toolbar {
      display: block;
      text-align: center;
    }
  }
</style>
@endpush

@section('content')

@if ($site)
  <div>
    <h3>{{$site->name}}</h3>
  </div>
  <input type="hidden" id="js-fullcalendar-url" value="{{route('user.rent.fullcalendar', ['id' => $site->id])}}" />

  <div class="row mb-3">
    <div class="col text-right">
      <a class="btn btn-lg btn-success" href="{{ route('user.rent.create', ['id' => $site->id]) }}" title="借用{{$site->name}}">
        <span class="fas fa-plus">&ensp;</span>借用
      </a>
    </div>
  </div>
  <div id="calendar-container">
    <div id='calendar'></div>
  </div>
@else
  <div class="row mb-3">
    <div class="col overflow-auto">
      <table class="table table-striped table-hover steps-datatable" id="dataTable">
        <thead class="thead-light text-center">
          <tr>
            <th scope="row">名稱</th>
            <th scope="row">容納人數</th>
            <th scope="row">管理者姓名</th>
            <th scope="row">分機</th>
            <th scope="row">&ensp;</th>
          </tr>
        </thead>
        <tbody>
          @if (count($sites))
            @foreach ($sites as $site)
              <tr>
                <td class="align-middle text-center">{{$site->name}}</td>
                <td class="align-middle text-center">{{$site->number_of_people}}</td>
                <td class="align-middle text-center">{{$site->manage_name}}</td>
                <td class="align-middle text-center">{{$site->manage_extension}}</td>
                <td class="text-right">
                  <a class="btn btn-dark" href="{{route('user.rent.site', ['id' => $site->id])}}" title="{{$site->name}}借用資訊">
                    <span class="fas fa-eye fa-fw">&ensp;</span>借用資訊
                  </a>
                </td>
              </tr>
            @endforeach
          @else
            <tr>
              <td colspan="5">查無任何場地</td>
            </tr>
          @endif
        </tbody>
        <tfoot>
        </tfoot>
      </table>
    </div>
  </div>
@endif

@endsection

{{-- Script --}}
@push('scripts')
<script type="text/javascript" src="{{ Module::asset('calendar:js/fullcalendar/main.min.js') }}"></script>
<script type="text/javascript" src="{{ Module::asset('calendar:js/fullcalendar/locales-all.min.js') }}"></script>
<script type="text/javascript" src="{{ Module::asset('calendar:js/fullcalendar/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/event.js') }}"></script> --}}
<script type="text/javascript" src="{{ Module::asset('siterent:js/rent/site.js') }}"></script>
@endpush