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

{% block head %}
    <title>StreetUp | {% translate "Accueil" %}</title>
    <link rel="stylesheet" href="{% static 'home/home_index.css' %}">
{% endblock head %}

{% block content %}
    {% include "home/_intervention_type_modal.html" %}
    {% if can_add_structures_repair %}
    {% include "home/_add_repair_intervention_modal.html" %}
    {% endif %}
    <div class="background-layer"></div>
    <div class="bg-image">  
        <div class="container content-box">
            <!-- <h1 class="display-4 m-3 halo-text"><strong>Brussels Mobility</strong></h1> -->
             <div class="row justify-content-center mt-2 mb-3">
                <div class="col-md-8">
                    {% if can_add_structures_repair %}
                    <button class="btn btn-light main-button my-1 ms-1" type="button" data-bs-toggle="modal" data-bs-target="#addRepairInterventionModal">
                        <i class="bi bi-plus-lg me-2"></i>{% translate "Intervention Réparation" %}
                    </button>
                    {% endif %}
                    {% if user.config|has_any_role:"manager,admin,controller,external_manager" %}
                    <button class="btn btn-light main-button my-1 ms-1" type="button" data-bs-toggle="modal" data-bs-target="#interventionTypeModal">
                        <i class="bi bi-wrench me-2"></i>{% translate "Nouvelle intervention" %}
                    </button>
                    {% elif user.config|has_any_role:"operator" %}
                    <a class="btn btn-light main-button my-1 ms-1"
                        href="{% url 'interventions:intervention_add_choose_thematic' %}?type=corrective">
                        <i class="bi bi-wrench me-2"></i>{% translate "Nouvelle intervention" %}
                    </a>
                    {% endif %}
                    {% if user.config|has_any_role:"manager,admin" %}
                    <a href="{% url 'projects:projects_add' %}" class="btn btn-light main-button my-1 ms-1" type="button">
                        <i class="bi bi-wrench-adjustable me-2"></i>{% translate "Nouveau projet" %}
                    </a>
                    <a href="{% url 'contracts:contracts_orders_add' %}" class="btn btn-light main-button my-1 ms-1" type="button">
                        <i class="bi bi-currency-euro me-2"></i>{% translate "Nouvelle commande" %}
                    </a>
                    {% endif %}
                </div>
            </div>

            {# ========== Bouton rapport journalier ========== #}
            {% if can_generate_daily_report %}
            <div class="row justify-content-center mb-3">
                <div class="col-md-8">
                    <div class="dropdown d-inline-block">
                        <button class="btn btn-light main-button my-1 ms-1 dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="bi bi-file-earmark-bar-graph me-2"></i>{% translate "Rapport journalier" %}
                        </button>
                        <ul class="dropdown-menu">
                            <li>
                                <a class="dropdown-item" href="{% url 'contracts:daily_report' %}?format=pdf" target="_blank">
                                    <i class="bi bi-file-pdf me-2 text-danger"></i>{% translate "Télécharger PDF" %}
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="{% url 'contracts:daily_report' %}?format=excel">
                                    <i class="bi bi-file-earmark-excel me-2 text-success"></i>{% translate "Télécharger Excel" %}
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="{% url 'contracts:daily_report' %}?format=zip">
                                    <i class="bi bi-file-zip me-2 text-warning"></i>{% translate "Télécharger ZIP (PDF + Excel)" %}
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            {% endif %}

            {# ========== Tuiles raccourcis symptômes pour opérateurs ========== #}
            {% if is_operator and shortcut_symptoms %}
            <div class="row justify-content-center mb-3">
                <div class="col-md-12">
                    <p class="text-center mb-2" style="color: var(--brand-color); font-weight: 500;">{% translate "Raccourcis symptômes fréquents" %}</p>
                    <div class="row g-2 justify-content-center">
                        {% for symptom in shortcut_symptoms %}
                        <div class="col-6 col-md-3">
                            <a href="{% url 'interventions:intervention_add' thematic_code=symptom.thematic_code %}?symptom_id={{ symptom.id }}&maintain_type=corrective"
                               class="card shortcut-symptom-card text-decoration-none h-100">
                                <div class="card-body text-center py-1">
                                    <i class="bi {{ symptom.icon }} fs-3 d-block" style="color: var(--brand-color);"></i>
                                    <span class="card-text">{{ symptom.name }}</span>
                                </div>
                            </a>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            {% endif %}


            {# ========== LIGNE : Interventions à approuver ========== #}
            {% if user.config|has_any_role:"admin, manager, controller" %}
            <div class="row justify-content-center mb-2">
                <div class="col-md-3 ps-1 pe-1">
                    <div class="plan-card">
                        <p class="card-text">
                            <i class="bi bi-check-circle plan-color"></i>
                            <a href="{% url 'interventions:interventions_index' %}?{% if thematic_filter_param %}{{ thematic_filter_param }}&{% endif %}status=to_be_approved">
                                {% blocktranslate count counter=count_to_be_approved %}
                                {{ counter }} intervention à approuver
                                {% plural %}
                                {{ counter }} interventions à approuver
                                {% endblocktranslate %}
                            </a>
                        </p>
                    </div>
                </div>
            </div>
            {% endif %}

            {# ========== LIGNE 1 : Interventions non traitées / à traiter / à corriger ========== #}
            {% if user.config|has_any_role:"admin, manager, controller, external_manager" %}
            <div class="row justify-content-center mb-2">
                {# Interventions non traitées #}
                <div class="col-md-3 ps-1 pe-1">
                    <div class="alert-card">
                        <p class="card-text">
                            <i class="bi bi-clock-history alert-color"></i>
                            <a href="{% url 'interventions:interventions_index' %}?{% if thematic_filter_param %}{{ thematic_filter_param }}&{% endif %}overdue=1">
                                {% blocktranslate count counter=count_overdue %}
                                {{ counter }} intervention non traitée
                                {% plural %}
                                {{ counter }} interventions non traitées
                                {% endblocktranslate %}
                            </a>
                        </p>
                    </div>
                </div>

                {# Interventions à traiter (dans le futur) #}
                <div class="col-md-3 ps-1 pe-1">
                    <div class="alert-card">
                        <p class="card-text">
                            <i class="bi bi-exclamation-square alert-color"></i>
                            <a href="{% url 'interventions:interventions_index' %}?{% if thematic_filter_param %}{{ thematic_filter_param }}&{% endif %}status=to_be_processed&overdue=0">
                                {% blocktranslate count counter=count_to_be_processed_future %}
                                {{ counter }} intervention à traiter
                                {% plural %}
                                {{ counter }} interventions à traiter
                                {% endblocktranslate %}
                            </a>
                        </p>
                    </div>
                </div>

                {# Interventions à corriger #}
                <div class="col-md-3 ps-1 pe-1">
                    <div class="alert-card">
                        <p class="card-text">
                            <i class="bi bi-clipboard-x alert-color"></i>
                            <a href="{% url 'interventions:interventions_index' %}?{% if thematic_filter_param %}{{ thematic_filter_param }}&{% endif %}status=to_be_corrected">
                                {% blocktranslate count counter=count_to_be_corrected %}
                                {{ counter }} intervention à corriger
                                {% plural %}
                                {{ counter }} interventions à corriger
                                {% endblocktranslate %}
                            </a>
                        </p>
                    </div>
                </div>
            </div>
            {% endif %}

            {# ========== LIGNE 2 : A planifier / En pause à replanifier / En pause matériel ========== #}
            {% if user.config|has_any_role:"admin, manager, controller, external_manager" %}
            <div class="row justify-content-center mb-2">
                {# Interventions à planifier (date prévue nulle ou < aujourd'hui + 3 mois) #}
                <div class="col-md-3 ps-1 pe-1">
                    <div class="plan-card">
                        <p class="card-text">
                            <i class="bi bi-calendar2-week plan-color"></i>
                            <a href="{% url 'interventions:interventions_index' %}?{% if thematic_filter_param %}{{ thematic_filter_param }}&{% endif %}status=to_be_planned&to_be_planned_soon=1">
                                {% blocktranslate count counter=count_to_be_planned_soon %}
                                {{ counter }} intervention à planifier <br> (< 3 mois)
                                {% plural %}
                                {{ counter }} interventions à planifier <br> (< 3 mois)
                                {% endblocktranslate %}
                            </a>
                        </p>
                    </div>
                </div>

                {# En pause à replanifier #}
                <div class="col-md-3 ps-1 pe-1">
                    <div class="plan-card">
                        <p class="card-text">
                            <i class="bi bi-pause-circle plan-color"></i>
                            <a href="{% url 'interventions:interventions_index' %}?{% if thematic_filter_param %}{{ thematic_filter_param }}&{% endif %}status=on_pause&pause_reason=reschedule">
                                {% blocktranslate count counter=count_on_pause_reschedule %}
                                {{ counter }} intervention en pause à replanifier
                                {% plural %}
                                {{ counter }} interventions en pause à replanifier
                                {% endblocktranslate %}
                            </a>
                        </p>
                    </div>
                </div>

                {# En pause matériel à commander #}
                <div class="col-md-3 ps-1 pe-1">
                    <div class="plan-card">
                        <p class="card-text">
                            <i class="bi bi-box-seam plan-color"></i>
                            <a href="{% url 'interventions:interventions_index' %}?{% if thematic_filter_param %}{{ thematic_filter_param }}&{% endif %}status=on_pause&pause_reason=order_material">
                                {% blocktranslate count counter=count_on_pause_order_material %}
                                {{ counter }} intervention en pause (matériel)
                                {% plural %}
                                {{ counter }} interventions en pause (matériel)
                                {% endblocktranslate %}
                            </a>
                        </p>
                    </div>
                </div>
            </div>
            {% endif %}

            {# ========== LIGNE 3 : Autres (terminées, à contrôler, corrigées, correctives) ========== #}
            <div class="row justify-content-center">
                {% if user.config|has_any_role:"operator" %}
                <div class="col-md-3 ps-1 pe-1">
                    <div class="alert-card">
                        <p class="card-text">
                            <i class="bi bi-calendar2-week alert-color"></i>
                            <a href="{% url 'interventions:interventions_index' %}?{% if thematic_filter_param %}{{ thematic_filter_param }}&{% endif %}maintain_type=corrective&status=in_preparation&status=to_be_approved&status=to_be_planned&status=to_be_processed&status=assigned&status=in_progress&status=on_pause&status=finished">
                                {% blocktranslate count counter=count_corrective %}
                                {{ counter }} intervention corrective
                                {% plural %}
                                {{ counter }} interventions correctives
                                {% endblocktranslate %}
                            </a>
                        </p>
                    </div>
                </div>
                {% endif %}

                {% if user.config|has_any_role:"admin, manager, controller, external_manager" %}
                <div class="col-md-3 ps-1 pe-1">
                    <div class="bill-card">
                        <p class="card-text">
                            <i class="bi bi-check-circle bill-color"></i>
                            <a href="{% url 'interventions:interventions_index' %}?{% if thematic_filter_param %}{{ thematic_filter_param }}&{% endif %}status=finished">
                                {% blocktranslate count counter=count_finished %}
                                {{ counter }} intervention terminée
                                {% plural %}
                                {{ counter }} interventions terminées
                                {% endblocktranslate %}
                            </a>
                        </p>
                    </div>
                </div>
                {% endif %}

                {% if user.config|has_any_role:"admin, manager, controller, external_manager" %}
                <div class="col-md-3 ps-1 pe-1">
                    <div class="bill-card">
                        <p class="card-text">
                            <i class="bi bi-clipboard-check bill-color"></i>
                            <a href="{% url 'interventions:interventions_index' %}?{% if thematic_filter_param %}{{ thematic_filter_param }}&{% endif %}status=processed">
                                {% blocktranslate count counter=count_processed %}
                                {{ counter }} intervention à contrôler
                                {% plural %}
                                {{ counter }} interventions à contrôler
                                {% endblocktranslate %}
                            </a>
                        </p>
                    </div>
                </div>
                {% endif %}

                {% if user.config|has_any_role:"admin, manager, controller, external_manager" %}
                <div class="col-md-3 ps-1 pe-1">
                    <div class="bill-card">
                        <p class="card-text">
                            <i class="bi bi-clipboard-check bill-color"></i>
                            <a href="{% url 'interventions:interventions_index' %}?{% if thematic_filter_param %}{{ thematic_filter_param }}&{% endif %}status=corrected">
                                {% blocktranslate count counter=count_corrected %}
                                {{ counter }} intervention corrigée
                                {% plural %}
                                {{ counter }} interventions corrigées
                                {% endblocktranslate %}
                            </a>
                        </p>
                    </div>
                </div>
                {% endif %}
            </div>
            
            
            <div class="row justify-content-center">
                <!-- Map -->
                <div class="col-md-10">
                    <div class="card section-card" style="height: 600px;">
                        <div class="card-header">
                            <h3 class="card-title"><i class="bi bi-wrench icon" style="color: rgb(0, 123, 197);"></i> {% translate "Nouvelles interventions" %}</h3>
                        </div>
                        <div class="card-body" style="position: relative;">
                            <div id="map" style="height: 500px; position: relative;">
                                <!-- Légende superposée -->
                                <div class="map-legend" id="map-legend"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Chart -->
                <div class="col-md-10">
                    <div class="card section-card">
                        <div class="card-header">
                            <h3 class="card-title"><i class="bi bi-bar-chart icon" style="color: rgb(0, 123, 197);"></i> {% translate "Evolution" %}</h3>
                        </div>
                        <div class="card-body" style="height: 400px;">
                            <div id="chartNbrInterventions" style="width: 100%; height: 100%;"></div>
                        </div>
                    </div>
                </div>

                
            </div>

            {% if is_intern == True %}
            <div class="row justify-content-center">
                <!-- Assets -->
                <div class="col-md-10">
                    <div class="card section-card">
                        <!-- <img src="{% static 'home/assets-img-1.png' %}" class="card-img-top" alt="..."> -->
                        <div class="card-header">
                            <h3 class="card-title"><i class="bi bi-database icon" style="color: rgb(0, 123, 197);"></i> {% translate "Assets" %}</h3>
                        </div>
                        <div class="card-body">
                            <div class="row align-items-start justify-content-center">

                                <div class="col-md-2 d-flex flex-wrap justify-content-center align-items-start">
                                    <a href="{% url 'assets:structures_index' %}" type="button" class="btn btn-light button-asset">
                                        <i class="bi bi-rainbow icon"></i>
                                        <p>{% translate "Ouvrages d'art" %}</p>
                                    </a>
                                </div>
                            
                                <div class="col-md-2 d-flex flex-wrap justify-content-center">
                                    
                                    <a href="{% url 'assets:trafficlights_index' %}" type="button" class="btn btn-light button-asset">
                                        <i class="bi bi-stoplights icon"></i>
                                        <p>{% translate "Feux tricolores" %}</p>
                                    </a>
                                    <br>
                                    <a href="{% url 'assets:publiclighting_index' %}" type="button" class="btn btn-light button-asset">
                                        <i class="bi bi-lightbulb icon"></i>
                                        <p>{% translate "Éclairage public" %}</p>
                                    </a>
                                    <br>
                                    <a href="{% url 'assets:its_index' %}" type="button" class="btn btn-light button-asset">
                                        <i class="bi bi-lightning icon"></i>
                                        <p>{% translate "ITS" %}</p>
                                    </a>
                                </div>

                                <div class="col-md-2 d-flex flex-wrap justify-content-center">
                                    <a href="{% url 'assets:roads_index' %}" type="button" class="btn btn-light button-asset">
                                        <i class="bi bi-fullscreen-exit icon"></i>
                                        <p>{% translate "Roads" %}</p>
                                    </a>
                                    <br>
                                    <a href="{% url 'assets:sign_index' %}" type="button" class="btn btn-light button-asset">
                                        <i class="bi bi-signpost icon"></i>
                                        <p>{% translate "Signalisation" %}</p>
                                    </a>
                                </div>

                                <div class="col-md-2 d-flex flex-wrap justify-content-center">
                                    <a href="{% url 'assets:nature_index' %}" type="button" class="btn btn-light button-asset">
                                        <i class="bi bi-suit-club icon"></i>
                                        <p>{% translate "Nature" %}</p>
                                    </a>
                                    <br>
                                    <a href="{% url 'assets:artworks_index' %}" type="button" class="btn btn-light button-asset">
                                        <i class="bi bi-bank icon"></i>
                                        <p>{% translate "Patrimoine artistique" %}</p>
                                    </a>
                                </div>

                                <div class="col-md-2 d-flex flex-wrap justify-content-center align-items-start">
                                    <a href="{% url 'assets:controlcenters_index' %}" type="button" class="btn btn-light button-asset">
                                        <i class="bi bi-building-gear icon"></i>
                                        <p>{% translate "Centres de contrôle" %}</p>
                                    </a>
                                </div>
                                
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
            {% endif %}
            
        </div>
    </div>

{% endblock content%}


{% block script %}
    <!-- ECharts 5.5.1 (local) -->
    <script src="{% static 'common/echarts.min.js' %}"></script>
    <script src="{% url 'javascript-catalog' %}"></script>
    <script>
        function formatDate(date) {
            return date.toISOString().slice(0, 10);  // 'YYYY-MM-DD'
        }

        const today = new Date();
        const tomorrow = new Date();
        const yesterday = new Date();
        yesterday.setDate(today.getDate() - 1);  // soustrait 1
        tomorrow.setDate(today.getDate() + 1);  // ajoute 1 jour

        const begin_date_min = formatDate(yesterday);
        const begin_date_max = formatDate(tomorrow);

        var baseUrl = "{% url 'interventions:interventions_geojson' %}";
        {% if thematic_filter_param %}
            baseUrl += "?{{ thematic_filter_param|safe }}&";
        {% else %}
            baseUrl += "?";
        {% endif %}
        const interventions_geojson_urls = [
            `${baseUrl}status=to_be_processed,assigned,in_progress,on_pause,finished&begin_date_min=${begin_date_min}&begin_date_max=${begin_date_max}`
        ];
        const interventionsUrl = "{% url 'interventions:interventions_index' %}{% if thematic_filter_param %}?{{ thematic_filter_param }}{% endif %}";
        const interventionDetailUrlPattern = "{% url 'interventions:intervention_detail' 0 %}";

        const seriesData = {{ series_data|safe }};

    </script>
    <script src="{% static 'home/home_index.js' %}"></script>
{% endblock script %}