@extends('layouts.app')
@section('style_files')
    <link href="{{ asset('fullcalendar/packages/core/main.css') }}" rel='stylesheet' />
    <link href="{{ asset('fullcalendar/packages/daygrid/main.css') }}" rel='stylesheet' />
    <link href="{{ asset('fullcalendar/packages/timegrid/main.css') }}" rel='stylesheet' />

    <link href="{{ asset('fullcalendar/lib/main.css') }}" rel="stylesheet" />
@endsection
@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">My Schedule</div>

                <div class="card-body">
                  <div class="alert alert-success" role="alert" id="success-alert-message" style="display: none;">
                  </div>
                  <div id='calendar'></div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts_extra')
    <script src="{{ asset('fullcalendar/lib/main.js') }}"></script>
    
    <script type="text/javascript">
      var my_calendar = null;
      var doubleClick = null
      var clickTimer = null;
      document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {


          customButtons: {
            myCustomButton: {
              text: 'Assign Date Range',
              click: function() {
                editCallerAvailableHoursRangeDialog();
              }
            }
          },

          headerToolbar: {
            left: 'title',
            center: '',
            right: 'myCustomButton today prev,next'
          },


          timeZone: 'UTC',
          initialView: 'dayGridMonth',

          dateClick: function(info) {
            var singleClick = info.date.getTime();

            if(doubleClick==singleClick){
                doubleClick = null;
                var start_date = new Date();
                start_date.setDate(start_date.getDate() - 1);
                if(info.date.getTime() <= start_date.getTime())
                {
                  var header = '<i class="far fa-calendar-alt"></i> Schedule';
                  var content = '<p>Sorry! You cannot schedule hours for this date.</p>';
                  var buttons = '<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>';
                  var html = setModalContent(header, content, buttons);
                  $('#modal_body_content-sm').html(html);
                  $('#main_modal-sm').modal({
                      backdrop: 'static'
                  });
                  $('#main_modal-sm').modal('show');
                } else {
                  editCallerAvailableHoursDialog(info);
                }
            }else{
                doubleClick=info.date.getTime();
                clearInterval(clickTimer);
                clickTimer = setInterval(function(){
                    doubleClick = null;
                    clearInterval(clickTimer);
                }, 500);
            }
            
          },

          dayCellDidMount: function( info ) { 
            var start_date = new Date();
            start_date.setDate(start_date.getDate() - 1);
            if(info.date.getTime() <= start_date.getTime())
            {
              info.el.style.backgroundColor = '#ffb3b3';
            }
          },

          eventDidMount: function(info) {
            $('.popover').remove();
            if(window.eventScrolling) return;
            info.el.style.backgroundColor = '#3486eb';
            info.el.style.color = '#ffffff';
            info.el.style.cursor = "pointer"; 
            var my_date = info.event.start;
            info.el.innerHTML = '&nbsp;&nbsp;<strong>Available:</strong> &nbsp;'+info.event.extendedProps.hours+' hours';
            var time_string = leadingZeros(my_date.getUTCMonth() + 1, 2)+'/'+leadingZeros(my_date.getUTCDate(), 2)+'/'+my_date.getUTCFullYear();
            $(info.el).popover({ 
                            title: 'Schedule for: '+time_string, 
                            placement:'top', 
                            trigger : 'hover', 
                            html:true, 
                            content: info.event.extendedProps.description, 
                            container:'body' 
                          }).popover();

          },

          eventClick: function(info) {
            info.event.dateStr = info.event.startStr;
            //showEventDetails(info.event.extendedProps.schedule_id);
            editCallerAvailableHoursDialog(info.event);
          },

          events: {
            url: $('meta[name="main-url"]').attr('content')+'/caller/schedule/events',
            method: 'POST',
            extraParams: {
              "_token": $('meta[name="csrf-token"]').attr('content')
            },
            failure: function() {
              alert('there was an error while fetching events!');
            }
          }



        });
        calendar.render();
        my_calendar = calendar;
      });
    </script>
@endsection