$(document).ready(function () {
    var url = window.location.pathname;
    $(`.nav-item .nav-link[href="${url}"]`).addClass("active")
})

$(".dangerous-form").submit(function(e){
    const warning = $(this).data('warning')
    if(!confirm(warning)){
        e.preventDefault()
    }
})

let sizeVariations = []
function validateTagInp(e) {
    let error = false;
    if (e.key === "Enter" || e.type == "click") {
        e.preventDefault();
        let wrapper = $(this).parents(".input-field")
        $(wrapper).find(".tag-inp").each(function () {
            if ($(this).val() == "") {
                error = true;
                alert($(this).data("error"))
            }
            if (!this.validity.valid) {
                error = true;
                alert($(this).data("error"), "danger")
                // Add your error handling or display logic here
            }
        })
        if (!error) {
            let temp = {
                size: $(wrapper).find(".tag-inp[data-name='size']").val(),
                price: $(wrapper).find(".tag-inp[data-name='price']").val()
            }
            sizeVariations.push(temp)
            console.log(sizeVariations)
            $(wrapper).find(".tag-inp").val("")
            $(wrapper).find(".tags-wrapper").html("")

            sizeVariations.forEach(item => {
                $(wrapper).find(".tags-wrapper").append(`<li data-tag='${JSON.stringify(item)}'>${item.size} (${item.price}$)<button type="button" onclick="removeTag(this)"><i class="fa-regular fa-xmark"></i></button></li>`)
            })
            $("#product-sizes").val(JSON.stringify(sizeVariations))
        }
    }
}
$(document).ready(function () {
    Coloris({
        el: ".custom-color-picker",
        swatches: [
            '#264653',
            '#2a9d8f',
            '#e9c46a',
            '#f4a261',
            '#e76f51',
            '#d62828',
            '#023e8a',
            '#0077b6',
            '#0096c7',
            '#00b4d8',
            '#48cae4',
        ]
    });
})

function removeTag(btn) {
    let temp = $(btn).parent().data("tag")
    sizeVariations.forEach((item, ind) => {
        if (item.size == temp.size && temp.price == item.price) {
            sizeVariations.splice(ind, 1)
        }
    })
    $(btn).parents("li").remove()
    $("#product-sizes").val(JSON.stringify(sizeVariations))
}
$(document).ready(function () {
    $(".tag-btn").click(validateTagInp)
    $(".tag-inp").keypress(validateTagInp)
})



$(".image-upload input").change(function () {
    let input = this;
    let img = $(input).parent().find('img');
    const wrapper = $(input).parents('.image-upload')
    const progress = $(input).siblings('.progress')
    const xhr = new XMLHttpRequest();
    const formData = new FormData();
    formData.append('image', input.files[0]);
    xhr.open('POST', '/admin/api/cms/upload/image', true);
    $(progress).find(".progress-bar").removeClass('bg-success bg-danger')
    $(wrapper).addClass('uploading')
    xhr.upload.onprogress = function (e) {
        if (e.lengthComputable) {
            const percentComplete = (e.loaded / e.total) * 100;
            $(progress).find(".progress-bar").css({
                width: `${percentComplete}%`
            })
        }
    };

    xhr.onload = function () {
        const images = JSON.parse(xhr.response).files
        console.log(images)
        console.log('xhr.response', xhr.response)
        if (xhr.status === 200) {
            $(progress).find(".progress-bar").css({
                width: `100%`
            })
            $(input).siblings('.file-url').val(`/uploads/images/`+ images[0].filename)
            $(img).attr('src',(`/uploads/images/`+ images[0].filename))
        }
        setTimeout(() => {
            $(wrapper).removeClass('uploading')
        }, 500);
    }
    xhr.send(formData);
});
$(".video-upload input").change(function () {
    let input = this;
    let video = $(input).parent().find('video');
    let image = $(input).parent().find('img');
    const wrapper = $(input).parents('.image-upload')
    const progress = $(input).siblings('.progress')
    const xhr = new XMLHttpRequest();
    const formData = new FormData();
    formData.append('video', input.files[0]);
    xhr.open('POST', '/admin/api/cms/upload/video', true);
    $(progress).find(".progress-bar").removeClass('bg-success bg-danger')
    $(wrapper).addClass('uploading')
    xhr.upload.onprogress = function (e) {
        if (e.lengthComputable) {
            const percentComplete = (e.loaded / e.total) * 100;
            $(progress).find(".progress-bar").css({
                width: `${percentComplete}%`
            })
        }
    };

    xhr.onload = function () {
        const videos = JSON.parse(xhr.response).files
        console.log(videos)
        console.log('xhr.response', xhr.response)
        if (xhr.status === 200) {
            $(progress).find(".progress-bar").css({
                width: `100%`
            })
            $(input).siblings('.file-url').val(`/uploads/videos/`+ videos[0].filename)
            $(video).show()
            $(image).hide()
            $(video).find('source').attr('src',(`/uploads/videos/`+ videos[0].filename))
        }
        setTimeout(() => {
            $(wrapper).removeClass('uploading')
        }, 500);
    }
    xhr.send(formData);
});
$(".toggle-password").click(function () {
    if ($(this).siblings("input").attr("type") == "password") {
        $(this).children().removeClass("fa-eye").addClass("fa-eye-slash")
        $(this).siblings("input").attr("type", "text")
    } else {
        $(this).children().addClass("fa-eye").removeClass("fa-eye-slash")
        $(this).siblings("input").attr("type", "password")
    }
})
function alert(message, type) {
    var alertPlaceholder = $(".alert-wrapper")
    var wrapper = document.createElement("div")
    wrapper.innerHTML = '<div class="alert alert-' + type + ' alert-dismissible" role="alert">' + message + '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>'

    alertPlaceholder.append(wrapper)
    setTimeout(() => {
        $(wrapper).remove()
    }, 5000);
}

(function ($) {
    let classes = ['outline-primary', 'outline-dark', 'outline-danger', 'info', 'secondary'];
    let selects = $('select[multiple]');
    selects.each(function (i, e) {
        let randomClass = classes[Math.floor(Math.random() * classes.length)];
        $(this).bsSelectDrop({
            // btnClass: 'btn btn-'+classes[i],
            btnClass: 'select-multiple',
            btnWidth: 'auto',
            darkMenu: false,
            showSelectionAsList: false,
            showActionMenu: true,
            // showSelectedText: (count, total) => {return `${count} von ${total} Städte ausgewählt`}
        });
    })
}(jQuery));




// Select DOM elements
const calendar = document.querySelector('.calendar');
const monthYearHeader = calendar.querySelector('header h2');
const prevBtn = calendar.querySelector('.btn-prev');
const nextBtn = calendar.querySelector('.btn-next');
const calendarBody = calendar.querySelector('tbody');
const monthSelect = document.querySelector('#month-select');

// Define months and current date variables
const months = [
  'January', 'February', 'March', 'April', 'May', 'June', 
  'July', 'August', 'September', 'October', 'November', 'December'
];
let currentDate = new Date();

// Populate month select dropdown
months.forEach((month, index) => {
  const option = document.createElement('option');
  option.value = index;
  option.textContent = month;
  monthSelect.appendChild(option);
});

// Set the selected month to the current month
monthSelect.value = currentDate.getMonth();

// Render calendar function
function renderCalendar(date) {
  const year = date.getFullYear();
  const month = date.getMonth();

  // Set month and year header
  monthYearHeader.textContent = `${months[month]} ${year}`;

  // Clear previous calendar days
  calendarBody.innerHTML = '';

  // Get first day and last date of the month
  const firstDay = new Date(year, month, 1).getDay(); // 0 = Sunday
  const lastDate = new Date(year, month + 1, 0).getDate();

  // Get last date of the previous month
  const prevLastDate = new Date(year, month, 0).getDate();

  // Calculate calendar days
  let days = [];

  // Add previous month's days
  for (let i = firstDay === 0 ? 6 : firstDay - 1; i > 0; i--) {
    days.push({ date: prevLastDate - i + 1, class: 'prev-month' });
  }

  // Add current month's days
  for (let i = 1; i <= lastDate; i++) {
    const isToday =
      i === currentDate.getDate() &&
      month === currentDate.getMonth() &&
      year === currentDate.getFullYear();
    days.push({ date: i, class: isToday ? 'current-day' : '' });
  }

  // Add next month's days
  const nextDaysCount = 7 - (days.length % 7);
  for (let i = 1; i <= nextDaysCount && nextDaysCount < 7; i++) {
    days.push({ date: i, class: 'next-month' });
  }

  // Render rows in the calendar
  let row = document.createElement('tr');
  days.forEach((day, index) => {
    const cell = document.createElement('td');
    cell.textContent = day.date;
    if (day.class) cell.classList.add(day.class);
    row.appendChild(cell);

    // Start a new row after 7 days
    if ((index + 1) % 7 === 0) {
      calendarBody.appendChild(row);
      row = document.createElement('tr');
    }
  });
  if (row.childElementCount > 0) {
    calendarBody.appendChild(row);
  }
}

// Navigation buttons
prevBtn.addEventListener('click', () => {
  currentDate.setMonth(currentDate.getMonth() - 1);
  monthSelect.value = currentDate.getMonth();
  renderCalendar(currentDate);
});

nextBtn.addEventListener('click', () => {
  currentDate.setMonth(currentDate.getMonth() + 1);
  monthSelect.value = currentDate.getMonth();
  renderCalendar(currentDate);
});

// Month select dropdown change
monthSelect.addEventListener('change', (e) => {
  currentDate.setMonth(parseInt(e.target.value));
  renderCalendar(currentDate);
});

// Initial render
renderCalendar(currentDate);



$(document).ready(function() {
    
    var eventDataSourceURL = 'https://www.googleapis.com/calendar/v3/calendars/insoumis4circo95@gmail.com/events?key=AIzaSyCqKq2ABC9tGQtGkcAfvOD-5OCddkgOsLI';
   
    var calendarupdateInterval = 5000;  // RE-FETCH INTERVAL FOR GOOGLE CALENDAR DATA
    var calendarAddedtoPage = false;    // FLAG TO DETECT IF CALENDAR HAS PREVIOUSLY BEEN ADDED OR NEEDS TO BE ADDED
    var eventsArray = [];               // EMPTY ARRAY WE'LL USE TO HOLD OUR EVENTS

    
    // FUNCTION TO GET THE JSON DATA FROM GOOGLE CALENDAR API IN JSON FORMAT
    function getData() {
        eventsArray = [];   // EMPTY THE ARRAY EACH TIME WE START THIS OR WILL HAVE DUPLICATE EVENTS IN ARRAY
        $.getJSON(
            eventDataSourceURL,
            function(result) {
                
                // THE JSON DATA FROM GOOGLE IS NOT IN THE FORMAT THAT FULLCALENDAR NEEDS, SO WE'LL LOOP THROUGH AND BUILD OUR OWN ARRAY TO USE
                $.each(result.items, function(i, val) {
                    // IF THE STATUS IS CONFIRMED AND IT HAS A START DATE AND TIME... OTHERWISE WE MAY LACK DATA NEEDED TO ADD TO CALENDAR...
                    if (result.items[i].status === "confirmed" && result.items[i].start.dateTime) {
                        // WHEN WE ENCOUNTER AN EVENT WITH NO 'SUMMARY' TEXT (THE EVENT TITLE), WE NEED TO SET SOME TEXT SINCE THE CODE AND CALENDAR EXPECTS IT 
                        if (!result.items[i].summary){
                                result.items[i].summary = 'No Summary found in google calendar'
                        }
                        // THEN WE ADD IT TO OUR EVENTS ARRAY...
                        eventsArray.push({
                            title: val.summary.replace(/['"]+/g, "") + '\n -- event #'+i,  // THE TITLE ELEMENT OF THE ARRAY, REMOVING ANY QUOTES THOUGH...
                            start: val.start.dateTime   // THE DATE AND TIME FOR THE EVENT
                        });
                    } else {
                        console.log("could not add due to lacking data ... event date/time or status not confirmed");
                    }
                });
                
               //TEST REMOVE THE 15TH ARRAY ITEM 
               //if (calendarAddedtoPage == true){
               //    eventsArray.splice(15,1);
               //}
                
                
                // RUN OUR DRAW CALENDAR FUNCTION TO EITHER ADD THE CALENDAR AND POPULATE WITH DATA OR UPDATE THE CALENDAR WITH NEWLY ACQUIRED DATA...
                drawCalendar();
                
                
            }
        );
    }



    function drawCalendar() {
    
        if (calendarAddedtoPage == false) {
            calendarAddedtoPage = true;
           
            console.log('Create NEW Calendar for dom ' + new Date())
            $("#calendar").fullCalendar({
                defaultView: "month", 
                header: {
                    left: "title",
                    center: "",
                    right: 'agendaDay,agendaWeek,month,prev,next'
                },
                buttonIcons: {
                    prev: "left-single-arrow",
                    next: "right-single-arrow",
                    prevYear: "left-double-arrow",
                    nextYear: "right-double-arrow"
                }
                
            });
            $("#calendar").fullCalendar("removeEventSources" );     // JUST TO MAKE SURE NOTHINGS IN CALENDAR... PROBABLY OVERKIILL, BUT WHAT THE HELL...
            $("#calendar").fullCalendar("addEventSource", eventsArray); // ADD THE NEW ARRAY OF DATA TO THE CALENDAR
            
            // START A x SECOND LOOP WHERE WE RE-RUN THE GET DATA FUNCTION AND START IT ALL OVER AGAIN...
            setInterval(function(){
                getData()
            }, calendarupdateInterval)
            
        } else if (calendarAddedtoPage == true) {
            // CALENDAR HAS ALREADY BEEN DRAWN ONCE, SO JUST UPDATE THE DATA WITH NEW EVENTS ARRAY RETRIEVED...
            console.log('Updating calendar data - ' + new Date())
            
            $("#calendar").fullCalendar( 'removeEvents');  // JUST TO MAKE SURE NOTHINGS IN CALENDAR... PROBABLY OVERKIILL, BUT WHAT THE HELL...
            $("#calendar").fullCalendar( 'addEventSource', eventsArray ) // ADD THE NEW ARRAY OF DATA TO THE CALENDAR
           
        }
        
        
    }
    
    // START THINGS OFF AND GET THIS PARTY STARTED... BASICALLY CALLING THE FIRST FUNCTION THAT SETS IT INTO MOTION...
    getData();
});

const listItems = document.querySelectorAll('.main-design-set ul li');

// Add click event to each <li>
listItems.forEach(item => {
  item.addEventListener('click', () => {
    // Remove 'active' class from all <li>
    listItems.forEach(li => li.classList.remove('active'));
    // Add 'active' class to the clicked <li>
    item.classList.add('active');
  });
});



document.addEventListener('DOMContentLoaded', function () {
    var calendarEl = document.getElementById('calendar');
  
    var calendar = new FullCalendar.Calendar(calendarEl, {
  
        // plugins to load
        plugins: ['dayGrid', 'timeGrid'], // plugins to load
  
        // header controls
        header: {
          left: 'dayGridMonth,timeGridWeek,timeGridDay custom1',
          center: 'title',
          right: 'custom2 prevYear,prev,next,nextYear' 
        },
  
        // footer controls
        footer: {
          left: 'custom1,custom2',
          center: '',
          right: 'prev,next' 
        },
      
      // custom toolbar buttons
      customButtons: {
        custom1: {
          text: 'custom 1',
          click: function () {
            alert('clicked custom button 1!');
          } 
        },
  
        custom2: {
          text: 'custom 2',
          click: function () {
            alert('clicked custom button 2!');
          }
        } 
      } 
  });
  
    // render the calendar
    calendar.render();
  });

  document.addEventListener('DOMContentLoaded', function () {
    const calendarEl = document.getElementById('calendar');
    const myModal = new bootstrap.Modal(document.getElementById('form'));
    const dangerAlert = document.getElementById('danger-alert');
    const close = document.querySelector('.btn-close');
    
  
  
    
  const myEvents = JSON.parse(localStorage.getItem('events')) || [
      {
        id: uuidv4(),
        title: `Edit Me`, 
        start: '2023-04-11',
        backgroundColor: 'red',
        allDay: false, 
        editable: false,
      },
      {
        id: uuidv4(),
        title: `Delete me`,
        start: '2023-04-17',
        end: '2023-04-21',
  
        allDay: false, 
        editable: false,
      },
    ];
  
  
    const calendar = new FullCalendar.Calendar(calendarEl, {
      customButtons: {
        customButton: {
          text: 'Add Event',
          click: function () {
            myModal.show();
            const modalTitle = document.getElementById('modal-title');
            const submitButton = document.getElementById('submit-button');
            modalTitle.innerHTML = 'Add Event'
            submitButton.innerHTML = 'Add Event'
            submitButton.classList.remove('btn-primary');
            submitButton.classList.add('btn-success');
  
            
  
            close.addEventListener('click', () => {
              myModal.hide()
            })
  
            
  
          }
        }
      },
      header: {
        center: 'customButton', // add your custom button here
        right: 'today, prev,next '
      },
      plugins: ['dayGrid', 'interaction'],
      allDay: false,
      editable: true,
      selectable: true,
      unselectAuto: false,
      displayEventTime: false,
      events: myEvents,
      eventRender: function(info) {
        info.el.addEventListener('contextmenu', function(e) {
          e.preventDefault();
          let existingMenu = document.querySelector('.context-menu');
          existingMenu && existingMenu.remove();
          let menu = document.createElement('div');
          menu.className = 'context-menu';
          menu.innerHTML = `<ul>
          <li><i class="fas fa-edit"></i>Edit</li>
          <li><i class="fas fa-trash-alt"></i>Delete</li>
          </ul>`;
  
          const eventIndex = myEvents.findIndex(event => event.id === info.event.id);
          
          
          document.body.appendChild(menu);
          menu.style.top = e.pageY + 'px';
          menu.style.left = e.pageX + 'px';
  
          // Edit context menu
  
          menu.querySelector('li:first-child').addEventListener('click', function() {
            menu.remove();
  
            const editModal = new bootstrap.Modal(document.getElementById('form'));
            const modalTitle = document.getElementById('modal-title');
            const titleInput = document.getElementById('event-title');
            const startDateInput = document.getElementById('start-date');
            const endDateInput = document.getElementById('end-date');
            const colorInput = document.getElementById('event-color');
            const submitButton = document.getElementById('submit-button');
            const cancelButton = document.getElementById('cancel-button');
            modalTitle.innerHTML = 'Edit Event';
            titleInput.value = info.event.title;
            startDateInput.value = moment(info.event.start).format('YYYY-MM-DD');
            endDateInput.value = moment(info.event.end, 'YYYY-MM-DD').subtract(1, 'day').format('YYYY-MM-DD');
            colorInput.value = info.event.backgroundColor;
            submitButton.innerHTML = 'Save Changes';
  
          
          
  
  
            editModal.show();
  
            submitButton.classList.remove('btn-success')
            submitButton.classList.add('btn-primary')
  
            // Edit button
  
            submitButton.addEventListener('click', function() {
              const updatedEvents = {
                id: info.event.id,
                title: titleInput.value,
                start: startDateInput.value,
                end: moment(endDateInput.value, 'YYYY-MM-DD').add(1, 'day').format('YYYY-MM-DD'),
                backgroundColor: colorInput.value
              }
  
              if ( updatedEvents.end <= updatedEvents.start) { // add if statement to check end date
                dangerAlert.style.display = 'block';
                return;
              }
            
              const eventIndex = myEvents.findIndex(event => event.id === updatedEvents.id);
              myEvents.splice(eventIndex, 1, updatedEvents);
            
              localStorage.setItem('events', JSON.stringify(myEvents));
            
              // Update the event in the calendar
              const calendarEvent = calendar.getEventById(info.event.id);
              calendarEvent.setProp('title', updatedEvents.title);
              calendarEvent.setStart(updatedEvents.start);
              calendarEvent.setEnd(updatedEvents.end);
              calendarEvent.setProp('backgroundColor', updatedEvents.backgroundColor);
  
  
            
              editModal.hide();
  
            })
  
            
          
          });
  
          // Delete menu
          menu.querySelector('li:last-child').addEventListener('click', function() {
            const deleteModal = new bootstrap.Modal(document.getElementById('delete-modal'));
            const modalBody = document.getElementById('delete-modal-body');
            const cancelModal = document.getElementById('cancel-button');
            modalBody.innerHTML = `Are you sure you want to delete <b>"${info.event.title}"</b>`
            deleteModal.show();
  
            const deleteButton = document.getElementById('delete-button');
            deleteButton.addEventListener('click', function () {
              myEvents.splice(eventIndex, 1);
              localStorage.setItem('events', JSON.stringify(myEvents));
              calendar.getEventById(info.event.id).remove();
              deleteModal.hide();
              menu.remove();
  
            });
  
            cancelModal.addEventListener('click', function () { 
              deleteModal.hide();
            })
  
            
          
          
          });
          document.addEventListener('click', function() {
            menu.remove();
          });
        });
      },
  
      eventDrop: function(info) { 
        let myEvents = JSON.parse(localStorage.getItem('events')) || [];
        const eventIndex = myEvents.findIndex(event => event.id === info.event.id);
        const updatedEvent = {
          ...myEvents[eventIndex],
          id: info.event.id, 
          title: info.event.title,
          start: moment(info.event.start).format('YYYY-MM-DD'),
          end: moment(info.event.end).format('YYYY-MM-DD'),
          backgroundColor: info.event.backgroundColor
        };
        myEvents.splice(eventIndex, 1, updatedEvent); // Replace old event data with updated event data
        localStorage.setItem('events', JSON.stringify(myEvents));
        console.log(updatedEvent);
      }
  
    });
  
    calendar.on('select', function(info) {
  
      const startDateInput = document.getElementById('start-date');
      const endDateInput = document.getElementById('end-date');
      startDateInput.value = info.startStr;
      const endDate = moment(info.endStr, 'YYYY-MM-DD').subtract(1, 'day').format('YYYY-MM-DD');
      endDateInput.value = endDate;
      if(startDateInput.value === endDate) {
        endDateInput.value = '';
      }
    });
  
  
    calendar.render();
  
    const form = document.querySelector('form');
  
    form.addEventListener('submit', function(event) {
      event.preventDefault(); // prevent default form submission
  
      // retrieve the form input values
      const title = document.querySelector('#event-title').value;
      const startDate = document.querySelector('#start-date').value;
      const endDate = document.querySelector('#end-date').value;
      const color = document.querySelector('#event-color').value;
      const endDateFormatted = moment(endDate, 'YYYY-MM-DD').add(1, 'day').format('YYYY-MM-DD');
      const eventId = uuidv4();
  
      console.log(eventId);
  
      if (endDateFormatted <= startDate) { // add if statement to check end date
        dangerAlert.style.display = 'block';
        return;
      }
  
      const newEvent = {
        id: eventId,
        title: title,
        start: startDate,
        end: endDateFormatted,
        allDay: false,
        backgroundColor: color
      };
  
      // add the new event to the myEvents array
      myEvents.push(newEvent);
  
      // render the new event on the calendar
      calendar.addEvent(newEvent);
  
      // save events to local storage
      localStorage.setItem('events', JSON.stringify(myEvents));
  
      myModal.hide();
      form.reset();
    });
  
    myModal._element.addEventListener('hide.bs.modal', function () {
      dangerAlert.style.display = 'none';
      form.reset(); 
    });
  
  });
function hide(){
let btn = Document.getElementByclass ('.main-design-set ul li');
btn.style.background = 'red'
}