@extends('layouts.app')
@section("extra_css")
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.5.0/fullcalendar.min.css" />
<style type="text/css">
  .modal-body{
    height: 400px;
    overflow-y: auto;
}
</style>
@endsection
@section("breadcrumb")
<li><a href="{{ route("bookings.index")}}">@lang('menu.bookings')</a></li>
<li class="active">@lang('menu.calendar')</li>

@endsection
@section('content')

    <div class="row">
        <div class="col-md-12">
            <div class="box box-primary">
                <div class="box-header with-border">
                  <h3 class="box-title">@lang('menu.calendar')</h3>
                </div>

                <div class="box-body">
                <div id='calendar'></div>

                </div>
            </div>
        </div>
    </div>

<div class="modal fade" id="booking_detail" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">@lang('fleet.event_details')</h4>
      </div>

      <div class="modal-body">


      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

<div class="modal fade" id="my_event" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel1">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel1">@lang('fleet.my_events')</h4>
      </div>

      <div class="modal-body">


      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>
@endsection

@section("script")
<script src="{{ asset('js/moment.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.5.0/fullcalendar.min.js"></script>
@if(Hyvikk::get('language')!="English-en")
@php($lg = explode('-',Hyvikk::get('language')))
@if($lg[1]=='zh')
@php($lg[1]='zh-tw')
@endif
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.5.1/locale/{{$lg[1]}}.js"></script>
@endif
<script>

  $(document).ready(function() {


    $('#calendar').fullCalendar({
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay,listWeek'
      },
      defaultDate: '{{date("Y-m-d")}}',
      navLinks: true, // can click day/week names to navigate views
      editable: false,
      events: "{{ url('/calendar')}}",
      eventLimit: true,
      eventClick: function(calEvent, jsEvent, view) {
         $.ajax({

            url: '{{url("/calendar/event/")}}/'+calEvent.type+'/'+calEvent.id,

          })
          .then(function(content){
            $("#booking_detail .modal-body").empty();
            $("#booking_detail .modal-body").html(content);
            $("#booking_detail").modal("show");

          },
          function(xhr, status, error) {

            api.set('content.text', status + ': ' + error);
          });

        }

    });

  });

</script>
@endsection