@extends('reachassuree_web/layouts.main')
@section('title', $data['title'])
@section('description', $data['description'])
@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;
    }

    iframe {
        border-radius: 15px;
        height: 550px;
    }

    @media (max-width: 480px) {
        iframe {
            height: 350px;
        }
    }
</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('rassets/images/subscribe-shape-1.png') }}" alt="Image" class="shape shape-1" data-speed="0.04" data-revert="true">
    <img src="{{ asset('rassets/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">
        <div class="row justify-content-center">
            <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>168 - 3rd Floor, Param Hari, Nr. Gopi Jewelers, B/h Royal Arced, ABC Circle, Sarthana Jakat Naka,Surat. 395006</p>
                    </div>
                </a>
            </div>

            <div class="col-lg-4">
                <div class="single-contact-info">
                    <a href="https://api.whatsapp.com/send?phone=7990038677" target="_blank"><i class="flaticon-phone-call"></i>
                        <h3>Phone Number</h3>
                        <p>+917990038677</p><span></span>
                    </a>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="single-contact-info">
                    <a href="mailto:reachassuree@gmail.com" target="_blank">
                        <p><i class="flaticon-email"></i>
                            <h3>E-mail</h3>reachassuree@gmail.com
                        </p>
                    </a>
                </div>
            </div>

            {{-- <div class="col-lg-3 col-sm-6">
                <a href="https://www.reachassuree.com/" target="_blank">
                    <div class="single-contact-info"><i class="flaticon-placeholder"></i>
                        <h3>website</h3>www.reachassuree.com
                    </div>
                </a>
            </div> --}}
        </div>
    </div>
</section>
<!-- End Contact Info Area -->

<section class="contact-area pt-70">
    <div class="container">
        {{-- <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3719.104158069797!2d72.8986367!3d21.227717899999995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be04f3048489a23%3A0xa4bbdeec44a9ee35!2sVEKARIA%20ASSOCIATES!5e0!3m2!1sen!2sin!4v1711166602108!5m2!1sen!2sin" style="border: 0" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" width="100%"></iframe> --}}
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3719.1043396055293!2d72.8986494!3d21.2277107!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be04f36e5f383bb%3A0xe234fe261bc87b59!2sReach%20Assuree%20Software%20Company!5e0!3m2!1sen!2sin!4v1754023296532!5m2!1sen!2sin" style="border: 0" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" width="100%"></iframe>
    </div>
</section>


<!-- Start Contact Area -->
<section class="contact-area pt-50 pb-70">
    <div class="container">
        <div class="section-title">
            <span class="top-title"></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">
                         <label for="name" class="">Please Enter Your Name<span class="text-danger">*</span> </label>
                        <div class="form-group">
                            {{-- <input type="text" name="name" id="name" class="form-control" required data-error="Please enter your name" placeholder="Name" onkeypress="nameValidation(event)"> --}}
                           <input type="text" name="name" id="name" class="form-control" required 
                            data-error="Please enter your name" placeholder="Name" 
                            onkeydown="validateNameInput(event)" onblur="formatName(this)">
                            <div class="help-block with-errors"></div>
                        </div>
                    </div>

                    <div class="col-lg-6 col-sm-6">
                        <label for="email" class="">Please Enter Your E-mail<span class="text-danger">*</span> </label>
                        <div class="form-group">
                            <input type="email" name="email" id="email" class="form-control" required data-error="Please enter your valid email address" placeholder="E-mail">
                            <div class="help-block with-errors"></div>
                        </div>
                    </div>

                    <div class="col-lg-6 col-sm-6">
                         <label for="phone_number" class="">Please Enter Your Mobile No<span class="text-danger">*</span> </label>
                        <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="Mobile No">
                            <div class="help-block with-errors"></div>
                        </div>
                    </div>

                    <div class="col-lg-6 col-sm-6">
                        <label for="msg_subject" class="">Please Enter Subject</label>
                        <div class="form-group">
                            <input type="text" name="msg_subject" id="msg_subject" class="form-control" placeholder="Subject" >
                            <div class=" help-block with-errors">
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-12">
                        <label for="message" class="">Please Enter Message</label>
                        <div class="form-group">
                            <textarea name="message" class="form-control" id="message" cols="30" rows="6" maxlength="350" placeholder="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('rassets/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>
<script type="text/javascript">
    var ajaxRegistationURL = "{{route('contact.us.save')}}";
</script>
<!-- Links of JS File -->
<script src="{{ asset('rassets/js/jquery.min.js') }}"></script>
<script src="{{ asset('rassets/js/bootstrap.bundle.min.js') }}"></script>
<script src="{{ asset('rassets/js/meanmenu.min.js') }}"></script>
<script src="{{ asset('rassets/js/owl.carousel.min.js') }}"></script>
<script src="{{ asset('rassets/js/carousel-thumbs.min.js') }}"></script>
<script src="{{ asset('rassets/js/aos.min.js') }}"></script>
<script src="{{ asset('rassets/js/appear.min.js') }}"></script>
<script src="{{ asset('rassets/js/odometer.min.js') }}"></script>
<script src="{{ asset('rassets/js/magnific-popup.min.js') }}"></script>
<script src="{{ asset('rassets/js/tween-max.min.js') }}"></script>
<script src="{{ asset('rassets/js/form-validator.min.js') }}"></script>
<script src="{{ asset('rassets/js/contact-us-script.js') }}"></script>
<script src="{{ asset('rassets/js/ajaxchimp.min.js') }}"></script>
<script src="{{ asset('rassets/js/custom.js') }}"></script>
<script src="{{ asset('rassets/libs/parsleyjs/parsley.min.js') }}"></script>
<script>
    $("#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();
        }
    }

    // Prevent space at the beginning and multiple consecutive spaces
    function validateNameInput(event) {
        const input = event.target;
        const key = event.key;
        
        // Prevent space at the beginning
        if (key === ' ' && (input.value.length === 0 || input.selectionStart === 0)) {
            event.preventDefault();
            return;
        }
        
        // Prevent consecutive spaces
        if (key === ' ' && input.value.endsWith(' ')) {
            event.preventDefault();
            return;
        }
    }

    // Format name to ensure proper spacing and capitalization
    function formatName(input) {
        let name = input.value.trim();
        
        if (name.length === 0) return;
        
        // Ensure only single spaces between words
        name = name.replace(/\s+/g, ' ');
        
        // Capitalize each word
        // name = name.toLowerCase()
        //     .split(' ')
        //     .map(word => word.charAt(0).toUpperCase() + word.slice(1))
        //     .join(' ');
            
        // input.value = name;
    }

</script>

@endsection