https://pnbcsl.in/track-your-application

ID da verificação
3957c8f3-c164-43a8-81d9-8dde90ccf98dConcluído
URL enviado:
https://pnbcsl.in/track-your-application
Relatório concluído:
LinkTexto
https://offers.pnbcards.in/ OFFERS
https://pnbcsl.zohorecruit.in/jobs/Careers CAREERS
https://apply.pnbcard.in/nidaanProceed
https://apply.pnbcard.in/Credit Card
https://apply.pnbcard.in:4443/Pre-qualified Credit Card
https://weblens.pnb.in/lendperfect/homeHome Loan
https://weblens.pnb.in/lendperfect/homeCar Loan
https://www.rbi.org.in/ RBI
https://rbikehtahai.rbi.org.in/ RBI Kehta hai
https://www.nthrewards.com/claim-your-gift-voucher Redeem You Voucher

Variáveis JavaScript · 19 encontrada(s)

NomeTipo
onbeforetoggleobject
documentPictureInPictureobject
onscrollendobject
$function
jQueryfunction
Popperobject
uidEventnumber
bootstrapobject
currentYearnumber
closeModalfunction

Mensagens de registro do console · 1 encontrada(s)

TipoCategoriaLog
errornetwork
URL
https://pnbcsl.in/favicon.ico
Texto
Failed to load resource: the server responded with a status of 404 ()

HTML

<!DOCTYPE html><html lang="en"><head>
  <link href="/css/reset.css" rel="stylesheet">
  <link href="/css/fonts.css" rel="stylesheet">
  <link href="/assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="/assets/select2/css/select2.min.css" rel="stylesheet">
  <link href="/assets/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  <link href="/assets/magnific-popup/css/magnific-popup.css" rel="stylesheet">
  <link href="/assets/iconmoon/css/iconmoon.css" rel="stylesheet">
  <link href="/assets/owl-carousel/css/owl.carousel.min.css" rel="stylesheet">
  <link href="/assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" media="all" href="/css/stellarnav.css">
  <link href="/css/animate.css" rel="stylesheet">
  <link href="/css/custom.css" rel="stylesheet">
  <link href="/css/style.css" rel="stylesheet">
  <link href="/css/slider.css" rel="stylesheet">
  <link href="/css/emi.css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="/css/ticker.css">

  <style>
    /* Loader Style */
    #loader-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background: rgba(255, 255, 255, 0.7);
      /* Slightly white background */
      z-index: 9999;
      /* Ensure it appears on top of everything else */
    }

    #loader {
      border: 16px solid #f3f3f3;
      border-top: 16px solid #ae0f39;
      /* Color for the top of the loader */
      border-radius: 50%;
      width: 60px;
      height: 60px;
      animation: spin 2s linear infinite;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    @keyframes spin {
      0% {
        transform: translate(-50%, -50%) rotate(0deg);
      }

      100% {
        transform: translate(-50%, -50%) rotate(360deg);
      }
    }

    #main-content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
      margin-top: 50px;
    }

    #result-container {
      border: 1px solid #ddd;
      padding: 15px;
      box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
      width: 60%;
      margin: 20px auto;
      background-color: #fff;
      display: none;
    }

    #result h2 {
      text-align: center;
      margin-bottom: 20px;
    }

    #result table {
      width: 100%;
      border-collapse: collapse;
    }

    #result td {
      padding: 10px 20px;
      border-bottom: 1px solid #ddd;
    }

    #result tr:last-child td {
      border-bottom: none;
    }

    #result td:first-child {
      font-weight: bold;
      color: #555;
      width: 40%;
    }

    .highlighted {
      background-color: #ffe0e0;
      font-weight: bold;
      padding: 5px;
      border-radius: 5px;
    }

    .track-app {
      margin-top: 50px;
    }

    .form-input {
      padding: 15px 10px;
      font-size: 16px;
    }

    .or-condition {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      height: 60px;
      margin: 20px 0;
    }

    .or-condition::before,
    .or-condition::after {
      content: "";
      flex: 1;
      height: 1px;
      background: #ccc;
    }

    .or-condition span {
      width: 30px;
      text-align: center;
    }

    .submit-btn {
      background-color: #ae0f39;
      color: #ffffff;
      font-size: 18px;
      padding: 10px 20px;
      border-radius: 5px;
      border: none;
    }

    .otp-input {
      width: 50%;
    }

    .form-group {
      margin-bottom: 20px;
    }

    /* Custom Modal Style */
    .custom-modal {
      display: none;
      position: fixed;
      z-index: 1000000;
      /* Ensure it appears on top of everything else */
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgba(0, 0, 0, 0.4);
    }

    .custom-modal-content {
      background-color: #fff;
      margin: 10% auto;
      padding: 20px;
      border: 1px solid #888;
      width: 80%;
      max-width: 600px;
      border-radius: 10px;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      z-index: 1000001;
      /* Ensure it appears on top of the modal background */
      position: relative;
    }

    .close-btn {
      color: #aaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
    }

    .close-btn:hover,
    .close-btn:focus {
      color: black;
      text-decoration: none;
      cursor: pointer;
    }

    .custom-modal table {
      width: 100%;
      border-collapse: collapse;
    }

    .custom-modal th,
    .custom-modal td {
      padding: 10px;
      text-align: left;
      border-bottom: 1px solid #ddd;
    }

    .custom-modal th {
      background-color: #f2f2f2;
    }

    .custom-modal .btn {
      background-color: #ae0f39;
      color: #fff;
      border: none;
      padding: 10px 20px;
      border-radius: 5px;
      cursor: pointer;
      text-align: center;
    }

    .custom-modal .btn:hover {
      background-color: #9e0e35;
    }

    /* Adjust the position of the OTP messages */
    #otpMessages {
      margin-bottom: 10px;
      text-align: center;
      /* Align OTP messages in the center */
    }

    /* View Discrepancies Button Style */
    .view-discrepancies-btn {
      background-color: #ae0f39;
      color: #ffffff;
      font-size: 14px;
      padding: 5px 10px;
      border-radius: 5px;
      border: none;
      margin-left: 10px;
      cursor: pointer;
    }

    .view-discrepancies-btn:hover {
      background-color: #9e0e35;
    }

    .status-and-button {
      display: flex;
      align-items: center;
    }
  </style>
</head>

<body>
  <header id="header" class="header fixed-top sticked" data-scrollto-offset="0">
  <div class="header-top">
    <div class="container header-middle">
      <div class="row">
        <span class="col-md-3 col-sm-6">
          <a href="/"><img src="/images/pnb-logo.svg" class="img-responsive" alt=""></a></span>
        <div class="col-md-2 assistance">
          <span class="miss-call">For any assistance please give missed call to</span>
        </div>

        <div class="col-md-2 assistance2">
          <span class="misscall-no">+91-8860-234-234</span>
        </div>
        <div class="col-md-5 topright-box">

          <ul class="top-nav ">
            <!-- <li class="skm"><a href="#maincontent" onclick="skipToMainContent()"> Skip to main content</a></li> -->
            <!-- Below one is for Site Map -->
            <!-- <li><a href="/view/site-map"><img src="/images/sitemap.svg" class="img-responsive" alt=""></a> </li> -->
            <li>
              <div class="accessibility">
                <button class="dropbtn"><img src="/images/awesome-wheelchair.svg" title="Text size" class="img-responsive" alt=""></button>
                <div class="dropdown-content">
                  <span> <a href="#" id="btn-increase">A+</a> </span>
                  <span> <a href="#" id="btn-orig">A</a> </span>
                  <span> <a href="#" id="btn-decrease">A-</a> </span>
                </div>
              </div>
            </li>

            <!-- <li class="default-theme"><a href="#">White</a></li>
                  <li  class="black-theme"><a href="">black</a></li> -->

          </ul>
          <!-- <div class="lang-wrapper">
      
                <div class="select-lang2">
                  <select class="">
                    <option value="en">Language</option>
                    <option value="fr">English</option>
                    <option value="de">Hindi</option>
                  </select>
                </div>
              </div> -->

          <div class="lang-wrapper">
            <div id="slugValue" style="display: none;"></div>
            <div id="idValue" style="display: none;"></div>
            <div class="select-lang2">
              <button id="languageToggle" onclick="toggleLanguage()"></button>
            </div>
          </div>
          <div class="search-top">
            <form class="navbar-form navbar-right" action="/search" method="get">
              <input type="text" name="query" placeholder="Search..." class="form-control">
              <button class="search-btn" type="submit"> <span class="icon-search-icon"></span> </button>
            </form>
          </div>
          <div class="contact">
            <a href="/contact-us" class="contact-us-top">
              <span>Contact Us</span>
            </a>

            

          </div>

        </div>
      </div>
    </div>
  </div>
  <section class="home-main-menu">
    <div class="top-main-menu">
      <div class="row">
        <div class="col-md-12">
          <div class="stellarnav dark right mobile"><a href="#" class="menu-toggle"><span class="bars"><span></span><span></span><span></span></span> Menu</a>
            <ul><a href="#" class="close-menu full"><span class="icon-close"></span>Close</a>
              <li>
                
                <a href="/">
                  HOME 
                </a>

                
                
              </li>
              <li class="has-sub">
                
                

                <a>
                  ABOUT US
                </a>
                <ul>
                  <li>
                    <a href="/view/company-about" target="_self">
                      <!-- ABOUT US -->
                      ABOUT US
                    </a>
                    
                  </li>
                  <li>
                    <a href="/directors" target="_self">
                      <!-- BOARD OF DIRECTORS -->
                      BOARD OF DIRECTORS
                    </a>
                    
                  </li>
                </ul>
              <a class="dd-toggle" href="#"><span class="icon-plus"></span></a></li>
              <li class="has-sub">
                
                

                <a>
                  PRODUCTS
                </a>
                <ul>
                  <li class="has-sub">
                    <a href="/HomeLoanSchemes" target="_self">
                      <!-- HOME LOAN -->
                      HOME LOAN
                    </a>
                    <ul>
                      <li>
                        <a href="/loanDetails/122" target="_self">
                          HOUSING FINANCE SCHEME FOR PUBLIC-PNB MAX-SERVER
                        </a>
                      </li>
                      <li>
                        <a href="/loanDetails/125" target="_self">
                          PNB PRIDE HOUSING LOAN FOR GOVERNMENT EMPLOYEES
                        </a>
                      </li>
                      <li>
                        <a href="/loanDetails/124" target="_self">
                          HOUSING LOAN FOR PUBLIC
                        </a>
                      </li>
                      <li>
                        <a href="/loanDetails/121" target="_self">
                          PRADHAN MANTRI AWAS YOJANA-HOUSING FOR ALL
                        </a>
                      </li>
                      <li>
                        <a href="/loanDetails/123" target="_self">
                          PNB GEN-NEXT HOUSING FINANCE SCHEME FOR PUBLIC
                        </a>
                      </li>
                    </ul>
                  <a class="dd-toggle" href="#"><span class="icon-plus"></span></a></li>
                  <li class="has-sub">
                    <a href="/CarLoanSchemes" target="_self">
                      <!-- CAR LOAN -->
                      CAR LOAN
                    </a>
                    <ul>
                      <li>
                        <a href="/loanDetails/141" target="_self">
                          SCHEME FOR FINANCING PURCHASE OF PNB GREEN CAR(E-VEHICLE)LOAN
                        </a>
                      </li>
                      <li>
                        <a href="/loanDetails/142" target="_self">
                          INSTA VEHICLE LOAN SCHEME FOR EXISTING HOME LOAN BORROWERS
                        </a>
                      </li>
                      <li>
                        <a href="/loanDetails/126" target="_self">
                          PNB PRIDE CAR LOAN FOR GOVERNMENT EMPLOYEES
                        </a>
                      </li>
                    </ul>
                  <a class="dd-toggle" href="#"><span class="icon-plus"></span></a></li>
                  <li class="has-sub">
                    <a href="/EducationLoanSchemes" target="_self">
                      <!-- EDUCATION LOAN -->
                      EDUCATION LOAN
                    </a>
                    <ul>
                      <li>
                        <a href="/loanDetails/146" target="_self">
                          PNB SARASWATI
                        </a>
                      </li>
                      <li>
                        <a href="/loanDetails/144" target="_self">
                          PNB PRATIBHA
                        </a>
                      </li>
                      <li>
                        <a href="/loanDetails/143" target="_self">
                          PNB UDAAN
                        </a>
                      </li>
                      <li>
                        <a href="/loanDetails/145" target="_self">
                          PNB KAUSHAL
                        </a>
                      </li>
                    </ul>
                  <a class="dd-toggle" href="#"><span class="icon-plus"></span></a></li>
                  <li>
                    <a href="/view/credit-cards" target="_self">
                      <!-- CREDIT CARDS -->
                      CREDIT CARDS
                    </a>
                    
                  </li>
                  <li>
                    <a href="/currentAccount" target="_self">
                      <!-- CURRENT ACCOUNT -->
                      CURRENT ACCOUNT
                    </a>
                    
                  </li>
                  <li>
                    <a href="/savingAccount" target="_self">
                      <!-- SAVING ACCOUNT -->
                      SAVING ACCOUNT
                    </a>
                    
                  </li>
                </ul>
              <a class="dd-toggle" href="#"><span class="icon-plus"></span></a></li>
              <li class="has-sub">
                
                

                <a>
                  NOTICES/ADVERTISEMENTS
                </a>
                <ul>
                  <li>
                    <a href="/tenders" target="_self">
                      <!-- TENDERS -->
                      TENDERS
                    </a>
                    
                  </li>
                  <li>
                    <a href="/view/notices" target="_self">
                      <!-- NOTICES -->
                      NOTICES
                    </a>
                    
                  </li>
                  <li>
                    <a href="/view/advertisements" target="_self">
                      <!-- ADVERTISEMENTS -->
                      ADVERTISEMENTS
                    </a>
                    
                  </li>
                </ul>
              <a class="dd-toggle" href="#"><span class="icon-plus"></span></a></li>
              <li>
                <a href="https://offers.pnbcards.in/" target="_blank">
                  OFFERS
                </a>
                

                
                
              </li>
              <li>
                <a href="https://pnbcsl.zohorecruit.in/jobs/Careers" target="_blank">
                  CAREERS
                </a>
                

                
                
              </li>
              <li>
                <a href="/track-your-application" target="_self">
                  TRACK YOUR APPLICATION
                </a>
                

                
                
              </li>
              <li class="has-sub">
                
                

                <a>
                  INVESTOR RELATION
                </a>
                <ul>
                  <li class="has-sub">
                    <a href="#" target="_self">
                      <!-- Compliance -->
                      Compliance
                    </a>
                    <ul>
                      <li>
                        <a href="/agm" target="_self">
                          AGM
                        </a>
                      </li>
                      <li>
                        <a href="/egm" target="_self">
                          EGM
                        </a>
                      </li>
                    </ul>
                  <a class="dd-toggle" href="#"><span class="icon-plus"></span></a></li>
                  <li>
                    <a href="/policies" target="_self">
                      <!-- Policies -->
                      Policies
                    </a>
                    
                  </li>
                </ul>
              <a class="dd-toggle" href="#"><span class="icon-plus"></span></a></li>
              <li>
                <a href="/partner-with-us" target="_self">
                  PARTNER WITH US
                </a>
                

                
                
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

  </section>
</header>

  <div class="track-app">
    <div class="track-app-bg">
      <h2>Know the status of your application</h2>
      <div class="form-container">
        <form id="trackAppForm">
          <div class="form-group row mb-3">
            <label for="productList" class="col-sm-3 form-label">Product:</label>
            <div class="col-sm-9">
              <select class="form-control product-list form-input" id="productList" name="productList">
                <option value="homeLoan">Home Loan</option>
                <option value="vehicleLoan">Vehicle Loan</option>
                <option value="educationLoan">Education Loan</option>
                <option value="creditCard" selected="">Credit Card</option>
              </select>
            </div>
          </div>

          <div class="form-group row mb-3">
            <label for="panCardNo" class="col-sm-3 form-label">PAN Card No:</label>
            <div class="col-sm-9">
              <input type="text" class="form-control form-input" id="panCardNo" name="panCardNo" pattern="[A-Z0-9]*" title="Only alphanumeric characters are allowed">
            </div>
          </div>

          <div class="form-group row mb-3">
            <label for="appNumber" class="col-sm-3 form-label">Application Number:</label>
            <div class="col-sm-9">
              <input type="text" class="form-control application-number form-input" id="appNumber" name="appNumber" pattern="[A-Z0-9]*" title="Only alphanumeric characters are allowed">
            </div>
          </div>

          <div class="or-condition">
            <span>OR</span>
          </div>

          <div class="form-group row mb-3">
            <label for="mobileNo" class="col-sm-3 form-label">Mobile No:</label>
            <div class="col-sm-6">
              <input type="text" class="form-control mobile-number form-input" id="mobileNo" name="mobileNo" pattern="\d{10}" title="Please enter a valid 10-digit mobile number">
            </div>
            <div class="col-sm-3">
              <button type="button" class="submit-btn" id="sendOtpBtn" onclick="sendOtp()">Send OTP</button>
            </div>
          </div>

          <div class="form-group row mb-3">
            <div class="col-sm-3">
              <input type="hidden" id="formOtpId" name="formOtpId">
            </div>
            <div id="otpMessages"></div>
          </div>

          <div class="form-group row mb-3">
            <label for="otp" class="col-sm-3 form-label">Enter OTP:</label>
            <div class="col-sm-9">
              <input type="text" class="form-control otp-input form-input" id="otp" name="otp" pattern="\d{6}" title="Please enter a valid 6-digit OTP">
              <div id="otpMessage" style="color: red; margin-top: 10px;"></div>
            </div>
          </div>

          <div class="row mb-3">
            <button type="button" class="submit-btn" id="submitBtn" onclick="submitAppStatus()" disabled="">Submit</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <div id="loader-overlay">
    <div id="loader"></div>
  </div>

  <div class="container mt-5">
    <div id="main-content">
      <div id="result-container">
        <div id="result"></div>
      </div>
    </div>
  </div>

  <div id="customModal" class="custom-modal">
    <div class="custom-modal-content">
      <span class="close-btn" onclick="closeModal()">×</span>
      <h2 id="modalTitle"></h2>
      <p id="modalMessage"></p>
      <div id="modalDiscrepancies" style="display: none;">
        <h6></h6>
        <table>
          <thead>
            <tr>
              <th>S.No</th>
              <th>Discrepancy Reason</th>
            </tr>
          </thead>
          <tbody id="discrepancyList"></tbody>
        </table>
        <div style="text-align: center; margin-top: 20px;">
          <p id="modalDiscrepanciesMessage"></p>
          <a href="https://apply.pnbcard.in/nidaan" target="_blank">
            <button class="btn" onclick="closeModal()">Proceed</button>
          </a>
        </div>
      </div>
    </div>
  </div>

  <footer class="footer">
    <!-- Start Footer Top -->
    <div class="container">
        <div class="row row1">
            <div>
                <!-- Display general description -->
                <div><div class="col-md-4">
	<h3>Contact Info</h3>
	<span class="fhu"> </span>
	<p class="rgo">Registered Office</p>
	<p class="cd">PNB Cards &amp; Services Limited, E112, Sector-10, Dwarka, <br>New Delhi-110075</p>

	<p class="co rgo">Corporate Office</p>
	<p class="cd">PNB Cards &amp; Services Limited, 6th Floor, PNB House, 7 Bhikaji Cama Place, New Delhi-110066</p>

	<p class="email">[email protected]</p>
	<p class="phone">011-43061779</p>
	<p><strong>CIN</strong> U74999DL2021PLC378579</p>
</div></div>

                <!-- Check if orderValue is 3 -->

                
                <!-- Check if orderValue is 4 -->
            
                
            </div>
            <div>
                <!-- Display general description -->
                <div><div class="col-md-3">
	<div class="foot-nav">
		<h3>Apply Online</h3>
		<span class="fhu"> </span>
		<ul>
			<li><a href="https://apply.pnbcard.in/" target="_blank">Credit Card </a></li>
			<li><a href="https://apply.pnbcard.in:4443/" target="_blank">Pre-qualified Credit Card </a></li>
			<li><a href=" https://weblens.pnb.in/lendperfect/home" target="_blank">Home Loan </a></li>
			<li><a href="https://weblens.pnb.in/lendperfect/home" target="_blank">Car Loan </a></li>
		</ul>
	</div>
</div></div>

                <!-- Check if orderValue is 3 -->

                
                <!-- Check if orderValue is 4 -->
            
                
            </div>
            <div>
                <!-- Display general description -->
                <div><div class="col-md-2">
	<div class="foot-nav">
		<h3>QUICK LINKS</h3>
		<span class="fhu"> </span>
		<ul>
			<li><a href="https://www.rbi.org.in/" target="_blank"> RBI</a></li>
			<li><a href="https://rbikehtahai.rbi.org.in/" target="_blank"> RBI Kehta hai </a></li>
			<li><a href="/view/faq"> FAQ </a></li>
			<li><a href="/view/cookies-policy"> Cookies Policy </a></li>
			<li><a href="/view/privacy-policy">Privacy Policy</a></li>
			<li><a href="/view/copyright-policy"> Copyright Policy</a></li>
			<li><a href="/view/disclaimer">Disclaimer </a></li>
			<li><a href="#"> Track You Application</a></li>
			<li><a href="https://www.nthrewards.com/claim-your-gift-voucher" target="_blank"> Redeem You Voucher </a></li>
			
			<li><a href="/view/site-map">Sitemap</a></li>

		</ul>

	</div>


</div>
</div>

                <!-- Check if orderValue is 3 -->

                
                 <div class="dosanddont">
                        <div class="foot-nav1">
                            <!-- <span class="fhu"> </span>  -->
                            <ul>
                                <li>
                                    <i class="fa  fa-chevron-right"></i><a href="/DND/21/PNBDosanddont.pdf" target="_blank">Credit Card-Do's And Dont's</a>
                                </li>
                                
                            </ul>

                            <!-- <ul>
                                <li>
                                    <i class="fa  fa-chevron-right"></i><a href="/leadSubmissionForm"> Lead Submission Form
                                  </a>
                                </li>
                            </ul> -->
                      </div>
                    </div>
                
                <!-- Check if orderValue is 4 -->
            
                
            </div>
            <div>
                <!-- Display general description -->
                <div><div class="col-md-3">
	<div class="connect-us">
		<!-- <h3>Social Media</h3>
		<span class="fhu"> </span> -->
		<!-- <ul class="follow-us clearfix">
			<li>
				<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
			</li>
			<li>
				<a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
			</li>
			<li>
				<a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
			</li>

			<li>
				<a href="#"><i class="fa fa-youtube-play" aria-hidden="true"></i></a>
			</li>
			<li>
				<a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>
			</li>
		</ul> -->

		<p class="last-up"><span>Last Updated :</span> 04 June 2024</p>
		
	</div>
</div></div>

                <!-- Check if orderValue is 3 -->

                
                <!-- Check if orderValue is 4 -->
            
                
                    <div>
                        <div class="connect-us">
                    <p class="vistior">Visitors Count :</p> <span class="visitor-count">152099</span>
                        </div>
                    </div>
                
            </div>


        </div>
    </div>


    <div class="bottom">
        <div class="copy" id="copyright-year">Copyright © <span id="current-year-ft">2024</span>, PNB Cards &amp; Services
            Limited
            (PNBCSL)</div>
    </div>

</footer>
  <a href="#" class="scroll-top"><i class="fa fa-chevron-up" aria-hidden="true"></i></a>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>

  <script>
    $(document).ready(function () {
      let otpTimer;
      const otpTimeout = 120000; // 2 minutes in milliseconds

      function showModal(title, message, discrepancies, uarn) {
        $("#modalTitle").text(title);
        $("#modalMessage").text(message);

        if (discrepancies && discrepancies.length > 0) {
          const discrepancyList = $('#discrepancyList').empty();
          discrepancies.forEach(function (discrepancy, index) {
            discrepancyList.append(`<tr><td>${index + 1}</td><td>${discrepancy.trim()}</td></tr>`);
          });
          $("#modalDiscrepancies").show();
        } else {
          $("#modalDiscrepancies").hide();
        }

        let fullMessage = `Your credit card application (<strong>UARN: </strong> <strong>${uarn}</strong> ) is currently on <span style="font-weight: bold; color: red;">HOLD</span> due to the above-mentioned discrepancies.
                                <p>To proceed further, please click on “Proceed” and upload the required documents. This will help in continuing with the processing of your credit card application.</p>`;
        $("#modalDiscrepanciesMessage").html(fullMessage);

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

      function closeModal() {
        $("#customModal").hide();
      }

      window.closeModal = closeModal; // Ensure closeModal is accessible globally

      function startOtpTimer() {
        let timer = 60;
        $("#sendOtpBtn").prop("disabled", true);

        otpTimer = setInterval(function () {
          timer--;
          $("#sendOtpBtn").text(`Resend OTP (${timer}s)`);

          if (timer <= 0) {
            clearInterval(otpTimer);
            $("#sendOtpBtn").text("Resend OTP");
            $("#sendOtpBtn").prop("disabled", false);
          }
        }, 1000);
      }

      function blurContent() {
        $("body").children().not("#loader-overlay, #customModal").css("filter", "blur(3px)");
        $("#loader-overlay").show();
      }

      function unblurContent() {
        $("#loader-overlay").hide();
        $("body").children().not("#loader-overlay, #customModal").css("filter", "none");
      }

      window.sendOtp = function () {
        blurContent();
        $.ajax({
          url: "/sendOtp",
          method: "POST",
          contentType: "application/json",
          data: JSON.stringify({
            mobileNumber: $("#mobileNo").val(),
            panCardNo: $("#panCardNo").val(),
            appNumber: $("#appNumber").val(),
            productList: $("#productList").val()
          }),
          success: function (response) {
            unblurContent();
            if (response.error) {
              $("#otpMessages").html(`<p style="color: red;">Error: ${response.error}</p>`);
            } else {
              $("#formOtpId").val(response.formOtpId);
              startOtpTimer();
              const maskedMobileNo = response.maskedMobileNo;
              $("#otpMessages").html(`<p style="color: green;">OTP sent to the mobile number ${maskedMobileNo}</p>`);
            }
          },
          error: function (error) {
            unblurContent();
            $("#otpMessages").html(`<p style="color: red;">Failed to send the OTP. Please check the details provided.</p>`);
          }
        });
      };

      window.submitAppStatus = function () {
        blurContent();
        $.ajax({
          url: "/submit",
          method: "POST",
          contentType: "application/json",
          data: JSON.stringify({
            mobileNo: $("#mobileNo").val(),
            panCardNo: $("#panCardNo").val(),
            appNumber: $("#appNumber").val(),
            productList: $("#productList").val(),
            formOtpId: $("#formOtpId").val(),
            otp: $("#otp").val()
          }),
          success: function (response) {
            unblurContent();
            if (response.error) {
              showModal("Error", response.error);
              $("#result").html("Error occurred: " + response.error);
            } else {
              const selectedProduct = $("#trackAppForm select[name='productList'] option:selected").text();
              let statusDisplay = response.appStatusDisplayStateName;
              let statusStyle = "border: 1px solid #ddd; border-radius: 5px; padding: 5px;";
              let additionalStatusStyle = "";

              if (statusDisplay === 'Application Discrepant') {
                additionalStatusStyle = "color: red; font-weight: bold;";
              }

              let viewDiscrepanciesButton = '';
              if (response.discrepant !== "NA" && response.discrepant.length > 0) {
                viewDiscrepanciesButton = `<button type="button" class="view-discrepancies-btn" id="viewDiscrepanciesBtn">View Discrepancies</button>`;
              }

              let htmlContent = `
                            <h2>Current Status</h2>
                            <table>
                                <tr>
                                    <td>Product</td>
                                    <td>${selectedProduct}</td>
                                </tr>
                                <tr>
                                    <td>Application No.</td>
                                    <td>${response.uarnNo}</td>
                                </tr>
                                <tr>
                                    <td>Applied for</td>
                                    <td>${response.cardVariant}</td>
                                </tr>
                                <tr>
                                    <td>Status</td>
                                    <td><div class="status-and-button"><span style="${statusStyle} ${additionalStatusStyle}">${statusDisplay}</span>${viewDiscrepanciesButton}</div></td>
                                </tr>
                            </table>`;

              $("#result").html(htmlContent);
              $("#result-container").show();

              $('html, body').animate({
                scrollTop: $("#result-container").offset().top
              }, 1000);

              if (response.discrepant !== "NA" && response.discrepant.length > 0) {
                $("#viewDiscrepanciesBtn").on('click', function () {
                  showModal("Discrepancies", "", response.discrepant, response.uarnNo);
                });
              }

              if (response.disableButtons) {
                // Freeze the form fields and buttons after successful submission
                $('#trackAppForm input, #trackAppForm select, #trackAppForm button').prop('disabled', true);
                $("#sendOtpBtn").hide(); // Hide send OTP button
                $("#submitBtn").hide(); // Hide submit button
              }
            }
          },
          error: function (error) {
            unblurContent();
            showModal("Error", "The OTP entered is invalid or expired.");
          }
        });
      };

      // Enable the submit button if OTP is 6 digits long
      $("#otp").on('input', function () {
        if ($(this).val().length === 6) {
          $("#submitBtn").prop("disabled", false);
          $("#otpMessage").text("");
        } else {
          $("#submitBtn").prop("disabled", true);
          $("#otpMessage").text("Please enter the 6 digits of OTP.");
        }
      });

      // Initially set the sendOtpBtn text to "Send OTP"
      $("#sendOtpBtn").text("Send OTP");
    });
  </script>

  <script type="text/javascript" src="/js/stellarnav.min.js"></script>
  <script type="text/javascript">
    jQuery(document).ready(function ($) {
      jQuery('.stellarnav').stellarNav({
        theme: 'dark',
        breakpoint: 960,
        position: 'right',
      });
    });
  </script>

  <script>
    // Get the current year
    var currentYear = new Date().getFullYear();

    // Update the current year in the HTML
    document.getElementById("current-year-ft").innerText = currentYear;

  </script>




</body></html>