@extends('admin.layouts.app')

@section('content')

<form method="POST" id="profile-form" action="{{ route('admin.profile.update') }}" enctype="multipart/form-data">
    @csrf
    @method('PATCH')

    <div class="row">
        <div class="col-xl-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between bg-galaxy-transparent">
                <h4 class="mb-sm-0">{{ __('admin/profile.edit.title') }}</h4>

                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="javascript: void(0);">{{ __('admin/profile.breadcrumb.admin') }}</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('admin.profile.index') }}">{{ __('admin/profile.breadcrumb.profile') }}</a></li>
                        <li class="breadcrumb-item active">{{ __('admin/profile.breadcrumb.edit') }}</li>
                    </ol>
                </div>
            </div>

            <!-- Menu bar -->
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header">
                        <div class="d-flex align-items-center flex-wrap gap-2">
                            <div class="flex-grow-1">
                                <a href="{{ route('admin.profile.index') }}" class="btn btn-light me-2">
                                    <i class="ri-arrow-left-line me-1"></i>{{ __('admin/profile.buttons.cancel') }}
                                </a>
                                <button type="submit" class="btn btn-primary" id="saveprofile" data-bs-loading-text="{{ __('admin/profile.buttons.saving') }}">
                                    <i class="ri-save-line me-1 align-bottom"></i> {{ __('admin/profile.buttons.save_changes') }}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <!-- Contenu principal -->
                <div class="col-lg-8">
                    <!-- Informations personnelles -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">{{ __('admin/profile.sections.personal_info') }}</h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label class="form-label" for="firstname">{{ __('admin/profile.fields.firstname') }} <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control @error('firstname') is-invalid @enderror"
                                            id="firstname" name="firstname"
                                            placeholder="{{ __('admin/profile.placeholders.firstname') }}"
                                            value="{{ old('firstname', $admin->firstname) }}" >
                                        @error('firstname')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label class="form-label" for="lastname">{{ __('admin/profile.fields.lastname') }} <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control @error('lastname') is-invalid @enderror"
                                            id="lastname" name="lastname"
                                            placeholder="{{ __('admin/profile.placeholders.lastname') }}"
                                            value="{{ old('lastname', $admin->lastname) }}" >
                                        @error('lastname')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="mb-3">
                                        <label class="form-label" for="email">{{ __('admin/profile.fields.email') }} <span class="text-danger">*</span></label>
                                        <input type="email" class="form-control @error('email') is-invalid @enderror"
                                            id="email" name="email"
                                            placeholder="{{ __('admin/profile.placeholders.email') }}"
                                            value="{{ old('email', $admin->email) }}" >
                                        @error('email')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                        <small class="text-muted">{{ __('admin/profile.notes.email_usage') }}</small>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="mb-3">
                                        <label class="form-label" for="note">{{ __('admin/profile.fields.notes') }}</label>
                                        <textarea class="form-control @error('note') is-invalid @enderror"
                                            id="note" name="note" rows="4"
                                            placeholder="{{ __('admin/profile.placeholders.notes') }}">{{ old('note', $admin->note) }}</textarea>
                                        @error('note')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                        <small class="text-muted">{{ __('admin/profile.notes.private_notes') }}</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Photo de profil -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">{{ __('admin/profile.sections.profile_picture') }}</h5>
                        </div>
                        <div class="card-body">
                            <div class="row align-items-center">
                                <div class="col-lg-4">
                                    <div class="text-center">
                                        <div class="position-relative d-inline-block" id="profile-image-container">
                                            @if($admin->picture)
                                            <img src="{{ $admin->profile_picture }}" alt="{{ __('admin/profile.alt.current_picture') }}" 
                                                class="avatar-xl rounded-circle border" id="profile-preview">
                                            @else
                                            <div class="avatar-xl mx-auto border rounded-circle d-flex align-items-center justify-content-center bg-light" id="profile-preview">
                                                <span class="text-muted fs-2">
                                                    {{ strtoupper(substr($admin->firstname, 0, 1)) }}{{ strtoupper(substr($admin->lastname, 0, 1)) }}
                                                </span>
                                            </div>
                                            @endif
                                        </div>
                                        @if($admin->picture)
                                        <div class="mt-2">
                                            <button type="button" class="btn btn-sm btn-outline-danger" id="remove-picture">
                                                <i class="ri-delete-bin-line me-1"></i>{{ __('admin/profile.buttons.delete') }}
                                            </button>
                                            <input type="hidden" name="remove_picture" id="remove_picture_input" value="0">
                                        </div>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-lg-8">
                                    <div class="mb-3">
                                        <label class="form-label" for="picture">{{ __('admin/profile.buttons.change_picture') }}</label>
                                        <input type="file" class="form-control @error('picture') is-invalid @enderror"
                                            id="picture" name="picture" accept="image/*">
                                        @error('picture')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                        <small class="text-muted">
                                            {{ __('admin/profile.notes.accepted_formats') }}<br>
                                            {{ __('admin/profile.notes.recommended_size') }}
                                        </small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Sidebar -->
                <div class="col-lg-4">
                    <!-- Aperçu du profil -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">{{ __('admin/profile.sections.preview') }}</h5>
                        </div>
                        <div class="card-body text-center">
                            <div class="avatar-lg mx-auto mb-3" id="sidebar-preview">
                                @if($admin->picture)
                                <img src="{{ $admin->profile_picture }}" alt="{{ __('admin/profile.alt.preview') }}" class="avatar-lg rounded-circle">
                                @else
                                <span class="avatar-title rounded-circle bg-primary-subtle text-primary fs-2" id="initials-preview">
                                    {{ strtoupper(substr($admin->firstname, 0, 1)) }}{{ strtoupper(substr($admin->lastname, 0, 1)) }}
                                </span>
                                @endif
                            </div>
                            <h6 class="mb-1" id="name-preview">{{ $admin->full_name }}</h6>
                            <p class="text-muted mb-3" id="email-preview">{{ $admin->email }}</p>
                            <span class="badge bg-success-subtle text-success">
                                <i class="ri-user-settings-line me-1"></i>{{ $admin->role_display_name }}
                            </span>
                        </div>
                    </div>

                    <!-- Informations système -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">{{ __('admin/profile.sections.information') }}</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-2">
                                <small class="text-muted">{{ __('admin/profile.fields.admin_id') }}:</small>
                                <div><span class="badge bg-primary-subtle text-primary">#{{ $admin->id }}</span></div>
                            </div>
                            <div class="mb-2">
                                <small class="text-muted">{{ __('admin/profile.fields.role') }}:</small>
                                <div>{{ $admin->role_display_name }}</div>
                            </div>
                            <div class="mb-2">
                                <small class="text-muted">{{ __('admin/profile.fields.created_at') }}:</small>
                                <div>{{ $admin->created_at->format('d/m/Y à H:i') }}</div>
                            </div>
                            <div class="mb-2">
                                <small class="text-muted">{{ __('admin/profile.fields.updated_at') }}:</small>
                                <div>{{ $admin->updated_at->format('d/m/Y à H:i') }}</div>
                            </div>
                            @if($admin->last_login_at)
                            <div class="mb-2">
                                <small class="text-muted">{{ __('admin/profile.fields.last_login') }}:</small>
                                <div>{{ $admin->last_login_at->format('d/m/Y à H:i') }}</div>
                            </div>
                            @endif
                        </div>
                    </div>

                    <!-- Actions de sécurité -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">{{ __('admin/profile.sections.security') }}</h5>
                        </div>
                        <div class="card-body">
                            <div class="d-grid gap-2">
                                <a href="{{ route('admin.profile.password') }}" class="btn btn-outline-warning">
                                    <i class="ri-key-line me-1"></i>{{ __('admin/profile.buttons.change_password') }}
                                </a>
                                <a href="{{ route('admin.profile.2fa') }}" class="btn btn-outline-info">
                                    <i class="ri-shield-line me-1"></i>{{ __('admin/profile.security.2fa_label') }}
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Aide -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">{{ __('admin/profile.sections.tips') }}</h5>
                        </div>
                        <div class="card-body">
                            <div class="alert alert-info mb-0">
                                <i class="ri-lightbulb-line me-2"></i>
                                <strong>{{ __('admin/profile.tips.best_practices') }}:</strong>
                                <ul class="mb-0 mt-2">
                                    <li>{{ __('admin/profile.tips.professional_photo') }}</li>
                                    <li>{{ __('admin/profile.tips.keep_updated') }}</li>
                                    <li>{{ __('admin/profile.tips.change_password') }}</li>
                                    <li>{{ __('admin/profile.tips.enable_2fa') }}</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

@endsection

@push('script')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // const form = document.getElementById('profile-form');
    // const submitBtn = document.getElementById('saveprofile');
    // const originalContent = submitBtn.innerHTML;
    
    // Champs du formulaire
    const firstnameInput = document.getElementById('firstname');
    const lastnameInput = document.getElementById('lastname');
    const emailInput = document.getElementById('email');
    const pictureInput = document.getElementById('picture');
    const removePictureBtn = document.getElementById('remove-picture');
    const removePictureInput = document.getElementById('remove_picture_input');
    
    // Éléments d'aperçu
    const profilePreview = document.getElementById('profile-preview');
    const sidebarPreview = document.getElementById('sidebar-preview');
    const namePreview = document.getElementById('name-preview');
    const emailPreview = document.getElementById('email-preview');
    const initialsPreview = document.getElementById('initials-preview');

    // Mise à jour de l'aperçu du nom
    function updateNamePreview() {
        const firstname = firstnameInput.value.trim();
        const lastname = lastnameInput.value.trim();
        const fullName = `${firstname} ${lastname}`.trim();
        
        if (namePreview) {
            namePreview.textContent = fullName || '{{ __("admin/profile.placeholders.full_name") }}';
        }
        
        // Mise à jour des initiales
        if (initialsPreview) {
            const initials = (firstname.charAt(0) + lastname.charAt(0)).toUpperCase();
            initialsPreview.textContent = initials || '{{ __("admin/profile.placeholders.initials") }}';
        }
    }

    // Mise à jour de l'aperçu de l'email
    function updateEmailPreview() {
        const email = emailInput.value.trim();
        if (emailPreview) {
            emailPreview.textContent = email || '{{ __("admin/profile.placeholders.email") }}';
        }
    }

    // Aperçu de l'image
    function previewImage(file) {
        if (file && file.type.startsWith('image/')) {
            const reader = new FileReader();
            reader.onload = function(e) {
                // Mettre à jour l'aperçu principal
                if (profilePreview) {
                    if (profilePreview.tagName === 'IMG') {
                        profilePreview.src = e.target.result;
                    } else {
                        // Remplacer le div par une image
                        const newImg = document.createElement('img');
                        newImg.src = e.target.result;
                        newImg.alt = '{{ __("admin/profile.alt.preview") }}';
                        newImg.className = 'avatar-xl rounded-circle border';
                        newImg.id = 'profile-preview';
                        profilePreview.parentNode.replaceChild(newImg, profilePreview);
                    }
                }
                
                // Mettre à jour l'aperçu sidebar
                if (sidebarPreview) {
                    const existingImg = sidebarPreview.querySelector('img');
                    if (existingImg) {
                        existingImg.src = e.target.result;
                    } else {
                        // Remplacer le contenu par une image
                        sidebarPreview.innerHTML = `<img src="${e.target.result}" alt="{{ __('admin/profile.alt.preview') }}" class="avatar-lg rounded-circle">`;
                    }
                }
            };
            reader.readAsDataURL(file);
        }
    }

    // Event listeners
    if (firstnameInput && lastnameInput) {
        firstnameInput.addEventListener('input', updateNamePreview);
        lastnameInput.addEventListener('input', updateNamePreview);
    }
    
    if (emailInput) {
        emailInput.addEventListener('input', updateEmailPreview);
    }
    
    if (pictureInput) {
        pictureInput.addEventListener('change', function() {
            const file = this.files[0];
            if (file) {
                // Vérifier la taille du fichier (2MB max)
                const maxSize = 2 * 1024 * 1024; // 2MB en bytes
                if (file.size > maxSize) {
                    alert('{{ __("admin/profile.errors.file_too_large") }}');
                    this.value = '';
                    return;
                }
                
                // Vérifier le type de fichier
                const allowedTypes = ['image/jpeg', 'image/png', 'image/jpg', 'image/gif'];
                if (!allowedTypes.includes(file.type)) {
                    alert('{{ __("admin/profile.errors.invalid_file_type") }}');
                    this.value = '';
                    return;
                }
                
                previewImage(file);
                
                // Réinitialiser le flag de suppression si une nouvelle image est sélectionnée
                if (removePictureInput) {
                    removePictureInput.value = '0';
                }
            }
        });
    }
    
    // Supprimer la photo
    if (removePictureBtn && removePictureInput) {
        removePictureBtn.addEventListener('click', function() {
            if (confirm('{{ __("admin/profile.messages.confirm_delete_picture") }}')) {
                removePictureInput.value = '1';
                
                // Réinitialiser l'input file
                if (pictureInput) {
                    pictureInput.value = '';
                }
                
                // Remplacer l'image par les initiales
                const firstname = firstnameInput.value.trim();
                const lastname = lastnameInput.value.trim();
                const initials = (firstname.charAt(0) + lastname.charAt(0)).toUpperCase();
                
                // Aperçu principal
                if (profilePreview && profilePreview.tagName === 'IMG') {
                    const newDiv = document.createElement('div');
                    newDiv.className = 'avatar-xl mx-auto border rounded-circle d-flex align-items-center justify-content-center bg-light';
                    newDiv.id = 'profile-preview';
                    newDiv.innerHTML = `<span class="text-muted fs-2">${initials}</span>`;
                    profilePreview.parentNode.replaceChild(newDiv, profilePreview);
                }
                
                // Aperçu sidebar
                if (sidebarPreview) {
                    sidebarPreview.innerHTML = `<span class="avatar-title rounded-circle bg-primary-subtle text-primary fs-2" id="initials-preview">${initials}</span>`;
                }
                
                // Masquer le bouton de suppression
                this.style.display = 'none';
            }
        });
    }

    const validator = new MultilingualFormValidator({
        formId: 'profile-form',
        submitBtnId: 'saveprofile',
        
        // Champs multilingues requis (title_fr, title_en, content_fr, content_en, etc.)
        fields: [],
        
        // Champs simples requis (si vous en avez)
        singleFields: ['firstname', 'lastname', 'email'],
        
        alertMessage: "{{ __('admin/profile.errors.fill_all_required_fields') }}",
        loadingText: "{{ __('admin/profile.buttons.saving') }}",
        debug: false,
        
        onBeforeSubmit: function() {
            let isValid = true;
            // Validation de l'email
            const email = emailInput.value.trim();
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (email && !emailRegex.test(email)) {
                emailInput.classList.add('is-invalid');
                isValid = false;
            }            
            return isValid;
        }
    });     

    // Initialisation
    updateNamePreview();
    updateEmailPreview();
});
</script>
@endpush