@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">Inscription</h2>
  <form method="POST" action="{{ route('register') }}">
    @csrf
    <label class="block mb-1">Nom complet</label>
    <input type="text" name="name" value="{{ old('name') }}"
           class="w-full mb-2 p-2 border rounded" required autofocus>
    @error('name')<p class="text-red-600 text-sm">{{ $message }}</p>@enderror

    <label class="block mb-1 mt-4">Email</label>
    <input type="email" name="email" value="{{ old('email') }}"
           class="w-full mb-2 p-2 border rounded" required>
    @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="register_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('register_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 mot de passe</label>
    <div class="relative">
      <input id="register_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('register_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">
      S’inscrire
    </button>
  </form>
  <p class="mt-4 text-center text-sm">
    Déjà un compte ? <a href="{{ route('login') }}" class="text-blue-600">Se connecter</a>
  </p>
</div>
@endsection