@extends('frontend.master')

@section('content')

<main class="main">

<!-- breadcrumb -->
<div class="site-breadcrumb" style="background: url(/assets/frontend/img/breadcrumb/01.jpg)">
    <div class="container">
        <h2 class="breadcrumb-title">Nous contacter</h2>
        <ul class="breadcrumb-menu">
        <li><a href="/">Accueil</a></li>
            <li class="active">Nous contacter</li>
        </ul>
    </div>
</div>
<!-- breadcrumb end -->

<!-- contact area -->
<div class="contact-area py-120">
    <div class="container">
        <div class="contact-content">
            <div class="row">
                <div class="col-md-4">
                    <div class="contact-info">
                        <div class="icon">
                            <i class="fal fa-map-location-dot"></i>
                        </div>
                        <div class="content">
                            <h5>Addresse</h5>
                            <p>{{ $contacts->adresse }}</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="contact-info">
                        <div class="icon">
                            <i class="fal fa-phone-volume"></i>
                        </div>
                        <div class="content">
                            <h5>Téléphone</h5>
                            <p>{{ $contacts->telephone }}</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="contact-info">
                        <div class="icon">
                            <i class="fal fa-envelopes"></i>
                        </div>
                        <div class="content">
                            <h5>Email</h5>
                            <p><a href="#" >{{ $contacts->email }}</a></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="contact-form-wrap">
            <div class="row g-4">
                <div class="col-lg-5">
                    <div class="contact-img">
                        <img src="/assets/frontend/img/contact/01.jpg" alt="">
                    </div>
                </div>
                <div class="col-lg-7">
                    <div class="contact-form">
                        <div class="contact-form-header">
                            <h2>Laissez-nous votre message</h2>
                            <p>&nbsp;</p>
                        </div>
                        <div class="form-message"></div>
                        <form method="post" action="#" id="contact-form">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <div class="form-icon">
                                            <i class="far fa-user-tie"></i>
                                            <input type="text" class="form-control" name="name" placeholder="Votre nom" required>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <div class="form-icon">
                                            <i class="far fa-envelope"></i>
                                            <input type="email" class="form-control" name="email" placeholder="Votre Email" required>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="form-icon">
                                    <i class="far fa-pen"></i>
                                    <input type="text" class="form-control" name="subject" placeholder="Sujet" required>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="form-icon">
                                    <i class="far fa-comment-lines"></i>
                                    <textarea name="message" cols="30" rows="5" class="form-control"
                                        placeholder="Votre Message" required></textarea>
                                </div>
                            </div>
                            <button type="submit" class="theme-btn">Envoyer <i class="far fa-paper-plane"></i></button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- end contact area -->

<!-- map -->
<div class="contact-map">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d5617.504735051742!2d-3.9802515461745!3d5.390175221185899!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xfc193d42be1f94b%3A0x75fc1e5025bc8f21!2sEspace%20pri%C3%A8re!5e0!3m2!1sfr!2sci!4v1739697629574!5m2!1sfr!2sci" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<!-- map end -->
</main>
@endsection