@extends('layouts.layout')

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

@section('content')
    <div class="container-index" id="container">
        <div class="section">
            <div class="container presentation">
                <div class="row">
                    <div class="col-lg-6 col-12">
                        <h1 id="pageTitle">Mes Réalisations - Professionnelles</h1>
                        <p>Vous trouverez ici un aperçu de mes réalisations : sites vitrines, applications web, et bien plus encore. Que ce soit pour une refonte, une création sur mesure ou une optimisation, chaque projet reflète mon engagement envers la qualité et l’expérience utilisateur</p>
                        <div class="filter-switch">
                            <label class="switch">
                                <input type="checkbox" id="filterToggle">
                                <span class="slider round"></span>
                            </label>
                            <span id="filterText">Projets Professionnels</span>
                        </div>
                    </div>
                    <div class="col-lg-6 col-12">

                    </div>
                </div>
            </div>
        </div>
       
       <!-- Boucle pour afficher plusieurs réalisations par section -->
       @foreach($realisations->chunk(3) as $chunk) 
            <div class="section">
                <div class="container">
                    <div class="row d-flex align-items-stretch" style="flex: 1">
                        @foreach($chunk as $index => $realisation)
                            <div class="col-lg-4 col-md-6 col-12 d-flex  {{ $index % 2 == 0 ? 'margin-bottom' : 'margin-top' }}">
                                <a href="{{ route('realisation.show', ['id' => $realisation->id]) }}" class="realisation-card text-decoration-none w-100">
                                    <div class="card d-flex">
                                        <img src="{{ asset('images/' . $realisation->photos->first()->lien) }}" alt="{{ $realisation->titre }}" class="img-fluid img-realisations">
                                        <h3 class="text-center mt-2">{{ $realisation->nom }}</h3>
                                    </div>
                                </a>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        @endforeach

    </div>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const filterToggle = document.getElementById("filterToggle");
            const filterText = document.getElementById("filterText");
            const pageTitle = document.getElementById("pageTitle");

            // Vérifie le filtre actif dans l'URL
            const urlParams = new URLSearchParams(window.location.search);
            const currentFilter = urlParams.get('pro') || 'pro';

            // Applique l'état du switch selon le filtre actif
            if (currentFilter === "academique") {
                filterToggle.checked = true;
                filterText.textContent = "Projets Académiques";
                pageTitle.textContent = "Mes Réalisations - Académiques";
            }

            // Gestion du changement de filtre
            filterToggle.addEventListener("change", function() {
                if (filterToggle.checked) {
                    filterText.textContent = "Projets Académiques";
                    pageTitle.textContent = "Mes Réalisations - Académiques";
                    window.location.href = "?pro=academique";
                } else {
                    filterText.textContent = "Projets Professionnels";
                    pageTitle.textContent = "Mes Réalisations - Professionnelles";
                    window.location.href = "?pro=pro";
                }
            });
        });
    
    
    
    document.addEventListener('DOMContentLoaded', function() {
    

    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