HOME

Mini Shell 1.0
DIR:/home/costmasters.in/www/application/modules/frontend/views/parts/
Current File : /home/costmasters.in/www/application/modules/frontend/views/parts/footer.php
<div id="loader" style="display: none;">
    <img src="<?= base_url('assets/frontend/images/3dgifloader.gif') ?>" alt="Loading..." />
</div>
</style>
<footer class="footer">
    <div id="contact"></div>
    <div class="container">
        <div class="row">
            <div class="col-sm-12 col-md-4 ">
                <div class="wg-1">
                    <div class="ft-logo">
                        <a href="#">
                            <img src="<?= base_url('uploads/site_logo/') . $sitelogo; ?>" alt="image" width="250" height="50" />
                        </a>
                    </div>
                    <h4>Our Services</h4>
                    <ul>
                        <li><a href="<?= base_url() ?>raw-material">Raw Material Price Tracking services</a></li>
                        <li>
                            <a href="<?= 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="<?= base_url() ?>saas">Sourcing As A Service</a></li>
                        <li><a href="<?= base_url() ?>paas">Procurement As A Service</a></li>
                        <li><a href="<?= base_url() ?>cost-optimizer">Cost Optimizer</a></li>
                    </ul>
                    <div class="icon-ft">
                        <a href="<?= $footerSocialFacebook ?>" target="_blank" aria-label="Visit our Facebook page">
                            <i class="fa fa-facebook"></i>
                        </a>
                        <a href="https://www.linkedin.com/company/costmasters-india/" target="_blank" aria-label="Visit our linkedin page">
                            <i class="fa fa-linkedin"></i>
                        </a>
                        <a href="<?= $footerSocialTwitter ?>" target="_blank" aria-label="Visit our Twitter page">
                            <i class="fa fa-twitter"></i>
                        </a>
                        <a href="<?= $footerSocialInstagram ?>" target="_blank" aria-label="Visit our Instagram page">
                            <i class="fa fa-instagram"></i>
                        </a>
                        <!-- <a href="#" target="_blank"><i class="fa fa-google"></i></a> -->
                    </div>
                </div>
            </div>

            <div class="col-sm-12 col-md-4 ">
                <div class="wg-1">
                    <h4>Latest Commodity Price Trends <span>(More articles in "Blog" Tab)</span></h4>
                    <div class="news-post">
                        <div id="post"></div>
                    </div>
                    <!--/ news-post -->
                </div>
            </div>

            <div class="col-sm-12 col-md-4 custom_contact_sec ">
                <div class="wg-1">
                    <h4>Contact Us</h4>
                    <address>
                        <div>
                            <p>
                                <h4>Address:</h4>
                            <p>
                                <a href="https://maps.app.goo.gl/EcDgJRbatxHRz7Di7" target="_blank">
                                    <?= $footerContactAddr ?>
                                </a>
                            </p>
                            </p>
                        </div>
                    </address>
                    <address>
                        <div>
                            <p>
                                <h4>Email Us:</h4>
                                <a href="mailto:<?= $contactsEmailTo ?>">
                                    <?= $contactsEmailTo ?>
                                </a><br>
                                <a href="mailto:<?= $footerContactEmail ?>">
                                    <?= $footerContactEmail ?>
                                </a>
                            </p>
                        </div>
                    </address>
                    <address>
                        <div>
                            <p>
                                <h4>Call Us:</h4>
                                <a href="tel:+91-<?= $footerContactPhone ?>">
                                    G.K Purba - +91-<?= $footerContactPhone ?>
                                </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-flex-end justify-content-md-between flex-wrap">
                            <li class="first_anchor"><a href="<?= base_url('#about-us') ?>">About Us</a></li>
                            <li><a href="<?= base_url('terms-of-use') ?>">Terms of Use</a></li>
                            <li><a href="<?= base_url('privacy_policy') ?>">Privacy Policy</a></li>
                            <li><a href="<?= base_url('refund_cancellation') ?>">Refund and Cancellation</a></li>
                            <li><a href="<?= base_url('sitemap.xml') ?>">Sitemap</a></li>
                            <li><a href="<?= base_url() ?>blog" target="_blank">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">
                        Copyright &copy; 2013-<?php echo date("Y"); ?>
                        <a href="<?= base_url() ?>" target="_blank" class="makerCss">CostMasters</a> |
                        <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_modal_home" id="DemoModal" tabindex="-1" 
    aria-labelledby="DemoModalLabel"  aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" >
        <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">
                    <span aria-hidden="true" style="color: white;">&times;</span>
                </button>
            </div>
           <div class="modal-body">
            <div class="row">
                <div class="col-sm-12">
                    <form method="POST" id="demo_request" action="">
                        <div class="form-group first_req">
                            <div class="col-sm-12 col-md-6 padding_left_cs" >
                            <div class="input-group custom_email_box">
                                <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="email_verified_tick"  style="display: none;"></i>
                                <button type="button" id="send_email_otp_btn" data-email-id="book_email" data-contact-id="book_contact1" data-otp-group="otp_group1" data-otp-timer="otptimer1" data-otp-verified-tick="email_verified_tick" style="display: none;">Send OTP to Email</button>
                            </div>
                            <span class="error" id="book_email_error"><?php echo form_error('book_email'); ?></span>
                        </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_contact1">
                                            <!-- Mobile Verified Tick Icon -->
                                    <i class="fa fa-check-circle text-success verified_tick" id="mobile_verified_tick"  style="display: none;"></i>
                                    <span id="valid-msg" class="hide">✓ Valid</span>
                                    <div class="input-group-append">
                                        <button type="button" class="btn btn-sm btn-primary verify send-otp-btn" id="send_otp_btn1" data-contact-id="book_contact1" data-otp-group="otp_group1" data-otp-timer="otptimer1" data-otp-verified-tick="mobile_verified_tick" style="display: none;">OTP</button>
                                    </div>
                                </div>                                
                                <span class="error" id="book_contact_error"><?php echo form_error('book_contact'); ?></span>
                            </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_group1" >Cancel</button>
                                        <button type="button" class="btn btn-sm btn-primary verify verify-otp-btn" id="verify_otp_btn1" 
                                        data-otp-id="verify_otp1" data-contact-id="book_contact1" data-email-id="book_email" data-otp-group="otp_group1" data-otp-timer="otptimer1" 
                                        data-otp-verified-tick="mobile_verified_tick" style="display: none;">Verify</button>
                                        <button type="button" class="btn btn-sm btn-primary verify resent-otp-btn" id="resent_otp_btn1" data-otp-id="resent_otp1" data-contact-id="book_contact1"   data-email-id="book_email" data-otp-group="otp_group1"  data-otp-timer="otptimer1" data-otp-verified-tick="mobile_verified_tick" style="display: none;">Resent OTP</button>
                                    </div>
                                </div>
                                    <span id="otptimer1" style="display: none;"></span>
                                    <input type="hidden" placeholder="OTP" class="form-control" name="verify_otp" id="verify_otp1" maxlength="4">
                            <span id="otp_verification_status1"></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">
                                <span class="error"><?php echo form_error('book_name'); ?></span>
                            </div>
                            <div class="col-sm-12 col-md-6 padding_right_cs">
                                <input type="text" placeholder="Organisation" class="form-control" name="book_organisation">
                                <span class="error"><?php echo form_error('book_organisation'); ?></span>
                            </div>
                        </div>
                        <div class="form-group list">
                            <label class="lc_label">Product of Interest<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_demo">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="select_all_commodities" style="margin-bottom:1px;"> Select All
                                    </label>
                                </div>
                                <div id="commodities_list"></div>
                            </div>   
                        </div>                         
                        <div class="form-group">
                            <div class="col-sm-12 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"
                                    placeholder="Select Preferred Time Slot for Demo">
                                    <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
                                    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="current-url" value="">
                            <input type="hidden" name="contactNo" id="contactNo" value="">
                        </div>
                        <div class="form-group custom_txt_area">
                            <textarea class="form-control" name="book_message" placeholder="Please write your message here"></textarea>
                        </div>
                        <div class="">
                            <input type="hidden" id="is_mobile_verified" value="0">
                             <input type="hidden" id="is_email_verified" value="0">
                            <!-- <input type="hidden" id="is_otp_verified" name="is_otp_verified" value="0"> -->
                        </div>
                        <div class="">
                            <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">
    <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>
            <div class="carousel-inner carousel-foot">
            </div>
        </div>
    </div>
    <!--/ body -->
</div>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;500;600;700;800;900&display=swap"
    rel="stylesheet">
<!-- Custom Fonts -->
<link href="<?= base_url(); ?>assets/front/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" defer>
<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" media="all">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
<!-- magnific popup -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css" />
<script async="async" src="https://cdn.jsdelivr.net/npm/isotope-layout@3.0.6/dist/isotope.pkgd.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
    // Get the current URL segment
    let url = window.location.href;
    let urlObject = new URL(url);
    let segments = urlObject.pathname.split('/').filter(Boolean);
    let currentUrl = segments.length ? segments.pop() : 'home';

    if (!currentUrl || currentUrl === '/' || currentUrl.includes('costmasters.in')) {
        currentUrl = 'home';
    }

    document.getElementById('current-url').value = currentUrl;

    // Slideout functionality
    const slideout = document.querySelector('.slideout');
    const handle = slideout.querySelector('.handle');
    handle.onclick = () => slideout.classList.toggle('active');

    // Fetch products list and append checkboxes
    const checkboxWrapper = $('#checkbox_wrapper');
    $.getJSON('<?php echo base_url(); ?>api/product_list', function (data) {
        if (Array.isArray(data)) {
            data.forEach(product => {
                if (product.product_status === "ON") {
                    let checkboxHtml = `
                        <div class="col-md-6">
                            <div class="form-check">
                                <input class="form-check-input product-checkbox" type="checkbox" 
                                       id="product_${product.product_name}" name="services[]" 
                                       value="${product.product_id}">
                                <label class="form-check-label" for="product_${product.product_name}">
                                    ${product.product_name}
                                </label>
                            </div>
                        </div>`;
                    checkboxWrapper.append(checkboxHtml);
                }
            });
        }
    }).fail(error => console.error('Error fetching products:', error));

    // Fetch commodities list
    function fetchCommodities() {
        $.getJSON('<?php echo base_url(); ?>api/commodity_list', function (data) {
            let commoditiesList = $('#commodities_list');
            commoditiesList.empty();

            if (Array.isArray(data) && data.length > 0) {
                let commoditiesHtml = '<div class="commodities-grid">';
                data.forEach(category => {
                    commoditiesHtml += `
                        <div class="commodity-item">
                            <input class="commodity-checkbox" type="checkbox" id="commodity_${category.id}" 
                                   name="commodities[]" value="${category.id}">
                            <label for="commodity_${category.id}">${category.category_name}</label>
                        </div>`;
                });
                commoditiesHtml += '</div>';
                commoditiesList.html(commoditiesHtml);
                $('#commodities_wrapper').show();
            } else {
                $('#commodities_wrapper').hide();
            }
        }).fail(error => console.error('Error fetching commodities:', 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;
    
        $('#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', '#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);
        }
    });

    // Show/hide commodities based on product selection
    $(document).on('change', '.product-checkbox', function () {
        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);
        }
    });

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

        if (isFreeTrialChecked) {
            $('.select-all').hide();
            $('#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 () {
        let disabledUrls = ['login', 'subscribe', 'subscribe/subscribe_second', 'subscribe/subscribe_third', 'careers-with-us'];
        let currentUrl = window.location.href;
        let isDisabled = disabledUrls.some(url => currentUrl.includes(url));

        if (!isDisabled && !$('#DemoModal').hasClass('show')) {
            $('#DemoModal').modal('show');
        }
    }, 20000);

    // Close modal on button click
    $('.modal .close').click(function () {
        $(this).closest('.modal').modal('hide');
    });
});
</script>
<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>    
$(document).ready(function () {
    let lastValidNumber = "";
    let lastEmail = "";
    let iti;
    var otpTimers = {};
    let otpSent = false;
    let lastPhoneNumber = "";
    let lastNonIndianNumber = "";
    let lastOtpEmail = "";

    // Toastr configuration
    toastr.options = {
        closeButton: true,
        progressBar: true,
        positionClass: 'toast-top-right',
        showDuration: '300',
        hideDuration: '1000',
        timeOut: '3000',
        extendedTimeOut: '1000'
    };

    // Restrict input to only numeric values
    $('input[type="tel"], .otp-box').on('input', function () {
        $(this).val($(this).val().replace(/[^0-9]/g, ''));
    });

    // Initialize intlTelInput
    let contactInput = document.querySelector("#book_contact1");
    if (contactInput) {
        iti = window.intlTelInput(contactInput, {
            initialCountry: "in",
            separateDialCode: true,
            nationalMode: true,
            utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js"
        });
    }

    // Define phone number lengths by country
    const phoneLengthByCountry = {
        "IN": 10, "US": 10, "GB": 10, "JP": 10, "AE": 9, "FR": 9, "AU": 9
    };

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

    function clearError(selector) {
        $(selector).text("").hide();
    }

    $("#book_contact1").on("input", function () {
        let phoneNumberField = $(this);
        if (!iti) return console.error("IntlTelInput instance not initialized.");
        
        let countryData = iti.getSelectedCountryData();
        if (!countryData) return console.error("Country data not found.");
        
        let countryCode = countryData.iso2.toUpperCase();
        let maxLength = phoneLengthByCountry[countryCode] || 10;

        let phoneNumber = phoneNumberField.val().replace(/\D/g, '').substring(0, maxLength);
        phoneNumberField.val(phoneNumber);

        let formattedNumber = iti.getNumber().replace(/\s+/g, '');
        let isValid = iti.isValidNumber();

        let isEmailVerified = $("#is_email_verified").val() === "1";
        let isMobileVerified = $("#is_mobile_verified").val() === "1";

        // Reset mobile verification if number has changed
        if (formattedNumber !== lastPhoneNumber) {
            $("#is_mobile_verified").val("0");
            otpSent = false;
        }

        if ((isValid || otpSent || isMobileVerified || isEmailVerified)) {
            clearError("#book_contact_error");
        }

        if (isValid && formattedNumber !== lastPhoneNumber && !otpSent && !isMobileVerified && !isEmailVerified) {
            lastPhoneNumber = formattedNumber;
            $("#book_contact_error").hide();

            if (countryCode === "IN") {
                if (!/^\+91[6789]\d{9}$/.test(formattedNumber)) {
                    return showError("#book_contact_error", "Enter a valid 10-digit number.");
                }
                otpSent = true;
                sendOtp($('#send_otp_btn1'), phoneNumber);
            } else {
                // Non-Indian logic — only send OTP if email is new
                let email = $("#book_email").val().trim();
                if (!validateEmail(email)) {
                    return showError("#book_contact_error", "Please enter a valid email to receive OTP.");
                }

                if (email !== lastOtpEmail) {
                    otpSent = true;
                    lastOtpEmail = email;
                    lastNonIndianNumber = formattedNumber;
                    sendEmailOtp($('#send_email_otp_btn'), email);
                } else {
                    console.log("OTP already sent for this email. No resend on number update.");
                }
            }
        } else {
            if (!isValid && !otpSent && !isMobileVerified && !isEmailVerified) {
                showError("#book_contact_error", "Invalid number for " + countryData.name);
                $("#send_otp_btn1, #send_email_otp_btn").hide();
            }
        }
    });

    // Validate phone number before form submission
    function validatePhoneNumber() {
        let contact = $('#book_contact1');
        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;
    }

    $('#book_email').on('change', function () {
        let email = $(this).val().trim();
        let isEmailVerified = $('#is_email_verified').val() === '1';
        if (email === lastEmail || isEmailVerified) return console.log("Email not changed or already verified.");
        lastEmail = email;
        if (validateEmail(email)) {
            let countryData = iti ? iti.getSelectedCountryData() : null;
            if (countryData && countryData.iso2.toUpperCase() !== 'IN') {
                console.log('Non-Indian number detected. Sending OTP to email...');
                sendEmailOtp($('#send_email_otp_btn'), email);
            }
        } else {
             toastr.warning('Please enter a valid email.');
        }
    });

    // Function to send OTP via email
    function sendEmailOtp(button, email) {
        const otpGroupClass = $(button).data("otp-group");
        const otpTimerId = $(button).data("otp-timer");
        if (!validateEmail(email)) {
            toastr.warning("Please enter a valid email to receive OTP.", "Invalid Email");
            return;
        }
        disableButton(button, "Sending");
        $.ajax({
            type: "POST",
            url: "<?= base_url('api/send_otp_email'); ?>",
            data: { 
                email: email,
                "<?= $this->security->get_csrf_token_name(); ?>": "<?= $this->security->get_csrf_hash(); ?>"
            },
            dataType: "json",
            success: function (response) {
                if (response.status === "true") {
                    handleOtpSent(button, otpTimerId, otpGroupClass, "OTP has been sent to your email.");
                    $("#book_email").attr("readonly", true);
                } else {
                    handleOtpError(button, response.error || "Failed to send OTP.");
                }
            },
            error: function () {
                handleOtpError(button, "Something went wrong. Please try again.");
            }
        });
    }

    // Function to validate email format
    function validateEmail(email) {
        return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
    }

    // Function to send OTP via SMS
    function sendOtp(button, phoneNumber) {
        if (!phoneNumber) {
            toastr.error("Phone number is required.", "Missing Information");
            return;
        }
        const contactId = $(button).data("contact-id");
        const otpGroupClass = $(button).data("otp-group");
        const otpTimerId = $(button).data("otp-timer");
        disableButton(button, "Sending");
        $.ajax({
            type: "POST",
            url: "<?= base_url('api/send_otp'); ?>",
            data: { 
                contactNo: phoneNumber,
                "<?= $this->security->get_csrf_token_name(); ?>": "<?= $this->security->get_csrf_hash(); ?>"
            },
            dataType: "json",
            success: function (response) {
                if (response.status === "true") {
                    handleOtpSent(button, otpTimerId, otpGroupClass, "OTP sent successfully to your mobile.");
                    $("#" + contactId).attr("readonly", true);
                } else {
                    handleOtpError(button, response.error || "Failed to send OTP.");
                }
            },
            error: function () {
                handleOtpError(button, "An error occurred while sending OTP.");
            }
        });
    }

    // Function to resend OTP
    function resendOtp(button) {
        let contactId = $(button).data("contact-id");
        let emailId = $(button).data("email-id");
        let otpTimerId = $(button).data("otp-timer");
        let contactNo = $.trim($("#" + contactId).val());
        let email = $.trim($("#" + emailId).val());
        if (!contactNo && !email) {
            toastr.warning("Please enter a contact number or email to resend OTP.", "Missing Information");
            return;
        }

        let countryCode = iti ? iti.getSelectedCountryData().iso2.toUpperCase() : "";
        if (countryCode === "IN") {
            sendOtp(button, contactNo);
        } else {
            sendEmailOtp(button, email);
        }
        $(".otp-box").val(""); // Clear OTP input fields
        disableButton(button, "Resent OTP");
        startOtpTimer(otpTimerId, button);
    }

    // Function to handle successful OTP sent response
    function handleOtpSent(button, otpTimerId, otpGroupClass, successMessage) {
        toastr.success(successMessage, "OTP Sent");
        clearInterval(otpTimers[otpTimerId]);
        $("#" + otpTimerId).show().text("Resent OTP");
        $("#" + otpGroupClass).show();
        startOtpTimer(otpTimerId, button);
        $(button).prop("disabled", true).text("Resent OTP").hide();
    }

    // Function to handle OTP errors
    function handleOtpError(button, errorMessage) {
        toastr.error(errorMessage, "Error");
        $(button).prop("disabled", false).text("Resent OTP");
    }

    // Function to disable button with loading text
    function disableButton(button, text) {
        $(button).prop("disabled", true).text(text);
    }

    // Start OTP Timer
    function startOtpTimer(otpTimerId, button) {
        let timeLeft = 60; // Time in seconds
        otpTimers[otpTimerId] = setInterval(() => {
            let minutes = Math.floor(timeLeft / 60);
            let seconds = timeLeft % 60;
            let formattedTime = `${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
            if (timeLeft <= 0) {
                clearInterval(otpTimers[otpTimerId]);
                $(`#${otpTimerId}`).text('You can resend OTP now.');
                $('.resent-otp-btn').show(); // Show resend button
                $(button).prop('disabled', false).text("Resent OTP"); // Re-enable the button
            } else {
                $(`#${otpTimerId}`).text(`Resent OTP in ${formattedTime}`);
            }
            timeLeft--;
        }, 1000);
    }

    // Helper function to retrieve and combine OTP values
    function getCombinedOtp() {
        return $('.otp-box').map(function () {
            return $.trim($(this).val());
        }).get().join('');
    }

    // Verify OTP via AJAX
    function verifyOtp(button) {
        const $button = $(button);

        // Retrieve data attributes from button
        const contactId = $button.data('contact-id'); // e.g. "book_contact1"
        const emailId = $button.data('email-id'); // e.g. "book_email"
        const otpGroupClass = $button.data('otp-group'); // e.g. "otp_group1"
        const otpTimerId = $button.data('otp-timer'); // e.g. "otptimer1"
        const otpVerifiedTickId = $button.data('otp-verified-tick'); // e.g. "mobile_verified_tick"
        let selectedCountry = iti.getSelectedCountryData();
        let countryCode = selectedCountry.iso2;
        console.log("Verify button data:", { contactId, emailId });
        // Get OTP, contact number, and email values
        let otp = getCombinedOtp();
        let contactNo = $.trim($(`#${contactId}`).val());
        let email = $.trim($(`#${emailId}`).val());
        console.log("Combined OTP:", otp);
        console.log("Contact No:", contactNo, "Email:", email);
        // Validate OTP: Ensure it’s exactly 4 digits
        if (!/^\d{4}$/.test(otp)) {
            toastr.warning('Please enter a valid 4-digit OTP.', 'Invalid OTP');
            return;
        }

        $.ajax({
            type: 'POST',
            url: '<?php echo base_url(); ?>api/verify_otp',
            data: { otp, countryCode: countryCode || null, contact_no: contactNo || null, email: email || null },
            dataType: 'json',
            success: function (response) {
                console.log("Response from verify_otp:", response);
                if (response.status === 'true') {
                    toastr.success(response.message || 'OTP verified successfully.', 'OTP Verified');
                    // Hide OTP group and button after successful verification
                    $(`#${otpGroupClass}`).hide();
                    $button.hide();
                    if (response.verified === 'mobile') {
                        $('#mobile_verified_tick').show();
                        $('#is_mobile_verified').val('1');
                        $('#email_verified_tick').hide();
                    } else if (response.verified === 'email') {
                        $('#email_verified_tick').show();
                        $('#is_email_verified').val('1');
                        $('#mobile_verified_tick').hide();
                    }

                    $('.send-otp-btn').hide();
                    $(`#${otpTimerId}`).hide();

                    // Clear the OTP timer if active
                    if (otpTimers[otpTimerId]) {
                        clearInterval(otpTimers[otpTimerId]);
                    }
                } else {
                    toastr.error(response.error || 'Invalid OTP. Please try again.', 'Invalid OTP');
                    $('#is_mobile_verified').val('0');
                    $('#is_email_verified').val('0');
                }
            },
            error: function (error) {
                console.error('Error in verify_otp AJAX:', error);
                toastr.error('Error in verifying OTP.', 'Error');
                $('#is_mobile_verified').val('0');
                $('#is_email_verified').val('0');
            }
        });
    }

    // Function to validate OTP and then trigger verification
    function validateOtp() {
        const otpValues = getCombinedOtp().trim();
        console.log("Entered OTP:", otpValues);

        // Validate OTP format: 4-digit numeric
        if (!/^\d{4}$/.test(otpValues)) {
            toastr.error('Invalid OTP. Please enter a 4-digit number.', 'Error');
            return;
        }
        let contactInput = document.querySelector("#book_contact1");
        if (!contactInput) {
            toastr.warning('Contact input field not found.', 'Warning');
            return;
        }
        let iti = window.intlTelInputGlobals.getInstance(contactInput);
        if (!iti) {
            toastr.warning('Phone input is not initialized.', 'Warning');
            return;
        }
        // Get number in NATIONAL format and clean it up
        let contactNo = iti.getNumber(intlTelInputUtils.numberFormat.NATIONAL) || contactInput.value.trim();
        contactNo = contactNo.replace(/\s+/g, '').replace(/^0+/, ''); // Remove spaces and leading zeros
        console.log("Processed Contact Number (Without Country Code):", contactNo);
        if (!iti.isValidNumber() || contactNo.length === 0) {
            toastr.warning('Invalid or missing contact number.', 'Warning');
            return;
        }
        // Trigger verification via button click
        let verifyButton = document.getElementById('verify_otp_btn1');
        if (verifyButton) {
            verifyOtp(verifyButton);
        } else {
            toastr.warning('Verification button not found.', 'Warning');
        }
    }

    // Cancel action handler to reset OTP inputs and timer
    $(document).on('click', '.cancel-btn', function () {
        const otpGroup = $(this).data('otp-group'); // OTP input group
        const otpTimerId = $(this).data('otp-timer'); // Timer ID
        // Hide OTP input fields and related UI elements
        $('#' + otpGroup).hide();
        $('.resent-otp-btn, #send_email_otp_btn').hide();
        $('#book_contact1, #book_email').prop('readonly', false);
        $('.otp-box').val(''); // Clear OTP fields
        // Stop & remove the countdown timer safely
        if (window.otpTimers?.[otpTimerId]) {
            clearInterval(window.otpTimers[otpTimerId]);
            delete window.otpTimers[otpTimerId];
        }
        $('#' + otpTimerId).hide(); // Hide timer
    });

    // OTP Input Event Handling using Vanilla JS
    document.querySelectorAll('.otp-box').forEach((box, index, boxes) => {
        box.addEventListener('input', function (e) {
            let val = this.value.trim();

            // Allow only numeric values
            if (!/^\d$/.test(val)) {
                this.value = ''; // Clear invalid input
                return;
            }

            // Move to the next box if a digit is entered
            if (val.length === 1 && index < boxes.length - 1) {
                boxes[index + 1].focus();
            }

            // If last box is filled, validate OTP after a short delay
            if (index === boxes.length - 1 && val.length === 1) {
                setTimeout(validateOtp, 100);
            }
        });

        box.addEventListener('keydown', function (e) {
            // Allow only numbers and Backspace
            if (!/^\d$/.test(e.key) && e.key !== 'Backspace' && e.key !== 'Tab') {
                e.preventDefault();
            }

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

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

        console.log("Combined OTP:", otpValues);
        $('#verify_otp1').val(otpValues);
    });

    $(document).on('click', '.resent-otp-btn', function () {
        resendOtp(this);
    });

    $(document).on('click', '.verify-otp-btn', function () {
        verifyOtp(this);
    });

    // Validate form fields
    function validateForm() {
        var isValid = true;

        // Get elements
        let contactInput = document.querySelector("#book_contact1");
        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);
                console.log('Please enter',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_mobile_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;
    }

    // Form Submit
    $('#demo_request').submit(function (e) {
        e.preventDefault(); // Prevent default form submission
        var isValid = validateForm(); // Implement your validation logic
        if (isValid) {
            var formData = $(this).serialize();
            console.log(formData);
            // Disable submit button to prevent multiple submissions
            $('#demo_request').find(':submit').prop('disabled', true);
            $.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) {
                    if (response.status) {
                        toastr.success(response.message || 'Form submitted successfully!', 'Success');
                        // Reset the form and modal
                        $('#demo_request')[0].reset();
                        $('#DemoModal').modal('hide');
                        $('#mobile_verified_tick, #email_verified_tick').hide();
                        $('#is_email_verified, #is_mobile_verified').val('0');
                        $('#book_contact1, #book_email').attr('readonly', false);
                        $('#commodities_wrapper, #free_trail').hide();
                        // Send confirmation email if function exists
                        if (typeof sendEmailAfterSuccess === 'function') {
                            sendEmailAfterSuccess(response.save_data, response.services);
                        }
                    } else {
                        toastr.error(response.message || 'An error occurred.', 'Error');
                        if (response.message === 'This email address is already registered.') {
                            $('#book_email').addClass('is-invalid');
                            $('.otp-box').val('');
                            $('#book_email').attr('readonly', false);
                            $('#is_email_verified').val('0');
                            $('#email_verified_tick').hide();
                        }
                    }
                },
                error: function () {
                toastr.error('Error submitting the form. Please try again later.', 'Error');
                },
                complete: function () {
                    // Re-enable submit button
                    $('#demo_request').find(':submit').prop('disabled', false);
                }
            });
        }
    });

    // Function to send the email after success message
    function sendEmailAfterSuccess(save_data, services) {
        $.ajax({
            type: 'POST',
            url: '<?php echo base_url(); ?>api/send_email', // Adjust the URL for the email API
            data: { save_data: save_data, services: services }, // Send both data parameters
            dataType: 'json',
            success: function (response) {
                if (response.status) {
                    toastr.success(response.message, 'Success'); // Show success toastr message
                } else {
                    toastr.error(response.message, 'Error');
                }
            },
            error: function () {
                toastr.error('Error sending email. Please try again later.', 'Email');
            }
        });
    }
});    
</script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<script>
    $('.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;
    });
    $(document).ready(function () {
        var popup_btn = $('.popup-btn');
        $('.popup-btn').magnificPopup({
            type: 'image',
            gallery: {
                enabled: true
            }
        });
    });
</script>
<!-- Bootstrap Core JavaScript -->
<script src="<?= base_url(); ?>assets/front/js/bootstrap.min.js"></script>
<script src="<?= base_url(); ?>assets/front/js/script.js"></script>
<script src="<?= base_url(); ?>assets/front/js/owl.carousel.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js" async="async"></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));
        }
    });
});
$(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: 'https://www.costmasters.in/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 match = content.match(/<img.*?src="(.*?)"/);
                var firstImage = match ? match[1] : ''; 
                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(post.content.rendered);
                                // console.log(firstImage);

                const myArray = firstImage.split("https://www.costmasters.in");
                var postHtml = '<div class="post"><div class="image"><a href="' + link +
                    '" target="_blank"><img src="' + firstImage + '" alt="' + title +
                    '" loading="lazy"></a></div><h5><a href="' + link + '" target="_blank">' + title +
                    '</a></h5><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);
            });
        }
    });
});


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>
</body>
</html>