{% 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-tools me-2"></i> Gestion des services</h1>
        <a href="{{ url_for('admin.add_service') }}" class="btn btn-primary">
            <i class="fas fa-plus-circle me-2"></i> Ajouter un service
        </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>Statut</th>
                            <th>Date de création</th>
                            <th class="text-end">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% if services %}
                            {% for service in services %}
                                <tr>
                                    <td>{{ service.id }}</td>
                                    <td>
                                        {% if service.image_url %}
                                            <img src="{{ url_for('static', filename=service.image_url) }}" alt="{{ service.name }}" style="width: 50px; height: 50px; object-fit: cover;" class="rounded">
                                        {% 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>{{ service.name }}</td>
                                    <td>
                                        {% if service.is_active %}
                                            <span class="badge bg-success">Actif</span>
                                        {% else %}
                                            <span class="badge bg-danger">Inactif</span>
                                        {% endif %}
                                    </td>
                                    <td>{{ service.created_at.strftime('%d/%m/%Y') }}</td>
                                    <td class="text-end">
                                        <a href="{{ url_for('admin.edit_service', id=service.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="{{ service.id }}" data-name="{{ service.name }}" data-type="le service" data-action="{{ url_for('admin.delete_service', id=service.id) }}" data-bs-toggle="tooltip" title="Supprimer">
                                            <i class="fas fa-trash-alt"></i>
                                        </button>
                                    </td>
                                </tr>
                            {% endfor %}
                        {% else %}
                            <tr>
                                <td colspan="6" class="text-center">Aucun service 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 %}
