<!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>Réinitialiser le mot de passe - {{ 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;
        }
        .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">
        <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">
                <div class="text-center mb-8">
                    <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>
                <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">Nouveau mot de passe</h2>
                        <p class="text-slate-500 text-sm mb-8 text-center">Choisissez un nouveau mot de passe pour votre compte.</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('password.update') }}" class="space-y-6">
                            @csrf
                            <input type="hidden" name="token" value="{{ $token }}">
                            <input type="hidden" name="email" value="{{ $email }}">
                            <div>
                                <label for="email" class="block text-sm font-medium text-slate-700 mb-2">Email</label>
                                <input type="email" id="email" value="{{ $email }}" class="w-full rounded-xl border border-slate-300 bg-slate-50 px-4 py-3 text-slate-600" readonly>
                            </div>
                            <div>
                                <label for="password" class="block text-sm font-medium text-slate-700 mb-2">Nouveau mot de passe</label>
                                <input type="password" name="password" id="password" required minlength="8" autocomplete="new-password" 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>
                                <label for="password_confirmation" class="block text-sm font-medium text-slate-700 mb-2">Confirmer le mot de passe</label>
                                <input type="password" name="password_confirmation" id="password_confirmation" required minlength="8" autocomplete="new-password" 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>
                            <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">
                                Réinitialiser le mot de passe
                            </button>
                        </form>
                        <p class="mt-6 text-center">
                            <a href="{{ route('login') }}" class="text-sm text-blue-600 hover:text-blue-700 font-medium">Retour à la connexion</a>
                        </p>
                    </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>
