script.js

document.addEventListener("DOMContentLoaded", function () {
  // Tab switching functionality
  const pincodeTab = document.getElementById("pincodeTab");
  const nameTab = document.getElementById("nameTab");
  const pincodeTabContent = document.getElementById("pincodeTabContent");
  const nameTabContent = document.getElementById("nameTabContent");

  pincodeTab.addEventListener("click", () => {
    pincodeTab.classList.add(
      "active",
      "text-primary-500",
      "border-primary-500"
    );
    pincodeTab.classList.remove("text-dark-400");
    nameTab.classList.remove(
      "active",
      "text-primary-500",
      "border-primary-500"
    );
    nameTab.classList.add("text-dark-400");
    pincodeTabContent.classList.remove("hidden");
    nameTabContent.classList.add("hidden");
  });

  nameTab.addEventListener("click", () => {
    nameTab.classList.add("active", "text-primary-500", "border-primary-500");
    nameTab.classList.remove("text-dark-400");
    pincodeTab.classList.remove(
      "active",
      "text-primary-500",
      "border-primary-500"
    );
    pincodeTab.classList.add("text-dark-400");
    nameTabContent.classList.remove("hidden");
    pincodeTabContent.classList.add("hidden");
  });

  const pincodeInput = document.getElementById("pincode");
  const nameInput = document.getElementById("name");
  const searchBtn = document.getElementById("searchBtn");
  const searchByNameBtn = document.getElementById("searchByNameBtn");
  const errorElement = document.getElementById("error");
  const resultsSection = document.getElementById("resultsSection");
  const emptyState = document.getElementById("emptyState");
  const loader = document.getElementById("loader");
  const copyBtn = document.getElementById("copyBtn");

  // Format the last updated date
  function formatDate(dateString) {
    const options = { year: "numeric", month: "long", day: "numeric" };
    return new Date(dateString).toLocaleDateString("en-IN", options);
  }

  // Validate PIN code
  function validatePincode(pincode) {
    return /^\d{6}$/.test(pincode);
  }

  // Show error message
  function showError(message) {
    errorElement.textContent = message;
    errorElement.classList.remove("hidden");
  }

  // Hide error message
  function hideError() {
    errorElement.classList.add("hidden");
  }

  // Fetch data by PIN code
  async function fetchPincodeData(pincode) {
    try {
      loader.classList.remove("hidden");
      searchBtn.disabled = true;
      searchBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Searching';

      const response = await fetch(
        `https://api.postalpincode.in/pincode/${pincode}`
      );
      const data = await response.json();

      if (data[0].Status === "Error") {
        throw new Error(data[0].Message);
      }

      return data[0];
    } catch (error) {
      throw error;
    } finally {
      loader.classList.add("hidden");
      searchBtn.disabled = false;
      searchBtn.innerHTML = '<i class="fas fa-search"></i> Search';
    }
  }

  // Fetch data by name
  async function fetchByNameData(name) {
    try {
      loader.classList.remove("hidden");
      searchByNameBtn.disabled = true;
      searchByNameBtn.innerHTML =
        '<i class="fas fa-spinner fa-spin"></i> Searching';

      const response = await fetch(
        `https://api.postalpincode.in/postoffice/${name}`
      );
      const data = await response.json();
      console.log(data);

      if (data[0].Status === "Error") {
        throw new Error(data[0].Message);
      }

      return data[0];
    } catch (error) {
      throw error;
    } finally {
      loader.classList.add("hidden");
      searchByNameBtn.disabled = false;
      searchByNameBtn.innerHTML = '<i class="fas fa-search"></i> Search';
    }
  }

  // Display the results
  function displayResults(data, pincode = null) {
    // Post offices
    const postOfficeTable = document.getElementById("postOfficeTable");
    postOfficeTable.innerHTML = "";

    if (data.PostOffice && data.PostOffice.length > 0) {
      data.PostOffice.forEach((office) => {
        const row = document.createElement("tr");
        row.className = "hover:bg-dark-700 transition-colors";
        row.innerHTML = `
                            <td class="py-3 font-medium">${office.Name}</td>
                            <td class="py-3 text-dark-400">${
                              office.BranchType
                            }</td>
                            <td class="py-3">${office.Pincode}</td>
                            <td class="py-3">${office.State || "N/A"}</td>
                        `;

        postOfficeTable.appendChild(row);
      });

      document.getElementById("postOfficeSection").classList.remove("hidden");
    } else {
      document.getElementById("postOfficeSection").classList.add("hidden");
    }

    // Show results and hide empty state
    resultsSection.classList.remove("hidden");
    emptyState.classList.add("hidden");
  }

  // Handle PIN code search
  searchBtn.addEventListener("click", async function () {
    const pincode = pincodeInput.value.trim();

    if (!validatePincode(pincode)) {
      showError("Please enter a valid 6-digit PIN code");
      return;
    }

    hideError();

    try {
      const data = await fetchPincodeData(pincode);
      displayResults(data);
    } catch (error) {
      showError(error.message);
      resultsSection.classList.add("hidden");
      emptyState.classList.remove("hidden");
    }
  });

  // Allow only numbers in PIN code input
  // Search name on Enter key
  nameInput.addEventListener("keypress", function (e) {
    if (e.key === "Enter") {
      searchByNameBtn.click();
    }
  });

  pincodeInput.addEventListener("input", function () {
    this.value = this.value.replace(/[^0-9]/g, "");

    if (this.value.length === 6) {
      searchBtn.classList.add("glow");
    } else {
      searchBtn.classList.remove("glow");
    }
  });

  // Handle name search
  searchByNameBtn.addEventListener("click", async function () {
    const name = nameInput.value.trim();

    if (name.length < 3) {
      showError("Please enter at least 3 characters");
      return;
    }

    hideError();

    try {
      const data = await fetchByNameData(name);
      displayResults(data);
    } catch (error) {
      showError(error.message);
      resultsSection.classList.add("hidden");
      emptyState.classList.remove("hidden");
    }
  });

  // Search on Enter key
  pincodeInput.addEventListener("keypress", function (e) {
    if (e.key === "Enter") {
      searchBtn.click();
    }
  });
});