@extends('layouts.app')

@section('content')
@if(config('recaptcha.enabled') && config('recaptcha.site_key'))
    @push('head')
        <script src="https://www.google.com/recaptcha/api.js?render={{ config('recaptcha.site_key') }}"></script>
    @endpush
@endif

{{-- Animation pour les erreurs --}}
<style>
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}
.error-shake { animation: shake 0.5s ease-in-out; }
</style>

<div class="min-h-screen flex items-center justify-center bg-gray-100 px-4 py-6">
    <div class="w-full max-w-sm bg-white rounded-xl shadow-lg p-5">
        <!-- Logo -->
        <div class="text-center mb-4">
            <div class="inline-flex items-center justify-center w-11 h-11 bg-blue-600 rounded-lg">
                <i class="fas fa-handshake text-white text-lg"></i>
            </div>
            <h1 class="text-lg font-bold text-gray-800 mt-2">Connexion</h1>
        </div>

        <!-- Messages flash -->
        @if (session('status'))
            <div class="bg-green-50 text-green-700 px-3 py-2 rounded-lg mb-3 text-sm"><i class="fas fa-check-circle mr-1"></i>{{ session('status') }}</div>
        @endif
        @if (session('success'))
            <div class="bg-green-50 text-green-700 px-3 py-2 rounded-lg mb-3 text-sm"><i class="fas fa-check-circle mr-1"></i>{{ session('success') }}</div>
        @endif
        @if (session('error'))
            <div class="bg-red-50 text-red-700 px-3 py-2 rounded-lg mb-3 text-sm"><i class="fas fa-exclamation-circle mr-1"></i>{{ session('error') }}</div>
        @endif
        @if (session('warning'))
            <div class="bg-yellow-50 text-yellow-700 px-3 py-2 rounded-lg mb-3 text-sm"><i class="fas fa-exclamation-triangle mr-1"></i>{{ session('warning') }}</div>
        @endif
        
        {{-- Affichage de TOUTES les erreurs de validation --}}
        @if ($errors->any())
            <div class="bg-red-50 border border-red-300 text-red-700 px-4 py-3 rounded-lg mb-4">
                <div class="flex items-center mb-2">
                    <i class="fas fa-exclamation-circle mr-2"></i>
                    <span class="font-semibold">Erreur de connexion</span>
                </div>
                <ul class="list-disc list-inside text-sm space-y-1">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <!-- Section Google - CONNEXION uniquement -->
        <div class="bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-200 rounded-lg p-3 mb-4">
            <p class="text-xs text-blue-800 font-medium mb-2">
                <i class="fab fa-google mr-1"></i>Déjà inscrit via Google ? Connectez-vous directement.
            </p>
            <a href="{{ route('social.login', 'google') }}" class="flex items-center justify-center gap-2 w-full py-2.5 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 hover:border-blue-300 transition shadow-sm">
                <svg class="w-4 h-4" viewBox="0 0 24 24">
                    <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
                    <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
                    <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
                    <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
                </svg>
                <span class="text-sm font-medium text-gray-700">Me connecter avec Google</span>
            </a>
            <p class="text-xs text-gray-500 mt-2 text-center">
                <i class="fas fa-info-circle mr-1"></i>Pas encore de compte ? <a href="{{ route('register') }}" class="text-blue-600 underline hover:text-blue-800">Inscrivez-vous d'abord</a>
            </p>
        </div>

        <!-- Séparateur -->
        <div class="flex items-center gap-2 mb-4">
            <div class="flex-1 h-px bg-gray-200"></div>
            <span class="text-xs text-gray-400">ou avec email/mot de passe</span>
            <div class="flex-1 h-px bg-gray-200"></div>
        </div>

        <!-- Accès livreur interne par code -->
        <div class="mb-4 bg-indigo-50 border border-indigo-200 rounded-lg p-3">
            <p class="text-xs text-indigo-800 font-medium mb-2">
                <i class="fas fa-key mr-1"></i>Livreur interne ? Entrez votre code d'accès.
            </p>
            <a href="{{ route('driver.internal.access') }}"
               class="inline-flex items-center justify-center gap-2 w-full py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg transition text-sm font-medium">
                <i class="fas fa-route"></i>
                Saisir mon code livreur
            </a>
        </div>

        <!-- Formulaire classique -->
        <form id="login-form" action="{{ route('login') }}" method="POST">
            @csrf
            <input type="hidden" name="timezone" id="timezone" value="">
            <input type="hidden" name="recaptcha_token" id="recaptcha_token" value="">
            
            @error('recaptcha')
                <div class="bg-red-50 text-red-700 px-3 py-2 rounded-lg mb-3 text-sm">
                    <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                </div>
            @enderror
            
            <div class="mb-3">
                <label for="email-address" class="block text-xs font-medium text-gray-600 mb-1">Email</label>
                <div class="relative">
                    <span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"><i class="fas fa-envelope text-xs"></i></span>
                    <input id="email-address" name="email" type="email" autocomplete="email" required 
                        class="w-full pl-8 pr-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('email') border-red-400 bg-red-50 @enderror" 
                        placeholder="exemple@email.com" value="{{ old('email') }}">
                </div>
                @error('email')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
            </div>

            <div class="mb-3">
                <div class="flex justify-between items-center mb-1">
                    <label for="password" class="text-xs font-medium text-gray-600">Mot de passe</label>
                    <a href="{{ route('password.request') }}" class="text-xs text-blue-600 hover:underline">Oublié ?</a>
                </div>
                <div class="relative">
                    <span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"><i class="fas fa-lock text-xs"></i></span>
                    <input id="password" name="password" type="password" autocomplete="current-password" required 
                        class="w-full pl-8 pr-9 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 
                        placeholder="••••••••">
                    <button type="button" class="absolute right-3 top-1/2 -translate-y-1/2 toggle-password text-gray-400 hover:text-gray-600" data-target="password">
                        <i class="fas fa-eye text-xs"></i>
                    </button>
                </div>
            </div>

            <label class="flex items-center gap-2 cursor-pointer mb-3">
                <input name="remember" type="checkbox" {{ old('remember') ? 'checked' : '' }} class="w-3.5 h-3.5 text-blue-600 rounded border-gray-300">
                <span class="text-xs text-gray-600">Rester connecté 30 jours</span>
            </label>

            <button type="submit" class="w-full py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition text-sm">
                <i class="fas fa-sign-in-alt mr-1"></i>Se connecter
            </button>
        </form>

        <!-- Inscription -->
        <p class="mt-4 text-center text-xs text-gray-600">
            Pas de compte ? <a href="{{ route('register') }}" class="text-blue-600 font-medium hover:underline">Créer un compte</a>
        </p>

        <!-- Liens -->
        <div class="mt-3 pt-3 border-t text-center text-xs text-gray-400">
            <a href="{{ route('home') }}" class="hover:text-gray-600">Accueil</a> • 
            <a href="{{ route('cgu') }}" class="hover:text-gray-600">CGU</a> • 
            <a href="{{ route('privacy') }}" class="hover:text-gray-600">Confidentialité</a>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Scroll vers les erreurs si présentes
    const errorBox = document.querySelector('.bg-red-50');
    if (errorBox) {
        errorBox.scrollIntoView({ behavior: 'smooth', block: 'center' });
        // Animation pour attirer l'attention
        errorBox.style.animation = 'shake 0.5s ease-in-out';
    }
    
    document.getElementById('timezone').value = Intl.DateTimeFormat().resolvedOptions().timeZone;
    document.querySelectorAll('.toggle-password').forEach(btn => {
        btn.addEventListener('click', function() {
            const input = document.getElementById(this.dataset.target);
            const icon = this.querySelector('i');
            input.type = input.type === 'password' ? 'text' : 'password';
            icon.classList.toggle('fa-eye');
            icon.classList.toggle('fa-eye-slash');
        });
    });
    
    const recaptchaEnabled = {{ config('recaptcha.enabled') && config('recaptcha.site_key') ? 'true' : 'false' }};
    const recaptchaSiteKey = "{{ config('recaptcha.site_key') }}";
    
    document.getElementById('login-form').addEventListener('submit', async function(e) {
        e.preventDefault();
        const form = this;
        
        try {
            const res = await fetch('/csrf-token', { credentials: 'same-origin' });
            if (res.ok) { const data = await res.json(); if (data.token) form.querySelector('input[name="_token"]').value = data.token; }
        } catch (err) {}
        
        // Execute reCAPTCHA before submit
        if (recaptchaEnabled && window.grecaptcha) {
            try {
                const token = await new Promise((resolve, reject) => {
                    window.grecaptcha.ready(() => {
                        window.grecaptcha.execute(recaptchaSiteKey, { action: 'login' })
                            .then(resolve)
                            .catch(reject);
                    });
                });
                document.getElementById('recaptcha_token').value = token;
            } catch (err) {
                console.error('reCAPTCHA error:', err);
            }
        }
        
        form.submit();
    });
});
</script>
@endpush
@endsection