@extends('layouts.app')

@section('title','Contact Us - Dusty helmets')

@section('content')

    <!-- Page Header Start -->
    <!-- p8/pic1 -->
    <div class="mb-0 page-header" style="background: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), url(public/assets/P6/pic2.jpg);background-position: center;
    background-repeat: no-repeat;
    background-size: cover;">
        <!--motourismo.png-->
        <!--display:block; width:50%; height:50%; position:absolute; left: 3%; top: 75%;max-width: 250px;max-height: 75px;cursor: pointer;-->
        <img src="http://dustyhelmets.com/public/motourismo.png" style="display: block;width: 20%;height: 20%;position: absolute;left: 3%;top: 85%;max-width: 140px;max-height: 40px;cursor: pointer;" onclick="window.open('http://www.motourismo.com','_blank')" title="motourismo.com">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <h2>Contact Us</h2>
                </div>
                <div class="col-12">
                    <a href="{{url('/')}}">Home</a>
                    <a href="{{url('/contact-us')}}">Contact Us</a>
                </div>
            </div>
        </div>
    </div>
    <!-- Page Header End -->
    <div class="contact">
        <div class="container">
            <div class="section-header" style="margin-bottom:20px !important;">
                {{-- <h2>Contact Us</h2> --}}
                <h2 class="dusty-color">{{ $contact->title }}</h2>
            </div>
            {!! $contact->content !!}
            {{-- <div class="about-text">
               <p>
                  For a quote and more information about your personal safari, it is easy to get in touch with us. You can call us, send us an
                   email, or use our website form to contact us. We would love to hear from you, let us know if you have any questions or
                   require further information.
               </p>
               <p>
                   Dusty Helmets has effective Covid-19 protocols; our rides are activities in the outside and hence the risk of contamination is extremely low; 
                   we maintain social distancing and request our riders to wear masks when inside premises. All our gear is thoroughly cleaned and sanitized prior to each ride.
               </p>
            </div> --}}
            <div class="mt-4 row contact-form">
                <div class="col-md-6 ">
                    <div class="row " style="margin: 0 0 30px 0;
padding: 30px 15px 30px 15px;
background: rgba(0, 0, 0, .04);border-radius: 15px;
box-shadow:0 .5rem 1rem rgba(0,0,0,.15) !important;
border-bottom: 1px solid #fbaf32;">
                                                <div class="col-md-12">
                                                    <div class="contact-info">
                                                        <div class="contact-icon">
                                                            <i class="fa fa-map-marker-alt"></i>
                                                        </div>
                                                        {!! $contact->address !!}
{{--                                                        <div class="contact-text">--}}
{{--                                                            <h3>Address</h3>--}}
{{--                                                            <p>P O Box 1702-00502 Karen, Kenya</p>--}}
{{--                                                        </div>--}}
                                                    </div>
                                                </div>
                        <div class="col-md-12">
                            <div class="contact-info">
                                <div class="contact-icon">
                                    <i class="fa fa-phone-alt"></i>
                                </div>
                                {!! $contact->phone !!}
{{--                                <div class="contact-text">--}}
{{--                                    <h3>Call Us</h3>--}}
{{--                                    <p>+254722790317</p>--}}
{{--                                </div>--}}
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="contact-info">
                                <div class="contact-icon">
                                    <i class="fa fa-envelope"></i>
                                </div>
                                {!! $contact->email !!}
{{--                                <div class="contact-text">--}}
{{--                                    <h3>Email Us</h3>--}}
{{--                                    <p>info@dustyhelmets.com</p>--}}
{{--                                </div>--}}
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="contact-info">
                                <div class="contact-icon">
                                    <i class="fa fa-share"></i>
                                </div>
                                <div class="contact-text">
                                    {!! $contact->social !!}
{{--                                    <h3>We are social</h3>--}}
                                    <div class="contact-social">
                                        <a target="_blank" href="https://www.facebook.com/pages/category/Tour-Guide/Dusty-Helmets-285284074933055/"><i class="fab fa-facebook-f"></i></a>
                                        <a target="_blank" href="https://www.instagram.com/dustyhelmets/"><i class="fab fa-instagram"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="py-2 shadow col-md-6" style="border-radius: 15px;
border-bottom: 1px solid #fbaf32;">
                    @if($errors->any())
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                            <ul>
                                @foreach($errors->all() as $error)
                                    <li>{{$error}}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                    @if(\Session::has('success'))
                    <div class="alert alert-success alert-dismissible">
                      <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                      <strong>Success!</strong> {!! \Session::get('success') !!}
                    </div>
                        <script>
                            alert("{!! \Session::get('success') !!}")
                        </script>
                    @endif
                    <div id="success"></div>
                    <form name="sentMessage" id="" action="{{url('contact-us')}}" method="post" novalidate="novalidate">
                        @csrf
                        <div class="control-group">
                            <input type="text" class="form-control" name="name" placeholder="Your Name"
                                   required="required" data-validation-required-message="Please enter your name"/>
                            <p class="help-block text-danger"></p>
                            <input type="email" class="form-control" name="email" placeholder="Your Email"
                                   required="required" data-validation-required-message="Please enter your email"/>
                            <p class="help-block text-danger"></p>
                        </div>
                        <!--<div class="control-group">-->

                        <!--</div>-->
                        <div class="control-group">
                            <input type="text" class="form-control" name="subject" placeholder="Subject"
                                   required="required" data-validation-required-message="Please enter a subject"/>
                            <p class="help-block text-danger"></p>
                        </div>
                        <div class="control-group">
                            <input type="text" class="form-control" name="referer" placeholder="How did you hear about us?"
                                    data-validation-required-message="Please enter how did you hear about us?"/>
                            <p class="help-block text-danger"></p>
                        </div>
                        <div class="control-group" style="display: none;">
                         <label for="faxonly">Fax Only
                          <input type="checkbox" class="form-control" name="faxonly" data-validation-required-message="Please enter faxonly?"/>
                         </label>
                            <p class="help-block text-danger"></p>
                        </div>
                        <div class="control-group">
                            <textarea class="form-control" name="message" placeholder="Message" required="required"
                                      data-validation-required-message="Please enter your message"></textarea>
                            <p class="help-block text-danger"></p>
                        </div>
                        <div>
                            <center>
                                <button class="btn custom-btn" type="submit" id="sendMessageButton" onclick="this.disabled=true;this.form.submit();">Send Message
                                </button>
                            </center>
                        </div>
                    </form>
                </div>
            </div>
            <!--<div class="py-5 row">-->
            <!--    <div class="col-md-12">-->
            <!--        <center><a class="primary-btn" id="bbt" href="#vvv" style="color:#777 !important">Download our terms & conditions</a></center>-->
            <!--    </div>-->
            <!--</div>-->
        </div>
    </div>

@endsection