@extends('reachassuree_agent_web/theme-1/layouts.main')
@section('title', $data['title'])
@section('content')

<!-- Start Page Title Area -->
<div class="page-title-area">
    <div class="container">
        <div class="page-title-content">
            <h2>Contact Us</h2>
            <ul>
                <li><a href="{{ route('home.page') }}">Home</a></li>
                <li class="active">Contact Us</li>
            </ul>
        </div>
    </div>

    <img src="{{ asset('assets-theme1/images/subscribe-shape-1.png') }}" alt="Image" class="shape shape-1" data-speed="0.04" data-revert="true">
    <img src="{{ asset('assets-theme1/images/subscribe-shape-2.png') }}" alt="Image" class="shape shape-2" data-speed="0.04" data-revert="true">
</div>
<!-- End Page Title Area -->

<!-- Start Contact Info Area -->
<section class="contact-info-area pt-70">
    <div class="container">
        <p class="heading text-center">FOR INSURANCE & FINANCIAL PLANNINGS</p>
        <div class="row justify-content-center mb-4">
            <div class="col-lg-4">
                @php
                    $address = agentDetails(2);
                @endphp
              
                @if(count($address) > 0 && !empty($address['address']))
                    <a href="https://maps.google.com/maps?q={{ $address['lat'] }},{{ $address['long'] }}" target="_blank">
                        <div class="single-contact-info">
                            <i class="flaticon-placeholder"></i>
                            <h3>Our Location</h3>
                            <p>{{$address['address']}}</p>
                        </div>
                    </a>
                @else
                    <a href="javascript:void(0);">
                        <div class="single-contact-info">
                            <i class="flaticon-placeholder"></i>
                            <h3>Our Location</h3>
                            <p>{{$address['address']}}</p>
                        </div>
                    </a>
                @endif
            </div>

            <div class="col-lg-4">
                <div class="single-contact-info">
                    @if(agentDetails(1) != '')
                        <a href="https://api.whatsapp.com/send?phone={{agentDetails(1)}}" target="_blank">
                            <i class="flaticon-phone-call"></i>
                            <h3>Phone Number</h3>
                            <p>{{agentDetails(1)}}</p>
                        </a>
                    @else
                        <a href="javascript:void(0);">
                            <i class="flaticon-phone-call"></i>
                            <h3>Phone Number</h3>
                            <p>{{agentDetails(1)}}</p>
                        </a>
                    @endif
                </div>
            </div>

            <div class="col-lg-4">
                <div class="single-contact-info">
                    @if(agentDetails(7) != '')
                        <a href="mailto:{{agentDetails(7)}}" target="_blank">                    
                            <i class="flaticon-email"></i>
                            <h3>E-mail</h3>
                            <p>{{agentDetails(7)}}</p>
                        </a>
                    @else
                        <a href="javascript:void(0);">                    
                            <i class="flaticon-email"></i>
                            <h3>E-mail</h3>
                            <p>{{agentDetails(7)}}</p>
                        </a>
                    @endif
                </div>
            </div>

            {{-- <div class="col-lg-3 col-sm-6">
                <a href="" target="_blank">
                    <div class="single-contact-info">
                        <i class="dripicons-web"></i>
                        <h3>Website</h3>{{$data['agent_url']}}
                    </div>
                </a>
            </div> --}}
        </div>

        @if(isset($data['WorkArea']))
            <p class="heading">Work Area</p>
            <div class="row">
                @foreach($data['WorkArea'] as $key => $value)
                    <div class="col-lg-3 col-sm-6 mb-4">
                        <div class="single-contact-info">
                            <h6 class="content">{{$value}}</h6>
                        </div>
                    </div>
                @endforeach
            </div>
        @endif
    </div>

    <section class="contact-area pt-70 pb-70">
        <div class="container">
            <div class="section-title">
                <span class="top-title">GET IN TOUCH</span>
                <h3>Let’s Connect to us Please fill this Form</h3>
            </div>

            <div class="contact-form">
                <form id="contactUs">
                    @csrf
                    <div class="row">
                        <div class="col-lg-6 col-sm-6">
                            <div class="form-group">
                                <input type="text" name="name" id="name" class="form-control" required data-error="Please enter your name" placeholder="Your Name" onkeypress="nameValidation(event)">
                                <div class="help-block with-errors"></div>
                            </div>
                        </div>

                        <div class="col-lg-6 col-sm-6">
                            <div class="form-group">
                                <input type="email" name="email" id="email" class="form-control" required data-error="Please enter your email" onkeypress="emailvalidation(event)" placeholder=" Your E-mail">
                                <div class="help-block with-errors"></div>
                            </div>
                        </div>

                        <div class="col-lg-6 col-sm-6">
                            <div class="form-group">
                                <input type="text" name="phone_number" id="phone_number" maxlength="10" required data-error="Please enter your number" onkeypress="isNumber(event)" class="form-control" placeholder="Your Mobile No">
                                <div class="help-block with-errors"></div>
                            </div>
                        </div>

                        <div class="col-lg-6 col-sm-6">
                            <div class="form-group">
                                <input type="text" name="msg_subject" id="msg_subject" class="form-control" required data-error="Please enter your subject" placeholder="Subject">
                                <div class="help-block with-errors"></div>
                            </div>
                        </div>

                        <div class="col-lg-12">
                            <div class="form-group">
                                <textarea name="message" class="form-control" id="message" cols="30" rows="6" maxlength="350" required data-error="Write your message" placeholder="Your Message"></textarea>
                                <div class="help-block with-errors"></div>
                            </div>
                        </div>

                        <div class="col-12">
                            <div class="form-check">
                                <div class="form-group">
                                    <div class="form-check">
                                        <input name="gridCheck" value="I agree to the terms and privacy policy." class="form-check-input" type="checkbox" id="gridCheck" required>
                                        <label class="form-check-label" for="gridCheck">I agree to the <a href="{{route('legal.pages')}}">Terms & conditions</a></label>
                                        <div class="help-block with-errors gridCheck-error"></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-12 text-center">
                            <button type="submit" class="contactUsSendBtn default-btn" id="btnContactUs"><i class="ri-arrow-right-s-line"></i>Send</button>
                            <div id="msgSubmit" class="h3 text-center hidden"></div>
                            <div class="clearfix"></div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </section>

    <div class="modal fade" id="modalSuccessMsg" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="modalSuccessMsgLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content text-center">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalmodalSuccessMsgLabel"></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="model-details">
                    <div class="review-icon" style="margin-right: 10px;"><img src="{{ asset('assets-theme1/images/register.svg')}}" alt="Review Icon"></div>
                    <div class="subHeading">Thank You For Showing Interest In Working With Us!</div>
                    <div class="subHeading0">Your Details Have Been Submitted And We Will Contact You Shortly.</div>
                </div>
            </div>
        </div>
    </div>
</section>
 <!-- End Contact Info Area -->

 @endsection

 @section('custom-scripts')
<!-- Links of JS File -->
<script src="{{ asset('assets-theme1/js/contact-us-script.js') }}"></script>
<script src="{{ asset('assets-theme1/libs/parsleyjs/parsley.min.js') }}"></script>

<script>
    var ajaxContactus = "{{route('contactus.save')}}";
    $("#tab_contact_us").addClass("hightlight-tab");

    // input only numerics validation
    function isNumber(event) {
        var ch = String.fromCharCode(event.which);
        if ((!/[0-9]/.test(ch))) {
            event.preventDefault();
        }
    }
</script>
@endsection