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/footer23.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;
    }

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

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

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

        .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;
    }
</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">
        <div class="container">
            <div class="row">
                <div class="col-sm-5" style="-ms-flex: 0 0 63.666667%;flex: 0 0 63.666667%;max-width: 63.666667%;">
                    <ul>
                        <li><a href="<?php echo $base_url . '#about-us'; ?>">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 class="col-sm-7" style="-ms-flex: 0 0 36.333333%;flex: 0 0 36.333333%;max-width: 36.333333%;">
                    <p style="font-weight: 300;">Copyright &copy; 2013-<?php echo date("Y"); ?> <a href="<?= $base_url ?>" target="_blank" class="makerCss" style="padding-right: 10px">CostMasters</a> | <span style="padding: 0px 10px;">All rights reserved.</span></p>

                </div>
            </div>
            <!--/ row -->
        </div>
    </div>
    <!--/ ft-bottom -->
</footer>
<div class="request-template">
    <button type="button" class="btn request-template" id="mydb" data-toggle="modal" data-target="#DemoModal"
        data-backdrop="static">
        <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">
                <h4 class="modal-title" id="DemoModalLabel" style="text-align: center;">Book Your Free Demo</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <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 padding_left_cs">
                                    <input type="email" placeholder="Email ID*" class="form-control" name="book_email">
                                </div>
                                <div class="col-sm-12 col-md-6 padding_right_cs">
                                    <div class="input-group">
                                        <input type="tel" placeholder="Contact No*" class="form-control"
                                            name="book_contact" id="book_contact" maxlength="10">
                                        <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" id="otp_verified_tick"
                                                style="display:none;font-size: x-large;align-self: center;margin: 8px 30px;"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group otp-group" id="otp_group1" style="display: none;">
                                <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="otp_verified_tick1">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="otp_verified_tick"
                                            style="display: none;">Resent OTP</button>
                                    </div>
                                </div>
                                <span id="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 class="form-group">
                                <div class="col-sm-12 col-md-6 padding_left_cs">
                                    <input type="text" placeholder="Name*" class="form-control" name="book_name">
                                </div>
                                <div class="col-sm-12 col-md-6 padding_right_cs">
                                    <input type="text" placeholder="Organisation" class="form-control"
                                        name="book_organisation">
                                </div>
                            </div>
                            <div class="form-group">
                                <label>Product Interested<span class="input-required">*</span></label>
                                <div class="row" id="checkbox_wrapper">
                                    <!-- Checkboxes will be populated dynamically here -->
                                </div>
                                <div class="row" id="free_trail"
                                    style="display: none;padding: 0px 15px;margin-bottom: 5px;">
                                    <input class="form-check-input" type="checkbox" name="free_trial" id="free_trial"
                                        value="3days_trial" />
                                    <label class="form-check-label" for="free_trial"
                                        style="text-align: left;color:red; margin-left:10px; font-weight: 700;line-height: 20px;font-size: 14px;">Free
                                        3 Days Trial For Price Tracking Services</label>
                                </div>
                                <div class="form-check" id="commodities_wrapper" style="display: none;">
                                    <div class="form-group table-paddingzero">
                                        <table class="table table-bordered">
                                            <thead>
                                                <tr>
                                                    <th colspan="2" style="text-align: center;">Commodities of Interest
                                                    </th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <?php if (isset($GLOBALS['commodity_list'])): ?>
                                                    <?php for ($i = 0; $i < count($GLOBALS['commodity_list']); $i += 2): ?>
                                                        <tr>
                                                            <?php for ($j = $i; $j <= $i + 1 && $j < count($GLOBALS['commodity_list']); $j++): ?>
                                                                <td>
                                                                    <div class="form-check">
                                                                        <input class="form-check-input commodity-checkbox"
                                                                            type="checkbox"
                                                                            id="product_<?php echo esc_attr($GLOBALS['commodity_list'][$j]['id']); ?>"
                                                                            name="products[]"
                                                                            value="<?php echo esc_attr($GLOBALS['commodity_list'][$j]['id']); ?>">
                                                                        <label class="form-check-label"
                                                                            for="product_<?php echo esc_attr($GLOBALS['commodity_list'][$j]['id']); ?>"><?php echo esc_html($GLOBALS['commodity_list'][$j]['category_name']); ?></label>
                                                                    </div>
                                                                </td>
                                                            <?php endfor; ?>
                                                        </tr>
                                                    <?php endfor; ?>
                                                <?php endif; ?>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-12 col-md-6 padding_left_cs">
                                    <input type="text" placeholder="Designation" class="form-control"
                                        name="book_designation">
                                </div>
                                <div class="col-sm-12 col-md-6 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" value="Blog">
                            </div>
                            <div class="form-group">
                                <textarea class="form-control" name="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">
                            </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">
    <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);
            }
        });

        // Function to check if commodities should be displayed based on selected product
        function checkCommoditiesDisplay() {
            var selectedProductId = $('#checkbox_wrapper input[type="checkbox"]:checked').val(); // Get the value of checked checkbox

            // Display commodities wrapper if selected product has product_id = 2 (Raw Material Price Tracking Services)
            if (selectedProductId === '1') {
                $('#commodities_wrapper').show();
                $('#free_trail').show();
            } else {
                $('#commodities_wrapper').hide();
                $('#free_trail').hide();
                $('.commodity-checkbox').prop('checked', false); // Uncheck all commodities
            }
        }

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

        $('.commodity-checkbox').change(function () {
            if ($('.commodity-checkbox:checked').length > 2) {
                toastr.warning('You can select a maximum of 2 commodities.');
                $(this).prop('checked', false);
            }
        });

        // Additional check to enforce the global limit initially if more than 2 are checked
        $('.commodity-checkbox').each(function () {
            var checkedCount = $('.commodity-checkbox:checked').length;
            if (checkedCount > 2) {
                $(this).prop('checked', false); // Uncheck if more than 2 are initially checked
            }
        });

        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');
        });

    });
</script>
<script>
    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>
    jQuery(document).ready(function ($) {
        let otpTimers = {}; // Object to store interval IDs
        let otpIntervals = {}; // Object to store remaining times
        var otpVerified = false; // Flag to track OTP verification status

        // Configure Toastr options
        toastr.options = {
            closeButton: true,
            progressBar: true,
            positionClass: 'toast-top-right', // Position of the toast notification
            showDuration: '300', // Duration of fade in animation in milliseconds
            hideDuration: '1000', // Duration of fade out animation in milliseconds
            timeOut: '5000', // How long the toast will display without user interaction
            extendedTimeOut: '1000' // Time to close after a user hovers over toast
        };

        // Form Submit
        $('#demo_request').submit(function (e) {
            e.preventDefault(); // Prevent default form submission
            var isValid = validateForm(); // Implement your validation logic

            if (isValid) {
                // Serialize the form data
                var formData = $(this).serialize();
                console.log(JSON.stringify(formData, null, 2));
                // Perform AJAX request
                $.ajax({
                    type: 'POST',
                    url: '<?php echo $base_url; ?>api/submit_form', // Adjust URL as per your controller method
                    data: formData,
                    dataType: 'json',
                    success: function (response) {
                        console.log('AJAX successful:', response);
                        console.log(JSON.stringify(response, null, 2));
                        if (response.status) {
                            toastr.success(response.message, 'Success');
                            // Optionally clear the form fields upon successful submission
                            $('#demo_request')[0].reset();
                            reloadPage(); // Reload the page after resetting the form
                        } else {
                            toastr.error(response.message, 'Error');
                        }
                    },
                    error: function () {
                        toastr.error('Error submitting the form. Please try again later.', 'Error');
                    }
                });
            }
        });

        // Function to reload the page
        function reloadPage() {
            window.location.reload(); // Reload the page
        }


        function restrictNumericInput() {
            $('input[type="tel"], .otp-box').on('input', function () {
                var sanitized = $(this).val().replace(/[^0-9]/g, '');
                $(this).val(sanitized);
            });
        }
        restrictNumericInput();

        // Function to validate form fields
        function validateForm() {
            var isValid = true;

            // Validate email
            var email = $('#demo_request input[name="book_email"]');
            if ($.trim(email.val()) === '') {
                toastr.warning('Email is required.', 'Required Field');
                email.addClass('is-invalid');
                isValid = false;
                return isValid; // Stop further validation on failure
            } else {
                email.removeClass('is-invalid');
            }

            // Validate contact number
            var contact = $('#demo_request input[name="book_contact"]');
            if ($.trim(contact.val()) === '' || contact.val().length !== 10 || !$.isNumeric(contact.val())) {
                toastr.warning('Please enter a valid 10-digit contact number.', 'Invalid Contact Number');
                contact.addClass('is-invalid');
                isValid = false;
                return isValid; // Stop further validation on failure
            } else {
                contact.removeClass('is-invalid');
            }

            // Check OTP verification
            if ($('#is_otp_verified').val() !== '1') {
                toastr.warning('Please verify your number before submitting the form.', 'OTP Not Verified');
                isValid = false;
                return isValid; // Stop further validation on failure
            }

            // Validate name
            var name = $('#demo_request input[name="book_name"]');
            var nameValue = $.trim(name.val());
            var isValid = true;
            if (nameValue === '') {
                toastr.warning('Name is required.', 'Required Field');
                name.addClass('is-invalid');
                isValid = false; // Set isValid to false
            }
            else if (!/^[a-zA-Z\s]+$/.test(nameValue)) {
                toastr.warning('Name should contain only alphabets.', 'Invalid Input');
                name.addClass('is-invalid');
                isValid = false; // Set isValid to false
            }
            else {
                name.removeClass('is-invalid');
            }


            // Check if at least one product is selected
            if ($('#checkbox_wrapper input[type="checkbox"]:checked').length === 0) {
                toastr.warning('Please select at least one Product.', 'Product Interest Required');
                return false; // Stop further validation
            }

            // Get the value of checked product checkbox
            var selectedProductId = $('#checkbox_wrapper input[type="checkbox"]:checked').val();

            // If Raw Material Price Tracking Services (product_id = '2') is selected, validate commodities
            if (selectedProductId === '1') {
                // Validate commodity selection
                if ($('.commodity-checkbox:checked').length === 0) {
                    toastr.warning('Please select at least one commodity.', 'Commodity Selection Required');
                    return false; // Stop further validation
                }
            }
            return isValid;
        }

      // Handle Send OTP Automatically when a valid number is entered
        $('#book_contact').on('input', function () {
            let contactNo = $(this).val().trim();
            if (contactNo.length === 10 && $.isNumeric(contactNo)) {
                // Check if the number is valid
                sendOtp(contactNo);
            }
        });

        // Function to send OTP
        function sendOtp(contactNo) {
            // Disable the button to prevent multiple clicks
            $('#send_otp_btn').attr('disabled', true);
            
            // Perform AJAX request to send OTP
            $.ajax({
                url: '<?php echo admin_url("admin-ajax.php"); ?>',
                type: 'POST',
                data: {
                    action: 'send_otp',  // WordPress action hook to identify the AJAX request
                    contactNo: contactNo
                },
                success: function (response) {
                    console.log(JSON.stringify(response, null, 2));
                    if (response.success) {
                        toastr.success('OTP sent successfully.', 'OTP Sent');
                        $('.otp-group').show(); // Show the OTP input field and submit button
                        startOTPTimer();
                        // Optionally disable the contact input
                        $('#book_contact').prop('readonly', true); // Disable contact input after sending OTP
                    } else {
                        toastr.error('Failed to send OTP.', 'Error');
                        $('#send_otp_btn').attr('disabled', false); // Re-enable the button on error
                    }
                },
                error: function (error) {
                    console.error('Error:', error);
                    toastr.error('Failed to send OTP.', 'Error');
                    $('#send_otp_btn').attr('disabled', false); // Re-enable the button on error
                }
            });
        }

        // Optionally, you can keep the existing button click event listener as a fallback
        // $('#send_otp_btn').on('click', function () {
        //     let contactNo = $('#book_contact').val().trim();
        //     if (contactNo.length === 10 && $.isNumeric(contactNo)) {
        //         sendOtp(contactNo);
        //     } else {
        //         toastr.warning('Please enter a valid 10-digit contact number.', 'Invalid Contact Number');
        //     }
        // });

        // Handle OTP verification
        $('#verify_otp_btn').on('click', function () {
            let otp = $('#verify_otp').val();
            let contactNo = $('#book_contact').val();
            if (otp.length === 4 && $.isNumeric(otp)) {
                $.ajax({
                    url: '<?php echo admin_url("admin-ajax.php"); ?>',
                    type: 'POST',
                    dataType: 'json', // Specify JSON dataType
                    data: {
                        action: 'verify_otp',
                        contact_no: contactNo,
                        otp: otp
                    },
                    success: function (response) {
                        if (response.success) {
                            toastr.success('OTP verified successfully.', 'OTP Verified');
                            $('.otp-group').hide(); // Hide the OTP group
                            $('#verify_otp_btn').hide(); // Hide the verify button
                            $('#otp_verified_tick').show(); // Show the OTP verified tick
                            $('#send_otp_btn').hide(); // Hide the send OTP button
                            $('#is_otp_verified').val('1'); // Set OTP verification flag
                            $('#timer').hide(); // Hide the timer
                            clearInterval(intervalId); // Clear the timer interval if needed

                        } else {
                            toastr.error('Invalid OTP. Please try again.', 'Invalid OTP');
                        }
                    },
                    error: function (error) {
                        console.error('Error:', error);
                        toastr.error('Error in verifying OTP.', 'Error');
                    }
                });
            } else {
                toastr.warning('Please enter a valid 4-digit OTP.', 'Invalid OTP');
            }
        });

        document.querySelectorAll('.otp-box').forEach((box, index, boxes) => {
            box.addEventListener('input', function () {
                if (this.value.length === 1 && index < boxes.length - 1) {
                    boxes[index + 1].focus();
                }
            });

            box.addEventListener('keydown', function (e) {
                if (e.key === 'Backspace' && this.value.length === 0 && index > 0) {
                    boxes[index - 1].focus();
                }
            });
        });

        // Update hidden OTP field value on input change
        document.querySelectorAll('.otp-box').forEach((box) => {
            box.addEventListener('input', () => {
                const otpValues = Array.from(document.querySelectorAll('.otp-box')).map(input => input.value).join('');
                document.getElementById('verify_otp').value = otpValues;
            });
        });

        // jQuery handling for OTP input
        $('.otp-box').on('input', function () {
            let otpValues = '';
            $('.otp-box').each(function () {
                otpValues += $(this).val();
            });
            $('#verify_otp').val(otpValues);
        });

        function resendOtp(button) {
            const otpGroupClass = $(button).data('otp-group');
            const otpTimerId = $(button).data('otp-timer');

            let contactNo = $('#book_contact').val().trim();
            if (contactNo.length === 10 && $.isNumeric(contactNo)) {
                // Disable the button to prevent multiple clicks
                $(button).attr('disabled', true);
                // Perform AJAX request to send OTP
                $.ajax({
                    url: '<?php echo admin_url("admin-ajax.php"); ?>',
                    type: 'POST',
                    data: {
                        action: 'send_otp',  // WordPress action hook to identify the AJAX request
                        contactNo: contactNo
                    },
                    success: function (response) {
                        console.log(JSON.stringify(response, null, 2));
                        if (response.success) {
                            toastr.success('OTP Resent successfully.', 'OTP Sent');
                            $('.otp-group').show(); // Show the OTP input field and submit button
                            startOTPTimer();
                            // $('#book_contact').prop('readonly', true); // Disable contact input
                        } else {
                            toastr.error('Failed to send OTP.', 'Error');
                            $(button).attr('disabled', false); // Re-enable the button on error
                        }
                    },
                    error: function (error) {
                        console.error('Error:', error);
                        toastr.error('Failed to send OTP.', 'Error');
                        $(button).attr('disabled', false); // Re-enable the button on error
                    }
                });
            } else {
                toastr.warning('Please enter a valid 10-digit contact number.', 'Invalid Contact Number');
            }

            $('.otp-box').val(''); // Clear OTP input fields

            // Disable the resend button and start the cooldown timer
            $('#wp_resent-otp-btn').show();
            $('#wp_resent-otp-btn').attr('disabled', true);
        }

        // Attach event listener correctly outside the function
        $(document).on('click', '#wp_resent-otp-btn', function () {
            resendOtp(this);
        });

        // Handle Cancel button click
        $('.cancel-btn').on('click', function () {
            $('#book_contact').val(''); // Clear the contact number field
            $('#book_contact').prop('disabled', false).removeClass('disabled-field'); // Re-enable contact input
            $('.otp-group').hide(); // Hide the OTP group
            $('#verify_otp_btn').show(); // Show the verify OTP button
            $('#otp_verified_tick').hide(); // Hide the OTP verified tick
           // $('#send_otp_btn').show(); // Show the send OTP button
             $('#book_contact').prop('readonly', false); // Disable contact input after sending OTP
            $('#send_otp_btn').prop('disabled', false); // Re-enable contact input
            $('.wp_resent-otp-btn').hide(); // Hide the resend OTP button
            $('#verify_otp').val(''); // Clear the OTP input field
            $('#otp_verification_status').text(''); // Clear any OTP verification status text
            $('#timer').hide(); // Hide the timer if visible
            clearInterval(intervalId); // Clear the timer interval if needed
        });

        // Allow only numeric input for contact number     
        function startOTPTimer() {
            var timerDisplay = document.getElementById('timer');
            var resendLink = document.getElementById('wp_resent-otp-btn');

            resendLink.style.display = 'none'; // Hide the resend link

            // Start the timer
            var timer = 60; // 1 minute
            timerDisplay.style.display = 'inline-block'; // Show the timer
            updateTimerDisplay(timerDisplay, timer); // Update initial display
            var intervalId = setInterval(function () {
                timer--;
                updateTimerDisplay(timerDisplay, timer);

                if (timer <= 0) {
                    clearInterval(intervalId);
                    timerDisplay.style.display = 'none'; // Hide the timer
                    if (!$('#otp_verified_tick').is(':visible')) {
                        resendLink.style.display = 'inline-block'; // Show the resend link if OTP is not verified
                    }
                    resendLink.disabled = false; // Re-enable the resend button
                }
            }, 1000);
        }

        // Function to update the timer display
        function updateTimerDisplay(timerDisplay, timeLeft) {
            var minutes = Math.floor(timeLeft / 60);
            var seconds = timeLeft % 60;
            var formattedTime = (minutes < 10 ? '0' : '') + minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
            timerDisplay.textContent = "Resend OTP in " + formattedTime; // Concatenate text with formatted time
        }

    });
</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.getElementById('mydb');
    let isScrollingDB;  // Unique variable for mydb

    // 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
    });

    // Add mouseleave event to revert button position when mouse leaves
    mydb.addEventListener('mouseleave', function () {
        mydb.classList.remove('scrolled');
    });

    let myns = document.getElementById('myns');
    let isScrollingNS;  // Unique variable for myns

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

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

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

    // Add mouseleave event to revert button position when mouse leaves
    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>