<!DOCTYPE html>
<html lang="en">

<head>
    <title>ICICI iLens</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script type="text/javascript" src="js/login10122024.js"></script>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" crossorigin="anonymous" /> -->
    <style>
        input::-webkit-contacts-auto-fill-button,
        input::-webkit-credentials-auto-fill-button {
            visibility: hidden;
            position: absolute;
            right: 0;
        }
    </style>
</head>

<body onload="OTPInput()">
    <link rel="stylesheet" type="text/css" href="css/style01132022.css" />

    <!--Login Page HTML-->
    <div class="loader"></div>
    <div class="login_bg"></div>
    <div class="modal" id="user_login" style="display:block">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content lpp_login_box">
               <div class="lpp_icici_ilens_logo"></div>
                <!-- <img src="./image/logo_icici_ilens.png" class="lpp_icici_ilens_logo" height="50" alt="ICICI_ILENS" /> -->
                <div id="agentLoginContainer" style="display:none">
                    <form name="userlogin" class="userloginformclass" autocomplete="off">
                        <div class="pb-3">
                            <div class="lpp-failed-message-Pnl mt-2 mb-0 close-Btn" id="alertlogin" style="display:none"></div>
                            <div class="lpp-success-message-Pnl mt-2 mb-0 close-Btn" id="alertPwd" style="display:none"></div>
                        </div>
                        <div class="form-group flex-column">
                          <div class="d-flex">
                            <div class="lpp_userId_icon"></div>
                            <input type="text" autofill="off" autocomplete="off" name="username" id="username" class="form-control" placeholder="User ID/Email/Mobile No." pattern="^[_.@A-Za-z0-9\-]+$" readonly 
                            onfocus="this.removeAttribute('readonly');"/>
                          </div>
                          <span id="validateName"></span>
                        </div>
                        <div class="form-group">
                            <div class="lpp_password_icon"></div>
                            <input type="password" autofill="off" autocomplete="off" name="password" id="password" class="form-control" placeholder="Password" maxlength="16" readonly 
                            onfocus="this.removeAttribute('readonly');"/>
                            <div class="user-eye">
                                <div class="lpp_hide_eye_icon usereye"></div>
                            </div>
                        </div>
                        <div class="form-group d-block">
                            <div class="forget_links ">
                                <a href="#" id="userID" class="text-left">Forgot User ID?</a>
                                <a href="#" id="forgetpassword" class="text-right">Forgot Password?</a
                  >
                </div>
              </div>
              <div class="form-group m-0">
                <button
                  type="button"
                  name="submit"
                  id="but_login"
                  class="login_btn"
                  value="Login"
                >
                  Login
                </button>
              </div>
              <div id="loginoptions">
                <div class="display_Flex">
                  <div class="downloadApk" id="openApkPopup">
                    <!-- <img
                      class="support-icon"
                      src="./image/mobile.svg"
                    />Download iLens App -->
                    <div class="download_ilens_app"></div>
                    <div>Download iLens App</div>
                  </div>
                  <div class="help" id="open-faqs">
                    <!-- <img class="support-icon" src="./image/FAQ.svg" />Help/ FAQs -->
                    <div class="help_faq_icon"></div>
                    <div>Help/ FAQs</div>
                  </div>
                </div>
                <div>
                  <a href="Javascript:loginoptions()" id="backtologinoptions"
                    >&lt; Back to Login options</a
                  >
                </div>
              </div>
            </form>
          </div>

          <div class="ilens_login_containers" id="loginContainers">
            <div class="ilens_login_methods" id="bankLogin">
              <div class="lpp_bank_icon"></div>
              <div class="d-flex flex-column">
                <div class="lpp_login_type">Bank Employee</div>
                <div class="lpp_login_info">(Login with Emp ID)</div>
              </div>
            </div>
            <div class="ilens_login_methods" id="nonEmployeeLogin">
              <div class="lpp_Employee_icon"></div>
              <div class="d-flex flex-column">
                <div class="lpp_login_type">Non Employee</div>
                <div class="lpp_login_info">(Login with BAN ID)</div>
              </div>
            </div>
            <div class="ilens_login_methods" id="agentsLogin">
              <div class="lpp_agent_icon"></div>
              <div class="d-flex flex-column">
                <div class="lpp_login_type">Agents</div>
                <div class="lpp_login_info">
                  (Login with User ID/Email/Mobile No.)
                </div>
              </div>
            </div>
            <div class="display_Flex_First">
              <div class="downloadApk" id="openApkPopupFirst">
 		<!-- <img class="support-icon" src="./image/mobile.svg" />Download
                iLens App -->
                <div class="download_ilens_app"></div>
                <div>Download iLens App</div>
              </div>
              <div class="help" id="open-faqsFirst">
                <!-- <img class="support-icon" src="./image/FAQ.svg" />Help/ FAQs -->
                 <div class="help_faq_icon"></div>
                 <div>Help/ FAQs</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="modal" id="otp_login" style="display:none">
      <div class="modal-dialog">
        <div class="modal-content lpp_login_box">
          <div class="lpp_icici_ilens_logo"></div>
          <!-- <img
            src="./image/logo_icici_ilens.png"
            class="lpp_icici_ilens_logo"
            height="50"
            alt="ICICI_ILENS"
          /> -->
          <form name="otp" class="userloginformclass">
            <div class="pb-3">
              <div
                class="lpp-failed-message-Pnl mt-2 mb-0 close-Btn"
                id="alertotp"
                style="display:none"
              ></div>
              <div
                class="lpp-success-message-Pnl mt-2 mb-0 close-Btn"
                id="alertOtpSucc"
                style="display:none"
              ></div>
            </div>
            <div>
              <h4 class="headingtext">OTP Verification</h4>
              <BR />
              <BR />
              <span
                >OTP has been sent to your registered mobile number & email Id
              </span>
              <BR />
              <span id="hintText" style="display:none">Hint:</span>
            </div>
            <BR />

            <div class="mb-6 text-center">
              <div id="otp" class="flex justify-center">
                <input
                  class="m-2 text-center form-control form-control-solid rounded focus:border-blue-400 focus:shadow-outline"
                  type="tel"
                  id="first"
                  maxlength="1"
                />
                <input
                  class="m-2 text-center form-control form-control-solid rounded focus:border-blue-400 focus:shadow-outline"
                  type="tel"
                  id="second"
                  maxlength="1"
                />
                <input
                  class="m-2 text-center form-control form-control-solid rounded focus:border-blue-400 focus:shadow-outline"
                  type="tel"
                  id="third"
                  maxlength="1"
                />
                <input
                  class="m-2 text-center form-control form-control-solid rounded focus:border-blue-400 focus:shadow-outline"
                  type="tel"
                  id="fourth"
                  maxlength="1"
                />
                <input
                  class="m-2 text-center form-control form-control-solid rounded focus:border-blue-400 focus:shadow-outline"
                  type="tel"
                  id="fifth"
                  maxlength="1"
                />
                <input
                  class="m-2 text-center form-control form-control-solid rounded focus:border-blue-400 focus:shadow-outline"
                  type="tel"
                  id="sixth"
                  maxlength="1"
                />
              </div>
            </div>
            <div
              id="resendotp"
              class="float-right lpp-fontfamily-bold py-2 verifyResend2"
              name="resend"
            >
              Resend
            </div>
            <BR />

            <div class="form-group m-0">
              <button
                type="button"
                name="submit"
                id="otplogin"
                class="login_btn"
                value="Login"
              >
                Verify
              </button>
            </div>
            <div class="form-group nonregister" id="verifiy_otp">
              <a href="Javascript:back()" id="backtologin"> Back to Login</a>
                            </div>
                    </form>
                    </div>
                </div>
            </div>

            <!--Forget User name Forgot Password and Change Password HTML-->
            <div class="modal" id="Forget_useridpassword" style="display:none">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="lpp_login_box modal-content">
                        <form name="forgetform" class="forgetform" autocomplete="off">
                            <div id="page-name">
                                <h4 class="headingtext"></h4>
                            </div>
                            <div class="pb-3">
                                <div class="lpp-failed-message-Pnl close-Btn my-2" id="alertforget" role="alert"></div>
                                <div class="lpp-warning-message-Pnl close-Btn my-2" id="alertwarning" role="alert"></div>
                                <div id="alertmsg" class="lpp-info-message-Pnl close-Btn my-2" role="alert"></div>
                            </div>
                            <div class="form-group">
                                <span id="forgetparagraph"> </span>
                            </div>
                            <div class="form-group textmargin">
                                <input type="text" name="userid" id="userid" readonly />
                                <label id="forgetlabel" readonly></label>
                            </div>
                            <div id="captchNumImg" style="padding-bottom:15px">
                                <img id="captcha" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAeCAIAAABVOSykAAAAv0lEQVR42u2XSw6AIAwFvf+lcaeJ4uujfmtmltggTNoC0wQAAABwE6217uDC0Xg3JgwQk/sB72gydVwla8jjh3zp5eoR/+smc8PJR//+dELpterlOqY2aXUm4P0+lZblbGOfOPVk+WXibNKv0G4LS/y9kiyzB4tMEYfD32SFR6pfU2EZFpM11MVHz7W/9ay0LP+gKCkrVymJJCpzzzKbt9jM/kaeu22IB8AXTYl60SLCAOfl4MzP4x0AAAAAAFZmncU+7J1t+CYAAAAASUVORK5CYII="
                                />
                                <input id="captchaCode" type="hidden" value="" />
                            </div>
                            <div class="form-group textmargin">
                                <input type="text" name="captchnum" id="captchnum" />
                                <label id="captchaLabel" readonly>Please enter Captcha Number shown above</label
              >
            </div>
            <div class="form-group registration">
              <input type="email" name="email" id="email" required readonly />
              <label id="emaillabel" readonly></label>
                                <div class="user-eyepwd toggle2">
                                    <i class="verifyNo" aria-hidden="true"></i>
                                </div>
                            </div>
                            <div class="form-group registration verify_number">
                                <input type="mobNum" name="mobNum" id="mobNum" required readonly />
                                <label id="mobNumlabel" readonly></label>
                                <div class="user-eyepwd toggle2">
                                    <i class="verifyNo" aria-hidden="true"></i>
                                </div>
                                <div id="verify" class="float-right lpp-fontfamily-bold verifyResend" name="verify">
                                    Verify Number
                                </div>
                            </div>
                            <div class="form-group pwdExpired">
                                <input type="password" name="oldPassword" maxlength="16" id="oldPassword" required />
                                <label id="oldlabel"></label>
                                <div class="user-eyepwd toggle">
                                    <div class="lpp_hide_eye_icon usereye"></div>
                                </div>
                            </div>
                            <div class="form-group changepwd">
                                <input type="password" name="newPassword" id="newPassword" maxlength="16" required />
                                <label id="newlabel"></label>
                                <div class="user-eyepwd toggle1">
                                    <div class="lpp_hide_eye_icon usereye1"></div>
                                    <i class="samepwd" aria-hidden="true"></i>
                                </div>
                            </div>
                            <div id="message">
                                <span id="tick" class="pl-1"></span>
                                <span id="length"> Must be between 8 to 16 characters</span><br />
                                <span id="tick2" class="pl-1"></span>
                                <span id="capital">Must contain atleast one capital letter</span
              ><br />
              <span id="tick3" class="pl-1"></span>
                                <span id="number">Must contain atleast one number</span><br />
                                <span id="tick4" class="pl-1"></span>
                                <span id="special">Must contain atleast one special character</span
              >
            </div>
            <div class="form-group changepwd">
              <input
                type="password"
                name="confirmPassword"
                id="confirmPassword"
                maxlength="16"
                required
              />
              <label id="confirmlabel"></label>
              <div class="user-eyepwd toggle2">
                <div class="lpp_hide_eye_icon usereye2"></div>
                <i class="samepwd" aria-hidden="true"></i>
              </div>
            </div>
            <div class="form-group nonregister">
              <button type="submit" name="submit" id="but_forget" value="Send">
                Send
              </button>
              <button type="submit" name="changebtn" id="but_save" value="Save">
                Save
              </button>
              <a href="Javascript:back()" id="backtologin"> Back to Login</a>
            </div>
            <div class="row mx-0 registersave">
              <button type="button" id="btn_cancel" data-dismiss="modal">
                Cancel
              </button>
              <button type="button" data-target="#modalPopup" id="btn_register">
                Save
              </button>
            </div>
            <div class="text-right">
              <div class="help" id="raiseTicket">
                <!-- <img class="support-icon" src="./image/FAQ.svg" />Need
                help? -->
                <div class="help_faq_icon"></div>
                <div>Need help?</div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>

    <div
      class="modal"
      id="modalPopup"
      tabindex="-1"
      aria-labeledby="Verification"
      role="dialog"
      data-backdrop="true"
    >
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <span class="lpp-innerHeaders modal-title" id="Verification"
              >Verification</span
            >
            <button
              aria-label="Close"
              class="close modalclose"
              data-dismiss="modal"
              aria-label="close"
              type="button"
            >
              <span class="float-right">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body mbody">
                                <div class="lpp-warning-message-Pnl close-Btn" id="alertModal" role="alert" style="display:none"></div>
                                <p id="modalParagraph"></p>
                                <div class="code_label">
                                    <input type="text" name="code" id="code" class="lpp_static_input" />
                                    <label id="code" class="lpp_label mb-2">Code</label>
                                </div>
                                <div id="otpresend" class="float-right lpp-fontfamily-bold py-2 verifyResend" name="resend">
                                    Resend
                                </div>
                            </div>
                            <div class="modal-footer mbody">
                                <button type="button" class="modalclose" id="modalCancel">
              Cancel
            </button>
                                <button type="button" id="btn_verify">
              Verify
            </button>
                            </div>
                    </div>
                </div>
            </div>
            <!---------------------- Pop-up for raising new ticket ----------------------->

            <div class="modal" id="newTicketModal" tabindex="-1" aria-labeledby="RaiseNewTicket" role="dialog" data-backdrop="true">
                <div class="modal-dialog modal-dialog-center" role="document">
                    <div class="tkt-box modal-content">
                        <div class="modal-header">
                            <span class="raise-tkt-heading" id="RaiseNewTicket">Raise a Ticket</span
            >
            <button
              aria-label="Close"
              class="close tktModalclose"
              data-dismiss="modal"
              aria-label="close"
              type="button"
            >
              <span class="float-right">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body mbody">
                            <div class="pb-3">
                                <div class="lpp-failed-message-Pnl mt-2 mb-0 close-Btn" id="ticketError" style="display:none"></div>
                                <div class="lpp-success-message-Pnl mt-2 mb-0 close-Btn" id="ticketSuccess" style="display:none"></div>
                            </div>
                            <form id="newTktForm" name="raiseATicket" class="userloginformclass">
                                <div class="form-group">
                                    <div class="code_label">
                                        <label id="code" class="lpp_label mb-2">Screen Name</label>
                                        <input type="text" name="code" id="screenName" class="lpp_static_input" readonly required />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="code_label">
                                        <label id="code" class="lpp_label mb-2">Registered Mobile Number</label>
                                        <input type="text" name="code" id="mobileNo" class="lpp_static_input" onkeypress="
                                        return onlyNumberKey(event)" maxlength="10" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="code_label">
                                        <label id="code" class="lpp_label mb-2">User ID</label>
                                        <input type="text" name="code" id="userId" class="lpp_static_input" required />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="code_label">
                                        <label id="code" class="lpp_label mb-2">Message</label>
                                        <textarea form="newTktForm" class="lpp_static_input" id="form-message" required></textarea>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer mbody">
                            <button type="button" id="btn_cancel_ticket">Cancel</button>
                            <button type="button" id="btn_new_ticket">Submit</button>
                        </div>
                    </div>
                </div>
            </div>

            <!---------------------- Raise a ticket modal end ------------------------->

            <!---------------------- FAQs ------------------------->
            <div class="modal" id="faqModal" tabindex="-1" aria-labeledby="faq" role="dialog" data-backdrop="true">
                <div class="faq-modal-box modal-dialog modal-dialog-centered m-auto" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <span class="raise-tkt-heading" id="faq">FAQ</span>
                            <button aria-label="Close" class="close faqModalclose" data-dismiss="modal" aria-label="close" type="button">
              <span class="float-right">&times;</span>
            </button>
                        </div>
                        <div class="text-right p-2">
                            <div class="help" id="raiseTicketFAQ">
                              <!-- <img class="support-icon" src="./image/FAQ.svg" /> Need
                              help? -->
                              <div class="help_faq_icon"></div>
                              <div>Need help?</div>
                            </div>
          </div>
          <div class="modal-body faq-div">
            <div class="pb-3">
              <div
                class="lpp-failed-message-Pnl mt-2 mb-0 close-Btn"
                id="faqError"
                style="display:none"
              ></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!---------------------- FAQs end ------------------------->

    <!---------------------- APK QRCode start ------------------------->
    <div
      class="modal"
      id="qrModalPopup"
      tabindex="-1"
      aria-labeledby="qrcode"
      role="dialog"
      data-backdrop="true"
    >
      <div class="modal-dialog modal-dialog-centered m-auto" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <p class="lpp-innerHeaders m-0">
              Scan QR Code for iLens Mobile App
            </p>
            <button
              aria-label="Close"
              class="close openApkPopupClose"
              data-dismiss="modal"
              aria-label="close"
              type="button"
            >
              <span class="float-right">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="app_links">
                                <div class="app_ios" id="app_ios">
                                    <div class="qr_image_ios_class"></div>
                                    <!-- <img class="qr_image" id="qr_image_ios" src="" alt="QrScan iOS" /> -->
                                    <div class="lpp_dev_qr_content">
                                        <div class="ios_icon"></div>
                                        <div class="ios_content">Download for iOS</div>
                                    </div>
                                </div>
                                <div class="app_android" id="app_android">
                                    <div class="qr_image_android_class"></div>
                                    <!-- <img class="qr_image" id="qr_image_android" src="" alt="QrScan Android" /> -->
                                    <div class="lpp_dev_qr_content">
                                        <div class="android_icon"></div>
                                        <div class="android_content">Download for Android</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!---------------------- APK QRCode end ------------------------->
            <script type="text/javascript">
              sessionStorage.clear();
          </script>
</body>
<div style="display:none" class="lpp-failed-message-Pnl close-Btn">
    &nbsp;
</div>

<footer class="footer">
    <p class="m-0">
        &copy;&nbsp;<span id="currentYear"></span> Tata Consultancy Services Limited. All Rights Reserved
    </p>
</footer>

</html>
