@extends('layouts.app')


@section('content')

    <style>
        .button_wp{
            margin: 20px 20px 0px 0px;
            height: 48px;
            min-width: 170px;
            font-size: 15px;
            font-weight: 500;
            line-height: 46px;
            text-transform: none;
            letter-spacing: 0px;
            border: 1px solid rgb(114, 198, 200);
            border-radius: 20px;
            background: rgb(0, 143, 189);
            color: rgb(255, 255, 255);
            font-family: Belleza;

        }

        .button_wp:hover{
            background: rgb(114,198,200);
            color: black;
        }

        .accordion-button:not(.collapsed)::after {
            display: none;
        }
        .accordion-button::after {
          display: none;
        }
        .button_gallery{
            width: 100%;
            border-color: #00b3c0;
            background-color: #00c1cf;
            color: #fff;
        }

        @media (max-width: 800px) {
            .accordLeo {
               width: 90vw;
            }
        }

        @media (min-width: 800px) {
            .accordLeo {
                width: 40vw;
            }
        }

        .aReduit{

        }
        .imgAtelier{
            max-width: 100%;
        }

        .font-h3{
            font-size: 22px;
            text-align: center;
            font-family: Belleza;
            font-weight: 400;
            font-style: normal;
            letter-spacing: 0px;
            color: #50b2c1;
        }

        .font-h2{
            font-family: Belleza;
            font-size: 34px;
            line-height: 40px;
            letter-spacing: 0px;
            font-weight: 400;
            margin-bottom: 30px;
            color: #50b2c1;
        }

        .savoirplus{
            border: 1px solid;
            border-radius: 10px !important;
            border-color: #6ab9c6;
            color: #6ab9c6;
        }
        #carouselExampleIndicators2 > div.carousel-indicators > button:nth-child(2) {
            opacity: 0;
        }
        #carouselExampleIndicators2 > div.carousel-indicators > button.active {
            opacity: 0;
        }
        @media only screen and (max-width: 768px) {
            .row {
                --bs-gutter-x: 0;
                --bs-gutter-y: 0;
                display: flex;
                flex-wrap: wrap;
                margin-top: calc(-1* var(--bs-gutter-y));
                margin-right: calc(-.5* var(--bs-gutter-x));
                margin-left: calc(-.5* var(--bs-gutter-x));
            }
           .bandeau{
               max-width: 100vw;
           }
        }

        @media only screen and (min-width: 769px) {
           .bandeau{
               width: 45vw !important;
               max-width: 700px;
           }
            #bandeau1 {
                padding-right: 20px !important;
            }
            #bandeau2{
                padding-left: 20px !important;
            }
        }

    </style>

    <div style="text-align: center;">
        <a href="tel:0683266844">
            <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 style="
    margin: auto !important; max-width: 100vw; " class=" col-sm-11 col-md-6 m-2 ">

        <div>
            <h2 class="col-11" style="text-align: center !important;color: #50b2c1;font-size: 28px;text-align: left; letter-spacing:0px;font-family: Belleza; max-width: 100vw;">{{$texteAccueil->titre}}</h2>
        </div>

        <div class="d-flex flex-wrap justify-content-center" style="max-width: 100vw;">
           {!! $texteAccueil->description !!}
        </div>
        <div style="text-align: center">
            <a href="/custom/Qui%20suis-je"><button class="button_wp">Qui suis je</button></a>
        </div>

    </div>
    <div class="row mt-5" style="place-content: center;">
    <div id="bandeau1" class="mt-6 col-lg-6 col-sm-12 p-sm-0" style="text-align: right;">

        <img class="bandeau" alt="bandeau" src="assets/img/respirationText.jpg">
    </div>

    <div id="bandeau2" class="mt-6 col-sm-12 col-lg-6  p-sm-0" style="text-align: left;">

        <img class="bandeau" alt="bandeau" src="assets/img/bandeau.jpg">
    </div>
    </div>

    <div class="row mx-sm-5 mx-lg-5" style="margin: auto;justify-content: center; max-width: 1024px;">

{{--        <div class="col-lg-6 col-sm-11 col-md-10">--}}
{{--            <h3 class="font-h3">--}}
{{--                "Sophro sérénité", atelier collectif--}}
{{--                <br>--}}
{{--                Un temps pour se ressourcer--}}
{{--            </h3>--}}
{{--            <img alt="image" class="imgAtelier" src="assets/img/sommeil.jpg" >--}}
{{--            <div class=" accordion accordion-flush" id="accordionFlushExample">--}}
{{--                <div class="accordion-item">--}}
{{--                    <h2 class="accordion-header" id="flush-headingOne">--}}
{{--                        <button class="mt-3 savoirplus accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">--}}
{{--                            En savoir plus--}}
{{--                        </button>--}}
{{--                    </h2>--}}
{{--                    <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">--}}
{{--                        <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the first item's accordion body.</div>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </div>--}}


{{--        <div class="col-lg-6 col-sm-11 col-md-10 col ">--}}
{{--            <h3 class="font-h3">--}}
{{--                "Sophro sérénité", atelier collectif--}}
{{--                <br>--}}
{{--                Un temps pour se ressourcer--}}
{{--            </h3>--}}
{{--            <img alt="image" class="imgAtelier" src="assets/img/sommeil.jpg" >--}}
{{--            <div class=" accordion accordion-flush" id="accordionFlushExample">--}}
{{--                <div class="accordion-item">--}}
{{--                    <h2 class="accordion-header" id="flush-headingOne">--}}
{{--                        <button class="mt-3 savoirplus accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseSecond" aria-expanded="false" aria-controls="flush-collapseOne">--}}
{{--                            En savoir plus--}}
{{--                        </button>--}}
{{--                    </h2>--}}
{{--                    <div id="flush-collapseSecond" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">--}}
{{--                        <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the first item's accordion body.</div>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </div>--}}
    </div>

    @php $cpt=  0;  @endphp

    <div class="row mt-5" style="margin: auto;justify-content: center; max-width: 1024px;">
    @foreach($posts as  $key => $post)
        @php $cpt++;  @endphp
            <div class="col-lg-6 col-sm-11 col-md-10" style="display: flex;
    flex-direction: column;
    justify-content: space-between;margin-bottom: 20px;">
                <h3 class="font-h3">
                  {{$post->titre}}
                </h3>
{{--                <img alt="image" class="imgAtelier" src="assets/img/sommeil.jpg" >--}}



                <div id="carouselExampleIndicators{{$key}}" class="carousel slide">
{{--                    <div class="carousel-indicators">--}}
{{--                        @php $cptImage = 0; @endphp--}}
{{--                        @foreach(json_decode($post->images) as $image)--}}

{{--                            @if($cptImage === 0 )--}}
{{--                                <button type="button" data-bs-target="#carouselExampleIndicators{{$key}}" class="active"  aria-current="true" data-bs-slide-to="{{$cptImage}}" aria-label="Slide {{$cptImage }}"></button>--}}
{{--                            @else--}}
{{--                                <button type="button" data-bs-target="#carouselExampleIndicators{{$key}}" data-bs-slide-to="{{$cptImage}}" aria-label="Slide {{$cptImage }}"></button>--}}
{{--                            @endif--}}
{{--                           @php $cptImage++ @endphp--}}
{{--                        @endforeach--}}
{{--                    </div>--}}
                    <div class="carousel-inner">

                        @php $cptv2 = 0; @endphp
                        @foreach(json_decode($post->images) as $image)
                                @if($cptv2 === 0)
                                    <div class="carousel-item active">
                                @else
                                    <div class="carousel-item">
                                @endif
                                    <img src="{{$image->image}}" class="d-block w-100" alt="...">
                            </div>
                            @php $cptv2++; @endphp
                        @endforeach
                    </div>
                            @if(count(json_decode($post->images)) > 1)
                    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators{{$key}}" data-bs-slide="prev">
                        <svg style="width: 50px;height: auto;color: black;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left" viewBox="0 0 16 16">
                            <path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z"/>
                        </svg>
                        <span class="visually-hidden">Previous</span>
                    </button>
                    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators{{$key}}" data-bs-slide="next">
                        <svg style="width: 50px;height: auto;color: black;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16">
                            <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
                        </svg>
                        <span class="visually-hidden">Next</span>
                    </button>
                                @endif
                </div>
                <div class=" accordion accordion-flush" id="accordionFlushExample">
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="flush-heading{{$cpt}}">
                            <button class="mt-3 savoirplus accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse{{$cpt}}" aria-expanded="false" aria-controls="flush-collapseOne">
                                En savoir plus
                            </button>
                        </h2>
                        <div id="flush-collapse{{$cpt}}" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
                            <div class="accordion-body">{!! $post->savoirplus !!}</div>
                        </div>
                    </div>
                </div>
            </div>

    @endforeach

    </div>






    <div class="my-5" style="width: 100px; margin: auto ; background: #009dd2; height: 1px;"></div>
    <h2 style="text-align: center;color: #50b2c1;font-family: Belleza;
    font-size: 34px;

    line-height: 40px;
    letter-spacing: 0px;
    font-weight: 400;">Ateliers de sophrologie <br> collectifs <br>
        et séances individuelles</h2>
    <div>
        <div class="accordLeo accordion" id="accordionExample" style="margin: auto; background-image: url('assets/img/fond.jpg')">
            <div class="row" style="display: flex; margin: 20px;
    place-content: space-between;">
                @php $cptAtelier = 0; @endphp
                @foreach($ateliers as $atelier)
                    @php $cptAtelier++; @endphp
                    <a class="aReduit  col-lg-5 col-sm-12"><button data-text="3"  class="button_gallery btn btn-success my-2" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAtelier{{$cptAtelier}}" aria-expanded="false" aria-controls="collapseAtelier{{$cptAtelier}}">
                            <i class="{{$atelier->icon}}"></i> {{$atelier->titre}}
                        </button></a>

                @endforeach
            </div>

            @php $cptAtelier = 0; @endphp
            @foreach($ateliers as $atelier)
                @php $cptAtelier++; @endphp
                <div class="accordion-item">

                    <div id="collapseAtelier{{$cptAtelier}}" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
                        <div class="accordion-body">
                            {!! $atelier->description !!}
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>


    <div class="mt-5">
        <h2 class="font-h2" style="margin: auto; width: fit-content;">Ils m'ont fait confiance !</h2>
        <div style="max-width: 1024px ;background: #a5d0d7; margin: auto;     text-align: center;">
            @foreach($confiances as $img)
            <img alt="exemple image" src="{{$img->image}}" style="margin: 10px; max-width: 200px;">
            @endforeach
        </div>
    </div>
@endsection