<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Connexion - {{ config('app.name') }}</title>
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=plus-jakarta-sans:400,500,600,700" rel="stylesheet" />
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    <style>
        .login-bg {
            background-color: #0f172a;
            background-image: url('https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?w=1920&q=80');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        @media (min-width: 768px) {
            .login-bg {
                background-position: center right;
            }
        }

        .login-overlay {
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.94) 0%, rgba(30, 41, 59, 0.9) 50%, rgba(15, 23, 42, 0.85) 100%);
        }

    </style>
</head>
<body class="font-sans antialiased min-h-screen">
    <div class="min-h-screen flex login-bg">
        {{-- Overlay sombre pour lisibilité --}}
        <div class="absolute inset-0 login-overlay"></div>

        <div class="relative flex-1 flex items-center justify-center p-4 sm:p-6 lg:p-8">
            <div class="w-full max-w-md">
                {{-- Logo et titre --}}
                <div class="text-center mb-8">
                    {{-- <div class="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-blue-600 shadow-lg shadow-blue-600/30 mb-6">
                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
                        </svg>
                    </div>  --}}
                    <h1 class="text-2xl font-bold text-white tracking-tight">StockTransfer</h1>
                    <p class="mt-2 text-slate-400 text-sm">Gestion des stocks et transferts</p>
                </div>

                {{-- Carte de connexion --}}
                <div class="bg-white/95 backdrop-blur-xl rounded-2xl shadow-2xl border border-white/20 overflow-hidden">
                    <div class="px-8 py-10 sm:px-10 sm:py-12">
                        <h2 class="text-xl font-semibold text-slate-800 mb-1 text-center">Connexion</h2>
                        <p class="text-slate-500 text-sm mb-8 text-center">Identifiez-vous pour accéder à l'application</p>

                        @if($errors->any())
                        <div class="mb-6 p-4 rounded-xl bg-red-50 border border-red-100">
                            <p class="text-red-700 text-sm font-medium">{{ $errors->first() }}</p>
                        </div>
                        @endif

                        <form method="POST" action="{{ route('login') }}" class="space-y-6">
                            @csrf

                            <div>
                                <label for="matricule" class="block text-sm font-medium text-slate-700 mb-2">Matricule</label>
                                <input type="text" name="matricule" id="matricule" value="{{ old('matricule') }}" autocomplete="username" required autofocus placeholder="Ex: EMP-001" class="w-full rounded-xl border border-slate-300 bg-white px-4 py-3 text-slate-800 placeholder-slate-400 shadow-sm transition focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 focus:outline-none">
                            </div>

                            <div>
                                <label for="password" class="block text-sm font-medium text-slate-700 mb-2">Mot de passe</label>
                                <input type="password" name="password" id="password" autocomplete="current-password" required placeholder="••••••••" class="w-full rounded-xl border border-slate-300 bg-white px-4 py-3 text-slate-800 placeholder-slate-400 shadow-sm transition focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 focus:outline-none">
                            </div>

                            <div class="flex items-center">
                                <input type="checkbox" name="remember" id="remember" class="h-4 w-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500">
                                <label for="remember" class="ml-2 block text-sm text-slate-600">Se souvenir de moi</label>
                            </div>

                            <button type="submit" class="w-full flex justify-center items-center gap-2 px-4 py-3.5 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-xl shadow-lg shadow-blue-600/25 transition-colors">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1" />
                                </svg>
                                Se connecter
                            </button>
                        </form>
                    </div>
                </div>

                <p class="mt-6 text-center text-slate-400 text-xs">
                    &copy; {{ date('Y') }} {{ config('app.name') }}. Tous droits réservés.Designed By <a href="https://softsys.ci/" class="text-orange-400">Softsys</a>
                </p>
            </div>
        </div>
    </div>
</body>
</html>
