@extends('layouts.app')
@section('title', 'Agence Vauban : prenez contact avec nous.')
@section('description', 'Trouvez ici toutes les coordonnées des conseillers de l’agence Vauban à Besançon, achetez et vendez en toute simplicité et efficacité. Nous sommes à votre écoute.')

@section('contenu')

    <section>
        <div class="container-fluid background-corpo pb-8">
            <div class="row text-center">
                <div class="col-lg-12 mt-8">
                    <p class="text-rumble text-white titre-header">Nous contacter</p>
                </div>
            </div>
        </div>
    </section>

    <section>
        <div class="container pb-5 pt-11 padding-encadrement-surface">
            <div class="row">
                <div class="col-lg-1 illu-contact">
                    <img src="{{asset('img/site/illu-chat-plante copie.png')}}" width="250px">
                </div>
            </div>
        </div>
    </section>

    @if (session('sended'))
        <div class="alert alert-success alert-send">
           Merci pour votre message, nous vous contacterons dans les plus brefs délais.
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    @endif

    <!-- DESKTOP -->
    <section>
        <!-- TODO: responsive et mobile à revoir -->
        <div class="container-fluid d-none d-sm-none d-xl-block">
            <div class="row justify-content-center">
                <div class="col-lg-2">
                    <img class="picto-corpo" src="{{asset('img/picto/picto-venir.png')}}">
                    <div class="row mt-5">
                        <img class="picto-corpo" src="{{asset('img/picto/picto-telephone.png')}}">
                    </div>
                </div>
                <div class="col-lg-3">
                    <p class="text-rumble blue" style="font-size:28px">Venir à l'agence Vauban</p>
                    <p style="font-size: 16px">Vous trouverez toujours un sourire pour vous accueillir à l’agence,
                        du <strong><span class="horaires-configuration"></span></strong>

                        <br><br>

                        <strong><span class="justify-content-center">Agence Vauban – 4 rue de l’Orme de Chamars – 25000 Besançon</span></strong>
                        <br/> Possibilité de stationnement à proximité, parking Mairie, Chamars
                        ou Petit Chamars</p>

                    <p class="text-rumble blue" style="font-size: 28px;margin-top:110px"> Nous joindre par téléphone</p>
                    <p style="font-size: 16px">Facile, il suffit de composer le 03 81 83 52 88</p>
                </div>
                <div class="col-lg-4">
                    <div>
                        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3333.292278410181!2d6.019406476776825!3d47.236902013433365!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x478d633e0ecb28a7%3A0x218b3982ab2404b1!2sAGENCE%20VAUBAN!5e1!3m2!1sfr!2sfr!4v1728306619104!5m2!1sfr!2sfr" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>                    </div>
                    </div>
                </div>
            </div>
        </div>
    </section>





    <!-- section mobile/tablette -->
    <section>
        <!-- TODO: responsive et mobile à revoir -->
        <div class="container pt-3 d-xl-none">
            <div class="row">
                <div class="col-lg-12 pl-5 pr-5">
                    <img class="picto-corpo" src="{{asset('img/picto/picto-venir.png')}}" width="100%">
                    <p class="text-rumble blue" style="font-size:28px">Venir à l'agence Vauban</p>
                    <p style="font-size: 16px">Vous trouverez toujours un sourire pour vous accueillir à l’agence,
                        du <strong><span
                                class="horaires-configuration">lundi au vendredi de 9 heures à 18 heures.</span></strong>

                        <br><br>

                        <strong>Agence Vauban – 4 rue de l’Orme de Chamars – 25000 Besançon</strong>
                        Possibilité de stationnement à proximité, parking Mairie, Chamars
                        ou Petit Chamars</p>
                    <div class="col-lg-12">
                        <img class="picto-corpo" src="{{asset('img/picto/picto-telephone.png')}}" width="100%">
                    </div>
                    <span class="text-rumble blue"
                          style="font-size: 28px;margin-top:10px"> Nous joindre par téléphone</span>
                    <p style="font-size: 16px">Facile, il suffit de composer le <strong> 03 81 83 52 88</strong></p>
                </div>
            </div>
            <div class="row mt-5 justify-content-center">
                <div class="col-sm-12 col-xs-8">
                    <div class="container-map-contact">
                        <div>
                            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3333.292278410181!2d6.019406476776825!3d47.236902013433365!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x478d633e0ecb28a7%3A0x218b3982ab2404b1!2sAGENCE%20VAUBAN!5e1!3m2!1sfr!2sfr!4v1728306619104!5m2!1sfr!2sfr" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </section>

    <section>
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-sm-12 text-center mt-5">
                    <p class="text-rumble" style="font-size: 38px">Contacter un conseiller</p>
                    <hr class="barre">
                </div>
            </div>
            <div class="row pb-5">
                <div class="col-lg-2"></div>
                <div class="col-lg-8">
                    <p class="text-center">
                        Nous sommes disponibles pour tout renseignement, alors ne soyez pas timide !
                    </p>
                </div>
            </div>
            <div class="col-lg-2"></div>
        </div>


        <!-- Card negociateurs -->
        <div class="container pl-5 pr-5 mb-3">
            <div class="row">
                <div class="col-lg-12 col-sm-12 text-center mt-5">
                    <p class="text-rumble" style="font-size: 38px">Dirigeants</p>
                    <hr class="barre">
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                @foreach($negociateur as $nego)
                    @if($nego->negociateur_fonction == 'dirigeant')
                        <div class="col-lg-4 col-md-6 text-center">
                            <img class="img-fluid" src="{{asset('images/')}}/{{$nego->negociateur_photo}}" width="80%">
                            <p class="text-rumble pt-2" style="font-size: 20px">

                                {{$nego->negociateur_prenom}}  {{$nego->negociateur_nom}}
                            </p>
                            <hr class="barre">
                            @if($nego->negociateur_fonction == 'dirigeant')
                                <p>Dirigeant</p>
                            @endif
                        </div>
                    @endif
                @endforeach
            </div>
        </div>


        <div class="container pl-5 pr-5 mb-3">
            <div class="row">
                <div class="col-lg-12 col-sm-12 text-center mt-5">
                    <p class="text-rumble" style="font-size: 38px">Responsable commerciale</p>
                    <hr class="barre">
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                @foreach($negociateur as $nego)
                    @if($nego->negociateur_fonction == 'responsable_commerciale')
                        <div class="col-lg-4 col-md-6 text-center">
                            <img class="img-fluid" src="{{asset('images/')}}/{{$nego->negociateur_photo}}" width="80%">
                            <p class="text-rumble pt-2" style="font-size: 20px">
                                {{$nego->negociateur_prenom}}  {{$nego->negociateur_nom}}
                            </p>
                            <hr class="barre">
                            @if($nego->negociateur_fonction == 'responsable_commercial')
                                <p>Responsable Commerciale</p>
                            @endif
                        </div>
                    @endif
                @endforeach
            </div>
        </div>

        <div class="container pl-5 pr-5 mb-3">
            <div class="row">
                <div class="col-lg-12 col-sm-12 text-center mt-5">
                    <p class="text-rumble" style="font-size: 38px">Conseillers Besançon</p>
                    <hr class="barre">
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                @foreach($negociateur as $nego)
                    @if($nego->negociateur_fonction == 'conseillers_besancon')
                        <div class="col-lg-4 col-md-6 text-center">
                            <img class="img-fluid" src="{{asset('images/')}}/{{$nego->negociateur_photo}}" width="80%">
                            <p class="text-rumble pt-2" style="font-size: 20px">
                                {{$nego->negociateur_prenom}}  {{$nego->negociateur_nom}}
                            </p>
                            <hr class="barre">
                            @if($nego->negociateur_fonction == 'conseillers_besancon')
                                <p>Conseillers Besançon</p>
                            @endif
                        </div>
                    @endif
                @endforeach
            </div>
        </div>

        <!--<div class="container pl-5 pr-5 mb-3">
            <div class="row">
                <div class="col-lg-12 col-sm-12 text-center mt-5">
                    <p class="text-rumble" style="font-size: 38px">Conseillères Dôle</p>
                    <hr class="barre">
                </div>
            </div>
        </div> -->
        <div class="container">
            <div class="row">
                @foreach($negociateur as $nego)
                    @if($nego->negociateur_fonction == 'conseiller_dole')
                        <div class="col-lg-4 col-md-6 text-center">
                            <img class="img-fluid" src="{{asset('images/')}}/{{$nego->negociateur_photo}}" width="80%">
                            <p class="text-rumble pt-2" style="font-size: 20px">
                                {{$nego->negociateur_prenom}}  {{$nego->negociateur_nom}}
                            </p>
                            <hr class="barre">
                            @if($nego->negociateur_fonction == 'conseiller_dole')
                                <p>Conseillère Dôle</p>
                            @endif
                        </div>
                    @endif
                @endforeach
            </div>
        </div>

        <div class="container pl-5 pr-5 mb-3">
            <div class="row">
                <div class="col-lg-12 col-sm-12 text-center mt-5">
                    <p class="text-rumble" style="font-size: 38px">Conseillères Hauts-doubs</p>
                    <hr class="barre">
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                @foreach($negociateur as $nego)
                    @if($nego->negociateur_fonction == 'conseiller_hauts-doubs')
                        <div class="col-lg-4 col-md-6 text-center">
                            <img class="img-fluid" src="{{asset('images/')}}/{{$nego->negociateur_photo}}" width="80%">
                            <p class="text-rumble pt-2" style="font-size: 20px">
                                {{$nego->negociateur_prenom}}  {{$nego->negociateur_nom}}
                            </p>
                            <hr class="barre">
                            @if($nego->negociateur_fonction == 'conseiller_hauts-doubs')
                                <p>Conseillère Hauts-doubs</p>
                            @endif
                        </div>
                    @endif
                @endforeach
            </div>
        </div>
    </section>


    <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
            integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
            crossorigin=""></script>

    <script src="{{ asset('js/map.js') }}"></script>


    @include('incs.pre-footer-courriel')

    @include('incs.footer')

@endsection