<template>
  <!-- Form side -->
  <div class="container">
    <div class="row">
      <div class="col-md-10 offset-md-1 col-lg-10 offset-lg-1 col-xl-6 offset-xl-3 nm-st nm-st-md">
        <form action="/login" method="POST">
          <input type="hidden" name="_token" :value="csrfToken">
          <div class="nm-mb-2 nm-mb-md-2">
            <h2>Log In to <router-link to="/" class="heading" aria-label="Doctors Hero">DOCTORS HERO</router-link></h2>
            <p>New Here? <router-link to="/signup" class="nm-fs-1 nm-fw-bd underline">Create an account</router-link></p>
          </div>
          
          <div class="input-group nm-gp">
            <span class="nm-gp-pp"><i class="fas fa-user"></i></span>
            <input 
              type="email" 
              name="email"
              class="form-control" 
              id="inputEmail" 
              tabindex="1" 
              placeholder="Email" 
              required
            >
          </div>
          
          <div class="input-group nm-gp">
            <span class="nm-gp-pp"><i class="fas fa-lock"></i></span>
            <input 
              :type="showPassword ? 'text' : 'password'"
              name="password"
              class="form-control" 
              id="inputPassword" 
              tabindex="2" 
              placeholder="Password" 
              required
            >
          </div>

          <!-- Error Messages -->
          <div v-if="errors.length > 0" class="alert alert-danger" role="alert">
            <ul class="mb-0">
              <li v-for="error in errors" :key="error">{{ error }}</li>
            </ul>
          </div>

          <div class="row nm-aic nm-mb-2">
            <div class="col-sm-6 nm-mb-1 nm-mb-sm-0">
              <span class="nm-fs-1 nm-tm">Show password</span>
              <label class="nm-sw-pd">
                <input 
                  type="checkbox" 
                  v-model="showPassword"
                  id="toggle-password" 
                  class="d-none"
                >
                <span class="slider round"></span>
              </label>
            </div>
            
            <div class="col-sm-6 nm-sm-tr">
              <button 
                type="submit" 
                class="btn btn-primary nm-hvr nm-btn-1"
              >
                Log In
              </button>
            </div>
          </div>

          <div class="row nm-row-ct nm-tp-3">
            <div class="form-group form-check">
              <input 
                type="checkbox" 
                name="remember"
                class="form-check-input" 
                id="rememberMe"
              >
              <label class="form-check-label nm-check" for="rememberMe">Keep me logged in</label>
            </div>
          </div>

          <div class="row nm-row-ct">
            <router-link to="/forgot-password" class="nm-fs-2 nm-fw-bd">Forgot Password?</router-link>
          </div>

          <div class="row nm-row-ct nm-tp-5">
            <p>
              © 2025 All Rights Reserved. <router-link to="/" class="heading" aria-label="Doctors Hero">DOCTORS HERO</router-link> by Orbizen Limited. 
              <a class="heading" href="#" aria-label="Terms & Conditions">Terms & Conditions</a>, 
              <a class="heading" href="#" aria-label="Privacy">Privacy Settings</a>.
            </p>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// Reactive data
const showPassword = ref(false)
const errors = ref([])
const csrfToken = ref('')

// Get CSRF token and errors on component mount
onMounted(() => {
  // Get CSRF token from meta tag
  const token = document.querySelector('meta[name="csrf-token"]')
  if (token) {
    csrfToken.value = token.getAttribute('content')
  }
  
  // Get Laravel validation errors if any
  const errorsElement = document.querySelector('meta[name="validation-errors"]')
  if (errorsElement) {
    try {
      errors.value = JSON.parse(errorsElement.getAttribute('content'))
    } catch (e) {
      console.log('No validation errors')
    }
  }
})
</script>

<style scoped>
/* Component-specific styles */
.alert {
  margin-bottom: 1rem;
  border-radius: 8px;
}

.heading {
  text-decoration: none;
  color: inherit;
}

.heading:hover {
  text-decoration: underline;
}

.underline {
  text-decoration: underline;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
</style>