{{-- @include('frontend.layouts.seo_tags', ['pageData' => $data]) --}}

@extends('frontend/layouts/master')
@section('content')
<style>
    .error {
        color: red;
        font-size: 14px;
        padding-left: 10px;
    }

    #success-message {
        color: green;
        font-size: 16px;
        display: none;
    }
</style>
<!-- Page Title -->
<section class="page-title" style="background-image: url('{{ url('frontend/assets/img/images/background/bg-17.jpg') }}');">
    <div class="auto-container">
        <div class="content-box">
            <div class="content-wrapper">
                <div class="title">
                    <h1>Get In Touch</h1>
                </div>
                <ul class="bread-crumb clearfix">
                    <li class="breadcrumb-item"><a href="{{ route('home') }}">Home &nbsp;</a></li>
                    <li class="breadcrumb-item">Contact Us</li>
                </ul>
            </div>
        </div>
    </div>
</section>
<!-- Page Title -->

<div data-elementor-type="wp-page" data-elementor-id="841" class="elementor elementor-841" data-elementor-settings="[]">
    <div class="elementor-inner">
        <div class="elementor-section-wrap">
            <section class="elementor-section elementor-top-section elementor-element elementor-element-84be8d3 elementor-section-full_width elementor-section-height-default elementor-section-height-default" data-id="84be8d3" data-element_type="section">
                <div class="elementor-container elementor-column-gap-default">
                    <div class="elementor-row">
                        <div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-98b9ab0" data-id="98b9ab0" data-element_type="column">
                            <div class="elementor-column-wrap elementor-element-populated">
                                <div class="elementor-widget-wrap">
                                    <div class="elementor-element elementor-element-b48a3b5 elementor-widget elementor-widget-strike_contact_info_v1" data-id="b48a3b5" data-element_type="widget" data-widget_type="strike_contact_info_v1.default">
                                        <div class="elementor-widget-container">

                                            <!-- Contact Details Section -->
                                            <section class="contact-details-section">
                                                <div class="auto-container">
                                                    <div class="sec-title text-center">
                                                        <h2>We’d Love To Help You</h2>
                                                        <div class="text">Please feel free to get in touch using the form below. We'd love to hear your
                                                            <br> thoughts &amp; answer any questions you may have!
                                                        </div>
                                                        <div class="text-decoration">
                                                            <span class="left"></span>
                                                            <span class="right"></span>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-lg-3 contact-info-block">
                                                            <div class="inner-box">
                                                                <div class="icon-box">
                                                                    <div class="icon"><img src="{{ url('frontend/assets/img/2020/05/icon-46.png') }}" alt="Awesome Image"></div>
                                                                    <h5>Location</h5>
                                                                    <h4>Visit us on</h4>
                                                                </div>
                                                                <ul>
                                                                    <li>87 Riverview Rd. 1st Floor
                                                                        Jersey City, NJ 07305</li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-3 contact-info-block">
                                                            <div class="inner-box">
                                                                <div class="icon-box">
                                                                    <div class="icon"><img src="{{ url('frontend/assets/img/2020/05/icon-47.png') }}" alt="Awesome Image"></div>
                                                                    <h5>24/7 service</h5>
                                                                    <h4>Call us on</h4>
                                                                </div>
                                                                <ul>
                                                                    <li><a href="tel:2125972489">212-597-2489</a></li>
                                                                    <li>&nbsp;</li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-3 contact-info-block">
                                                            <div class="inner-box">
                                                                <div class="icon-box">
                                                                    <div class="icon"><img src="{{ url('frontend/assets/img/2020/05/icon-48.png') }}" alt="Awesome Image"></div>
                                                                    <h5>Drop a line</h5>
                                                                    <h4>Mail us @</h4>
                                                                </div>
                                                                <ul>
                                                                    <li><a href="mailto:tax@itaxexperts.com">tax@itaxexperts.com</a></li>
                                                                    <li>&nbsp;</li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-3 contact-info-block">
                                                            <div class="inner-box">
                                                                <div class="icon-box">
                                                                    <div class="icon"><img src="{{ url('frontend/assets/img/2020/05/icon-49.png') }}" alt="Awesome Image"></div>
                                                                    <h5>Off Hours</h5>
                                                                    <h4>Visit between</h4>
                                                                </div>
                                                                <ul>
                                                                    <li>Mon - Friday: 9.00 - 6.00
                                                                        <br> Sunday (Closed)
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </section>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <section class="elementor-section elementor-top-section elementor-element elementor-element-08d26f6 elementor-section-full_width elementor-section-height-default elementor-section-height-default" data-id="08d26f6" data-element_type="section">
                <div class="elementor-container elementor-column-gap-default">
                    <div class="elementor-row">
                        <div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-db36843" data-id="db36843" data-element_type="column">
                            <div class="elementor-column-wrap elementor-element-populated">
                                <div class="elementor-widget-wrap">
                                    <div class="elementor-element elementor-element-a83154f elementor-widget elementor-widget-strike_contact_form_v1" data-id="a83154f" data-element_type="widget" data-widget_type="strike_contact_form_v1.default">
                                        <div class="elementor-widget-container">
                                            <section class="contact-form-section">
                                                <div class="auto-container">
                                                    <div class="row">
                                                        <div class="col-lg-4">
                                                            <div class="live-contact">
                                                                <div class="image"><img src="{{ url('frontend/assets/img/2020/05/image-40.jpg') }}" alt=""></div>
                                                                <div class="content">
                                                                    <div class="icon"><span class="icon flaticon-support-1"></span></div>
                                                                    <h4>Chat with a live</h4>
                                                                    <div class="text">Let’s chat with our live experts to get <br> answer your questions.</div>
                                                                    <div class="link-btn"><a href="	https://wa.me/2125972489" target="_blank" class="theme-btn btn-style-one"><span class="btn-title">Message us on WhatsApp</span></a></div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-8">
                                                            <div class="sec-title">
                                                                <h2>Don’t hesitate <br> to send your message to us</h2>
                                                                <div class="text-decoration">
                                                                    <span class="left"></span>
                                                                    <span class="right"></span>
                                                                </div>
                                                            </div>
                                                            <div class="contact-form">
                                                                <div role="form" class="wpcf7" id="wpcf7-f893-p841-o1" lang="en-US" dir="ltr">
                                                                    <form id="contactForm" class="wpcf7-form init">
                                                                        <div class="row">
                                                                            <div class="col-md-6 form-group">
                                                                                <span class="wpcf7-form-control-wrap text-461"><input type="text" name="name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="First Name" /></span>
                                                                            </div>
                                                                            <div class="col-md-6 form-group">
                                                                                <span class="wpcf7-form-control-wrap text-462"><input type="text" name="last_name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="Last Name" /></span>
                                                                            </div>
                                                                            <div class="col-md-6 form-group">
                                                                                <span class="wpcf7-form-control-wrap email-331"><input type="email" name="email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" placeholder="Email Address" /></span>
                                                                            </div>
                                                                            <div class="col-md-6 form-group">
                                                                                <span class="wpcf7-form-control-wrap text-463"><input type="text" name="phone" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="Phone" /></span>
                                                                            </div>
                                                                            <div class="col-md-12 form-group">
                                                                                <span class="wpcf7-form-control-wrap menu-973"><select name="services" class="wpcf7-form-control wpcf7-select selectpicker" aria-invalid="false">
                                                                                        <option value="corporate">Corporate</option>
                                                                                        <option value="tax-preparation">Tax Preparation</option>
                                                                                        <option value="business-licenses">Business Licenses</option>
                                                                                        <option value="accounting">Accounting</option>
                                                                                        <option value="bookkeeping">Bookkeeping</option>
                                                                                    </select></span>
                                                                            </div>
                                                                            <div class="col-md-12 form-group">
                                                                            <input type="hidden" name="title" value="Contact Us" />
                                                                                <span class="wpcf7-form-control-wrap textarea-572"><textarea name="message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false" placeholder="Message goes here"></textarea></span>
                                                                            </div>
                                                                            <div class="col-md-12 form-group">
                                                                                <div class="row m-0 justify-content-between">
                                                                                    <div class="note mb-30">
                                                                                        <p>*We do not share your information with any third parties.</p>
                                                                                        <p id="success-message"></p>
                                                                                    </div>
                                                                                    <button class="theme-btn btn-style-one mb-30" type="submit" name="submit-form"><span class="btn-title">SEND MESSAGE</span></button>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="wpcf7-response-output" aria-hidden="true"></div>
                                                                    </form>
                                                                    
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </section>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <section class="elementor-section elementor-top-section elementor-element elementor-element-e68e6f3 elementor-section-full_width elementor-section-height-default elementor-section-height-default" data-id="e68e6f3" data-element_type="section">
                <div class="elementor-container elementor-column-gap-default">
                    <div class="elementor-row">
                        <div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b39f8cf" data-id="b39f8cf" data-element_type="column">
                            <div class="elementor-column-wrap elementor-element-populated">
                                <div class="elementor-widget-wrap">
                                    <div class="elementor-element elementor-element-f712134 elementor-widget elementor-widget-strike_google_map_v2" data-id="f712134" data-element_type="widget" data-widget_type="strike_google_map_v2.default">
                                        <div class="elementor-widget-container">
                                            <!-- Map Section -->
                                            <section class="map-section-two">
                                                <!--Map Outer-->
                                                <div class="map-outer">
                                                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3024.7649573755534!2d-74.102386!3d40.7011739!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25172eeb97c0b%3A0x4796f249c3c40229!2s87%20Riverview%20Rd%201st%20Floor%2C%20Jersey%20City%2C%20NJ%2007305%2C%20USA!5e0!3m2!1sen!2s!4v1727557855572!5m2!1sen!2s" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                                                </div>
                                            </section>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>
@endsection
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>
<script>
    $(document).ready(function() {
        $("#contactForm").validate({
            rules: {
                name: {
                    required: true,
                    minlength: 3
                },
                email: {
                    required: true,
                    email: true
                },
                phone: {
                    required: true,
                    digits: true,
                    minlength: 10,
                    maxlength: 15
                },
                message: {
                    required: true
                },
            },
            messages: {
                name: {
                    required: "Name is required",
                    minlength: "Name must be at least 3 characters"
                },
                email: {
                    required: "Email is required",
                    email: "Enter a valid email"
                },
                phone: {
                    required: "Phone number is required",
                    digits: "Only numbers are allowed",
                    minlength: "Phone number must be at least 10 digits",
                    maxlength: "Phone number cannot exceed 15 digits"
                },
                message: {
                    required: "Mssage is required"
                },
            },
            submitHandler: function(form) {
                let submitButton = $("button[type='submit']");
                submitButton.prop("disabled", true).find("span").text("Submitting..."); // Disable button & update text


                $.ajax({
                    url: "https://itaxexperts.com/public/api/contact-us-mail",
                    method: "POST",
                    data: $(form).serialize(),
                    success: function(response) {
                        $("#success-message").text(response.success).show();
                        $("#contactForm")[0].reset();
                        submitButton.prop("disabled", false).find("span").text("Send request"); // Re-enable button
                    },
                    error: function(xhr) {
                        if (xhr.status === 422) {
                            let errors = xhr.responseJSON.errors;
                            $.each(errors, function(key, value) {
                                alert(value[0]); // Display error messages
                            });
                        }
                        submitButton.prop("disabled", false).find("span").text("Send request"); // Re-enable button
                    }
                });
            }
        });
    });
</script>