@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;
        }
        .fondActivity{
            width: fit-content;
        }
        .btnIconActivity{
            background: linear-gradient(rgb(111, 191, 255), rgb(78, 177, 193));    width: 74px;
            height: 74px;  border-radius: 25px;border: none;
        }

        .forceBg  * {
            /*background: none !important;*/
        }

    </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="container mt-3" style=" max-width: 1024px;">
        <h2 class="mb-5" style="color: #00a7c1">Des questions, besoin d'informations? Contactez moi.</h2>
        <div class="row pb-5" style=" background: linear-gradient(to right,#d4e5e5, #58b4c2); height: auto;">



           <div class="col" style="">
               <iframe
                   src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d11475.266443109158!2d4.790092575493556!3d44.025184079919725!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12b5949279bf0455%3A0x8204fb37b7452f71!2sVandenberghe%20Christelle!5e0!3m2!1sfr!2sfr!4v1680622276263!5m2!1sfr!2sfr"
                  style="border:0;     width: 90%;
    margin: 20px;
    height: 80%;" allowfullscreen="" loading="lazy"
                   referrerpolicy="no-referrer-when-downgrade"></iframe>
           </div>

            <div class="col">
                <form class="mt-5" method="post" action="{{route('sendFormContact')}}">
                    @if (session('messages'))
                        @if(session('status') === 'errors')
                        <div class="alert alert-danger">{{ session('messages') }}</div>
                        @endif
                        @if(session('status') === 'success')
                           <div class="alert alert-success">{{ session('messages') }}</div>
                        @endif
                    @endisset

                    @csrf
                    <div class="form-group">
                        <label for="exampleInputEmail1">Votre nom</label>
                        <input type="text" name="name" class="form-control" value="{{session('name')}}" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputEmail1">Votre email (obligatoire) </label>
                        <input type="email" name="email" required="required" value="{{session('email')}}" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="">

                    </div>
                    <div class="form-group">
                        <label for="exampleInputEmail1">Objet</label>
                        <input type="text" name="objet" class="form-control" value="{{session('objet')}}" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="">
                    </div>

                    <div class="form-group">
                        <label for="exampleInputEmail1">Votre message</label>
                        <textarea style="height: 100px;" name="message" class="form-control"  id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="">{{session('message')}}</textarea>
                    </div>

                    <div class="form-group">
                        <label for="exampleInputEmail1">Captcha</label>
                        <input type="text" name="captcha" class="form-control"   id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Ecrivez : 'sophro'">
                    </div>

                    <button type="submit" class="btn btn-primary mt-3 " style="background-color: #27cad6; border: none">Envoyer</button>
                </form>
            </div>
        </div>

    </div>
@endsection