{% extends 'layout.html' %}
{% block content %}
<div class="container-fluid">
    <div class="row">
        <!-- Sidebar Navigation (identique au dashboard) -->
        <div class="col-lg-2 d-none d-lg-block sidebar">
            <ul class="nav flex-column">
                <li class="nav-item">
                    <a class="nav-link" href="/dashboard">
                        <i class="bi bi-house-door"></i>
                        <span>Accueil</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/dashboard">
                        <i class="bi bi-speedometer2"></i>
                        <span>Dashboard</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" href="/tickets">
                        <i class="bi bi-ticket-perforated"></i>
                        <span>Tickets</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/tickets/new">
                        <i class="bi bi-plus-circle"></i>
                        <span>Nouveau Ticket</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">
                        <i class="bi bi-graph-up"></i>
                        <span>Statistiques</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">
                        <i class="bi bi-hdd"></i>
                        <span>Stockage</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">
                        <i class="bi bi-shield-check"></i>
                        <span>Sécurité</span>
                    </a>
                </li>
                <li class="nav-item mt-4">
                    <a class="nav-link" href="/logout">
                        <i class="bi bi-box-arrow-right"></i>
                        <span>Déconnexion</span>
                    </a>
                </li>
            </ul>
        </div>

        <!-- Contenu principal -->
        <div class="col-lg-10 main-content">
            <!-- En-tête -->
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h1 class="h3 mb-0">Gestion des Tickets</h1>
                    <p class="text-muted mb-0">Liste complète des tickets du système</p>
                </div>
                <div class="d-flex">
                    <div class="btn-group">
                        <button class="btn btn-outline-primary">
                            <i class="bi bi-filter"></i> Filtrer
                        </button>
                        <a href="/tickets/new" class="btn btn-primary">
                            <i class="bi bi-plus-circle me-2"></i> Créer un ticket
                        </a>
                    </div>
                </div>
            </div>

            <!-- Statistiques rapides -->
            <div class="row mb-4">
                <div class="col-md-3">
                    <div class="card stat-card">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h5 class="card-title text-muted">Total</h5>
                                    <h2 class="card-value">{{ tickets|length }}</h2>
                                </div>
                                <div class="icon-circle bg-primary">
                                    <i class="bi bi-ticket-detailed text-white"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-3">
                    <div class="card stat-card">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h5 class="card-title text-muted">Ouverts</h5>
                                    <h2 class="card-value">{{ tickets|selectattr('status', 'equalto', 'Ouvert')|list|length }}</h2>
                                </div>
                                <div class="icon-circle bg-info">
                                    <i class="bi bi-folder-plus text-white"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-3">
                    <div class="card stat-card">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h5 class="card-title text-muted">En cours</h5>
                                    <h2 class="card-value">{{ tickets|selectattr('status', 'equalto', 'En cours')|list|length }}</h2>
                                </div>
                                <div class="icon-circle bg-warning">
                                    <i class="bi bi-arrow-repeat text-white"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-3">
                    <div class="card stat-card">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h5 class="card-title text-muted">Résolus</h5>
                                    <h2 class="card-value">{{ tickets|selectattr('status', 'equalto', 'Résolu')|list|length }}</h2>
                                </div>
                                <div class="icon-circle bg-success">
                                    <i class="bi bi-check-circle text-white"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Liste des tickets -->
            <div class="card">
                <div class="card-header bg-white d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Tous les tickets</h5>
                    <div class="d-flex">
                        <div class="input-group me-2" style="width: 300px;">
                            <input type="text" class="form-control" placeholder="Rechercher un ticket...">
                            <button class="btn btn-outline-secondary" type="button">
                                <i class="bi bi-search"></i>
                            </button>
                        </div>
                        <button class="btn btn-outline-secondary">
                            <i class="bi bi-download"></i> Exporter
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle">
                            <thead class="table-light">
                                <tr>
                                    <th>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox">
                                        </div>
                                    </th>
                                    <th>ID</th>
                                    <th>Sujet</th>
                                    <th>Description</th>
                                    <th>Statut</th>
                                    <th>Priorité</th>
                                    <th>Créé le</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for ticket in tickets %}
                                <tr>
                                    <td>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox">
                                        </div>
                                    </td>
                                    <td>
                                        <strong>#{{ ticket.id }}</strong>
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="icon-circle bg-light me-3">
                                                <i class="bi bi-ticket text-primary"></i>
                                            </div>
                                            <div>
                                                <div class="fw-bold">{{ ticket.title }}</div>
                                                <div class="text-muted small">Par {{ ticket.creator|default("Admin", true) }}</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="text-truncate" style="max-width: 200px;">
                                            {{ ticket.description }}
                                        </div>
                                    </td>
                                    <td>
                                        {% if ticket.status == 'Ouvert' %}
                                            <span class="badge bg-primary">{{ ticket.status }}</span>
                                        {% elif ticket.status == 'En cours' %}
                                            <span class="badge bg-warning">{{ ticket.status }}</span>
                                        {% elif ticket.status == 'Résolu' %}
                                            <span class="badge bg-success">{{ ticket.status }}</span>
                                        {% elif ticket.status == 'Fermé' %}
                                            <span class="badge bg-secondary">{{ ticket.status }}</span>
                                        {% else %}
                                            <span class="badge bg-light text-dark">{{ ticket.status }}</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if ticket.priority == 'Haute' %}
                                            <span class="badge bg-danger">{{ ticket.priority }}</span>
                                        {% elif ticket.priority == 'Moyenne' %}
                                            <span class="badge bg-warning">{{ ticket.priority }}</span>
                                        {% elif ticket.priority == 'Basse' %}
                                            <span class="badge bg-info">{{ ticket.priority }}</span>
                                        {% else %}
                                            <span class="badge bg-light text-dark">{{ ticket.priority|default("Non définie", true) }}</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <div class="small text-muted">
                                            {{ ticket.created_at|default("2023-10-15", true) }}
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex">
                                            <button class="btn btn-sm btn-outline-primary me-2">
                                                <i class="bi bi-eye"></i>
                                            </button>
                                            <button class="btn btn-sm btn-outline-success me-2">
                                                <i class="bi bi-pencil"></i>
                                            </button>
                                            <button class="btn btn-sm btn-outline-danger">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                {% else %}
                                <tr>
                                    <td colspan="8" class="text-center py-5">
                                        <div class="py-5">
                                            <i class="bi bi-inbox" style="font-size: 3rem; opacity: 0.3;"></i>
                                            <h5 class="mt-3">Aucun ticket trouvé</h5>
                                            <p class="text-muted">Commencez par créer votre premier ticket</p>
                                            <a href="/tickets/new" class="btn btn-primary mt-2">
                                                <i class="bi bi-plus-circle me-2"></i> Créer un ticket
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    
                    <!-- Pagination -->
                    <nav class="mt-4">
                        <ul class="pagination justify-content-end">
                            <li class="page-item disabled">
                                <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Précédent</a>
                            </li>
                            <li class="page-item active"><a class="page-link" href="#">1</a></li>
                            <li class="page-item"><a class="page-link" href="#">2</a></li>
                            <li class="page-item"><a class="page-link" href="#">3</a></li>
                            <li class="page-item">
                                <a class="page-link" href="#">Suivant</a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
            
            <!-- Section des tickets récents (optionnel) -->
            <div class="row mt-4">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header bg-white">
                            <h5 class="mb-0">Tickets ouverts</h5>
                        </div>
                        <div class="card-body">
                            {% for ticket in tickets if ticket.status == 'Ouvert' %}
                            <div class="ticket-item mb-3">
                                <div class="d-flex justify-content-between align-items-start">
                                    <div>
                                        <h6 class="mb-1">{{ ticket.title }}</h6>
                                        <p class="small text-muted mb-1">{{ ticket.description|truncate(60) }}</p>
                                        <span class="badge bg-primary">{{ ticket.status }}</span>
                                        <span class="badge bg-light text-dark ms-2">
                                            <i class="bi bi-calendar me-1"></i>{{ ticket.created_at|default("2023-10-15", true) }}
                                        </span>
                                    </div>
                                    <div>
                                        <span class="badge bg-danger">{{ ticket.priority|default("Haute", true) }}</span>
                                    </div>
                                </div>
                            </div>
                            {% else %}
                            <div class="text-center py-3">
                                <i class="bi bi-check-circle text-success" style="font-size: 2rem;"></i>
                                <p class="mt-2 mb-0">Tous les tickets sont traités</p>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
                
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header bg-white">
                            <h5 class="mb-0">Tickets en cours</h5>
                        </div>
                        <div class="card-body">
                            {% for ticket in tickets if ticket.status == 'En cours' %}
                            <div class="ticket-item mb-3">
                                <div class="d-flex justify-content-between align-items-start">
                                    <div>
                                        <h6 class="mb-1">{{ ticket.title }}</h6>
                                        <p class="small text-muted mb-1">{{ ticket.description|truncate(60) }}</p>
                                        <span class="badge bg-warning">{{ ticket.status }}</span>
                                        <span class="badge bg-light text-dark ms-2">
                                            <i class="bi bi-calendar me-1"></i>{{ ticket.created_at|default("2023-10-15", true) }}
                                        </span>
                                    </div>
                                    <div>
                                        <span class="badge bg-warning">{{ ticket.priority|default("Moyenne", true) }}</span>
                                    </div>
                                </div>
                            </div>
                            {% else %}
                            <div class="text-center py-3">
                                <i class="bi bi-hourglass-split text-info" style="font-size: 2rem;"></i>
                                <p class="mt-2 mb-0">Aucun ticket en cours de traitement</p>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Script pour les fonctionnalités de la page -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Fonctionnalité de recherche
    const searchInput = document.querySelector('input[type="text"]');
    if (searchInput) {
        searchInput.addEventListener('input', function() {
            const searchTerm = this.value.toLowerCase();
            const rows = document.querySelectorAll('tbody tr');
            
            rows.forEach(row => {
                const text = row.textContent.toLowerCase();
                if (text.includes(searchTerm)) {
                    row.style.display = '';
                } else {
                    row.style.display = 'none';
                }
            });
        });
    }
    
    // Animation des éléments au chargement
    document.querySelectorAll('.card').forEach((card, index) => {
        setTimeout(() => {
            card.style.opacity = '0';
            card.style.transform = 'translateY(20px)';
            card.style.transition = 'all 0.5s ease';
            
            setTimeout(() => {
                card.style.opacity = '1';
                card.style.transform = 'translateY(0)';
            }, 50);
        }, 100 * index);
    });
});
</script>
{% endblock %}