@extends('admin.layout')

@section('title', 'Modifier le prestataire')

@section('content')
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
    <div class="p-4 sm:p-6">
        <!-- Header mobile-first -->
        <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center mb-6">
            <h2 class="text-xl sm:text-2xl font-bold text-gray-900 mb-4 sm:mb-0">Modifier le prestataire</h2>
            <a href="{{ route('admin.providers.index') }}" 
               class="text-gray-600 hover:text-gray-900 font-medium text-sm">
                ← Retour à la liste
            </a>
        </div>

        <form action="{{ route('admin.providers.update', $provider->uuid) }}" method="POST" enctype="multipart/form-data" class="space-y-6">
            @csrf
            @method('PUT')
            
            <!-- Informations utilisateur -->
            <div class="bg-gray-50 p-4 rounded-lg">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Informations de connexion</h3>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-gray-700 text-sm font-medium mb-2">Nom complet *</label>
                        <input type="text" name="name" value="{{ old('name', $provider->user->name) }}" 
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors" 
                               required>
                        @error('name')<span class="text-red-500 text-xs mt-1 block">{{ $message }}</span>@enderror
                    </div>

                    <div>
                        <label class="block text-gray-700 text-sm font-medium mb-2">Email *</label>
                        <input type="email" name="email" value="{{ old('email', $provider->user->email) }}" 
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors" 
                               required>
                        @error('email')<span class="text-red-500 text-xs mt-1 block">{{ $message }}</span>@enderror
                    </div>

                    <div>
                        <label class="block text-gray-700 text-sm font-medium mb-2">Nouveau mot de passe</label>
                        <input type="password" name="password" autocomplete="new-password"
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors" 
                               placeholder="Laisser vide pour ne pas changer">
                        @error('password')<span class="text-red-500 text-xs mt-1 block">{{ $message }}</span>@enderror
                    </div>

                    <div>
                        <label class="block text-gray-700 text-sm font-medium mb-2">Confirmer le mot de passe</label>
                        <input type="password" name="password_confirmation" autocomplete="new-password"
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors" 
                               placeholder="Confirmer le nouveau mot de passe">
                    </div>

                    <div>
                        <label class="flex items-center">
                            <input type="checkbox" name="is_active" value="1" {{ old('is_active', $provider->user->is_active) ? 'checked' : '' }} class="mr-2">
                            <span class="text-sm font-medium text-gray-700">Compte actif (peut se connecter)</span>
                        </label>
                    </div>
                </div>
            </div>

            <!-- Informations professionnelles -->
            <div class="bg-gray-50 p-4 rounded-lg">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Informations professionnelles</h3>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div class="sm:col-span-2">
                        <label class="block text-gray-700 text-sm font-medium mb-2">Nom commercial *</label>
                        <input type="text" name="business_name" value="{{ old('business_name', $provider->business_name) }}" 
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors" 
                               required>
                        @error('business_name')<span class="text-red-500 text-xs mt-1 block">{{ $message }}</span>@enderror
                    </div>

                    <div>
                        <label class="block text-gray-700 text-sm font-medium mb-2">Téléphone *</label>
                        <input type="tel" name="phone" value="{{ old('phone', $provider->phone) }}" 
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors" 
                               required>
                        @error('phone')<span class="text-red-500 text-xs mt-1 block">{{ $message }}</span>@enderror
                    </div>

                    <div>
                        <label class="block text-gray-700 text-sm font-medium mb-2">Logo</label>
                        @if($provider->logo)
                            <div class="mb-3 flex items-center space-x-3">
                                <img src="{{ asset('storage/' . $provider->logo) }}" alt="Logo actuel" 
                                     class="h-16 w-16 object-cover rounded-lg border border-gray-200">
                                <div>
                                    <p class="text-xs text-gray-500 mb-2">Logo actuel</p>
                                    <label class="flex items-center">
                                        <input type="checkbox" name="remove_logo" value="1" class="mr-2">
                                        <span class="text-sm text-red-600">Supprimer le logo</span>
                                    </label>
                                </div>
                            </div>
                        @endif
                        <input type="file" name="logo" accept="image/*"
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-medium file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
                        @error('logo')<span class="text-red-500 text-xs mt-1 block">{{ $message }}</span>@enderror
                    </div>
                </div>
            </div>

            <!-- Adresse -->
            <div class="bg-gray-50 p-4 rounded-lg">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Adresse (optionnel)</h3>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div class="sm:col-span-2">
                        <label class="block text-gray-700 text-sm font-medium mb-2">Adresse</label>
                        <input type="text" name="address" value="{{ old('address', $provider->address) }}" 
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors">
                    </div>

                    <div>
                        <label class="block text-gray-700 text-sm font-medium mb-2">Ville</label>
                        <input type="text" name="city" value="{{ old('city', $provider->city) }}" 
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors">
                    </div>

                    <div>
                        <label class="block text-gray-700 text-sm font-medium mb-2">Pays</label>
                        <input type="text" name="country" value="{{ old('country', $provider->country) }}" 
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors">
                    </div>
                </div>
            </div>

            <!-- Description -->
            <div>
                <label class="block text-gray-700 text-sm font-medium mb-2">Description</label>
                <textarea name="description" rows="4" 
                          class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors" 
                          placeholder="Description de l'activité du prestataire...">{{ old('description', $provider->description) }}</textarea>
            </div>

            <!-- Boutons d'action -->
            <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center space-y-3 sm:space-y-0 pt-6 border-t">
                <a href="{{ route('admin.providers.index') }}" 
                   class="w-full sm:w-auto text-center px-4 py-2 text-gray-600 hover:text-gray-900 font-medium transition-colors">
                    Annuler
                </a>
                <button type="submit" 
                        class="w-full sm:w-auto bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-lg transition-colors duration-200 shadow-sm">
                    Enregistrer les modifications
                </button>
            </div>
        </form>
    </div>
</div>
@endsection