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

{% block title %}Points de contrôle - 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">Points de contrôle</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">Éléments d'ouvrage</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-layer icon-md"></i></span>
                <h4>Paramétrages : Liste des points de contrôle</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="#ajouterPointModal">
                <i class="fa fa-plus"></i> Ajouter un point de contrôle
            </button>
        </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 %}

    <!-- Filtres -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <form method="GET" class="row g-3">
                        <div class="col-md-4">
                            <label for="element" class="form-label">Filtrer par élément d'ouvrage</label>
                            <select name="element" id="element" class="form-select">
                                <option value="">Tous les éléments d'ouvrage</option>
                                {% for element in elements_ouvrage  %}
                                <option value="{{ element.id }}" {% if request.GET.element == element.id|stringformat:"s" %}selected{% endif %}>
                                    {{ element.code }} - {{ element.nom }}
                                </option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-4 d-flex align-items-end">
                            <button type="submit" class="btn btn-primary me-2">
                                <i class="fa fa-filter me-1"></i>Filtrer
                            </button>
                            <a href="{% url 'controle:liste_points_controle' %}" class="btn btn-secondary">
                                <i class="fa fa-undo me-1"></i>Réinitialiser
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Liste des points de contrôle -->
    <div class="row">
        <div class="col-xxl-12 mb-6 order-0">
            <div class="card">
                <h5 class="card-header">Liste des points de contrôle</h5>
                <div class="table-responsive text-nowrap">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>Élément d'ouvrage</th>
                                <th>Point de contrôle</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody class="table-border-bottom-0">
                            {% for point in points_controle %}
                            <tr>
                                <td>
                                    {% if point.element %}
                                    <span class="badge bg-info">{{ point.element.nom }}</span>
                                    <small class="text-muted d-block">{{ point.element.code }}</small>
                                    {% else %}
                                    <span class="badge bg-secondary">Non associé</span>
                                    {% endif %}
                                </td>
                                <td>{{ point.point_de_controle}}</td>
                                <td>
                                    <!-- Bouton modifier -->
                                    <button type="button" class="btn btn-icon btn-warning" data-bs-toggle="modal"
                                            data-bs-target="#modifierPointModal{{ point.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="#supprimerPointModal{{ point.id }}">
                                        <span class="icon-base bx bx-trash-alt icon-md"></span>
                                    </button>
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="5" class="text-center py-4">
                                    <i class="fa fa-clipboard-list fa-3x text-muted mb-3"></i>
                                    <p class="text-muted">Aucun point de contrôle trouvé</p>
                                    {% if request.GET.element %}
                                    <a href="{% url 'controle:liste_points_controle' %}" class="btn btn-sm btn-primary">
                                        <i class="fa fa-undo me-1"></i>Réinitialiser les filtres
                                    </a>
                                    {% endif %}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                <!-- Pied de tableau (pagination) -->
                {% if points_controle.has_other_pages %}
                <div class="card-footer d-flex justify-content-between align-items-center">
                    <div class="text-muted">
                        <small>Total : {{ points_controle.paginator.count }} point(s) de contrôle</small>
                    </div>
                    <nav aria-label="Navigation des pages">
                        <ul class="pagination pagination-sm mb-0">
                            {% if points_controle.has_previous %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ points_controle.previous_page_number }}{% if request.GET.element %}&element={{ request.GET.element }}{% endif %}">
                                    <i class="fa fa-chevron-left"></i>
                                </a>
                            </li>
                            {% endif %}

                            {% for i in points_controle.paginator.page_range %}
                                {% if points_controle.number == i %}
                                <li class="page-item active">
                                    <span class="page-link">{{ i }}</span>
                                </li>
                                {% else %}
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ i }}{% if request.GET.element %}&element={{ request.GET.element }}{% endif %}">
                                        {{ i }}
                                    </a>
                                </li>
                                {% endif %}
                            {% endfor %}

                            {% if points_controle.has_next %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ points_controle.next_page_number }}{% if request.GET.element %}&element={{ request.GET.element }}{% endif %}">
                                    <i class="fa fa-chevron-right"></i>
                                </a>
                            </li>
                            {% endif %}
                        </ul>
                    </nav>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>


<!-- Modal d'ajout -->
<div class="modal fade" id="ajouterPointModal" tabindex="-1" aria-labelledby="ajouterPointModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title" id="ajouterPointModalLabel">
                    <i class="fa fa-plus-circle me-2"></i>Ajouter un point de contrôle
                </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_point_controle' %}">
                {% csrf_token %}
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="element" class="form-label">Élément d'ouvrage <span class="text-danger">*</span></label>
                        <select class="form-select" id="element" name="element_id" required>
                            <option value="">Sélectionnez un élément d'ouvrage</option>
                            {% for element in elements_ouvrage  %}
                            <option value="{{ element.id }}">
                                {{ element.ouvrage.nom }} - {{ element.nom }} ({{ element.code }})
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                    
                    <div class="mb-3">
                        <label for="point_de_controle" class="form-label">Point de contrôle <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="point_de_controle" name="point_de_controle" required
                               placeholder="Exemple : Armatures inférieures de flexion">
                    </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>

<!-- Modals de modification (à générer pour chaque point) -->
{% for point in points_controle %}
<div class="modal fade" id="modifierPointModal{{ point.id }}" tabindex="-1"
     aria-labelledby="modifierPointModalLabel{{ point.id }}" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-warning text-white">
                <h5 class="modal-title" id="modifierPointModalLabel{{ point.id }}">
                    <i class="fa fa-edit me-2"></i>Modifier le point de contrôle
                </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_point_controle' point.id %}">
                {% csrf_token %}
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="element{{ point.id }}" class="form-label">Élément d'ouvrage <span class="text-danger">*</span></label>
                        <select class="form-select" id="element{{ point.id }}" name="element_id" required>
                            <option value="">Sélectionnez un élément d'ouvrage</option>
                            {% for element in elements_ouvrage %}
                            <option value="{{ element.id }}" {% if point.element.id == element.id %}selected{% endif %}>
                                {{ element.ouvrage.nom }} - {{ element.nom }} ({{ element.code }})
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="point_de_controle{{ point.id }}" class="form-label">Point de contrôle <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="point_de_controle{{ point.id }}"
                               name="point_de_controle" value="{{ point.point_de_controle }}" required>
                    </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="supprimerPointModal{{ point.id }}" tabindex="-1"
     aria-labelledby="supprimerPointModalLabel{{ point.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="supprimerPointModalLabel{{ point.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 ce point de contrôle ?</p>
                <p class="fw-bold">{{ point.point_de_controle|truncatechars:100 }}</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_point_controle' point.id %}">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-danger">
                        <i class="fa fa-trash me-1"></i>Supprimer
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endfor %}

{% 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>
    document.addEventListener('DOMContentLoaded', function() {
        // Auto-fermeture des alertes après 5 secondes
        setTimeout(function() {
            document.querySelectorAll('.alert').forEach(function(alert) {
                var bsAlert = new bootstrap.Alert(alert);
                bsAlert.close();
            });
        }, 5000);
    });
</script>
{% endblock %}