<script type="text/javascript">
  /**
   * add event page script.
   * @script start
   * */
  $(document).ready(function() {
      $(".multiple-classes").select2({
        placeholder: "Select Classes",
        allowClear: false,
      });
      
      $(".single-select").select2({
        allowClear: false,
      });
      
      $("#student_ids").select2({
        placeholder: "Select Attendees",
        allowClear: false
      });
      
      var today = new Date();
      $('.date-picker').daterangepicker({
        singleDatePicker: true,
        showDropdowns: true,
        minYear: today.getFullYear(),
        maxYear: today.getFullYear() + 1,
        locale: { format: 'DD MMM YYYY' }
      });

      $('.time-picker').datetimepicker({
          allowInputToggle: true, keepOpen: true, useCurrent: false,
          format: 'hh:mm A',  
          stepping: 30, // Set the minute step to 30 minutes  
          // minDate: moment().startOf('day').set({ hour: 6, minute: 0 }), // Minimum time set to 6 AM
          // maxDate: moment().startOf('day').set({ hour: 22, minute: 0 }) // Maximum time set to 10 PM
      }).on('dp.show', function () { });    
      
      $('.time-picker').on('keydown', function(e) {
        e.preventDefault(); // Prevent any key presses in the input field
      });

      const $duration = $('#duration');
      const $durationValue = $('.duration-value');
      $duration.on('change', function() {
          let timeValue = $(this).val();
          let [hours, minutes] = timeValue.split(':').map(Number);
          let timeMinutes = (hours * 60) + minutes;
          $durationValue.html(`(In Minutes) ${timeMinutes}`);
      });

      $('#duration').on('keydown', function(e) {
        e.preventDefault(); // Prevent any key presses in the input field
      });

      $("#tutor_id").on("change", function() {
          getSubstituteTutors();
      });

    /*--------------submit event form----------------------*/
    $("#create-new-event").submit(function (e) {
      e.preventDefault();
      let hasIgnoreConflictCheckbox = $('#conflict_area').length; // Check if checkbox exists
      let isIgnoreConflictChecked = hasIgnoreConflictCheckbox == 1 && $('#ignore_conflict').prop('checked'); // Check if checkbox is checked (if it exists)
      // console.log(hasIgnoreConflictCheckbox, 'checkbox2', isIgnoreConflictChecked);
      $(document).find("span.text-danger").remove();

      if (hasIgnoreConflictCheckbox == 1 &&  isIgnoreConflictChecked != undefined && !isIgnoreConflictChecked) {
          $(document).find('[id=ignore_conflict]').next().after('<span class="help-block text-danger">Please check "Ignore Conflict" to proceed further.</span></br>');
          return false;
      }

      $('.store-an-event').prop('disabled', true);


      // Function to format selected options
      function formatSelectedOptions(selector, isDefault) {
          let formattedDataArray = [];
          $(selector + ' option:selected').each(function() {
              formattedDataArray.push({
                  learning_content_id: $(this).data('learning-content-id'),
                  lesson_id: $(this).val(),
                  is_default: isDefault,
                  is_skipped: false,
                  status: 'N/A'
              });
          });
          return formattedDataArray;
      }

      // Format default and additional selected options
      let formattedDefaultDataArray = formatSelectedOptions('.classes-content', true);
      let formattedDataArray = formatSelectedOptions('.more-content', false);

      // Combine formatted data arrays
      let finalArray = [...formattedDefaultDataArray, ...formattedDataArray];
      // Append the final array to the form data
      let form = $('#create-new-event');
      let formData = new FormData(form[0]);
      formData.append('courses', JSON.stringify(finalArray));
      $(document).find('.error-msg-rec-event').html('');
      
      const url = form.attr('action'); // AJAX request  
      const selectedAttendees = $('#student_ids').find('option:selected');
      const studentIds = selectedAttendees.map(function() {
        return $(this).val();
      }).get();

      formData.append('student_ids', JSON.stringify(studentIds));
      $(document).find("#conflict_area").html('');

      $.ajax({
          type: "POST",
          url: url,
          dataType: "json",
          data: formData,
          processData: false,
          contentType: false,
          success: function (response) {
              if (response.success) {
                  window.location.href = response.redirectUrl;
              }
          },
          error: function (response) {
            if(response.status === 500){
              if(response.responseJSON.conflictMessage !== undefined &&  response.responseJSON.conflictMessage != ''){
                  $('#conflict_area').html(response.responseJSON.conflictMessage);
                  $('#total-conflict').html(response.responseJSON.totalConflicts);
              }else{
                      Swal.fire({
                      icon: "error",
                      title: "Oops...",
                      text: response.responseJSON.message
                      });

                      // Reload the page after a brief delay 
                      setTimeout(() => {
                        if(response.responseJSON.redirectUrl === 'page-reload'){
                        window.location.reload();
                        }else{
                        window.location.href = response.responseJSON.redirectUrl;
                        }
                      }, 2000); // Adjust delay as needed (in milliseconds)
              }
            }else{
              let errorMessages = '';
              $.each(response.responseJSON.errors, function (field_name, error) {
                if(error.param == 'courses'){
                  $(document).find('[id=classes]').after('<span class="help-block text-danger">' + error.msg + '</span>');
                }
                else if(error.param == 'recurring_type'){
                  $(document).find('.error-msg-rec-event').html('<span class="help-block text-danger">' + error.msg + '</span>');
                }
                else{
                  $(document).find('[id=' + error.param + ']').after('<span class="help-block text-danger">' + error.msg + '</span>');
                }
              });
            }
          },
          complete: function () {
            $('.store-an-event').prop('disabled', false);
          }
      });
    });
    /*--------------submit event form----------------------*/

    // Function to show selected content preview and update content listing
    function updateContentListing() {
        $('.selected-content-preview').show();
        let templateType = $(this).data('type');
        let selectedOption = $(this).find("option:selected:last");
        let optionText = selectedOption.text();
        let learningContentName = selectedOption.attr('data-learning-content-title');
        let optionId = selectedOption.val();

        let attributesArray = getContentListingIds();
      if (attributesArray.includes(optionId) === false && optionText !== '') {
        appendToContentListing(optionId, learningContentName, optionText,templateType);
      }
    }

    // Function to get all data-lesson-id attributes from content listing
    function getContentListingIds() {
      return $('.content-listing li').map(function() {
        return $(this).attr('data-lesson-id');
      }).get();
    }

    $(".recurring_count").on('keyup change', function (e){
        let start_date  = new Date($('#start_date').val()); // 

        const checkedRadio = $('.recurring_count[type="radio"]:checked');
        const parentFormCheck = checkedRadio.closest('.form-check');
        const numberInput = parentFormCheck.find('.recurring_count[type="number"]');
        const numberInputValue = numberInput.val();
        let interval = numberInputValue - 1 ;
        if(interval < 0){
          interval = 0;
        }
        const selectedVal = $('.event_frequency:checked').val();
        let endDate;
        if(selectedVal == "weekly"){
          endDate = addWeeksToDate(start_date, interval);
        }else{
          endDate = addFortnightlyToDate(start_date, interval);
        }

        let  newDate = new Date(endDate);
        newDate = formatDate(newDate, 'DD-MM-YYYY');
        $('#repeat_until_end_date').val(newDate);
        $('#repeat_until_end_date').prop('disabled',true)
    });

      // Function to add weeks to a date
      function addWeeksToDate(date, weeks) {
        const newDate = new Date(date.getTime());
        newDate.setDate(newDate.getDate() + weeks * 7);
        return newDate;
      }

      // Function to add weeks to a date
      function addWeeksToDate(date, weeks) {
        const newDate = new Date(date.getTime());
        newDate.setDate(newDate.getDate() + weeks * 7);
        return newDate;
      }

      // Function to add 14 days to a date
      function addFortnightlyToDate(date, fortnightly) {
        const newDate = new Date(date.getTime());
        newDate.setDate(newDate.getDate() + fortnightly * 14);
        return newDate;
      }

      // Function to remove deselected content preview and update content listing
      $(".classes-content,.more-content").on("select2:unselecting", function(e) {
        var lastDeselectedValue = e.params.args.data.id;
        let attributesArray = getContentListingIds();
        if (attributesArray.includes(lastDeselectedValue) === true) {
          var matchingLI = $('ul.content-listing li[data-lesson-id='+lastDeselectedValue+']');
          matchingLI.remove();
        }
      });

    // Function to append a new item to the content listing
    function appendToContentListing(optionId, learningContentName, optionText,templateType) {
      $('.content-listing').append(`
          <li data-lesson-id="${optionId}">
              <div class="select_less_icon">
                  <img src="/images/${templateType =='default' ? 'classes2.svg':'more-files.svg'}" alt="" class="img-fluid">
              </div>
              <div class="select_less_content">
                  <h5>${optionText} ${templateType =='default' ? '<span class="default-course" data-toggle="tooltip" rel="tooltip" data-placement="top" title="Default Lesson">D</span>':''} </h5>
                  <p>${learningContentName}</p>
              </div>
              <div class="select_lessprev_close" data-id="${optionId}">
                  <a href="javascript:void(0)">
                      <img src="/images/close.svg" alt="">
                  </a>
              </div>
          </li>
      `);
      $('[data-toggle="tooltip"]').tooltip('dispose'); 
      $('[data-toggle="tooltip"]').tooltip();
    }

    // Remove the specified value from the given selector
    function removeValueFromSelector(selector, valueToRemove) {
        let selectedValues = $(selector).val() || [];
        selectedValues = selectedValues.filter(value => value !== valueToRemove);
        $(selector).val(selectedValues).trigger('change');
    }

    // Remove selected value from content listing
    function removeSelectedValue(valueToRemove) {
        removeValueFromSelector('.classes-content', valueToRemove);
        removeValueFromSelector('.more-content', valueToRemove);
    }

    // Event handlers
    $('.classes-content').change(updateContentListing);
    $('.more-content').change(updateContentListing);

    $(document).on('click', '.select_lessprev_close', function() {
      let value = $(this).data('id');
      $(this).parent().remove();
      removeSelectedValue(value);
    });

    $(document).on('click', '.clear-all', function() {
      $('.content-listing').html('');
      $('.classes-content,.more-content').val(null).trigger('change');
    });

    $('.add-more-content').click(function() {
        $('.more-content-section').show();
    });
  });


  function getSubstituteTutors(){
    $('#substitute_tutor_id').empty(); 
    const selected_tutor_id = $("#tutor_id").val();
    if(selected_tutor_id != ''){
        $.ajax({
          type: "POST",
          url: '/calendar/render-substitute-tutors',
          data: { main_tutor_id: selected_tutor_id, },
          success: function (response) {
              if (response.length > 0) {
              var newOption = new Option("Select A Substitute Tutor", "", false, false);
              $('#substitute_tutor_id').append(newOption).trigger('change');
              for (res of response) {
              newOption = new Option(res.first_name + ' '+ res.last_name, res._id, false, false);
              $('#substitute_tutor_id').append(newOption).trigger('change');
              }
              } else {
              $('#substitute_tutor_id').html('No substitute found.').trigger('change');
              }
          },
        });
    }
  }
  
  // Get eventDate from sessionStorage
  let eventDate = getSessionStorage('eventDate');
  if(eventDate !== null &&  eventDate !== undefined){
    // Format the eventDate to 'YYYY-MM-DD' format
    var formattedDate = formatDate(eventDate, 'YYYY-MM-DD');
    // Set the value of #start_date input element
    $("#start_date").val(formattedDate);
    removeSessionStorage('eventDate');
  }

  $(document).on("click change",".dt-scheduling-conflict", function(){
    $('#conflict_area').html("");
  });
  
  // --------- This event repeats flow Start -------
  $("#repeat_indefinitely").on('change', function (e){
      const newRepeatIndefinitely = $(this).is(":checked");
      if(newRepeatIndefinitely){
        $('.event-repeat-area').addClass('hide_radio_input');
      }else {
        $('.event-repeat-area').removeClass('hide_radio_input');
      }   
  });
  $('input[name="recurring_type"]').on('change', function () {
      if ($('input[name="recurring_type"]:checked').length > 0) {
          $('#recurringSettings').addClass('show_repeat_indefinitely'); 
      } else {
          $('#recurringSettings').removeClass('show_repeat_indefinitely'); 
      }
  });
  $(document).ready(function() {
      function updateClassBasedOnInput() {
          let checkedInput = $('input[name="recurring_type"]:checked').closest('.radio_group').find('input[type="number"]');
          let otherInputs = $('input[name="recurring_type"]:not(:checked)').closest('.radio_group').find('input[type="number"]');
          let radioGroup = checkedInput.closest('.event-repeat-area');
          // Reset values of unchecked inputs
          otherInputs.val('');
          // Check if the checked input has a value greater than 1
          let checkedValue = checkedInput.val();
          if (checkedValue && checkedValue > 1) {
              radioGroup.addClass('show_repeat_until');
          } else {
              radioGroup.removeClass('show_repeat_until');
          }
      }
      // Trigger the function when input is added to the number fields
      $('#no_of_week, #no_of_fortnightly').on('input', function() {
          updateClassBasedOnInput();
      });
      // Trigger the function when the radio buttons are changed
      $('input[name="recurring_type"]').on('change', function() {
          updateClassBasedOnInput();
      });
  });
  // --------- This event repeats flow Start End -------

  $("#add_substitute_tutor").on('change',function(){
    const isChecked = $(this).is(":checked");
    if(!isChecked){
      $('#substitute_tutor_id').val(null).trigger('change');
    }
  })

// Function to get the current date in YYYY-MM-DD format
function getCurrentDate() {
      const today = new Date();
      const year = today.getFullYear();
      const month = ('0' + (today.getMonth() + 1)).slice(-2); // Months are zero-based
      const day = ('0' + today.getDate()).slice(-2);
      return `${year}-${month}-${day}`;
  }

  // Function to set the current date to the date input field only if it doesn't have a value
  function setDefaultDate() {
      const dateInput = $('#start_date');
      if (!dateInput.val()) {
          dateInput.val(getCurrentDate());
      }
  }

  // Set the default date when the page loads, only if it hasn't been set by another function
  $(document).ready(setDefaultDate);
  /**
   * add event page script.
   * @script end
   * */
</script>
