'use strict';
var renderCalendar = function () {
  // Get the current date
  // Get the current date
  var today = moment();

  // Create an object to store the weeks and their days
  var weeks = {};

  // Set the start and end dates
  var startDate = today.clone();
  var endDate = today.clone().add(30, 'days');

  // Calculate the number of weeks between the start and end dates
  var numWeeks = Math.ceil(endDate.diff(startDate, 'days') / 7);

  // Loop through the weeks
  for (var i = 0; i < numWeeks; i++) {
    // Get the start and end dates for the current week
    var startOfWeek = today.clone().startOf('isoWeek');
    var endOfWeek = today.clone().endOf('isoWeek');

    // Check if start of week is a Sunday and add one day if true
    if (startOfWeek.format('dddd') === 'Sunday') {
      startOfWeek.add(1, 'day');
    }

    // Create an array to store the days in the current week
    var week = [];

    // Loop through the days of the current week, skipping Sundays
    for (var j = startOfWeek; j <= endOfWeek; j.add(1, 'days')) {

      if (j.isSame(moment(), 'day')) {
        week.push('Today - ' + j.format('YYYY-MM-DD'));
      } else {
        week.push(j.format('YYYY-MM-DD'));
      }

    }

    // Add the week array to the weeks object
    weeks['Week ' + (i + 1)] = week;

    // Add one week to the current date
    today.add(1, 'weeks');
  }

  // Get the table element

  document.addEventListener('DOMContentLoaded', () => {

    const table = document.getElementById('widget-calendar-final');


    const weeksDOM = [];
    const weekTemplate = document.createElement('div');
    weekTemplate.classList.add('week');
    for (const weekDays of Object.values(weeks)) {
      // Loop through the days of the week
      var date2 = new Date();
      weekDays.forEach((day) => {
        const dayCell = document.createElement('div');
        dayCell.classList.add('bookingor-day-container');
        if (!(
          moment(new Date(day)).isBefore(moment(), 'day') ||
          moment(new Date(day)).isAfter(moment().add(30, 'days'), 'day')
        )) {
          // create the div element here
          const dayCell = document.createElement('div');
          // ...
        }
        dayCell.dataset.date = moment(new Date(day)).format("YYYY-MM-DD");
        const dayName = document.createElement("div");
        dayName.classList.add("bookingor-slider-calendar-day");
        const dayNum = document.createElement("div");
        dayNum.classList.add("bookingor-slider-calendar-date");
        const dayMonth = document.createElement("div");
        dayMonth.classList.add("bookingor-slider-calendar-month");
        // Check if the current day is today and add the "today" class if it is
        if (day.includes('Today')) {
          dayCell.classList.add('today');
          dayCell.classList.add('selected');
          let removedToday = day.slice(7);
          dayNum.textContent = moment(removedToday).format('D');
        } else {
          dayNum.textContent = moment(day).format('D');
        }

        dayName.textContent = moment(new Date(day)).format('ddd');
        dayMonth.textContent = moment(new Date(day)).format('MMM');

        dayCell.appendChild(dayName);
        dayCell.appendChild(dayNum);
        dayCell.appendChild(dayMonth);

        weekTemplate.appendChild(dayCell);
        weeksDOM.push(weekTemplate);
      });

      weeksDOM.forEach((row) => table.appendChild(row));
    }
  });

  // Create the table header


  // Loop through the days of the week and add header cells
  const daysOfWeek = ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN'];

};
renderCalendar();

(function ($) {
  'use strict';

  $(document).ready(function ($) {
    // INIT

    ///=========================
    // start slick slider 
    // ===========================
    $(".week").slick({

      infinite: false,

      slidesToShow: 7,
      autoSlidesToShow: true,
      slidesToScroll: 1,
      nextArrow: '<div><svg xmlns="http://www.w3.org/2000/svg" class="bg-ar rigt" viewBox="0 0 24 24" fill="currentColor"><path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"></path></svg></div>',
      prevArrow: '<div class="" ><svg xmlns="http://www.w3.org/2000/svg" class="bg-ar lft" viewBox="0 0 24 24" fill="currentColor"><path d="M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z"></path></svg></div>',

      responsive: [{
          breakpoint: 1600,
          settings: {
            slidesToShow: 7,
          }
        },
        {
          breakpoint: 1200,
          settings: {
            slidesToShow: 6,
          }
        },
        {
          breakpoint: 768,
          settings: {
            slidesToShow: 4,
          }
        },
        {
          breakpoint: 576,
          settings: {
            slidesToShow: 3,
          }
        },
        {
          breakpoint: 320,
          settings: {
            slidesToShow: 2,
          }
        }
      ]
    });


  });

})(jQuery);