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

{% block title %}Tarif & Réservation - Test Projet{% endblock %}

{% block content %}

<div class="container mt-5">
    <h1>Tarifs & Réservations</h1>
    <div class="mt-4">
        <div class="calendrier mb-5" data-gite-id="1">
            <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">
                <a class="btn btn-perso" role="button" id="envoiedonnees">
                    Réserver du  <span id="display-checkin"></span>
                    au <span id="display-checkout"></span>
                </a>
                <button class="btn btn-danger ms-2" id="clear-dates-btn">Effacer</button>
            </p>
        </div>
    </div>
</div>


<script>

let arriver_date, arriver_div, arriver_dp, depart_date, depart_div, depart_dp;
let id = $(".calendrier").data("gite-id");
let prixNormal = {{ PrixNormalFormate }};

let prixModifier = [
    {% for modif in prixModifier %}
        { dateDebut: '{{ modif.dateArrivee|date("Y-m-d") }}', dateFin: '{{ modif.dateDepart|date("Y-m-d") }}', prix: '{{ (modif.prix / 100) |number_format(2, ",", ".") }}' } {% if not loop.last %},{% endif %}
    {% endfor %}
];

console.log(prixModifier);

let reservations = [
    {% for reservation in reservations %}
        { start: "{{ reservation.dayStart|date('Y-m-d') }}", end: "{{ reservation.dayEnd|date('Y-m-d') }}" } {% if not loop.last %},{% endif %}
    {% endfor %}
];

function isReserved(date) {
    // Vérifiez si la date est incluse dans une réservation existante
    for (let i = 0; i < reservations.length; i++) {
        if (date >= new Date(reservations[i].start) && date <= new Date(reservations[i].end)) {
            return true;
        }
    }
    return false;
}

// Envoie des données au controller
function envoyerDonneesAuController(arriverDate, departDate, id, prixListe) {
  let jsonData = JSON.stringify(prixListe);
  let encodeData = encodeURIComponent(jsonData);
  window.location.href = '/tarif-et-reservation/' + arriver_date.toLocaleDateString().replace(/\//g, '-') + '_' + depart_date.toLocaleDateString().replace(/\//g, '-') + '_1' + '_' + '?prixListe=' + encodeData;
}

// function genererListePrix(arriverDate, departDate, prix) {
//   let prixListe = [];
//   let currentDate = new Date(arriverDate);
//   while (currentDate <= departDate) {
//     prixListe.push({ date: currentDate.toLocaleDateString(), prix: prix });
//     console.log("Date:", currentDate.toLocaleDateString(), "Prix:", prix);
//     currentDate.setDate(currentDate.getDate() + 1);
//   }
//   return prixListe;
// }

function genererListePrix(arriverDate, departDate, prixNormal, prixModifier) {
  let prixListe = [];
  let currentDate = new Date(arriverDate);
  while (currentDate <= departDate) {
    let currentDateStr = currentDate.toLocaleDateString();
    let prix = prixNormal;
    console.log("Prix modifier:", prixModifier);
    if (prixModifier && prixModifier.length > 0) {
            prixModifier.forEach(function(modif) {
                let dateDebut = new Date(modif.dateDebut);
                let dateFin = new Date(modif.dateFin);
                if (currentDate >= dateDebut && currentDate <= dateFin) {
                    prix = modif.prix;
                }
            });
        }

    prixListe.push({ date: currentDateStr, prix: prix });
    currentDate.setDate(currentDate.getDate() + 1);
  }
  return prixListe;
}

// Fonction pour mettre à jour la date affichée dans le bouton
function update() {
  if (arriver_date !== undefined) {
    $('#display-checkin').html(arriver_date.toLocaleDateString());
  }
  if (depart_date !== undefined) {
    $('#display-checkout').html(depart_date.toLocaleDateString());
  }
}

// Gérer l'événement de clic sur le bouton "Effacer"
$('#clear-dates-btn').on('click', function() {
    clearDates();  
    // Effacer l'affichage dans le sélecteur de date
    $('.checkin-picker').datepicker('clearDates');
    $('.checkout-picker').datepicker('clearDates');

    arriver_dp.update();
    depart_dp.update();
});

function clearDates() {
  arriver_date = undefined;
  depart_date = undefined;
  // Réinitialise le contenu des éléments affichant les dates
  $('#display-checkin').html(''); 
  $('#display-checkout').html('');
}

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

    if (isReserved(date)) {
            return false;      
        }

    prixModifier.forEach(function(modif) {
      let dateDebut = new Date(modif.dateDebut);
      let dateFin = new Date(modif.dateFin);
      if (date >= dateDebut && date <= dateFin) {
        prix = modif.prix;
      }
    });

    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) => {
  // Sauvegarde de la date d'arrivée
  arriver_date = event.date;
  //console.log('Date d\'arrivée sélectionnée :', arriver_date.toLocaleDateString().replace(/\//g, '-'));
  let prixListe = genererListePrix(arriver_date, depart_date, prixNormal, prixModifier);
  console.log("Liste de prix complète:", prixListe);
  // Met à jour le sélecteur de date de départ pour afficher les dates de plage
  depart_dp.update();
  arriver_dp.update();
  update();
});

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

    if (isReserved(date)) {
            return false;        
        }

    prixModifier.forEach(function(modif) {
      let dateDebut = new Date(modif.dateDebut);
      let dateFin = new Date(modif.dateFin);
      if (date >= dateDebut && date <= dateFin) {
        prix = modif.prix;
      }
    });

    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) => {
  // Sauvegarde de la date de départ
  depart_date = event.date;
  let prixListe = genererListePrix(arriver_date, depart_date, prixNormal, prixModifier);
  console.log("Liste de prix complète:", prixListe);

  // Met à jour le sélecteur de date d'arrivée pour afficher les dates de plage
  arriver_dp.update();
  depart_dp.update();
  update();

});

// Gérer l'événement de clic sur le bouton "Réserver"
$('a.btn.btn-perso').on('click', function(event) {
    // Vérifiez si le lien a une classe indiquant qu'il est désactivé
    if ($(this).hasClass('disabled')) {
        event.preventDefault(); // Empêche la redirection si le lien est désactivé
    } else {
        if (arriver_date !== undefined && depart_date !== undefined) {
            prixListe = genererListePrix(arriver_date, depart_date, prixNormal);
            //envoyerPrix(prixListe);
            envoyerDonneesAuController(arriver_date, depart_date, id, prixListe);
        } else {
            console.error("Veuillez sélectionner les dates d'arrivée et de départ avant de réserver.");
            event.preventDefault(); // Empêche la redirection si les dates ne sont pas définies
        }
    }
});

// Fonction pour activer ou désactiver le lien en fonction des dates sélectionnées
function activerDesactiverLien() {
    // Vérifier si les dates sont sélectionnées
    if (arriver_date !== undefined && depart_date !== undefined) {
        // Si les dates sont sélectionnées, activer le lien
        $('a.btn.btn-perso').removeClass('disabled');
    } else {
        // Si les dates ne sont pas sélectionnées, désactiver le lien
        $('a.btn.btn-perso').addClass('disabled');
    }
}

</script>

{% endblock %}