{% extends 'base.html' %}

{% block title %}Gestion des Textes - Administration{% endblock %}

{% block styles %}
<style>
    .texte-card {
        background-color: var(--card-bg);
        border-radius: 8px;
        padding: 16px;
        margin-bottom: 16px;
        box-shadow: var(--shadow);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        border-left: 5px solid var(--primary-color);
    }
    
    .texte-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--hover-shadow);
    }
    
    .texte-actions {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
        margin-top: 10px;
    }
    
    .accordion-button:not(.collapsed) {
        background-color: var(--block-bg);
        color: var(--text-color);
    }
    
    .matiere-header {
        padding: 10px 15px;
        margin: 10px 0;
        border-radius: 5px;
        color: white;
    }
    
    .sous-categorie-header {
        padding: 8px 15px;
        border-radius: 5px;
        background-color: var(--block-bg);
        margin: 10px 0;
    }
    
    .date-info {
        font-size: 12px;
        color: var(--muted-color);
    }
</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">Gestion des Textes</h2>
            
            <!-- Add New Text Button -->
            <div class="mb-4">
                <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#addTextCollapse" aria-expanded="false" aria-controls="addTextCollapse">
                    <i class="fas fa-plus-circle"></i> Ajouter un nouveau texte
                </button>
            </div>
            
            <!-- Add Text Form (Collapsible) -->
            <div class="collapse mb-4" id="addTextCollapse">
                <div class="card">
                    <div class="card-header">
                        <h4><i class="fas fa-plus-circle"></i> Nouveau texte</h4>
                    </div>
                    <div class="card-body">
                        <form method="POST" action="{{ url_for('admin_bp.textes') }}">
                            <input type="hidden" name="action" value="add">
                            
                            <div class="form-group mb-3">
                                <label for="titre">Titre</label>
                                <input type="text" class="form-control" id="titre" name="titre" required>
                            </div>
                            
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="matiere-select">Matière</label>
                                        <select class="form-control" id="matiere-select" required>
                                            <option value="">Sélectionnez une matière</option>
                                            {% for matiere in matieres %}
                                            <option value="{{ matiere.id }}">{{ matiere.nom }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="sous-categorie-select">Sous-catégorie</label>
                                        <select class="form-control" id="sous-categorie-select" name="sous_categorie_id" required>
                                            <option value="">Sélectionnez d'abord une matière</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="form-group mb-3">
                                <label for="contenu">Contenu</label>
                                <textarea class="form-control" id="contenu" name="contenu" rows="10" required></textarea>
                                <small class="form-text text-muted">
                                    Séparez les paragraphes par des lignes vides. Les titres des blocs peuvent être indiqués sur une ligne séparée et seront automatiquement détectés.
                                </small>
                            </div>
                            
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i> Créer et éditer
                            </button>
                        </form>
                    </div>
                </div>
            </div>
            
            <!-- List of Textes -->
            <div class="card">
                <div class="card-header">
                    <h4><i class="fas fa-file-alt"></i> Liste des textes</h4>
                </div>
                <div class="card-body">
                    {% if grouped_textes %}
                        <div class="accordion" id="textesAccordion">
                            {% for matiere_id, matiere_data in grouped_textes.items() %}
                            <div class="accordion-item mb-3">
                                <h2 class="accordion-header" id="heading{{ matiere_id }}">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ matiere_id }}" aria-expanded="false" aria-controls="collapse{{ matiere_id }}" style="background-color: {{ matiere_data.color }}; color: white;">
                                        <i class="fas fa-book me-2"></i> {{ matiere_data.nom }}
                                    </button>
                                </h2>
                                <div id="collapse{{ matiere_id }}" class="accordion-collapse collapse" aria-labelledby="heading{{ matiere_id }}" data-bs-parent="#textesAccordion">
                                    <div class="accordion-body">
                                        {% for sous_cat_id, sous_cat_data in matiere_data.sous_categories.items() %}
                                        <div class="sous-categorie-group">
                                            <div class="sous-categorie-header" style="border-left: 5px solid {{ matiere_data.color }};">
                                                <i class="fas fa-list-ul me-2"></i> {{ sous_cat_data.nom }}
                                            </div>
                                            
                                            <div class="row">
                                                {% for texte in sous_cat_data.textes %}
                                                <div class="col-md-6 mb-3">
                                                    <div class="texte-card" style="border-left-color: {{ matiere_data.color }};">
                                                        <h5>{{ texte.titre }}</h5>
                                                        <p class="date-info">
                                                            Dernière mise à jour: {{ texte.updated_at.strftime('%d/%m/%Y à %H:%M') }}
                                                        </p>
                                                        <div class="texte-actions">
                                                            <a href="{{ url_for('admin_bp.edit_texte', texte_id=texte.id) }}" class="btn btn-sm btn-primary">
                                                                <i class="fas fa-edit"></i> Éditer
                                                            </a>
                                                            <a href="{{ url_for('admin_bp.historique', texte_id=texte.id) }}" class="btn btn-sm btn-info">
                                                                <i class="fas fa-history"></i> Historique
                                                            </a>
                                                            <form method="POST" action="{{ url_for('admin_bp.textes') }}" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer ce texte ?')">
                                                                <input type="hidden" name="action" value="delete">
                                                                <input type="hidden" name="texte_id" value="{{ texte.id }}">
                                                                <button type="submit" class="btn btn-sm btn-danger">
                                                                    <i class="fas fa-trash"></i>
                                                                </button>
                                                            </form>
                                                        </div>
                                                    </div>
                                                </div>
                                                {% endfor %}
                                            </div>
                                        </div>
                                        {% endfor %}
                                    </div>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                    {% else %}
                        <div class="alert alert-info">
                            Aucun texte n'a été ajouté. Utilisez le formulaire ci-dessus pour créer votre premier texte.
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/admin.js') }}"></script>
{% endblock %}