api/templates/admin/edit_texte.html

{% extends 'base.html' %}

{% block title %}Éditer {{ texte.titre }} - Administration{% endblock %}

{% block styles %}
<style>
    /* Quill editor needs some height */
    .ql-container { min-height: 150px; }

    .block-editor {
        position: relative;
        transition: all 0.3s ease;
    }

    .block-ghost {
        opacity: 0.5;
        background: var(--primary-color);
    }

    .block-handle {
        cursor: move;
        color: var(--muted-color);
        padding-right: 10px; /* Add some space next to handle */
    }

    .image-position-example {
        padding: 10px;
        border: 1px dashed var(--border-color);
        margin-top: 10px;
        border-radius: 4px;
    }

    .block-image-container {
        margin-bottom: 15px;
    }

    .image-preview {
        max-height: 150px;
        object-fit: contain;
        border-radius: 4px;
        border: 1px solid var(--border-color);
        background-color: var(--background-color);
    }

    .gallery-image {
        transition: transform 0.2s;
        cursor: pointer;
        border: 1px solid var(--border-color);
        padding: 5px;
        border-radius: 4px;
    }

    .gallery-image:hover {
        transform: scale(1.05);
        border-color: var(--primary-color);
    }

    /* Style adjustments for Quill within the block */
    .block-content-editor {
        background-color: var(--input-bg); /* Match theme */
        border-radius: 4px; /* Match form controls */
        margin-bottom: 5px; /* Space between editor and hidden input if needed */
    }

    /* Style the block editor structure */
    .block-editor {
        background-color: var(--card-bg);
        padding: 20px;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        box-shadow: var(--shadow);
    }
    .block-editor-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--border-color);
    }
    .block-editor-title {
        margin: 0;
        font-size: 1.2rem;
        font-weight: 600;
    }
    .delete-block-btn i {
        pointer-events: none; /* Ensure clicking icon triggers button */
    }
    .ml-2 { /* Simple margin helper */
        margin-left: 0.5rem !important;
    }
</style>
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-3">
        <div class="admin-sidebar">
            <h3 class="mb-3">Administration</h3>
            <ul class="admin-nav">
                <li class="admin-nav-item">
                    <a href="{{ url_for('admin_bp.dashboard') }}" class="admin-nav-link">
                        <i class="fas fa-tachometer-alt"></i> Tableau de bord
                    </a>
                </li>
                <li class="admin-nav-item">
                    <a href="{{ url_for('admin_bp.matieres') }}" class="admin-nav-link">
                        <i class="fas fa-book"></i> Matières
                    </a>
                </li>
                <li class="admin-nav-item">
                    <a href="{{ url_for('admin_bp.sous_categories') }}" class="admin-nav-link">
                        <i class="fas fa-list"></i> Sous-catégories
                    </a>
                </li>
                <li class="admin-nav-item">
                    <a href="{{ url_for('admin_bp.textes') }}" class="admin-nav-link active">
                        <i class="fas fa-file-alt"></i> Textes
                    </a>
                </li>
                <li class="admin-nav-item">
                    <a href="{{ url_for('admin_bp.images') }}" class="admin-nav-link">
                        <i class="fas fa-images"></i> Images
                    </a>
                </li>
                <li class="admin-nav-item">
                    <a href="{{ url_for('admin_bp.logout') }}" class="admin-nav-link">
                        <i class="fas fa-sign-out-alt"></i> Déconnexion
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <div class="col-md-9">
        <div class="admin-container">
            <h2 class="admin-title">Éditer la méthodologie : {{ texte.titre }}</h2>

            <div class="mb-4">
                <a href="{{ url_for('admin_bp.textes') }}" class="btn btn-secondary mb-3">
                    <i class="fas fa-arrow-left"></i> Retour à la liste
                </a>
                <a href="{{ url_for('admin_bp.historique', texte_id=texte.id) }}" class="btn btn-info mb-3">
                    <i class="fas fa-history"></i> Voir l'historique
                </a>
            </div>

            <!-- Basic Information Form -->
            <div class="card mb-4">
                <div class="card-header">
                    <h4>Informations de base</h4>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ url_for('admin_bp.edit_texte', texte_id=texte.id) }}">
                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/> {# Add CSRF token if using Flask-WTF #}
                        <input type="hidden" name="action" value="update_basic">

                        <div class="form-group mb-3">
                            <label for="titre">Titre</label>
                            <input type="text" class="form-control" id="titre" name="titre" value="{{ texte.titre }}" required>
                        </div>

                        <div class="form-group mb-3">
                            <label for="sous_categorie_id">Sous-catégorie</label>
                            <select class="form-control" id="sous_categorie_id" name="sous_categorie_id" required>
                                {% for sc in sous_categories %}
                                <option value="{{ sc.id }}" {% if sc.id == texte.sous_categorie_id %}selected{% endif %}>
                                    {{ sc.matiere.nom }} - {{ sc.nom }}
                                </option>
                                {% endfor %}
                            </select>
                        </div>

                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save"></i> Mettre à jour les informations
                        </button>
                    </form>
                </div>
            </div>

            <!-- Content Blocks Editor -->
            <div class="card mb-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4>Blocs de contenu</h4>
                    <button id="add-block-button" class="btn btn-success">
                        <i class="fas fa-plus"></i> Ajouter un bloc
                    </button>
                </div>
                <div class="card-body">
                    <p class="text-muted mb-4">
                        Organisez votre contenu en blocs distincts. Chaque bloc peut contenir un titre, du texte riche et une image.
                        Vous pouvez réorganiser les blocs en les faisant glisser (<i class="fas fa-grip-vertical"></i>).
                    </p>

                    <form id="blocks-form" method="POST" action="{{ url_for('admin_bp.edit_texte', texte_id=texte.id) }}">
                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/> {# Add CSRF token if using Flask-WTF #}
                        <input type="hidden" name="action" value="update_blocks">
                        <input type="hidden" id="blocks-data" name="blocks_data" value="">

                        <div id="blocks-container">
                            {% for block in blocks %}
                            <div class="block-editor mb-4" data-block-id="{{ block.id }}">
                                <div class="block-editor-header">
                                    <div class="d-flex align-items-center">
                                        <span class="block-handle"><i class="fas fa-grip-vertical"></i></span>
                                        <h3 class="block-editor-title">Bloc #{{ loop.index }}</h3>
                                    </div>
                                    <div class="block-editor-actions">
                                        <button type="button" class="btn btn-danger btn-sm delete-block-btn" title="Supprimer ce bloc">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="form-group mb-3">
                                    <label for="block-{{ block.id }}-title">Titre du bloc (optionnel)</label>
                                    <input type="text" class="form-control block-title" id="block-{{ block.id }}-title" value="{{ block.title or '' }}">
                                </div>
                                <div class="form-group mb-3">
                                    <label for="quill-editor-{{ block.id }}">Contenu du bloc</label>
                                    <!-- Quill editor container -->
                                    <div id="quill-editor-{{ block.id }}" class="block-content-editor">
                                        {{ block.content|safe if block.content else '' }}
                                    </div>
                                    <!-- Hidden input to store Quill's HTML content -->
                                    <input type="hidden" class="block-content-hidden" id="block-{{ block.id }}-content" value="{{ block.content or '' }}">
                                </div>
                                <div class="form-group">
                                    <label>Image (optionnel)</label>
                                    <div class="d-flex align-items-center mb-2">
                                        <button type="button" class="btn btn-primary btn-sm select-image-btn" {% if block.image %}style="display:none;"{% endif %}>
                                            <i class="fas fa-image"></i> Sélectionner une image
                                        </button>
                                        <button type="button" class="btn btn-warning btn-sm remove-image-btn ml-2" {% if not block.image %}style="display:none;"{% endif %}>
                                            <i class="fas fa-times"></i> Retirer l'image
                                        </button>
                                    </div>
                                    <input type="hidden" class="block-image-id" value="{{ block.image.id if block.image else '' }}">

                                    <div class="block-image-container">
                                        {% if block.image %}
                                        <img src="{{ block.image.src }}" alt="{{ block.image.alt or 'Prévisualisation' }}" class="image-preview">
                                        {% else %}
                                        <img src="" alt="Preview" class="image-preview" style="display:none;">
                                        {% endif %}
                                    </div>

                                    <div class="form-group mt-3 {% if not block.image %}d-none{% endif %} image-position-controls"> {# Hide position if no image #}
                                        <label for="block-{{ block.id }}-image-position">Position de l'image</label>
                                        <select class="form-control image-position-select" id="block-{{ block.id }}-image-position">
                                            <option value="left" {% if block.image_position == 'left' %}selected{% endif %}>Gauche</option>
                                            <option value="right" {% if block.image_position == 'right' %}selected{% endif %}>Droite</option>
                                            <option value="top" {% if block.image_position == 'top' %}selected{% endif %}>Haut</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            {% endfor %}
                        </div>

                        <div class="mt-4 text-center">
                            <button type="button" id="save-blocks-button" class="btn btn-primary btn-lg">
                                <i class="fas fa-save"></i> Enregistrer les blocs
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Image Upload Section -->
            <div class="card mb-4">
                <div class="card-header">
                    <h4>Ajouter une nouvelle image (Galerie)</h4>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ url_for('admin_bp.upload_image_action') }}" enctype="multipart/form-data" id="image-upload-form"> {# Action points to a dedicated route #}
                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/> {# Add CSRF token if using Flask-WTF #}
                        {# Removed 'action' hidden input, handled by route #}
                        {# Removed texte_id hidden input, not needed for general upload #}

                        <div class="form-group mb-3">
                            <label for="image">Sélectionner une image</label>
                            <input type="file" class="form-control" id="image-file" name="image" accept="image/*" required>
                        </div>

                        <div class="form-group mb-3">
                            <label for="alt_text">Texte alternatif (pour l'accessibilité)</label>
                            <input type="text" class="form-control" id="alt_text" name="alt_text" placeholder="Description de l'image" required>
                        </div>

                         <img id="upload-image-preview" src="#" alt="Image Preview" style="display: none; max-height: 100px; margin-bottom: 10px;"/>


                        <button type="submit" class="btn btn-success">
                            <i class="fas fa-upload"></i> Télécharger et ajouter à la galerie
                        </button>
                    </form>
                    <div id="upload-status" class="mt-3"></div> {# For AJAX feedback #}

                    <div class="mt-3">
                        <a href="{{ url_for('admin_bp.images') }}" class="btn btn-info">
                            <i class="fas fa-images"></i> Gérer la galerie d'images
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Image Gallery Modal -->
<div class="modal fade" id="image-gallery-modal" tabindex="-1" aria-labelledby="imageGalleryModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl"> {# Larger modal for more images #}
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="imageGalleryModalLabel">Sélectionner une image de la galerie</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="image-gallery-content" class="row">
                    {# Images will be loaded here dynamically by JS or initially #}
                    {% for image in images %}
                    <div class="col-lg-2 col-md-3 col-sm-4 col-6 mb-3">
                        <div class="gallery-item text-center" data-image-id="{{ image.id }}">
                            <img src="{{ image.src }}" alt="{{ image.alt or 'Image galerie' }}" class="gallery-image img-fluid">
                            <small class="d-block mt-1 text-muted" style="word-wrap: break-word;">{{ image.alt or '(Sans description)'}}</small>
                        </div>
                    </div>
                    {% else %}
                    <div class="col-12">
                        <div class="alert alert-info">
                            Aucune image disponible dans la galerie. Veuillez en télécharger une via la section ci-dessus ou la page "Images".
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<!-- Include Sortable.js for drag and drop functionality -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/Sortable.min.js"></script>

<!-- Include Quill.js -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.snow.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.js"></script>

<!-- Your Custom Admin JS -->
<script src="{{ url_for('static', filename='js/admin.js') }}"></script>

<script>
// Add specific JS for this page if needed,
// for example, handling the image upload AJAX response.

document.addEventListener('DOMContentLoaded', function() {
    // Show/Hide image position controls based on image presence
    function toggleImagePositionControls(blockEditor) {
        const imageIdInput = blockEditor.querySelector('.block-image-id');
        const positionControls = blockEditor.querySelector('.image-position-controls');
        if (positionControls) {
            if (imageIdInput && imageIdInput.value) {
                positionControls.classList.remove('d-none');
            } else {
                positionControls.classList.add('d-none');
            }
        }
    }

    // Initial check for all blocks
    document.querySelectorAll('.block-editor').forEach(toggleImagePositionControls);

    // Add event listeners to image selection/removal buttons to update controls
    document.querySelectorAll('.select-image-btn, .remove-image-btn').forEach(button => {
        button.addEventListener('click', function() {
            // Need a small delay for the image ID value to potentially update
            setTimeout(() => {
                toggleImagePositionControls(this.closest('.block-editor'));
            }, 50);
        });
    });

    // Update position controls when an image is selected from the gallery
    const galleryModal = document.getElementById('image-gallery-modal');
    if (galleryModal) {
        galleryModal.addEventListener('click', function(event) {
            const galleryItem = event.target.closest('.gallery-item');
            if (galleryItem) {
                 const targetBlockId = galleryModal.getAttribute('data-target-block');
                 const blockEditor = document.querySelector(`.block-editor[data-block-id="${targetBlockId}"]`);
                 if(blockEditor) {
                     // Delay necessary as the image selection logic in admin.js runs first
                     setTimeout(() => {
                         toggleImagePositionControls(blockEditor);
                     }, 100);
                 }
            }
        });
    }

     // Image Upload Preview
    const imageFileInput = document.getElementById('image-file');
    const imagePreview = document.getElementById('upload-image-preview');

    if(imageFileInput && imagePreview) {
        imageFileInput.addEventListener('change', function() {
            if (this.files && this.files[0]) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    imagePreview.src = e.target.result;
                    imagePreview.style.display = 'block';
                }
                reader.readAsDataURL(this.files[0]);
            } else {
                imagePreview.src = '#';
                imagePreview.style.display = 'none';
            }
        });
    }

    // Optional: AJAX Image Upload Handling (Example)
    const imageUploadForm = document.getElementById('image-upload-form');
    const uploadStatusDiv = document.getElementById('upload-status');

    if (imageUploadForm && uploadStatusDiv) {
        imageUploadForm.addEventListener('submit', function(e) {
            e.preventDefault(); // Prevent default form submission
            uploadStatusDiv.innerHTML = '<div class="alert alert-info">Téléchargement en cours...</div>';
            const formData = new FormData(this);

            fetch(this.action, { // Use the form's action URL
                method: 'POST',
                body: formData,
                headers: {
                    // No 'Content-Type': browser sets it correctly for FormData
                    'X-CSRFToken': this.querySelector('input[name="csrf_token"]').value // Send CSRF token if needed
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    uploadStatusDiv.innerHTML = `<div class="alert alert-success">Image "${data.alt}" ajoutée avec succès !</div>`;
                    // Optionally: Clear the form
                    imageUploadForm.reset();
                    if(imagePreview) imagePreview.style.display = 'none';
                    // Optionally: Refresh the image gallery modal content (more complex)
                    // You might need another fetch call to get updated gallery HTML
                    // or just add the new image data to the modal dynamically.
                    // For simplicity, we'll just notify the user.
                    alert('Image ajoutée à la galerie. Vous pouvez maintenant la sélectionner pour un bloc.');
                } else {
                    uploadStatusDiv.innerHTML = `<div class="alert alert-danger">Erreur: ${data.error || 'Impossible de télécharger l\'image.'}</div>`;
                }
            })
            .catch(error => {
                console.error('Upload error:', error);
                uploadStatusDiv.innerHTML = '<div class="alert alert-danger">Erreur lors du téléchargement. Vérifiez la console.</div>';
            });
        });
    }


});
</script>
{% endblock %}