<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>RTO Search Results</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
    }

    .results p {
      margin: 5px 0;
    }
	.results table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

.results td, .results th {
  text-align: left;
  padding: 8px 16px;
}
.results th {
background:#009688;
color:#fff;
border-radius:20px 20px 0 0px;
}
.results td:nth-child(2){
font-weight:600;
}
.border_left{
border-radius: 0 0 0 20px
}
.border_right{
border-radius: 0 0 20px 0px
}
.results tr:nth-child(even) {
  background-color: #f1f1f1;
}
.results tr:nth-child(odd) {
  background-color: #00968808;
}
.mar_0{
	margin:0;
	padding-bottom:10px;
}
  </style>
</head>
<body>
<div id="resultsContainer"></div>
<div id="staticContent"></div>
<script>
  const urlParams = new URLSearchParams(window.location.search);
  const query = urlParams.get("query") ? urlParams.get("query").toUpperCase() : "";
  const resultsContainer = document.getElementById("resultsContainer");

  fetch("states-address.json")
    .then(response => response.json())
    .then(data => {
      if (!query) {
        resultsContainer.innerHTML = "<p>No query provided.</p>";
        return;
      }

      const results = data.filter(rto =>
        rto.find_rto_code === query || rto.find_rto_code.startsWith(query.slice(0, 4))
      );
const staticContentContainer = document.getElementById('staticContent');
      if (results.length > 0) {
	  resultsContainer.innerHTML = `
        <h3 class="mar_0">${results[0].find_rto_code} ${results[0].find_rto_state_name} Vehicle Registration Details</h3>
        
		<p class="mar_0">Find the address, phone number, and email ID of the ${results[0].find_rto_state_name}. Regional Transport Office (RTO). Use this information to contact the department for inquiries. To search for vehicle registration details, enter the vehicle number in the search box below.
        </p>
    `;
        resultsContainer.innerHTML += results
          .map(
            result => `
			
            <div class="results">			
			<table>
			<tr><th colspan="2">${results[0].find_rto_code} ${results[0].find_rto_state_name} Regional Transport Office (RTO) Information</th></tr>
              <tr><td>RTO Code:</td> <td>${result.find_rto_code}</td></tr>
              <tr><td>City:</td> <td>${result.find_rto_city}</td></tr>
              <tr><td>State:</td> <td>${results[0].find_rto_state_name}</td></tr>
              <tr><td>Address:</td> <td>${result.find_rto_address}</td></tr>
              <tr><td class="border_left">Phone:</td> <td class="border_right">${result.find_rto_phone}</td></tr>
			  </table>
            </div>
            <br>
          `
          )
          .join("");
      } else {
        resultsContainer.innerHTML = "<p>No matching RTO records found.</p>";
      }
    })
    .catch(error => {
      console.error("Error loading JSON:", error);
      resultsContainer.innerHTML = "<p>Error loading data.</p>";
    });
	
</script>
</body>
</html>
