<!-- detail.html -->
{% extends 'base.html' %}
{% load static %}

{% block title %}Détail du PV n°{{ pv.numero }}{% endblock %}

{% block content %}
<div class="container-xxl flex-grow-1 container-p-y">
    <div class="container-fluid py-4">
        
        <!-- En-tête -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div>
                <h2 class="mb-0">Procès-Verbal n°{{ pv.numero }}</h2>
                <p class="text-muted">Créé le {{ pv.date_visite|date:"d/m/Y" }}</p>
            </div>
            <div>
                <a href="{% url 'controle:modifier_pv' pv.pk %}" class="btn btn-success">
                    <i class="fa fa-edit"></i> Modifier
                </a>
                <a href="{% url 'controle:liste_pv' %}" class="btn btn-outline-secondary">
                    <i class="fa fa-arrow-left"></i> Retour
                </a>
            </div>
        </div>

        <!-- Informations générales -->
        <div class="card shadow-sm mb-4">
            <div class="card-header bg-white">
                <h4 class="mb-0">Informations générales</h4>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <p><strong>Numéro PV :</strong> {{ pv.numero }}</p>
                        <p><strong>Type de PV :</strong> {{ pv.type_pv|default:"-" }}</p>
                        <p><strong>Client :</strong> {{ pv.client|default:"-" }}</p>
                    </div>
                    <div class="col-md-6">
                        <p><strong>Date de visite :</strong> {{ pv.date_visite|date:"d/m/Y H:i" }}</p>
                        <p><strong>Lieu :</strong> {{ pv.lieu|default:"-" }}</p>
                        <p><strong>Statut :</strong> 
                            <span class="badge 
                                {% if pv.statut == 'brouillon' %}bg-warning
                                {% elif pv.statut == 'finalise' %}bg-success
                                {% else %}bg-secondary{% endif %}">
                                {{ pv.get_statut_display|default:"Brouillon" }}
                            </span>
                        </p>
                    </div>
                </div>
                <div class="row mt-3">
                    <div class="col-12">
                        <p><strong>Objet du contrôle :</strong></p>
                        <p>{{ pv.objet_controle.nom_projet|linebreaks|default:"-" }}</p>
                    </div>
                </div>
                <div class="row mt-3">
                    <div class="col-12">
                        <p><strong>Observations générales :</strong></p>
                        <p>{{ pv.observations_generales|linebreaks|default:"-" }}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Participants -->
        <div class="card shadow-sm mb-4">
            <div class="card-header bg-white">
                <h4 class="mb-0">Participants</h4>
            </div>
            <div class="card-body">
                {% if pv.participants.all %}
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Nom</th>
                                <th>Fonction</th>
                                <th>Organisme</th>
                                <th>Signature</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for participant in pv.participants.all %}
                            <tr>
                                <td>{{ participant.nom }}</td>
                                <td>{{ participant.fonction|default:"-" }}</td>
                                <td>{{ participant.organisme|default:"-" }}</td>
                                <td>
                                    {% if participant.signature_presente %}
                                        <div class="d-flex align-items-center gap-2">
                                            <span class="badge bg-success">Présente</span>
                                            <img src="{{ participant.signature }}" alt="Signature de {{ participant.nom }}" class="img-fluid border" style="max-height: 50px; max-width: 150px;" />
                                        </div>
                                    {% else %}
                                        <i class="fa fa-times-circle text-danger"></i> Absente
                                    {% endif %}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <p class="text-muted">Aucun participant enregistré</p>
                {% endif %}
            </div>
        </div>

        <!-- Contrôles effectués - Version complète avec élément -->
<div class="card shadow-sm mb-4">
    <div class="card-header bg-white">
        <h4 class="mb-0">Contrôles effectués</h4>
    </div>
    <div class="card-body">
        {% if pv.controles.all %}
        <div class="table-responsive">
            <table class="table table-hover">
                <thead class="table-light">
                    <tr>
                        <th style="width: 45%">Ouvrage / Élément / Point de contrôle</th>
                        <th style="width: 20%">Résultat</th>
                        <th style="width: 35%">Observation</th>
                    </tr>
                </thead>
                <tbody>
                    {% for controle in pv.controles.all %}
                    <tr>
                        <td>
                            <strong>{{ controle.point_controle.element.ouvrage.nom }}</strong>
                            <br>
                            <span class="small text-primary">
                                <i class="fa fa-folder-open me-1"></i>
                                {{ controle.point_controle.element.nom }}
                            </span>
                            <br>
                            <span class="text-muted small ms-3">
                                <i class="fa fa-angle-right me-1"></i>
                                {{ controle.point_controle.point_de_controle|cut:"Point de contrôle : "|cut:"Point de contrôle:" }}
                            </span>
                        </td>
                        <td>
                            {% if controle.statut == 'CONFORME' %}
                                <span class="badge bg-success">
                                    <i class="fa fa-check-circle"></i> Conforme
                                </span>
                            {% elif controle.statut == 'NON_CONFORME' %}
                                <span class="badge bg-danger">
                                    <i class="fa fa-times-circle"></i> Non conforme
                                </span>
                            {% elif controle.statut == 'SUSPENDU' %}
                                <span class="badge bg-secondary">
                                    <i class="fa fa-ban"></i> Suspendu
                                </span>
                           
                            {% else %}
                                <span class="badge bg-info">{{ controle.get_statut_display }}</span>
                            {% endif %}
                        </td>
                        <td class="small">
                            {% if controle.observation %}
                                {{ controle.observation|linebreaks|truncatechars:150 }}
                            {% else %}
                                <span class="text-muted">—</span>
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <div class="text-center py-4">
            <i class="fa fa-clipboard-list fa-3x text-muted mb-3"></i>
            <p class="text-muted">Aucun contrôle enregistré</p>
        </div>
        {% endif %}
    </div>
</div>

        <!-- Recommandations -->
        <div class="card shadow-sm mb-4">
            <div class="card-header bg-white">
                <h4 class="mb-0">Recommandations</h4>
            </div>
            <div class="card-body">
                {% if pv.recommandations.all %}
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Description</th>
                                <th>Priorité</th>
                                <th>Délai</th>
                                <th>Statut</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for recommandation in pv.recommandations.all %}
                            <tr>
                                <td>{{ recommandation.description|default:"-" }}</td>
                                <td>
                                    {% if recommandation.priorite == 'haute' %}
                                        <span class="badge bg-danger">Haute</span>
                                    {% elif recommandation.priorite == 'moyenne' %}
                                        <span class="badge bg-warning">Moyenne</span>
                                    {% else %}
                                        <span class="badge bg-info">Basse</span>
                                    {% endif %}
                                </td>
                                <td>{{ recommandation.delai|default:"-" }}</td>
                                <td>
                                    {% if recommandation.statut %}
                                        <i class="fa fa-check-circle text-success"></i> Réalisé
                                    {% else %}
                                        <i class="fa fa-clock text-warning"></i> En cours
                                    {% endif %}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <p class="text-muted">Aucune recommandation enregistrée</p>
                {% endif %}
            </div>
        </div>

    </div>
</div>
{% endblock %}