<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ABR Login</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="css/styles.css" rel="stylesheet">
</head>
<body  >
  <div class="container-fluid"  >
  <div class="container bg1 ">
  
 
  <div class="row">
  <div class="col-md-4  text-center"> &nbsp; </div>
    <div class="col-md-4 text-center top-logo"> <img src="images/lpt-top-logo.png" width="170" class="img-fluid"> </div>
    <div class="col-md-4  text-center"> &nbsp; </div>
</div>


 

<div class="row padding-10">
  <div class=" col-2 col-md-3   col-sm-4   text-center"> &nbsp; </div>
    <div class=" col-8 col-md-6   col-sm-4  text-center"> <img src="images/top-header.png" width="180" class="img-fluid"> </div>
    <div class=" col-2  col-md-3   col-sm-4  text-center"> &nbsp; </div>
</div>


<div class="row">
  <div class=" col-3  col-md-3  col-sm-4 text-center"> &nbsp; </div>
    <div class=" col-6 col-md-6   col-sm-4  text-center"> <a href="abr-login.php"><img src="images/account-login.png" class="img-fluid"> </div>
    <div class=" col-3 col-md-3    col-sm-4  text-center">  &nbsp; </div>
</div>


 
<footer class="mt-4">
    <div class="row">
      <div class="col-6 text-center" style="background:#ECE9F8">
      <div class="mt-4"><a href="#"  data-bs-toggle="modal" data-bs-target="#findUserModal" style="color:#54308E;font-weight:bold;text-decoration:none;"> Find Your User Code</a></div>
      </div>
      <div class="col-6 text-center" style="background:#54308E">
      <img src="images/contact-us.png" class="img-fluid" style="cursor:pointer;" data-bs-toggle="modal" data-bs-target="#contactModal">
      </div>
    </div>
  </footer>

</div>
 
</div>





<!-- Contact Us Modal -->
<div class="modal fade" id="contactModal" tabindex="-1" aria-labelledby="contactModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="contactModalLabel">Contact Us</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
      <p><strong>Name:</strong> Ravindra Veer</p>
        <p><strong>Support Email:</strong> ravindra.veer@exicongroup.com</p>
        <p><strong>Phone:</strong> +91-9284759607,+91-8446704280 (Whatsapp) </p>
        <p><strong>Contact Time:</strong> Time, 9 AM to 6 PM</p>
        <!-- Add any other contact details here -->
      </div>
    </div>
  </div>
</div>



<!-- Find User Code Modal -->
<div class="modal fade" id="findUserModal" tabindex="-1" aria-labelledby="findUserModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="findUserModalLabel">Find Your User Code</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
      <div class="mb-3">
  <label for="fullnameInput" class="form-label">Full Name (partial allowed)</label>
  <input type="text" class="form-control" id="fullnameInput" placeholder="Enter full or partial name">
</div>
<div class="mb-3">
  <label for="stateInput" class="form-label">State (partial allowed)</label>
  <input type="text" class="form-control" id="stateInput" placeholder="Enter full or partial state">
</div>
        <div id="userDetails" class="d-none">
          <p><strong>User ID:</strong> <span id="userId"></span></p>
          <p><strong>Full Name:</strong> <span id="fullName"></span></p>
          <p><strong>State:</strong> <span id="userState"></span></p>
        </div>
        <div id="userError" class="text-danger d-none">TM ID not found.</div>
      </div>
      <div class="modal-footer">
        <button type="button" id="fetchUserBtn" class="btn btn-primary">Fetch Details</button>
      </div>
    </div>
  </div>
</div>



<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>



<script>
document.getElementById('fetchUserBtn').addEventListener('click', function () {
  const fullname = document.getElementById('fullnameInput').value.trim();
  const state = document.getElementById('stateInput').value.trim();

  if (!fullname && !state) {
    alert('Please enter Full Name or State to search.');
    return;
  }

  fetch('get-user-by-tmid.php', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: new URLSearchParams({ fullname, state })
  })
  .then(res => res.json())
  .then(data => {
    const userDetails = document.getElementById('userDetails');
    const userError = document.getElementById('userError');

    if (data.success) {
      let output = '<ul class="list-group">';
      data.data.forEach(user => {
        output += `<li class="list-group-item">
          <strong>User ID:</strong> ${user.userid}<br>
          <strong>Full Name:</strong> ${user.fullname}<br>
          <strong>State:</strong> ${user.state}
        </li>`;
      });
      output += '</ul>';
      userDetails.innerHTML = output;
      userDetails.classList.remove('d-none');
      userError.classList.add('d-none');
    } else {
      userDetails.classList.add('d-none');
      userError.textContent = data.message || 'No users found.';
      userError.classList.remove('d-none');
    }
  })
  .catch(() => {
    alert('Something went wrong. Please try again.');
  });
});

</script>
</body>
</html>