product not matched<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<style>
    .login-div {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .service-modal input {
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 10px;
    }

    a {
        text-decoration: none !important;
        color: #871178;
    }

    .book-ser:hover {
        color: #fff !important;
    }


    .post-card1 {
        box-shadow: 0px 3px 6px #00000029;
        margin: 18px 0px;
        border-radius: 0px;
        padding: 10px;
    }

    .avatar1 {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .avatar1 img {
        margin-right: 5px;
    }

    .shop-btn {
        display: flex;
        justify-content: flex-end;
    }

    .purple-btn-sm {
        background: linear-gradient(#871178, #3c1378) !important;
        height: 26px;
        border: 0;
        width: 69px;
        border-radius: 16px !important;
        text-align: center;
        text-transform: capitalize;
        font-size: 12px;
        color: #fff;
        margin-top: 8px;
    }

    .second {
        margin-top: 12px;
        padding-top: 10px;
    }

    .second .avatar div {
        width: 40px;
        height: 40px;
    }

    .lorem {
        color: #707070;
        line-height: 20px;
        font-size: 12px;
        padding: 0.625em;
    }

    .lorem p {
        margin-bottom: 0px;
        width: 100%;
        margin-top: 0px;
    }

    .read {
        color: #871178;
        text-align: right;
        width: 100%;
    }

    .user-name {
        color: #22272a;
        font-size: 16px;
        margin: 0px;
    }

    .time {
        color: #9f9f9f;
        font-size: 10px;
        line-height: 2;
        margin: 0px;
    }

    input {
        --background: #f5f5f5;
        border: 1px solid #ccc;
        border-radius: 50px;
        --padding-bottom: 8px;
        --padding-top: 8px;
        --padding-start: 16px;
    }

    .mic-icon {
        background: linear-gradient(#871178, #3c1378) !important;
        color: #fff;
        font-size: 18px;
        padding: 10px;
        border-radius: 50px;
    }

    .mic-col {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    textarea {
        border: 1px solid #dfdfdf;
        border-radius: 5px;
        padding: 10px;
        width: 100%;
    }

    .chatbot__button {
        position: fixed;
        bottom: 60px;
        right: 40px;
        width: 64px;
        height: 64px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #227ebb;
        color: #f3f7f8;
        border: none;
        border-radius: 50%;
        outline: none;
        cursor: pointer;
        z-index: 9999;
    }

    .chatbot__button span {
        position: absolute;
    }

    .show-chatbot .chatbot__button span:first-child,
    .chatbot__button span:last-child {
        opacity: 0;
    }

    .show-chatbot .chatbot__button span:last-child {
        opacity: 1;
    }

    .chatbot {
        position: fixed;
        bottom: 40px;
        right: -40px;
        width: 420px;
        background-color: #f3f7f8;
        border-radius: 15px;
        box-shadow: 0 0 128px 0 rgba(0, 0, 0, 0.1) 0 32px 64px -48px rgba(0, 0, 0, 0.5);
        transform: scale(0.5);
        transition: transform 0.3s ease;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
    }

    .show-chatbot .chatbot {
        opacity: 1;
        pointer-events: auto;
        transform: scale(0.7);
        z-index: 9999;
    }

    .chatbot__header {
        position: relative;
        background-color: #871178;
        text-align: left;
        padding: 16px 0;
        padding-left: 21px;
    }

    .chatbot__header span {
        display: none;
        position: absolute;
        top: 50%;
        right: 20px;
        color: #202020;
        transform: translateY(-50%);
        cursor: pointer;
    }

    .chatbox__title {
        font-size: 1.4rem;
        color: #f3f7f8;
        font-weight: bold;
    }

    .chatbot__box {
        height: 510px;
        overflow-y: auto;
        padding: 30px 20px 100px;
    }

    .chatbot__chat {
        display: flex;
    }

    .chatbot__chat p {
        max-width: 75%;
        font-size: 0.95rem;
        white-space: pre-wrap;
        color: #202020;
        background-color: #019ef9;
        border-radius: 10px 10px 0 10px;
        padding: 12px 16px;
    }

    .chatbot__chat p.error {
        color: #721c24;
        background: #f8d7da;
    }

    .incoming p {
        color: #202020;
        background: #bdc3c7;
        border-radius: 10px 10px 10px 0;
    }

    .incoming span {
        width: 32px;
        height: 32px;
        line-height: 32px;
        color: #f3f7f8;
        background-color: #227ebb;
        border-radius: 4px;
        text-align: center;
        align-self: flex-end;
        margin: 0 10px 7px 0;
    }

    .outgoing {
        justify-content: flex-end;
        margin: 20px 0;
    }

    .incoming {
        margin: 20px 0;
    }

    .chatbot__input-box {
        position: absolute;
        bottom: 0;
        width: 100%;
        display: flex;
        gap: 5px;
        align-items: center;
        border-top: 1px solid #871178;
        background: #f3f7f8;
        padding: 5px 20px;
    }

    .chatbot__textarea {
        width: 100%;
        min-height: 55px;
        max-height: 180px;
        font-size: 0.95rem;
        padding: 16px 15px 16px 0;
        color: #202020;
        border: none;
        outline: none;
        resize: none;
        background: transparent;
    }

    .chatbot__textarea::placeholder {
        font-family: 'Poppins', sans-serif;
    }

    .chatbot__input-box span {
        font-size: 1.75rem;
        color: #202020;
        cursor: pointer;
        visibility: hidden;
    }

    .chatbot__textarea:valid~span {
        visibility: visible;
    }

    @media (max-width: 490px) {
        .chatbot {
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            border-radius: 0;
        }

        .chatbot__box {
            height: 90%;
        }

        .chatbot__header span {
            display: inline;
        }
    }

    .wrong-otp {
        font-size: 14px;
        color: #871178;
        border-bottom: 1px solid #871178;
        width: fit-content;
        float: right;
        cursor: pointer;
    }
</style>

<section class="section downloadAppSection">
    <p>Download our Topiko app in</p>
    <div class="d-flex appLogos">
        <a href="https://play.google.com/store/apps/details?id=com.vab.topiko&pcampaignid=web_share"
            target="_blank"></a>
        <a href="https://apps.apple.com/in/app/topiko/id1614072211" target="_blank"></a>
    </div>
</section>

<div class="modal fade" id="loginModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
    aria-labelledby="loginbackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" style="padding: 20px;">
        <div class="modal-content service-modal" style="border-radius: 0px;">
            <div class="modal-header">
                <h6 style="width: 100%; text-align: center; margin-left: 16px;color:871178"> Login your Account</h6>
                <button type="button" class="btn-close" onclick="closeLoginModal()"> </button>
            </div>

            <div class="modal-body">
                <div id="login-modal-div">
                    <div class="login-div">
                        <img style="width: 80px;" src="https://topiko.com/subdomain/assets/logo-default.png" alt="">
                    </div>
                    <div style="display: flex; flex-direction: column; width: 100%;">
                        <p style="margin-bottom: 0px;">Mobile Number</p>
                        <input type="text" name="loginMobile" id="loginMobile" style="border: none; border-bottom: 1px solid #cccc;
                        border-radius: 0;" required maxlength="10">
                    </div>
                    <div class="row" style="margin-top: 30px;">
                        <p>Mpin</p>
                        <div class="col-3 mpin">
                            <input style=" border-radius: 0; width: 75%; text-align: center;" type="tel" maxlength="1"
                                id="mpin1" onkeyup="gotoNextField(this.value, 'mpin2')" required>
                        </div>
                        <div class="col-3 mpin">
                            <input style=" border-radius: 0; width: 75%; text-align: center;" type="tel" maxlength="1"
                                class="tel" id="mpin2" onkeyup="gotoNextField(this.value, 'mpin3')"
                                onkeydown="backspace(event,'mpin2', 'mpin1')" required>
                        </div>
                        <div class="col-3 mpin">
                            <input style=" border-radius: 0; width: 75%; text-align: center;" type="tel" maxlength="1"
                                class="tel" id="mpin3" onkeyup="gotoNextField(this.value, 'mpin4')"
                                onkeydown="backspace(event,'mpin3', 'mpin2')" required>
                        </div>
                        <div class="col-3 mpin">
                            <input style=" border-radius: 0; width: 75%; text-align: center;" type="tel" maxlength="1"
                                class="tel" id="mpin4" onkeydown="backspace(event,'mpin4', 'mpin3')" required>
                        </div>
                    </div>
                    <div class="login-div" style="display: flex;justify-content:end;margin-top:30px;color:white">
                        <!-- <img onclick="login()"
                            style="width: 56px; filter: brightness(0.5); margin: 20px 0px; cursor: pointer;"
                            src="https://topiko.com/subdomain/assets/enter.svg" alt=""> -->
                        <a class="btn btn-primary btn-block" onclick="login()">
                            Login
                        </a>
                    </div>
                    <div>
                        <p style="text-align: center;">Don't Have an Account?</p>
                        <p style="text-align: center;"><span
                                style="color: #871178; text-decoration: underline; cursor: pointer;"
                                onclick="registerModal()">click here</span> to Register
                        </p>
                    </div>
                </div>
            </div>
            <div class="modal-footer justify-content-between"> </div>
        </div>
    </div>
</div>

<div class="modal fade" id="registerModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
    aria-labelledby="loginbackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content service-modal" style="border-radius: 0px;">
            <div class="modal-header">
                <h6 style="width: 100%; text-align: center; margin-left: 16px;color:871178">Registration</h6>
                <button type="button" class="btn-close" onclick="closeRegisterModal()"></button>
            </div>
            <div class="modal-body">
                <div id="registration-modal-div" style="width: 100%;">
                    <div class="login-div">
                        <img style="width: 80px;" src="https://topiko.com/subdomain/assets/logo-default.png" alt="">
                    </div>
                    <div style="display: flex; flex-direction: column; width: 100%; margin-bottom: 30px;">
                        <p style="margin-bottom: 0px;">Name</p>
                        <input placeholder="Name" type="text" name="loginName" id="loginName" required
                            style="border: none; border-bottom: 1px solid #707070; border-radius: 0;">
                    </div>
                    <div style="display: flex; flex-direction: column; width: 100%; margin-bottom: 30px;">
                        <p style="margin-bottom: 0px;">Mobile Number</p>
                        <input placeholder="Mobile Number" type="text" name="loginRegMobile" id="loginRegMobile"
                            required maxlength="10"
                            style="border: none; border-bottom: 1px solid #707070; border-radius: 0;">
                    </div>
                    <div style="display: flex; flex-direction: column; width: 100%; margin-bottom: 4px;">
                        <p style="margin-bottom: 0px;">Referral Code (Optional)</p>
                        <input placeholder="Referral Code" type="text" name="sponsercode" id="sponsercode"
                            style="border: none; border-bottom: 1px solid #707070;border-radius: 0;">
                    </div>
                    <div class="login-div" style="display: flex;justify-content:end;margin-top:30px;color:white">
                        <!-- <img onclick="register()"
                            style="width: 56px; filter: brightness(0.5); margin: 20px 0px; cursor: pointer;"
                            src="https://topiko.com/subdomain/assets/enter.svg" alt=""> -->
                        <a class="btn btn-primary btn-block" onclick="register()">
                            Register
                        </a>
                    </div>
                    <div>
                        <p style="text-align: center;">Already Have an Account?</p>
                        <p style="text-align: center;"><span
                                style="color: #871178; text-decoration: underline; cursor: pointer;"
                                onclick="loginModal()">click here</span> to Login
                        </p>
                    </div>
                </div>
            </div>
            <div class="modal-footer justify-content-between"> </div>
        </div>
    </div>
</div>

<div class="modal fade" id="registerOTPModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
    aria-labelledby="loginbackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content service-modal">
            <div class="modal-header">
                <h6 style="width: 100%; text-align: center; margin-left: 16px;">OTP Verification
                </h6>
                <button type="button" class="btn-close" onclick="closeRegisterOTPModal()"></button>
            </div>
            <div class="modal-body">
                <div id="otp-modal-div">
                    <div class="login-div">
                        <img style="width: 80px;" src="https://topiko.com/subdomain/assets/logo-default.png" alt="">
                    </div>
                    <div style="display: flex; flex-direction: column; width: 100%; margin: 24px 0px;">
                        <p style="margin-bottom: 0px; text-align: center;">OTP sent to <span id="sentOtpMobile"></span>
                        </p>
                    </div>
                    <div class="row" style="margin-top: 16px;">
                        <p>Enter OTP</p>
                        <div class="col-3 mpin">
                            <input
                                style="border: none; border-bottom: 1px solid #707070; border-radius: 0; width: 75%; text-align: center;"
                                type="tel" maxlength="1" class="tel" id="verifyOtp1"
                                onkeyup="gotoNextField(this.value, 'verifyOtp2')" required>
                        </div>
                        <div class="col-3 mpin">
                            <input
                                style="border: none; border-bottom: 1px solid #707070; border-radius: 0; width: 75%; text-align: center;"
                                type="tel" maxlength="1" class="tel" id="verifyOtp2"
                                onkeyup="gotoNextField(this.value, 'verifyOtp3')"
                                onkeydown="backspace(event,'verifyOtp2', 'verifyOtp1')" required>
                        </div>
                        <div class="col-3 mpin">
                            <input
                                style="border: none; border-bottom: 1px solid #707070; border-radius: 0; width: 75%; text-align: center;"
                                type="tel" maxlength="1" class="tel" id="verifyOtp3"
                                onkeyup="gotoNextField(this.value, 'verifyOtp4')"
                                onkeydown="backspace(event,'verifyOtp3', 'verifyOtp2')" required>
                        </div>
                        <div class="col-3 mpin">
                            <input
                                style="border: none; border-bottom: 1px solid #707070; border-radius: 0; width: 75%; text-align: center;"
                                type="tel" maxlength="1" class="tel" id="verifyOtp4"
                                onkeydown="backspace(event,'verifyOtp4', 'verifyOtp3')" required>
                        </div>
                        <input type="hidden" id="registredMobileNumber" />
                        <p
                            style="display: flex; justify-content: end; margin-top: 18px; font-size: 16px;color: #871178;">
                            <span class="timer"></span>
                        </p>
                    </div>
                    <!-- <div class="login-div">
                        <img style="width: 56px; filter: brightness(0.5); margin: 20px 0px; cursor: pointer;"
                            src="https://topiko.com/subdomain/assets/enter.svg" alt=""
                            onclick="registrationOtpVerify()">
                    </div> -->
                    <div class="login-div" style="display: flex;justify-content:end;margin-top:30px;color:white">
                        <a class="btn btn-primary btn-block" onclick="registrationOtpVerify()">
                            Submit
                        </a>
                    </div>
                    <!-- <div>
                            <p style="text-align: center;">Wrong Number?</p>
                            <p style="text-align: center;"><span
                                    style="color: #871178; text-decoration: underline; cursor: pointer;"
                                    onclick="clickLogin()">click here</span> to edit number
                            </p>
                        </div> -->
                </div>
            </div>
            <div class="modal-footer justify-content-between"> </div>
        </div>
    </div>
</div>

<div class="modal fade" id="createMPINModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
    aria-labelledby="loginbackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content service-modal">
            <div class="modal-header">
                <h6 style="width: 100%; text-align: center; margin-left: 16px;">Create MPIN</h6>
                <button type="button" class="btn-close" onclick="closeCreateMPINModal()"></button>
            </div>
            <div class="modal-body">
                <div id="registration-modal-div">
                    <div class="login-div">
                        <img style="width: 80px;" src="https://topiko.com/subdomain/assets/logo-default.png" alt="">
                    </div>
                    <div style="display: flex; flex-direction: column; width: 100%; margin-bottom: 30px;">
                        <p style="margin-bottom: 0px;">MPIN</p>
                        <input type="hidden" id="mpinMobile">
                        <input type="text" placeholder="MPIN" class="name" id="createTxtMpin" required maxlength="4"
                            style="border: none; border-bottom: 1px solid #707070; border-radius: 0;">
                    </div>

                    <div style="display: flex; flex-direction: column; width: 100%; margin-bottom: 30px;">
                        <p style="margin-bottom: 0px;">Confirm MPIN</p>
                        <input type="hidden" id="mpinMobile">
                        <input type="text" placeholder="Confirm MPIN" class="mobile" id="confirmTxtMpin" required
                            maxlength="4" style="border: none; border-bottom: 1px solid #707070; border-radius: 0;">
                    </div>

                </div>
                <!-- <div class="login-div">
                    <img onclick="createMpin()"
                        style="width: 56px; filter: brightness(0.5); margin: 20px 0px; cursor: pointer;"
                        src="https://topiko.com/subdomain/assets/enter.svg" alt="">
                </div> -->
                <div class="login-div" style="display: flex;justify-content:end;margin-top:30px;color:white">
                    <a class="btn btn-primary btn-block" onclick="createMpin()">
                        Create Mpin
                    </a>
                </div>
            </div>
            <div class="modal-footer justify-content-between"> </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modal-primary" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
    aria-labelledby="loginbackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content service-modal">
            <div class="modal-header">
                <h6 class="modal-title" style="width: 100%; text-align: center; margin-left: 16px;">Cart Details</h6>
                <button type="button" class="btn-close" onclick="closeViewCartModal()"></button>
            </div>
            <div class="modal-body">
                <div class="example2" id="ajaxResult"> </div>
            </div>
            <div class="modal-footer justify-content-between">
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="orderSubmitted" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
    aria-labelledby="loginbackdropLabel" aria-hidden="true">
    <div class="modal-dialog  modal-lg modal-dialog-centered">
        <div class="modal-content service-modal">
            <div class="modal-header">
                <h6 class="modal-title" style="width: 100%; text-align: center; margin-left: 16px;">Order Submitted</h6>
                <button type="button" class="btn-close" onclick="closeOrderSubmittedModal()"></button>
            </div>
            <div class="modal-body">
                <div style="text-align: center;color: #871178;">
                    <p>You order has submited successfully</p>
                    <p>To track your order download topiko App</p>
                    <div class="row">
                        <div class="col flex1" style="display: flex;justify-content: end;">
                            <div style="display: flex; border: 2px solid #871178; width: 175px; border-radius: 7%; height: 55px;"
                                onclick="goToPlayStore()">
                                <div>
                                    <img src="https://topiko.com/subdomain/assets/googleplay.png" alt="" width="100%" />
                                </div>
                                <!-- <div>
                                        <p style="margin-bottom: 0px; font-size: 12px; color: #871178;margin-top:4px">GET IT ON</p>
                                        <p style="font-size: 18px; font-weight: bold; color:#871178;">Google Play</p>
                                    </div> -->
                            </div>
                        </div>
                        <div class="col flex2">
                            <div style="display: flex; border: 2px solid #871178; width: 175px; border-radius: 7%; height: 55px;"
                                onclick="goToAppStore()">
                                <div>
                                    <img src="https://topiko.com/subdomain/assets/appstore.png" alt="" width="100%" />
                                </div>
                                <!-- <div>
                                        <p style="margin-bottom: 0px; font-size: 12px; color: #871178; MARGIN-TOP: 4PX;">AVAILABLE ON THE</p>
                                        <p style="font-size: 18px; font-weight: bold; color: #871178;">App Store</p>
                                    </div> -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="serviceRequestSubmitted" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
    aria-labelledby="loginbackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content service-modal">
            <div class="modal-header">
                <h6 class="modal-title" style="width: 100%; text-align: center; margin-left: 16px;">Service Request
                    Submitted</h6>
                <button type="button" class="btn-close" onclick="closeServiceRequestSubmittedModal()"></button>
            </div>
            <div class="modal-body">
                <div style="text-align: center;color: #871178;">
                    <p>You service request has submited successfully</p>
                    <p>To track your service download topiko App</p>
                    <div class="row">
                        <div class="col flex1" style="display: flex;justify-content: end;">
                            <div style="display: flex; border: 2px solid #871178; width: 175px; border-radius: 7%; height: 55px;"
                                onclick="goToPlayStore()">
                                <div>
                                    <img src="https://topiko.com/subdomain/assets/googleplay.png" alt="" width="100%" />
                                </div>
                                <!-- <div>
                                        <p style="margin-bottom: 0px; font-size: 12px; color: #871178;margin-top:4px">GET IT ON</p>
                                        <p style="font-size: 18px; font-weight: bold; color:#871178;">Google Play</p>
                                    </div> -->
                            </div>
                        </div>
                        <div class="col flex2">
                            <div style="display: flex; border: 2px solid #871178; width: 175px; border-radius: 7%; height: 55px;"
                                onclick="goToAppStore()">
                                <div>
                                    <img src="https://topiko.com/subdomain/assets/appstore.png" alt="" width="100%" />
                                </div>
                                <!-- <div>
                                        <p style="margin-bottom: 0px; font-size: 12px; color: #871178; MARGIN-TOP: 4PX;">AVAILABLE ON THE</p>
                                        <p style="font-size: 18px; font-weight: bold; color: #871178;">App Store</p>
                                    </div> -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="requestServiceModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
    aria-labelledby="loginbackdropLabel" aria-hidden="true">
    <div class="modal-dialog  modal-lg modal-dialog-centered">
        <div class="modal-content service-modal">
            <div class="modal-header">
                <h6 class="modal-title" style="width: 100%; text-align: center; margin-left: 16px;">Book Service</h6>
                <button type="button" class="btn-close" onclick="closeRequestServiceModal()"></button>
                <input type="hidden" id="requestServiceId" />
            </div>
            <div class="modal-body">
                <div id="bookServiceId">
                    <div class="login-div"
                        style="display: flex; justify-content: center; align-items: normal; flex-direction: column;">
                        <div class="row item-custt mb-4">
                            <div class="col-6" style="display: flex; flex-direction: column;">
                                <p class="namess">Date</p>
                                <input type="date" placeholder="Date" class="name" id="serviceDate" required>
                            </div>
                            <div class="col-6" style="display: flex; flex-direction: column;">
                                <p class="namess">Time</p>
                                <input type="time" placeholder="Time" class="mobile" id="serviceTime" required
                                    maxlength="10">
                            </div>
                        </div>
                        <div class="row item-custt mb-4">
                            <div class="col-12" style="display: flex; flex-direction: column;">
                                <p class="namess">Address</p>
                                <textarea type="text" placeholder="Address" id="serviceAddress" class="referral"
                                    required
                                    style="padding: 10px; border: 1px solid #ccc; border-radius: 4px;"></textarea>
                            </div>
                        </div>
                    </div>
                    <div style="display: flex;justify-content: center;align-items: center;">
                        <button style="width: fit-content; padding: 10px 20px; color: #871178;" type="button"
                            id="createServiceBtn"
                            class="btn btn-sm add-cart-button cartBtn secondary-color-hover book-ser"
                            onclick="requestServiceOrder()"> Book
                            Service </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="commentsModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
    aria-labelledby="commentsbackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content service-modal">
            <div class="modal-header">
                <h6 class="modal-title" style="width: 100%; text-align: center; margin-left: 16px;">Comments</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"> </button>
            </div>
            <div class="modal-body">
                <div id="login-modal-div">
                    <div class="post-card1">
                        <div style="display: flex; align-items: center; padding-bottom: 10px;">
                            <div style="padding: 0%;display: flex; align-items: center;">
                                <svg width="20px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg"
                                    xmlns:xlink="http://www.w3.org/1999/xlink"
                                    xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" fill="#000000">
                                    <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                                    <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                                    <g id="SVGRepo_iconCarrier">
                                        <title>comment-2</title>
                                        <desc>Created with Sketch Beta.</desc>
                                        <defs> </defs>
                                        <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"
                                            sketch:type="MSPage">
                                            <g id="Icon-Set" sketch:type="MSLayerGroup"
                                                transform="translate(-152.000000, -255.000000)" fill="#707070">
                                                <path
                                                    d="M168,281 C166.832,281 165.704,280.864 164.62,280.633 L159.912,283.463 L159.975,278.824 C156.366,276.654 154,273.066 154,269 C154,262.373 160.268,257 168,257 C175.732,257 182,262.373 182,269 C182,275.628 175.732,281 168,281 L168,281 Z M168,255 C159.164,255 152,261.269 152,269 C152,273.419 154.345,277.354 158,279.919 L158,287 L165.009,282.747 C165.979,282.907 166.977,283 168,283 C176.836,283 184,276.732 184,269 C184,261.269 176.836,255 168,255 L168,255 Z M175,266 L161,266 C160.448,266 160,266.448 160,267 C160,267.553 160.448,268 161,268 L175,268 C175.552,268 176,267.553 176,267 C176,266.448 175.552,266 175,266 L175,266 Z M173,272 L163,272 C162.448,272 162,272.447 162,273 C162,273.553 162.448,274 163,274 L173,274 C173.552,274 174,273.553 174,273 C174,272.447 173.552,272 173,272 L173,272 Z"
                                                    id="comment-2" sketch:type="MSShapeGroup"> </path>
                                            </g>
                                        </g>
                                    </g>
                                </svg>
                                <span style="color: #22272a; padding-left: 6px; font-size: 16px;">Comment</span>
                            </div>
                        </div>
                        <div>
                            <div>
                                <textarea placeholder="type here..." id="commenttxt"></textarea>
                            </div>
                        </div>
                        <div class="shop-btn">
                            <button class="purple-btn-sm" style="border-radius: 50%;" size="small"> Post
                            </button>
                        </div>
                    </div>

                    <div class="post-card1">
                        <div style="display: flex;">
                            <div class="avatar">
                                <div>
                                    <img style="width: 42px; border-radius: 50px;" class="icon-img-recent"
                                        src="https://media.licdn.com/dms/image/C4E0BAQHikN6EXPd23Q/company-logo_200_200/0/1630646872203/joinsquare_logo?e=2147483647&v=beta&t=KIR78EZUVOjaVMEqnZPHvP5FSMzt79pJCxyuoD71JYI">
                                </div>
                            </div>
                            <div class="text-overflow" style="margin-left: 8px;">
                                <p class="user-name">Suresh</p>
                                <div class="officer">
                                    <p class="time">23-11-22</p>
                                </div>
                            </div>
                        </div>
                        <div class="lorem">
                            <p>Good Business</p>
                        </div>
                        </d>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<button class="chatbot__button primary-bg-color" id="contact_business" style="background: #871178;">
    <span>
            </span>
    <span>
            </span>
</button>
<div class="chatbot">
    <div class="chatbot__header primary-bg-color">

        <h3 class="chatbox__title">Chatbot </h3><span style="color:#ffffff; display: contents;" >Offline</span>        <span>
            <img style="width: 36px; filter: invert(1);" src="assets\close_btn.png" alt="">
        </span>
            </div>
    <ul class="chatbot__box">
        <li class="chatbot__chat incoming">
            <span>
                <img style="width: 24px;" src="assets\customer_care.png" alt="">
            </span>
            <p>Hi, please provide us your contact number for establishing a connection</p>
        </li>
        <li class="chatbot__chat outgoing">
            <!-- <p class="primary-bg-color" style="color: #fff;">Hi, How are you</p> -->
        </li>

        <input type="hidden" id="userOldNew" />
        <input type="hidden" id="userMobileNo" />
        <input type="hidden" id="optVerify" />
        <input type="hidden" id="businessUserId" value="" />
    </ul>
    <!-- <ul class="chatbot__box" id="chatmessages">
    </ul> -->
    <div class="chatbot__input-box">
        <textarea class="chatbot__textarea" placeholder="Enter a message..." required></textarea>
        <!-- <span id="send-btn" class="material-symbols-outlined">send</span> -->
        <span>
            <img style="width: 40px;" src="assets/send_btn.png" alt="">
        </span>
    </div>

</div>

<!-- section end-->
</main>
<!-- footer start-->
<footer class="footer">
        <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6 text-left">
                <div class="footer-privacy">
                    <a class="footer-privacy__link" href="#">Privacy Policy</a><span
                        class="footer-privacy__divider">|</span><a class="footer-privacy__link" href="#">Terms and
                        Conditions</a>
                </div>
            </div>
            <div class="col-lg-6 text-left mt-4 mt-lg-0 text-lg-right text-white">
                 All Right Reserved
                <script>
                    document.write(new Date().getFullYear());
                </script>
                © Topiko Business Solutions Private Limited
            </div>
        </div>
    </div>
</footer>
<!-- footer end-->
</div>

<a href="#" id="toTopBtn">
    </a>

<!-- libs-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!-- scripts-->
<script src="js/libs.min.js"></script>
<script src="js/common.js"></script>
<script src="js/script.js"></script>
<!-- ../scripts-->

<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>


<script>
    $(document).ready(function () {
        $("#bannerSlider").owlCarousel({
            // loop: true,
            margin: 10,
            nav: true,
            items: 1,
            dots: true,
            navText: [
                "<div class='nav-btn prev-slide'></div>",
                "<div class='nav-btn next-slide'></div>",
            ],
        });

        $("#productSlider").owlCarousel({
            // loop: true,
            margin: 10,
            nav: false,
            items: 4,
            dots: true,
            responsive: {
                0: {
                    items: 1,
                },
                991: {
                    items: 2,
                },
                1200: {
                    items: 4,
                },
                1400: {
                    items: 5,
                },
            },
        });

        $("#serviceSlider").owlCarousel({
            // loop: true,
            margin: 10,
            nav: false,
            items: 1,
            dots: true,
        });

        $("#offerSlider").owlCarousel({
            // loop: true,
            margin: 10,
            nav: false,
            items: 4,
            dots: true,
            responsive: {
                0: {
                    items: 1,
                },
                991: {
                    items: 2,
                },
                1200: {
                    items: 4,
                },
                1400: {
                    items: 5,
                },
            },
        });
    });
</script>

<!-- <script src="js/readMoreJS.min.js"></script>
<script>
    $readMoreJS.init({
        target: ".welcomeContent p",
        numOfWords: 120,
        toggle: true,
        moreLink: "Read More ...",
        lessLink: "Read Less",
    });
</script> -->

<script>
    // A $( document ).ready() block.
    $(document).ready(function () {
        const localStorageId = localStorage.getItem("user");
        if (!localStorageId) {
            //console.log("localStorageId ! : ",localStorageId);
        } else {
            //console.log("else localStorageId : ",localStorageId);
            $("#user_id").val(localStorageId);
        }
        const user_id = $("#user_id").val();
        const templateId = $("#templateId").val();
        const businessId = $("#businessId").val();
        const categoryId = $("#businessCategoryId").val();
        const serviceId = $("#businessServiceId").val();

        if (user_id == '') {
            $("#tempCartIcon").hide();
        } else {
            $("#tempCartIcon").show();
        }

        setUserIdInSession();
        getCartCountDetails(user_id, templateId, businessId, categoryId, serviceId);
        checkFavIcon();
    });

    function setUserIdInSession() {
        const user = localStorage.getItem("user");;
        // Send data to PHP using fetch
        if (user) {
            fetch('setUserIdInSession.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                body: `user=${encodeURIComponent(user)}`
            })
                .then(response => response.text())
                .then(data => console.log(data))
                .catch(err => console.error('Error:', err));
        }
    }

</script>
<script>
    function getCartCountDetails(user_id, templateId, businessId, categoryId, serviceId) {

        $.post("https://topiko.com/subdomain/app/getCartCountDetails.php", {
            user_id: user_id,
            business_id: businessId
        }).done(function (data) {
            //console.log("getCartCountDetails Data :",data);
            $(".badgeCnt").html(data);

        });
    }

    function favourite() {
        const user_id = $("#user_id").val();
        const businessId = $("#businessId").val();
        if (user_id) {
            $.get("https://topiko.com/prod/app/addfavorite.php?user_id=" + user_id + "&bid=" + businessId).done(function (fdata) {
                $("#favourited").text(fdata);
                if (fdata == 1) {
                    checkFavIcon();
                }
            });
        } else {
            //alert("Please login");
            $("#loginModal").modal("show");
        }
    }

    function checkFavIcon() {
        const user_id = $("#user_id").val();
        const businessId = $("#businessId").val();
        $.get("https://topiko.com/prod/app/checkfav.php?user_id=" + user_id + "&bid=" + businessId).done(function (data) {
            $("#favIconData").text(data);
            if (data == 0) {
                document.getElementById('favicon').style.fill = 'rgb(204, 204, 204)';
            } else {
                document.getElementById('favicon').style.fill = '#D21E1E';
            }
            getFavCount()
        });
    }

    function getFavCount() {
        const businessId = $("#businessId").val();
        $.get("https://topiko.com/prod/app/getfavcount.php?bid=" + businessId).done(function (data) {
            document.getElementById('favcnt').innerHTML = data;
        });
    }
    getFavCount();


    function getComments() {
        const businessId = $("#businessId").val();
        $.get("https://topiko.com/prod/app/business_comments.php?bid=" + businessId).done(function (data) {
            console.log("comment data", data);
        });
    }
    getComments();

    // function getFavCount() {
    //     const user_id = $("#user_id").val();
    //     const businessId = $("#businessId").val();
    //     if (user_id) {
    //         $.post("https://topiko.com/subdomain/app/getCartDetailsNew.php", {
    //             user_id: user_id,
    //             business_id: businessId
    //         }).done(function(data) {
    //             //console.log("Data :",data);
    //             $("#ajaxResultCartPage").html(data);
    //             //$("#ajaxResult").html(data);
    //             //$("#modal-primary").modal("show");
    //         });
    //     } else {
    //         document.getElementById("alert_content").innerHTML = "Please login";
    //         showCustomAlert();
    //         $("#loginModal").modal("show");
    //     }
    // }

    function addToCart(productId, priceAmnt) {
        const user_id = $("#user_id").val();
        const templateId = $("#templateId").val();
        const businessId = $("#businessId").val();
        const categoryId = $("#businessCategoryId").val();
        const serviceId = $("#businessServiceId").val();
        console.log("userid", user_id);
        if (user_id) {
            $.post("https://topiko.com/subdomain/app/addToCart.php", {
                user_id: user_id,
                business_id: businessId,
                product_id: productId,
                qty: '1',
                price: priceAmnt,
                discounted_price: priceAmnt
            }).done(function (data) {
                //console.log("Data :",data);
                if (data == 1) {
                    getCartCountDetails(user_id, templateId, businessId, categoryId, serviceId);
                    document.getElementById("alert_content").innerHTML = "Product is added into cart successfully";
                    showCustomAlert();
                } else {
                    document.getElementById("alert_content").innerHTML = "Product is already added to cart";
                    showCustomAlert();
                }
            });
        } else {
            //alert("Please login");
            $("#loginModal").modal("show");
        }
    }

    function viewCartList() {
        const user_id = $("#user_id").val();
        const businessId = $("#businessId").val();
        if (user_id) {
            $.post("https://topiko.com/subdomain/app/getCartDetailsNew.php", {
                user_id: user_id,
                business_id: businessId
            }).done(function (data) {
                //console.log("Data :",data);
                $("#ajaxResultCartPage").html(data);
                //$("#ajaxResult").html(data);
                //$("#modal-primary").modal("show");
            });
        } else {
            document.getElementById("alert_content").innerHTML = "Please login";
            showCustomAlert();
            $("#loginModal").modal("show");
        }
    }

    function removeCart(cartId) {
        const user_id = $("#user_id").val();
        if (user_id) {
            $.post("https://topiko.com/subdomain/app/removeCartItem.php", {
                cartId: cartId
            }).done(function (data) {
                //console.log("Data :",data);
                if (data == 1) {
                    viewCartList();
                    //alert("Cart is updated successfully");
                } else {
                    document.getElementById("alert_content").innerHTML = "Something went wrong";
                    showCustomAlert();
                }
            });
        } else {
            document.getElementById("alert_content").innerHTML = "Please login";
            showCustomAlert();
            $("#loginModal").modal("show");
        }
    }

    function increase(cartId, qty, priceAmnt) {
        const user_id = $("#user_id").val();
        var newQty = parseInt(qty) + parseInt(1);
        //console.log("increase ", newQty);
        if (user_id) {
            $.post("https://topiko.com/subdomain/app/updateToCart.php", {
                cartId: cartId,
                qty: newQty,
                price: priceAmnt
            }).done(function (data) {
                //console.log("Data :",data);
                if (data == 1) {
                    viewCartList();
                    //alert("Cart is updated successfully");
                } else {
                    document.getElementById("alert_content").innerHTML = "Something went wrong";
                    showCustomAlert();
                }
            });
        } else {
            document.getElementById("alert_content").innerHTML = "Please login";
            showCustomAlert();
            $("#loginModal").modal("show");
        }

    }

    function decrease(cartId, qty, priceAmnt) {
        const user_id = $("#user_id").val();
        if (qty > 1) {
            var newQty = parseInt(qty) - parseInt(1);
            // console.log("decrease ", newQty);
            if (user_id) {
                $.post("https://topiko.com/subdomain/app/updateToCart.php", {
                    cartId: cartId,
                    qty: newQty,
                    price: priceAmnt
                }).done(function (data) {
                    //console.log("Data :",data);
                    if (data == 1) {
                        viewCartList();
                        // alert("Cart is updated successfully");
                    } else {
                        document.getElementById("alert_content").innerHTML = "Something went wrong";
                        showCustomAlert();
                    }
                });
            } else {
                document.getElementById("alert_content").innerHTML = "Please login";
                showCustomAlert();
                $("#loginModal").modal("show");
            }
        } else {
            document.getElementById("alert_content").innerHTML = "This is the minimum quantity to order";
            showCustomAlert();
        }

    }


    // vivew user user Details



    function createOrder() {
        const user_id = $("#user_id").val();
        const templateId = $("#templateId").val();
        const businessId = $("#businessId").val();
        const categoryId = $("#businessCategoryId").val();
        const serviceId = $("#businessServiceId").val();

        if (user_id) {
            //$("#createOrderBtn").prop('disabled', true);
            $.post("https://topiko.com/subdomain/app/createOrder.php", {
                user_id: user_id,
                business_id: businessId
            }).done(function (data) {
                //console.log("Data :",data);
                if (data == 1) {
                    $("#modal-primary").modal("hide");
                    $("#orderSubmitted").modal("show");
                    // $("#createOrderBtn").prop('disabled', false);
                    // document.getElementById("alert_content").innerHTML = "Your order has been placed, feel free to contact us";
                    // showCustomAlert();
                } else {
                    document.getElementById("alert_content").innerHTML = "Order is not submitted";
                    showCustomAlert();
                }
            });
        } else {
            document.getElementById("alert_content").innerHTML = "Please login";
            showCustomAlert();
            $("#loginModal").modal("show");
        }
    }

    function closeViewCartModal() {
        $("#modal-primary").modal("hide");
    }

    function closeOrderSubmittedModal() {
        $("#orderSubmitted").modal("hide");

        const user_id = $("#user_id").val();
        const templateId = $("#templateId").val();
        const businessId = $("#businessId").val();
        const categoryId = $("#businessCategoryId").val();
        const serviceId = $("#businessServiceId").val();
        getCartCountDetails(user_id, templateId, businessId, categoryId, serviceId);
        location.reload();
    }

    function loginModal() {
        $("#registerModal").modal("hide");
        $("#loginModal").modal("show");
    }

    function closeLoginModal() {
        $("#loginModal").modal("hide");
    }

    function commModal() {
        document.getElementById("alert_content").innerHTML = "Please download Topiko App to view this";
        showCustomAlert();
        // const user_id = $("#user_id").val();
        // if (user_id) {
        //     $("#commentsModal").modal("show");
        // } else {
        //     $("#loginModal").modal("show");
        // }
    }

    function contactBusinessModal() {
        // document.getElementById("alert_content").innerHTML = "Please download Topiko App to contact this business";
        // showCustomAlert();
        document.getElementById('contact_business').click();
    }

    function closeCommentModal() {
        $("#commentsModal").modal("hide");
    }

    function registerModal() {
        $("#loginModal").modal("hide");
        $("#registerModal").modal("show");
    }

    function closeRegisterModal() {
        $("#registerModal").modal("hide");
    }

    function registerOTPModal() {
        $("#registerOTPModal").modal("show");
    }

    function closeRegisterOTPModal() {
        $("#registerOTPModal").modal("hide");
    }

    function createMPINModal() {
        $("#createMPINModal").modal("show");
    }

    function closeCreateMPINModal() {
        $("#createMPINModal").modal("hide");
    }


    function gotoNextField(e, nextElement) {
        if (e.length == 1) {
            $("#" + nextElement).focus();
        }
    }

    function backspace(e, currentElement, prevElement) {
        if (e.which == 8 || e.which == 46) {
            $("#" + currentElement).val('');
            $("#" + prevElement).focus();
        } else {
            $("#" + currentElement).focus();
        }
    }

    function login() {
        const loginMobile = $("#loginMobile").val();
        const mpin1 = $("#mpin1").val();
        const mpin2 = $("#mpin2").val();
        const mpin3 = $("#mpin3").val();
        const mpin4 = $("#mpin4").val();
        if (loginMobile == '' && mpin1 == '' && mpin2 == '' && mpin3 == '' && mpin4 == '') {
            document.getElementById("alert_content").innerHTML = "Please fill all the fields";
            showCustomAlert();
            // return false;
        } else if (loginMobile.length <= 9 || loginMobile.length >= 11) {
            document.getElementById("alert_content").innerHTML = "Please enter a valid mobile number";
            showCustomAlert();
        } else {
            var mpin = mpin1 + "" + mpin2 + "" + mpin3 + "" + mpin4;
            console.log(" mpin : ", mpin);

            $.post("https://topiko.com/subdomain/app/login.php", {
                mobile: loginMobile,
                password: mpin
            }).done(function (data) {
                // console.log("Data :",data);
                if (data != 0) {
                    $("#user_id").val(data);
                    // console.log("Login Successfull", data);
                    localStorage.setItem("user", data);
                    $("#loginModal").modal("hide");
                    document.getElementById("alert_content").innerHTML = "Logged in Successfully";
                    showCustomAlert();
                    // console.log("Login Successfull", data);
                    location.reload();
                } else {
                    document.getElementById("alert_content").innerHTML = "Invalid OTP and password";
                    showCustomAlert();
                }
            });
        }
    }

    function register() {
        const loginRegMobile = $("#loginRegMobile").val();
        const loginName = $("#loginName").val();
        const referaCode = $("#sponsercode").val();
        if (loginRegMobile == '' && loginName == '') {
            document.getElementById("alert_content").innerHTML = "Please fill all the fields";
            showCustomAlert();
            // return false;
        } else if (loginRegMobile.length <= 9 || loginRegMobile.length >= 11) {
            document.getElementById("alert_content").innerHTML = "Please enter a valid mobile number" + loginRegMobile.length;
            showCustomAlert();
        } else {
            $.post("https://topiko.com/subdomain/app/register.php", {
                mobile: loginRegMobile,
                name: loginName,
                referral_code: referaCode
            }).done(function (data) {
                // console.log("Data :",data);
                if (data == 2) {
                    document.getElementById("alert_content").innerHTML = "Please enter valid mobile number";
                    showCustomAlert();
                } else if (data == 3) {
                    document.getElementById("alert_content").innerHTML = "Mobile number already exists";
                    showCustomAlert();
                } else if (data == 4) {
                    document.getElementById("alert_content").innerHTML = "Something went wrong";
                    showCustomAlert();
                } else if (data == 5) {
                    document.getElementById("alert_content").innerHTML = "Mobile number already exists";
                    showCustomAlert();
                } else if (data == 6) {
                    document.getElementById("alert_content").innerHTML = "Please enter valid mobile number";
                    showCustomAlert();
                } else if (data == 7) {
                    document.getElementById("alert_content").innerHTML = "OTP is not sent to your mobile";
                    showCustomAlert();
                } else if (data == 8) {
                    document.getElementById("alert_content").innerHTML = "Registration failed. Please try again";
                    showCustomAlert();
                } else {
                    $("#sentOtpMobile").text(data);
                    $("#registredMobileNumber").val(data);
                    startOtpTimer();
                    $("#registerModal").modal("hide");
                    $("#registerOTPModal").modal("show");
                }
            });
        }
    }

    function startOtpTimer() {
        var timer2 = "00:30";
        setInterval(function () {
            var timer = timer2.split(':');
            //by parsing integer, I avoid all extra string processing
            var minutes = parseInt(timer[0], 10);
            var seconds = parseInt(timer[1], 10);
            --seconds;
            minutes = (seconds < 0) ? --minutes : minutes;
            if (minutes < 0) clearInterval(interval);
            seconds = (seconds < 0) ? 59 : seconds;
            seconds = (seconds < 10) ? '0' + seconds : seconds;
            //minutes = (minutes < 10) ?  minutes : minutes;
            $('.timer').html(seconds + " sec");
            timer2 = minutes + ':' + seconds;
            //$('.timer').text(seconds + " Sec");
        }, 1000);
    }

    function registrationOtpVerify() {
        const loginMobile = $("#registredMobileNumber").val();
        const verifyOtp1 = $("#verifyOtp1").val();
        const verifyOtp2 = $("#verifyOtp2").val();
        const verifyOtp3 = $("#verifyOtp3").val();
        const verifyOtp4 = $("#verifyOtp4").val();
        if (loginMobile == '' && verifyOtp1 == '' && verifyOtp2 == '' && verifyOtp3 == '' && verifyOtp4 == '') {
            document.getElementById("alert_content").innerHTML = "Please fill all the fields";
            showCustomAlert();
            // return false;
        } else if (loginMobile.length <= 9 || loginMobile.length >= 11) {
            document.getElementById("alert_content").innerHTML = "Please enter a valid mobile number";
            showCustomAlert();
        } else {
            var verifyOtp = verifyOtp1 + "" + verifyOtp2 + "" + verifyOtp3 + "" + verifyOtp4;

            $.post("https://topiko.com/subdomain/app/registerMobileOtpVerify.php", {
                mobile: loginMobile,
                otp: verifyOtp
            }).done(function (data) {
                //console.log("Data :",data);
                if (data != 0) {
                    $("#mpinMobile").val(loginMobile);
                    $("#registerOTPModal").modal("hide");
                    $("#createMPINModal").modal("show");
                } else {
                    document.getElementById("alert_content").innerHTML = "Invalid OTP";
                    showCustomAlert();
                }
            });
        }
    }

    function createMpin() {
        const mpinMobile = $("#mpinMobile").val();
        const createTxtMpin = $("#createTxtMpin").val();
        const confirmTxtMpin = $("#confirmTxtMpin").val();
        if (mpinMobile == '' && createTxtMpin == '' && confirmTxtMpin == '') {
            document.getElementById("alert_content").innerHTML = "Please fill all the fields";
            showCustomAlert();
            // return false;
        } else if (createTxtMpin.length < 4 || createTxtMpin.length > 4) {
            document.getElementById("alert_content").innerHTML = "Please enter a valid MPIN";
            showCustomAlert();
        } else if (confirmTxtMpin.length < 4 || confirmTxtMpin.length > 4) {
            document.getElementById("alert_content").innerHTML = "Please enter a valid confirm MPIN";
            showCustomAlert();
        } else if (createTxtMpin != confirmTxtMpin) {
            document.getElementById("alert_content").innerHTML = "MPIN and confirm MPIN is not matched";
            showCustomAlert();
        } else {
            $.post("https://topiko.com/subdomain/app/createpassword.php", {
                mobile: mpinMobile,
                mpin: confirmTxtMpin
            }).done(function (data) {
                //console.log("Data :",data);
                if (data != 0) {
                    $("#createMPINModal").modal("hide");
                    //$("#loginModal").modal("show");
                    document.getElementById("alert_content").innerHTML = "MPIN Updated Successfully";
                    showCustomAlert();
                    location.reload();

                } else {
                    document.getElementById("alert_content").innerHTML = "Something went wrong";
                    showCustomAlert();
                }
            });
        }
    }

    function goToPlayStore() {
        window.open("https://play.google.com/store/apps/details?id=com.vab.topiko", '_blank');
    }

    function goToAppStore() {
        window.open("https://apps.apple.com/in/app/topiko/id1614072211", '_blank');
    }

    function openServiceRequest(requestServiceId) {
        const user_id = $("#user_id").val();
        console.log("user_id", user_id);
        if (user_id) {
            $("#requestServiceModal").modal("show");
            $("#requestServiceId").val(requestServiceId);
        } else {
            document.getElementById("alert_content").innerHTML = "Please login";
            showCustomAlert();
            $("#loginModal").modal("show");
        }
    }

    function requestServiceOrder() {
        const user_id = $("#user_id").val();
        const templateId = $("#templateId").val();
        const businessId = $("#businessId").val();
        const categoryId = $("#businessCategoryId").val();
        const serviceId = $("#businessServiceId").val();

        const requiDate = $("#serviceDate").val();
        const requiTime = $("#serviceTime").val();
        const serviceAd = $("#serviceAddress").val();
        const requestSerId = $("#requestServiceId").val();

        if (user_id) {
            console.log("requiDate", requiDate, requiTime, serviceAd, requestSerId);
            if (requiDate != '' && requiTime != '' && serviceAd != '' && requestSerId != '') {
                // $("#createServiceBtn").prop('disabled', true);
                $.post("https://topiko.com/subdomain/app/createServiceRequest.php", {
                    user_id: user_id,
                    business_id: businessId,
                    serviceDate: requiDate,
                    serviceTime: requiTime,
                    serviceAddress: serviceAd,
                    service_id: requestSerId
                }).done(function (data) {
                    //console.log("Data :",data);
                    if (data == 1) {
                        $("#requestServiceModal").modal("hide");
                        $("#serviceRequestSubmitted").modal("show");
                        //  $("#createServiceBtn").prop('disabled', false);
                        document.getElementById("alert_content").innerHTML = "Your New Service Request Submitted Sucessfully, feel free to contact us";
                        showCustomAlert();
                    } else if (data == 2) {
                        document.getElementById("alert_content").innerHTML = "Service Request is already submitted";
                        showCustomAlert();
                    } else {
                        document.getElementById("alert_content").innerHTML = "Service request is not submitted";
                        showCustomAlert();
                    }
                    $("#serviceDate").val('');
                    $("#serviceTime").val('');
                    $("#serviceAddress").val('');
                    $("#requestServiceId").val('');
                });
            } else {
                document.getElementById("alert_content").innerHTML = "Please select all fields";
                showCustomAlert();
            }
        } else {
            document.getElementById("alert_content").innerHTML = "Please Login";
            showCustomAlert();
            $("#loginModal").modal("show");
        }
    }

    function closeServiceRequestSubmittedModal() {
        $("#serviceRequestSubmitted").modal("hide");
        $("#createServiceBtn").prop('disabled', false);
        const user_id = $("#user_id").val();
        const templateId = $("#templateId").val();
        const businessId = $("#businessId").val();
        const categoryId = $("#businessCategoryId").val();
        const serviceId = $("#businessServiceId").val();
        getCartCountDetails(user_id, templateId, businessId, categoryId, serviceId);
    }

    function closeRequestServiceModal() {
        $("#requestServiceModal").modal("hide");
        $("#createServiceBtn").prop('disabled', false);
        $("#serviceDate").val('');
        $("#serviceTime").val('');
        $("#serviceAddress").val('');
        $("#requestServiceId").val('');
    }

    function requestForContactUs() {
        const user_id = $("#user_id").val();
        const businessId = $("#businessId").val();
        const fullName = $("#fullName").val();
        const emailid = $("#emailid").val();
        const mobile = $("#mobile").val();
        const comments = $("#comments").val();

        //if (user_id) {
        if (mobile != '' && fullName != '' && emailid != '' && comments != '') {
            // $("#createServiceBtn").prop('disabled', true);
            $.post("https://topiko.com/subdomain/app/contactUs.php", {
                user_id: user_id,
                business_id: businessId,
                fullName: fullName,
                emailid: emailid,
                mobile: mobile,
                comments: comments
            }).done(function (data) {
                // console.log("Data :",data);
                if (data == "1") {
                    document.getElementById("alert_content").innerHTML = "Form Submitted Sucessfully";
                    showCustomAlert();
                } else if (data == "2") {
                    document.getElementById("alert_content").innerHTML = "Form is already submitted";
                    showCustomAlert();
                } else {
                    document.getElementById("alert_content").innerHTML = "Form is not submitted";
                    showCustomAlert();
                }
                $("#fullName").val('');
                $("#emailid").val('');
                $("#mobile").val('');
                $("#comments").val('');
            });
        } else {
            document.getElementById("alert_content").innerHTML = "Please select all fields";
            showCustomAlert();
        }
        // } else {
        //     alert("Please login");
        //     $("#loginModal").modal("show");
        // }
    }
</script>

<script>
    $(document).ready(function () {
        console.log("ready");
        // Stop calling the function when the page is loaded
        $(window).on("load", function () {
            // Call the function every 2 seconds
            var intervalId = setInterval(getChatBotMessageList, 2000);
            clearInterval(intervalId);
            localStorage.removeItem("optVerify");
            localStorage.removeItem("userMobileNo");

            // console.log("Function calling stopped!");
        });

    });
    const chatbotToggle = document.querySelector('.chatbot__button');
    const sendChatBtn = document.querySelector('.chatbot__input-box span');
    const chatInput = document.querySelector('.chatbot__textarea');
    const chatBox = document.querySelector('.chatbot__box');
    const chatbotCloseBtn = document.querySelector('.chatbot__header span');

    let userMessage;
    // Need GPT key
    const inputInitHeight = chatInput.scrollHeight;
    const API_KEY = 'HERE';

    const createChatLi = (message, className) => {
        const chatLi = document.createElement('li');
        chatLi.classList.add('chatbot__chat', className);
        let chatContent =
            className === 'outgoing' ?
                `<p></p>` :
                ` <span>
                    <img style="width: 24px;" src="https://png.pngtree.com/png-clipart/20220909/original/pngtree-customer-care-service-png-image_8519990.png" alt="">
                </span> <p></p>`;
        chatLi.innerHTML = chatContent;
        chatLi.querySelector('p').textContent = message;
        return chatLi;
    };

    // const generateResponse = (incomingChatLi) => {
    //     const API_URL = 'https://api.openai.com/v1/chat/completions';
    //     const messageElement = incomingChatLi.querySelector('p');

    //     const requestOptions = {
    //         method: 'POST',
    //         headers: {
    //             'Content-Type': 'application/json',
    //             Authorization: `Bearer ${API_KEY}`,
    //         },
    //         body: JSON.stringify({
    //             model: 'gpt-3.5-turbo',
    //             message: [{
    //                 role: 'user',
    //                 content: userMessage
    //             }],
    //         }),
    //     };

    //     fetch(API_URL, requestOptions)
    //         .then((res) => res.json())
    //         .then((data) => {
    //             console.log(data);
    //             messageElement.textContent = data.choices[0].message.content;
    //         })
    //         .catch((error) => {
    //             messageElement.classList.add('error');
    //             messageElement.textContent = 'Oops! Please try again!';
    //             console.log(error);
    //         })
    //         .finally(() => chatBox.scrollTo(0, chatBox.scrollHeight));
    // };

    function call() {

    }

    const generateResponse0 = (incomingChatLi) => {
        const messageElement = incomingChatLi.querySelector('p');
        console.log("messagElement", messageElement);
        chatBox.appendChild(incomingChatLi);
        messageElement.innerHTML = 'Please Enter Your Number';
        chatBox.scrollTo(0, chatBox.scrollHeight);
    };

    const generateResponse1 = (incomingChatLi) => {
        const messageElement = incomingChatLi.querySelector('p');
        //console.log("totalMessages", totalMessages[0]);
        chatBox.appendChild(incomingChatLi);
        if (isNaN(totalMessages[0]) || totalMessages[0].length != 10) {
            $("#userMobileNo").val('');
            totalMessages.pop();
            messageElement.innerHTML = `<p style="margin-bottom: 0px; padding-top: 0px;">Please enter a valid number.</p>`;
            return false;
        } else {
            //console.log("Else condition",totalMessages[0]);
            $.post("https://topiko.com/subdomain/app/checkUserAvailable.php", {
                text: totalMessages[0],
            }).done(function (data) {
                if (data.length > 5) {
                    const dataArray = data.split("-");
                    //console.log(" dataArray : ",dataArray);
                    const dataArray0 = dataArray[0];
                    const dataArray1 = dataArray[1];
                    $("#userMobileNo").val(dataArray0);
                    $("#userOldNew").val(dataArray1);
                    if (dataArray1 == '2') {
                        messageElement.innerHTML = `<p style="margin-bottom: 0px; padding-top: 0px;">Enter your MPIN.</p>`;
                    } else if (dataArray1 == '1') {
                        messageElement.innerHTML = `<p style="margin-bottom: 0px; padding-top: 0px;">OTP sent on your number. Enter your OTP.</p>`;
                    } else {
                        messageElement.innerHTML = `<p style="margin-bottom: 0px; padding-top: 0px;">Invalid mobile number. Enter a valid mobile number<p>`;

                    }
                    //localStorage.setItem("user", data);
                } else if (data == 1) {
                    $("#userMobileNo").val('');
                    $("#userOldNew").val('');
                    messageElement.innerHTML = `<p style="margin-bottom: 0px; padding-top: 0px;">Invalid mobile number. Enter a valid mobile number<p>`;
                } else {
                    $("#userMobileNo").val('');
                    $("#userOldNew").val('');
                    messageElement.innerHTML = `<p style="margin-bottom: 0px; padding-top: 0px;">Enter a valid mobile number.</p>`;
                }
            });
            chatBox.scrollTo(0, chatBox.scrollHeight);
        }
    };

    const generateResponse2 = (incomingChatLi) => {
        const messageElement = incomingChatLi.querySelector('p');
        //console.log("totalMessages[1]", totalMessages[1]);
        chatBox.appendChild(incomingChatLi);
        var userOldNew = $("#userOldNew").val();
        if (!isNaN(totalMessages[0]) && totalMessages[1].length == 4) {
            // console.log("If condition",totalMessages[1]);
            $.post("https://topiko.com/subdomain/app/otpVerifyChatBot.php", {
                otp: totalMessages[1],
                userOldNew: $("#userOldNew").val(),
                mobile: $("#userMobileNo").val(),
                partner_id: $("#businessUserId").val()
            }).done(function (dataRes) {
                //console.log(" Data :",dataRes);
                if (dataRes != 0) {
                    $("#optVerify").val($.trim(dataRes));
                    var mob = $("#userMobileNo").val();
                    localStorage.setItem("optVerify", dataRes);
                    localStorage.setItem("userMobileNo", mob);
                    if (userOldNew == '1') {
                        messageElement.innerHTML = "Welcome to Topiko, Your account has been successfully created with the number" + " '" + mob + "' " + "and your default password is set to '1234', You can login to Topiko App with these credentials. OR You can ask your query here.";
                    } else if (userOldNew == '2') {
                        messageElement.innerHTML = "Welcome to Topiko, Your account has been successfully verified with the number" + " '" + mob + "' " + ", You can login to Topiko App with these credentials. OR You can ask your query here.";
                    }
                    setTimeout(() => {
                        const incomingChatLi = createChatLi('Typing...', 'incoming');
                        chatBox.scrollTo(0, chatBox.scrollHeight);
                        //  generateResponseExtra(incomingChatLi);
                    }, 500);

                    // Call the function every 2 seconds
                    var intervalId = setInterval(getChatBotMessageList, 2000);
                } else {
                    $("#optVerify").val('0');
                    if (userOldNew == '2') {
                        messageElement.innerHTML = `<p style="margin-bottom: 0px; padding-top: 0px;">Invalid MPIN.</p>`;
                    } else {
                        messageElement.innerHTML = `<p style="margin-bottom: 0px; padding-top: 0px;">Invalid OTP.</p>`;
                    }

                }
            });
        } else {
            allowCall = 0;
            $("#optVerify").val('0');
            totalMessages.pop();
            if (userOldNew == '2') {
                messageElement.innerHTML = `<p style="margin-bottom: 0px; padding-top: 0px;">Enter valid MPIN.</p>`;
            } else {
                messageElement.innerHTML = `<p style="margin-bottom: 0px; padding-top: 0px;">Enter valid OTP.</p>`;
            }
            return false;
        }
        chatBox.scrollTo(0, chatBox.scrollHeight);
    };

    const generateResponse3 = (incomingChatLi) => {
        var txtLength = parseInt(totalMessages.length) - parseInt(1);
        var messageTxt = totalMessages[txtLength];
        var chatroomId = $.trim(localStorage.getItem("optVerify"));
        var businessUserId = $.trim(localStorage.getItem("userMobileNo"));
        $.post("https://topiko.com/subdomain/app/chatmessage.php", {
            posted_by: businessUserId,
            chatroom: chatroomId,
            type: 'text',
            message: messageTxt
        }).done(function (data) {
            // console.log("sent message Data :",data);
            //$(".badgeCnt").html(data);
            getChatBotMessageList();
        });
        // messageElement.textContent = "Your query has been sent successfully. please download Topiko app to follow up";

        // chatBox.scrollTo(0, chatBox.scrollHeight);
    };

    function getChatBotMessageList() {
        var chatroommob = $.trim(localStorage.getItem("userMobileNo"));
        var chatroomId = $.trim(localStorage.getItem("optVerify"));
        //console.log("getChatBotMessageList chatroomId res : ",chatroomId);
        //console.log("getChatBotMessageList chatroommob res : ",chatroommob);
        // Call your API here
        $.post("https://topiko.com/subdomain/app/getchatmessages.php", {
            id: chatroommob,
            chatroom: chatroomId
        }).done(function (response) {
            if (response != 0) {
                //console.log("Function called! data res : ",response);
                $('.chatbot__box').html(response);
                chatBox.scrollTo(0, chatBox.scrollHeight);
            }
        });
    }

    let allowCall = 0;
    const generateResponseExtra = (incomingChatLi) => {
        const messageElement = incomingChatLi.querySelector('p');
        console.log("messagElement", messageElement);
        chatBox.appendChild(incomingChatLi);
        messageElement.innerHTML = "Now you can state your query...";
        chatBox.scrollTo(0, chatBox.scrollHeight);
    };

    function call() {
        if (allowCall == 1) {
            console.log("call allowed");
        } else {
            // document.getElementById("alert_content").innerHTML = "Please enter your mobile number before calling";
            document.getElementById("alert_content").innerHTML = "Please download Topiko app to contact this business";
            showCustomAlert();
        }
    }

    function changeNumber() {
        console.log("changeNumber", totalMessages);
        totalMessages = [];
        const incomingChatLi = createChatLi('Typing...', 'incoming');
        generateResponse0(incomingChatLi);
    }

    let totalMessages = [];
    const handleChat = () => {
        let loginData = 0;
        if (loginData == 0) {
            userMessage = chatInput.value.trim();
            totalMessages.push(userMessage);
            //console.log("totalMessages", totalMessages);
            if (!userMessage) return;
            chatInput.value = '';
            chatInput.style.height = `${inputInitHeight}px`;

            setTimeout(() => {
                const incomingChatLi = createChatLi('Typing...', 'incoming');
                const optVerify = $("#optVerify").val();
                // chatBox.appendChild(incomingChatLi);
                chatBox.scrollTo(0, chatBox.scrollHeight);
                //generateResponse1(incomingChatLi);
                if (totalMessages.length == 1) {
                    chatBox.appendChild(createChatLi(userMessage, 'outgoing'));
                    chatBox.scrollTo(0, chatBox.scrollHeight);
                    generateResponse1(incomingChatLi);
                } else if (totalMessages.length == 2) {
                    chatBox.appendChild(createChatLi(userMessage, 'outgoing'));
                    chatBox.scrollTo(0, chatBox.scrollHeight);
                    generateResponse2(incomingChatLi);
                } else if (totalMessages.length == 3) {
                    if (optVerify == '0') {
                        chatBox.appendChild(createChatLi(userMessage, 'outgoing'));
                        chatBox.scrollTo(0, chatBox.scrollHeight);
                        if (totalMessages.length > 2) {
                            var indexToRemove = 1; // Index of the element to remove
                            totalMessages.splice(indexToRemove, 1);
                            generateResponse2(incomingChatLi);
                        }
                        console.log("totalMessages :", totalMessages);
                    } else {
                        generateResponse3(incomingChatLi);
                    }
                } else {
                    generateResponse3(incomingChatLi);
                    //generateResponse(incomingChatLi);
                }
            }, 600);
        } else {
            console.log("no login");
        }
    };

    chatInput.addEventListener('input', () => {
        chatInput.style.height = `${inputInitHeight}px`;
        chatInput.style.height = `${chatInput.scrollHeight}px`;
    });
    chatInput.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' && !e.shiftKey && window.innerWidth > 800) {
            e.preventDefault();
            handleChat();
        }
    });
    chatbotToggle.addEventListener('click', () =>
        document.body.classList.toggle('show-chatbot')
    );
    chatbotCloseBtn.addEventListener('click', () =>
        document.body.classList.remove('show-chatbot')
    );
    sendChatBtn.addEventListener('click', handleChat);






</script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
    crossorigin="anonymous"></script>
</body>

</html>
<script>
  $(".owl-carousel").owlCarousel({
    loop: true,
    margin: 10,
    nav: true,
    items: 1,
    dots: true,
    navText: [
      "<div class='nav-btn prev-slide'></div>",
      "<div class='nav-btn next-slide'></div>",
    ],
  });
</script>

<script>
  function increment() {
    const input = document.getElementById('numberInput');
    input.value = parseInt(input.value) + 1;
  }

  function decrement() {
    const input = document.getElementById('numberInput');
    if (input.value > 1) {
      input.value = parseInt(input.value) - 1;
    } else {
      document.getElementById("alert_content").innerHTML = "This is the minimum quantity";
      showCustomAlert();
    }
  }
</script>