@extends('layouts.dashboard')

@section('title', 'Profil')
@section('page-title', '')

@section('content')
<div class="container-fluid px-4 py-4">
    <!-- Page Header -->
    <div class="row mb-4">
        <div class="col-12">
            <h1 class="h3 mb-0 text-dark fw-bold">Mon Profil</h1>
            <p class="text-muted mb-0">Gérez vos informations personnelles et paramètres de compte</p>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-body p-4">
                    <div class="row">
                        <div class="col-md-4 text-center mb-4 mb-md-0">
                            <div class="position-relative d-inline-block">
                                <img src="{{ auth()->user()->profile_photo ? asset('storage/' . auth()->user()->profile_photo) : asset('assets/favicon.png') }}" alt="Photo de profil" class="rounded-circle mb-3" style="width: 120px; height: 120px; object-fit: cover;">
                                <button class="btn btn-sm btn-primary position-absolute bottom-0 end-0 rounded-circle" style="width: 35px; height: 35px; padding: 0;" data-bs-toggle="modal" data-bs-target="#changePhotoModal">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                                        <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
                                    </svg>
                                </button>
                            </div>
                            <h4 class="mb-1 mt-3">{{ trim(($first_name ?? '') . ' ' . ($last_name ?? '')) ?: auth()->user()->name ?? 'Utilisateur' }}</h4>
                            <p class="text-muted mb-0">{{ auth()->user()->email ?? 'email@example.com' }}</p>
                        </div>
                        <div class="col-md-8">
                            <form id="profileForm">
                                @csrf
                                <div class="row">
                                    <div class="col-sm-6 mb-3">
                                        <label class="form-label fw-semibold">Prénom</label>
                                        <input type="text" class="form-control" id="first_name" name="first_name" value="{{ $first_name ?? '' }}" required>
                                    </div>
                                    <div class="col-sm-6 mb-3">
                                        <label class="form-label fw-semibold">Nom</label>
                                        <input type="text" class="form-control" id="last_name" name="last_name" value="{{ $last_name ?? '' }}">
                                    </div>
                                    <div class="col-sm-6 mb-3">
                                        <label class="form-label fw-semibold text-muted">Email</label>
                                        <input type="email" class="form-control bg-light text-muted" value="{{ auth()->user()->email ?? 'email@example.com' }}" readonly>
                                    </div>
                                    <div class="col-sm-6 mb-3">
                                        <label class="form-label fw-semibold">Téléphone</label>
                                        <input type="text" class="form-control" id="phone" name="phone" value="{{ $phone ?? '' }}" placeholder="Ex. 06 12 34 56 78">
                                    </div>
                                    <div class="col-sm-6 mb-3">
                                        <label class="form-label fw-semibold text-muted">Membre depuis</label>
                                        <input type="text" class="form-control bg-light text-muted" value="{{ auth()->user()->created_at->format('d/m/Y') ?? 'N/A' }}" readonly>
                                    </div>
                                    <div class="col-sm-6 mb-3">
                                        <label class="form-label fw-semibold text-muted">Dernière connexion</label>
                                        <input type="text" class="form-control bg-light text-muted" value="{{ auth()->user()->updated_at->format('d/m/Y à H:i') ?? 'N/A' }}" readonly>
                                    </div>
                                </div>
                            </form>
                            <div class="d-flex gap-2 mt-4">
                                <button class="btn btn-primary" id="saveProfileBtn">Sauvegarder</button>
                                <a href="{{ route('change-password.show') }}" class="btn btn-outline-primary">Changer le mot de passe</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal pour changer la photo de profil -->
<div class="modal fade" id="changePhotoModal" tabindex="-1" aria-labelledby="changePhotoModalLabel" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="changePhotoModalLabel">Changer la photo de profil</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="changePhotoForm" enctype="multipart/form-data">
                    @csrf
                    <div class="mb-3">
                        <label for="profilePhoto" class="form-label">Sélectionner une image</label>
                        <input type="file" class="form-control" id="profilePhoto" name="profile_photo" accept="image/png,image/jpg,image/jpeg" required>
                        <div class="form-text">Formats acceptés : PNG, JPG, JPEG. Taille maximale : 5MB</div>
                    </div>
                    <div class="text-center">
                        <img id="photoPreview" src="{{ auth()->user()->profile_photo ? asset('storage/' . auth()->user()->profile_photo) : asset('assets/favicon.png') }}" alt="Aperçu" class="rounded-circle" style="width: 100px; height: 100px; object-fit: cover; display: none;">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                <button type="button" class="btn btn-primary" id="savePhotoBtn">Enregistrer</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script nonce="{{ $cspNonce }}">
document.addEventListener('DOMContentLoaded', function() {
    const photoInput = document.getElementById('profilePhoto');
    const photoPreview = document.getElementById('photoPreview');
    const savePhotoBtn = document.getElementById('savePhotoBtn');
    const saveProfileBtn = document.getElementById('saveProfileBtn');
    const profileForm = document.getElementById('profileForm');

    // Aperçu de l'image
    photoInput.addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                photoPreview.src = e.target.result;
                photoPreview.style.display = 'block';
            };
            reader.readAsDataURL(file);
        }
    });

    // Gestion de l'accessibilité du modal - Solution agressive
    const changePhotoModal = document.getElementById('changePhotoModal');

    // Observer pour supprimer aria-hidden dès qu'il est ajouté
    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.type === 'attributes' && mutation.attributeName === 'aria-hidden') {
                if (changePhotoModal.getAttribute('aria-hidden') === 'true') {
                    changePhotoModal.removeAttribute('aria-hidden');
                }
            }
        });
    });

    // Observer les changements d'attributs
    observer.observe(changePhotoModal, {
        attributes: true,
        attributeFilter: ['aria-hidden']
    });

    // Supprimer aria-hidden au chargement
    changePhotoModal.removeAttribute('aria-hidden');

    // Supprimer aria-hidden lors des événements Bootstrap
    changePhotoModal.addEventListener('show.bs.modal', function() {
        this.removeAttribute('aria-hidden');
    });

    changePhotoModal.addEventListener('hide.bs.modal', function() {
        this.removeAttribute('aria-hidden');
    });

    changePhotoModal.addEventListener('shown.bs.modal', function() {
        this.removeAttribute('aria-hidden');
    });

    changePhotoModal.addEventListener('hidden.bs.modal', function() {
        this.removeAttribute('aria-hidden');
    });

    // Sauvegarde de la photo
    savePhotoBtn.addEventListener('click', function() {
        const fileInput = document.getElementById('profilePhoto');
        if (!fileInput.files || !fileInput.files[0]) {
            alert('Veuillez sélectionner une image');
            return;
        }

        const formData = new FormData(document.getElementById('changePhotoForm'));

        // Désactiver le bouton pendant la sauvegarde
        savePhotoBtn.disabled = true;
        const originalText = savePhotoBtn.textContent;
        savePhotoBtn.textContent = 'Enregistrement...';

        fetch('{{ route("profile.update-photo") }}', {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => {
            if (!response.ok) {
                return response.json().then(data => Promise.reject(data));
            }
            return response.json();
        })
        .then(data => {
            if (data.success) {
                // Mettre à jour l'image de profil sur la page (accepter URL relative ou absolue du même domaine)
                const raw = (data.photo_url && String(data.photo_url).trim()) || '';
                const isRelative = raw.startsWith('/');
                const isSameOrigin = raw.startsWith(window.location.origin);
                const photoUrl = (isRelative || isSameOrigin) ? (raw + (raw.indexOf('?') >= 0 ? '&' : '?') + 't=' + Date.now()) : '';
                if (!photoUrl) {
                    savePhotoBtn.disabled = false;
                    savePhotoBtn.textContent = originalText;
                    return;
                }

                const profileImgs = document.querySelectorAll('.rounded-circle');
                profileImgs.forEach(img => {
                    if (img.style.width === '120px' || img.style.width === '100px') {
                        img.src = photoUrl;
                    }
                });

                // Mettre à jour l'image de profil dans le layout (header)
                const headerProfileImg = document.querySelector('.profile-avatar img');
                if (headerProfileImg) {
                    headerProfileImg.src = photoUrl;
                } else {
                    // Si pas d'image, remplacer le span par une image
                    const profileAvatar = document.querySelector('.profile-avatar');
                    if (profileAvatar) {
                        const esc = (s) => String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
                        profileAvatar.innerHTML = `<img src="${esc(photoUrl)}" alt="Photo de profil" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;">`;
                    }
                }

                // Fermer le modal
                const modal = bootstrap.Modal.getInstance(document.getElementById('changePhotoModal'));
                if (modal) {
                    modal.hide();
                }

                // Réinitialiser le formulaire
                document.getElementById('changePhotoForm').reset();
                photoPreview.style.display = 'none';

                // Feedback discret
                savePhotoBtn.textContent = 'Enregistré !';
                // Garder le style bleu (btn-primary) au lieu de vert

                setTimeout(() => {
                    savePhotoBtn.textContent = originalText;
                    savePhotoBtn.disabled = false;
                }, 2000);
            } else {
                alert('Erreur lors de la mise à jour de la photo : ' + (data.message || 'Erreur inconnue'));
                savePhotoBtn.disabled = false;
                savePhotoBtn.textContent = originalText;
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Erreur lors de la mise à jour de la photo : ' + (error.message || 'Erreur inconnue'));
            savePhotoBtn.disabled = false;
            savePhotoBtn.textContent = originalText;
        });
    });

    // Sauvegarde du profil
    saveProfileBtn.addEventListener('click', function() {
        const formData = new FormData(profileForm);
        const firstNameValue = document.getElementById('first_name').value.trim();
        
        if (!firstNameValue) {
            alert('Le prénom est requis');
            return;
        }

        // Désactiver le bouton pendant la sauvegarde
        saveProfileBtn.disabled = true;
        const originalText = saveProfileBtn.textContent;
        saveProfileBtn.textContent = 'Sauvegarde...';

        fetch('{{ route("profile.update") }}', {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => {
            if (!response.ok) {
                return response.json().then(data => Promise.reject(data));
            }
            return response.json();
        })
        .then(data => {
            if (data.success) {
                // Mettre à jour le nom affiché (prénom + nom)
                const nameElement = document.querySelector('h4.mb-1');
                if (nameElement) {
                    const fn = document.getElementById('first_name').value.trim();
                    const ln = document.getElementById('last_name').value.trim();
                    nameElement.textContent = (fn + ' ' + ln).trim() || data.name;
                }

                // Mettre à jour le nom dans le header si présent
                const headerNameElement = document.querySelector('.profile-avatar + .user-info .user-name');
                if (headerNameElement) {
                    headerNameElement.textContent = data.name;
                }

                // Feedback discret
                saveProfileBtn.textContent = 'Sauvegardé !';
                // Garder le style bleu (btn-primary) au lieu de vert

                setTimeout(() => {
                    saveProfileBtn.textContent = originalText;
                    saveProfileBtn.disabled = false;
                }, 2000);
            } else {
                alert('Erreur lors de la sauvegarde : ' + (data.message || 'Erreur inconnue'));
                saveProfileBtn.disabled = false;
                saveProfileBtn.textContent = originalText;
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Erreur lors de la sauvegarde du profil : ' + (error.message || 'Erreur inconnue'));
            saveProfileBtn.disabled = false;
            saveProfileBtn.textContent = originalText;
        });
    });
});
</script>
@endpush