{% extends "base.html" %}
{% load static %}
{% load i18n %}
{% load documents_tags %}
{% 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-droplet"></i>
            <span class="mx-2">{{ location.code }} - {{ location.get_name }}</span>
        </h3>
        <hr>

        <div class="row mb-4">
            <div class="col-md-6">
                {% 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>

        <style>
            .assets-chevron-trigger {
                display: flex;
                align-items: center;
                justify-content: space-between;
                width: 100%;
                margin: 0;
                text-decoration: none;
                color: #1e40af;
            }
            .assets-chevron-trigger .assets-folder-icons {
                font-size: 1.1rem;
                color: #1e40af;
            }
            .assets-chevron-trigger .assets-folder-icons .icon-open {
                display: inline-block;
            }
            .assets-chevron-trigger .assets-folder-icons .icon-closed {
                display: none;
            }
            .assets-chevron-trigger.collapsed .assets-folder-icons .icon-open {
                display: none;
            }
            .assets-chevron-trigger.collapsed .assets-folder-icons .icon-closed {
                display: inline-block;
            }
            
            #assetsTab .nav-link {
                color: #495057;
                padding: 0.6rem 1.1rem;
                border-radius: 0.5rem 0.5rem 0 0;
                border: 1px solid #dee2e6;
                border-bottom: none;
                background: #f8f9fa;
                font-weight: 500;
                transition: background 0.15s, box-shadow 0.15s;
            }
            #assetsTab .nav-link:hover:not(.active) {
                background: #e9ecef;
                color: #212529;
            }
            #assetsTab .nav-link.active {
                color: #0d6efd;
                background: #fff;
                border-color: #dee2e6 #dee2e6 #fff;
                box-shadow: 0 -2px 6px rgba(0,0,0,0.08);
                font-weight: 600;
            }
        </style>

        <!-- Documents -->
        <div class="card mb-4" style="border-color: #b2d8d1;">
            <div class="card-header d-flex justify-content-between align-items-center" style="background: linear-gradient(to left, #d0eeea, #f5fcfb); border-color: #b2d8d1;">
                <h4 class="mb-0" style="color: #0f766e;"><i class="bi bi-file-earmark-text me-2"></i>{% translate "Documents" %}</h4>
                {% if can_add_unique_tag_documents and use_managed_documents %}
                <button 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>
                {% endif %}
            </div>
            <div class="card-body">
                <style>
                    #documentsTab .nav-link {
                        color: #495057;
                        padding: 0.5rem 1rem;
                        border-radius: 0.3rem 0.3rem 0 0;
                        border: 1px solid #dee2e6;
                        border-bottom: none;
                        background: #f8f9fa;
                        font-weight: 500;
                        transition: background 0.15s, box-shadow 0.15s;
                    }
                    #documentsTab .nav-link:hover:not(.active) {
                        background: #e9ecef;
                        color: #212529;
                    }
                    #documentsTab .nav-link.active {
                        color: #0f766e;
                        background: #fff;
                        border-color: #dee2e6 #dee2e6 #fff;
                        font-weight: 600;
                    }
                </style>
                <ul class="nav nav-tabs" id="documentsTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active d-flex align-items-center gap-2" id="docs-zone-tab" data-bs-toggle="tab"
                                data-bs-target="#docs-zone" type="button" role="tab"
                                aria-controls="docs-zone" aria-selected="true">
                            <i class="bi bi-folder2"></i>
                            <span>{% translate "Documents de la zone" %}</span>
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link d-flex align-items-center gap-2" id="docs-assets-tab" data-bs-toggle="tab"
                                data-bs-target="#docs-assets" type="button" role="tab"
                                aria-controls="docs-assets" aria-selected="false">
                            <i class="bi bi-boxes"></i>
                            <span>{% translate "Documents des assets" %}</span>
                            <span class="badge bg-secondary rounded-pill">{{ documents|length }}</span>
                        </button>
                    </li>
                </ul>

                <div class="tab-content border border-top-0 rounded-bottom p-3" id="documentsTabContent" style="background-color: #fff;">
                    <!-- Tab 1: Documents de la zone -->
                    <div class="tab-pane fade show active" id="docs-zone" role="tabpanel" aria-labelledby="docs-zone-tab">
                        {% if can_browse_folder and document_folder %}
                        <div class="mb-3">
                            <label class="fw-semibold">{% translate "Répertoire principal" %}:</label>
                            <span class="ms-1"><a href="/documents/?folder={{ document_folder.slug }}">{{ location.code }}</a></span>
                        </div>
                        {% endif %}

                        {% if use_managed_documents %}
                            {% render_document_viewer main_documents modal_id="zirwDocViewerModal" show_tags=True show_versions=True location_id=location.id %}
                        {% else %}
                            <div class="text-muted p-2">{% translate "Aucun document de zone configuré." %}</div>
                        {% endif %}
                    </div>

                    <!-- Tab 2: Documents des assets -->
                    <div class="tab-pane fade" id="docs-assets" role="tabpanel" aria-labelledby="docs-assets-tab">
                        {% if documents %}
                            <div class="row">
                                {% for document in documents %}
                                <div class="col-md-2 col-sm-4 col-6 mb-3">
                                    <a href="{{ document.file.url }}" target="_blank" title="{{ document.rwi_asset.code }} - {{ document.filename }}">
                                        <div class="img-thumbnail d-flex align-items-center justify-content-center" style="width: 100%; height: 100px; overflow: hidden; background-color: #f8f9fa;">
                                            {% if document.thumbnail %}
                                                <img src="{{ document.thumbnail.url }}" alt="{{ document.filename }}" style="max-width: 100%; max-height: 100%; object-fit: contain;">
                                            {% else %}
                                                <span class="text-muted text-center" style="font-size: 0.8em; word-break: break-all; padding: 5px;">{{ document.filename }}</span>
                                            {% endif %}
                                        </div>
                                    </a>
                                    <div class="text-center text-muted mt-1" style="font-size: 0.8em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                                        {{ document.rwi_asset.code }}
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        {% else %}
                            <div class="text-muted p-2">{% translate "Aucun document d'asset associé." %}</div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        <!-- Assets -->
        <div class="card mb-4" style="border-color: #cce0ff;">
            <div class="card-header d-flex justify-content-between align-items-center" style="background: linear-gradient(to left, #c8dffe, #f0f8ff); border-color: #cce0ff;">
                <h4 data-bs-toggle="collapse" href="#assets_card_body" role="button" aria-expanded="false" aria-controls="assets_card_body" class="assets-chevron-trigger collapsed">
                    <span class="d-flex align-items-center"><i class="bi bi-boxes me-2"></i>{% translate "Assets" %}</span>
                    <span class="assets-folder-icons">
                        <i class="bi bi-folder icon-closed"></i>
                        <i class="bi bi-folder2-open icon-open"></i>
                    </span>
                </h4>
            </div>

            <div class="card-body collapse" id="assets_card_body" style="background-color: #f7fbff;">
                <ul class="nav nav-tabs" id="assetsTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active d-flex align-items-center gap-2" id="assets-tree-tab" data-bs-toggle="tab"
                                data-bs-target="#assets-tree-structure" type="button" role="tab"
                                aria-controls="assets-tree-structure" aria-selected="true">
                            <i class="bi bi-boxes"></i>
                            <span>{% translate "Arborescence" %}</span>
                        </button>
                    </li>
                </ul>

                <div class="tab-content border border-top-0 rounded-bottom p-3" id="assetsTabContent" style="background-color: #fff;">
                    <div class="tab-pane fade show active" id="assets-tree-structure" role="tabpanel" aria-labelledby="assets-tree-tab">
                        <div class="d-flex align-items-center justify-content-between gap-2 mb-2 flex-wrap">
                            <div class="d-flex align-items-center gap-2 flex-wrap">
                                <span>{{ location.get_name }}</span>
                                {% if top_level_nodes %}
                                    <span class="badge bg-light text-dark ms-2">{{ assets_count }} {% translate "assets" %}</span>
                                {% endif %}
                            </div>
                            <a href="{{ toggle_inactive_url }}" class="btn btn-sm {% if show_inactive_assets %}btn-outline-warning{% else %}btn-outline-secondary{% endif %}">
                                {% if show_inactive_assets %}
                                    {% translate "Masquer les non-actifs" %}
                                {% else %}
                                    {% translate "Afficher les non-actifs" %}
                                {% endif %}
                            </a>
                        </div>
                        {% if top_level_nodes %}
                            {% include "assets/naturerwiz_location_tree.html" with nodes=top_level_nodes show_inactive_assets=show_inactive_assets only %}
                        {% else %}
                            <div class="text-muted p-2">{% translate "Aucun asset associé." %}</div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        <!-- Interventions -->
        <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-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>
        
        <!-- Modals for Documents -->
        <!-- 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:zirw_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 for document history -->
        <div class="modal fade" id="documentHistoryModal" tabindex="-1" aria-labelledby="documentHistoryModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-xl modal-dialog-scrollable">
                <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="documentHistoryModalLabel">{% translate "Historique des documents" %}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Fermer' %}"></button>
                </div>
                <div class="modal-body">
                    <div id="documentHistoryContent" class="row g-3">
                    <!-- Contenu dynamique injecté ici -->
                    </div>
                </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div id="map"></div>
    </div>
</div>
{% endblock content %}


{% block script %}
    {{ location.lon|json_script:"lon_value" }}
    {{ location.lat|json_script:"lat_value" }}
    {{ location.geojson|json_script:"geojson_value" }}
    {{ assets_geojson|json_script:"assets_geojson_value" }}
    <!-- Données JSON pour JavaScript -->
    <script type="application/json" id="documentConfigData">
        {
            "use_managed_documents": {% if use_managed_documents %}true{% else %}false{% endif %},
            "can_add_unique_tag_documents": {% if can_add_unique_tag_documents %}true{% else %}false{% endif %},
            "config_url": "{% url 'assets:zirw_document_config' location.id %}"
        }
    </script>
    <script>
        const feature_geojson = JSON.parse(document.getElementById("geojson_value").textContent);
        const feature_lon = JSON.parse(document.getElementById("lon_value").textContent);
        const feature_lat = JSON.parse(document.getElementById("lat_value").textContent);
        const document_history_url = "{% url 'assets:zirw_document_history' %}";
    </script>
    <script src="{% static 'common/turf.min.js' %}"></script>
    <script src="{% static 'assets/naturerwiz_detail.js' %}"></script>
{% endblock script %}