{% extends 'base.html.twig' %}

{% block title %}Administration des Petites Annonces - AEF{% endblock %}

{% block body %}
<div class="container-fluid mt-4">
    <!-- En-tête -->
    <div class="card mb-4">
        <div class="card-header bg-secondary text-white">
            <div class="d-flex justify-content-between align-items-center">
                <h3 class="mb-0">
                    <i class="fas fa-bullhorn me-2"></i>
                    Administration des Petites Annonces
                </h3>
                <div>
                    <a href="{{ path('admin_dashboard') }}" class="btn btn-outline-light btn-sm me-2">
                        <i class="fas fa-arrow-left me-1"></i>Retour Dashboard
                    </a>
                    <a href="{{ path('admin_annonce_new') }}" class="btn btn-success btn-sm">
                        <i class="fas fa-plus me-1"></i>Nouvelle Annonce
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Statistiques -->
    <div class="row mb-4">
        <div class="col-md-2">
            <div class="card bg-primary text-white">
                <div class="card-body text-center">
                    <i class="fas fa-bullhorn fa-2x mb-2"></i>
                    <h4>{{ stats.total_annonces }}</h4>
                    <small>Total annonces</small>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card bg-success text-white">
                <div class="card-body text-center">
                    <i class="fas fa-check-circle fa-2x mb-2"></i>
                    <h4>{{ stats.active_annonces }}</h4>
                    <small>Actives</small>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card bg-warning text-white">
                <div class="card-body text-center">
                    <i class="fas fa-clock fa-2x mb-2"></i>
                    <h4>{{ stats.pending_annonces }}</h4>
                    <small>En attente</small>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card bg-danger text-white">
                <div class="card-body text-center">
                    <i class="fas fa-ban fa-2x mb-2"></i>
                    <h4>{{ stats.rejected_annonces }}</h4>
                    <small>Rejetées</small>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card bg-info text-white">
                <div class="card-body text-center">
                    <i class="fas fa-star fa-2x mb-2"></i>
                    <h4>{{ stats.premium_annonces }}</h4>
                    <small>Premium</small>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card bg-dark text-white">
                <div class="card-body text-center">
                    <i class="fas fa-calendar-times fa-2x mb-2"></i>
                    <h4>{{ stats.expired_annonces }}</h4>
                    <small>Expirées</small>
                </div>
            </div>
        </div>
    </div>

    <!-- Filtres -->
    <div class="card mb-4">
        <div class="card-body">
            <form method="GET" class="row g-3">
                <div class="col-md-3">
                    <label class="form-label">Recherche</label>
                    <input type="text" class="form-control" name="search" value="{{ app.request.query.get('search') }}" placeholder="Titre, description...">
                </div>
                <div class="col-md-2">
                    <label class="form-label">Statut</label>
                    <select class="form-select" name="status">
                        <option value="">Tous</option>
                        <option value="active" {{ app.request.query.get('status') == 'active' ? 'selected' : '' }}>Active</option>
                        <option value="pending" {{ app.request.query.get('status') == 'pending' ? 'selected' : '' }}>En attente</option>
                        <option value="rejected" {{ app.request.query.get('status') == 'rejected' ? 'selected' : '' }}>Rejetée</option>
                        <option value="expired" {{ app.request.query.get('status') == 'expired' ? 'selected' : '' }}>Expirée</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Catégorie</label>
                    <select class="form-select" name="category">
                        <option value="">Toutes</option>
                        {% for category in categories %}
                            <option value="{{ category.id }}" {{ app.request.query.get('category') == category.id ? 'selected' : '' }}>
                                {{ category.name }}
                            </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Prix min</label>
                    <input type="number" class="form-control" name="price_min" value="{{ app.request.query.get('price_min') }}" placeholder="0">
                </div>
                <div class="col-md-2">
                    <label class="form-label">Prix max</label>
                    <input type="number" class="form-control" name="price_max" value="{{ app.request.query.get('price_max') }}" placeholder="10000">
                </div>
                <div class="col-md-1">
                    <label class="form-label">&nbsp;</label>
                    <button type="submit" class="btn btn-primary w-100">
                        <i class="fas fa-search"></i>
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Actions en lot -->
    {% if annonces|length > 0 %}
        <div class="card mb-4">
            <div class="card-body">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="selectAll">
                            <label class="form-check-label" for="selectAll">
                                Sélectionner tout
                            </label>
                        </div>
                    </div>
                    <div class="col-md-6 text-end">
                        <div class="btn-group">
                            <button type="button" class="btn btn-success btn-sm" onclick="bulkAction('approve')">
                                <i class="fas fa-check me-1"></i>Approuver
                            </button>
                            <button type="button" class="btn btn-warning btn-sm" onclick="bulkAction('reject')">
                                <i class="fas fa-times me-1"></i>Rejeter
                            </button>
                            <button type="button" class="btn btn-danger btn-sm" onclick="bulkAction('delete')">
                                <i class="fas fa-trash me-1"></i>Supprimer
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}

    <!-- Liste des annonces -->
    <div class="card">
        <div class="card-header">
            <h5 class="mb-0">
                <i class="fas fa-list me-2"></i>
                Liste des Annonces ({{ annonces|length }})
            </h5>
        </div>
        <div class="card-body">
            {% if annonces|length > 0 %}
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th width="30"></th>
                                <th>Annonce</th>
                                <th>Auteur</th>
                                <th>Catégorie</th>
                                <th>Prix</th>
                                <th>Statut</th>
                                <th>Expiration</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for annonce in annonces %}
                                <tr>
                                    <td>
                                        <input type="checkbox" class="form-check-input annonce-checkbox" value="{{ annonce.id }}">
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            {% if annonce.images|length > 0 %}
                                                <img src="{{ annonce.images[0].imagePath }}" alt="{{ annonce.title }}" 
                                                     class="rounded me-2" style="width: 50px; height: 50px; object-fit: cover;">
                                            {% else %}
                                                <div class="bg-light rounded me-2 d-flex align-items-center justify-content-center" 
                                                     style="width: 50px; height: 50px;">
                                                    <i class="fas fa-image text-muted"></i>
                                                </div>
                                            {% endif %}
                                            <div>
                                                <div class="fw-bold">{{ annonce.title }}</div>
                                                <small class="text-muted">{{ annonce.description|slice(0, 60) }}...</small>
                                                {% if annonce.isPremium %}
                                                    <span class="badge bg-warning text-dark ms-1">Premium</span>
                                                {% endif %}
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        {% if annonce.member %}
                                            <div class="fw-bold">{{ annonce.member.fullName }}</div>
                                            <small class="text-muted">{{ annonce.member.email }}</small>
                                        {% else %}
                                            <span class="text-muted">Membre supprimé</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if annonce.category %}
                                            <span class="badge bg-light text-dark">{{ annonce.category.name }}</span>
                                        {% else %}
                                            <span class="text-muted">Non classé</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if annonce.price %}
                                            <span class="fw-bold">{{ annonce.price|number_format(0, ',', ' ') }}€</span>
                                        {% else %}
                                            <span class="text-muted">Prix non spécifié</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% set status_class = {
                                            'active': 'bg-success',
                                            'pending': 'bg-warning',
                                            'rejected': 'bg-danger',
                                            'expired': 'bg-secondary'
                                        } %}
                                        <span class="badge {{ status_class[annonce.status] ?? 'bg-light text-dark' }}">
                                            {{ annonce.status|trans }}
                                        </span>
                                    </td>
                                    <td>
                                        {% if annonce.expiresAt %}
                                            <div class="small">
                                                {{ annonce.expiresAt|date('d/m/Y') }}
                                                {% if annonce.expiresAt < date() %}
                                                    <span class="text-danger">(Expirée)</span>
                                                {% elseif annonce.expiresAt < date('+7 days') %}
                                                    <span class="text-warning">(Bientôt)</span>
                                                {% endif %}
                                            </div>
                                        {% else %}
                                            <span class="text-muted">Permanente</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <div class="btn-group btn-group-sm">
                                            <a href="{{ path('admin_annonce_show', {id: annonce.id}) }}" 
                                               class="btn btn-outline-info" title="Voir">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            <a href="{{ path('admin_annonce_edit', {id: annonce.id}) }}" 
                                               class="btn btn-outline-primary" title="Modifier">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                            {% if annonce.status == 'pending' %}
                                                <button type="button" class="btn btn-outline-success" 
                                                        onclick="moderateAnnonce({{ annonce.id }}, 'approve')" title="Approuver">
                                                    <i class="fas fa-check"></i>
                                                </button>
                                                <button type="button" class="btn btn-outline-warning" 
                                                        onclick="moderateAnnonce({{ annonce.id }}, 'reject')" title="Rejeter">
                                                    <i class="fas fa-times"></i>
                                                </button>
                                            {% endif %}
                                            <button type="button" class="btn btn-outline-danger" 
                                                    onclick="confirmDelete({{ annonce.id }}, '{{ annonce.title|e('js') }}')" title="Supprimer">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                {% if pagination %}
                    <nav class="mt-3">
                        {{ knp_pagination_render(pagination) }}
                    </nav>
                {% endif %}
            {% else %}
                <div class="text-center py-5">
                    <i class="fas fa-bullhorn fa-4x text-muted mb-3"></i>
                    <h5 class="text-muted">Aucune annonce trouvée</h5>
                    <p class="text-muted">Les petites annonces apparaîtront ici une fois créées.</p>
                </div>
            {% endif %}
        </div>
    </div>
</div>

<!-- Modal de confirmation de suppression -->
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Confirmer la suppression</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Êtes-vous sûr de vouloir supprimer l'annonce <strong id="deleteAnnonceName"></strong> ?</p>
                <p class="text-danger small">Cette action est irréversible.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                <form id="deleteForm" method="POST" class="d-inline">
                    <input type="hidden" name="_token" value="{{ csrf_token('delete') }}">
                    <input type="hidden" name="_method" value="DELETE">
                    <button type="submit" class="btn btn-danger">Supprimer</button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
// Sélection multiple
document.getElementById('selectAll').addEventListener('change', function() {
    const checkboxes = document.querySelectorAll('.annonce-checkbox');
    checkboxes.forEach(checkbox => {
        checkbox.checked = this.checked;
    });
});

// Actions en lot
function bulkAction(action) {
    const selected = Array.from(document.querySelectorAll('.annonce-checkbox:checked')).map(cb => cb.value);
    if (selected.length === 0) {
        alert('Veuillez sélectionner au moins une annonce.');
        return;
    }
    
    if (confirm(`Êtes-vous sûr de vouloir ${action} ${selected.length} annonce(s) ?`)) {
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = '{{ path('admin_annonce_bulk_action') }}';
        
        const actionInput = document.createElement('input');
        actionInput.type = 'hidden';
        actionInput.name = 'action';
        actionInput.value = action;
        form.appendChild(actionInput);
        
        selected.forEach(id => {
            const input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'ids[]';
            input.value = id;
            form.appendChild(input);
        });
        
        const tokenInput = document.createElement('input');
        tokenInput.type = 'hidden';
        tokenInput.name = '_token';
        tokenInput.value = '{{ csrf_token('bulk_action') }}';
        form.appendChild(tokenInput);
        
        document.body.appendChild(form);
        form.submit();
    }
}

// Modération individuelle
function moderateAnnonce(id, action) {
    const form = document.createElement('form');
    form.method = 'POST';
    const baseUrl = '{{ path('admin_annonce_index')|raw }}';
    form.action = baseUrl + '/' + id + '/moderate';
    
    const actionInput = document.createElement('input');
    actionInput.type = 'hidden';
    actionInput.name = 'action';
    actionInput.value = action;
    form.appendChild(actionInput);
    
    const tokenInput = document.createElement('input');
    tokenInput.type = 'hidden';
    tokenInput.name = '_token';
    tokenInput.value = '{{ csrf_token('moderate') }}';
    form.appendChild(tokenInput);
    
    document.body.appendChild(form);
    form.submit();
}

// Suppression
function confirmDelete(annonceId, annonceTitle) {
    document.getElementById('deleteAnnonceName').textContent = annonceTitle;
    const baseUrl = '{{ path('admin_annonce_index')|raw }}';
    document.getElementById('deleteForm').action = baseUrl + '/' + annonceId + '/delete';
    new bootstrap.Modal(document.getElementById('deleteModal')).show();
}
</script>
{% endblock %}