{% extends 'admin/base.html' %}

{% block content %}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1><i class="fas fa-box me-2"></i> Gestion des produits</h1>
        <a href="{{ url_for('admin.add_product') }}" class="btn btn-primary">
            <i class="fas fa-plus-circle me-2"></i> Ajouter un produit
        </a>
    </div>
    
    <div class="card border-0 shadow-sm">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover datatable">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Image</th>
                            <th>Nom</th>
                            <th>Catégorie</th>
                            <th>Prix</th>
                            <th>État</th>
                            <th>Disponibilité</th>
                            <th>Date de création</th>
                            <th class="text-end">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% if products %}
                            {% for product in products %}
                                <tr>
                                    <td>{{ product.id }}</td>
                                    <td>
                                        {% if product.image_url %}
                                            {% if product.image_url.startswith('uploads/') %}
                                                <img src="{{ url_for('static', filename=product.image_url) }}" alt="{{ product.name }}" style="width: 50px; height: 50px; object-fit: cover;" class="rounded">
                                            {% else %}
                                                <img src="{{ url_for('static', filename='uploads/products/' + product.image_url) }}" alt="{{ product.name }}" style="width: 50px; height: 50px; object-fit: cover;" class="rounded">
                                            {% endif %}
                                        {% else %}
                                            <div class="bg-light rounded d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
                                                <i class="fas fa-image text-secondary"></i>
                                            </div>
                                        {% endif %}
                                    </td>
                                    <td>{{ product.name }}</td>
                                    <td>
                                        {% if product.category %}
                                            {{ product.category.name }}
                                        {% else %}
                                            <span class="text-muted">Non catégorisé</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if product.price %}
                                            {{ product.price }} FCFA
                                        {% else %}
                                            <span class="text-muted">Non défini</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if product.condition == 'new' %}
                                            <span class="badge bg-success">Neuf</span>
                                        {% elif product.condition == 'reconditioned' %}
                                            <span class="badge bg-primary">Reconditionné</span>
                                        {% elif product.condition == 'used' %}
                                            <span class="badge bg-secondary">Occasion</span>
                                        {% else %}
                                            <span class="badge bg-light text-dark">Non défini</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if product.is_available %}
                                            <span class="badge bg-success">Disponible</span>
                                        {% else %}
                                            <span class="badge bg-danger">Non disponible</span>
                                        {% endif %}
                                    </td>
                                    <td>{{ product.created_at.strftime('%d/%m/%Y') }}</td>
                                    <td class="text-end">
                                        <a href="{{ url_for('admin.edit_product', id=product.id) }}" class="btn btn-sm btn-info me-1" data-bs-toggle="tooltip" title="Modifier">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        <button type="button" class="btn btn-sm btn-danger" data-bs-toggle="modal" data-bs-target="#deleteModal" data-id="{{ product.id }}" data-name="{{ product.name }}" data-type="le produit" data-action="{{ url_for('admin.delete_product', id=product.id) }}" data-bs-toggle="tooltip" title="Supprimer">
                                            <i class="fas fa-trash-alt"></i>
                                        </button>
                                    </td>
                                </tr>
                            {% endfor %}
                        {% else %}
                            <tr>
                                <td colspan="9" class="text-center">Aucun produit disponible</td>
                            </tr>
                        {% endif %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Initialize DataTable
        $('.datatable').DataTable({
            language: {
                url: '//cdn.datatables.net/plug-ins/1.10.24/i18n/French.json'
            },
            order: [[0, 'desc']], // Sort by ID descending by default
            responsive: true
        });
    });
</script>
{% endblock %}
