{% extends 'base.html' %}

{% block title %}Gestion des Sous-catégories - Administration{% endblock %}

{% block styles %}
<style>
    .sous-categorie-row {
        transition: background-color 0.3s ease;
    }
    
    .sous-categorie-row:hover {
        background-color: rgba(52, 152, 219, 0.1);
    }
    
    .color-badge {
        display: inline-block;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        margin-right: 8px;
    }
    
    .filter-container {
        background-color: var(--block-bg);
        padding: 15px;
        border-radius: 8px;
        margin-bottom: 20px;
    }
    
    .matiere-container {
        margin-top: 30px;
        border-left: 3px solid var(--primary-color);
        padding-left: 15px;
    }
</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 active">
                        <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">
                        <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 Sous-catégories</h2>
            
            <div class="row mb-4">
                <!-- Add Sous-Categorie Section -->
                <div id="add-sous-categorie-section" class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <h4><i class="fas fa-plus-circle"></i> Ajouter une sous-catégorie</h4>
                        </div>
                        <div class="card-body">
                            <form method="POST" action="{{ url_for('admin_bp.sous_categories') }}">
                                <input type="hidden" name="action" value="add">
                                
                                <div class="form-group mb-3">
                                    <label for="matiere_id">Matière</label>
                                    <select class="form-control" id="matiere_id" name="matiere_id" required>
                                        <option value="">Sélectionnez une matière</option>
                                        {% for matiere in matieres %}
                                        <option value="{{ matiere.id }}">{{ matiere.nom }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                
                                <div class="form-group mb-3">
                                    <label for="nom">Nom de la sous-catégorie</label>
                                    <input type="text" class="form-control" id="nom" name="nom" required>
                                </div>
                                
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save"></i> Ajouter
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
                
                <!-- Edit Sous-Categorie Section (initially hidden) -->
                <div id="edit-sous-categorie-section" class="col-md-6 d-none">
                    <div class="card">
                        <div class="card-header">
                            <h4><i class="fas fa-edit"></i> Modifier une sous-catégorie</h4>
                        </div>
                        <div class="card-body">
                            <form id="edit-sous-categorie-form" method="POST" action="{{ url_for('admin_bp.sous_categories') }}">
                                <input type="hidden" name="action" value="edit">
                                <input type="hidden" name="sous_categorie_id" value="">
                                
                                <div class="form-group mb-3">
                                    <label for="edit-matiere_id">Matière</label>
                                    <select class="form-control" id="edit-matiere_id" name="matiere_id" required>
                                        {% for matiere in matieres %}
                                        <option value="{{ matiere.id }}">{{ matiere.nom }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                
                                <div class="form-group mb-3">
                                    <label for="edit-nom">Nom de la sous-catégorie</label>
                                    <input type="text" class="form-control" id="edit-nom" name="nom" required>
                                </div>
                                
                                <div class="btn-group">
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-save"></i> Mettre à jour
                                    </button>
                                    <button type="button" id="cancel-edit-sous-categorie" class="btn btn-secondary">
                                        <i class="fas fa-times"></i> Annuler
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Filter by Matiere -->
            <div class="filter-container mb-4">
                <div class="row align-items-center">
                    <div class="col-md-3">
                        <label for="matiere-filter" class="form-label mb-0"><strong>Filtrer par matière :</strong></label>
                    </div>
                    <div class="col-md-9">
                        <select id="matiere-filter" class="form-select">
                            <option value="">Toutes les matières</option>
                            {% for matiere in matieres %}
                            <option value="{{ matiere.id }}">{{ matiere.nom }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
            </div>
            
            <!-- List of Sous-Categories -->
            <div class="card">
                <div class="card-header">
                    <h4><i class="fas fa-list"></i> Liste des sous-catégories</h4>
                </div>
                <div class="card-body">
                    {% if sous_categories %}
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>Matière</th>
                                        <th>Sous-catégorie</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for sous_categorie in sous_categories %}
                                    <tr class="sous-categorie-row" data-matiere-id="{{ sous_categorie.matiere.id }}">
                                        <td>
                                            <span class="color-badge" style="background-color: {{ sous_categorie.matiere.color_code }};"></span>
                                            {{ sous_categorie.matiere.nom }}
                                        </td>
                                        <td>{{ sous_categorie.nom }}</td>
                                        <td>
                                            <button class="btn btn-sm btn-primary edit-sous-categorie-btn" 
                                                    data-id="{{ sous_categorie.id }}" 
                                                    data-name="{{ sous_categorie.nom }}" 
                                                    data-matiere-id="{{ sous_categorie.matiere.id }}">
                                                <i class="fas fa-edit"></i> Modifier
                                            </button>
                                            <form method="POST" action="{{ url_for('admin_bp.sous_categories') }}" style="display: inline-block" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer cette sous-catégorie ? Tous les textes associés seront également supprimés.')">
                                                <input type="hidden" name="action" value="delete">
                                                <input type="hidden" name="sous_categorie_id" value="{{ sous_categorie.id }}">
                                                <button type="submit" class="btn btn-sm btn-danger">
                                                    <i class="fas fa-trash"></i> Supprimer
                                                </button>
                                            </form>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% else %}
                        <div class="alert alert-info">
                            Aucune sous-catégorie n'a été ajoutée. Utilisez le formulaire ci-dessus pour créer votre première sous-catégorie.
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

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