@extends('layout.app')

@section('content')
    <!-- Breadcrumb Begin -->
    <div class="breadcrumb-option set-bg" data-setbg="img/breadcrumb-bg.jpg">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <div class="breadcrumb__text">
                        <h2>Contact us</h2>
                        <div class="breadcrumb__links">
                            <a href="#">Home</a>
                            <span>Conact us</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Breadcrumb End -->

    <!-- Contact Section Begin -->
    <div class="contact spad">

        <div class="container">
            <!--        <div class="row">-->
            <!--            <div class="col-lg-12">-->
            <!--                <div class="contact__map">-->
            <!--<iframe src="https://maps.google.com/maps?q=44288%20FREMONT%20BLVD.%20FREMONT%2C%20CA%2094538-6000&t=&z=13&ie=UTF8&iwloc=&output=embed" width="100%" height="380" frameborder="0" style="border:0" allowfullscreen></iframe>-->
            <!--                </div>-->
            <!--            </div>-->
            <!--        </div>-->
            <div class="row">
                <div class="col-lg-6 col-md-6">
                    <div class="contact__widget">
                        <div class="contact__widget__item">
                            <div class="contact__widget__item__icon">
                                <span class="icon_pin_alt"></span>
                            </div>
                            <div class="contact__widget__item__text">
                                <h4>Address</h4>
                                <p>1255 Treat Blvd., Suite 300, Walnut Creek, CA, 94597</p>
                                <p>6400 Village Pkwy Dublin, CA 94568-3007</p>
                            </div>
                        </div>
                        <div class="contact__widget__item">
                            <div class="contact__widget__item__icon">
                                <span class="icon_headphones"></span>
                            </div>
                            <div class="contact__widget__item__text">
                                <h4>Phone</h4>
                                <p>(866) 324-3460</p>
                                <p>(925) 488-0045</p>
                                <p>(925) 215-0750</p>
                            </div>
                        </div>
                        <div class="contact__widget__item">
                            <div class="contact__widget__item__icon">
                                <span class="icon_mail_alt"></span>
                            </div>
                            <div class="contact__widget__item__text">
                                <h4>Support</h4>
                                <p>sales@googoz.com</p>
                                <p>ahmad@googoz.com</p>
                                <p>waiz@googoz.com</p>
                                <p>freddy@googoz.com</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6">
                    <div class="contact__form">

                        <form class="form" id="contact-form">
                            <input type="text" name="name" class="name" id="name" placeholder="Name" required>
                            <input type="email" class="email" name="email" id="email" placeholder="Email" required>
                            <textarea class="msg" name="msg" id="msg" placeholder="Comment" required></textarea>

                            <div class="form-group">
                                <label for="message">Enter Securtiy Code</label>
                                <input type="text" name="security_code" required class="security_code">
                            </div>

                            <div class="form-group">
                                <img style="height:60px; width:140px"
                                    src="{{ route('captcha.get') }}?rand=920730691" id='captcha'>
                                <br>
                                <label class="mb-0"><br>Need another security code? <a
                                        style="color: blue !important; text-decoration:underline;" href="javascript:void(0)"
                                        id="reloadCaptcha">Click Here</a></label>
                            </div>

                            <div class="my-3">
                                <ul id="saveform_errList" class="no-bullets"></ul>
                                <div id="success_message"></div>
                            </div>
                            <div class="loading-wrapper w-100">
                                <button type="submit" class="contact-frm site-btn" id="contact_btn">Send
                                    Messages</button>
                            </div>

                        </form>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Contact Section End -->
@endsection
@section('scripts')
    <script>
        $(document).ready(function() {



            setTimeout(function() {
                $('#success-alert, #error-alert').remove();
            }, 5000);

            // Captcha reload functionality
            $('#reloadCaptcha').on('click', function() {
                reloadCaptcha();
            });

            function reloadCaptcha() {

                var $captchaImg = $('#captcha');
                var captchaImage = $captchaImg.attr('src');
                captchaImage = captchaImage.substring(0, captchaImage.lastIndexOf("?"));
                captchaImage = captchaImage + "?rand=" + Math.random() * 1000;
                $captchaImg.attr('src', captchaImage);
            }




            $(document).on('submit', '#contact-form', function(e) {

                e.preventDefault();

                $btn = $('#contact_btn');

                $btn.addClass("loading").prop("disabled", true); // Add loading class

                // Collecting data in a object for sending via AJAX

                var data = {
                    'name': $('.name').val(),
                    'email': $('.email').val(),
                    'message': $('.msg').val(),
                    'security_code': $('.security_code').val()
                }


                //AJAX Setup

                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });

                //Intialize AJAX Requests

                $.ajax({
                    type: "POST",
                    url: "contact_form",
                    data: data,
                    dataType: "json",
                    success: function(response) {



                        reloadCaptcha();
                        $btn.removeClass("loading").prop("disabled", false);


                        if (response.status == 400) {

                            $('#contact_btn').attr('disabled', false);
                            $('#saveform_errList').html("");

                            if (Array.isArray(response.msg)) {
                                $.each(response.msg, function(key, err_values) {

                                    $('#saveform_errList').append(
                                        '<li class="alert alert-red">' +
                                        err_values + '</li>'
                                    );
                                });
                            } else {

                                $('#saveform_errList').append(
                                    '<li class="alert alert-red">' + response.msg +
                                    '</li>'
                                );
                            }
                            setTimeout(function() {
                                $('#saveform_errList').fadeOut("slow");
                            }, 10000);

                        } else {
                            $('#contact_btn').attr('disabled', false);
                            $('#saveform_errList').html("");
                            $('#success_message').html("");
                            $('#success_message').addClass('alert alert-success');
                            $('#success_message').text(response.msg);
                            setTimeout(function() {
                                $('#success_message').fadeOut("slow");
                            }, 5000);
                            $('input[type="text"],textarea').val('');
                            $('input[type="email"]').val('');
                        } //else end
                    } // success end

                });

            })

        })
    </script>
@endsection