<!DOCTYPE html>
<html>
 <!---include head---->

 <link rel="stylesheet" href="{{ asset('assets/css/login.min.css') }}">
  <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/font.css') }}">
 <!---include head---->
 <style>
    .text-danger {
        color: red; 
        margin-top: 0.25rem;
        font-size: 0.875rem; 
        }
</style>
 <body>
    <div class="container">
      
        <div class="glass">
        <div class="logo mb-4">
            <h2 style="text-align:center; color:white;">Super Admin</h2>
                    <img class="logo-sff mt-mb-cst" src="{{ asset('assets/images/FullLogo.svg') }}" alt="Brand Logo">
                </div>
            <div class="form-container">
                
                <div class="tabs">
                    <button class="tab active" id="loginTab">Login</button>
                    
                </div>
               
                <form action="{{ route('admin.storelogin')}}" class="mt-mb-cst" method="POST" enctype="multipart/form-data" >
                @csrf
                <div class="form-group">
                    <input type="email" id="email" name="email" placeholder="Enter Email Id" class="form-control">
                    @error('email')
                        <div class="text-danger mt-1">{{ $message }}</div>
                    @enderror
                </div>
                <!-- Password Input Field with Toggle Button -->
                <div class="form-group password-container">
                    <input type="password" id="password" name="password" placeholder="Enter Password" class="form-control">
                    <button type="button" id="togglePassword">
                        <i class="fas fa-eye"></i>
                    </button>
                    @error('password')
                    <div class="text-danger mt-1">{{ $message }}</div>
                    @enderror
                </div>
         
                   <div class="button-submit">
                        <button type="submit" id="submit-button" class="btn btn-primary w-100">
                            <span id="button-text">Sign In</span>
                            <span id="loading-spinner" style="display: none;">
                                <i class="fa fa-spinner fa-spin"></i> Signing in...
                            </span>
                        </button>
                   </div>
                </form>
            </div>
        </div>
    </div>
    <script>
      
        document.getElementById('togglePassword').addEventListener('click', function() {
            const passwordField = document.getElementById('password');
            const type = passwordField.getAttribute('type') === 'password' ? 'text' : 'password';
            passwordField.setAttribute('type', type);
            this.innerHTML = this.innerHTML === '<i class="fas fa-eye"></i>' ? '<i class="fas fa-eye-slash"></i>' : '<i class="fas fa-eye"></i>';
        });

        
    </script>
     <script>
        document.querySelector('form').addEventListener('submit', function(event) {
        
            document.getElementById('loading-spinner').style.display = 'inline-block';
            document.getElementById('button-text').style.display = 'none';
            document.getElementById('submit-button').disabled = true;
        });
</script>
</body>
</html>