@extends("layouts.app")

@section('content')

    <style>
        .textC{
            font-size: 14px;
            line-height: 24px;
            margin: 0 0 23px;
            font-weight: normal;
            font-style: normal;
        }

        * {box-sizing: border-box}
        body {font-family: Verdana, sans-serif; margin:0}

        /* Slideshow container */
        .slideshow-container {
            position: relative;

        }

        /* Slides */
        .mySlides {
            display: none;
            padding: 80px;


        }

        /* Next & previous buttons */
        .prev, .next {
            cursor: pointer;
            position: absolute;
            top: 50%;
            width: auto;
            margin-top: -30px;
            padding: 16px;
            color: #888;
            font-weight: bold;
            font-size: 20px;
            border-radius: 0 3px 3px 0;
            user-select: none;
        }

        /* Position the "next button" to the right */
        .next {
            position: absolute;
            right: 0;
            border-radius: 3px 0 0 3px;
        }

        /* On hover, add a black background color with a little bit see-through */
        .temo .prev:hover, .temo .next:hover {
            color: white;
        }

        /* The dot/bullet/indicator container */
        .temo .dot-container {
            text-align: center;
            padding: 20px;

        }

        /* The dots/bullets/indicators */
        .temo .dot {
            background: azure;
            cursor: pointer;
            height: 15px;
            width: 15px;
            margin: 0 2px;
            border-radius: 50%;
            display: inline-block;
            transition: background-color 0.6s ease;
        }

        /* Add a background color to the active dot/circle */
        .temo .active, .dot:hover {
            background-color: #717171;
        }

        /* Add an italic font style to all quotes */
        q {font-size: 14px;
            line-height: 24px;
            margin: 0 0 23px;
            font-weight: normal;
            font-style: normal;
            font-family: Belleza;
        }

        /* Add a blue color to the author */
        .author {color: white;
            font-weight: bolder;
            text-transform: uppercase;}
    </style>
    <div style="text-align: center;">
        <a href="tel:+33683266844"><img style="image-rendering: optimizeQuality; max-width: 100vw;" src="assets/img/accueil.jpg" alt="image presentation Christelle Vandenberghe Sophrologue 06 83 26 68 44 "></a>
    </div>

    <div  class="temo mt-5" style="background-color: #004c66; color: white">

        <div class="col-11 col-md-11 m-2 m-auto textC" style="width: 100%;max-width: 1024px; padding-top: 25px; padding-bottom: 25px">
            <div class="m-3" style="width: fit-content"><h3 style="    font-family: Belleza;">Témoignages </h3>
            <div class="mt-3" style="height: 2px;background-color: #0B90C4; width: 100%"></div>
            </div>
            <div class="slideshow-container">
                @foreach($temoignages as $temoignage)
                    <div class="mySlides">
                        <q>{{$temoignage->description}}</q>
                        <p class="author mt-3" style="    font-family: Belleza;">{{$temoignage->information}}</p>
                        <p>{{$temoignage->seance}}</p>
                    </div>
                @endforeach

                <a class="prev" onclick="plusSlides(-1)">❮</a>
                <a class="next" onclick="plusSlides(1)">❯</a>

            </div>

            <div class="dot-container">
                @php $cpt = 0; @endphp
                @foreach($temoignages as $temoignage)
                    @php $cpt++; @endphp
                    <span class="dot" onclick="currentSlide({{$cpt}})"></span>
                @endforeach

            </div>
        </div>
    </div>


    <script>
        var slideIndex = 1;
        showSlides(slideIndex);

        function plusSlides(n) {
            showSlides(slideIndex += n);
        }

        function currentSlide(n) {
            showSlides(slideIndex = n);
        }

        function showSlides(n) {
            var i;
            var slides = document.getElementsByClassName("mySlides");
            var dots = document.getElementsByClassName("dot");
            if (n > slides.length) {slideIndex = 1}
            if (n < 1) {slideIndex = slides.length}
            for (i = 0; i < slides.length; i++) {
                slides[i].style.display = "none";
            }
            for (i = 0; i < dots.length; i++) {
                dots[i].className = dots[i].className.replace(" active", "");
            }
            slides[slideIndex-1].style.display = "block";
            dots[slideIndex-1].className += " active";
        }
    </script>



@endsection