@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="{{ asset('js/jquery-timepicker-addon/jquery-ui-timepicker-addon.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;
}
#ui-datepicker-div{
  z-index: 1051 !important;
}
.calendar-color-icon{
  height: 24px;
  width: 24px;
  border-radius: 50%;
}
.calendar-color-icon-td{
  width: 25px;
}
.calendar-action-td,.invitation-action-td{
  width: 25px;
  cursor: pointer;
}
.invitation-status-td{
  text-align: center;
  width: 100px;
}
.hidden{
  display: none;
}
</style>
@endpush

{{-- Content --}}
@section('content')
<input type="hidden" id="js-fullcalendar-url" value="{{route('calendar.fullcalendar')}}" />
<div class="row">
  <div class="col-12 col-lg-3">
    <div class="shadow-sm p-3 bg-white rounded-lg">
      <div class="row">
        <div class="col-12">
          <button type="button" class="btn btn-primary btn-block eventCreate"><i class="fas fa-plus"></i><span class="ml-2">新活動</span></button>
        </div>
        <div class="col-12 mt-1">
          <table class="table table-borderless table-hover">
            <tbody>
              @foreach($calendars as $calendar)
              <tr>
                <td class="calendar-color-icon-td">
                  @if($calendar['enabled']==1)
                  <style nonce="{{ csp_nonce() }}">
                    #calendar-color-icon {
                      background-color: {{$calendar['color']}};
                    }
                  </style>
                  <div id="calendar-color-icon" class="calendar-color-icon"></div>
                  @else
                  <i class="fas fa-eye-slash"></i>
                  @endif
                </td>
                <td>{{$calendar['display_name']}}</td>
                <td class="calendar-action-td calendarEdit" data-id="{{$calendar['id']}}"><i class="fas fa-ellipsis-h"></i></td>
              </tr>
              @endforeach
              <tr>
                <td class="calendar-color-icon-td"><div class="calendar-color-icon bg-dark"></div></td>
                <td>新行事曆</td>
                <td class="calendar-action-td calendarCreate"><i class="fas fa-plus"></i></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  <div class="col-12 mt-3 mt-lg-0 col-lg-9">
    <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="calendarModal" tabindex="-1" role="dialog" aria-labelledby="calendarModalTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
    <div class="modal-content calendarModal-content">

    </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.calendarModalContent')
@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 type="text/javascript" src="{{ asset('js/jquery-timepicker-addon/jquery-ui-timepicker-tw-year-addon.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/jquery-timepicker-addon/i18n/jquery-ui-timepicker-zh-TW.js') }}"></script>
<script type="text/javascript" src="{{ Module::asset('calendar:js/datepicker/tw-year.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/helper.js') }}"></script>
<script type="text/javascript" src="{{ Module::asset('calendar:js/tw-year.js') }}"></script>
<script nonce="{{ csp_nonce() }}">
let calendars = @json($calendars);
let scope_options = @json($scope_options);
let eventFormRoute = '{{$eventFormRoute}}';
let autoCreate = {{$autoCreate}};
let autoCreateCalendar = @json($autoCreateCalendar);


$(document).ready(function() {
  $(document).on('click', '.calendarExport', function() {
    let id = $(this).data('id');

    let url = eventFormRoute+'/'+id+'/ics';

    LoadingCover.show();
    $('.alert').remove();
    $.ajax({
      url: url ,
      type: 'POST',
      data: {
          _token: $('meta[name="csrf-token"]').attr('content'),
      },
      success: function(data){
        LoadingCover.hide();
        window.location=eventFormRoute;
      },
      error: function(xhr){
        LoadingCover.hide();
        let errors = xhr.responseJSON;
        let alerts = [];
        for (let i = 0; i < Object.keys(errors).length; i++) {
          let error_arr = errors[Object.keys(errors)[i]];
          for (let j = 0; j < error_arr.length; j++) {
            alerts.push({ type: "danger", content: error_arr[j] });
          }
        }
        $( "#AlertTemplate" ).tmpl( alerts )
        .prependTo( "#calendarForm-response-alert" );
      }
    });

  });
});
</script>
<script type="text/javascript" src="{{ Module::asset('calendar:js/event.js') }}"></script>
<script type="text/javascript" src="{{ Module::asset('calendar:js/calendar.js') }}"></script>
@endpush