@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">Connexion</h2>
  <form method="POST" action="{{ route('login') }}">
    @csrf
    <label class="block mb-1">Email</label>
    <input type="email" name="email" value="{{ old('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="login_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('login_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

    <div class="flex items-center justify-between mt-4">
      <label><input type="checkbox" name="remember"> Se souvenir</label>
      <a href="{{ route('password.request') }}" class="text-sm text-blue-600">Mot de passe oublié ?</a>
    </div>

    <button type="submit" class="mt-6 w-full bg-blue-600 text-white p-2 rounded">
      Se connecter
    </button>
  </form>
</div>
@endsection
