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


{% block title %}Liste des procés-verbaux - Contrôle Technique{% endblock %}

{% block content %}

<div class="container-xxl flex-grow-1 container-p-y">
    <div class="d-flex flex-wrap" id="icons-container">
               
                
    <a href="{% url 'controle:param_listepv'%}">
        <div class="card icon-card cursor-pointer text-center mb-6 mx-3 card-pv">
            <div class="card-body">
                <i class="icon-base bx bxl-figma mb-2"></i>
                <p class="icon-name text-capitalize text-truncate mb-0">Procès-Verbaux</p>
            </div>
        </div>
    </a>

    <a href="{% url 'controle:liste_ouvrages'%}">
        <div class="card icon-card cursor-pointer text-center mb-6 mx-3 card-ouvrages">
            <div class="card-body">
                <i class="icon-base bx bxl-redbubble mb-2"></i>
                <p class="icon-name text-capitalize text-truncate mb-0">Ouvrages</p>
            </div>
        </div>
    </a>

    <a href="{% url 'controle:liste_elements' %}">
        <div class="card icon-card cursor-pointer text-center mb-6 mx-3 card-elements">
            <div class="card-body">
                <i class="icon-base bx bxl-patreon mb-2"></i>
                <p class="icon-name text-capitalize text-truncate mb-0">Eléments d'Ouvrages</p>
            </div>
        </div>
    </a>
    <a href="{% url 'controle:liste_points_controle' %}">
        <div class="card icon-card cursor-pointer text-center mb-6 mx-3 card-elements">
            <div class="card-body">
                <i class="icon-base bx bxl-audible mb-2"></i>
                <p class="icon-name text-capitalize text-truncate mb-0">Points de contrôle </p>
            </div>
        </div>
    </a>
    
</div>
    
<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">
        <!-- Search -->
        <div class="navbar-nav align-items-center me-auto">
            <div class="nav-item d-flex align-items-center">
                <span class="w-px-22 h-px-22"><i class="icon-base bx bx-building icon-md"></i></span>
                <h4>Paramétrages: Liste des procès verbaux</h4>
            </div>
        </div>
        <!-- /Search -->

        <ul class="navbar-nav flex-row align-items-center ms-md-auto">
            <!-- Bouton pour ouvrir le modal -->
            <button type="button" class="btn btn-success btn-sm me-2" data-bs-toggle="modal" data-bs-target="#ajouterTypePVModal">
                <i class="fa fa-plus"></i> Ajouter
            </button>
            <li class="nav-item lh-1 me-4">
                <span><template shadowrootmode="closed"><style type="text/css">body{margin:0}a{text-decoration:none;outline:0}.widget{display:inline-block;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;font-size:0;line-height:0;white-space:nowrap}.btn,.social-count{position:relative;display:inline-block;display:inline-flex;height:14px;padding:2px 5px;font-size:11px;font-weight:600;line-height:14px;vertical-align:bottom;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-repeat:repeat-x;background-position:-1px -1px;background-size:110% 110%;border:1px solid}.btn{border-radius:.25em}.btn:not(:last-child){border-radius:.25em 0 0 .25em}.social-count{border-left:0;border-radius:0 .25em .25em 0}.widget-lg .btn,.widget-lg .social-count{height:16px;padding:5px 10px;font-size:12px;line-height:16px}.octicon{display:inline-block;vertical-align:text-top;fill:currentColor;overflow:visible}.btn:focus-visible,.social-count:focus-visible{outline:2px solid #0969da;outline-offset:-2px}.btn{color:#25292e;background-color:#ebf0f4;border-color:#d1d9e0;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3clinearGradient id='o' x2='0' y2='1'%3e%3cstop stop-color='%23f6f8fa'/%3e%3cstop offset='90%25' stop-color='%23ebf0f4'/%3e%3c/linearGradient%3e%3crect width='100%25' height='100%25' fill='url(%23o)'/%3e%3c/svg%3e");background-image:-moz-linear-gradient(top, #f6f8fa, #ebf0f4 90%);background-image:linear-gradient(180deg, #f6f8fa, #ebf0f4 90%);filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr='#FFF6F8FA', endColorstr='#FFEAEFF3')}:root .btn{filter:none}.btn:hover,.btn:focus{background-color:#e5eaee;background-position:0 -0.5em;border-color:#d1d9e0;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3clinearGradient id='o' x2='0' y2='1'%3e%3cstop stop-color='%23eff2f5'/%3e%3cstop offset='90%25' stop-color='%23e5eaee'/%3e%3c/linearGradient%3e%3crect width='100%25' height='100%25' fill='url(%23o)'/%3e%3c/svg%3e");background-image:-moz-linear-gradient(top, #eff2f5, #e5eaee 90%);background-image:linear-gradient(180deg, #eff2f5, #e5eaee 90%);filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr='#FFEFF2F5', endColorstr='#FFE4E9ED')}:root .btn:hover,:root .btn:focus{filter:none}.btn:active{background-color:#e6eaef;border-color:#d1d9e0;background-image:none;filter:none}.social-count{color:#25292e;background-color:#fff;border-color:#d1d9e0}.social-count:hover,.social-count:focus{color:#0969da}.octicon-heart{color:#bf3989}</style></template></span>
            </li>
        </ul>
    </div> <br>
    
</nav> 
                   
<div class="container-xxl flex-grow-1 container-p-y"> 
    <!-- Affichage des messages -->
    {% 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="Close"></button>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}
    
    <div class="row">   
        <div class="col-xxl-12 mb-6 order-0">
            <div class="card">
                
                <div class="table-responsive text-nowrap">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>Code</th>
                                <th>Libellé</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody class="table-border-bottom-0">
                            {% for type in typespv %}   
                            <tr>
                                <td>
                                    <span>{{ type.code }}</span>
                                </td>
                                <td>{{ type.libelle }}</td>
                                <td>
                                    <!-- Bouton pour ouvrir le modal de modification -->
                                    <button type="button" class="btn btn-icon btn-warning" data-bs-toggle="modal" 
                                            data-bs-target="#modifierTypePVModal{{ type.id }}">
                                        <span class="icon-base bx bx-edit-alt icon-md"></span>
                                    </button>
                                    
                                    <!-- Bouton pour ouvrir le modal de suppression -->
                                    <button type="button" class="btn btn-icon btn-danger" data-bs-toggle="modal" 
                                            data-bs-target="#supprimerTypePVModal{{ type.id }}">
                                        <span class="icon-base bx bx-trash-alt icon-md"></span>
                                    </button>
                                </td>
                            </tr>

                            <!-- Modal de modification pour chaque type -->
                            <div class="modal fade" id="modifierTypePVModal{{ type.id }}" tabindex="-1" 
                                 aria-labelledby="modifierTypePVModalLabel{{ type.id }}" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header bg-warning text-white">
                                            <h5 class="modal-title" id="modifierTypePVModalLabel{{ type.id }}">
                                                <i class="fa fa-edit me-2"></i>Modifier le type de PV
                                            </h5>
                                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                        <form method="POST" action="{% url 'controle:modifier_type_pv' %}?id={{ type.id }}">
                                            {% csrf_token %}
                                            <div class="modal-body">
                                                <div class="mb-3">
                                                    <label for="code{{ type.id }}" class="form-label">Code <span class="text-danger">*</span></label>
                                                    <input type="text" class="form-control" id="code{{ type.id }}" 
                                                           name="code" value="{{ type.code }}" required>
                                                    <small class="text-muted">Code unique identifiant le type de PV</small>
                                                </div>
                                                <div class="mb-3">
                                                    <label for="libelle{{ type.id }}" class="form-label">Libellé <span class="text-danger">*</span></label>
                                                    <input type="text" class="form-control" id="libelle{{ type.id }}" 
                                                           name="libelle" value="{{ type.libelle }}" required>
                                                </div>
                                                <div class="mb-3">
                                                    <label for="description{{ type.id }}" class="form-label">Description</label>
                                                    <textarea class="form-control" id="description{{ type.id }}" 
                                                              name="description" rows="3">{{ type.description|default:'' }}</textarea>
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                                                    <i class="fa fa-times me-1"></i>Annuler
                                                </button>
                                                <button type="submit" class="btn btn-warning">
                                                    <i class="fa fa-save me-1"></i>Modifier
                                                </button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>

                            <!-- Modal de confirmation de suppression -->
                            <div class="modal fade" id="supprimerTypePVModal{{ type.id }}" tabindex="-1" 
                                aria-labelledby="supprimerTypePVModalLabel{{ type.id }}" aria-hidden="true">
                                <div class="modal-dialog modal-sm">
                                    <div class="modal-content">
                                        <div class="modal-header bg-danger text-white">
                                            <h5 class="modal-title" id="supprimerTypePVModalLabel{{ type.id }}">
                                                <i class="fa fa-exclamation-triangle me-2"></i>Confirmation
                                            </h5>
                                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <p>Êtes-vous sûr de vouloir supprimer le type de PV :</p>
                                            <p class="fw-bold">{{ type.code }} - {{ type.libelle }}</p>
                                            <p class="text-danger"><small>Cette action est irréversible.</small></p>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                                                <i class="fa fa-times me-1"></i>Annuler
                                            </button>
                                            <!-- Formulaire POST pour la suppression (plus sécurisé) -->
                                            <form method="POST" action="{% url 'controle:supprimer_type_pv' %}" style="display: inline;">
                                                {% csrf_token %}
                                                <input type="hidden" name="id" value="{{ type.id }}">
                                                <button type="submit" class="btn btn-danger">
                                                    <i class="fa fa-trash me-1"></i>Supprimer
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {% empty %}
                            <tr>
                                <td colspan="3" class="text-center">Aucun type de PV trouvé</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                <!-- Informations supplémentaires -->
                <div class="card-footer text-muted">
                    <small>Total: {{ typespv|length }} type(s) de PV</small>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal pour ajouter un type de PV -->
<div class="modal fade" id="ajouterTypePVModal" tabindex="-1" aria-labelledby="ajouterTypePVModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-info text-white">
                <h5 class="modal-title" id="ajouterTypePVModalLabel">
                    <i class="fa fa-plus-circle me-2"></i>Ajouter un type de PV
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="POST" action="{% url 'controle:ajouter_type_pv' %}">
                {% csrf_token %}
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="code" class="form-label">Code <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="code" name="code" required 
                               placeholder="Ex: PV-REC, PV-PROV, etc.">
                        <small class="text-muted">Code unique identifiant le type de PV</small>
                    </div>
                    <div class="mb-3">
                        <label for="libelle" class="form-label">Libellé <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="libelle" name="libelle" required 
                               placeholder="Ex: Procès-verbal de réception">
                    </div>
                    <div class="mb-3">
                        <label for="description" class="form-label">Description</label>
                        <textarea class="form-control" id="description" name="description" rows="3" 
                                  placeholder="Description facultative du type de PV"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fa fa-times me-1"></i>Annuler
                    </button>
                    <button type="submit" class="btn btn-success">
                        <i class="fa fa-save me-1"></i>Enregistrer
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_js %}
<script>
    // Attendre que le DOM soit complètement chargé
    document.addEventListener('DOMContentLoaded', function() {
        console.log('DOM chargé - Initialisation Bootstrap');
        
        // Vérifier si Bootstrap est disponible
        if (typeof bootstrap !== 'undefined') {
            console.log('Bootstrap est disponible');
            
            // Auto-fermeture des alertes après 5 secondes
            setTimeout(function() {
                var alerts = document.querySelectorAll('.alert');
                alerts.forEach(function(alert) {
                    var bsAlert = new bootstrap.Alert(alert);
                    bsAlert.close();
                });
            }, 5000);
            
            // Ouvrir automatiquement le modal si erreur dans le formulaire
            {% if messages and request.method == 'POST' %}
                console.log('Tentative d\'ouverture automatique du modal');
                var modalElement = document.getElementById('ajouterTypePVModal');
                if (modalElement) {
                    var myModal = new bootstrap.Modal(modalElement);
                    myModal.show();
                }
            {% endif %}
        } else {
            console.error('Bootstrap n\'est pas chargé!');
        }
    });

    // Alternative: utiliser jQuery si disponible
    $(document).ready(function() {
        console.log('jQuery prêt');
        
        // Vérifier si le modal peut être ouvert manuellement
        $('#ajouterTypePVModal').on('show.bs.modal', function() {
            console.log('Le modal d\'ajout va s\'ouvrir');
        });
        
        // Gestion des modals de modification
        $('[id^=modifierTypePVModal]').on('show.bs.modal', function() {
            console.log('Un modal de modification va s\'ouvrir');
        });
        
        // Gestion des modals de suppression
        $('[id^=supprimerTypePVModal]').on('show.bs.modal', function() {
            console.log('Un modal de suppression va s\'ouvrir');
        });
    });
</script>

<!-- Ajouter Font Awesome si pas déjà dans base.html -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
{% endblock %}