@extends('layouts.mainlayout')
@section('title', 'View Team Schedule')
@section('main')
<div class="card" >
  <div class="card-header header">
    <div class="row">
      <div class="col-md-12 text-center">
        <h1 style="display: inline-block;">{{@$team->team}} Team Schedule</h1>
        <a class="btn btn-default btn-close btn btn-primary" style="float: right;" href="{{ route('available-schedules.show' , base64_encode($team->id) ) }}">Manage Schedule</a>
      </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,
      eventOrder: 'start ',
      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 ) {
        console.log(view);
        $.ajaxSetup({
            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
        });
        let start = new Date(view.start);
        let end = new Date(view.end);
        end.setDate(end.getDate()-1);        
        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+'/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) {
            console.info("data");
            
          $('#calendar').fullCalendar( 'removeEvents' );
          
            function compareShifts(a, b) {
               var timeA = parseInt(a.start_time.split(':')[0]); // Extract the hour part from start_time
               var timeB = parseInt(b.start_time.split(':')[0]);
             
               // Convert 12AM and 12PM to 0 for proper sorting
               if (timeA === 12) timeA = 0;
               if (timeB === 12) timeB = 0;
             
               // Check if the shifts are in different time periods (AM or PM)
               var periodA = a.start_time.includes('AM') ? 'AM' : 'PM';
               //console.log(periodA);
               var periodB = b.start_time.includes('AM') ? 'AM' : 'PM';
               //console.log(periodB);
    
               if (periodA === periodB) {
                 //alert()
                 // If the shifts are in the same period, sort based on the start time
                 if (timeA < timeB) {
                   return -1; // a should come before b
                 } else if (timeA > timeB) {
                   return 1; // a should come after b
                 } else {
                   return 0; // a and b are equal, maintain their original order
                 }
               } else {
                 // If the shifts are in different periods, AM should come before PM
                 if (periodA === 'AM') {
                   return -1; // a should come before b
                 } else {
                   return 1; // a should come after b
                 }
               }
            }

           data.events.sort(compareShifts);
           console.info(data);
            $('#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;
            
            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++;
              
            });
          }
        });
      },

      eventRender: function (event, element, view) {
        // console.info("data");
        // console.info(view);
        if (event.allDay === 'true') {
          event.allDay = true;
        } else {
          event.allDay = false;
        }
        var title = element.find('.fc-title, .fc-list-item-title');    
       // console.info(title);      
        title.html(title.text());
      },
    });

    $("#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();
    })    
    
  });
  
  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;
  }
</style>

@endsection