HOME

Mini Shell 1.0
DIR:/home/costmasters.in/www/blog/wp-content/themes/blog-nano/
Current File : /home/costmasters.in/www/blog/wp-content/themes/blog-nano/footer.php
<!-- footer -->
<?php
/**
 * The template for displaying the footer
 * @package Blog Nano
 * @version 1.0.0
 */
$base_url = 'https://www.costmasters.in/';
?>
<!--================================
   START FOOTER AREA
   =================================-->
</div><!-- #page -->
<style>
    #mydb.scrolled {
        left: -40px;
    }

    #myns.scrolled {
        right: -1px;
    }

    button.request-template {
        bottom: 12%;
    }

    button.btn.request-template {
        width: fit-content;
    }

    .wp_padding_left_cs {
        padding-left: 0;
        padding-right: 5px;
    }

    .wp_padding_right_cs {
        padding-right: 0;
        padding-left: 5px;
    }

    @media (max-width:767px) {
        .wp_padding_left_cs {
            padding-left: 0;
            padding-right: 0;
        }

        .wp_padding_right_cs {
            padding-right: 0;
            padding-left: 0;
        }

        .cs_wp_blogmodal .modal-dialog.modal-dialog-centered {
            max-width: 85% !important;
            margin: 0 auto;
        }

        .modal-header h4 {
            font-size: 16px !important;
        }

        #DemoModal .close {
            top: 11px;
        }
    }
    html {
      scroll-behavior: smooth;
    }
    #about-us {
        scroll-margin-top: 60px; /* Adjust this value */
    }
    .ft-bottom ul li a {
        font-weight: 300;
        line-height: 12px;
        padding: 2px 14px;
    }
    input#book_designation {
    margin: 3px;
}
label.select-all {
    margin-right: 92px;
}
</style>
<footer class="footer">
    <div id="contact"></div>
    <div class="container">
        <div class="row">
            <div class="col-sm-4">
                <div class="wg-1">
                    <div class="ft-logo"><a href="#"><img src="<?php echo $base_url . '/uploads/site_logo/logo.webp'; ?>" alt="image" /></a></div>
                    <h4>Our Services</h4>
                    <ul>
                        <li><a href="<?php echo $base_url; ?>login">Raw Material Price Tracking services</a></li>
                        <li><a href="<?php echo $base_url; ?>intelligent-cost-estimator">Intelligent Cost Estimator-ICE <span>(A Zero Base Cost Management Software)</span></a></li>
                        <li><a href="https://bidmasters.in/">BidMasters <span>(An Online Aution Platform)</span></a>
                        </li>
                        <li><a href="<?php echo $base_url; ?>saas">Sourcing As A Service</a></li>
                        <li><a href="<?php echo $base_url; ?>paas">Procurement As A Service</a></li>
                        <li><a href="<?php echo $base_url; ?>cost-optimizer">Cost Optimizer</a></li>
                    </ul>
                    <div class="icon-ft">
                        <a href="https://www.facebook.com/costmasters.in" target="_blank"><i
                            class="fa fa-facebook"></i></a>
                        <a href="http://in.linkedin.com/pub/costmasters/80/13a/362" target="_blank"><i class="fa fa-linkedin"></i></a>
                        <a href="https://twitter.com/CostMasters_CIR" target="_blank"><i class="fa fa-twitter"></i></a>
                        <a href="https://www.instagram.com/costmasters/" target="_blank"><i
                            class="fa fa-instagram"></i></a>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="wg-1">
                    <h4>Latest Commodity Price Trends <span>(More articles in "Blog" Tab)</span></h4>
                    <div class="news-post">
                        <?php
                        $args = array(
                            'post_type' => 'post',
                            'posts_per_page' => 3,
                        );

                        $latest_posts = new WP_Query($args);
                        if ($latest_posts->have_posts()) {
                            while ($latest_posts->have_posts()) {
                                $latest_posts->the_post();
                                $post_id = get_the_ID();
                                $post_date = get_the_date('F d, Y');
                                $attachments = get_children(
                                    array(
                                        'post_parent' => $post_id,
                                        'post_status' => 'inherit',
                                        'post_type' => 'attachment',
                                        'post_mime_type' => 'image',
                                        'order' => 'ASC',
                                        'orderby' => 'menu_order'
                                    )
                                );

                                $post_image_url = '';
                                if (!empty($attachments)) {
                                    reset($attachments);
                                    $first_attachment_id = key($attachments);
                                    $post_image_url = wp_get_attachment_url($first_attachment_id);
                                }
                                // if ( empty( $post_image_url ) ) {
                                //     $uploads_dir = wp_upload_dir();
                                //     $post_image_url = $uploads_dir['baseurl'] . '/image-not-found.jpg'; // set default image URL
                                // }
                                ?>
                                <div class="post">
                                    <div class="image">
                                        <a href="<?php the_permalink(); ?>" target="_blank">
                                            <img src="<?php echo esc_url($post_image_url); ?>" alt="<?php the_title(); ?>">
                                        </a>
                                    </div>
                                    <h6><a href="<?php the_permalink(); ?>" target="_blank"><?php the_title(); ?></a></h6>
                                    <span class="date"><?php echo esc_html($post_date); ?></span>
                                </div>
                            <?php }
                            wp_reset_postdata();
                        } else {
                            //echo 'No posts found';
                        }
                        ?>
                    </div>
                    <!--/ news-post -->
                </div>
            </div>
            <div class="col-sm-4">
                <div class="wg-1">
                    <h4>Contact Us</h4>
                    <address>
                        <div>
                            <p><span>Address:</span>Plot No. D-152, Phase 8, Industrial Area Mohali-160059. Punjab</p>
                        </div>
                    </address>
                    <address>
                        <div>
                            <p><span>Email Us:</span><a href="mailto:cir@costmasters.in">cir@costmasters.in</a><br><a href="mailto:sales@costmasters.in">sales@costmasters.in</a></p>
                        </div>
                    </address>
                    <address>
                        <div>
                            <p><span>Call Us:</span><a href="tel:+91-7696670077">G.K Purba - +91-7696670077</a></p>
                        </div>
                    </address>
                </div>
            </div>
        </div>
        <!--/ row -->
    </div>
    <!--/ container -->
    <div class="ft-bottom custom_footer">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-8 col-sm-12">
                <div class="footer_nav_flex">
                    <ul class="d-flex justify-content-md-between flex-wrap">
                        <li class="first_anchor"><a href="<?php echo $base_url . '#about-sec'; ?>">About Us</a></li>
                        <li><a href="<?php echo $base_url . 'terms-of-use'; ?>">Terms of Use</a></li>
                        <li><a href="<?php echo $base_url . 'privacy_policy'; ?>">Privacy Policy</a></li>
                        <li><a href="<?php echo $base_url . 'refund_cancellation'; ?>">Refund and Cancellation</a></li>
                        <li><a href="<?php echo $base_url . 'sitemap.xml'; ?>">Sitemap</a></li>
                        <li><a href="<?php echo $base_url . 'blog'; ?>">Blog</a></li>
                        <li><a href="#contact">Contact Us</a></li>
                    </ul>
                </div>
            </div>
            <div class="col-md-4 col-sm-12 text-center text-md-end">
                <p class="footer-text">
                    <span>Copyright &copy; 2013-<?php echo date("Y"); ?></span>
                    <span><a href="<?= $base_url ?>" target="_blank" class="makerCss">CostMasters</a></span>
                    <span>|</span>
                    <span>All rights reserved.</span>
                </p>

            </div>
        </div>
    </div>
</div>
    <!--/ ft-bottom -->
</footer>
<div class="request-template book_demo_free">
    <button type="button" class="btn" id="mydb" data-toggle="modal" data-target="#DemoModal">
        <i class="fa fa-volume-control-phone" aria-hidden="true"></i><span>Book Your Free Demo</span>
    </button>
</div>
<!-- Modal -->
<div class="modal fade request-template-modal cs_wp_blogmodal" id="DemoModal" tabindex="-1"
    aria-labelledby="DemoModalLabel" aria-hidden="true" style="background-color: rgba(0, 0, 0, 0.4);">
    <div class="modal-dialog modal-dialog-centered" style="max-width: 600px;">
        <div class="modal-content">
            <div class="modal-header">
                <div class="">
                <h4 class="modal-title" id="DemoModalLabel">Book Your Free Demo</h4></div>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="right: 20px;top: 20px;">
                    <span aria-hidden="true" style="color: white;">&times;</span>
                </button>
            </div>
            <div class="modal-body cs_wp_modal_body">
                <div class="row">
                    <div class="col-sm-12">
                        <form method="POST" id="demo_request" action="">
                            <div class="form-group">
                                <div class="col-sm-12 col-md-6 wp_padding_left_cs d-flex align-items-center gap-2">
                                    <input type="email" placeholder="Email ID*" class="form-control" name="book_email" id="book_email">
                                    <i class="fa fa-check-circle text-success verified_tick" id="wp_email-otp_verified_tick" style="display: none;"></i>
                                </div>

                                <div class="col-sm-12 col-md-6 wp_padding_right_cs">
                                    <div class="input-group" id="contct_flex">
                                        <input type="tel" placeholder="Contact No*" class="form-control" name="book_contact" id="book_contact">
                                        <div class="input-group-append">
                                            <button type="button" class="btn btn-sm btn-primary" id="send_otp_btn" style="display: none;">OTP</button>
                                            <i class="fa fa-check-circle text-success verified_tick" id="wp_otp_verified_tick" style="display: none;"></i>
                                        </div>
                                    </div>
                                    <span class="error" id="book_contact_error"></span>
                                </div>
                                <div class="form-group otp-group" id="otp_group1" style="display: none;margin: 15px;">
                                    <div class="input-group">
                                        <div class="otp_box_cs_flex">
                                            <input type="text" class="otp-box" name="otp_digit1" id="otp_digit1" maxlength="1" pattern="\d" title="Enter a digit">
                                            <input type="text" class="otp-box" name="otp_digit2" id="otp_digit2" maxlength="1" pattern="\d" title="Enter a digit">
                                            <input type="text" class="otp-box" name="otp_digit3" id="otp_digit3" maxlength="1" pattern="\d" title="Enter a digit">
                                            <input type="text" class="otp-box" name="otp_digit4" id="otp_digit4" maxlength="1" pattern="\d" title="Enter a digit">
                                            <button type="button" class="btn btn-sm btn-primary verify cancel-btn" data-otp-group="otp_group">Cancel</button>
                                            <button type="button" class="btn btn-sm btn-primary verify verify-otp-btn" id="verify_otp_btn" data-otp-id="verify_otp" data-contact-id="book_contact" data-otp-group="otp_group" data-otp-timer="otptimer" data-otp-verified-tick="wp_otp_verified_tick" style="display: none;">Verify</button>
                                            <button type="button" class="btn btn-sm btn-primary verify wp_resent-otp-btn" id="wp_resent-otp-btn" data-otp-id="resent_otp" data-contact-id="book_contact" data-otp-group="otp_group" data-otp-timer="otptimer" data-otp-verified-tick="wp_otp_verified_tick" style="display: none;">Resent OTP</button>
                                        </div>
                                    </div>
                                    <span id="otp-timer" style="display: none;"></span>
                                    <input type="hidden" placeholder="OTP" class="form-control" name="verify_otp" id="verify_otp" maxlength="4">
                                    <span id="otp_verification_status"></span>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-12 col-md-6 wp_padding_left_cs">
                                    <input type="text" placeholder="Name*" class="form-control" name="book_name" id="book_name">
                                </div>
                                <div class="col-sm-12 col-md-6 wp_padding_right_cs">
                                    <input type="text" placeholder="Organisation" class="form-control" name="book_organisation" id="book_organisation">
                                </div>
                            </div>                            
                            <div class="form-group list">
                                <label id="label_heading">
                                    <span class="lc_label">Product of Interested</span>
                                    <span class="input-required">*</span>
                                </label>
                                <div class="row" id="checkbox_wrapper">
                                    <!-- Checkboxes will be populated dynamically here -->
                                <div class="col-md-6" id="free_trail" style="display: none;">
                                    <input class="form-check-input" type="checkbox" name="free_trial" id="free_trial" value="3days_trial" />
                                    <label class="form-check-label" id="free_demo_lbl" for="free_trial" style="top: 2px !important;left: 10px !important;">Free 3 Days Trial For Price Tracking Services</label>
                                </div>
                                </div>
                                <div class="form-check" id="commodities_wrapper" style="display: none;">
                                    <div class="form-group table-paddingzero">
                                        <label class="lc_label" id="comdity_heder">Commodities of Interest</label>
                                        <label class="select-all">
                                         <input type="checkbox" id="wp_select_all_commodities"> Select All
                                        </label>
                                    </div>
                                    <div id="commodities_list">
                                        <?php if (!empty($GLOBALS['commodity_list'])): ?>
                                            <div class="commodities-grid">
                                                <?php foreach ($GLOBALS['commodity_list'] as $commodity): ?>
                                                    <div class="commodity-item">
                                                        <input class="commodity-checkbox" type="checkbox"
                                                        id="commodity_<?php echo esc_attr($commodity['id']); ?>" name="commodities[]" value="<?php echo esc_attr($commodity['id']); ?>">
                                                        <label
                                                            for="commodity_<?php echo esc_attr($commodity['id']); ?>">
                                                            <?php echo esc_html($commodity['category_name']); ?>
                                                        </label>
                                                    </div>
                                                <?php endforeach; ?>
                                            </div>
                                        <?php else: ?>
                                            <p>No commodities available.</p>
                                        <?php endif; ?>
                                    </div>

                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-12 wp_padding_left_cs">
                                    <input type="text" placeholder="Designation" class="form-control"
                                        name="book_designation" id="book_designation">
                                </div>
                                <!-- <div class="col-sm-12 col-md-6 wp_padding_right_cs">
                                    <select class="form-control" id="book_prefered_time" name="book_prefered_time">
                                        <option value="" disabled selected>Preferred Time Slot for Demo</option>
                                        <?php
                                        $start_time = strtotime('10:00');
                                        $end_time = strtotime('18:00');
                                        $interval = 30 * 60; // 30 minutes in seconds
                                        
                                        // Loop through the time slots
                                        for ($time = $start_time; $time < $end_time; $time += $interval) {
                                            $slot_start = date('H:i', $time); // Format as HH:MM
                                            $slot_end = date('H:i', $time + $interval); // Format as HH:MM
                                            echo "<option value=\"$slot_start-$slot_end\">$slot_start-$slot_end</option>";
                                        }
                                        ?>
                                    </select>
                                </div> -->
                            </div>
                            <div class="">
                                <input type="hidden" name="book_url" id="book_url" value="Blog">
                                <input type="hidden" name="contactNo" id="contactNo" value="">
                            </div>
                            <div class="form-group">
                                <textarea class="form-control" name="book_message" id="book_message"
                                    placeholder="Please write your message here"></textarea>
                            </div>
                            <div class="">
                                <input type="hidden" id="is_otp_verified" name="is_otp_verified" value="0">
                                <input type="hidden" id="is_email_verified" name="is_email_verified" value="0">
                                
                            </div>
                            <div class="form-group">
                                <input type="submit" class="btn btn-submit" value="Submit">
                            </div>
                            <div class="">
                                <div id="message"></div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="slideout latest_news_slide blog_news_sec">
    <div class="handle" id="myns">
        <div class="title">Latest News <i class="fa fa-angle-down"></i></div>
    </div>
    <div class="body">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner carousel-foot">
                <?php
                $args = array(
                    'post_type' => 'post',
                    'posts_per_page' => 3,
                );

                $latest_posts = new WP_Query($args);

                if ($latest_posts->have_posts()) {
                    $counter = 0; // initialize the counter variable
                    while ($latest_posts->have_posts()) {
                        $latest_posts->the_post();
                        $post_date = get_the_date('F d, Y');
                        $active_class = $counter == 0 ? 'active' : '';
                        ?>
                        <div class="item <?php echo esc_attr($active_class); ?>">
                            <p class="date"><?php echo esc_html($post_date); ?></p>
                            <h3><?php the_title(); ?></h3>
                            <div class="cta-btn">
                                <a href="<?php the_permalink(); ?>" target="_blank" class="btn" tabindex="0">Read More <span
                                        class="dot"></span></a>
                            </div>
                        </div>
                        <?php
                        $counter++;
                    }
                    wp_reset_postdata();
                }
                ?>
            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function () {

        var checkboxWrapper = $('#checkbox_wrapper');
        // Make an API call to get the checkbox data
        $.ajax({
            url: '<?php echo $base_url; ?>api/product_list', // Replace with your API endpoint
            type: 'GET',
            contentType: 'application/json',
            success: function (data) {
                if (data && data.length > 0) {
                    $.each(data, function (index, product) {
                        if (product.product_status === "ON") {
                            var colDiv = $('<div>').addClass('col-md-6');
                            var formCheckDiv = $('<div>').addClass('form-check');

                            var input = $('<input>')
                                .addClass('form-check-input')
                                .attr('type', 'checkbox')
                                .attr('id', 'product_' + product.product_name) // Adjust ID if needed for uniqueness
                                .attr('name', 'services[]')
                                .val(product.product_id); // Use product_id as the checkbox value

                            var label = $('<label>')
                                .addClass('form-check-label')
                                .attr('for', 'product_' + product.product_id) // Match 'for' attribute with checkbox ID
                                .text(product.product_name);

                            formCheckDiv.append(input).append(label);
                            colDiv.append(formCheckDiv);
                            checkboxWrapper.append(colDiv);
                        }
                    });
                }
            },
            error: function (error) {
                console.error('Error:', error);
            }
        });

        // Attach event listeners using delegation
        $(document).on('change', '.commodity-checkbox', function () {
            let isFreeTrialChecked = $('#free_trial').prop('checked');
            let selectedCount = $('.commodity-checkbox:checked').length;
            let total = $('.commodity-checkbox').length;
        
            $('#wp_select_all_commodities').prop('checked', total === selectedCount);
            if (isFreeTrialChecked && selectedCount > 2) {
                $(this).prop('checked', false);
                toastr.warning('You can select only up to 2 commodities when Free Trial is selected.');
            }
        });

        $(document).on('change', '#wp_select_all_commodities', function () {
            let isChecked = $(this).prop('checked');
            let isFreeTrialChecked = $('#free_trial').prop('checked');
            let checkboxes = $('.commodity-checkbox');

            if (isChecked) {
                if (isFreeTrialChecked) {
                    let selected = 0;
                    checkboxes.each(function () {
                        if (selected < 2) {
                            $(this).prop('checked', true);
                            selected++;
                        } else {
                            $(this).prop('checked', false);
                        }
                    });
                } else {
                    checkboxes.prop('checked', true);
                }
            } else {
                checkboxes.prop('checked', false);
            }
        });

        $(document).on('change', '#free_trial', function () {
            let isFreeTrialChecked = $(this).prop('checked');
            let selectedCommodities = $('.commodity-checkbox:checked');

            if (isFreeTrialChecked) {
                $('.select-all').hide();
                $('#wp_select_all_commodities').prop('checked', false);

                if (selectedCommodities.length > 2) {
                    toastr.warning('You can only select up to 2 commodities for a Free Trial.', 'Limit Exceeded');

                    // Uncheck all first
                    $('.commodity-checkbox').prop('checked', false);

                    // Re-check only the first two originally selected
                    selectedCommodities.each(function (index) {
                        if (index < 2) {
                            $(this).prop('checked', true);
                        }
                    });
                } else {
                    // If 2 or fewer were selected, allow them to stay
                    // Optionally keep them as-is (or reset if you want to start fresh)
                }
            } else {
                // Free Trial is unchecked, so show "Select All"
                $('.select-all').show();
            }
        });

        // Auto-show modal on specific pages after delay
       setTimeout(function () {
            if (!$('#DemoModal').hasClass('show')) {
                $('#DemoModal').modal('show');
            }
        }, 20000); // 20 seconds in milliseconds

        // Close modal when close button is clicked
        $('.modal .close').click(function () {
            $(this).closest('.modal').modal('hide');
        });

        //   // Show/hide commodities based on product selection
        function checkCommoditiesDisplay() {
            let isChecked = $('#checkbox_wrapper input[value="1"]:checked').length > 0;
            if (isChecked) {
                if ($('#commodities_list').is(':empty')) fetchCommodities();
                $('#commodities_wrapper, #free_trail').show();
            } else {
                $('#commodities_wrapper, #free_trail').hide();
                $('.commodity-checkbox').prop('checked', false);
            }
        }

        // Event listener for dynamically populated product checkboxes
        $(document).on('change', '#checkbox_wrapper input[type="checkbox"]', function () {
            checkCommoditiesDisplay();
        });
    });

    const slideout = document.querySelector('.slideout')
    const handle = slideout.querySelector('.handle')

    handle.onclick = function () {
        slideout.classList.toggle('active');
    }
    // Get the current URL
    var currentUrl = window.location.href;
    // Check if the URL ends with a trailing slash
    if (currentUrl.endsWith('/')) {
        // Remove the trailing slash
        var newUrl = currentUrl.slice(0, -1);

        // Update the browser's address bar without reloading the page
        history.replaceState(null, null, newUrl);
    }
</script>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script>
var otpNonce = '<?php echo wp_create_nonce("otp_verification"); ?>';
var ajaxurl = '<?php echo admin_url("admin-ajax.php"); ?>';

jQuery(document).ready(function ($) {
    let otpSent = false,
        otpVerified = false,
        timerInterval,
        emailSent = false; // Flag to prevent multiple email requests
    let lastValidNumber = "";
    let otpTimer;
    
    // Toastr Configuration
    toastr.options = {
        closeButton: true,
        progressBar: true,
        positionClass: 'toast-top-right',
        showDuration: 300,
        hideDuration: 1000,
        timeOut: 5000,
        extendedTimeOut: 1000
    };

    const $bookContact = $('#book_contact'),
        $otpBoxes = $('.otp-box'),
        $otpGroup = $('.otp-group'),
        $otpTimer = $('#otp-timer'),
        $resendOtpBtn = $('#wp_resent-otp-btn'),
        $otpVerifiedTick = $("#wp_otp_verified_tick"),
        $isOtpVerified = $("#is_otp_verified");

    // Restrict numeric input for phone and OTP fields
    $(document).on('input', 'input[type="tel"], .otp-box', function () {
        this.value = this.value.replace(/\D/g, '');
    });

    // OTP Input Handling for both phone and email verification
    $otpBoxes.on('input', function () {
        let otpValues = "";
        $otpBoxes.each(function () {
            otpValues += $(this).val();
        });
        $('#verify_otp').val(otpValues);

        if (otpValues.length === 4) {
            // Determine whether to verify by phone or email based on the country
            let countryData = iti.getSelectedCountryData();
            let isIndian = (countryData.iso2.toUpperCase() === "IN");

            let contact = isIndian ? $bookContact.val() : '';
            let email = isIndian ? '' : $('#book_email').val();

            // Call the verifyOTP function with the appropriate identifier
            verifyOtp(otpValues, contact, email);
        }
    });

    $otpBoxes.on('keydown', function (e) {
        if (e.key === 'Backspace' && this.value.length === 0) {
            $(this).prev('.otp-box').focus();
        }
    });

    document.querySelectorAll('.otp-box').forEach((box, index, boxes) => {
        box.addEventListener('input', function () {
            // Move to the next box if a digit is entered
            if (this.value.length === 1 && index < boxes.length - 1) {
                boxes[index + 1].focus();
            }

            // Validate OTP when the 4th digit is entered
            // if (index === boxes.length - 1 && this.value.length === 1) {
            //     VerifyOTP();
            // }
        });

        box.addEventListener('keydown', function (e) {
            // Move to the previous box on Backspace if the current box is empty
            if (e.key === 'Backspace' && this.value.length === 0 && index > 0) {
                boxes[index - 1].focus();
            }
        });
    });

    // Prevent multiple OTP requests on Enter key press
    $bookContact.on('keypress', e => (e.which === 13 ? e.preventDefault() : ''));

    // Initialize intlTelInput
    let iti = window.intlTelInput($bookContact[0], {
        initialCountry: "in",
        separateDialCode: true,
        nationalMode: true,
        utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js"
    });
    
    // Country-based phone number validation
    const phoneLengthByCountry = { 
        "IN": 10, 
        "US": 10, 
        "GB": 10, 
        "JP": 10, 
        "AE": 9, 
        "FR": 9,
        "AU": 9 // Australia has 9 digits for mobile numbers
    };

    // Phone number validation & OTP or Email trigger
    $bookContact.on("input", function () {
        let countryData = iti.getSelectedCountryData(),
            countryCode = countryData.iso2.toUpperCase(),
            maxLength = phoneLengthByCountry[countryCode] || 10, // Default to 10 if not found
            contactNo = this.value.replace(/\D/g, '').slice(0, maxLength);
        
        this.value = contactNo; // Ensure only numbers are entered

        // Check if the email is already verified (value "1" means verified)
        let isEmailVerified = $("#is_email_verified").val() === "1";

        if (countryCode === "IN") {
            // For Indian numbers, send OTP
            if (contactNo.length === 10) {
                if (!/^[6789]\d{9}$/.test(contactNo)) {
                    otpSent = false;
                    return showError("#book_contact_error", `Enter Invalid number for ${countryData.name}`);
                }

                // If the number is valid, clear any old errors
                $("#book_contact_error").text("").css("color", "");
                $otpGroup.show();

                if (!otpSent) {
                    otpSent = true;
                    sendOtp(contactNo);
                }
            } else {
                otpSent = false;
                $("#book_contact_error")
                    .text(`Invalid number for ${countryData.name}`)
                    .css("color", "red");
                $otpGroup.hide();
            }
        } else {
            // Non-Indian numbers: Require email verification
            otpSent = false; // Don't send OTP for phone
            $("#book_contact_error").text("").css("color", ""); // Clear errors

            let book_email = $('#book_email').val().trim();
            if (!isEmailVerified) {
                if (book_email && validateEmail(book_email)) {
                    if (!emailSent) {
                        sendEmailVerification(book_email);
                        emailSent = true; // Mark email verification request as sent
                    }
                } else {
                    toastr.warning('Please enter a valid email address');
                }
            } else {
                toastr.info('Email is already verified.');
            }

            $("#email_verification_section").show();
        }
    });

    // Reset emailSent flag when the email is modified
    $('#book_email').on('change', function () {
        emailSent = false;
    });

    function showError(selector, message) {
        $(selector).text(message).css("color", "red").show();
    }

    // Email validation helper
    function validateEmail(email) {
        let regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return regex.test(email);
    }

    // Validate phone number before form submission
    function validatePhoneNumber() {
        let contact = $('#book_contact');
        if (!contact.length) {
            console.error("Phone input field not found!");
            return false;
        }
        if (!iti || !iti.isValidNumber()) {
            toastr.warning('Please enter a valid contact number.', 'Invalid Contact Number');
            contact.addClass('is-invalid');
            return false;
        }
        let formattedNumber = iti.getNumber();
        let countryCode = iti.getSelectedCountryData().iso2.toUpperCase();
        if (countryCode === "IN" && !formattedNumber.match(/^\+91[6789]\d{9}$/)) {
            toastr.warning('Invalid Indian mobile number format.', 'Invalid Contact Number');
            contact.addClass('is-invalid');
            return false;
        }
        contact.removeClass('is-invalid');
        return true;
    }
    
    function sendEmailVerification(email) {
    $.post(ajaxurl, { 
        action: 'send_email_verification',
        email: email
    }, function(response) {
        if (response.success) {
            toastr.success(response.data.message);
            $('#book_email').prop('readonly', true);
            $otpGroup.show();
            startOTPTimer();
        } else {
            toastr.error(response.data.message);
        }
    }, 'json');
}


    // // Trigger email verification for non-Indian numbers on blur as well
    $("#book_email").on("blur", function () {
        let countryData = iti.getSelectedCountryData();
        if (countryData.iso2.toUpperCase() !== "IN") {
            let email = $(this).val().trim();
            if (email && validateEmail(email) && !emailSent) {
                sendEmailVerification(email);
                emailSent = true;
            }
        }
    });

    // Send OTP
    function sendOtp(contactNo) {
        $.post('<?php echo admin_url("admin-ajax.php"); ?>', { action: 'send_otp', contactNo }, function (response) {
            if (response.success) {
                toastr.success('OTP has been sent to your Phone Number.');
                $otpGroup.show();
                startOTPTimer();
                $bookContact.prop('readonly', true);
            } else {
                toastr.error(response.message || 'OTP sending failed.');
            }
        }, 'json');
    }

    // OTP Timer Function
    function startOTPTimer() {
        let timeLeft = 60;
        if (timerInterval) clearInterval(timerInterval);

        $otpTimer.text(`Resend OTP in 01:00`).show();
        $resendOtpBtn.hide();

        timerInterval = setInterval(() => {
            let minutes = Math.floor(timeLeft / 60),
                seconds = timeLeft % 60,
                formattedTime = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;

            $otpTimer.text(`Resend OTP in ${formattedTime}`);

            if (timeLeft-- <= 0) {
                clearInterval(timerInterval);
                $otpTimer.hide();
                $resendOtpBtn.show();
            }
        }, 1000);
    }

    // Resend OTP
    $resendOtpBtn.on('click', function (e) {
        e.preventDefault();
        otpSent = false;

        let countryData = iti.getSelectedCountryData(),
            countryCode = countryData.iso2.toUpperCase(),
            contactNo = $bookContact.val().replace(/\D/g, '').trim(),
            book_email = $('#book_email').val().trim(),
            isEmailVerified = $("#is_email_verified").val() === "1";
           $(".otp-box").val(""); // Clear OTP input fields

        if (countryCode === "IN") {
            // Resend OTP for Indian numbers
            if (!/^[6789]\d{9}$/.test(contactNo)) {
                return showError("#book_contact_error", "Enter a valid 10-digit number.");
            }
            sendOtp(contactNo);
        } else {
            // Resend email verification for non-Indian numbers
            if (!isEmailVerified) {
                if (book_email && validateEmail(book_email)) {
                    sendEmailVerification(book_email);
                } else {
                    toastr.warning('Please enter a valid email address before resending verification.');
                }
            } else {
                toastr.info('Email is already verified.');
            }
        }
    });

    // Updated verifyOTP function to send the appropriate key
    function verifyOtp(otp, contactNo, email) {
        $.post('<?php echo admin_url("admin-ajax.php"); ?>', { 
            action: 'verify_otp', 
            otp: otp, 
            contact_no: contactNo || '', 
            email: email || '',
            otp_nonce: otpNonce // Using predefined JavaScript variable
        }, function (response) {
            if (response.success) {
                otpVerified = true;
                $otpGroup.hide();
                // Clear both first
                $('#wp_email-otp_verified_tick, #wp_otp_verified_tick').hide();

                // Conditionally show based on which was provided
                if (email) {
                    $('#wp_email-otp_verified_tick').show();
                } else if (contactNo) {
                    $otpVerifiedTick.show();
                 }               
                $isOtpVerified.val("1");
                $('#is_email_verified').val("1");
                toastr.success(response.data.message); // ✅ Correct way
            } else {
                toastr.error(response.data?.message || 'OTP verification failed.');
            }

        }, 'json');
    }

    // Cancel OTP Verification
    $(".cancel-btn").on("click", function () {
        clearInterval(timerInterval);
        $otpGroup.hide();
        $('#book_email').prop('readonly', false);
        $bookContact.prop('readonly', false);
        $otpBoxes.val("");
        $otpTimer.hide();
        otpSent = false;
    });

    // Form Submission
    $('#demo_request').submit(function (e) {
        e.preventDefault();
        if (!validateForm()) return;

        $.ajax({
            type: 'POST',
            url: '<?php echo $base_url; ?>api/submit_form',
            data: $(this).serialize(),
            dataType: 'json',
            success: function (response) {
                if (response.status) {
                    toastr.success(response.message, 'Success');
                    resetForm();
                    sendEmail(response.save_data, response.services);
                } else {
                    toastr.error(response.message, 'Error');
                    if (response.message === 'This email address is already registered.') {
                    $('#book_email').addClass('is-invalid');
                    $('#book_email').attr('readonly', false);
                    $otpBoxes.val("");
                    $('#is_email_verified').val('0');
                    $('#wp_email-otp_verified_tick').hide();
                }
                }
            },
            error: function () {
                toastr.error('Error submitting the form. Please try again.', 'Error');
        }
        });
    });

    // Send Email after Form Submission
    function sendEmail(save_data, services) {
        $.post('<?php echo $base_url; ?>api/send_email', { save_data, services }, function (response) {
            response.status ? toastr.success(response.message, 'Email Sent') : toastr.error(response.message || 'Email sending failed.');
        }, 'json');
    }

    // Reset Form
    function resetForm() {
        $('#demo_request')[0].reset();
        $('#DemoModal').modal('hide');
        $otpVerifiedTick.hide();
        $isOtpVerified.val('0');
        $('#is_email_verified').val("0");
        $('#wp_email-otp_verified_tick').hide();
        $('#book_email').prop('readonly', false);
        $bookContact.prop('readonly', false);
        $('#book_email').removeClass('is-invalid');
        otpSent = false;
        otpVerified = false;
    }

    // Form validation update
    function validateForm() {
        var isValid = true;

        // Get elements
        let contactInput = document.querySelector("#book_contact");
        let email = $('#demo_request input[name="book_email"]');
        let name = $('#demo_request input[name="book_name"]');

        // Trimmed values
        let emailValue = $.trim(email.val());
        let nameValue = $.trim(name.val());
        let contactValue = $.trim(contactInput.value);
       

        // Selected checkboxes
        let selectedProducts = $('#checkbox_wrapper input[type="checkbox"]:checked');
        let selectedCommodities = $('.commodity-checkbox:checked');

        // Check if all main fields are blank
        if (emailValue === '' && nameValue === '' && contactValue === '' &&
            selectedProducts.length === 0 && selectedCommodities.length === 0) {
            toastr.warning('Please enter the all mandatory details marked with an asterisk (*).', 'Empty Form');
            return false;
        }

        // Get country code
        let iti = window.intlTelInputGlobals.getInstance(contactInput);
        let countryData = iti.getSelectedCountryData();
        let countryCode = countryData.iso2.toUpperCase();
        console.log(iti);
        let mobile = iti.getNumber();
        $("#contactNo").val(mobile);
        // Email validation
        if (emailValue === '' || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailValue)) {
            toastr.warning('Please enter a valid email address.', 'Invalid Email');
            email.addClass('is-invalid');
            isValid = false;
        } else {
            email.removeClass('is-invalid');
        }
        let contactNo = $.trim(iti.value);

        // Contact number validation only for Indian users
        if (countryCode === "IN") {
            if (!validatePhoneNumber()) {
                isValid = false;
            }
        }

        // OTP verification check
        if (countryCode === "IN") {
            if (contactValue !== '') {
                if ($('#is_otp_verified').val() !== '1') {
                    toastr.warning('Please verify your phone number before submitting the form.', 'OTP Not Verified');
                    isValid = false;
                }
            }
        } else {
            if ($('#is_email_verified').val() !== '1') {
                toastr.warning('Please verify your email before submitting the form.', 'OTP Not Verified');
                isValid = false;
            }
        }

        // Name validation
        if (nameValue === '') {
            toastr.warning('Name is required.', 'Required Field');
            name.addClass('is-invalid');
            isValid = false;
        } else if (!/^[a-zA-Z\s]+$/.test(nameValue) || /\s{2,}/.test(nameValue)) {
            toastr.warning('Name should contain only alphabets and single spaces.', 'Invalid Name');
            name.addClass('is-invalid');
            isValid = false;
        } else {
            name.removeClass('is-invalid');
        }

        // Product selection validation
        if (selectedProducts.length === 0) {
            toastr.warning('Please select at least one Product.', 'Product Required');
            $('#checkbox_wrapper').addClass('is-invalid');
            isValid = false;
        } else {
            $('#checkbox_wrapper').removeClass('is-invalid');
        }

        // Commodity validation if Product ID 1 is selected
        let selectedProductIds = selectedProducts.map(function () {
            return this.value;
        }).get();

        if (selectedProductIds.includes('1')) {
            if (selectedCommodities.length === 0) {
                toastr.warning('Please select at least one commodity.', 'Commodity Required');
                isValid = false;
            }
        }

        return isValid;
    }
   
});
</script>
<!-- Magnific Popup -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.js"></script>
<!-- Your Custom Script -->
<script>
    $(document).ready(function () {
        $('.portfolio-menu ul li').click(function () {
            $('.portfolio-menu ul li').removeClass('active');
            $(this).addClass('active');

            var selector = $(this).attr('data-filter');
            $('.portfolio-item').isotope({
                filter: selector
            });
            return false;
        });

        $('.popup-btn').magnificPopup({
            type: 'image',
            gallery: {
                enabled: true
            }
        });
    });
</script>
<!-- Other scripts -->
<script src="<?php echo $base_url; ?>/assets/front/js/bootstrap.min.js"></script>
<script src="<?php echo $base_url; ?>/assets/front/js/script.js"></script>
<script src="<?php echo $base_url; ?>/assets/front/js/owl.carousel.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<script>
    $('.counter-count').each(function () {
        $(this).prop('Counter', 0).animate({
            Counter: $(this).text()
        }, {
            duration: 5000,
            easing: 'swing',
            step: function (now) {
                $(this).text(Math.ceil(now));
            }
        });
    });    

    let mydb = document.querySelector('.book_demo_free'); // Select by class
    let isScrollingDB;  // Unique variable for book_demo_free

    // Detect scrolling and change button position
    window.addEventListener('scroll', function() {
        mydb.classList.add('scrolled');

        // Clear timeout if a scroll event occurs
        window.clearTimeout(isScrollingDB);

        // Set a timeout to run after scrolling ends
        isScrollingDB = setTimeout(function() {
            mydb.classList.remove('scrolled');
        }, 600);  // Delay to revert after scroll stops
    });

    document.addEventListener('DOMContentLoaded', function () {
        let mydb = document.querySelector('.book_demo_free');
        let isScrollingDB;

        if (mydb) {
            window.addEventListener('scroll', function () {
                mydb.classList.add('scrolled');
                clearTimeout(isScrollingDB);
                isScrollingDB = setTimeout(function () {
                    mydb.classList.remove('scrolled');
                }, 600);
            });

            mydb.addEventListener('mouseleave', function () {
                mydb.classList.remove('scrolled');
            });
        }

        let myns = document.querySelector('.latest_news_slide');
        let isScrollingNS;

        if (myns) {
            window.addEventListener('scroll', function () {
                myns.classList.add('scrolled');
                clearTimeout(isScrollingNS);
                isScrollingNS = setTimeout(function () {
                    myns.classList.remove('scrolled');
                }, 600);
            });

            myns.addEventListener('mouseleave', function () {
                myns.classList.remove('scrolled');
            });
        }
    });
</script>
<script>
    $(document).ready(function () {
        $("#owl-demo").owlCarousel({
            autoPlay: 3000,
            items: 1,
            itemsDesktop: [1199, 1],
            navigation: true,
            itemsDesktopSmall: [979, 1]
        });

        $('.owl-esteem').owlCarousel({
            loop: true,
            items: 10,
            margin: 10,
            nav: true,
            autoPlay: 3000,
            itemsDesktop: [1199, 1],
            navigation: true,
            itemsDesktopSmall: [979, 1]
        });


        $("#owl-demo-2").owlCarousel({
            autoPlay: 3000,
            items: 3,
            itemsDesktop: [1199, 3],
            navigation: true,
            itemsDesktopSmall: [979, 3]
        });


        // When the DOM is ready, run this function 

        //Set the carousel options
        $('#quote-carousel').carousel({
            pause: true,
            interval: 4000,
        });

    });
    $(document).ready(function () {
        $.ajax({
            url: '<?= $base_url('blog/wp-json/wp/v2/posts?per_page=3') ?>',
            method: 'GET',
            dataType: 'json',
            success: function (data) {
                console.log(data)
                var carouselInner = $('.carousel-foot');
                var active = "active";
                $.each(data, function (index, post) {

                    var title = post.title.rendered;
                    var content = post.content.rendered;
                    var firstImage = $(content).find('img').first().attr('src') || '';

                    var date = post.date;
                    var link = post.link;

                    var datetimeString = date;
                    var datetime = new Date(datetimeString);
                    var options = { month: 'long', day: 'numeric', year: 'numeric' };
                    var dateString = datetime.toLocaleDateString('en-US', options);
                    // var formattedDateString = dateString.replace(',', '');
                    // console.log(dateString); // March 20 2023
                    console.log(firstImage);

                    const myArray = firstImage.split("https://www.costmasters.in");
                    console.log(myArray);

                    var postHtml = '<div class="post"><div class="image"><a href="' + link + '" target="_blank"><img src="' + firstImage + '" alt="' + title + '"></a></div><h6><a href="' + link + '" target="_blank">' + title + '</a></h6><span class="date">' + dateString + '</span></div>';

                    $('#post').append(postHtml);

                    // Set active class on first item
                    var isActive = index === 0 ? active : "";
                    var itemHtml = '<div class="item ' + isActive + '"><p class="date">' + dateString + '</p><h3>' + title + '</h3><div class="cta-btn"><a href="' + link + '" target="_blank" class="btn" tabindex="0">Read More <span class="dot"></span></a></div></div>';
                    carouselInner.append(itemHtml);

                });
            }
        });
    });
</script>
<!--================================
   END FOOTER AREA
   =================================-->
<?php $back_to_top_type = web_log_get_option('back_to_top_type');
if ($back_to_top_type == 'enable'): ?>
    <a href="#page" class="back-to-top" id="back-to-top"><i class="fa fa-angle-up" aria-hidden="true"></i></a>
<?php endif; ?>
<?php wp_footer(); ?>
</body>

</html>