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

<style>
    .model-details {
        padding: 10px;
    }

    .subHeading {
        -webkit-text-stroke: 1px transparent;
        font-family: Poppins;
        font-weight: 500;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.5;
        letter-spacing: normal;
        text-align: center;
        color: #264a9f;
    }

    h6.content {
        position: relative;
        margin-bottom: 5px;
    }

    p.heading {
        font-weight: 700;
        font-size: 22px;
        margin-bottom: 10px;
        color: #264a9f;
        text-transform: uppercase;
    }

    .single-contact-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
</style>

<!-- 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-theme2/images/subscribe-shape-1.png') }}" alt="Image" class="shape shape-1" data-speed="0.04" data-revert="true">
    <img src="{{ asset('assets-theme2/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">
                <a href="https://maps.google.com/maps?q=21.1595035%2C72.8135909&z=17&hl=en" target="_blank">
                    <div class="single-contact-info">
                        <i class="flaticon-placeholder"></i>
                        <h3>Our Location</h3>
                        <p>{{$data['agent_details']->address1}}</p>
                    </div>
                </a>
            </div>

            <div class="col-lg-4">
                <div class="single-contact-info">
                    <a href="https://api.whatsapp.com/send?phone={{$data['agent_details']->mobile_number}}" target="_blank"><i class="flaticon-phone-call"></i>
                        <h3>Phone Number</h3>
                        <p>{{$data['user']->mobile}}</p><span></span>
                    </a>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="single-contact-info">
                    <a href="mailto:{{$data['agent_details']->email}}" target="_blank">
                        <p><i class="flaticon-email"></i>
                            <h3>E-mail</h3>{{$data['user']->email}}
                        </p>
                    </a>
                </div>
            </div>

            {{-- <div class="col-lg-3 col-sm-6">
                <a href="" target="_blank">
                    <div class="single-contact-info"><i class="flaticon-placeholder"></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 mt-4">
                        <div class="single-contact-info">
                            <h6 class="content">{{$value}}</h6>
                        </div>
                    </div>
                @endforeach
            </div>
        @endif
    </div>

    <!-- End Contact Info Area -->

    <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-theme2/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>

@endsection

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

<script type="text/javascript">
    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