{% extends 'base.html' %}

{% block title %}Gestion des Matières - Administration{% endblock %}

{% block styles %}
<style>
    .color-preview {
        display: inline-block;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        margin-left: 10px;
    }
    
    .color-badge {
        display: inline-block;
        width: 20px;
        height: 20px;
        border-radius: 4px;
        margin-right: 10px;
    }
    
    .matiere-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 #ddd;
    }
    
    .matiere-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--hover-shadow);
    }
    
    .matiere-actions {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
    }
</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 active">
                        <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">
                        <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 Matières</h2>
            
            <div class="row mb-4">
                <!-- Add Matiere Section -->
                <div id="add-matiere-section" class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <h4><i class="fas fa-plus-circle"></i> Ajouter une matière</h4>
                        </div>
                        <div class="card-body">
                            <form method="POST" action="{{ url_for('admin_bp.matieres') }}">
                                <input type="hidden" name="action" value="add">
                                
                                <div class="form-group mb-3">
                                    <label for="nom">Nom de la matière</label>
                                    <input type="text" class="form-control" id="nom" name="nom" required>
                                </div>
                                
                                <div class="form-group mb-3">
                                    <label for="color_code">Couleur</label>
                                    <div class="input-group">
                                        <input type="color" class="form-control form-control-color" id="color_code" name="color_code" value="#3498db">
                                        <!-- Color preview will be added by JS -->
                                    </div>
                                </div>
                                
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save"></i> Ajouter
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
                
                <!-- Edit Matiere Section (initially hidden) -->
                <div id="edit-matiere-section" class="col-md-6 d-none">
                    <div class="card">
                        <div class="card-header">
                            <h4><i class="fas fa-edit"></i> Modifier une matière</h4>
                        </div>
                        <div class="card-body">
                            <form id="edit-matiere-form" method="POST" action="{{ url_for('admin_bp.matieres') }}">
                                <input type="hidden" name="action" value="edit">
                                <input type="hidden" name="matiere_id" value="">
                                
                                <div class="form-group mb-3">
                                    <label for="edit-nom">Nom de la matière</label>
                                    <input type="text" class="form-control" id="edit-nom" name="nom" required>
                                </div>
                                
                                <div class="form-group mb-3">
                                    <label for="edit-color_code">Couleur</label>
                                    <div class="input-group">
                                        <input type="color" class="form-control form-control-color" id="edit-color_code" name="color_code" value="#3498db">
                                        <!-- Color preview will be added by JS -->
                                    </div>
                                </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-matiere" class="btn btn-secondary">
                                        <i class="fas fa-times"></i> Annuler
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- List of Matieres -->
            <div class="card">
                <div class="card-header">
                    <h4><i class="fas fa-list"></i> Liste des matières</h4>
                </div>
                <div class="card-body">
                    {% if matieres %}
                        <div class="row">
                            {% for matiere in matieres %}
                            <div class="col-md-6 mb-3">
                                <div class="matiere-card" style="border-left-color: {{ matiere.color_code }};">
                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                        <h5 class="mb-0">
                                            <span class="color-badge" style="background-color: {{ matiere.color_code }};"></span>
                                            {{ matiere.nom }}
                                        </h5>
                                    </div>
                                    <div class="small mb-2">
                                        <span class="badge bg-secondary">{{ matiere.sous_categories|length }} sous-catégories</span>
                                    </div>
                                    <div class="matiere-actions">
                                        <button class="btn btn-sm btn-primary edit-matiere-btn" 
                                                data-id="{{ matiere.id }}" 
                                                data-name="{{ matiere.nom }}" 
                                                data-color="{{ matiere.color_code }}">
                                            <i class="fas fa-edit"></i> Modifier
                                        </button>
                                        <form method="POST" action="{{ url_for('admin_bp.matieres') }}" style="display: inline-block" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer cette matière ? Toutes les sous-catégories et textes associés seront également supprimés.')">
                                            <input type="hidden" name="action" value="delete">
                                            <input type="hidden" name="matiere_id" value="{{ matiere.id }}">
                                            <button type="submit" class="btn btn-sm btn-danger">
                                                <i class="fas fa-trash"></i> Supprimer
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                    {% else %}
                        <div class="alert alert-info">
                            Aucune matière n'a été ajoutée. Utilisez le formulaire ci-dessus pour créer votre première matière.
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

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