@extends('layouts.auth')

@section('content')
<div class="login-wrapper">
    <div class="login-container">
        <div class="login-card">
            <div class="login-header">
                <h3 class="login-title">{{ __('Welcome Back') }}</h3>
                <p class="login-subtitle">{{ __('Sign in to your Flexcom account') }}</p>
            </div>

            <div class="login-body">
                <form method="POST" action="{{ route('login') }}" class="login-form">
                    @csrf

                    <div class="form-group">
                        <div class="form-floating">
                            <input id="email" 
                                   type="email" 
                                   class="@error('email') is-invalid @enderror"
                                   name="email" 
                                   value="{{ old('email') }}" 
                                   required 
                                   autocomplete="email" 
                                   autofocus
                                   placeholder=" "
                                   style="width: 100%;">
                            <label for="email">
                                <i class="bi bi-envelope"></i>
                                {{ __('Email Address') }}
                            </label>
                            @error('email')
                                <span class="error-message" role="alert">
                                    <i class="bi bi-exclamation-circle"></i>
                                    {{ $message }}
                                </span>
                            @enderror
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="form-floating">
                            <input id="password" 
                                   type="password" 
                                   class="@error('password') is-invalid @enderror"
                                   name="password" 
                                   required 
                                   autocomplete="current-password"
                                   placeholder=" "
                                   style="width: 100%;">
                            <label for="password">
                                <i class="bi bi-lock"></i>
                                {{ __('Password') }}
                            </label>
                            <button type="button" class="password-toggle" onclick="togglePassword()">
                                <i class="bi bi-eye-slash" id="toggleIcon"></i>
                            </button>
                            @error('password')
                                <span class="error-message" role="alert">
                                    <i class="bi bi-exclamation-circle"></i>
                                    {{ $message }}
                                </span>
                            @enderror
                        </div>
                    </div>

                    <div class="form-options">
                        <label class="checkbox-label">
                            <input type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
                            <span class="checkbox-text">{{ __('Remember Me') }}</span>
                        </label>

                        @if (Route::has('password.request'))
                            <a class="forgot-link" href="{{ route('password.request') }}">
                                {{ __('Forgot Password?') }}
                            </a>
                        @endif
                    </div>

                    <button type="submit" class="login-button">
                        <span>{{ __('Login') }}</span>
                        <i class="bi bi-arrow-right"></i>
                    </button>
                </form>
            </div>

            @if (Route::has('register'))
            <div class="login-footer">
                <p class="register-text">
                    {{ __("Don't have an account?") }}
                    <a href="{{ route('register') }}" class="register-link">{{ __('Sign up') }}</a>
                </p>
            </div>
            @endif
        </div>
    </div>
</div>

@push('scripts')
    <script>
        function togglePassword() {
            const passwordInput = document.getElementById('password');
            const toggleIcon = document.getElementById('toggleIcon');
            
            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                toggleIcon.classList.remove('bi-eye-slash');
                toggleIcon.classList.add('bi-eye');
            } else {
                passwordInput.type = 'password';
                toggleIcon.classList.remove('bi-eye');
                toggleIcon.classList.add('bi-eye-slash');
            }
        }
    </script>
@endpush
@endsection