@extends('layout.layout')

{{-- Style --}}
@push('links')
<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('calendar:css/fullcalendar/main.min.css') }}" rel="stylesheet" type="text/css">
<style nonce="{{ csp_nonce() }}">
#calendar a{
  color:inherit !important;
}
</style>
@endpush

{{-- Content --}}
@section('content')
<input type="hidden" id="js-fullcalendar-url" value="{{$fullcalendarRoute}}" />
<div class="row">
  <div class="col-12 text-right">
    <a class="btn btn-primary btn-lg" href="{{route('calendar.index',['action'=>'ccbu','uuid'=>$calendar->public->publicuri])}}"><i class="fas fa-plus"></i><span class="ml-1">訂閱此行事曆</sapn></a>
  </div>
  <div class="col-12 mt-3">
    <div class="shadow-sm p-3 bg-white rounded-lg">
      <div id="calendar-container">
        <div id='calendar'></div>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="eventModal" tabindex="-1" role="dialog" aria-labelledby="eventModalTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
    <div class="modal-content eventModal-content">

    </div>
  </div>
</div>
@include('calendar::components.eventModalContent')
@endsection

{{-- Script --}}
@push('scripts')
<script type="text/javascript" src="{{ asset('js/jquery-ui-1.12.1/jquery-ui.min.js') }}"></script>
<script src="https://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.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/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="{{ Module::asset('calendar:js/tw-year.js') }}"></script>
<script nonce="{{ csp_nonce() }}">
let calendars = [];

$(document).ready(function() {

  let calendarEl = $('#calendar')[0];
  let calendar = new FullCalendar.Calendar(calendarEl, {
    locale: 'zh-tw',
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay,list'
    },
    titleFormat: function(date) {
      let start_date = moment(date.start);
      let end_date = moment(date.end);

      FullCalendarTWYear.constructor(start_date, end_date);

      return FullCalendarTWYear.show();
    },
    dayMaxEvents: true, // 允許 "更多" 連結 當太多的事件
    dayMaxEventRows: true, // 用於所有非時間網格檢視
    events: $("#js-fullcalendar-url").val(),
    eventClick:function(info)
    {
        let item = info.event;
        let args= item.extendedProps;
        let data = { action_name: "查看活動",allDay: item.allDay,action: 'show',calendars: calendars,calendarId: args.calendar_id,eventId: item.id,title: item.title,eventLocation: args.location,description: args.description,editable: args.is_editable,detail: args.detail  }
        console.log(data);
        let [start_date,end_date,formal_start_date,formal_end_date] = filterTime(item);

        data['start_date'] = start_date;
        data['end_date'] = end_date;
        data['formal_start_date'] = formal_start_date;
        data['formal_end_date'] = formal_end_date;
        $( ".eventModal-content" ).html('');
        $( "#eventModalTemplate" ).tmpl( data )
        .appendTo( ".eventModal-content" );
        $('#eventModal').modal();
    },

  });
  calendar.render();
});
</script>
@endpush