@extends('layouts.app')

@section('content')
<div class="max-w-md mx-auto mt-16 bg-white p-6 shadow rounded">
    <h2 class="text-xl font-semibold mb-4">Réinitialiser le mot de passe</h2>
    <form method="POST" action="{{ route('password.update') }}">
        @csrf
        <input type="hidden" name="token" value="{{ $token }}">
        <label class="block mb-1">Email</label>
        <input type="email" name="email" value="{{ old('email', $email) }}" class="w-full mb-2 p-2 border rounded" required autofocus>
        @error('email')<p class="text-red-600 text-sm">{{ $message }}</p>@enderror
        <label class="block mb-1 mt-4">Mot de passe</label>
        <div class="relative">
            <input id="reset_password" type="password" name="password" class="w-full mb-2 p-2 border rounded pr-10" required>
            <button type="button" class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-600" onclick="togglePasswordVisibility('reset_password', this)">
                <svg class="h-5 w-5 eye-open" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.477 0 8.268 2.943 9.542 7-1.274 4.057-5.065 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                </svg>
                <svg class="h-5 w-5 eye-closed hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3l18 18M9.88 9.882A3 3 0 0012 15a3 3 0 002.12-.879M4.22 4.22A10.018 10.018 0 002.458 12C3.732 16.057 7.523 19 12 19a9.96 9.96 0 004.12-.874M15 9.341A3 3 0 0112.659 7M17.657 13.657A9.958 9.958 0 0019.542 12c-1.274-4.057-5.065-7-9.542-7a9.96 9.96 0 00-4.32.936" />
                </svg>
            </button>
        </div>
        @error('password')<p class="text-red-600 text-sm">{{ $message }}</p>@enderror
        <label class="block mb-1 mt-4">Confirmer le mot de passe</label>
        <div class="relative">
            <input id="reset_password_confirmation" type="password" name="password_confirmation" class="w-full mb-2 p-2 border rounded pr-10" required>
            <button type="button" class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-600" onclick="togglePasswordVisibility('reset_password_confirmation', this)">
                <svg class="h-5 w-5 eye-open" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.477 0 8.268 2.943 9.542 7-1.274 4.057-5.065 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                </svg>
                <svg class="h-5 w-5 eye-closed hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3l18 18M9.88 9.882A3 3 0 0012 15a3 3 0 002.12-.879M4.22 4.22A10.018 10.018 0 002.458 12C3.732 16.057 7.523 19 12 19a9.96 9.96 0 004.12-.874M15 9.341A3 3 0 0112.659 7M17.657 13.657A9.958 9.958 0 0019.542 12c-1.274-4.057-5.065-7-9.542-7a9.96 9.96 0 00-4.32.936" />
                </svg>
            </button>
        </div>
        <button type="submit" class="mt-6 w-full bg-green-600 text-white p-2 rounded">Réinitialiser</button>
    </form>
</div>
@endsection