@extends('templates/header')
@section('content')
<!-- Page Header Start -->
<div class="container-fluid page-header wow fadeIn" data-wow-delay="0.1s">
    <div class="container">
        <h1 class="display-3 mb-3 animated slideInDown">Contactez-nous</h1>
        <nav aria-label="breadcrumb animated slideInDown">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a class="text-body" href="{{route('accueil')}}">Accueil</a></li>
                <li class="breadcrumb-item text-dark active" aria-current="page" style="font-weight: 700">Contactez-nous</li>
            </ol>
        </nav>
    </div>
</div>
<!-- Page Header End -->

<!-- Contact Start -->
<div class="container-xxl py-6">
    <div class="container">
        <div class="section-header text-center mx-auto mb-5 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 500px;">
            <h1 class="display-5 mb-3">Contactez-nous</h1>
        </div>
        <div class="row g-5 justify-content-center">
            <div class="col-lg-5 col-md-12 wow fadeInUp" data-wow-delay="0.1s">
                <div class="bg-primary text-white d-flex flex-column justify-content-center h-100 p-5">
                    <h5 class="text-white">Appelle-nous</h5>
                    <p class="mb-5"><i class="fa fa-phone-alt me-3" style="color:rgb(246,156,63)"></i>{{ $contact->telephone}}</p>
                    <h5 class="text-white">Envoyez-nous un email</h5>
                    <p class="mb-5"><i class="fa fa-envelope me-3" style="color:rgb(246,156,63)"></i>{{ $contact->email}}</p>
                    <h5 class="text-white">Adresse de bureau</h5>
                    @foreach($contact2 as $con)
                    <p class="mb-1"><i class="fa fa-map-marker-alt me-3" style="color:rgb(246,156,63)"></i>{{ $con->adresse}}</p><hr>
                    @endforeach

                    <h5 class="text-white">Suivez-nous</h5>
                    <div class="d-flex pt-2">

                        <a class="btn btn-square btn-outline-light rounded-circle me-1" href="{{ $contact->linkedin }}" target="_blank"><i class="fab fa-linkedin-in" style="margin-top:2px;"></i></a>
                        <a class="btn btn-square btn-outline-light rounded-circle me-1" href="{{ $contact->facebook}}" target="_blank"><i class="fab fa-facebook-f" style="margin-top:2px;"></i></a>
                        <a class="btn btn-square btn-outline-light rounded-circle me-1" href="{{ $contact->instagram}}" target="_blank"><i class="fab fa-instagram" style="margin-top:2px;"></i></a>
                        <a class="btn btn-square btn-outline-light rounded-circle me-0" href="https://api.whatsapp.com/send?phone={{ $contact->whatsapp }}&text=Bonjour" target="_blank" id="whatsappLink"><i class="fab fa-whatsapp" style="margin-top:2px;"></i></a>
                    
                        <!-- <a class="btn btn-square btn-outline-light rounded-circle me-1" href="{{ $contact->linkedin }}" target="_blank"><i class="fab fa-linkedin-in" style="margin-top:2px; color: #0077B5;"></i></a>

<a class="btn btn-square btn-outline-light rounded-circle me-1" href="{{ $contact->facebook }}" target="_blank"><i class="fab fa-facebook-f" style="margin-top:2px; color: #1877F2;"></i></a>

<a class="btn btn-square btn-outline-light rounded-circle me-1" href="{{ $contact->instagram }}" target="_blank"><i class="fab fa-instagram" style="margin-top:2px; color: #E4405F;"></i></a>

<a class="btn btn-square btn-outline-light rounded-circle me-0" href="https://api.whatsapp.com/send?phone={{ $contact->whatsapp }}&text=Bonjour"  id="whatsappLink"><i class="fab fa-whatsapp" style="margin-top:2px; color: #25D366;"></i></a> -->

                    
                    </div>
                </div>
            </div>
            <div class="col-lg-7 col-md-12 wow fadeInUp" data-wow-delay="0.5s">
                <!-- <p class="mb-4">The contact form is currently inactive. Get a functional and working contact form with Ajax & PHP in a few minutes. Just copy and paste the files, add a little code and you're done. <a href="https://htmlcodex.com/contact-form">Download Now</a>.</p> -->
                    <form action="{{ route('send.email') }}" class="contact100-form validate-form" method="post" onsubmit="return checkRecaptcha();">
                    @csrf
                
                    @if(session()->has('message'))
                    <div class="alert alert-success">
                        {{ session()->get('message') }}
                    </div>
                    @endif
               
                    <div class="row g-3">
                        <div class="col-md-6">
                            <div class="form-floating">
                                <input type="text" class="form-control" id="name" name="name" placeholder="Nom & Prénom" required>
                                <label for="name">Nom & Prénom</label>
                            </div>
                            @error('name')
                            <span class="text-danger"> {{ $message }} </span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <div class="form-floating">
                                <input type="email" class="form-control" id="email" name="email" placeholder="Votre E-mail" required>
                                <label for="email">Votre E-mail</label>
                            </div>
                            @error('email')
                            <span class="text-danger"> {{ $message }} </span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <div class="form-floating">
                                <input type="text" class="form-control" id="subject" name="sujet" placeholder="Votre Sujet" required>
                                <label for="subject">Sujet</label>
                            </div>
                            @error('sujet')
                            <span class="text-danger"> {{ $message }} </span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <div class="form-floating">
                                <input type="text" class="form-control" id="tel" name="tel" placeholder="Téléphone" required>
                                <label for="tel">Téléphone</label>
                            </div>
                            @error('tel')
                            <span class="text-danger"> {{ $message }} </span>
                            @enderror
                        </div>
                        <div class="col-12">
                            <div class="form-floating">
                                <textarea class="form-control" placeholder="Laissez un message ici" name="message" id="message" style="height: 200px" required></textarea>
                                <label for="message">Message</label>
                            </div>
                            @error('message')
                            <span class="text-danger"> {{ $message }} </span>
                            @enderror
                        </div>
                        <script src="https://www.google.com/recaptcha/api.js" async defer></script>

                        <div class="g-recaptcha" id="captcha" data-sitekey="6Lf8SnYoAAAAAI4lDa26lWEf_Qt5HKYwrWxxnnBC"></div>

                        <div class="col-12">
                            <button class="btn btn-primary rounded-pill py-3 px-5" type="submit" name="send">Envoyer le message</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- Contact End -->


<!-- Google Map Start -->
<div class="container-xxl px-0 wow fadeIn" data-wow-delay="0.1s" style="margin-bottom: -6px;">
    <iframe class="w-100" style="height: 450px;" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d13292.630061426322!2d-7.5815341!3d33.6012173!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xda7cd0f1de51617%3A0xb8836cb18ecf1d34!2sMercure%20Diffusion%20S.A.R.L.!5e0!3m2!1sen!2sma!4v1695806573829!5m2!1sen!2sma" frameborder="0" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>
<!-- Google Map End -->
<script>
// Replace YOUR_SITE_KEY with your actual Site Key
grecaptcha.ready(function() {
  grecaptcha.execute('6Lf1DHYoAAAAADdBGNmXqXwNTXnRziXqbvjf-FGE', {action: 'mediashop'})
    .then(function(token) {
      // Send the 'token' to your server for verification.
      // You can include it in an HTTP POST request.
    });
});
</script>
<script>
    function checkRecaptcha() {
        var response = grecaptcha.getResponse();
        if (response.length == 0) {
            // reCAPTCHA is not completed, show an error message or prevent form submission
            alert("Please complete the reCAPTCHA challenge.");
            return false;
        } else {
            // reCAPTCHA is completed, allow form submission
            return true;
        }
    }
</script>

<!--===============================================================================================-->
<script src="vendor/jquery/jquery-3.2.1.min.js"></script>
<!--===============================================================================================-->
<script src="vendor/bootstrap/js/popper.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!--===============================================================================================-->
<script src="vendor/select2/select2.min.js"></script>
<!--===============================================================================================-->
<script src="vendor/tilt/tilt.jquery.min.js"></script>
<script>
    $('.js-tilt').tilt({
        scale: 1.1
    })
</script>
<!--===============================================================================================-->
<script src="js/main.js"></script>

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-23581568-13"></script>
<script>
    window.dataLayer = window.dataLayer || [];

    function gtag() {
        dataLayer.push(arguments);
    }
    gtag('js', new Date());

    gtag('config', 'UA-23581568-13');
</script>
@endsection