document.addEventListener('DOMContentLoaded', function () {

  const calendarEl = document.getElementById('calendar');
  const dangerAlert = document.getElementById('danger-alert');
	var lang = document.getElementById('lang').getAttribute('data-value');

	let fcLocale = 'fr';   // default

if (lang === 'de') fcLocale = 'de';
if (lang === 'fr') fcLocale = 'fr';


  let myEvents = [];

  // -------------------------------
  // LANGUAGE HANDLING
  // -------------------------------
  var lang = document.getElementById('lang').getAttribute('data-value');
  var display = "";

  if (lang === "en") display = "Not available";
  if (lang === "de") display = "Reserviert";
  if (lang === "fr") display = "Indisponible";

  // -------------------------------
  // LOAD EVENTS FROM JSON
  // -------------------------------
  fetch('/js/events.json')
    .then(response => response.json())
    .then(data => {

      // Apply language title to all events
      data.forEach(ev => ev.title = display);

      myEvents = data;
      initCalendar();
    });

  // -------------------------------
  // INITIALIZE CALENDAR
  // -------------------------------
  function initCalendar() {

    const calendar = new FullCalendar.Calendar(calendarEl, {
      header: {
        center: 'customButton',
        right: 'today, prev,next'
      },
      plugins: ['dayGrid', 'interaction'],
      allDay: false,
		locale: fcLocale,
	  fixedWeekCount: true,
      editable: false,
      selectable: true,
      unselectAuto: false,
      displayEventTime: false,
      events: myEvents,

      // -------------------------------
      // COLOR AVAILABLE DATES GREEN
      // -------------------------------
      datesRender: function () {
        const today = new Date();
        const tomorrow = new Date(today);
        tomorrow.setDate(tomorrow.getDate() + 1);
        const tomorrowStr = tomorrow.toISOString().split('T')[0];

        document.querySelectorAll('.fc-day').forEach(cell => {
          const cellDate = new Date(cell.getAttribute('data-date'));

          const hasEvent = myEvents.some(event => {
            const eventStart = new Date(event.start);
            const eventEnd = new Date(event.end);
            return cellDate >= eventStart && cellDate < eventEnd;
          });

          if (!hasEvent && cellDate.toISOString().split('T')[0] >= tomorrowStr) {
            cell.style.backgroundColor = '#c8fdc4';
          }
        });
      },

      // -------------------------------
      // DATE SELECTION HANDLING
      // -------------------------------
      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();

    // -------------------------------
    // FORM SUBMISSION (ADD EVENT)
    // -------------------------------
    const form = document.querySelector('form');

    form.addEventListener('submit', function (event) {
      event.preventDefault();

      const startDate = document.querySelector('#start-date').value;
      const endDate = document.querySelector('#end-date').value;

      const endDateFormatted = moment(endDate, 'YYYY-MM-DD')
        .add(1, 'day')
        .format('YYYY-MM-DD');

      if (endDateFormatted <= startDate) {
        dangerAlert.style.display = 'block';
        return;
      }

      const newEvent = {
        id: uuidv4(),
        title: display,
        start: startDate,
        end: endDateFormatted,
        allDay: false,
        backgroundColor: "#f0a6a1"
      };

      // Add to calendar
      calendar.addEvent(newEvent);

      // Save to server
      fetch('add_event.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(newEvent)
      });

      form.reset();
    });
  }
});