@extends('layouts.master')
@section('page', 'Contact')
@section('contactactive', 'active')
@section('content')
  
  <!-- breadcrumb section -->
  <div class="breadcrumb-area">
    <div class="container">
      <!-- row -->
      <div class="row ">
        <!-- col -->
        <div class="col-12">
          <!-- breadcrumb -->
          <div class="breadcrumb-content">
            <h2>Contact</h2>
            <ul>
              <li><a href="{{('/')}}">Accueil</a></li>
              <li><a href="{{('service')}}">Contact</a></li>
            </ul>
          </div>
        </div>
      </div> 
    </div>
  </div>

  <section class="mb-0">
    <div class="container">
      <!-- contact form section section -->
      <div class="row">
        <div class="col-12 col-md-6 offset-lg-3 mt-5">
          <h2 class="display-6 text-center theme-text-secondary fw-bold mb-3">Contactez-nous
          </h2>
          <p class="text-center theme-text-accent-one mb-0 max-1"> Pour tous vos besoins, veuillez nous écrire</p>
          <div class="mt-5">
            <form id="contact-form" method="post" action="#" class="send">
              <div class="messages"></div>
              <div class="controls">
                <div class="form-floating mb-3">
                  <input type="text" name="name" class="form-control" id="form_name" placeholder="Your Name"
                    required="required" data-error="Votre nom est obligatoire">
                  <label for="form_name">Votre nom</label>
                  <div class="help-block with-errors"></div>
                </div>
                <div class="form-floating mb-3">
                  <input type="email" name="email" class="form-control" id="form_email" placeholder="Your Name"
                    required="required" data-error="Valid Email is required.">
                  <label for="form_email">Votre Email</label>
                  <div class="help-block with-errors"></div>
                </div>
                <div class="form-floating mb-3">
                  <input type="number" name="phone" class="form-control" id="form_phone" placeholder="Your Name"
                    required="required" data-error="Please specify your Phone.">
                  <label for="form_phone">Numéro de téléphone</label>
                  <div class="help-block with-errors"></div>
                </div>
                <div class="form-floating mb-3">
                  <textarea class="form-control" name="message" placeholder="Leave a comment here" id="form_message"
                    rows="4" required="required" data-error="Please, leave us a message."></textarea>
                  <label for="form_message">Votre message</label>
                  <div class="help-block with-errors"></div>
                </div>
                <div class="mb-3 text-center custom-button">
                  <button type="submit" class="btn rounded-pill custom-btn-primary font-small button-effect px-4"
                    value="Send message">Envoyer</button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
      <!-- customer service section -->
      <div class="row my-5">
        <!-- <div class="col-12 col-md-12 text-center mb-5">
          <h4 class="display-6 text-center theme-text-secondary fw-bold mb-3">We Are Here <span class="high-text">For
              You</span></h4>
          <p class="text-center theme-text-accent-one mb-0 max-1">We’d love to hear about it.
            Take five minutes to fill out our project form so that we can get to know you and
            understand your project.</p>
        </div> -->
        <div class="col-12 col-lg-4 mb-3 mb-md-0">
          <div class="d-flex align-items-center">
            <div class="flex-shrink-0">
              <div class="d-inline-flex mb-3 p-3 rounded-4 theme-bg-white theme-box-shadow">
                <img src="{{{asset('template/assets/images/icons/enquiry-icon.svg')}}}" alt="enquiry-icon" class="img-fluid">
              </div>
            </div>
            <div class="flex-grow-1 ms-3">
              <h2 class="mb-3 fw-bold fs-6">Ecrivez-nous
              </h2>
              <a href="mailto:support@flightworld.com"
                class="mb-0 max-1 theme-text-accent-one font-medium">info@livingsun.com</a>
            </div>
          </div>
        </div>
        <div class="col-12 col-lg-4 mb-3 mb-md-0" data-aos="fade-down" data-aos-delay="300">
          <div class="d-flex align-items-center">
            <div class="flex-shrink-0">
              <div class="d-inline-flex mb-3 p-3 rounded-4 theme-bg-white theme-box-shadow">
                <img src="{{asset('template/assets/images/icons/customer-care.svg')}}" alt="customer-care" class="img-fluid">
              </div>
            </div>
            <div class="flex-grow-1 ms-3">
              <h2 class="mb-3 fw-bold fs-6">Téléphone
              </h2>
              <span class="mb-0 max-1 theme-text-accent-one font-medium">(+228)93799644</span>
            </div>
          </div>
        </div>
        <div class="col-12 col-lg-4 mb-3 mb-md-0" data-aos="fade-up" data-aos-delay="300">
          <div class="d-flex align-items-center">
            <div class="flex-shrink-0">
              <div class="d-inline-flex mb-3 p-3 rounded-4 theme-bg-white theme-box-shadow">
                <img src="{{asset('template/assets/images/icons/office-hours.svg')}}" alt="office-hours" class="img-fluid">
              </div>
            </div>
            <div class="flex-grow-1 ms-3">
              <h2 class="mb-3 fw-bold fs-6">Horaires d'ouverture
              </h2>
              <span class="mb-0 max-1 theme-text-accent-one font-medium">Lundi-Vendredi
                <br>
                07:00 à 17:30</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- map -->
    <div class="d-flex flex-column theme-border-radius theme-bg-white theme-box-shadow">
      

        <iframe src="https://www.google.com/maps/embed?pb=!1m21!1m12!1m3!1d126911.38165022533!2d1.072625852584203!3d6.266271371041707!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m6!3e6!4m0!4m3!3m2!1d6.2662778!2d1.1550278!5e0!3m2!1sfr!2stg!4v1743764944591!5m2!1sfr!2stg" height="400" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
    </div>
  </section>










  

@endsection