{% extends 'base.html' %}

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

{% block styles %}
<style>
    .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);
    }
    
    .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;
    }
    
    .gallery-image {
        transition: transform 0.2s;
        cursor: pointer;
    }
    
    .gallery-image:hover {
        transform: scale(1.05);
    }
</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="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 et une image.
                        Vous pouvez réorganiser les blocs en les faisant glisser.
                    </p>
                    
                    <form id="blocks-form" method="POST" action="{{ url_for('admin_bp.edit_texte', texte_id=texte.id) }}">
                        <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">
                                            <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="block-{{ block.id }}-content">Contenu du bloc</label>
                                    <textarea class="form-control block-content" id="block-{{ block.id }}-content" rows="5">{{ block.content or '' }}</textarea>
                                </div>
                                <div class="form-group">
                                    <label>Image</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 '' }}">
                                    
                                    {% if block.image %}
                                    <div class="block-image-container">
                                        <img src="{{ block.image.src }}" alt="{{ block.image.alt }}" class="image-preview">
                                    </div>
                                    {% else %}
                                    <img src="" alt="Preview" class="image-preview" style="display:none;">
                                    {% endif %}
                                    
                                    <div class="form-group mt-3">
                                        <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 modifications
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            
            <!-- Image Upload Section -->
            <div class="card mb-4">
                <div class="card-header">
                    <h4>Ajouter une nouvelle image</h4>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ url_for('admin_bp.edit_texte', texte_id=texte.id) }}" enctype="multipart/form-data">
                        <input type="hidden" name="action" value="upload_image">
                        
                        <div class="form-group mb-3">
                            <label for="image">Sélectionner une image</label>
                            <input type="file" class="form-control" id="image" 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">
                        </div>
                        
                        <button type="submit" class="btn btn-success">
                            <i class="fas fa-upload"></i> Télécharger l'image
                        </button>
                    </form>
                </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-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="imageGalleryModalLabel">Sélectionner une image</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    {% for image in images %}
                    <div class="col-md-3 col-sm-4 col-6 mb-3">
                        <div class="gallery-item" data-image-id="{{ image.id }}">
                            <img src="{{ image.src }}" alt="{{ image.alt }}" class="gallery-image img-fluid">
                        </div>
                    </div>
                    {% else %}
                    <div class="col-12">
                        <div class="alert alert-info">
                            Aucune image disponible. Veuillez en télécharger une.
                        </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/sortablejs@1.14.0/Sortable.min.js"></script>
<script src="{{ url_for('static', filename='js/admin.js') }}"></script>
{% endblock %}