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

{% block content %}
<div class="row mt-2" style="height: calc(100vh - 200px);">
    <div class="col-md-8" style="max-height: calc(100vh - 200px); overflow: auto;">
        <h3 class="h3">
            <i class="bi bi-lightning "></i><span class="mx-2">{{ location.code}}</span> - <span class="mx-2">{{ location.get_name }}</span>
        </h3>
        <hr>
        <div class="row mb-4">
            <div class="col-md-8">
                
                <div class="my-2">
                    {% if location.is_main_location %}
                        <label class="mx-2">{% translate "Localisation principale:" %}</label>
                        <i class="bi bi-check-square"></i>
                    {% elif location.parent_location %}
                        <label class="mx-2">{% translate "Localisation parente:" %}</label>
                        <a href="{{ location.parent.get_absolute_url }}">{{ location.parent }}</a>
                    {% endif %}
                </div>
            </div>
            <div class="col-md-4">
                {% if location.lon %}
                    <a href="https://www.google.com/maps?cbll={{ location.lat|floatformat:'6u'}},{{ location.lon|floatformat:'6u'}}&cbp=12,0,0,0,5&layer=c&panoid=" target="_blank" style="text-decoration: none; font-size: 16px; display: flex; align-items: center;">
                        <img src="{% static 'common/google-street-view-logo.png' %}" alt="{% translate 'Street View' %}" height="20" style="margin-right: 8px;">
                        {% translate "View in Google Street View" %}
                    </a>
                {% endif %}
            </div>
        </div>
        
        <!-- Documents -->
        <div class="card mb-4">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h4>{% translate "Documents" %}</h4>
                <button onclick="" class="btn btn-light border-0" title="{% translate 'Ajouter' %}" data-bs-toggle="modal" data-bs-target="#addDocumentModal">
                    <i class="bi bi-plus-circle text-primary"></i>
                </button>
            </div>
            <div class="card-body">
                {% render_document_viewer documents modal_id="itsDocViewerModal" %}
            </div>
        </div>
        <!-- Modal form add document -->
        <div class="modal fade" id="addDocumentModal" tabindex="-1" aria-labelledby="addDocumentModalLabel" aria-hidden="true" style="z-index: 10050;">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title" id="addDocumentModalLabel">{% translate "Ajouter des documents" %}</h5>
                      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Fermer' %}"></button>
                    </div>
                    <div class="modal-body">
                        <form id="addDocumentForm" method="post" enctype="multipart/form-data" action="{% url 'assets:its_location_add_document' location.id %}">
                            {% csrf_token %>

                            <div class="mb-3">
                                <label for="fileInput" class="form-label">{% translate "Sélectionner des fichiers" %}</label>
                                <input type="file" id="fileInput" name="files" multiple class="form-control">
                            </div>

                            <div id="fileFieldsContainer">
                                <!-- Champs dynamiques injectés ici -->
                            </div>

                            <div class="modal-footer">
                                <button type="submit" class="btn btn-primary" id="documentSubmitButton">
                                {% translate "Ajouter" %}
                                <span class="spinner-border spinner-border-sm ms-2 d-none" role="status" aria-hidden="true" id="documentSubmitSpinner"></span>
                                </button>
                            </div>
                        </form>
                    </div>
                  </div>
            </div>
        </div>
        <!-- Modal form delete document -->
        <div class="modal fade" id="documentDeleteModal" tabindex="-1" aria-labelledby="documentDeleteModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title" id="documentDeleteModalLabel">{% translate "Confirmer la suppression" %}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Fermer' %}"></button>
                </div>

                <div class="modal-body">
                    <p>{% translate "Voulez-vous vraiment supprimer ce document ?" %}</p>
                    <p><strong id="deleteDocumentFileName">{% translate "Nom du fichier" %}</strong></p>
                </div>

                <div class="modal-footer">
                    <form method="post" id="deleteDocumentForm" action="">
                    {% csrf_token %}
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% translate "Annuler" %}</button>
                    <button type="submit" class="btn btn-danger">{% translate "Supprimer" %}</button>
                    </form>
                </div>

                </div>
            </div>
        </div>
        <!-- Assets -->
        <div class="card mb-4">
            <div class="card-header">
                <h4 data-bs-toggle="collapse" href="#assets_card_body" role="button">{% translate "Assets" %}</h4>
            </div>

            <div class="card-body collapse show" id="assets_card_body">
                <ul class="nav nav-tabs" id="assetsTab" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="assets-tree-tab" data-bs-toggle="tab"
                            data-bs-target="#assets-tree-controlcenter" type="button" role="tab"
                            aria-controls="assets-tree-controlcenter" aria-selected="true" style="color:black;">
                    {% translate "Arborescence" %}
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="assets-archives-tab" data-bs-toggle="tab"
                            data-bs-target="#assets-archives" type="button" role="tab"
                            aria-controls="assets-archives" aria-selected="false" style="color:black;">
                    {% translate "Archives" %}
                    </button>
                </li>
                </ul>

                <div class="tab-content my-2" id="assetsTabContent">
                <div class="tab-pane fade show active" id="assets-tree-controlcenter" role="tabpanel" aria-labelledby="assets-tree-tab">
                    <div class="d-flex align-items-center gap-2 mb-2">
                        <span>{{ location.get_name }}</span>
                        {% if location_tree.children %}
                            <span class="badge bg-light text-dark ms-2">{{ location_tree.children|length }} {% translate "sous-localisations" %}</span>
                        {% endif %}
                        {% if location_tree.assets %}
                            <span class="badge bg-light text-dark ms-1">{{ location_tree.assets|length }} {% translate "assets" %}</span>
                        {% endif %}
                    </div>
                    {% include "assets/its_location_tree.html" with node=location_tree only %}
                </div>

                <div class="tab-pane fade" id="assets-archives" role="tabpanel" aria-labelledby="assets-archives-tab">
                    ...
                </div>
                </div>
            </div>
        </div>


        <div class="card mb-4">
            <div class="card-header">
                <h4>{% translate "Interventions" %}</h4>
            </div>
            <div class="card-body">
                <table id="interventions-table" class="table"
                    data-height="550"
                    data-pagination="true"
                    data-page-size="25"
                    data-click-to-select="true" >
                    <thead>
                        <tr>
                            <th data-field="actions" data-width="100"></th>
                            <th data-field="code">{% translate "Code" %}</th>
                            <th data-field="title">{% translate "Titre" %}</th>
                            <th data-field="begin_date">{% translate "Début" %}</th>
                            <th data-field="statut">{% translate "Statut" %}</th>
                        </tr>
                        <tbody>
                            {% for interv in interventions %}
                                <tr>
                                    <td>
                                        <a href="{% url 'interventions:interventions_index' %}{{ interv.id }}" type="button" class="btn btn-sm btn-light detail-btn" data-id="${row.id}" data-bs-toggle="tooltip" title="{% translate 'Détail' %}">
                                            <i class="bi bi-info-circle"></i>
                                        </a>
                                    </td>
                                    <td>{{ interv.code }}</td>
                                    <td>{{ interv.title }}</td>
                                    <td>{{ interv.begin_time|date:"d-m-Y H:i" }}</td>
                                    <td>{{ interv.get_status_display }}</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </thead>
                </table>
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div id="map">
        </div>
    </div>
</div>

{% endblock content%}


{% block script %}
    {{ geom|json_script:"geom_value" }}
    {{ location.lon|json_script:"lon_value" }}
    {{ location.lat|json_script:"lat_value" }}
    <script>
        const its_locations_url = "{% url 'assets:its_locations' %}";
        const feature_geom = JSON.parse(document.getElementById("geom_value").textContent);
        const feature_lon = JSON.parse(document.getElementById("lon_value").textContent);
        const feature_lat = JSON.parse(document.getElementById("lat_value").textContent);
    </script>
    <!-- Turf.js (local) -->
    <script src="{% static 'common/turf.min.js' %}"></script>
    <script src="{% static 'assets/its_location_detail.js' %}"></script>
{% endblock script %}