Lectures/assets/js/options.js

document.addEventListener('DOMContentLoaded', function() {
    // Configuration de l'éditeur Quill
    const aboutEditor = new Quill('#aboutEditor', {
        theme: 'snow',
        modules: {
            toolbar: {
                container: [
                    [{ 'header': [1, 2, 3, false] }],
                    ['bold', 'italic', 'underline', 'strike'],
                    [{ 'color': [] }, { 'background': [] }],
                    [{ 'font': [] }],
                    [{ 'align': [] }],
                    ['blockquote', 'code-block'],
                    [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                    [{ 'script': 'sub'}, { 'script': 'super' }],
                    [{ 'indent': '-1'}, { 'indent': '+1' }],
                    [{ 'direction': 'rtl' }],
                    ['link', 'image', 'video'],
                    ['clean']
                ],
                handlers: {
                    image: function() {
                        const input = document.createElement('input');
                        input.setAttribute('type', 'file');
                        input.setAttribute('accept', 'image/*');
                        input.click();
                
                        input.onchange = async () => {
                            const file = input.files[0];
                            if (file) {
                                const formData = new FormData();
                                formData.append('image', file);
                
                                try {
                                    const response = await fetch('api/about-image-upload.php', {
                                        method: 'POST',
                                        body: formData
                                    });
                
                                    if (!response.ok) throw new Error('Upload failed');
                
                                    const result = await response.json();
                                    if (result.success) {
                                        const range = aboutEditor.getSelection(true);
                                        // Utiliser le chemin complet pour l'affichage
                                        aboutEditor.insertEmbed(range.index, 'image', '../' + result.storage_url);
                                        
                                        // Mettre à jour le contenu Delta si nécessaire
                                        const insertOp = aboutEditor.getContents().ops.find(op => 
                                            op.insert && op.insert.image === '../' + result.storage_url
                                        );
                                        if (insertOp) {
                                            // Stocker le chemin relatif
                                            insertOp.insert.image = result.storage_url;
                                        }
                                        
                                        aboutEditor.setSelection(range.index + 1);
                                    } else {
                                        showNotification(result.error || 'Erreur lors de l\'upload', 'error');
                                    }
                                } catch (error) {
                                    console.error('Error:', error);
                                    showNotification('Erreur lors de l\'upload de l\'image', 'error');
                                }
                            }
                        };
                    }
                }
            }
        },
        placeholder: 'Commencez à écrire le contenu de la page À propos...'
    });

    // Initialisation du contenu si existant
    const editorElement = document.getElementById('aboutEditor');
    const initialContent = editorElement.getAttribute('data-initial-content');
    if (initialContent) {
        aboutEditor.root.innerHTML = initialContent;
    }

    // Gestion des prévisualisations d'images
    function handleImagePreview(inputId, previewClass) {
        const input = document.getElementById(inputId);
        if (!input) return;

        input.addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    let previewContainer = input.parentElement.querySelector('.' + previewClass);
                    if (!previewContainer) {
                        previewContainer = document.createElement('div');
                        previewContainer.className = previewClass;
                        input.parentElement.insertBefore(previewContainer, input.nextSibling);
                    }
                    previewContainer.innerHTML = `<img src="${e.target.result}" alt="Aperçu">`;
                };
                reader.readAsDataURL(file);
            }
        });
    }

    // Initialisation des prévisualisations
    handleImagePreview('site_logo', 'current-logo');
    handleImagePreview('about_background', 'current-background');

    // Gestion des liens personnalisés
    const customLinks = document.getElementById('customLinks');
    const addLinkBtn = document.getElementById('addLink');

    // Ajout d'un nouveau lien
    addLinkBtn.addEventListener('click', function() {
        const index = customLinks.children.length;
        const linkItem = document.createElement('div');
        linkItem.className = 'link-item';
        linkItem.innerHTML = `
            <div class="form-group">
                <label>Titre du lien</label>
                <input type="text" name="links[${index}][title]" required>
            </div>
            <div class="form-group">
                <label>URL</label>
                <input type="text" name="links[${index}][url]" required>
            </div>
            <div class="form-group">
                <label>
                    <input type="checkbox" name="links[${index}][target]" value="_blank">
                    Ouvrir dans un nouvel onglet
                </label>
            </div>
            <button type="button" class="button dark remove-link">Supprimer ce lien</button>
        `;
        customLinks.appendChild(linkItem);
    });

    // Suppression d'un lien
    customLinks.addEventListener('click', function(e) {
        if (e.target.matches('.remove-link')) {
            const linkItem = e.target.closest('.link-item');
            confirmDialog.show({
                title: 'Supprimer le lien',
                message: 'Êtes-vous sûr de vouloir supprimer ce lien ?',
                confirmText: 'Supprimer',
                confirmClass: 'danger',
                onConfirm: () => {
                    linkItem.remove();
                    // Réindexer les champs
                    customLinks.querySelectorAll('.link-item').forEach((item, index) => {
                        item.querySelectorAll('input').forEach(input => {
                            const name = input.getAttribute('name');
                            input.setAttribute('name', name.replace(/\[\d+\]/, `[${index}]`));
                        });
                    });
                }
            });
        }
    });

    // Mise à jour du champ caché avant la soumission
    document.querySelector('form').addEventListener('submit', function() {
        document.querySelector('#about_content').value = aboutEditor.root.innerHTML;
    });

    // Détection des changements non sauvegardés
    const form = document.querySelector('form');
    const initialState = new FormData(form).toString();
    
    window.addEventListener('beforeunload', (e) => {
        if (new FormData(form).toString() !== initialState) {
            e.preventDefault();
            e.returnValue = '';
        }
    });

    // Fonction utilitaire pour les notifications
    function showNotification(message, type = 'success') {
        const notification = document.createElement('div');
        notification.className = `notification ${type}`;
        notification.textContent = message;
        
        document.body.appendChild(notification);
        
        setTimeout(() => {
            notification.style.opacity = '1';
            notification.style.transform = 'translateY(0)';
        }, 10);
        
        setTimeout(() => {
            notification.style.opacity = '0';
            notification.style.transform = 'translateY(-100%)';
            setTimeout(() => notification.remove(), 300);
        }, 3000);
    }
});