@extends('layouts.app')

@section('content')
<div class="max-w-md mx-auto">
  <h2 class="text-xl font-semibold mb-4">Changer le mot de passe</h2>
  <form id="update-password-form" method="POST" action="{{ route('account.password.update') }}">
    @csrf
    <label class="block mb-1">Mot de passe actuel</label>
    <div class="relative mb-4">
      <input id="current_password" type="password" name="current_password" class="w-full border p-2 rounded pr-10" required>
      <button type="button" class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-600" onclick="togglePasswordVisibility('current_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>
    <label class="block mb-1">Nouveau mot de passe</label>
    <div class="relative mb-4">
      <input id="new_password" type="password" name="password" class="w-full border p-2 rounded pr-10" required>
      <button type="button" class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-600" onclick="togglePasswordVisibility('new_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>
    <label class="block mb-1">Confirmer le mot de passe</label>
    <div class="relative mb-4">
      <input id="new_password_confirmation" type="password" name="password_confirmation" class="w-full border p-2 rounded pr-10" required>
      <button type="button" class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-600" onclick="togglePasswordVisibility('new_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="button" onclick="openModal('confirm-update-password')" class="bg-green-600 text-white p-2 rounded w-full">Mettre à jour</button>
  </form>
  <x-confirm-modal id="confirm-update-password" formId="update-password-form" message="Mettre à jour le mot de passe ?" confirmText="Mettre à jour" />
</div>
@endsection