@extends('frontend.layout.master')
@section('content')
<div class="container">
    <div class="breadcrumb-wrapper">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">


                <li class="breadcrumb-item"><a href="{{route('home')}}.">Home</a></li>





                <li class="breadcrumb-item active" aria-current="page">contact us</li>


            </ol>
        </nav>
    </div>
</div>

<section class="contact-us section-gap aos-init" data-aos="fade-up" data-aos-offset="200" data-aos-easing="ease-in-sine" data-aos-duration="700">
    <div class="container">

        <div class="contact">
            <div class="row">
                <div class="col-md-7">
                    <div class="headingArea">
                        <div class="h2">Our Contact Details</div>
                    </div>
                    <ul class="my-ul">
                        <li class="my-li">
                            <i class="las la-phone"></i>
                            <section class="my-text">
                                <div class="phone">Phone No :</div>
                                <div class="phone-1">{{$contact_info->phone_code ??''}} {{$contact_info->contact_no ??''}}</div>
                            </section>
                        </li>
                        <li class="my-li">
                            <i class="las la-envelope"></i>
                            <section class="my-text">
                                <div class="phone">Email Address :</div>
                                <div class="phone-1">Email: {{$contact_info->email??''}}</div>
                            </section>
                        </li>
                        <li class="my-li">
                            <i class="las la-globe-americas"></i>
                            <section class="my-text">
                                <div class="phone">Address :</div>
                                <div class="phone-1">{{$contact_info->address??''}}</div>
                            </section>
                        </li>
                    </ul>
                </div>
{{--                <div id="cover-spin" ></div>--}}
                <div class="col-md-5">
                    <div class="headingArea">
                        <div class="h2">get in touch</div>
                    </div>
                        <div class="contact-form">
                            <form class="my-form" action="{{route('save_contact')}}" method="post" id="contact_form">
                                @csrf
                                <div class="form-group">
                                    <input type="text" name="name" class="form-control" placeholder="Name" id="name">
                                    <span class="text-danger error-text name_error"></span>
                                </div>
                                <span class="display-error"></span>
                                <div class="form-group">
                                    <input type="text" name="email" class="form-control" placeholder="Email Id" id="email">
                                    <span class="text-danger error-text email_error"></span>
                                </div>
                                <div class="form-group">
                                    <input type="text" name="phone" class="form-control" placeholder="Phone Number" id="phone">
                                    <span class="text-danger error-text phone_error"></span>
                                </div>
{{--                                <div class="col-sm-12">--}}
                                    <div class="form-group">
                                        <input type="text"  name="comapany" id="company" class="form-control" placeholder="Company">
                                        <span class="text-danger error-text name_error"></span>
                                    </div>
{{--                                </div>--}}
                                <div class="form-group">
                                <textarea class="form-control msg" name="comment" placeholder="Write Your  comment" rows="4"
                                          id="experience"></textarea>
                                    <span class="text-danger error-text comment_error"></span>
                                </div>
                                <div class="buttons">
                                    <button type="submit" id="Form_Submit" class="btn btn-submit">Submit <span><i data-feather="chevrons-right"></i></span></button>
                                </div>
                            </form>
                        </div>
                </div>
            </div>
        </div>
    </div>
</section>

@if($isHide == 1)
<section class="map">
{{--    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3105.6239751778967!2d-76.99801838529042!3d38.886844155172426!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89b7b831784fd8af%3A0xbffa5c4369ea62c!2s212%207th%20St%20SE%2C%20Washington%2C%20DC%2020003%2C%20USA!5e0!3m2!1sen!2sin!4v1620217296080!5m2!1sen!2sin" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy">--}}
{{--    </iframe>--}}

    <iframe src='https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q= {{ str_replace(",", "", str_replace(" ", "+", $contact_info->address??"")) }} &z=17&output=embed'  width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy">
    </iframe>
</section>
@endif
<!-- location map end -->
    <script src="{{ url('/') }}/admin/plugins/jquery/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/10.5.1/sweetalert2.min.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/10.5.1/sweetalert2.all.min.js"></script>
    @push('scripts')
<script type="text/javascript">
       // $('#cover-spin').hide()
        $(function () {
            $("input[name='phone']").on('input', function(e) {
                $(this).val($(this).val().replace(/[^0-9]/g, ''));
            });


            $('#contact_form').on('submit', function (e) {
                $(".btn-submit").prepend('<i class="fa fa-spinner fa-spin"></i>');
                $(".btn-submit").attr("disabled", 'disabled');

                e.preventDefault();
                //$('#cover-spin').show()
                $.ajax({
                    url: $(this).attr('action'),
                    method: $(this).attr('method'),
                    data: new FormData(this),
                    processData: false,
                    dataType: 'json',
                    contentType: false,
                    beforeSend: function () {
                        $(document).find('span.error-text').text('');
                    },
                    success: function (data) {
                        if (data.status == 0) {
                            //$('#cover-spin').hide()
                            $.each(data.error, function (key, value) {
                                $('span.' + key + '_error').text(value[0]);
                            });
                        } else {
                            $('#contact_form')[0].reset();
                            //$('#cover-spin').hide()
                            toastr.success('Contact Send successfully')
                            // Swal.fire(
                            //     {
                            //         position: 'center',
                            //         icon: 'success',
                            //         title: 'Successfully sent your request',
                            //         confirmButtonText: 'ok',
                            //         width: '500px',
                            //         height:'100px'
                            //     }
                            // )


                        }
                        $(".btn-submit").find(".fa-spinner").remove();
                        $(".btn-submit").removeAttr("disabled");
                    }
                });

            });
        });
    </script>
    @endpush
    @endsection