{% extends 'base.html' %}
{% load static %}

{% block title %}Visualisation du procès-verbal n°{{ pv.numero|default:"" }} - Contrôle Technique{% endblock %}

{% block content %}

<!-- En-tête de la page -->
<nav class="layout-navbar container-xxl navbar-detached navbar navbar-expand-xl align-items-center bg-navbar-theme" id="layout-navbar">
    <div class="layout-menu-toggle navbar-nav align-items-xl-center me-4 me-xl-0 d-xl-none">
        <a class="nav-item nav-link px-0 me-xl-6" href="javascript:void(0)">
            <i class="icon-base bx bx-menu icon-md"></i>
        </a>
    </div>

    <div class="navbar-nav-right d-flex align-items-center justify-content-end" id="navbar-collapse">
        <div class="navbar-nav align-items-center me-auto">
            <div class="nav-item d-flex align-items-center">
                <i class="icon-base bx bx-file icon-md me-2"></i>
                <h4 class="mb-0">
                    Procès-verbal 
                    {% if pv.numero %}<span class="text-primary">n°{{ pv.numero }}</span>{% endif %}
                </h4>
            </div>
        </div>
        <div class="navbar-nav align-items-center">
            <span class="badge 
                {% if pv.statut == 'brouillon' %}bg-label-warning
                {% elif pv.statut == 'finalise' %}bg-label-success
                {% elif pv.statut == 'archive' %}bg-label-secondary
                {% else %}bg-label-info{% endif %} p-2">
                <i class="icon-base 
                    {% if pv.statut == 'brouillon' %}bx-edit
                    {% elif pv.statut == 'finalise' %}bx-check-circle
                    {% elif pv.statut == 'archive' %}bx-archive
                    {% else %}bx-time{% endif %} me-1"></i>
                {{ pv.get_statut_display|default:"Brouillon" }}
            </span>
        </div>
    </div>
</nav>

<div class="container-xxl flex-grow-1 container-p-y">
    <!-- Messages flash -->
    {% if messages %}
    <div class="row">
        <div class="col-12">
            {% for message in messages %}
            <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Fermer"></button>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <!-- Actions principales -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center flex-wrap">
                        <div>
                            <h5 class="mb-2">Actions disponibles</h5>
                            <span class="text-muted">Gérez et exportez ce procès-verbal</span>
                        </div>
                        <div class="mt-2 mt-sm-0">
                            {% if pv.statut == 'brouillon' %}
                            <button type="button" class="btn btn-success me-2" data-bs-toggle="modal" data-bs-target="#finaliserModal">
                                <i class="icon-base bx bx-check-circle me-1"></i>Finaliser
                            </button>
                            <a href="{% url 'controle:modifier_pv' pv.id %}" class="btn btn-primary me-2">
                                <i class="icon-base bx bx-edit me-1"></i>Modifier
                            </a>
                            {% endif %}
                            
                            <div class="btn-group me-2">
                                <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown">
                                    <i class="icon-base bx bx-export me-1"></i>Exporter
                                </button>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a class="dropdown-item" href="{% url 'controle:exporter_pv_pdf' pv.id %}">
                                            <i class="icon-base bx bxs-file-pdf me-2 text-danger"></i>Format PDF
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="{% url 'controle:exporter_pv_word' pv.id %}">
                                            <i class="icon-base bx bxs-file-doc me-2 text-primary"></i>Format Word
                                        </a>
                                    </li>
                                    <li>
                                          <a class="dropdown-item" href="#"> 
                                            <i class="icon-base bx bxs-file-excel me-2 text-success"></i>Format Excel
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            
                            <a href="{% url 'controle:imprimer_pv' pv.id %}" class="btn btn-info me-2" target="_blank">
                                <i class="icon-base bx bx-printer me-1"></i>Imprimer
                            </a>
                            
                            <a href="{% url 'controle:liste_pv' %}" class="btn btn-outline-secondary">
                                <i class="icon-base bx bx-arrow-back me-1"></i>Retour
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Colonne principale - Contenu du PV -->
        <div class="col-lg-8">
            <!-- En-tête du document -->
            <div class="card mb-4">
                <div class="card-header bg-light">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">
                            <i class="icon-base bx bx-file me-2"></i>
                            PROCÈS-VERBAL DE CONTRÔLE TECHNIQUE
                        </h5>
                        <div class="text-end">
                            {% if pv.numero %}
                            <span class="badge bg-info fs-6">N° {{ pv.numero }}</span>
                            {% endif %}
                            <div class="mt-1">
                                <small class="text-muted">Créé le {{ pv.date_creation|date:"d/m/Y H:i" }}</small>
                                {% if pv.date_modification %}
                                <br><small class="text-muted">Modifié le {{ pv.date_modification|date:"d/m/Y H:i" }}</small>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <!-- Informations générales -->
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <table class="table table-sm table-borderless">
                                <tr>
                                    <th width="40%">Type de PV :</th>
                                    <td>
                                        <span class="badge bg-info">
                                            {{ pv.type_pv|default:"Non spécifié" }}
                                        </span>
                                    </td>
                                </tr>
                                <tr>
                                    <th>Client :</th>
                                    <td>
                                        <strong>{{ pv.client.nom|default:"Non spécifié" }}</strong>
                                        {% if pv.client.email %}<br><small>{{ pv.client.email }}</small>{% endif %}
                                        {% if pv.client.telephone %}<br><small>{{ pv.client.telephone }}</small>{% endif %}
                                    </td>
                                </tr>
                                <tr>
                                    <th>Date de visite :</th>
                                    <td>{{ pv.date_visite|date:"d/m/Y"|default:"Non spécifiée" }}</td>
                                </tr>
                                <tr>
                                    <th>Lieu :</th>
                                    <td>{{ pv.lieu|default:"Non spécifié" }}</td>
                                </tr>
                            </table>
                        </div>
                        <div class="col-md-6">
                            <table class="table table-sm table-borderless">
                                <tr>
                                    <th width="40%">Inspecteur :</th>
                                    <td>
                                        {% if user.username %}
                                        <strong>{{user.username}}</strong>
                                        {% else %}
                                        <span class="text-muted">Non assigné</span>
                                        {% endif %}
                                    </td>
                                </tr>
                                <tr>
                                    <th>Référence dossier :</th>
                                    <td>{{ pv.reference_dossier|default:"-" }}</td>
                                </tr>
                                <tr>
                                    <th>Validité :</th>
                                    <td>
                                        {% if pv.date_validite %}
                                        {{ pv.date_validite|date:"d/m/Y" }}
                                        {% else %}
                                        <span class="text-muted">Non définie</span>
                                        {% endif %}
                                    </td>
                                </tr>
                                <tr>
                                    <th>Version :</th>
                                    <td>{{ pv.version|default:"1.0" }}</td>
                                </tr>
                            </table>
                        </div>
                    </div>

                    <!-- Objet du contrôle -->
                    <div class="mb-4">
                        <h6 class="fw-bold border-bottom pb-2">
                            <i class="icon-base bx bx-target-lock me-2"></i>Objet du contrôle
                        </h6>
                        <p>{{ pv.objet_controle.nom_projet|default:"Aucun objet spécifié"|linebreaks }}</p>
                    </div>

                    <!-- Observations générales -->
                    <div class="mb-4">
                        <h6 class="fw-bold border-bottom pb-2">
                            <i class="icon-base bx bx-message me-2"></i>Observations générales
                        </h6>
                        <p>{{ pv.observations_generales|default:"Aucune observation"|linebreaks }}</p>
                    </div>

                    <!-- Points de contrôle -->
                    <div class="card mt-4">
                        <div class="card-header">
                            <h3>Points de contrôle</h3>
                        </div>
                            <div class="card-body">
                                {% if pv.controles.all %}
                                    <div class="table-responsive">
                                        <table class="table table-bordered">
                                            <thead>
                                                <tr>
                                                    <th>Ouvrage</th>
                                                    <th>Élément d'ouvrage</th>
                                                    <th>Point de contrôle</th>
                                                    <th>Statut</th>
                                                    <th>Observations</th>
                                                    <th>Photos</th>
                                                </tr>
                                            </thead>
                                           <tbody>
                                                {% for controle in pv.controles.all %}
                                                <tr>
                                                    <td>{{ controle.point_controle.element.ouvrage.nom|default:"-" }}</td>
                                                    <td>{{ controle.point_controle.element.nom }}</td>
                                                    <td>{{ controle.point_controle.point_de_controle|cut:"Point de contrôle : "|cut:"Point de contrôle:" }}</td>
                                                    <td>
                                                        <span class="badge 
                                                            {% if controle.statut == 'CONFORME' %}badge-success bg-success text-white
                                                            {% elif controle.statut == 'NON_CONFORME' %}badge-danger bg-danger text-white
                                                            {% elif controle.statut == 'SUSPENDU' %}badge-warning bg-warning text-dark
                                                            {% else %}badge-secondary bg-secondary text-white{% endif %}">
                                                            {{ controle.get_statut_display }}
                                                        </span>
                                                    </td>
                                                    <td>{{ controle.observation|default:"-" }}</td>
                                                    <td>
                                                       {% with photos=controle.photos.all %}
                                                            {% if photos %}
                                                                <div class="btn-group" role="group">
                                                                    <button type="button" class="btn btn-sm btn-info" onclick="showPhotosModal({{ forloop.parentloop.counter }})">
                                                                        Voir photos ({{ photos|length }})
                                                                    </button>
                                                                </div>
                                                                
                                                                <!-- Modal caché pour chaque contrôle -->
                                                                <div id="photosModal{{ forloop.parentloop.counter }}" style="display: none;">
                                                                    <div class="modal-header">
                                                                        <h5>Photos - {{ controle.point_controle.point_de_controle|cut:"Point de contrôle : "|cut:"Point de contrôle:" }}</h5>
                                                                    </div>
                                                                    <div class="modal-body">
                                                                        <div style="display: flex; flex-wrap: wrap; gap: 15px;">
                                                                            {% for photo in photos %}
                                                                                <div>
                                                                                    <a href="{{ photo.image.url }}" target="_blank">
                                                                                        <img src="{{ photo.image.url }}" 
                                                                                            style="width: 150px; height: 150px; object-fit: cover; border-radius: 8px;">
                                                                                    </a>
                                                                                </div>
                                                                            {% endfor %}
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            {% else %}
                                                                <span class="text-muted">-</span>
                                                            {% endif %}
                                                        {% endwith %}
                                                    </td>
                                                </tr>
                                                {% endfor %}
                                            </tbody>
                                            <script>
                                                function showPhotosModal(index) {
                                                    const modalContent = document.getElementById('photosModal' + index).innerHTML;
                                                    // Créer et afficher un modal Bootstrap
                                                    const modal = `
                                                        <div class="modal fade" id="dynamicModal${index}" tabindex="-1">
                                                            <div class="modal-dialog modal-lg">
                                                                <div class="modal-content">
                                                                    ${modalContent}
                                                                    <div class="modal-footer">
                                                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    `;
                                                    
                                                    // Supprimer l'ancien modal s'il existe
                                                    const oldModal = document.getElementById('dynamicModal' + index);
                                                    if(oldModal) oldModal.remove();
                                                    
                                                    // Ajouter et afficher le nouveau modal
                                                    document.body.insertAdjacentHTML('beforeend', modal);
                                                    const modalElement = new bootstrap.Modal(document.getElementById('dynamicModal' + index));
                                                    modalElement.show();
                                                }
                                                </script>
                                        </table>
                                    </div>
                                {% else %}
                                    <div class="alert alert-info">
                                        Aucun point de contrôle n'a été enregistré pour ce procès-verbal.
                                    </div>
                                {% endif %}
                            </div>
                        </div>

                        <!-- Recommandations générales -->
                        {% if recommandations %}
                        <div class="mb-4">
                            <h6 class="fw-bold border-bottom pb-2">
                                <i class="icon-base bx bx-message-rounded-dots me-2"></i>Recommandations générales
                            </h6>
                            <ul class="list-group">
                                {% for rec in recommandations %}
                                <li class="list-group-item">
                                    <span class="badge bg-secondary me-2">{{ rec.ordre }}</span>
                                    {{ rec.texte }}
                                </li>
                                {% endfor %}
                            </ul>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>

        <!-- Colonne latérale - Participants et signatures -->
        <div class="col-lg-4">
            <!-- Participants et signatures -->
            <div class="card mb-4">
                <div class="card-header bg-light">
                    <h5 class="mb-0">
                        <i class="icon-base bx bx-group me-2"></i>
                        Participants
                        <span class="badge bg-success ms-2">{{ pv.participants.all|length }}</span>
                    </h5>
                </div>
                <div class="card-body">
    {% with participants_list=pv.participants.all %}
        {% if participants_list %}
            <div class="list-group">
                {% for participant_pv in participants_list %}
                    <div class="list-group-item">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                {# Gestion flexible du nom #}
                                <strong>
                                    {% if participant_pv.nom %}
                                        {{ participant_pv.nom }}
                                    {% else %}
                                        Participant #{{ forloop.counter }}
                                    {% endif %}
                                </strong>
                                
                                <br><small class="text-muted">
                                    {% if participant_pv.fonction %}
                                        {{ participant_pv.fonction }}
                                    {% else %}
                                        Participant
                                    {% endif %}
                                </small>
                            </div>
                            
                            {# Gestion de la signature #}
                            {% if participant_pv.signature %}
                                <button type="button" class="btn btn-sm btn-outline-primary" 
                                        data-bs-toggle="modal" 
                                        data-bs-target="#signatureModal{{ participant_pv.id }}">
                                    <i class="icon-base bx bx-signature"></i>
                                    Voir signature
                                </button>
                            {% else %}
                                <span class="badge bg-warning">Non signé</span>
                            {% endif %}
                        </div>
                    </div>
                    
                    {# Modal pour la signature #}
                    {% if participant_pv.signature %}
                    <div class="modal fade" id="signatureModal{{ participant_pv.id }}" tabindex="-1" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header bg-primary text-white">
                                    <h5 class="modal-title">
                                        <i class="icon-base bx bx-signature me-2"></i>
                                        Signature - 
                                        {% if participant_pv.nom %}
                                            {{ participant_pv.nom }}
                                        {% else %}
                                            Participant
                                        {% endif %}
                                    </h5>
                                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Fermer"></button>
                                </div>
                                <div class="modal-body text-center">
                                    <img src="{{ participant_pv.signature }}" alt="Signature" class="img-fluid border" style="max-height: 200px;">
                                    <p class="mt-3 mb-0">
                                        <strong>Signé le :</strong> 
                                        {{ participant_pv.date_signature|date:"d/m/Y H:i"|default:"Date non spécifiée" }}
                                    </p>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endif %}
                {% endfor %}
            </div>
        {% else %}
            <div class="alert alert-info">
                <i class="icon-base bx bx-info-circle me-2"></i>
                Aucun participant enregistré.
            </div>
        {% endif %}
    {% endwith %}
</div>
            </div>

            <!-- Métadonnées et historique -->
            <div class="card mb-4">
                <div class="card-header bg-light">
                    <h5 class="mb-0">
                        <i class="icon-base bx bx-history me-2"></i>
                        Informations complémentaires
                    </h5>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled mb-0">
                        <li class="mb-2">
                            <i class="icon-base bx bx-calendar me-2"></i>
                            <strong>Création :</strong> {{ pv.date_creation|date:"d/m/Y H:i" }}
                        </li>
                        {% if pv.date_modification %}
                        <li class="mb-2">
                            <i class="icon-base bx bx-edit me-2"></i>
                            <strong>Modification :</strong> {{ pv.date_modification|date:"d/m/Y H:i" }}
                        </li>
                        {% endif %}
                        <li class="mb-2">
                            <i class="icon-base bx bx-user me-2"></i>
                            <strong>Créé par :</strong> {{ pv.createur.get_full_name|default:pv.createur.username }}
                        </li>
                        {% if pv.date_finalisation %}
                        <li class="mb-2">
                            <i class="icon-base bx bx-check-circle me-2 text-success"></i>
                            <strong>Finalisation :</strong> {{ pv.date_finalisation|date:"d/m/Y H:i" }}
                        </li>
                        {% endif %}
                        {% if pv.mots_cles %}
                        <li class="mb-2">
                            <i class="icon-base bx bx-tag me-2"></i>
                            <strong>Mots-clés :</strong>
                            <div class="mt-1">
                                {% for mot in pv.mots_cles.split %}
                                <span class="badge bg-secondary me-1">{{ mot }}</span>
                                {% endfor %}
                            </div>
                        </li>
                        {% endif %}
                    </ul>
                </div>
            </div>

            <!-- Documents joints -->
            {% if documents_joints %}
            <div class="card mb-4">
                <div class="card-header bg-light">
                    <h5 class="mb-0">
                        <i class="icon-base bx bx-paperclip me-2"></i>
                        Documents joints
                    </h5>
                </div>
                <div class="card-body">
                    <div class="list-group">
                        {% for doc in documents_joints %}
                        <a href="{{ doc.fichier.url }}" class="list-group-item list-group-item-action" target="_blank">
                            <div class="d-flex align-items-center">
                                <i class="icon-base bx bxs-file me-2 fs-4"></i>
                                <div>
                                    <strong>{{ doc.nom }}</strong>
                                    <br><small class="text-muted">{{ doc.taille|filesizeformat }}</small>
                                </div>
                            </div>
                        </a>
                        {% endfor %}
                    </div>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<!-- Modals pour les photos -->
{% for element in elements_controle %}
{% if element.photos.all %}
<div class="modal fade" id="photosModal{{ element.id }}" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title">
                    <i class="icon-base bx bx-images me-2"></i>
                    Photos - {{ element.element.nom|default:element.element }}
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Fermer"></button>
            </div>
            <div class="modal-body">
                <div class="row g-3">
                    {% for photo in element.photos.all %}
                    <div class="col-md-4">
                        <div class="card">
                            <img src="{{ photo.image.url }}" class="card-img-top" alt="{{ photo.legende }}" 
                                 style="height: 150px; object-fit: cover;">
                            {% if photo.legende %}
                            <div class="card-body p-2">
                                <p class="card-text small">{{ photo.legende }}</p>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
            </div>
        </div>
    </div>
</div>
{% endif %}
{% endfor %}

<!-- Modals pour les signatures -->
{% for participant in participants %}
{% if participant.signature %}
<div class="modal fade" id="signatureModal{{ participant.id }}" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title">
                    <i class="icon-base bx bx-signature me-2"></i>
                    Signature - {{ participant.nom|default:"Participant" }}
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Fermer"></button>
            </div>
            <div class="modal-body text-center">
                <img src="{{ participant.signature.url }}" alt="Signature" class="img-fluid border" style="max-height: 200px;">
                <p class="mt-3 mb-0">
                    <strong>Signé le :</strong> {{ participant.date_signature|date:"d/m/Y H:i"|default:"Date non spécifiée" }}
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
            </div>
        </div>
    </div>
</div>
{% endif %}
{% endfor %}

<!-- Modal de finalisation -->
<div class="modal fade" id="finaliserModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title">
                    <i class="icon-base bx bx-check-circle me-2"></i>
                    Finaliser le procès-verbal
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Fermer"></button>
            </div>
            <form method="POST" action="{% url 'controle:finaliser_pv' pv.id %}">
                {% csrf_token %}
                <div class="modal-body">
                    <p>Êtes-vous sûr de vouloir finaliser ce procès-verbal ?</p>
                    <div class="alert alert-warning">
                        <i class="icon-base bx bx-info-circle me-2"></i>
                        Une fois finalisé, le document ne pourra plus être modifié.
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label fw-bold">Numéro de document</label>
                        <input type="text" name="numero" class="form-control" 
                               value="PV-{{ pv.date_visite|date:'Ymd' }}-{{ pv.id }}" required>
                        <div class="form-text">Numéro unique attribué au procès-verbal</div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label fw-bold">Date de validité</label>
                        <input type="date" name="date_validite" class="form-control" 
                               value="{{ pv.date_validite|date:'Y-m-d'|default:'' }}">
                        <div class="form-text">Date d'expiration du PV (si applicable)</div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                    <button type="submit" class="btn btn-success">
                        <i class="icon-base bx bx-check-circle me-1"></i>
                        Confirmer la finalisation
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Timeline de validation (optionnelle) -->
{% if historique_validations %}
<div class="container-xxl flex-grow-1 container-p-y mt-4">
    <div class="card">
        <div class="card-header bg-light">
            <h5 class="mb-0">
                <i class="icon-base bx bx-timeline me-2"></i>
                Historique des validations
            </h5>
        </div>
        <div class="card-body">
            <div class="timeline">
                {% for validation in historique_validations %}
                <div class="timeline-item">
                    <div class="timeline-point 
                        {% if validation.statut == 'approuve' %}bg-success
                        {% elif validation.statut == 'rejete' %}bg-danger
                        {% else %}bg-warning{% endif %}">
                        <i class="icon-base bx 
                            {% if validation.statut == 'approuve' %}bx-check
                            {% elif validation.statut == 'rejete' %}bx-x
                            {% else %}bx-time{% endif %}"></i>
                    </div>
                    <div class="timeline-content">
                        <div class="d-flex justify-content-between">
                            <h6 class="mb-1">{{ validation.get_statut_display }}</h6>
                            <small class="text-muted">{{ validation.date|date:"d/m/Y H:i" }}</small>
                        </div>
                        <p class="mb-0">
                            <strong>{{ validation.utilisateur.get_full_name|default:validation.utilisateur.username }}</strong>
                            {% if validation.commentaire %}
                            <br><small>{{ validation.commentaire }}</small>
                            {% endif %}
                        </p>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>
{% endif %}

<!-- Style additionnel -->
<style>
.timeline {
    position: relative;
    padding-left: 3rem;
}
.timeline-item {
    position: relative;
    padding-bottom: 2rem;
}
.timeline-item:last-child {
    padding-bottom: 0;
}
.timeline-point {
    position: absolute;
    left: -2.5rem;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
    z-index: 2;
}
.timeline-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: -1.5rem;
    top: 2rem;
    bottom: 0;
    width: 2px;
    background-color: #dee2e6;
    z-index: 1;
}
.timeline-content {
    padding-left: 0.5rem;
}

@media print {
    .layout-navbar, .card-header.bg-light, .btn, .modal, .col-lg-4 .card:not(:first-child) {
        display: none !important;
    }
    .col-lg-8 {
        width: 100% !important;
    }
    .card {
        border: none !important;
        box-shadow: none !important;
    }
    .badge {
        border: 1px solid #000 !important;
        color: #000 !important;
        background: transparent !important;
    }
}
</style>

{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Gestionnaire pour le bouton d'impression
    const printBtn = document.querySelector('[href*="imprimer"]');
    if (printBtn) {
        printBtn.addEventListener('click', function(e) {
            e.preventDefault();
            window.print();
        });
    }

    // Initialisation des tooltips Bootstrap
    const tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]');
    if (tooltips.length && typeof bootstrap !== 'undefined') {
        tooltips.forEach(tooltip => new bootstrap.Tooltip(tooltip));
    }

    // Confirmation avant finalisation
    const finaliserForm = document.querySelector('#finaliserModal form');
    if (finaliserForm) {
        finaliserForm.addEventListener('submit', function(e) {
            const numero = this.querySelector('input[name="numero"]').value;
            if (!confirm(`Confirmez-vous la finalisation du PV avec le numéro ${numero} ?`)) {
                e.preventDefault();
            }
        });
    }
});
</script>
{% endblock %}