@extends('master')
@section('title','Contact Us')
@section('keywords','security services, security guards, event security in UAE')
@section('description','Looking for ways to get in touch with Alsafwan? Contact us for your inquiries, feedback, or support requests. We are always ready to assist you.')
@section('og:url','https://www.alsafwan.ae/ContactUs/')
@section('og:type','Contact Us')
@section('og:image','https://www.alsafwan.ae/public/website/img/demos/construction/logo-construction.png')
@section('head')



    <style>
        @media only screen and (min-width:320px) and (max-width:414px)
        {

            html section.section-tertiary{
                background-color: white;!important;
            }
            .position{
                margin-top: -10px !important;
                margin-bottom: -40px;
                text-align: left !important;
            }

        }
    </style>

    <style>
        /*
           * Special CSS classes
           * for jQuery - Valida
           *
           * You can try to change the styles via Firebug (Firefox) or related plugin.
           */

        .at-error {
            /* placed on a error labels */
            color: #A94442;
            margin: 6px 0;
            text-align: left;

        }

        .at-warning {
            /* placed on a warning (invalid) labels */
            color: #8A6D3B;
            margin: 6px 0;
            text-align: left;
        }

        .at-invalid {
            /* placed on a invalid fields (which do not match with their filters or masks) */
            /*margin: 0px 16px ;*/
        }

        .at-required {
            /* placed on a required fields (which are not filled) */

            /*margin: 0px 16px;*/
        }

        .at-description {
            /* placed on description paragrapher, right after TEXTAREA fields. */
        }

        .at-description > span {
            /* into description paragrapher, right after TEXTAREA fields there are 2 span TAGs. */
        }

        .at-required-highlight {
            /* highlight required form fields */
            color: red !important;
        }
        .modal {
            text-align: left;
            padding: 0!important;
        }

        .modal:before {
            content: '';
            display: inline-block;
            height: 100%;
            vertical-align: middle;
            margin-right: -4px;
        }

        .modal-dialog {
            display: inline-block;
            text-align: left;
            vertical-align: middle;
        }

        .input-group-btn:last-child>.btn, .input-group-btn:last-child>.btn-group{
            z-index: 9999 !important;
        }

        /*.okgly{*/
        /*padding-right: 45px !important;*/
        /*}*/
        /*.removegly{*/
        /*padding-right: 45px !important;*/
        /*}*/


    </style>


@endsection

@section('content')

<div class="body">

    <div role="main" class="main">
        <section class="section section-tertiary section-no-border pb-md mt-none">
            <div class="container">
                <div class="row mt-xl">
                    <div class="col-md-10 col-md-offset-2 pt-xlg mt-xlg align-right">
                        <h1 class="text-uppercase font-weight-light mt-xl text-color-primary position">Contact</h1>
                    </div>
                </div>
            </div>
        </section>

        <div class="container">

            <div class="row pt-xl mb-xl">
                <div class="col-md-7">

                    <h2 class="mb-none">Quick Inquiry</h2>

                    <p class="lead mb-xl mt-xs">Contact us or give us a call to discover how we can help.</p>

                    @if (Session::has('success'))
                        <div class="alert alert-success">
                            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                            {{ Session::get('success') }}
                        </div>
                    @endif
                    <form id="contactForm" action="contactmail" method="POST" class="valida">
                        <input type="hidden" id="csrf-token" name="_token" value="{{ csrf_token() }}">
                        <div class="row">
                            <div class="form-group">
                                <div class="col-md-12">
                                    <input type="text" placeholder="Your Name" value="" maxlength="100" class="form-control" name="name" id="name" filter="name" required>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group">
                                <div class="col-md-12">
                                    <input type="email" placeholder="Your E-mail" value="" maxlength="100" class="form-control" name="email" id="email" filter="email" required>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group">
                                <div class="col-md-12">
                                    <input type="text" placeholder="Subject" value=""  maxlength="100" class="form-control" name="subject" id="subject" filter="description" required>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group">
                                <div class="col-md-12">
                                    <textarea maxlength="5000" placeholder="Inquiry" rows="5" class="form-control" name="message" id="message" filter="description" required></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <input type="submit" value="Send Inquiry" class="btn btn-primary mb-xlg" data-loading-text="Loading..." style="background-color: #c1902a !important; border-color:#c1902a !important; ">
                            </div>
                        </div>
                    </form>

                </div>
                <div class="col-md-4 col-md-offset-1">

                    <h4 class="text-color-dark mb-xs pb-md">Corporate Headquarters</h4>
                     <!-- Google Maps - Go to the bottom of the page to change settings and map location. -->
                    <div id="googlemaps" class="google-map small">
                        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d225.55437581442195!2d55.27198175465051!3d25.241302766604534!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3e5f4300dd44a6bb%3A0x7b0699416ed192d9!2sAl%20Hudaiba%20Awards%20Buildings!5e0!3m2!1sen!2sae!4v1604398226023!5m2!1sen!2sae" width="100%" height="100%" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
                        {{--<iframe src="https://www.mapsdirections.info/en/custom-google-maps/map.php?width=100%&height=270&hl=ru&q=Bay%20Square%20-%20Dubai+(Your%20Business%20Name)&ie=UTF8&t=&z=16&iwloc=B&output=embed" width="400" height="270" frameborder="0" style="border:0px" allowfullscreen></iframe>--}}
                    </div>

                    <ul class="list list-icons mt-xlg mb-xlg">
                        <li><i class="icon-call-end icons"></i> <strong>Tel. :</strong> +971 4 422 2559</li>
                        {{--<li><i class="icon-call-end icons icons"></i> <strong>Mob. :</strong> +971 55 845 1 927</li>--}}
                        <li><i class="icon-envelope icons"></i> <strong>Email:</strong> <a href="mailto:info@alsafwan.ae">info@alsafwan.ae</a></li>
                        <li><i class="icon-pin icons"></i> <strong> Addr. :</strong>Al Hudaiba Awards Buildings - Block B - Jumeirah St - Dubai</li>
                        <li><i class="icon-info icons"></i> <strong>Web. :</strong> www.alsafwan.ae</li>



                    </ul>

                </div>
            </div>

        </div>
    </div>

</div>

@endsection


@section('map')





@endsection