{% extends 'base.html.twig' %}

{% block title %} {{ gite.name }} - Les gîtes de Roquetoire{% endblock %}

{% block meta %}
    <meta name="description" content="Tarif et calendrier du gîte">
{% endblock %}

{% block content %}

<div class="container mt-5">
  <h1>Tarifs & Réservations :  {{ gite.name }}</h1>
    <div class="mt-4">
        <div class="calendrier mb-5" data-gite-id="{{ gite.id }}" data-prix-normal="{{ prixNormal }}" data-prix-modifier="{{ prixModifier|json_encode|e('html_attr') }}" data-reservation="{{ reservationsDates|json_encode|e('html_attr') }}">
            <div class="row justify-content-center date-range">
                <div class="checkin-picker col-md-6"></div>
                <div class="checkout-picker col-md-6"></div>
            </div>
            <p class="mt-3">
                <button class="btn btn-perso" role="button" id="envoiedonnees">
                    Valider la réservation du  <span id="display-checkin"></span>
                    au <span id="display-checkout">
                </button>
                <button class="btn btn-danger ms-2" id="clear-dates-btn">Effacer</button>
            </p>
        </div>
    </div>
</div>

{# Modal pour dire que les dates se chevauchent #}
<div class="modal" id="modal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Erreur de réservation</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Les dates sélectionnées chevauchent une réservation existante. Veuillez choisir d'autres dates.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-perso" data-bs-dismiss="modal">Fermer</button>
      </div>
    </div>
  </div>
</div>

{# Modal pour dire qu'il faut séléectionner les dates d'arriver et de fin #}
<div class="modal" id="modal2" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Sélection de dates requise</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Veuillez sélectionner les dates d'arrivée et de départ avant de réserver.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-perso" data-bs-dismiss="modal">Fermer</button>
      </div>
    </div>
  </div>
</div>


<script>

// Déclaration des variables

let arriver_date, arriver_div, arriver_dp, depart_date, depart_div, depart_dp;
let id = document.querySelector('.calendrier').getAttribute('data-gite-id');
let prixNormal = document.querySelector('.calendrier').getAttribute('data-prix-normal');
let prixModifier = JSON.parse(document.querySelector('.calendrier').getAttribute('data-prix-modifier'));
let reservationDates = JSON.parse(document.querySelector('.calendrier').getAttribute('data-reservation'));

// Tout Les functions

// Function pour les dates déjà réserver
function isReserved(arrivalDate, departureDate) {
  for (let i = 0; i < reservationDates.length; i++) {
    let dateDebutReservation = new Date(reservationDates[i].dayStart);
    let dateFinReservation = new Date(reservationDates[i].dayEnd);
    dateDebutReservation.setHours(0, 0, 0, 0);
    dateFinReservation.setHours(0, 0, 0, 0);

    // Vérification du chevauchement des dates
    if ((arrivalDate >= dateDebutReservation && arrivalDate <= dateFinReservation) ||
        (departureDate >= dateDebutReservation && departureDate <= dateFinReservation) ||
        (arrivalDate <= dateDebutReservation && departureDate >= dateFinReservation)) {
      return true;
    }
  }
  return false;
}


// Function pour obtenir le prixModifier pour les dates précis
function PriceChange(date) {
  let prix = prixNormal;

  prixModifier.forEach(function(modif) {
    let dateArrivee = modif.dateArrivee.date.split(' ')[0];
    let dateDepart = modif.dateDepart.date.split(' ')[0];

    let dateDebut = new Date(dateArrivee);
    dateDebut.setHours(0, 0, 0, 0);
    let dateFin = new Date(dateDepart);

    if (date >= dateDebut && date <= dateFin) {
      prix = modif.prix / 100;
    }
  });

  return prix;
}

// Function qui récupère les jours sélectionner avec les prix
function PriceListSelected(arriverDate, departDate, prixNormal, prixModifier) {
  let prixListe = [];
  let currentDate = new Date(arriverDate);

  while (currentDate <= departDate) {
    let currentDateStr = currentDate.toLocaleDateString();
    let prix = PriceChange(currentDate);
    prixListe.push({ date: currentDateStr, prix: prix });
    currentDate.setDate(currentDate.getDate() + 1);
  }
  return prixListe;
}

// Function qui envoie les données au controller
function SendsData(arriverDate, departDate, id, prixListe) {
  let jsonData = JSON.stringify(prixListe);
  let encodeData = encodeURIComponent(jsonData);
  let url = '/tarif-et-reservation/gite-du-bonheur/' + arriverDate.toLocaleDateString().replace(/\//g, '-') + '_' + departDate.toLocaleDateString().replace(/\//g, '-') + '_' + id  + '?prixListe=' + encodeData;
  window.location.href = url;
}

// Fonction pour activer ou désactiver le lien en fonction des dates sélectionnées
function LinkActive() {
    if (arriver_date !== undefined && depart_date !== undefined) {
        document.getElementById("envoiedonnees").classList.remove('disabled');
    } else {
        document.getElementById("envoiedonnees").classList.add('disabled');
    }
}

// Gérer l'événement de clic sur le bouton "Réserver"
let sendButton = document.querySelector('#envoiedonnees');
let modal = new bootstrap.Modal(document.getElementById('modal'));
let modal2 = new bootstrap.Modal(document.getElementById('modal2'));

sendButton.addEventListener('click', (event) => {
  if (sendButton.classList.contains('disabled')) {
    event.preventDefault();
  } else {
    if (arriver_date !== undefined && depart_date !== undefined) {
      if (!isReserved(arriver_date, depart_date)) {
        let prixListe = PriceListSelected(arriver_date, depart_date, prixNormal, prixModifier);
        SendsData(arriver_date, depart_date, id, prixListe);
      } else {
        modal.show();
        event.preventDefault();
      }
    } else {
      modal2.show();
      event.preventDefault();
    }
  }
});

// Function pour mettre à jour la date affichée dans le bouton
function update() {
  if (arriver_date !== undefined) {
    document.querySelector('#display-checkin').innerHTML = new Date(arriver_date).toLocaleDateString();
  }
  if (depart_date !== undefined) {
    document.querySelector('#display-checkout').innerHTML = new Date(depart_date).toLocaleDateString();
  }
}

// Function pour effacer les dates sélectionner
function clearDates() {
  arriver_date = undefined;
  depart_date = undefined;
  document.querySelector('#display-checkin').innerHTML = "";
  document.querySelector('#display-checkout').innerHTML = "";
}

// Gérer l'événement de clic sur le bouton "Effacer"
document.getElementById('clear-dates-btn').addEventListener('click', function() {
  clearDates();
  arriver_dp.clearDates();
  depart_dp.clearDates();
});


// Fin des functions

// Calendrier Arriver
// Création du sélecteur de date pour l'arrivée
arriver_div = $('.checkin-picker').datepicker({
  autoclose: false,
  language: "fr",
  title: "Choix de la date d'arriver",
  startDate: new Date(),
  beforeShowDay: function(date) {
    let day = date.getDate();
    let prix = PriceChange(date);

    if (isReserved(date)) {
      return {
        classes: 'reserved',
        content: '<div class="date">' + day + '</div><div class="non-dispos">&#10060;</div>',
        enabled: false
      };
    }

    if (depart_date !== undefined) {
      // Désactive la sélection de date pour le jour suivant la date de départ
      if (date > depart_date) {
        return false;
      }
      // Affiche la date de départ dans le sélecteur de date d'arrivée
      if (date.getDate() === depart_date.getDate() &&
        date.getMonth() === depart_date.getMonth() &&
        date.getFullYear() === depart_date.getFullYear()) {
        return {
          content: day + '<span class="prix-calendrier">' + prix + '€</span>',
          classes: 'is-selected'
        };
      }
    }
    // Affiche la plage de dates dans le sélecteur de date d'arrivée
    if (arriver_date !== undefined && depart_date !== undefined) {
      if (date > arriver_date && date < depart_date) {
        return {
          content: day + '<span class="prix-calendrier">' + prix + '€</span>',
          classes: 'is-between'
        };
      }
    }
    // Affiche la date d'arrivée dans le sélecteur de date d'arrivée
    if (arriver_date !== undefined) {
      if (date.getDate() === arriver_date.getDate() &&
        date.getMonth() === arriver_date.getMonth() &&
        date.getFullYear() === arriver_date.getFullYear()) {
        return {
          content: day + '<span class="prix-calendrier">' + prix + '€</span>',
          classes: 'active'
        };
      }
    }
    return {
      content: day + '<span class="prix-calendrier">' + prix + '€</span>',
    };
  }
});

// Sauvegarde du sélecteur de date d'arrivée pour une utilisation ultérieure
arriver_dp = arriver_div.data('datepicker');

// Met à jour les sélecteurs de date lorsque la date d'arrivée est modifiée
arriver_div.on('changeDate', (event) => {
  if (event.date) {
    arriver_date = event.date;
    let prixListe = PriceListSelected(arriver_date, depart_date, prixNormal, prixModifier);
    depart_dp.update();
    update();
    // Mettre à jour la vue du calendrier de départ
    depart_dp.viewDate = new Date(arriver_date);
    depart_dp.fill();
  }
});

// ################### //

// Calendrier Départ
// Création du sélecteur de date pour le départ
depart_div = $('.checkout-picker').datepicker({
  autoclose: false,
  language: "fr",
  title: "Choix de la date de départ",
  startDate: new Date(),
  beforeShowDay: function(date) {
    let day = date.getDate();
    let prix = PriceChange(date);

    if (isReserved(date)) {
      return {
        classes: 'reserved',
        content: '<div class="date">' + day + '</div><div class="non-dispos">&#10060;</div>',
        enabled: false
      }; 
    }

    if (arriver_date !== undefined) {
      // Désactive la sélection de date pour le jour précédent la date d'arrivée
      if (date < arriver_date) {
        return false;
      }
      // Affiche la date d'arrivée dans le sélecteur de date de départ
      if (date.getDate() === arriver_date.getDate() &&
        date.getMonth() === arriver_date.getMonth() &&
        date.getFullYear() === arriver_date.getFullYear()) {
        return {
          content: day + '<span class="prix-calendrier">' + prix + '€</span>',
          classes: 'is-selected'
        };
      }
    }
    // Affiche la plage de dates dans le sélecteur de date de départ
    if (arriver_date !== undefined && depart_date !== undefined) {
      if (date > arriver_date && date < depart_date) {
        return {
          content: day + '<span class="prix-calendrier">' + prix + '€</span>',
          classes: 'is-between'
        };
      }
    }
    // Affiche la date de départ dans le sélecteur de date de départ
    if (depart_date !== undefined) {
      if (date.getDate() === depart_date.getDate() &&
        date.getMonth() === depart_date.getMonth() &&
        date.getFullYear() === depart_date.getFullYear()) {
        return {
          content: day + '<span class="prix-calendrier">' + prix + '€</span>',
          classes: 'active'
        };
      }
    }
    return {
      content: day + '<span class="prix-calendrier">' + prix + '€</span>',
    };
  }
});


// Sauvegarde du sélecteur de date de départ pour une utilisation ultérieure
depart_dp = depart_div.data('datepicker');

// Met à jour les sélecteurs de date lorsque la date de départ est modifiée
depart_div.on('changeDate', (event) => {
  depart_date = event.date;
  let prixListe = PriceListSelected(arriver_date, depart_date, prixNormal, prixModifier);
  arriver_dp.update();
  depart_dp.update();
  update();
  depart_dp.viewDate = new Date(depart_date);
  depart_dp.fill();
  arriver_dp.viewDate = new Date(depart_date);
  arriver_dp.fill();
});

</script>

{% endblock %}