@extends('layouts.app')

@section('title', 'Connexion')

@push('styles')
<style>
/* Styles de secours si Tailwind ne charge pas */
.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #dbeafe 0%, #e9d5ff 50%, #fce7f3 100%);
    padding: 3rem 1rem;
}
.login-wrapper {
    max-width: 28rem;
    width: 100%;
}
.login-header {
    text-align: center;
    margin-bottom: 2rem;
}
.login-icon-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}
.login-icon {
    width: 5rem;
    height: 5rem;
    background: linear-gradient(135deg, #2563eb 0%, #9333ea 50%, #ec4899 100%);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}
.login-icon:hover {
    transform: scale(1.1);
}
.login-icon i {
    color: white;
    font-size: 2.5rem;
}
.login-title {
    font-size: 2.25rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.5rem;
}
.login-subtitle {
    color: #4b5563;
    font-size: 1.125rem;
}
.login-form-card {
    background: white;
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    padding: 2rem;
    border: 1px solid #f3f4f6;
}
.form-group {
    margin-bottom: 1.5rem;
}
.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
}
.form-label i {
    margin-right: 0.5rem;
}
.form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.75rem;
    font-size: 1rem;
    transition: all 0.3s;
}
.form-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.password-wrapper {
    position: relative;
}
.password-toggle {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    cursor: pointer;
    transition: color 0.3s;
}
.password-toggle:hover {
    color: #4b5563;
}
.checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.checkbox-input {
    width: 1rem;
    height: 1rem;
    accent-color: #3b82f6;
}
.submit-btn {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    border: none;
    border-radius: 0.75rem;
    background: linear-gradient(90deg, #2563eb 0%, #9333ea 50%, #ec4899 100%);
    color: white;
    font-size: 1rem;
    font-weight: 700;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
    cursor: pointer;
}
.submit-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}
.divider {
    margin: 1.5rem 0;
    position: relative;
    text-align: center;
}
.divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #d1d5db;
}
.divider span {
    position: relative;
    background: white;
    padding: 0 0.5rem;
    color: #6b7280;
}
.link-text {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.875rem;
    color: #4b5563;
}
.link-text a {
    font-weight: 600;
    color: #2563eb;
    text-decoration: none;
}
.link-text a:hover {
    color: #1d4ed8;
}
.footer-text {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.75rem;
    color: #6b7280;
}
.footer-text a {
    color: #2563eb;
    text-decoration: none;
}
.footer-text a:hover {
    text-decoration: underline;
}
.error-message {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: #dc2626;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
</style>
@endpush

@section('content')
<div class="login-container">
    <div class="login-wrapper">
        <!-- Header -->
        <div class="login-header">
            <div class="login-icon-wrapper">
                <div class="login-icon">
                    <i class="fas fa-car"></i>
                </div>
            </div>
            <h2 class="login-title">Bienvenue !</h2>
            <p class="login-subtitle">Connectez-vous à votre compte Auto-École</p>
        </div>

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

                <!-- Email -->
                <div class="form-group">
                    <label for="email" class="form-label">
                        <i class="fas fa-envelope" style="color: #3b82f6;"></i>Adresse email
                    </label>
                    <input
                        id="email"
                        name="email"
                        type="email"
                        autocomplete="email"
                        required
                        value="{{ old('email') }}"
                        class="form-input @error('email')" style="border-color: #dc2626;" @enderror
                        placeholder="votre@email.com"
                    >
                    @error('email')
                        <p class="error-message">
                            <i class="fas fa-exclamation-circle"></i>{{ $message }}
                        </p>
                    @enderror
                </div>

                <!-- Password -->
                <div class="form-group">
                    <label for="password" class="form-label">
                        <i class="fas fa-lock" style="color: #9333ea;"></i>Mot de passe
                    </label>
                    <div class="password-wrapper">
                        <input
                            id="password"
                            name="password"
                            type="password"
                            autocomplete="current-password"
                            required
                            class="form-input @error('password')" style="border-color: #dc2626;" @enderror
                            placeholder="********"
                        >
                        <button
                            type="button"
                            onclick="togglePassword()"
                            class="password-toggle"
                        >
                            <i id="password-icon" class="fas fa-eye"></i>
                        </button>
                    </div>
                    @error('password')
                        <p class="error-message">
                            <i class="fas fa-exclamation-circle"></i>{{ $message }}
                        </p>
                    @enderror
                </div>

                <!-- Remember & Forgot -->
                <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem;">
                    <div class="checkbox-wrapper">
                        <input
                            id="remember"
                            name="remember"
                            type="checkbox"
                            class="checkbox-input"
                        >
                        <label for="remember" style="font-size: 0.875rem; color: #374151; cursor: pointer;">
                            Se souvenir de moi
                        </label>
                    </div>
                    <a href="{{ route('password.request') }}" style="font-size: 0.875rem; font-weight: 600; color: #2563eb; text-decoration: none;">
                        Mot de passe oublié ?
                    </a>
                </div>

                <!-- Submit Button -->
                <button type="submit" class="submit-btn">
                    <i class="fas fa-sign-in-alt" style="margin-right: 0.5rem;"></i>
                    Se connecter
                </button>
            </form>

            <!-- Divider -->
            <div class="divider">
                <span>Ou</span>
            </div>

            <!-- Register Link -->
            <div class="link-text">
                Vous n'avez pas de compte ?
                <a href="{{ route('register') }}">Créer un compte</a>
            </div>
        </div>

        <!-- Additional Info -->
        <div class="footer-text">
            En vous connectant, vous acceptez nos
            <a href="#">Conditions d'utilisation</a>
            et notre
            <a href="#">Politique de confidentialité</a>
        </div>
    </div>
</div>
@endsection

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