{% extends 'layouts/admin_layout.html.twig' %}

{% block title %}Gestion des Postes - LUXIM GPIM{% endblock %}

{% block content %}
<div class="container-fluid py-4" id="poste-ajax-list-container">
    {# En-tête de page #}
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h3 class="page-header page-header-top mb-1">Gestion des Postes</h3>
        
        </div>
        
        <a href="{{ path('app_admin_poste_new') }}" class="btn btn-login shadow-sm">
            <i class="fas fa-plus me-2"></i>Nouveau poste
        </a>
    </div>

    {# Barre d'outils : Recherche et Compteur #}
    <div class="d-flex flex-wrap justify-content-between align-items-center mb-4 gap-3">
        <div class="d-flex gap-2">
            <div class="input-group input-group-sm shadow-sm" style="width: 300px;">
                <span class="input-group-text bg-white border-end-0 text-muted">
                    <i class="fas fa-search fa-sm"></i>
                </span>
                <input type="text" id="poste-search" class="form-control border-start-0 ps-0" 
                       placeholder="Rechercher un libellé..." onkeyup="filterPosteTable()">
            </div>
        </div>
        
        <div class="small text-muted">
            <span id="poste-count" class="fw-bold text-primary">{{ postes|length }}</span> poste(s) au total
        </div>
    </div>

    {# Zone de notifications Flash #}
    <div id="flash-messages-container">
        {% for label, messages in app.flashes %}
            {% for message in messages %}
                <div class="alert alert-{{ label == 'success' ? 'success' : 'danger' }} alert-dismissible fade show shadow-sm border-0 border-start border-4 border-{{ label == 'success' ? 'success' : 'danger' }}" role="alert">
                    <i class="fas {{ label == 'success' ? 'fa-check-circle' : 'fa-exclamation-circle' }} me-2"></i>
                    {{ message }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            {% endfor %}
        {% endfor %}
    </div>

    {# Carte de contenu avec Table #}
    <div class="card shadow-sm mb-4 border-0">
        <div class="card-body p-0 position-relative">
            
            {# Overlay de chargement #}
            <div id="ajax-loader" class="d-none position-absolute w-100 h-100 d-flex justify-content-center align-items-center" 
                 style="background: rgba(255,255,255,0.7); z-index: 10; top: 0; left: 0;">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Chargement...</span>
                </div>
            </div>

            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0" id="posteTable">
                    <thead class="table-light text-muted small text-uppercase">
                        <tr>
                            <th class="ps-4" style="width: 15%;">ID</th>
                            <th>Libellé du poste</th>
                            <th class="text-center pe-4" style="width: 20%;">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                    {% for poste in postes %}
                        <tr class="poste-row">
                            <td class="ps-4">
                                <span class="badge bg-light text-muted border">#{{ poste.id }}</span>
                            </td>
                            <td class="fw-semibold text-dark">
                                {{ poste.libelle }}
                            </td>
                            <td class="text-center pe-4">
                                <div class="btn-group shadow-sm bg-white" role="group">
                                    
                                    <a href="{{ path('app_admin_poste_edit', {'id': poste.id}) }}" 
                                       class="btn btn-sm btn-outline-warning" title="Modifier">
                                        <i class="fas fa-edit fa-xs"></i>
                                    </a>
                                    {# Si vous avez une route de suppression directe #}
                                    <form method="post" action="{{ path('app_admin_poste_delete', {'id': poste.id}) }}" 
                                          style="display:inline-block;" onsubmit="return confirm('Supprimer ce poste ?');">
                                        <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ poste.id) }}">
                                        <button class="btn btn-sm btn-outline-danger" style="border-top-left-radius: 0; border-bottom-left-radius: 0;">
                                            <i class="fas fa-trash fa-xs"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    {% else %}
                        <tr>
                            <td colspan="3" class="text-center py-5 text-muted">
                                <i class="fas fa-folder-open fa-3x mb-3 d-block opacity-25"></i>
                                Aucun poste trouvé.
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script>
    /**
     * Filtre local instantané pour les postes
     */
    function filterPosteTable() {
        const input = document.getElementById("poste-search");
        const filter = input.value.toLowerCase();
        const rows = document.querySelectorAll(".poste-row");
        let count = 0;

        rows.forEach(row => {
            const libelle = row.querySelector(".fw-semibold").textContent.toLowerCase();
            const id = row.querySelector(".badge").textContent.toLowerCase();
            
            if (libelle.includes(filter) || id.includes(filter)) {
                row.style.display = "";
                count++;
            } else {
                row.style.display = "none";
            }
        });
        
        const countEl = document.getElementById("poste-count");
        if(countEl) countEl.innerText = count;
    }

    /**
     * Simulation du refresh AJAX (si vous l'utilisez pour les modales)
     */
    window.refreshPosteList = function(url) {
        const loader = document.getElementById('ajax-loader');
        if(loader) loader.classList.remove('d-none');
        window.location.href = url; // Ou fetch AJAX selon votre contrôleur
    };
    </script>
</div>
{% endblock %}