<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Login - CLQMS</title>
  
  <!-- Google Fonts - Inter -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
  
  <!-- TailwindCSS 4 CDN -->
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
  
  <!-- Custom Styles -->
  <link rel="stylesheet" href="<?= base_url('css/v2/styles.css') ?>">
  
  <!-- FontAwesome -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/js/all.min.js"></script>
  
  <!-- Alpine.js -->
  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
  
  <style>
    /* Animated gradient background */
    .gradient-bg {
      background: linear-gradient(-45deg, #1e3a8a, #1e40af, #2563eb, #3b82f6);
      background-size: 400% 400%;
      animation: gradient 15s ease infinite;
    }
    
    @keyframes gradient {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    
    /* Floating animation for logo */
    @keyframes float {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-10px); }
    }
    
    .float-animation {
      animation: float 3s ease-in-out infinite;
    }
  </style>
</head>
<body class="min-h-screen flex items-center justify-center gradient-bg" x-data="loginApp()">
  
  <!-- Login Card -->
  <div class="w-full max-w-md p-4">
    <div class="card-glass p-8 animate-fadeIn">
      
      <!-- Logo & Title -->
      <div class="text-center mb-8">
        <div class="w-20 h-20 mx-auto mb-4 rounded-3xl bg-gradient-to-br from-blue-600 to-blue-900 flex items-center justify-center shadow-xl float-animation">
          <i class="fa-solid fa-flask text-white text-4xl"></i>
        </div>
        <h1 class="text-3xl font-bold mb-2 text-gradient">CLQMS</h1>
        <p class="text-sm" style="color: rgb(var(--color-text-muted));">Clinical Laboratory Quality Management System</p>
      </div>

      <!-- Alert Messages -->
      <div x-show="errorMessage" x-cloak class="alert alert-error mb-4 animate-slideInUp">
        <i class="fa-solid fa-exclamation-circle"></i>
        <span x-text="errorMessage"></span>
      </div>

      <div x-show="successMessage" x-cloak class="alert alert-success mb-4 animate-slideInUp">
        <i class="fa-solid fa-check-circle"></i>
        <span x-text="successMessage"></span>
      </div>

      <!-- Login Form -->
      <form @submit.prevent="login" class="space-y-4">
        
        <!-- Username -->
        <div>
          <label class="label">
            <span class="label-text font-medium">Username</span>
          </label>
          <div class="relative">
            <input 
              type="text" 
              placeholder="Enter your username" 
              class="input !pl-10"
              x-model="form.username"
              required
              :disabled="loading"
            />
            <span class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none" style="color: rgb(var(--color-text-muted));">
              <i class="fa-solid fa-user"></i>
            </span>
          </div>
        </div>

        <!-- Password -->
        <div>
          <label class="label">
            <span class="label-text font-medium">Password</span>
          </label>
          <div class="relative">
            <input 
              :type="showPassword ? 'text' : 'password'" 
              placeholder="Enter your password" 
              class="input !pl-10 !pr-10"
              x-model="form.password"
              required
              :disabled="loading"
            />
            <span class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none" style="color: rgb(var(--color-text-muted));">
              <i class="fa-solid fa-lock"></i>
            </span>
            <button 
              type="button"
              @click="showPassword = !showPassword"
              class="absolute inset-y-0 right-0 flex items-center pr-3 z-10"
              style="color: rgb(var(--color-text-muted));"
              tabindex="-1"
            >
              <i :class="showPassword ? 'fa-solid fa-eye-slash' : 'fa-solid fa-eye'"></i>
            </button>
          </div>
        </div>

        <!-- Remember Me -->
        <div class="flex items-center gap-2">
          <input type="checkbox" class="checkbox checkbox-sm" x-model="form.remember" id="remember" />
          <label for="remember" class="label-text cursor-pointer">Remember me</label>
        </div>

        <!-- Submit Button -->
        <button 
          type="submit" 
          class="btn btn-primary w-full !rounded-full"
          :disabled="loading"
        >
          <span x-show="loading" class="spinner spinner-sm"></span>
          <span x-show="!loading">
            <i class="fa-solid fa-sign-in-alt mr-2"></i>
            Login
          </span>
        </button>

      </form>
    </div>

    <!-- Copyright -->
    <div class="text-center mt-6 text-white/90">
      <p class="text-sm drop-shadow-lg">© 2025 5Panda. All rights reserved.</p>
    </div>
  </div>

  <!-- Scripts -->
  <script>
    window.BASEURL = "<?= base_url() ?>";
    
    function loginApp() {
      return {
        loading: false,
        showPassword: false,
        errorMessage: '',
        successMessage: '',
        
        form: {
          username: '',
          password: '',
          remember: false
        },

        async login() {
          this.errorMessage = '';
          this.successMessage = '';
          this.loading = true;

          try {
            const formData = new URLSearchParams({
              username: this.form.username,
              password: this.form.password,
              remember: this.form.remember ? '1' : '0'
            });

            const res = await fetch(`${BASEURL}v2/auth/login`, {
              method: 'POST',
              headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
              body: formData,
              credentials: 'include'
            });

            const data = await res.json();

            if (res.ok && data.status === 'success') {
              this.successMessage = 'Login successful! Redirecting...';
              setTimeout(() => {
                window.location.href = `${BASEURL}v2/`;
              }, 1000);
            } else {
              this.errorMessage = data.message || 'Login failed. Please try again.';
            }
          } catch (err) {
            console.error(err);
            this.errorMessage = 'Network error. Please try again.';
          } finally {
            this.loading = false;
          }
        }
      }
    }
  </script>

</body>
</html>
