@extends('layouts.mainlayout')
@section('title', 'My Schdedule')
@section('main')
<div class="card" >
  <div class="card-header header">
    <div class="row">
      <div class="col-md-12 text-center">

      </div>
  </div>
  <div class="container">
    <div class="response"></div>
    <div class="row mt-3">
      <div class="col-md-12 text-center">
        <button class="btn btn-warning" id="btn-prev">
          <i class="icon-circle-left2 mr-2"></i>
          Previous
        </button>
        <h3 class="mb-0 mr-2 ml-2 font-weight-semibold" id="calendar-title" style="display: inline-block;"></h3>
        <button class="btn btn-warning" id="btn-next">
          Next
          <i class="icon-circle-right2 ml-2"></i>
        </button>
        <button class="btn btn-default" id="btn-weekly-view" style="float: right;">
          <i class="icon-calendar mr-2"></i>
          Weekly View
        </button>
        <button class="btn btn-default" id="btn-monthly-view" style="float: right;">
          <i class="icon-calendar mr-2"></i>
          Monthly View
        </button>
      </div>
      <div class="col-md-12">
        <div id='calendar'></div>        
      </div>
    </div>
  </div>
  <!-- <div class="container">
    <div style="margin-top: 20px;">
      <table class="table table-responsive">
        <thead>
          <th>Sl. No.</th>
          <th>Employee</th>
          <th>Working Days</th>
        </thead>
        <tbody id="table-employees">
        </tbody>
      </table>
    </div>
  </div> -->
</div>   
@endsection
@section('js')
<script>
  $(document).ready(function () {
    // $.ajaxSetup({
    //     headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
    // });
    var calendar = $('#calendar').fullCalendar({
      eventLimit: 3,
      displayEventTime: true,
      editable: false,
      textEscape: true,
      firstDay: 1,
      defaultView: 'agendaWeek',
      showNonCurrentDates: false,
      plugins: [ 'dayGrid', 'interaction', 'list', 'timeGrid' ],
      header: {
          left: '',
          center: '',
          right: ''
      },
      views: {
        listDay: { buttonText: 'list day' },
        listWeek: { buttonText: 'Weekly View' },
        listMonth: { buttonText: 'list month' }
      },
      eventTimeFormat: {
        hour: '2-digit',
        minute: '2-digit',
        meridiem: 'short',
      },
      allDaySlot: true,
      viewRender: function ( view, element ) {
        $.ajaxSetup({
            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
        });
        let start = new Date(view.start);
        let end = new Date(view.end);
        start = start.getDate() + "-" + (start.getMonth() + 1) + "-" + start.getFullYear();
        end = end.getDate() + "-" + (end.getMonth() + 1) + "-" + end.getFullYear();
        // console.info(start, end);
        var formData = new FormData();
        formData.append('start', start);
        formData.append('end', end);
        // console.info(postData);
        // call api to get the data here.
        var table = $('#table-employees').empty();
        var baseurl = '{{url('/')}}';
        var view = $('#calendar').fullCalendar('getView');
        let title = view.title;
        $("#calendar-title").text(title);
        $('#calendar').fullCalendar( 'removeEvents' );
        $.ajax({
          "type": 'POST',
          "url": baseurl+'/my-schedule-calendar-data',
          processData:false,
          contentType: false,
          // "dataType": "json",
          data: formData,
          beforeSend: function() {
            var button = document.getElementById("btn-monthly-view");
            button.disabled = true;
            var button = document.getElementById("btn-weekly-view");
            button.disabled = true;
          },
          success: function(data) {
            //alert("1")
            console.log(data);
            $('#calendar').fullCalendar( 'removeEvents' );
            $('#calendar').fullCalendar('renderEvents', data.events);
            var button = document.getElementById("btn-monthly-view");
            button.disabled = false;
            var button = document.getElementById("btn-weekly-view");
            button.disabled = false;
            //$('#btn-monthly-view').removeAttr('disabled');
            // $('#calendar').fullCalendar('renderEvents', previousEvents.concat(data.events));
            // console.log(data.events);
            // $('#calendar').fullCalendar('removeEvents');
            // var combinedEvents = previousEvents.concat(data.events);
            // var filteredEvents = removeDuplicateEvents(combinedEvents);
            // $('#calendar').fullCalendar('renderEvents', filteredEvents);
            // console.info(data);
            // let tableData = data.tableData;
            // var table = $('#table-employees');
            // let i = 1;
            // Object.keys(tableData).forEach(function(key) {
            //   let emp = key;
            //   let days = tableData[key];
            //   let row =  $('<tr>');
            //   row.append( '<td>' + i + '.</td>' );
            //   row.append( '<td>' + emp + '</td>' );
            //   row.append( '<td>' + days + '</td>' );
            //   table.append(row);
            //   i++;
            // });
          }
        });



      },
      // beforeSend: function() {
      //   $('#btn-monthly-view').attr('disabled', 'disabled');
      // },

      eventRender: function (event, element, view) {
        //alert("2")
        if (event.allDay === 'true') {
          event.allDay = true;
        } else {
          event.allDay = false;
        }
        var title = element.find('.fc-title, .fc-list-item-title');  
        console.log(title)   
        title.html(title.text());
        $("#btn-monthly-view").prop("disabled", true);
      },
    });

    $("#btn-weekly-view").hide();        
    $("#btn-prev").click(function(e) {
      $('#calendar').fullCalendar('prev');      
      var view = $('#calendar').fullCalendar('getView');
      let title = view.title;
      $("#calendar-title").text(title);
    })
    $("#btn-next").click(function(e) {
      // console.info("nexting");
      // console.info(calendar);
      $('#calendar').fullCalendar('next');
      var view = $('#calendar').fullCalendar('getView');
      let title = view.title;
      $("#calendar-title").text(title);
    })
    $("#btn-weekly-view").click(function(e) {
      //console.info("weekly view");
      $('#calendar').fullCalendar('changeView', 'agendaWeek');
      $("#btn-monthly-view").show();
      $("#btn-weekly-view").hide();
    })    
    
   
    $("#btn-monthly-view").click(function(e) {
      //console.info("month view");
      $('#calendar').fullCalendar('changeView', 'month');
      $("#btn-weekly-view").show();
      $("#btn-monthly-view").hide();
    })    
    // $("#btn-monthly-view").click(function() {
    //   $("#btn-weekly-view").prop("disabled", true);
    //   setTimeout(function() {
    //    $("#btn-weekly-view").prop("disabled", false);
    //    }, 3000);
    //   });
    // $("#btn-weekly-view").click(function() {
    //   $("#btn-monthly-view").prop("disabled", true);
    //     setTimeout(function() {
    //      $("#btn-monthly-view").prop("disabled", false);
    //     }, 3000);
    //   });
     });
  
  function displayMessage(message) {
    $(".response").html("<div class='success'>"+message+"</div>");
    setInterval(function() { $(".success").fadeOut(); }, 1000);
  }
  
</script>
<style>

  .fc-agenda-view .fc-time-grid-container {
    display: none;
  }
  #btn-weekly-view[disabled] {
    color: black;
  }
</style>
@endsection