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

{% block title %}Confirmation de suppression - Procès-verbal n°{{ pv.numero|default:"" }}{% 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-trash icon-md me-2 text-danger"></i>
                <h4 class="mb-0">Confirmation de suppression</h4>
            </div>
        </div>
        <div class="navbar-nav align-items-center">
            <span class="badge bg-label-danger p-2">
                <i class="icon-base bx bx-time me-1"></i>
                Action irréversible
            </span>
        </div>
    </div>
</nav>

<div class="container-xxl flex-grow-1 container-p-y">
    <div class="row">
        <div class="col-xl-8 col-lg-10 mx-auto">
            <!-- Carte de confirmation -->
            <div class="card">
                <div class="card-header bg-danger text-white">
                    <h5 class="mb-0">
                        <i class="icon-base bx bx-error-circle me-2"></i>
                        Attention : Suppression définitive
                    </h5>
                </div>
                
                <div class="card-body">
                    <!-- Message d'avertissement -->
                    <div class="alert alert-warning d-flex align-items-center mb-4" role="alert">
                        <i class="icon-base bx bx-error fs-2 me-3"></i>
                        <div>
                            <strong>Action irréversible !</strong><br>
                            Vous êtes sur le point de supprimer définitivement ce procès-verbal. 
                            Cette action ne peut pas être annulée.
                        </div>
                    </div>

                    <!-- Informations du PV à supprimer -->
                    <div class="card bg-light mb-4">
                        <div class="card-body">
                            <h6 class="fw-bold border-bottom pb-2 mb-3">
                                <i class="icon-base bx bx-file me-2"></i>
                                Procès-verbal à supprimer
                            </h6>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <table class="table table-sm table-borderless">
                                        <tr>
                                            <th width="40%">Numéro :</th>
                                            <td>
                                                <span class="fw-bold">
                                                    {% if pv.numero %}
                                                        {{ pv.numero }}
                                                    {% else %}
                                                        <span class="text-muted fst-italic">Non attribué</span>
                                                    {% endif %}
                                                </span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th>Type :</th>
                                            <td>{{ pv.get_type_pv_display|default:"Non spécifié" }}</td>
                                        </tr>
                                        <tr>
                                            <th>Client :</th>
                                            <td>{{ pv.client.nom|default:"Non spécifié" }}</td>
                                        </tr>
                                        <tr>
                                            <th>Date de visite :</th>
                                            <td>{{ pv.date_visite|date:"d/m/Y"|default:"Non spécifiée" }}</td>
                                        </tr>
                                    </table>
                                </div>
                                <div class="col-md-6">
                                    <table class="table table-sm table-borderless">
                                        <tr>
                                            <th width="40%">Statut :</th>
                                            <td>
                                                <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 %}">
                                                    {{ pv.get_statut_display|default:"Brouillon" }}
                                                </span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th>Créé le :</th>
                                            <td>{{ pv.date_creation|date:"d/m/Y H:i" }}</td>
                                        </tr>
                                        <tr>
                                            <th>Par :</th>
                                            <td>{{ pv.createur.get_full_name|default:pv.createur.username }}</td>
                                        </tr>
                                        <tr>
                                            <th>Points de contrôle :</th>
                                            <td>{{ elements_count|default:"0" }} élément(s)</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>

                            <!-- Lieu si disponible -->
                            {% if pv.lieu %}
                            <div class="mt-2">
                                <small class="text-muted">
                                    <i class="icon-base bx bx-map me-1"></i>
                                    Lieu : {{ pv.lieu }}
                                </small>
                            </div>
                            {% endif %}
                        </div>
                    </div>

                    <!-- Récapitulatif des éléments associés -->
                    <div class="row mb-4">
                        <div class="col-sm-4">
                            <div class="card bg-primary text-white text-center">
                                <div class="card-body py-3">
                                    <i class="icon-base bx bx-list-check fs-2"></i>
                                    <h3 class="mb-0">{{ elements_count|default:"0" }}</h3>
                                    <small>Points de contrôle</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="card bg-info text-white text-center">
                                <div class="card-body py-3">
                                    <i class="icon-base bx bx-group fs-2"></i>
                                    <h3 class="mb-0">{{ participants_count|default:"0" }}</h3>
                                    <small>Participants</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="card bg-warning text-white text-center">
                                <div class="card-body py-3">
                                    <i class="icon-base bx bx-camera fs-2"></i>
                                    <h3 class="mb-0">{{ photos_count|default:"0" }}</h3>
                                    <small>Photos</small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Avertissements supplémentaires selon le statut -->
                    {% if pv.statut == 'finalise' %}
                    <div class="alert alert-danger d-flex align-items-center mb-4" role="alert">
                        <i class="icon-base bx bx-check-shield fs-3 me-3"></i>
                        <div>
                            <strong>Attention : PV finalisé !</strong><br>
                            Ce procès-verbal est finalisé. Sa suppression est déconseillée car elle 
                            entraînera la perte d'un document officiel.
                        </div>
                    </div>
                    {% endif %}

                    {% if pv.statut == 'archive' %}
                    <div class="alert alert-danger d-flex align-items-center mb-4" role="alert">
                        <i class="icon-base bx bx-archive fs-3 me-3"></i>
                        <div>
                            <strong>Attention : PV archivé !</strong><br>
                            Ce procès-verbal est archivé. Assurez-vous d'avoir une sauvegarde 
                            avant de procéder à sa suppression.
                        </div>
                    </div>
                    {% endif %}

                    <!-- Conséquences de la suppression -->
                    <div class="card border-danger mb-4">
                        <div class="card-header bg-transparent border-danger">
                            <h6 class="text-danger fw-bold mb-0">
                                <i class="icon-base bx bx-x-circle me-2"></i>
                                Conséquences de la suppression
                            </h6>
                        </div>
                        <div class="card-body">
                            <ul class="list-unstyled mb-0">
                                <li class="mb-2">
                                    <i class="icon-base bx bx-x text-danger me-2"></i>
                                    Le document ne sera plus accessible dans la liste des PV
                                </li>
                                <li class="mb-2">
                                    <i class="icon-base bx bx-x text-danger me-2"></i>
                                    Tous les points de contrôle associés seront supprimés
                                </li>
                                <li class="mb-2">
                                    <i class="icon-base bx bx-x text-danger me-2"></i>
                                    Les signatures des participants seront perdues
                                </li>
                                <li class="mb-2">
                                    <i class="icon-base bx bx-x text-danger me-2"></i>
                                    Toutes les photos jointes seront effacées définitivement
                                </li>
                                <li>
                                    <i class="icon-base bx bx-x text-danger me-2"></i>
                                    L'historique des modifications sera irrécupérable
                                </li>
                            </ul>
                        </div>
                    </div>

                    <!-- Formulaire de confirmation -->
                    <form method="post" id="deleteForm" class="mt-4">
                        {% csrf_token %}
                        
                        <!-- Champ de confirmation optionnel -->
                        <div class="mb-4">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="confirmDelete" required>
                                <label class="form-check-label fw-bold" for="confirmDelete">
                                    Je comprends que cette action est irréversible
                                </label>
                            </div>
                            {% if pv.statut == 'finalise' or pv.statut == 'archive' %}
                            <div class="form-check mt-2">
                                <input class="form-check-input" type="checkbox" id="confirmSpecial" required>
                                <label class="form-check-label fw-bold text-danger" for="confirmSpecial">
                                    Je confirme vouloir supprimer ce document officiel
                                </label>
                            </div>
                            {% endif %}
                        </div>

                        <!-- Champ caché pour les statistiques (optionnel) -->
                        <input type="hidden" name="elements_count" value="{{ elements_count|default:'0' }}">
                        <input type="hidden" name="participants_count" value="{{ participants_count|default:'0' }}">
                        
                        <!-- Zone de commentaire optionnelle pour justifier la suppression -->
                        <div class="mb-4">
                            <label for="motif" class="form-label fw-bold">
                                <i class="icon-base bx bx-message me-1"></i>
                                Motif de la suppression (optionnel)
                            </label>
                            <textarea class="form-control" id="motif" name="motif" rows="2" 
                                      placeholder="Indiquez la raison de cette suppression..."></textarea>
                        </div>

                        <!-- Boutons d'action -->
                        <div class="d-flex justify-content-between align-items-center border-top pt-4">
                            <a href="{% url 'controle:visualiser_pv' pv.id %}" class="btn btn-outline-secondary">
                                <i class="icon-base bx bx-arrow-back me-1"></i>
                                Retour à la visualisation
                            </a>
                            <div>
                                <a href="{% url 'controle:liste_pv' %}" class="btn btn-secondary me-2">
                                    <i class="icon-base bx bx-x me-1"></i>
                                    Annuler
                                </a>
                                <button type="submit" name="confirm" value="yes" class="btn btn-danger" id="submitBtn" disabled>
                                    <i class="icon-base bx bx-trash me-1"></i>
                                    Supprimer définitivement
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <!-- PV similaires ou alternatives (optionnel) -->
            {% if pvs_similaires %}
            <div class="card mt-4">
                <div class="card-header bg-light">
                    <h6 class="mb-0">
                        <i class="icon-base bx bx-copy me-2"></i>
                        Procès-verbaux similaires
                    </h6>
                </div>
                <div class="card-body">
                    <p class="text-muted small mb-3">
                        Si vous supprimez ce PV, voici des alternatives possibles pour le même client :
                    </p>
                    <div class="list-group">
                        {% for pv_similaire in pvs_similaires %}
                        <a href="{% url 'controle:visualiser_pv' pv_similaire.id %}" class="list-group-item list-group-item-action">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <strong>PV n°{{ pv_similaire.numero|default:"Sans numéro" }}</strong>
                                    <br><small class="text-muted">{{ pv_similaire.date_visite|date:"d/m/Y" }}</small>
                                </div>
                                <span class="badge bg-primary">{{ pv_similaire.get_type_pv_display }}</span>
                            </div>
                        </a>
                        {% endfor %}
                    </div>
                </div>
            </div>
            {% endif %}

            <!-- Message d'information supplémentaire -->
            <div class="alert alert-info mt-4 d-flex align-items-center" role="alert">
                <i class="icon-base bx bx-info-circle fs-4 me-3"></i>
                <div>
                    <strong>Besoin de conserver une trace ?</strong><br>
                    Si vous souhaitez garder une trace de ce document sans le conserver dans le système, 
                    vous pouvez d'abord l'<a href="{% url 'controle:exporter_pv_pdf' pv.id %}" class="alert-link">exporter en PDF</a> 
                    avant de le supprimer.
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal de confirmation finale -->
<div class="modal fade" id="finalConfirmModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title">
                    <i class="icon-base bx bx-error-circle me-2"></i>
                    Confirmation finale
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Fermer"></button>
            </div>
            <div class="modal-body">
                <p class="fw-bold text-danger mb-3">
                    Êtes-vous absolument certain de vouloir supprimer ce procès-verbal ?
                </p>
                <p>
                    Cette action est définitive et toutes les données associées 
                    ({{ elements_count|default:"0" }} points de contrôle, 
                    {{ participants_count|default:"0" }} participants, 
                    {{ photos_count|default:"0" }} photos) seront perdues.
                </p>
                <div class="alert alert-warning">
                    <i class="icon-base bx bx-time me-2"></i>
                    Cette opération ne peut pas être annulée.
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                <button type="button" class="btn btn-danger" id="forceDelete">
                    <i class="icon-base bx bx-trash me-1"></i>
                    Oui, supprimer définitivement
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Script de gestion de la confirmation -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    const confirmCheckbox = document.getElementById('confirmDelete');
    const confirmSpecial = document.getElementById('confirmSpecial');
    const submitBtn = document.getElementById('submitBtn');
    const deleteForm = document.getElementById('deleteForm');
    const motifInput = document.getElementById('motif');
    const finalConfirmModal = new bootstrap.Modal(document.getElementById('finalConfirmModal'));
    const forceDeleteBtn = document.getElementById('forceDelete');

    // Fonction pour vérifier l'état des checkboxes
    function checkConfirmation() {
        let isConfirmed = confirmCheckbox && confirmCheckbox.checked;
        
        // Si le PV est finalisé ou archivé, les deux checkboxes doivent être cochées
        if (confirmSpecial) {
            isConfirmed = isConfirmed && confirmSpecial.checked;
        }
        
        if (submitBtn) {
            submitBtn.disabled = !isConfirmed;
        }
    }

    // Ajouter les écouteurs d'événements
    if (confirmCheckbox) {
        confirmCheckbox.addEventListener('change', checkConfirmation);
    }
    
    if (confirmSpecial) {
        confirmSpecial.addEventListener('change', checkConfirmation);
    }

    // Intercepter la soumission du formulaire
    if (deleteForm) {
        deleteForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Vérifier que les checkboxes sont cochées
            if (confirmCheckbox && !confirmCheckbox.checked) {
                alert('Veuillez confirmer que vous comprenez les conséquences de cette action.');
                return;
            }
            
            if (confirmSpecial && !confirmSpecial.checked) {
                alert('Veuillez confirmer la suppression de ce document officiel.');
                return;
            }
            
            // Afficher le modal de confirmation finale
            finalConfirmModal.show();
        });
    }

    // Action de suppression forcée depuis le modal
    if (forceDeleteBtn) {
        forceDeleteBtn.addEventListener('click', function() {
            finalConfirmModal.hide();
            
            // Ajouter un indicateur de chargement
            if (submitBtn) {
                submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Suppression...';
                submitBtn.disabled = true;
            }
            
            // Créer un formulaire de soumission avec les données
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = deleteForm.action;
            
            // Ajouter le token CSRF
            const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;
            const csrfInput = document.createElement('input');
            csrfInput.type = 'hidden';
            csrfInput.name = 'csrfmiddlewaretoken';
            csrfInput.value = csrfToken;
            form.appendChild(csrfInput);
            
            // Ajouter la confirmation
            const confirmInput = document.createElement('input');
            confirmInput.type = 'hidden';
            confirmInput.name = 'confirm';
            confirmInput.value = 'yes';
            form.appendChild(confirmInput);
            
            // Ajouter le motif si présent
            if (motifInput && motifInput.value.trim()) {
                const motifHidden = document.createElement('input');
                motifHidden.type = 'hidden';
                motifHidden.name = 'motif';
                motifHidden.value = motifInput.value.trim();
                form.appendChild(motifHidden);
            }
            
            document.body.appendChild(form);
            form.submit();
        });
    }

    // Avertissement avant de quitter la page
    window.addEventListener('beforeunload', function(e) {
        if (confirmCheckbox && confirmCheckbox.checked) {
            // Empêcher le message par défaut
            e.preventDefault();
            e.returnValue = '';
        }
    });

    // Animation sur les cartes de statistiques
    const statCards = document.querySelectorAll('.col-sm-4 .card');
    statCards.forEach(card => {
        card.addEventListener('mouseenter', function() {
            this.style.transform = 'scale(1.05)';
            this.style.transition = 'transform 0.3s ease';
        });
        
        card.addEventListener('mouseleave', function() {
            this.style.transform = 'scale(1)';
        });
    });

    // Journalisation de la tentative de suppression (pour audit)
    function logDeletionAttempt() {
        console.log('Tentative de suppression du PV:', {
            id: '{{ pv.id }}',
            numero: '{{ pv.numero|escapejs }}',
            statut: '{{ pv.statut }}',
            timestamp: new Date().toISOString()
        });
        
        // Vous pouvez envoyer ces données à votre backend pour audit
        {% if enable_audit_log %}
        fetch('{% url "audit_log" %}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': '{{ csrf_token }}'
            },
            body: JSON.stringify({
                action: 'delete_attempt',
                pv_id: '{{ pv.id }}',
                pv_numero: '{{ pv.numero }}',
                timestamp: new Date().toISOString()
            })
        }).catch(err => console.error('Erreur audit:', err));
        {% endif %}
    }

    // Appeler la journalisation au chargement
    logDeletionAttempt();
});

// Fonction pour sauvegarder une copie avant suppression
function saveBackup() {
    window.location.href = "{% url 'controle:exporter_pv_pdf' pv.id %}?backup=true";
}
</script>

<!-- Styles supplémentaires -->
<style>
.card {
    transition: all 0.2s ease;
}
.card.border-danger {
    border-width: 2px;
}
.list-unstyled li {
    padding: 5px 0;
    border-bottom: 1px solid #f0f0f0;
}
.list-unstyled li:last-child {
    border-bottom: none;
}
.col-sm-4 .card {
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.col-sm-4 .card:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
#submitBtn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.form-check-input:checked {
    background-color: #dc3545;
    border-color: #dc3545;
}
/* Animation de pulsation pour l'avertissement */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}
.alert-danger {
    animation: pulse 2s infinite;
}
</style>
{% endblock %}