@extends('layouts.layout')

@section('css')
    <link rel="stylesheet" href="{{ asset('css/realisation.css') }}">
@endsection

@section('content')
<div class="container-index realisation" id="container">
    <div class="section section-realisation">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 col-12">
                    <h1>{{ $realisation->nom}}</h1>

                    @if($realisation->pro == 0 )
                        <h3>Projet Académique</h3>
                    @elseif($realisation->pro == 1 )
                        <h3>Projet Professionnel</h3>
                    @else
                        <h3>Projet Académique et Professionnel</h3>
                    @endif

                    <p class="theme">{{ $realisation->theme }}</p>
                    <p class="theme">{{ $realisation->annee}} </p>



                    @if($realisation->lien)
                        <a href="{{ $realisation->lien }}" target="_blank">Acceder à la réalisation</a>
                    @endif
                    @if($realisation->pdfs->first() )
                        <a href="{{ asset('pdfs/' . $realisation->pdfs->first()->lien ) }}" target="_blank" class="btn btn-primary">
                            Acceder à la réalisation
                        </a>
                    @endif
                </div>
                <div class="col-lg-6 col-12">
                    @if($realisation->photos->count() > 1)
                        <!-- Carrousel Bootstrap avec auto-défilement -->
                        <div id="realisationCarousel" class="carousel slide carousel-dark" data-bs-ride="carousel" data-bs-interval="3000" data-bs-wrap="true">
                            <div class="carousel-inner">
                                @foreach($realisation->photos as $index => $photo)
                                    <div class="carousel-item {{ $index == 0 ? 'active' : '' }}">
                                        <img class="d-block w-100 image-realisation" src="{{ asset('images/' . $photo->lien) }}" alt="Image de {{ $realisation->nom }}">
                                    </div>
                                @endforeach
                            </div>
                            <!-- Bouton précédent -->
                            <button class="carousel-control-prev" type="button" data-bs-target="#realisationCarousel" data-bs-slide="prev">
                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                <span class="visually-hidden">Précédent</span>
                            </button>

                            <!-- Bouton suivant -->
                            <button class="carousel-control-next" type="button" data-bs-target="#realisationCarousel" data-bs-slide="next">
                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                <span class="visually-hidden">Suivant</span>
                            </button>
                        </div>
                    @else
                        <!-- Affichage d'une seule image -->
                        <img class="image-realisation d-block w-100" src="{{ asset('images/' . $realisation->photos->first()->lien) }}" alt="Image de {{ $realisation->nom }}">
                    @endif
                </div>
            </div>
        </div>
    </div>
    <div class="section section-realisation">
        <div class="container container-realisation">
            <div class="row row-desc">
                <h1>Description du projet :</h1>
                <p class="desc">{!! nl2br(e($realisation->description)) !!}</p>
            </div>
        </div>
    </div>
    @php
        $previousUrl = url()->previous();
        $queryString = parse_url($previousUrl, PHP_URL_QUERY); // Récupère la partie après '?'
        parse_str($queryString, $queryParams); // Convertit en tableau associatif

        $cameFromAcademique = isset($queryParams['pro']) && $queryParams['pro'] === 'academique';
    @endphp

    @if( $cameFromAcademique && $realisation->apprentissages && ($realisation->pro == 0 || $realisation->pro == 2) )
        <div class="section section-realisation">
            <div class="container container-realisation">
                <div class="row">
                    <h1>Apprentissages </h1>
                    <div class="div-apprentissage desc">
                        <ul>
                            @foreach($realisation->apprentissages as $apprentissage)
                                <li style="font-size:18px;">{{ $apprentissage->nom }}</li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        </div>
   @endif 
        <div class="section section-realisation">
            <div class="container container-realisation">
                <div class="row list-details">
                    @if($realisation->langages->first())
                        <div>
                            <h1>Languages utilisés</h1>
                            <div>
                                @foreach($realisation->langages as $langage)
                                    <p>{{ $langage->langage }}</p>
                                @endforeach
                            </div>
                        </div>
                    @endif
                    @if($realisation->competences->first())
                        <div>
                            <h1>Compétences</h1>
                            <div>
                                @foreach($realisation->competences as $competence)
                                    <p>{{ $competence->competence }}</p>
                                @endforeach
                            </div>
                        </div>
                    @endif
                    @if($realisation->types->first())
                        <div>
                            <h1>Types</h1>
                            <div>
                                @foreach($realisation->types as $type)
                                    <p>{{ $type->type }}</p>
                                @endforeach
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
    
        document.querySelectorAll('.desc').forEach(desc => {
            desc.addEventListener('wheel', function(event) {
                // Vérifie si le contenu dépasse
                if (desc.scrollHeight > desc.clientHeight) {
                    event.stopPropagation(); // Empêche le scroll horizontal uniquement si nécessaire
                }
            });
        });


    const sections = document.querySelectorAll('.section');
    let currentSection = 0;
    let isScrolling = false;
    const animationDuration = 1000;  // Durée de l'animation en ms
    const scrollSpeed = 0.1;  // Facteur pour ralentir le défilement

    // Réactive le défilement vertical pour mobile
    const isMobile = window.innerWidth <= 768;
    if (isMobile) {
        document.body.style.overflow = 'auto'; // Réactive le scroll vertical sur mobile
        return; // On arrête ici l'exécution pour mobile
    }

    // Désactiver le défilement normal du body pour un scroll horizontal
    document.body.style.overflow = 'hidden';

    function scrollToSection(index) {
        if (index < 0 || index >= sections.length || isScrolling) return;

        isScrolling = true;
        currentSection = index;

        // Scroll horizontal
        sections[index].scrollIntoView({ behavior: 'smooth', inline: 'start' });

        setTimeout(() => {
            isScrolling = false;
        }, animationDuration);
    }

    window.addEventListener('wheel', function(e) {
        e.preventDefault();
        if (isScrolling || window.innerWidth <= 768) return; // Ne rien faire sur mobile

        // Ajuste la vitesse du scroll horizontal
        const delta = e.deltaY * scrollSpeed;

        if (delta > 0) {
            scrollToSection(currentSection + 1); // Scroll vers la section suivante
        } else {
            scrollToSection(currentSection - 1); // Scroll vers la section précédente
        }
    }, { passive: false });

    window.addEventListener('keydown', function(e) {
        if (isScrolling || window.innerWidth <= 768) return;

        if (e.key === 'ArrowRight') {
            e.preventDefault();
            scrollToSection(currentSection + 1);
        } else if (e.key === 'ArrowLeft') {
            e.preventDefault();
            scrollToSection(currentSection - 1);
        }
    });

    let touchStartX = 0;
    window.addEventListener('touchstart', function(e) {
        touchStartX = e.touches[0].clientX;
    }, { passive: false });

    window.addEventListener('touchmove', function(e) {
        if (isScrolling || window.innerWidth <= 768) {
            e.preventDefault();
            return;
        }

        const touchX = e.touches[0].clientX;
        const diff = touchStartX - touchX;

        // Ajuste la vitesse du scroll tactile
        if (Math.abs(diff) > 50 * scrollSpeed) {
            if (diff > 0) {
                scrollToSection(currentSection + 1); // Scroll vers la droite
            } else {
                scrollToSection(currentSection - 1); // Scroll vers la gauche
            }
            e.preventDefault();
        }
    }, { passive: false });

    // Gérer les clics sur des éléments pour défiler vers la section spécifique
    document.querySelectorAll('[data-section]').forEach(button => {
        button.addEventListener('click', function() {
            const sectionIndex = parseInt(this.dataset.section);
            scrollToSection(sectionIndex);
        });
    });

    // Gestion des liens de navigation pour faire défiler vers une section avec un id
    const navLinks = document.querySelectorAll('.nav-link');
    navLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            const targetId = this.getAttribute('href').split('#')[1];
            if (!targetId) return;

            const targetSection = document.getElementById(targetId);
            if (targetSection) {
                e.preventDefault();
                targetSection.scrollIntoView({ behavior: 'smooth', inline: 'start' });
                history.pushState(null, null, `#${targetId}`);
            }
        });
    });

});
</script>
@endsection