@extends('frontView.layout')

@section('title_area')
    Apply for Free consultancy
@endsection



@section('content')


    <div class="container">

        <script type="application/javascript">
            jQuery(function($) {
                // Contact form
                var form = $('#contact-form');
                form.submit(function(event){
                    $('#submit').prop('disabled', true);

                    event.preventDefault();
                    var form_status = $('<div class="form_status"></div>');
                    form.prepend( form_status.html('<p><i class="fa fa-spinner fa-spin"></i> Waiting...</p>').fadeIn() );
                    $.ajax({
                        url: $(this).attr('action'),
                        type: 'POST',
                        dataType:'JSON',
                        data:form.serialize(),
                        success: function( response ) {   //alert(response)

                        }
                    }).done(function(data){
                        $('#formcontact').hide();
                        if(data.type=='success') {
                            $('#result').html(data.message);
                            $('#resultviewer').fadeIn();
                            $('input[type="text"]').val('')
                            $('input[type="email"]').val('')
                            $('textarea').val('');

                        }

                        form_status.html('<p class="text-success">' + data.message + '</p>').delay(3000).fadeOut();
                    });
                });
            });



        </script>
        <!-- Section: Contact v.3 -->

        <section class="  topheader">


            <!-- Form with header -->

            <div class="card">


                <!-- Grid row -->

                <div class="row">


                    <!-- Grid column -->

                    <div class="col-lg-8">


                        <div class="card-body form">

                            <form method="POST" action="{{ url('submit_contact') }}"  id="contact-form">
                                @csrf
                                <!-- Header -->

                                <h3 class="mt-4"><i class="fas fa-envelope pr-2"></i>Write to us:</h3>


                                <!-- Grid row -->

                                <div class="row">


                                    <!-- Grid column -->

                                    <div class="col-md-12">

                                        <div class="md-form mb-0">

                                            <input type="text" name="name" id="form-contact-name" class="form-control">

                                            <label for="form-contact-name" class="">Your Name</label>

                                        </div>

                                    </div>

                                    <!-- Grid column -->


                                    <!-- Grid column -->

                                    <!-- Grid column -->


                                </div>

                                <!-- Grid row -->


                                <!-- Grid row -->

                                <div class="row">

                                    <div class="col-md-6">

                                        <div class="md-form mb-0">

                                            <input type="email" name="email" id="form-contact-email" class="form-control" required>

                                            <label for="form-contact-email" class="">Your Email</label>

                                        </div>

                                    </div>


                                    <!-- Grid column -->

                                    <div class="col-md-6">

                                        <div class="md-form mb-0">

                                            <input type="text" name="phone" id="form-contact-phone" class="form-control" required>

                                            <label for="form-contact-phone" class="">Your Phone</label>

                                        </div>

                                    </div>

                                    <!-- Grid column -->




                                    <!-- Grid column -->


                                </div>

                                <!-- Grid row -->


                                <!-- Grid row -->

                                <div class="row">


                                    <!-- Grid column -->

                                    <div class="col-md-12">

                                        <div class="md-form mb-0">

                                            <textarea type="text" name="message" id="form-contact-message"
                                                      class="form-control md-textarea" rows="3" required></textarea>

                                            <label for="form-contact-message">Your Message</label>

                                            <button type="submit" class="btn-floating btn-lg blue">

                                                <i class="far fa-paper-plane"></i>

                                            </button>

                                        </div>

                                    </div>

                                    <!-- Grid column -->


                                </div>
                            </form>
                            <!-- Grid row -->


                        </div>


                    </div>

                    <!-- Grid column -->


                    <!-- Grid column -->

                    <div class="col-lg-4">


                        <div class="card-body contact text-center h-100 white-text light-blue darken-2">


                            <h3 class="my-4 pb-2">Corporate office</h3>

                            <ul class="text-lg-left list-unstyled ml-2">

                                <li>

                                    <p style="font-size: 12px"><i class="fas fa-map-marker-alt pr-2 white-text" ></i><b  style="font-size: 12px">Al Bader Brothers Gulf Construction</b> <br>Corporate Head Office
                                       <br> PO Box: 221317<br>
                                        Jabel Ali Free Zone (JAFZA)<br>
                                         Dubai,  United Arab Emirates</p>

                                </li>

                                <li>

                                    <p  style="font-size: 14px"><i class="fas fa-envelope pr-2 white-text"></i> <a href="mailto:info@abb-gulf.com" class="white-text">info@abbgc.com</a><br>
                                   <i class="fas fa-globe pr-2 white-text"></i> <a href="javascript:;"  class="white-text">www.abbgc.com</a></p>

                                </li>

 
                            </ul>

                            <hr class="hr-light my-4">

                            <ul class="list-inline text-center list-unstyled">

                                <li class="list-inline-item">

                                    <a class="p2 fa-lg tw-ic">

                                        <i class="fab fa-twitter white-text"></i>

                                    </a>

                                </li>

                                <li class="list-inline-item">

                                    <a class="p2 fa-lg li-ic">

                                        <i class="fab fa-linkedin-in white-text"> </i>

                                    </a>

                                </li>

                                <li class="list-inline-item">

                                    <a class="p2 fa-lg ins-ic">

                                        <i class="fab fa-instagram white-text"> </i>

                                    </a>

                                </li>

                            </ul>


                        </div>


                    </div>

                    <!-- Grid column -->


                </div>

                <!-- Grid row -->


            </div>

            <!-- Form with header -->

            <div class="container">

                <!--Section: Not enough-->

                <section>


                    <h2 class="my-5 h3 text-center">Al Bader Brothers Gulf Construction's contact information:</h2>


                    <!--First row-->

                    <div class="row features-small mb-5 mt-3 wow fadeIn">


                        <!--First column-->

                        <div class="col-md-4">

                            <!--First row-->


                            <!--First row-->

                            <div class="row">

                                <div class="col-2">

                                    <i class="fas fa-check-circle fa-2x indigo-text"></i>

                                </div>

                                <div class="col-10">

                                    <h6 class="feature-title"><a href="javascript:;" > UAE Contact Information</a></h6>

                                    <p class="grey-textX small">PO Box No.: 221317, JAFZA<br> Dubai, United Arab Emirates <br>
                                        Telephone: +97149900440<br>
                                        Email: <a href="mailto:uae@abbgc.com">uae@abbgc.com</a>
                                        <br>Web.: <a href="javascript:;" >www.abbgc.com</a></p>

                                    <div style="height:15px"></div>

                                </div>

                            </div>


                            <div class="row">

                                <div class="col-2">

                                    <i class="fas fa-check-circle fa-2x indigo-text"></i>

                                </div>

                                <div class="col-10">

                                    <h6 class="feature-title"><a href="javascript:;" >Oman Contact Information</a></h6>

                                    <p class="grey-textX small">
                                        PO Box No.: 78737, Ghala Industrial Area<br> Muscat, Sultanate of Oman. 
                                        <br>Telephone: +96825323777
                                        <br>Email: <a href="mailto:oman@abbgc.com">oman@abbgc.com</a>
                                        <br>Web.: <a href="javascript:;" >www.abbgc.com</a>
                                    </p>

                                    <div style="height:15px"></div>

                                </div>

                            </div>

                            <!--/First row-->




                            <!--/Fourth row-->

                        </div>

                        <!--/First column-->


                        <!--Second column-->

                        <div class="col-md-4 mt-2">
                            <!--Second row-->

                            <div class="row">

                                <div class="col-2">

                                    <i class="fas fa-check-circle fa-2x indigo-text"></i>

                                </div>

                                <div class="col-10">

                                    <h6 class="feature-title"><a href="javascript:;" >Kuwait Contact Information</a></h6>

                                    <p class="grey-textX small">
                                        PO Box No.: 62412, Al-Ahmadi<br> Kuwait City, State of Kuwait.<br>
                                        Telephone: +96522299980<br>
                                        Mobile: +96566158280, +96565633072
                                        <br>Email: <a href="mailto:kuwait@abbgc.com">kuwait@abbgc.com</a>
                                        <br>Web.: <a href="javascript:;" >www.abbgc.com</a>
                                    </p>

                                    <div style="height:15px"></div>

                                </div>

                            </div>

                            <!--Third column-->
                            <div class="row">

                                <div class="col-2">

                                    <i class="fas fa-check-circle fa-2x indigo-text"></i>

                                </div>

                                <div class="col-10">

                                    <h6 class="feature-title"><a href="javascript:;" >Qatar Contact Information</a></h6>

                                    <p class="grey-textX small">
                                        PO Box No.: 73914, Al-Bidda<br>Doha, State of Qatar.<br>
                                        Telephone: +97488254899
                                        <br>Email: <a href="mailto:qatar@abbgc.com">qatar@abbgc.com</a>
                                        <br>Web.: <a href="javascript:;" >www.abbgc.com</a>
                                    </p>

                                    <div style="height:15px"></div>

                                </div>

                            </div>

                        </div>

                        <!--/Second column-->


                        <div class="col-md-4 mt-2">


                            <!--/First row-->


                            <!--Second row-->

                            <div class="row">

                                <div class="col-2">

                                    <i class="fas fa-check-circle fa-2x indigo-text"></i>

                                </div>

                                <div class="col-10">

                                    <h6 class="feature-title"><a href="javascript:;" >Bahrain Contact Information</a></h6>

                                    <p class="grey-textX small">
                                        PO Box No.: 70411, Al Muḩarraq<br> Manama, Kingdom of Bahrain. <br>
                                        Telephone: +97377009200
                                        <br>Email: <a href="mailto:bahrain@abbgc.com">bahrain@abbgc.com</a>
                                        <br>Web.: <a href="javascript:;" >www.abbgc.com</a>
                                    </p>

                                    <div style="height:15px"></div>

                                </div>

                            </div>

                            <!--/Second row-->


                            <!--Third row-->

                            <div class="row">

                                <div class="col-2">

                                    <i class="fas fa-check-circle fa-2x indigo-text"></i>

                                </div>

                                <div class="col-10">

                                    <h6 class="feature-title"><a href="javascript:;" >KSA Contact Information</a></h6>

                                    <p class="grey-textX small">
                                        PO Box No.: 12410, Al-Olayya<br> Riyadh, Kingdom of Saudi Arabia. <br>
                                        Telephone: +966112700969
                                        <br>Email: <a href="mailto:ksa@abbgc.com">ksa@abbgc.com</a>
                                        <br>Web.: <a href="javascript:;" >www.abbgc.com</a>

                                    </p>

                                    <div style="height:15px"></div>

                                </div>

                            </div>

                            <!--/Third row-->



                        </div>

                        <!--/Third column-->


                    </div>

                    <!--/First row-->


                </section>

            </div>


            <!--Section: Not enough-->




        </section>

        <!-- Section: Contact v.3 -->


    </div>

@endsection