{% extends 'base.html' %}

{% block title %}Contrats{% endblock %}
{% block page_title %}Contrats{% endblock %}

{% block page_actions %}
<a href="{% url 'contrat_create' %}" class="btn btn-primary"><i class="bi bi-plus-lg"></i> Ajouter</a>
{% endblock %}

{% block content %}
<div class="card">
    <div class="card-header">
        <h5 class="card-title mb-0"><i class="bi bi-file-earmark-text"></i> Liste des contrats</h5>
    </div>
    <div class="card-body">
        <div class="search-box mb-3">
            <i class="bi bi-search search-icon"></i>
            <input type="text" id="searchContrat" class="form-control" placeholder="Rechercher par employé, type ou matricule...">
        </div>
        <div class="table-responsive">
            <table class="table table-hover" id="tableContrat">
                <thead>
                    <tr>
                        <th>Employé</th>
                        <th>Type</th>
                        <th>Date début</th>
                        <th>Date fin</th>
                        <th>Salaire</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for contrat in contrats %}
                    <tr class="contrat-row">
                        <td><span class="badge bg-primary">{{ contrat.employe.nom }} {{ contrat.employe.prenom }}</span></td>
                        <td><span class="badge bg-info">{{ contrat.get_type_contrat_display }}</span></td>
                        <td><i class="bi bi-calendar3 text-muted me-1"></i>{{ contrat.date_debut|date:"d/m/Y" }}</td>
                        <td>
                            {% if contrat.date_fin %}
                            <i class="bi bi-calendar3 text-muted me-1"></i>{{ contrat.date_fin|date:"d/m/Y" }}
                            {% else %}
                            <span class="text-muted">-</span>
                            {% endif %}
                        </td>
                        <td><strong class="text-success">{{ contrat.salaire }} FCFA</strong></td>
                        <td>
                            <div class="btn-group" role="group">
                                <a href="{% url 'contrat_update' contrat.pk %}" class="btn btn-sm btn-warning" title="Modifier"><i class="bi bi-pencil"></i></a>
                                <a href="{% url 'contrat_delete' contrat.pk %}" class="btn btn-sm btn-danger" title="Supprimer"><i class="bi bi-trash"></i></a>
                            </div>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="6" class="text-center py-5">
                            <div class="text-muted">
                                <i class="bi bi-file-earmark-text" style="font-size: 3.5rem;"></i>
                                <p class="mt-2 mb-0 fs-5">Aucun contrat enregistré</p>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        <div id="noResultContrat" class="text-center py-4 text-muted" style="display: none;">
            <i style="font-size: 3rem;">🔍</i>
            <p class="mt-2 mb-0">Aucun résultat trouvé</p>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('searchContrat');
    const rows = document.querySelectorAll('.contrat-row');
    
    searchInput.addEventListener('input', function() {
        const filter = searchInput.value.toLowerCase();
        let visible = false;
        
        rows.forEach(function(row) {
            const text = row.textContent.toLowerCase();
            if (text.includes(filter)) {
                row.style.display = '';
                visible = true;
            } else {
                row.style.display = 'none';
            }
        });
        
        document.getElementById('noResultContrat').style.display = visible ? 'none' : 'block';
    });
});
</script>
{% endblock %}