@extends('layouts.app')

@section('content')
<div class="max-w-4xl mx-auto">
    <h1 class="text-2xl font-bold mb-6">Modifier le Profil</h1>

    <form action="{{ route('users.update', $user) }}" method="POST" class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
        @csrf
        @method('PUT')
        
        <div class="mb-4">
            <h2 class="text-lg font-semibold mb-3 text-blue-800">Informations personnelles</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-gray-700 text-sm font-bold mb-2" for="name">
                        Nom complet *
                    </label>
                    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="name" name="name" type="text" placeholder="Votre nom complet" required value="{{ old('name', $user->name) }}">
                    @error('name') <p class="text-red-500 text-xs italic">{{ $message }}</p> @enderror
                </div>
                
                <div>
                    <label class="block text-gray-700 text-sm font-bold mb-2" for="email">
                        Email *
                    </label>
                    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="email" name="email" type="email" placeholder="Votre email" required value="{{ old('email', $user->email) }}">
                    @error('email') <p class="text-red-500 text-xs italic">{{ $message }}</p> @enderror
                </div>
                
                <div>
                    <label class="block text-gray-700 text-sm font-bold mb-2" for="phone">
                        Téléphone
                    </label>
                    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="phone" name="phone" type="text" placeholder="Votre numéro de téléphone" value="{{ old('phone', $user->phone) }}">
                    @error('phone') <p class="text-red-500 text-xs italic">{{ $message }}</p> @enderror
                </div>
                
                @if(Auth::user()->isAdmin())
                <div>
                    <label class="block text-gray-700 text-sm font-bold mb-2" for="role">
                        Rôle *
                    </label>
                    <select class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="role" name="role" required>
                        <option value="agent" {{ old('role', $user->role) == 'agent' ? 'selected' : '' }}>Agent</option>
                        <option value="admin" {{ old('role', $user->role) == 'admin' ? 'selected' : '' }}>Administrateur</option>
                    </select>
                    @error('role') <p class="text-red-500 text-xs italic">{{ $message }}</p> @enderror
                </div>
                @endif
                
                
            </div>
        </div>
        
        <div class="flex items-center justify-between">
            <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">
                Mettre à jour
            </button>
            <a class="inline-block align-baseline font-bold text-sm text-blue-600 hover:text-blue-800" href="{{ route('users.profile') }}">
                Annuler
            </a>
        </div>
    </form>

    <!-- Formulaire de changement de mot de passe -->
    <div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
        <h2 class="text-lg font-semibold mb-3 text-blue-800">Changer le mot de passe</h2>
        
        <form action="{{ route('users.password.update', $user) }}" method="POST">
            @csrf
            @method('PUT')
            
            @if(Auth::id() === $user->id)
            <div class="mb-4">
                <label class="block text-gray-700 text-sm font-bold mb-2" for="current_password">
                    Mot de passe actuel *
                </label>
                <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="current_password" name="current_password" type="password" placeholder="Votre mot de passe actuel">
                @error('current_password') <p class="text-red-500 text-xs italic">{{ $message }}</p> @enderror
            </div>
            @endif
            
            <div class="mb-4">
                <label class="block text-gray-700 text-sm font-bold mb-2" for="password">
                    Nouveau mot de passe *
                </label>
                <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="password" name="password" type="password" placeholder="Nouveau mot de passe">
                @error('password') <p class="text-red-500 text-xs italic">{{ $message }}</p> @enderror
            </div>
            
            <div class="mb-6">
                <label class="block text-gray-700 text-sm font-bold mb-2" for="password_confirmation">
                    Confirmer le mot de passe *
                </label>
                <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="password_confirmation" name="password_confirmation" type="password" placeholder="Confirmer le mot de passe">
                @error('password_confirmation') <p class="text-red-500 text-xs italic">{{ $message }}</p> @enderror
            </div>
            
            <div class="flex items-center justify-between">
                <button class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">
                    Changer le mot de passe
                </button>
            </div>
        </form>
    </div>
</div>
@endsection