@extends('layouts.site')

@section('content')
    <!-- <div class="container">
                      <a class="btn book-now" data-toggle="modal" data-target="#exampleModal" title="Quick Contact">Quick Contact</a>
                    </div> -->

    <!-- =========================
                                Google Map
                        =========================  -->
    <section class="google-map py-0">
        <iframe
            src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d14433.754129051224!2d55.3031162!3d25.2558294!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xe4826dd1ff6b0c77!2sDubai%20Leading%20Technologies!5e0!3m2!1sen!2sin!4v1621484257784!5m2!1sen!2sin"
            width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
        <!-- <div id="map" class="height-500"></div>
                          <script src="assets/js/google-map.js"></script>
                          <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script> -->
        <!-- CLICK HERE (https://developers.google.com/maps/documentation/embed/get-api-key) TO  LERAN MORE ABOUT GOOGLE MAPS API KEY -->
    </section><!-- /.GoogleMap -->

    <!-- ==========================
                            contact layout 1
                        =========================== -->
    <section class="contact-layout1 pb-60">
        <div class="container">
            <div class="row">
                <div class="col-sm-12 col-md-12 col-lg-7 mb-3">
                    <form class="contact-form" method="post" action="/enquiry" id="contactForm">
                        @csrf
                        <input type="hidden" id="g-recaptcha-response" name="g-recaptcha-response">
                        <input type="hidden" name="action" value="validate_captcha">
                        <div class="row">
                            <div class="col-sm-12">
                                <h4 class="contact-panel__title">Get In Touch</h4>
                            </div>
                            <div class="col-sm-6 col-md-6 col-lg-6">
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="Name" id="contact-name"
                                        name="name" required>
                                </div>
                            </div><!-- /.col-lg-6 -->
                            <div class="col-sm-6 col-md-6 col-lg-6">
                                <div class="form-group">
                                    <input type="email" class="form-control" placeholder="Email" id="contact-email"
                                        name="email" required>
                                </div>
                            </div><!-- /.col-lg-6 -->
                            <div class="col-sm-6 col-md-6 col-lg-6">
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="Phone" id="contact-Phone"
                                        name="phone" required>
                                </div>
                            </div><!-- /.col-lg-6 -->
                            <div class="col-sm-6 col-md-6 col-lg-6">
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="Website" id="contact-website"
                                        name="website">
                                </div>
                            </div><!-- /.col-lg-6 -->
                            <div class="col-12">
                                <div class="form-group mb-20">
                                    <textarea class="form-control" placeholder="What is your query?" id="contact-message" name="message"></textarea>
                                </div>
                                <div class="form-check mb-20 ml-2">
                                    <input class="form-check-input" type="checkbox" value="" id="acceptTerms"
                                        name="acceptTerms">
                                    <label class="form-check-label" for="acceptTerms" style="font-weight: normal;">
                                        I accept the <a href="https://dubaileadingtech.com/privacy-policy/maccess.html">
                                            privacy and terms</a>.
                                    </label>
                                </div>
                                <button type="submit" class="btn btn__primary btn__xhight mt-10">Submit Request</button>
                                <div class="contact-result"></div>
                            </div><!-- /.col-12 -->
                        </div><!-- /.row -->
                    </form>
                </div><!-- /.col-lg-6 -->
                <div class="col-sm-12 col-md-12 col-lg-4 offset-lg-1 mb-3">
                    <div class="contact-info d-flex flex-column justify-content-between" style="background-color: #5d2f92">
                        <!-- <div class="bg-img"><img src="assets/images/contact/1.jpg" alt="banner"></div> -->
                        <div>
                            <h4 class="contact-info__title">We are<br>here to help!</h4>
                            <p class="contact-info__desc">Your enquiries are important to us.</p>
                            <p class="contact-info__desc">Please provide your details and a relevant team member will get
                                back to you shortly.</p>
                        </div>
                        <!--<a href="#" class="btn btn__white btn__bordered btn__icon">
                                    <span>Download Brochure</span>
                                    <i class="icon-arrow-right"></i>
                                  </a>-->
                    </div><!-- /.contact-info -->
                </div><!-- /.col-lg-4 -->
            </div><!-- /.row -->
        </div><!-- /.container -->
    </section><!-- /.contact layout 1 -->

    <!-- ==========================
                           Contact layout 2
                        ============================ -->
    <section class="contact-layout2 bg-gray">
        <div class="container">
            <div class="row">
                @foreach ($offices as $office)
                    <div class="col-sm-12 col-md-4 col-lg-4">
                        <div class="contact-info-box">
                            <h4 class="contact__info-box-title">{{ $office->title }}</h4>
                            <ul class="contact__info-list list-unstyled">
                                <li>Email: <a href="mailto:{{ $office->email }}">{{ $office->email }}</a></li>
                                <li>Address: {{ $office->address }}</li>
                                <li>Phone: <a href="tel:{{ $office->phone }}">{{ $office->phone }}</a></li>
                                <li>Hours: {{ $office->hours }}</li>
                            </ul><!-- /.contact__info-list -->
                        </div><!-- /.contact-info-box -->
                    </div><!-- /.col-lg-4 -->
                @endforeach
            </div>
        </div>
    </section>
@endsection