@extends('layouts.app')

@section('title', 'Modifier un utilisateur')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1 class="h3 mb-0 text-gray-800">
                    <i class="fas fa-user-edit me-2"></i>Modifier l'utilisateur
                </h1>
                <div class="d-flex gap-2">
                    <a href="{{ route('users.show', $user) }}" class="btn btn-info">
                        <i class="fas fa-eye me-2"></i>Voir
                    </a>
                    <a href="{{ route('users.index') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left me-2"></i>Retour à la liste
                    </a>
                </div>
            </div>

            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">
                                Modifier les informations de {{ $user->full_name }}
                                <span class="badge bg-{{ $user->is_active ? 'success' : 'danger' }} ms-2">
                                    {{ $user->is_active ? 'Actif' : 'Inactif' }}
                                </span>
                            </h5>
                        </div>
                        <div class="card-body">
                            <form action="{{ route('users.update', $user) }}" method="POST" enctype="multipart/form-data">
                                @csrf
                                @method('PUT')
                                
                                <div class="row">
                                    <!-- Informations personnelles -->
                                    <div class="col-md-6">
                                        <h6 class="text-muted mb-3">Informations personnelles</h6>
                                        
                                        <div class="mb-3">
                                            <label for="name" class="form-label">Nom complet <span class="text-danger">*</span></label>
                                            <input type="text" 
                                                   class="form-control @error('name') is-invalid @enderror" 
                                                   id="name" 
                                                   name="name" 
                                                   value="{{ old('name', $user->name) }}" 
                                                   required>
                                            @error('name')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="row">
                                            <div class="col-6">
                                                <div class="mb-3">
                                                    <label for="first_name" class="form-label">Prénom</label>
                                                    <input type="text" 
                                                           class="form-control @error('first_name') is-invalid @enderror" 
                                                           id="first_name" 
                                                           name="first_name" 
                                                           value="{{ old('first_name', $user->first_name) }}">
                                                    @error('first_name')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-6">
                                                <div class="mb-3">
                                                    <label for="last_name" class="form-label">Nom de famille</label>
                                                    <input type="text" 
                                                           class="form-control @error('last_name') is-invalid @enderror" 
                                                           id="last_name" 
                                                           name="last_name" 
                                                           value="{{ old('last_name', $user->last_name) }}">
                                                    @error('last_name')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>

                                        <div class="mb-3">
                                            <label for="email" class="form-label">Email <span class="text-danger">*</span></label>
                                            <input type="email" 
                                                   class="form-control @error('email') is-invalid @enderror" 
                                                   id="email" 
                                                   name="email" 
                                                   value="{{ old('email', $user->email) }}" 
                                                   required>
                                            @error('email')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="mb-3">
                                            <label for="phone" class="form-label">Téléphone</label>
                                            <input type="tel" 
                                                   class="form-control @error('phone') is-invalid @enderror" 
                                                   id="phone" 
                                                   name="phone" 
                                                   value="{{ old('phone', $user->phone) }}" 
                                                   placeholder="+237 6XX XXX XXX">
                                            @error('phone')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <!-- Rôle simple (nouveau champ) -->
                                        <div class="mb-3">
                                            <label for="role" class="form-label">Rôle principal</label>
                                            <select class="form-select @error('role') is-invalid @enderror" 
                                                    id="role" 
                                                    name="role">
                                                <option value="">Sélectionner un rôle...</option>
                                                <option value="admin" {{ old('role', $user->role) == 'admin' ? 'selected' : '' }}>Administrateur</option>
                                                <option value="supervisor" {{ old('role', $user->role) == 'supervisor' ? 'selected' : '' }}>Superviseur</option>
                                                <option value="doctor" {{ old('role', $user->role) == 'doctor' ? 'selected' : '' }}>Médecin</option>
                                                <option value="pharmacist" {{ old('role', $user->role) == 'pharmacist' ? 'selected' : '' }}>Pharmacien</option>
                                                <option value="receptionist" {{ old('role', $user->role) == 'receptionist' ? 'selected' : '' }}>Réceptionniste</option>
                                                <option value="cashier" {{ old('role', $user->role) == 'cashier' ? 'selected' : '' }}>Caissier</option>
                                                <option value="user" {{ old('role', $user->role) == 'user' ? 'selected' : '' }}>Utilisateur</option>
                                            </select>
                                            @error('role')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <!-- Avatar actuel et nouveau -->
                                        <div class="mb-3">
                                            <label for="avatar" class="form-label">Photo de profil</label>
                                            
                                            @if($user->avatar)
                                                <div class="mb-2">
                                                    <img src="{{ Storage::url($user->avatar) }}" 
                                                         class="img-thumbnail" 
                                                         style="max-width: 100px; max-height: 100px;" 
                                                         alt="Avatar actuel">
                                                    <small class="d-block text-muted">Photo actuelle</small>
                                                </div>
                                            @endif
                                            
                                            <input type="file" 
                                                   class="form-control @error('avatar') is-invalid @enderror" 
                                                   id="avatar" 
                                                   name="avatar" 
                                                   accept="image/*">
                                            @error('avatar')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                            <div class="form-text">Formats acceptés: JPG, PNG, GIF. Taille max: 2MB. Laissez vide pour conserver l'image actuelle.</div>
                                        </div>
                                    </div>

                                    <!-- Informations système -->
                                    <div class="col-md-6">
                                        <h6 class="text-muted mb-3">Informations système</h6>
                                        
                                        <div class="mb-3">
                                            <label for="password" class="form-label">Nouveau mot de passe</label>
                                            <input type="password" 
                                                   class="form-control @error('password') is-invalid @enderror" 
                                                   id="password" 
                                                   name="password">
                                            @error('password')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                            <div class="form-text">Laissez vide pour conserver le mot de passe actuel. Minimum 8 caractères.</div>
                                        </div>

                                        <div class="mb-3">
                                            <label for="password_confirmation" class="form-label">Confirmer le nouveau mot de passe</label>
                                            <input type="password" 
                                                   class="form-control" 
                                                   id="password_confirmation" 
                                                   name="password_confirmation">
                                        </div>

                                        <!-- Rôles complexes (si nécessaire) -->
                                        <div class="mb-3">
                                            <label for="roles" class="form-label">Rôles avancés</label>
                                            <div class="border rounded p-3 @error('roles') border-danger @enderror">
                                                @foreach($roles as $role)
                                                    <div class="form-check">
                                                        <input class="form-check-input" 
                                                               type="checkbox" 
                                                               name="roles[]" 
                                                               value="{{ $role->id }}" 
                                                               id="role_{{ $role->id }}"
                                                               {{ in_array($role->id, old('roles', $userRoles)) ? 'checked' : '' }}>
                                                        <label class="form-check-label" for="role_{{ $role->id }}">
                                                            <strong>{{ $role->display_name }}</strong>
                                                            @if($role->description)
                                                                <br><small class="text-muted">{{ $role->description }}</small>
                                                            @endif
                                                        </label>
                                                    </div>
                                                    @if(!$loop->last)<hr class="my-2">@endif
                                                @endforeach
                                            </div>
                                            @error('roles')
                                                <div class="text-danger small mt-1">{{ $message }}</div>
                                            @enderror
                                            <small class="form-text text-muted">Les rôles avancés sont optionnels et peuvent compléter le rôle principal.</small>
                                        </div>

                                        <div class="mb-3">
                                            <label for="health_center_id" class="form-label">Centre de santé</label>
                                            <select class="form-select @error('health_center_id') is-invalid @enderror" 
                                                    id="health_center_id" 
                                                    name="health_center_id">
                                                <option value="">Aucun centre assigné...</option>
                                                @foreach($healthCenters as $center)
                                                    <option value="{{ $center->id }}" 
                                                        {{ old('health_center_id', $user->health_center_id) == $center->id ? 'selected' : '' }}>
                                                        {{ $center->name }} - {{ $center->location }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            @error('health_center_id')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                            <small class="form-text text-muted">Obligatoire pour les superviseurs.</small>
                                        </div>

                                        <div class="form-check">
                                            <input class="form-check-input" 
                                                   type="checkbox" 
                                                   name="is_active" 
                                                   value="1" 
                                                   id="is_active"
                                                   {{ old('is_active', $user->is_active) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="is_active">
                                                Compte actif
                                            </label>
                                        </div>

                                        <!-- Informations supplémentaires -->
                                        <div class="mt-4">
                                            <h6 class="text-muted mb-2">Informations système</h6>
                                            <small class="text-muted d-block">Créé le: {{ $user->created_at->format('d/m/Y à H:i') }}</small>
                                            <small class="text-muted d-block">Modifié le: {{ $user->updated_at->format('d/m/Y à H:i') }}</small>
                                            @if($user->last_login_at)
                                                <small class="text-muted d-block">Dernière connexion: {{ $user->last_login_at->format('d/m/Y à H:i') }}</small>
                                            @endif
                                            @if($user->email_verified_at)
                                                <small class="text-success d-block">
                                                    <i class="fas fa-check-circle"></i> Email vérifié le {{ $user->email_verified_at->format('d/m/Y') }}
                                                </small>
                                            @else
                                                <small class="text-warning d-block">
                                                    <i class="fas fa-exclamation-triangle"></i> Email non vérifié
                                                </small>
                                            @endif
                                        </div>
                                    </div>
                                </div>

                                <hr class="my-4">

                                <div class="d-flex justify-content-between">
                                    <div>
                                        <!-- Actions dangereuses -->
                                        <button type="button" class="btn btn-warning me-2" onclick="toggleUserStatus()">
                                            <i class="fas fa-{{ $user->is_active ? 'ban' : 'check' }} me-2"></i>
                                            {{ $user->is_active ? 'Désactiver' : 'Activer' }} le compte
                                        </button>
                                        
                                        @if(auth()->user()->id !== $user->id)
                                            <button type="button" class="btn btn-danger" onclick="deleteUser()">
                                                <i class="fas fa-trash me-2"></i>Supprimer
                                            </button>
                                        @endif
                                    </div>
                                    
                                    <div class="d-flex gap-2">
                                        <a href="{{ route('users.index') }}" class="btn btn-secondary">
                                            <i class="fas fa-times me-2"></i>Annuler
                                        </a>
                                        <button type="submit" class="btn btn-primary">
                                            <i class="fas fa-save me-2"></i>Mettre à jour
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal de confirmation pour changer le statut -->
<div class="modal fade" id="statusModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Confirmer l'action</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Êtes-vous sûr de vouloir <strong id="statusAction">{{ $user->is_active ? 'désactiver' : 'activer' }}</strong> le compte de <strong>{{ $user->full_name }}</strong> ?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                <form action="{{ route('users.toggle-status', $user) }}" method="POST" class="d-inline">
                    @csrf
                    @method('PATCH')
                    <button type="submit" class="btn btn-warning">Confirmer</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Modal de confirmation pour suppression -->
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title text-danger">Supprimer l'utilisateur</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-danger">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    <strong>Action irréversible !</strong>
                </div>
                <p>Êtes-vous sûr de vouloir supprimer définitivement le compte de <strong>{{ $user->full_name }}</strong> ?</p>
                <p class="text-muted small">Cette action supprimera toutes les données associées à cet utilisateur.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                <form action="{{ route('users.destroy', $user) }}" method="POST" class="d-inline">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger">Supprimer définitivement</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Prévisualisation de l'avatar
    const avatarInput = document.getElementById('avatar');
    if (avatarInput) {
        avatarInput.addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    let preview = document.getElementById('avatar-preview');
                    if (!preview) {
                        preview = document.createElement('div');
                        preview.id = 'avatar-preview';
                        preview.className = 'mt-2';
                        avatarInput.parentNode.appendChild(preview);
                    }
                    preview.innerHTML = `
                        <img src="${e.target.result}" 
                             class="img-thumbnail" 
                             style="max-width: 150px; max-height: 150px;" 
                             alt="Nouvel aperçu">
                        <small class="d-block text-success">Nouvel avatar (non sauvegardé)</small>
                    `;
                };
                reader.readAsDataURL(file);
            }
        });
    }

    // Synchronisation du rôle principal avec les cases à cocher
    const roleSelect = document.getElementById('role');
    const roleCheckboxes = document.querySelectorAll('input[name="roles[]"]');
    
    if (roleSelect) {
        roleSelect.addEventListener('change', function() {
            // Décocher toutes les cases
            roleCheckboxes.forEach(checkbox => checkbox.checked = false);
            
            // Cocher la case correspondant au rôle sélectionné
            const selectedRole = this.value;
            if (selectedRole) {
                const correspondingCheckbox = document.querySelector(`input[name="roles[]"][value*="${selectedRole}"]`);
                if (correspondingCheckbox) {
                    correspondingCheckbox.checked = true;
                }
            }
        });
    }
});

function toggleUserStatus() {
    const modal = new bootstrap.Modal(document.getElementById('statusModal'));
    modal.show();
}

function deleteUser() {
    const modal = new bootstrap.Modal(document.getElementById('deleteModal'));
    modal.show();
}
</script>
@endpush