@include('admin/auth/header')
 <form method="POST" action="" class="p-4 bg-white rounded shadow-sm" style="max-width: 400px; margin: auto;" novalidate>
     {{ csrfField() }}
     @include('flash_message')
         <h4 class="text-center mb-4" style="color: var(--main-orange);">Admin Login</h4>
         <!-- Email -->
         <div class="mb-3">
             <div class="input-group has-validation">
                 <input type="email" class="form-control" id="email" name="email" placeholder="Enter your email" required >
             </div>
         </div>
         <!-- Password -->
         <div class="mb-3">
             <div class="input-group">
                 <input type="password" class="form-control" id="password" name="password" placeholder="Enter your password" required >
                 <button type="button" class="btn btn-toggle-password" id="togglePassword" tabindex="-1">
                     <i class="bi bi-eye-slash"></i>
                 </button>
             </div>
         </div>

         <!-- Submit Button -->
         <div class="d-grid mb-3">
             <button type="submit" class="btn btn-login" id="loginBtn">
                 <span id="loginBtnText">Login</span>
                 <div id="spinner" class="spinner-border spinner-border-sm d-none ms-2" role="status" aria-hidden="true"></div>
             </button>
         </div>
 </form>

 <!-- Show/Hide Password Script -->
 <script>
     document.getElementById('togglePassword').addEventListener('click', function () {
         const password = document.getElementById('password');
         const icon = this.querySelector('i');

         if (password.type === 'password') {
             password.type = 'text';
             icon.classList.remove('bi-eye-slash');
             icon.classList.add('bi-eye');
         } else {
             password.type = 'password';
             icon.classList.remove('bi-eye');
             icon.classList.add('bi-eye-slash');
         }
     });

     // Loading indicator on login button
     document.querySelector('form').addEventListener('submit', function () {
         const loginBtn = document.getElementById('loginBtn');
         const spinner = document.getElementById('spinner');
         const loginText = document.getElementById('loginBtnText');

         loginBtn.disabled = true;
         loginText.textContent = 'Logging in...';
         spinner.classList.remove('d-none');
     });
 </script>

 <!-- Bootstrap Icons CDN (for eye icon) -->
 <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">

 @include('admin/auth/footer')