@extends('layouts.default')

@section('title', 'Contact')

@section('content')
    <div class="breadcumb-wrapper " data-bg-src="{{ asset('/img/breadcumb.jpg') }}" data-overlay="black"
         data-opacity="8">
        <div class="container">
            <div class="breadcumb-content">
                <h1 class="breadcumb-title">Contactez-nous</h1>
            </div>
        </div>
    </div>

    <div class="space-top">
        <div class="container">
            <div class="row gy-40">
                <div class="col-xl-4">
                    <div class="contact-info-wrap">
                        <h3 class="mb-30">Coordonnées</h3>
                        <div class="contact-info">
                            <div class="contact-info_icon">
                                <i class="far fa-phone-volume"></i>
                            </div>
                            <div class="media-body">
                                <h4 class="contact-info_title h6">Téléphone</h4>
                                <span class="contact-info_text">
                                    <a href="tel:+33663907767">+33 6 63 90 77 67</a>
                                </span>
                            </div>
                        </div>
                        <div class="contact-info">
                            <div class="contact-info_icon">
                                <i class="far fa-envelope"></i>
                            </div>
                            <div class="media-body">
                                <h4 class="contact-info_title h6">E-mail</h4>
                                <span class="contact-info_text">
                                    <a href="mailto:j.lapaix.securite@gmail.com">j.lapaix.securite@gmail.com</a>
                                </span>
                            </div>
                        </div>
                        <div class="contact-info">
                            <div class="contact-info_icon">
                                <i class="far fa-location-dot"></i>
                            </div>
                            <div class="media-body">
                                <h4 class="contact-info_title h6">Location</h4>
                                <span class="contact-info_text">
                                    38090 Villefontaine, <br>
                                    France
                                </span>
                            </div>
                        </div>
                        <h6 class="social-info_title">Suivez-nous sur les réseaux !</h6>
                        <div class="th-social style-white">
                            <a href="https://www.facebook.com/"><i class="fab fa-facebook-f"></i></a>
                        </div>
                    </div>
                </div>

                <div class="col-xl-8">
                    <form action="#" method="POST" class="contact-form3 h-100">
                        @csrf

                        <h2 class="form-title h3 mb-30">Écrivez-nous !</h2>

                        @if($errors->any())
                            <p class="error-popup" style="background: rgb(251, 152, 152);
padding: 20px;"><b>Erreur :</b><br>{{$errors->first()}}</p><br/>
                        @endif

                        @if(\Illuminate\Support\Facades\Session::has('success'))
                            <p class="success-popup" style="background: palegreen;
padding: 20px;">{{ \Illuminate\Support\Facades\Session::get('success') }}</p>
                            <br/>
                        @endif

                        <div class="row">
                            <div class="form-group col-md-6">
                                <input type="text" class="form-control style-white" name="name" id="name" required
                                       placeholder="Nom *">
                            </div>

                            <div class="form-group col-md-6">
                                <input type="tel" class="form-control style-white" name="phone" id="number" required
                                       placeholder="Numéro de téléphone *">
                            </div>

                            <div class="form-group col-md-12">
                                <input type="email" class="form-control style-white" name="email" id="email" required
                                       placeholder="E-mail *">
                            </div>

                            <div class="form-group col-12">
                                <textarea name="message" id="message" cols="30" rows="3" required
                                          class="form-control style-white" placeholder="Message *"></textarea>
                            </div>
                            <div class="form-btn col-12">
                                <button type="submit" class="th-btn">Envoyer <i class="fa fa-arrow-right"></i></button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="map-sec">
        <iframe
            src="https://maps.google.com/maps?width=100%25&amp;height=600&amp;hl=en&amp;q=Villefontaine+()&amp;t=&amp;z=10&amp;ie=UTF8&amp;iwloc=B&amp;output=embed"
            allowfullscreen="" loading="lazy">

        </iframe>
    </div>
@endsection