<div class="modal fade" id="whatsapp" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <span class="modal-title">Message on WhatsApp</span>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form method="post" target="_blank" id="whatsapp_form">
                    <span class="text-danger wht_error_message"></span>
                    <span class="text-success wht_success_message"></span>
                    <div class="row">
                        <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                            <div class="form-group">
                                <input class="form-control" type="text" name="name" onkeyup="validateOnlyTextField(this)" placeholder="Full Name*" value="" minlength="1" maxlength="50" required>
                            </div>
                        </div>
                        <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                     
                            <div class="form-group">
                            <input type="hidden" class="countryName countryName" name="countryName" value="">
                            <input type="hidden" name="code" class="code" value="">
                            <input class="form-control" type="tel" name="mobile" placeholder="Mobile Number*" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" minlength="10" maxlength="10" required="" autocomplete="off">
                            </div>
                        </div>
                        <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                            <button type="submit" class="read_more_1 bg_btn_1">Submit </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <span class="modal-title">Quick Enquiry</span>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="quick_enquiry" method="post">
                    <span class="text-danger cat_error_message"></span>
                    <span class="text-success cat_success_message"></span>
                    <div class="form-group">
                        <input class="form-control" type="text" name="name" onkeyup="validateOnlyTextField(this)" placeholder="Full Name*" value="" minlength="1" maxlength="50" required>
                    </div>

                    <div class="form-group">
                        <input class="form-control" type="text" name="email" value="" placeholder="Email ID*" required>
                    </div>
              
                    <div class="form-group">
                    <input type="hidden" class="countryName countryName" name="countryName" value="">
                    <input type="hidden" name="code" class="code" value="">
                    <input class="form-control" type="tel" name="mobile" placeholder="Mobile Number*" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" minlength="10" maxlength="10" required="" autocomplete="off">
                    </div>

                    <div class="form-group">
                        <input class="form-control" type="text" name="location" value="" placeholder="Your Location*" required>
                    </div>

                    <div class="form-group">
                        <textarea class="form-control" name="message" id="message2" placeholder="Your Message*" required></textarea>
                    </div>

                    <div class="form-group" style="margin-bottom: 0;">
                        <div class="g-recaptcha" data-sitekey="<?= SITE_KEY; ?>"></div>
                    </div>

                    <button type="submit" class="read_more_1 bg_btn_1">Submit </button>
                </form>
            </div>
        </div>
    </div>
</div>


<!-- Product Popup -->
<div class="modal fade" id="productID" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <span class="modal-title">Send Enquiry</span>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-xxl-7 col-xl-7 col-lg-7 col-md-7 col-sm-7 col-12">
                        <div class="product_popup">
                            <div class="product_popup_image">
                                <img class="catImg" src="<?= site_url; ?>/designer/images/image1.jpg" alt="<?= $web_details['companyName']; ?>" title="<?= $web_details['companyName']; ?>">
                            </div>
                            <span class="pop_heading">Category Heading One</span>
                        </div>
                    </div>
                    <div class="col-xxl-5 col-xl-5 col-lg-5 col-md-5 col-sm-5 col-12">

                        <form id="product_pop_form" method="post">
                            <span class="text-danger pro_error_message"></span>
                            <span class="text-success pro_success_message"></span>
                            <div class="form-group">
                                <input class="form-control" type="text" name="name" onkeyup="validateOnlyTextField(this)" placeholder="Full Name*" value="" pattern="[a-z A-Z]+" minlength="1" maxlength="50" required>
                            </div>

                            <div class="form-group">
                                <input class="form-control" type="email" name="email" placeholder=" Email ID*" value="" required>
                            </div>
                          
                            <div class="form-group">
                            <input type="hidden" name="countryName" class="countryName" value="">
                                    <input type="hidden" name="code" class="code" value="">
                                <input class="form-control" type="tel" name="mobile" placeholder=" Phone No*" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" minlength="10" maxlength="10" value="" required>
                            </div>

                            <div class="form-group">
                                <input class="form-control" type="text" name="location" placeholder="Location*" value="" pattern="[a-z A-Z]+" autocomplete="off" required>
                            </div>
                            <div class="form-group">
                                <textarea class="form-control" name="message" id="message" placeholder=" Message*" required></textarea>
                            </div>

                            <div class="form-group" style="margin-bottom: 0;">
                                <div class="g-recaptcha" data-sitekey="<?= SITE_KEY; ?>"></div>
                            </div>

                            <div class="form-group">
                                <button type="submit" class="read_more_1 bg_btn_1">Submit </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="callback" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <span class="modal-title">Get Callback Quickly</span>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-xxl-5 col-xl-5 col-lg-5 col-md-5 col-sm-5 col-12">
                        <div class="product_popup">
                            <div class="product_cat_image">
                                <img src="<?= site_url; ?>/designer/images/image4.jpg" alt="<?= $web_details['companyName']; ?>" title="<?= $web_details['companyName']; ?>">
                            </div>
                            <span class="catHeading">Category Heading One</span>
                        </div>
                    </div>
                    <div class="col-xxl-7 col-xl-7 col-lg-7 col-md-7 col-sm-7 col-12">

                        <form id="callback_form" method="post">
                            <span class="text-danger call_error_message"></span>
                            <span class="text-success call_success_message"></span>
                            <div class="form-group">
                                <input class="form-control" type="text" name="name" onkeyup="validateOnlyTextField(this)" placeholder="Full Name*" value="" pattern="[a-z A-Z]+" minlength="1" maxlength="50" required>
                            </div>
                          
                            <div class="form-group">
                            <input type="hidden" class="countryName countryName" name="countryName" value="">
                            <input type="hidden" name="code" class="code" value="">
                                <input class="form-control" type="tel" name="mobile" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" minlength="10" maxlength="10" placeholder=" Phone No*" value="" required>
                            </div>
                            <p>We will contact you on this number</p>

                            <div class="form-group">
                                <button type="submit" class="read_more_1 bg_btn_1">Submit </button>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
document.querySelector("form").addEventListener("submit", function(e) {
    var message = document.getElementById("message").value;
    // Allow letters, numbers, spaces, and basic punctuation
    var pattern = /^[a-zA-Z0-9\s.,!?'"()-]*$/;

    if (!pattern.test(message)) {
        alert("Message contains invalid characters. Please avoid special characters like @, #, $, %, ^, etc.");
        e.preventDefault(); // Stop form submission
    }
});
</script>

<script>
document.getElementById("message").addEventListener("input", function() {
    this.value = this.value.replace(/[^a-zA-Z0-9\s.,!?'"()-]/g, '');
});
</script>
