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

{% block title %}Paramétrages - 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>
</div>

<!-- Barre de navigation secondaire -->
<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">
        <!-- Titre de la section -->
        <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 ouvrages</h4>
            </div>
        </div>

        <!-- Boutons d'action -->
        <ul class="navbar-nav flex-row align-items-center ms-md-auto">
            <button type="button" class="btn btn-success btn-sm me-2" data-bs-toggle="modal" data-bs-target="#ajouterOuvrageModal">
                <i class="fa fa-plus"></i> Ajouter
            </button>
            <li class="nav-item lh-1 me-4">
                <span>...</span>
            </li>
        </ul>
    </div>
</nav>

<!-- Contenu principal -->
<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 %}

    <!-- Liste des ouvrages -->
    <div class="row">   
        <div class="col-xxl-12 mb-6 order-0">
            <div class="card">
                <h5 class="card-header">Liste des ouvrages</h5>
                <div class="table-responsive text-nowrap">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>Code</th>
                                <th>Nom</th>
                                <th>Description</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody class="table-border-bottom-0">
                            {% for ouvrage in ouvrages %}   
                            <tr>
                                <td>
                                    <span>{{ ouvrage.code }}</span>
                                </td>
                                <td>{{ ouvrage.nom }}</td>
                                <td>{{ ouvrage.description|default:"-" }}</td>
                                <td>
                                    <!-- Bouton modifier -->
                                    <button type="button" class="btn btn-icon btn-warning" data-bs-toggle="modal" 
                                            data-bs-target="#modifierOuvrageModal{{ ouvrage.id }}">
                                        <span class="icon-base bx bx-edit-alt icon-md"></span>
                                    </button>
                                    
                                    <!-- Bouton supprimer -->
                                    <button type="button" class="btn btn-icon btn-danger" data-bs-toggle="modal" 
                                            data-bs-target="#supprimerOuvrageModal{{ ouvrage.id }}">
                                        <span class="icon-base bx bx-trash-alt icon-md"></span>
                                    </button>
                                </td>
                            </tr>

                            <!-- Modal de modification -->
                            <div class="modal fade" id="modifierOuvrageModal{{ ouvrage.id }}" tabindex="-1" 
                                 aria-labelledby="modifierOuvrageModalLabel{{ ouvrage.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="modifierOuvrageModalLabel{{ ouvrage.id }}">
                                                <i class="fa fa-edit me-2"></i>Modifier l'ouvrage
                                            </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:modifier_ouvrage' %}?id={{ ouvrage.id }}">
                                            {% csrf_token %}
                                            <div class="modal-body">
                                                <div class="mb-3">
                                                    <label for="code{{ ouvrage.id }}" class="form-label">Code <span class="text-danger">*</span></label>
                                                    <input type="text" class="form-control" id="code{{ ouvrage.id }}" 
                                                           name="code" value="{{ ouvrage.code }}" required>
                                                    <small class="text-muted">Code unique de l'ouvrage</small>
                                                </div>
                                                <div class="mb-3">
                                                    <label for="nom{{ ouvrage.id }}" class="form-label">Nom <span class="text-danger">*</span></label>
                                                    <input type="text" class="form-control" id="nom{{ ouvrage.id }}" 
                                                           name="nom" value="{{ ouvrage.nom }}" required>
                                                </div>
                                                <div class="mb-3">
                                                    <label for="description{{ ouvrage.id }}" class="form-label">Description</label>
                                                    <textarea class="form-control" id="description{{ ouvrage.id }}" 
                                                              name="description" rows="3">{{ ouvrage.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="supprimerOuvrageModal{{ ouvrage.id }}" tabindex="-1" 
                                aria-labelledby="supprimerOuvrageModalLabel{{ ouvrage.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="supprimerOuvrageModalLabel{{ ouvrage.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="Fermer"></button>
                                        </div>
                                        <div class="modal-body">
                                            <p>Êtes-vous sûr de vouloir supprimer l'ouvrage :</p>
                                            <p class="fw-bold">{{ ouvrage.code }} - {{ ouvrage.nom }}</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>
                                            <form method="POST" action="{% url 'controle:supprimer_ouvrage' %}" style="display: inline;">
                                                {% csrf_token %}
                                                <input type="hidden" name="id" value="{{ ouvrage.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="4" class="text-center">Aucun ouvrage trouvé</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                
                <!-- Pied de tableau -->
                <div class="card-footer text-muted">
                    <small>Total : {{ ouvrages|length }} ouvrage(s)</small>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal d'ajout -->
<div class="modal fade" id="ajouterOuvrageModal" tabindex="-1" aria-labelledby="ajouterOuvrageModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-info text-white">
                <h5 class="modal-title" id="ajouterOuvrageModalLabel">
                    <i class="fa fa-plus-circle me-2"></i>Ajouter un ouvrage
                </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:ajouter_ouvrage' %}">
                {% 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="Exemple : GO-01, FO-02, etc.">
                        <small class="text-muted">Code unique de l'ouvrage</small>
                    </div>
                    <div class="mb-3">
                        <label for="nom" class="form-label">Nom de l'ouvrage <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="nom" name="nom" required 
                               placeholder="Exemple : Fondations, Gros œuvre, etc.">
                    </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 de l'ouvrage"></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 %}
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

<script>
    // Attendre que le DOM soit chargé
    document.addEventListener('DOMContentLoaded', function() {
        console.log('DOM chargé - Initialisation');
        
        // Vérifier la disponibilité de Bootstrap
        if (typeof bootstrap !== 'undefined') {
            console.log('Bootstrap est disponible');
            
            // Auto-fermeture des alertes après 5 secondes
            setTimeout(function() {
                document.querySelectorAll('.alert').forEach(function(alert) {
                    try {
                        var bsAlert = new bootstrap.Alert(alert);
                        bsAlert.close();
                    } catch(e) {
                        console.error('Erreur lors de la fermeture de l\'alerte:', e);
                    }
                });
            }, 5000);
            
            // Réouverture du modal en cas d'erreur de formulaire
            {% if messages and request.method == 'POST' %}
                var modalElement = document.getElementById('ajouterOuvrageModal');
                if (modalElement) {
                    try {
                        var myModal = new bootstrap.Modal(modalElement);
                        myModal.show();
                    } catch(e) {
                        console.error('Erreur lors de l\'ouverture du modal:', e);
                    }
                }
            {% endif %}
        } else {
            console.warn('Bootstrap n\'est pas chargé correctement');
        }
    });

    // Version jQuery si disponible
    if (typeof $ !== 'undefined') {
        $(document).ready(function() {
            console.log('jQuery est prêt');
            
            // Gestionnaire d'événements pour les modals
            $('#ajouterOuvrageModal').on('show.bs.modal', function() {
                console.log('Ouverture du modal d\'ajout');
            });
            
            $('[id^=modifierOuvrageModal]').on('show.bs.modal', function() {
                console.log('Ouverture d\'un modal de modification');
            });
            
            $('[id^=supprimerOuvrageModal]').on('show.bs.modal', function() {
                console.log('Ouverture d\'un modal de suppression');
            });
        });
    }
</script>
{% endblock %}