{% extends "base.html" %}
{% load static %}
{% load i18n %}

{% block head %}
<style>
    .thematic-card {
        border: 1px solid #e2e8f0;
        border-radius: 0.75rem;
        transition: transform 0.2s ease-in-out, box-shadow 0.2s;
        padding: 0.5rem;
    }

    /* .thematic-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    } */
</style>
    
{% endblock head %}


{% block content %}
<div class="container py-4">
    <h3 class="text-center mb-4" style="color: #0f172a;">{% translate "Choisir la thématique" %}</h3>

    <div class="row justify-content-center g-3">
        {% for thematic in thematics %}
        <div class="col-6 col-sm-4 col-md-3 col-lg-2 d-flex justify-content-center">
            <a href="{{ thematic.url }}" class="text-decoration-none text-dark w-100">
                <div class="card thematic-card shadow text-center h-100">
                    <div class="card-body py-3 px-2">
                        <i class="bi {{ thematic.icon }} fs-2 mb-2"></i>
                        <h6 class="card-title mb-0">{{ thematic.name }}</h6>
                    </div>
                </div>
            </a>
        </div>
        {% endfor %}
    </div>
    {% if intervention_type == 'corrective' %}
        <div class="row justify-content-center g-3 mt-4">
            <div class="col-6 d-flex align-items-center">
                <div class="mb-3 w-100">
                    <label for="symptom-input" class="form-label w-100 text-center mb-2" style="color: #0f172a;">{% translate "Ou choisir directement un symptôme" %}</label>
                    <div class="input-group">
                        <input type="text" id="symptom-input" class="form-control" name="symptom_name"
                               placeholder="{% translate 'Saisir le nom du symptôme'%}" autocomplete="off">
                        <button type="button" id="symptom-input-btn" class="btn btn-light">{% translate "Sélectionner" %}</button>
                    </div>

                    <input type="hidden" id="symptom-id">
                    <input type="hidden" id="symptom-thematic">
                </div>
            </div>
        </div>
    {% endif %}
</div>
{% endblock content %}


{% block script %}

    <!-- jQuery UI 1.14.1 (local) -->
    <link rel="stylesheet" href="{% static 'common/jquery-ui.min.css' %}">
    <script defer src="{% static 'common/jquery-ui.min.js' %}"></script>

    {{ symptoms|json_script:"symptom-list" }}

    <style>
        .ui-autocomplete { z-index: 2000; } /* si utilisé dans une modale */
    </style>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const DATA = JSON.parse(document.getElementById("symptom-list").textContent);

            // Utilitaires
            const normalize = s => (s || "").normalize("NFD").replace(/\p{Diacritic}/gu, "").toLowerCase();
            const findBest = (term) => {
                // 1) exact (insensible accents/casse) ; 2) première inclusion
                const n = normalize(term);
                let exact = DATA.find(o => normalize(o.value) === n);
                if (exact) return exact;
                let partial = DATA.find(o => normalize(o.value).includes(n));
                return partial || null;
            };

            // Autocomplete
            $("#symptom-input").autocomplete({
                source: function (request, response) {
                    const term = normalize(request.term);
                    const items = DATA.filter(o => normalize(o.value).includes(term));
                    response(items);
                },
                minLength: 2,
                delay: 100,
                focus: function (event, ui) {
                    // Affiche uniquement le nom dans l'input quand on survole au clavier
                    $("#symptom-input").val(ui.item.value);
                    return false;
                },
                select: function (event, ui) {
                    // Stocke id + thematic quand l’utilisateur choisit une suggestion
                    $("#symptom-input").val(ui.item.value);
                    $("#symptom-id").val(ui.item.id);
                    $("#symptom-thematic").val(ui.item.thematic);
                    return false;
                }
            });

            // Bouton "Sélectionner" → redirection
            $("#symptom-input-btn").on("click", function () {
                const typed = $("#symptom-input").val().trim();
                if (!typed) return;

                // Si l’utilisateur a déjà sélectionné dans la liste, on a les hidden remplis
                let id = $("#symptom-id").val();
                let thematic = $("#symptom-thematic").val();

                // Sinon, on essaie de déduire la "meilleure" correspondance côté client
                if (!id || !thematic) {
                    const best = findBest(typed);
                    if (best) {
                        id = best.id;
                        thematic = best.thematic;
                    }
                }

                if (!id || !thematic) {
                    // Optionnel: petit feedback si rien trouvé
                    // alert("Aucun symptôme correspondant trouvé.");
                    return;
                }

                const url = `/interventions/${encodeURIComponent(thematic)}/add/?maintain_type=corrective&symptom_id=${encodeURIComponent(id)}`;
                window.location.assign(url);
            });

            // Si l’utilisateur modifie manuellement le texte, on vide les hidden
            $("#symptom-input").on("input", function () {
                $("#symptom-id").val("");
                $("#symptom-thematic").val("");
            });
        });
    </script>

{% endblock script %}