<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

  <title>SIT | Login</title>

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="https://sitsoftwares.co.in/ADMIN/assets/images/Logo_1.webp">

  <!-- Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>

  <!-- Font Awesome -->
  <link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"/>

  <!-- SweetAlert -->
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

</head>

<body class="min-h-screen bg-[#f4f2ff] flex items-center justify-center relative overflow-hidden font-sans px-4 sm:px-6 lg:px-0">

  <!-- ================= PARTICLES ================= -->

  <div id="particles"
    class="absolute inset-0 overflow-hidden pointer-events-none z-0"></div>

  <!-- ================= ANIMATED BACKGROUND ================= -->

  <div class="absolute top-0 left-0 w-[320px] h-[220px] bg-[#dcd7ff] rounded-br-[120px] opacity-70 animate-pulse"></div>

  <div class="absolute top-10 right-10 w-60 h-60 bg-[#ebe8ff] rounded-full blur-3xl opacity-70 animate-bounce"></div>

  <div class="absolute bottom-0 left-0 w-72 h-72 bg-[#e6e2ff] rounded-tr-full opacity-70"></div>

  <div class="absolute bottom-10 right-10 w-60 h-60 bg-[#d9d2ff] rounded-full blur-2xl opacity-60 animate-pulse"></div>

  <div class="absolute top-1/3 left-10 w-8 h-8 rounded-full bg-[#cfc7ff] opacity-60"></div>

  <div class="absolute bottom-1/4 right-20 w-6 h-6 rounded-full bg-[#bcaeff] opacity-70"></div>

  <div class="absolute top-20 right-1/3 w-4 h-4 rotate-45 bg-[#cabfff] opacity-60"></div>

  <!-- ================= LOGIN CARD ================= -->

  <div id="loginCard"
    class="relative z-10 w-full max-w-[400px] bg-white/90 backdrop-blur-xl rounded-[28px] shadow-2xl px-6 sm:px-8 py-10 border border-white/40 transition-all duration-300">

    <!-- Logo -->
    <div class="flex justify-center mb-8">
      <img
        src="https://sitsoftwares.co.in/ADMIN/assets/images/Logo_1.webp"
        alt="Logo"
        class="h-16 object-contain"
      />
    </div>

    <!-- Welcome -->
    <div class="text-center">
      <h2 class="text-[32px] font-bold text-[#1f1f1f] leading-tight">
        Welcome Back 👋
      </h2>

      <p class="text-gray-400 text-sm mt-3">
        Please sign in to your account
      </p>
    </div>

    <!-- Form -->
    <form id="loginForm" class="mt-8 space-y-5">

      <!-- Mobile -->
      <div>

        <label class="block text-[14px] font-semibold text-gray-700 mb-2">
          Mobile Number
        </label>

        <div class="relative">
          <i class="fa-solid fa-phone absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"></i>

          <input
            type="text"
            id="mobile"
            maxlength="10"
            inputmode="numeric"
            placeholder="Enter Mobile Number"
            class="w-full h-12 pl-11 pr-4 rounded-xl border border-gray-200 bg-[#f8f9ff] outline-none focus:border-[#6C4CF7] focus:ring-2 focus:ring-[#6C4CF7]/20 transition text-sm"
          />
        </div>

      </div>

      <!-- Password -->
      <div>

        <label class="block text-[14px] font-semibold text-gray-700 mb-2">
          Password
        </label>

        <div class="relative">

          <i class="fa-solid fa-lock absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"></i>

          <input
            type="password"
            id="password"
            placeholder="Enter Password"
            class="w-full h-12 pl-11 pr-12 rounded-xl border border-gray-200 bg-[#f8f9ff] outline-none focus:border-[#6C4CF7] focus:ring-2 focus:ring-[#6C4CF7]/20 transition text-sm"
          />

          <i
            id="togglePassword"
            class="fa-regular fa-eye absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 text-sm cursor-pointer hover:text-[#6C4CF7] transition">
          </i>

        </div>

        <!-- Caps Lock Warning -->
        <p id="capsWarning"
          class="text-red-500 text-sm mt-2 hidden">
          Caps Lock is ON
        </p>

      </div>

      <!-- Login Button -->
      <button
        id="loginBtn"
        type="submit"
        class="w-full h-12 rounded-xl bg-gradient-to-r from-[#6C4CF7] to-[#5B3DF0] hover:scale-[1.01] active:scale-[0.99] transition-all text-white font-semibold text-lg shadow-lg shadow-[#6C4CF7]/30">

        Login

      </button>

    </form>

  </div>

  <!-- ================= SCRIPT ================= -->

  <script>

    // ================= STATIC LOGIN =================

    const validMobile = "9999999999";
    const validPassword = "1234";

    // ================= ELEMENTS =================

    const mobileInput = document.getElementById("mobile");
    const passwordInput = document.getElementById("password");
    const loginForm = document.getElementById("loginForm");
    const togglePassword = document.getElementById("togglePassword");
    const loginBtn = document.getElementById("loginBtn");
    const capsWarning = document.getElementById("capsWarning");
    const loginCard = document.getElementById("loginCard");

    // ================= PARTICLES =================

    const particles = document.getElementById("particles");

    for (let i = 0; i < 30; i++) {

      const dot = document.createElement("div");

      const size = Math.random() * 8 + 4;

      dot.className =
        "absolute rounded-full bg-[#cfc7ff] opacity-30";

      dot.style.width = `${size}px`;
      dot.style.height = `${size}px`;
      dot.style.left = `${Math.random() * 100}%`;
      dot.style.top = `${Math.random() * 100}%`;

      dot.style.animation =
        `float ${Math.random() * 10 + 10}s linear infinite`;

      particles.appendChild(dot);

    }

    // ================= MOBILE VALIDATION =================

    mobileInput.addEventListener("input", function () {

      this.value = this.value.replace(/[^0-9]/g, "");

      if (this.value.length > 10) {
        this.value = this.value.slice(0, 10);
      }

    });

    // ================= PASSWORD TOGGLE =================

    togglePassword.addEventListener("click", function () {

      if (passwordInput.type === "password") {

        passwordInput.type = "text";

        this.classList.remove("fa-eye");
        this.classList.add("fa-eye-slash");

      } else {

        passwordInput.type = "password";

        this.classList.remove("fa-eye-slash");
        this.classList.add("fa-eye");

      }

    });

    // ================= CAPS LOCK =================

    passwordInput.addEventListener("keyup", function (e) {

      if (e.getModifierState("CapsLock")) {
        capsWarning.classList.remove("hidden");
      } else {
        capsWarning.classList.add("hidden");
      }

    });

    // ================= SHAKE ANIMATION =================

    function shakeCard() {

      loginCard.classList.add("animate-[shake_.4s_linear]");

      setTimeout(() => {
        loginCard.classList.remove("animate-[shake_.4s_linear]");
      }, 400);

    }

    // ================= LOGIN =================

    loginForm.addEventListener("submit", function (e) {

      e.preventDefault();

      const mobile = mobileInput.value.trim();
      const password = passwordInput.value.trim();

      // ================= MOBILE VALIDATION =================

      if (!/^[6-9]\d{9}$/.test(mobile)) {

        Swal.fire({

          icon: "warning",
          title: "Invalid Mobile Number",
          text: "Enter valid 10 digit mobile number",
          confirmButtonColor: "#6C4CF7",

          customClass: {
            popup: 'small-swal',
            title: 'small-swal-title',
            htmlContainer: 'small-swal-text'
          }

        });

        shakeCard();
        return;

      }

      // ================= LOADING =================

      loginBtn.disabled = true;

      loginBtn.innerHTML = `
        <i class="fa fa-spinner fa-spin mr-2"></i>
        Please Wait...
      `;

      setTimeout(() => {

        // ================= SUCCESS =================

        if (
          mobile === validMobile &&
          password === validPassword
        ) {

          Swal.fire({

            icon: "success",
            title: "Login Successful",
            text: "Redirecting...",
            timer: 1500,
            showConfirmButton: false,

            customClass: {
              popup: 'small-swal',
              title: 'small-swal-title',
              htmlContainer: 'small-swal-text'
            }

          });

          setTimeout(() => {
            window.location.href = "all_company.php";
          }, 1500);

        }

        // ================= ERROR =================

        else {

          Swal.fire({

            icon: "error",
            title: "Invalid Credentials",
            text: "Please enter correct details",
            confirmButtonColor: "#6C4CF7",

            customClass: {
              popup: 'small-swal',
              title: 'small-swal-title',
              htmlContainer: 'small-swal-text'
            }

          });

          shakeCard();

          loginBtn.disabled = false;
          loginBtn.innerHTML = "Login";

        }

      }, 1500);

    });

  </script>

  <!-- ================= STYLES ================= -->

  <style>

    /* ================= SHAKE ================= */

    @keyframes shake {

      0% {
        transform: translateX(0);
      }

      25% {
        transform: translateX(-6px);
      }

      50% {
        transform: translateX(6px);
      }

      75% {
        transform: translateX(-6px);
      }

      100% {
        transform: translateX(0);
      }

    }

    /* ================= FLOAT ================= */

    @keyframes float {

      0% {
        transform: translateY(0px);
      }

      50% {
        transform: translateY(-30px);
      }

      100% {
        transform: translateY(0px);
      }

    }

    /* ================= MINI SWEET ALERT ================= */

    .small-swal {
      width: 320px !important;
      border-radius: 16px !important;
      padding: 1.2rem !important;
      font-family: inherit;
    }

    .small-swal-title {
      font-size: 18px !important;
      font-weight: 700 !important;
      color: #111827 !important;
      margin-top: 8px !important;
    }

    .small-swal-text {
      font-size: 14px !important;
      color: #6b7280 !important;
      line-height: 1.5 !important;
    }

    .small-swal .swal2-icon {
      transform: scale(0.72);
      margin: 0 auto 6px auto !important;
    }

    .small-swal .swal2-confirm {

      background: linear-gradient(135deg, #6C4CF7, #5B3DF0) !important;

      border: none !important;
      border-radius: 10px !important;

      padding: 8px 22px !important;

      font-size: 14px !important;
      font-weight: 600 !important;

      box-shadow: 0 8px 20px rgba(108, 76, 247, 0.25);

    }

    .small-swal .swal2-confirm:focus {
      box-shadow: none !important;
    }

    .small-swal .swal2-popup {
      box-shadow: 0 20px 40px rgba(0,0,0,0.12) !important;
    }

  </style>

</body>
</html>