<div class="modal fade" id="whatsapp" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title title3">Message on WhatsApp</div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form method="post" target="_blank" id="contact_id">
                    <div id="whatsapp_response"></div>
                    <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="wmname" id="wmname" onkeyup="validateOnlyTextField(this)" placeholder="Full Name*" value="" 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 class="form-control"  type="tel" name="wmobile" id="wmobile" value="" onkeypress="return isNumberKey(event)" maxlength="10" minlength="10" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')" placeholder="Mobile Number*" required>
                            </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 btn-style-one" name="whatsEnq" id="whatsEnq">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">
                <div class="modal-title title3">Quick Enquiry</div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="enq_pop_form" method="post">
                    <div id="enq_pop_up"></div>
                  
                    <div class="form-group">
                        <input class="form-control" type="text" name="name" onkeyup="validateOnlyTextField(this)" placeholder="Full Name*" value="" required>
                    </div>

                    <div class="form-group">
                        <input class="form-control" type="email" name="email" value="" placeholder="Email ID*" required>
                    </div>

                    <div class="form-group">
                  
                            <input class="form-control"  type="tel" name="mobile" value="" placeholder="Mobile Number*" onkeypress="return isNumberKey(event)" maxlength="10" minlength="10" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')" required>
                    </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" 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 btn-style-one" name="submit_enq">Submit</button>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="productID" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title title3">Send Enquiry</div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></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="designer/images/image1.jpg" alt="Category Heading One"  title="Category Heading One">
                            </div>
                            <div class="catName title3">Category Heading One</div>
                        </div>
                    </div>
                    <div class="col-xxl-5 col-xl-5 col-lg-5 col-md-5 col-sm-5 col-12">

                        <form name="contact-form" method="post" id="product_pop_form">
                            <div id="cat_pop_up"></div>
                      
                            <div class="form-group">
                                <input class="form-control" type="text" name="name" placeholder="Full Name*" onkeyup="validateOnlyTextField(this)" value="" pattern="[a-z A-Z]+" 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 class="form-control"  type="tel" name="mobile" placeholder=" Phone No*" value="" onkeypress="return isNumberKey(event)" maxlength="10" minlength="10" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')" 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" 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 btn-style-one" name="submit_cat_popup">Submit</button>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="callback">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title title3">Get Callback Quickly</div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></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_popup_image">
                                <img class="catImg" src="designer/images/image4.jpg" alt="Product" title="Product">
                            </div>
                            <div class="catName title3">Product Heading One</div>
                        </div>
                    </div>
                    <div class="col-xxl-7 col-xl-7 col-lg-7 col-md-7 col-sm-7 col-12">

                        <form name="contact-form" method="post" id="callback_form">
                            <div id="cpop_up"></div>
                           
                            <div class="form-group">
                                <input class="form-control" type="text" name="name" onkeyup="validateOnlyTextField(this)" placeholder="Full Name*" value="" pattern="[a-z A-Z]+" required>
                            </div>


                            <div class="form-group">
                          
                            <input class="form-control"  type="tel" name="mobile" placeholder=" Phone No*" value="" onkeypress="return isNumberKey(event)" maxlength="10" minlength="10" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')" required>
                            </div>
                            <p>We will contact you on this number</p>

                            <div class="form-group">
                                <button type="submit" class="read_more btn-style-one" name="submit_callback">Submit</button>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.1/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/default-passive-events"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.js"></script>
<script src="<?= site_url; ?>/designer/js/lozad.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.9.0/jquery.validate.min.js"></script>
<!-- <script src="<?= site_url; ?>/designer/js/themes.js"></script> -->
<script>
    $(function() {
        $("#contact_form").validate({
            rules: {
                name: "required",
                message: {
                    required: true,

                },
                location: {
                    required: true,

                },
                email: {
                    required: true,

                },
                mobile: {
                    required: true,
                    number: true,
                    minlength: 10,
                    maxlength: 10,
                }
            },
            messages: {
                name: "Please enter your name",
                message: {
                    required: "Please enter your message",

                },

                email: {
                    required: "Please enter your email address"
                },
                location: {
                    required: "Please Enter Your Location",

                },
                mobile: {
                    required: "Please enter your mobile no.",
                    number: "Mobile No. contains only numbers",
                    minlength: "Your Mobile No. must be at least 10 digits long",
                    maxlength: "Your Mobile No. must be at least 10 digits long",
                }
            },
            submitHandler: function(form) {
                $.ajax({
                    url: '<?= site_url; ?>/contact.php',
                    type: 'POST',
                    data: $('#contact_form').serialize(),
                    dataType: 'json',
                    success: function(response) {
                        if (response.status == true) {
                            $('#pop_up').text(response.message_response).css('color',
                                'green');
                            $('#contact_form')[0].reset();
                            grecaptcha.reset();

                        } else {
                            $('#pop_up').text(response.message_response).css('color',
                                'red');

                        }
                    }
                });

            }
        });



        $("#enq_pop_form").validate({
            rules: {
                name: "required",
                message: {
                    required: true,

                },
                location: {
                    required: true,

                },
                email: {
                    required: true,

                },
                mobile: {
                    required: true,
                    number: true,
                    minlength: 10,
                    maxlength: 10,
                }
            },
            messages: {
                name: "Please enter your name",
                message: {
                    required: "Please enter your message",

                },

                email: {
                    required: "Please enter your email address"
                },
                location: {
                    required: "Please Enter Your Location",

                },
                mobile: {
                    required: "Please enter your mobile no.",
                    number: "Mobile No. contains only numbers",
                    minlength: "Your Mobile No. must be at least 10 digits long",
                    maxlength: "Your Mobile No. must be at least 10 digits long",
                }
            },
            submitHandler: function(form) {
                $.ajax({
                    url: '<?= site_url; ?>/enquiry_popup.php',
                    type: 'POST',
                    data: $('#enq_pop_form').serialize(),
                    dataType: 'json',
                    success: function(response) {
                        if (response.status == true) {
                            $('#enq_pop_up').text(response.message_response).css('color',
                                'green');
                            $('#enq_pop_form')[0].reset();
                            grecaptcha.reset();

                        } else {
                            $('#enq_pop_up').text(response.message_response).css('color',
                                'red');

                        }
                    }
                });

            }
        });


        $("#product_pop_form").validate({
            rules: {
                name: "required",
                message: {
                    required: true,

                },
                location: {
                    required: true,

                },
                email: {
                    required: true,

                },
                mobile: {
                    required: true,
                    number: true,
                    minlength: 10,
                    maxlength: 10,
                }
            },
            messages: {
                name: "Please enter your name",
                message: {
                    required: "Please enter your message",

                },

                email: {
                    required: "Please enter your email address"
                },
                location: {
                    required: "Please Enter Your Location",

                },
                mobile: {
                    required: "Please enter your mobile no.",
                    number: "Mobile No. contains only numbers",
                    minlength: "Your Mobile No. must be at least 10 digits long",
                    maxlength: "Your Mobile No. must be at least 10 digits long",
                }
            },
            submitHandler: function(form) {
                $.ajax({
                    url: '<?= site_url; ?>/enquirycat_popup.php',
                    type: 'POST',
                    data: $('#product_pop_form').serialize(),
                    dataType: 'json',
                    success: function(response) {
                        if (response.status == true) {
                            $('#cat_pop_up').text(response.message_response).css('color',
                                'green');
                            $('#product_pop_form')[0].reset();
                            grecaptcha.reset();

                        } else {
                            $('#cat_pop_up').text(response.message_response).css('color',
                                'red');

                        }
                    }
                });

            }
        });

        $('#whatsEnq').click(function(e) {


            e.preventDefault();
            var wname = $('#wmname').val();
            var wmobile = $('#wmobile').val();
            $.ajax({
                url: "<?= site_url; ?>/whatsapp_enq.php",
                data: $('#contact_id').serialize(),
                type: "POST",
                success: function(data) {

                    if (data.trim() == 'success') {

                        $('#whatsapp_response').html('<div class="alert alert-success">Whatsapp Enquiry Submitted successfully</div>');
                        $('#whatsappEnq').trigger('reset');

                        window.open("https://api.whatsapp.com/send?phone=919810031296&text=&source=&data=&app_absent=", "_blank");

                    } else {

                        $('#whatsapp_response').html(data);
                    }
                }

            })

        })



        $("#callback_form").validate({
            rules: {
                name: "required",

                mobile: {
                    required: true,
                    number: true,
                    minlength: 10,
                }
            },
            messages: {
                name: "Please enter your name",
                mobile: {
                    required: "Please enter your mobile no.",
                    number: "Mobile No. contains only numbers",
                    minlength: "Your Mobile No. must be at least 10 characters long",
                }
            },
            submitHandler: function(form) {
                $.ajax({
                    url: '<?= site_url; ?>/ajax_enq_action.php',
                    type: 'POST',
                    data: $('#callback_form').serialize(),
                    dataType: 'json',
                    success: function(response) {
                        if (response.status == true) {
                            $('#cpop_up').text(response.message_response).css('color',
                                'green');
                            $('#callback_form')[0].reset();
                            grecaptcha.reset();

                        } else {
                            $('#cpop_up').text(response.message_response).css('color',
                                'red');

                        }
                    }
                });

            }
        });
    });
</script>
<script>

        $(function () {
    function stickyHeader() {
        if ($('.menubar').length) {
            var strickyScrollPos = 100;
            if ($(window).scrollTop() > strickyScrollPos) {
                $('.menubar').addClass('stricky-fixed');
            } else if ($(this).scrollTop() <= strickyScrollPos) {
                $('.menubar').removeClass('stricky-fixed');
            }
        };
    }

    jQuery(window).on('scroll', function () {
        (function ($) {
            stickyHeader();
        })(jQuery);
    });


    if ($(".navigation").length) {
        $(".navigation .navbar button").on("click", function () {
            $(".navigation .menu").slideToggle();
            $(this).toggleClass('open');
            return false;
        });
        $(".navigation .cs-submenu").children("a").append(function () {
            return '<button class="dropdown-expander"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg></button>';
        });

    }

    if (document.documentElement.clientWidth < 1023) {
        $(".navigation .menu .dropdown-expander").on("click", function () {
            $(this).parent().parent().children(".cs-dropdown").slideToggle();
            console.log($(this).parents("li"));
            console.log($(this).parents().children(".dropdown-expander").toggleClass("rotated"));
            return false
        })
        $(document).click(function (e) {
            if (!$(e.target).closest('.navigation .navbar button').length) {
                $('.navigation .menu').stop(true).slideUp();
                $(".navigation .navbar button").removeClass('open');

            }
        });
    }


    var featuredProducts = $("#featuredProducts");
    featuredProducts.owlCarousel({
        loop: true,
        margin: 10,
        navSpeed: 500,
        nav: true,
        navText: ['<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/></svg>', '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/></svg>'],
        autoplay: false,
        dots: false,
        items: 3,
        responsiveClass: true,
        responsive: {
            0: {
                items: 1
            },
            600: {
                items: 1,
            },
            1024: {
                items: 3
            },
            1100: {
                items: 3
            }
        }
    });


    var testimonials = $("#testimonials");
    testimonials.owlCarousel({
        loop: true,
        margin: 15,
        navSpeed: 500,
        nav: false,
        navText: ['<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/></svg>', '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/></svg>'],
        autoplay: true,
        dots: true,
        items: 3,
        responsiveClass: true,
        responsive: {
            0: {
                items: 1
            },
            600: {
                items: 1,
            },
            1024: {
                items: 3
            },
            1100: {
                items: 3
            }
        }
    });


    var clients = $("#clients");
    clients.owlCarousel({
        loop: true,
        margin: 10,
        navSpeed: 500,
        nav: false,
        navText: ['<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/></svg>', '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/></svg>'],
        autoplay: true,
        dots: true,
        items: 6,
        responsiveClass: true,
        responsive: {
            0: {
                items: 2
            },
            600: {
                items: 2,
            },
            1024: {
                items: 6
            },
            1100: {
                items: 6
            }
        }
    });


    // wow = new WOW({
    //     animateClass: 'animated',
    //     offset: 100,
    //     mobile: false
    // });
    // wow.init();
    $(window).on('scroll', function () {
        if ($(this).scrollTop() > 100) {
            $('#web-pulse-scroll-up').fadeIn();
        } else {
            $('#web-pulse-scroll-up').fadeOut();
        }
    });
    $('#web-pulse-scroll-up').on('click', function () {
        $("html, body").animate({
            scrollTop: 0
        }, 600);
        return false;
    });

    lozad('.lozad', {
        load: function (el) {
            el.src = el.dataset.src;
            el.onload = function () {
                el.classList.add('fadess')
            }
        }
    }).observe();
    $('#thumbs img').click(function () {
        $('#largeImage').attr('src', $(this).attr('src').replace('thumb', 'large'));
        if ($(this).hasClass("active")) {
            $("#thumbs img").removeClass("active");
        } else {
            $("#thumbs img").removeClass("active");
            $(this).addClass("active");
        }
    });

    function ValidateAlpha(evt) {
        var keyCode = (evt.which) ? evt.which : evt.keyCode
        if ((keyCode < 65 || keyCode > 90) && (keyCode < 97 || keyCode > 123) && keyCode != 32)

            return false;
        return true;
    }

    function isNumberKey(evt) {
        //var e = evt || window.event;
        var charCode = (evt.which) ? evt.which : evt.keyCode
        if (charCode != 46 && charCode > 31 &&
            (charCode < 48 || charCode > 57))
            return false;
        return true;
    }

    function validateOnlyTextField(element) {
        var str = element.value;
        if (str == ' ') {
            element.value = "";
        }
        if (!(/^[a-zA-Z\s]+$/.test(str))) {
            // console.log('String contain number characters');
            str = str.substr(0, str.length - 1);
            element.value = "";
        }
    }
});
</script>
 