@extends('layouts.app')

@section('content')

<link rel="stylesheet" href="{{asset('css/cartes.css')}}">
<link rel="stylesheet" href="{{asset('css/fleche.css')}}">
<!-- Popup -->
    <div class="popup" id="popup">
      <div class="popup-content">
        <h2>Bienvenue sur le site d'achat et vente des livres scolaires de la FCPE !</h2>
        <p> <strong>ATTENTION, compte tenu des spécificités des sections professionnelles (et section sportive
        de Laplace et ST2A ), nous ne sommes pas en mesure de fournir des manuels pour les
        seconde Pro, première Pro et terminale Pro.</strong></p>
        <p>La FCPE est une association aux nombreuses valeurs fortes faisant de celles-ci de véritables piliers
          dans le but d'aider les parents ainsi que leurs enfants à connaître une école plus juste, équitable et solidaire.
          Vous voulez en savoir plus ? Cliquez sur ce lien qui vous menera au site de la FCPE : <a href="https://14.fcpe.asso.fr/">https://14.fcpe.asso.fr/</a></p>
        <p> <i>* Le service des manuels scolaires est mis en place par des parents d’élèves bénévoles de la FCPE.
        Ce service est fondé sur la vente des manuels en début d’année et le rachat en fin d’année (cf.
        <a href="https://drive.google.com/file/d/1EzN3BE-P-jceT3YWGF9pyKBFzD_Khyxy/view">règlement intérieur</a>) . La FCPE est une association qui représente les parents d’élèves dont les valeurs sont une école laïque, publique et gratuite. N’hésitez pas à nous rejoindre et nous aider,
        même pour 1h ou 2 (conseils de classe, manuels scolaires...) !</i></p>
        <button id="close">Fermer</button>
      </div>
    </div>
    <script src="{{ asset('js/app.js') }}"></script>

<div id="website_closed" class="centered">
  <h2>Le site de réservation de rendez-vous en ligne est ouvert du 15 juin au 24 août.</h2>
  <h2>Le site de réservation de rendez-vous d'achat et vente de manuels scolaires de la FCPE est par conséquent actuellement fermé.</h2>
  <br/>
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRn11z2FSSZrjaJUIbPvukQzzE3cKqL1JCujeobwVRoiQ&s" alt="logo de la FCPE">
</div>

<div id="regular_content" class="centered">
  <h2 class="main-title">
    Bienvenue sur le site de réservation de rendez-vous d'achat et vente de manuels scolaires de la FCPE
  </h2>

  <div class="cards-container">
    
    <a href="/register" class="card">
      <div class="card-content">
        <h3>S'inscrire</h3>
        <p>Vendre les manuels scolaires que j'ai achetés ou acheter ceux de l'année prochaine.</p>
      </div>
    </a>

    <a href="/login" class="card">
      <div class="card-content">
        <h3>Se connecter</h3>
        <p>Accéder à mon compte afin de consulter et gérer mes rendez-vous.</p>
      </div>
    </a>

    <a href="/comment-ca-marche" class="card">
      <div class="card-content">
        <h3>Comment ça marche ?</h3>
        <p>Comprendre le fonctionnement du système d'achat et de vente de manuels scolaires.</p>
      </div>
    </a>

    <a href="mailto:jeanvictor.fcpe14@gmail.com" class="card">
      <div class="card-content">
        <h3>Signaler un problème</h3>
        <p>Contacter la FCPE en cas de problème lors d'une réservation.</p>
      </div>
    </a>

    <a href="/contacts" class="card">
      <div class="card-content">
        <h3>Nous contacter</h3>
        <p>Obtenir plus d'informations ou poser vos questions à la FCPE.</p>
      </div>
    </a>

  </div>
</div>


<div class="season-arrow-wrapper">
    <div class="season-arrow" id="seasonArrow">
        <div class="season-phase"
             data-start="{{$Annee}}-06-15"
             data-end="{{$Annee}}-06-30"
             data-title="Première phase d'inscriptions"
             data-dates="Du 15 juin au 30 juin {{$Annee}}"
             data-description="Les familles créent leur compte et indiquent leurs besoins pour la saison en s'inscrivant en juillet et août ou simplement en août si c'est leur première année.">
            <span>Inscriptions</span>
        </div>

        <div class="season-phase"
             data-start="{{$Annee}}-06-30"
             data-end="{{$Annee}}-07-10"
             data-title="Revente des manuels de cette année"
             data-dates="Du 30 juin au 10 juillet {{$Annee}}"
             data-description="Les familles revendent leurs manuels scolaires et adhèrent à la FCPE pour la saison.">
            <span>Revente des manuels de cette année</span>
        </div>

        <div class="season-phase"
             data-start="{{$Annee}}-07-11"
             data-end="{{$Annee}}-08-19"
             data-title="Préparation des piles et seconde phase d'inscriptions"
             data-dates="Du 11 juillet au 19 août {{$Annee}}"
             data-description="Les manuels sont triés, contrôlés puis préparés pour la distribution en août. Les inscriptions peuvent encore se faire pour août.">
            <span>Préparation des piles et seconde phase d'inscriptions</span>
        </div>

        <div class="season-phase season-phase"
             data-start="{{$Annee}}-08-20"
             data-end="{{$Annee}}-08-29"
             data-title="Phase d'achat des manuels pour l'année prochaine"
             data-dates="Du 20 août au 29 août {{$Annee}}"
             data-description="Les familles paient pour la pile de manuels scolaires préparée pour leur enfant et la récupèrent.">
            <span>Achat des manuels pour l'année prochaine</span>
        </div>

        <div class="season-phase"
             data-start="{{$Annee}}-08-30"
             data-end="{{$Annee}}-09-05"
             data-title="Clôture de la phase d'achat de manuels scolaires"
             data-dates="Du 30 août au 5 septembre {{$Annee}}"
             data-description="Clotûre de la phase principale d'achâts de manuels de la saison, les dernières opérations sont traitées et les équipes se préparent pour les permanences de septembre.">
            <span>Clôture</span>
        </div>

        <div class="season-arrow-head"
             data-start="{{$Annee}}-09-06"
             data-end="{{$Annee}}-09-20"
             data-title="Permanences et fin de saison"
             data-dates="Après le 6 septembre {{$Annee}}"
             data-description="Les permanences de septembre commencent pour les élèves qui n'ont pas pu récupérer leurs manuels scolaires pendant la phase d'achat.">
        </div>
    </div>
</div>

<div class="season-floating-tooltip" id="seasonTooltip">
    <strong id="seasonTooltipTitle"></strong>
    <p class="season-dates" id="seasonTooltipDates"></p>
    <p id="seasonTooltipDescription"></p>
</div>

<script>
function getPhaseState(start, end, today) {
    const startDate = new Date(start + "T00:00:00");
    const endDate = new Date(end + "T23:59:59");

    if (today > endDate) return "done";
    if (today >= startDate && today <= endDate) return "current";
    return "future";
}

function updateSeasonArrow() {
    const today = new Date();
    const items = document.querySelectorAll(".season-phase, .season-arrow-head");

    items.forEach((item) => {
        item.classList.remove("done", "current", "future");
        item.classList.add(getPhaseState(item.dataset.start, item.dataset.end, today));
    });
}

function setupSeasonTooltip() {
    const tooltip = document.getElementById("seasonTooltip");
    const title = document.getElementById("seasonTooltipTitle");
    const dates = document.getElementById("seasonTooltipDates");
    const description = document.getElementById("seasonTooltipDescription");
    const items = document.querySelectorAll(".season-phase, .season-arrow-head");

    function showTooltip(element) {
        title.textContent = element.dataset.title || "";
        dates.textContent = element.dataset.dates || "";
        description.textContent = element.dataset.description || "";
        tooltip.classList.add("visible");
        positionTooltip(element);
    }

    function hideTooltip() {
        tooltip.classList.remove("visible");
    }

    function positionTooltip(element) {
        const rect = element.getBoundingClientRect();
        const tooltipRect = tooltip.getBoundingClientRect();

        let top = rect.top - tooltipRect.height - 14;
        let left = rect.left + rect.width / 2 - tooltipRect.width / 2;

        if (left < 10) left = 10;
        if (left + tooltipRect.width > window.innerWidth - 10) {
            left = window.innerWidth - tooltipRect.width - 10;
        }

        if (top < 10) {
            top = rect.bottom + 14;
            tooltip.classList.add("below");
        } else {
            tooltip.classList.remove("below");
        }

        tooltip.style.top = top + "px";
        tooltip.style.left = left + "px";
    }

    items.forEach((item) => {
        item.addEventListener("mouseenter", () => showTooltip(item));
        item.addEventListener("mousemove", () => positionTooltip(item));
        item.addEventListener("mouseleave", hideTooltip);
    });

    window.addEventListener("scroll", () => {
        const active = document.querySelector(".season-floating-tooltip.visible");
        if (active) {
            const hovered = document.querySelector(".season-phase:hover, .season-arrow-head:hover");
            if (hovered) positionTooltip(hovered);
        }
    });

    window.addEventListener("resize", () => {
        const hovered = document.querySelector(".season-phase:hover, .season-arrow-head:hover");
        if (hovered) positionTooltip(hovered);
    });
}

updateSeasonArrow();
setupSeasonTooltip();
</script>


    </body>
</html>
@endsection
</div>