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

{% block title %}{{ location.code }} - {{ location.get_name }} | {{ product_name }}{% endblock %}

{% block extra_head %}
<!-- MapLibre GL CSS -->
<link href="https://unpkg.com/maplibre-gl@3.6.2/dist/maplibre-gl.css" rel="stylesheet" />
<script src="https://unpkg.com/maplibre-gl@3.6.2/dist/maplibre-gl.js"></script>
{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <!-- Breadcrumb & Actions -->
    <div class="d-flex justify-content-between align-items-center mb-3">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="{% url 'assets:index' %}">{% translate "Espaces & Équipements plein air" %}</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{ location.code }}</li>
            </ol>
        </nav>
        <div class="d-flex gap-2">
            <a href="{% url 'assets:index' %}" class="btn btn-secondary btn-sm">
                <i class="bi bi-arrow-left me-1"></i>{% translate "Retour à la liste" %}
            </a>
        </div>
    </div>

    <!-- Header Card -->
    <div class="card shadow-sm mb-4">
        <div class="card-body">
            <div class="row align-items-center">
                <div class="col-md-8">
                    <h2 class="h4 mb-1">
                        <i class="bi bi-dribbble text-success me-2"></i>{{ location.code }} - {{ location.get_name }}
                    </h2>
                    <p class="text-muted mb-2"><i class="bi bi-geo-alt me-1"></i>{{ location.address|default:_("Adresse non renseignée") }}</p>
                    <div class="d-flex gap-2 flex-wrap">
                        <span class="badge bg-success-subtle text-success border">{{ location.get_site_type_display }}</span>
                        {% if location.pmr_accessible %}
                            <span class="badge bg-info-subtle text-info border"><i class="bi bi-person-wheelchair me-1"></i>PMR Accessible</span>
                        {% endif %}
                        {% if location.has_water_point %}
                            <span class="badge bg-primary-subtle text-primary border"><i class="bi bi-droplet me-1"></i>Eau potable</span>
                        {% endif %}
                        {% if location.has_power_supply %}
                            <span class="badge bg-warning-subtle text-warning border"><i class="bi bi-lightning-charge me-1"></i>Électricité</span>
                        {% endif %}
                        {% if location.is_fenced %}
                            <span class="badge bg-secondary-subtle text-dark border"><i class="bi bi-shield-check me-1"></i>Clôturé</span>
                        {% endif %}
                    </div>
                </div>
                <div class="col-md-4 text-md-end mt-3 mt-md-0">
                    {% if location.surface_m2 %}
                        <div class="d-inline-block text-center me-3">
                            <span class="d-block text-muted small">{% translate "Surface" %}</span>
                            <span class="badge bg-success fs-5 px-3 py-2">{{ location.surface_m2|floatformat:0 }} m²</span>
                        </div>
                    {% endif %}
                    {% if location.max_capacity %}
                        <div class="d-inline-block text-center">
                            <span class="d-block text-muted small">{% translate "Jauge max" %}</span>
                            <span class="badge bg-primary fs-5 px-3 py-2">{{ location.max_capacity }} pers.</span>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- 3 Core Tabs Navigation -->
    <ul class="nav nav-tabs mb-4" id="outdoorTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="overview-tab" data-bs-toggle="tab" data-bs-target="#overview" type="button" role="tab">
                <i class="bi bi-info-circle me-1"></i>{% translate "Vue d'ensemble" %}
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="equipments-tab" data-bs-toggle="tab" data-bs-target="#equipments" type="button" role="tab">
                <i class="bi bi-gear me-1"></i>{% translate "Assets & Équipements" %} ({{ equipments|length }})
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="interventions-tab" data-bs-toggle="tab" data-bs-target="#interventions" type="button" role="tab">
                <i class="bi bi-tools me-1"></i>{% translate "Interventions" %} ({{ interventions.count }})
            </button>
        </li>
    </ul>

    <!-- Tabs Content -->
    <div class="tab-content" id="outdoorTabsContent">
        
        <!-- 1. Vue d'ensemble -->
        <div class="tab-pane fade show active" id="overview" role="tabpanel">
            <div class="row g-4">
                
                <!-- Left Column: Propriété, Caractéristiques & Arborescence -->
                <div class="col-md-7">
                    
                    <!-- Card 1: Propriété & Responsables -->
                    <div class="card shadow-sm mb-4">
                        <div class="card-header bg-light fw-bold"><i class="bi bi-person-badge me-2"></i>{% translate "Propriété & Responsables" %}</div>
                        <div class="card-body">
                            <table class="table table-borderless mb-0">
                                <tr>
                                    <th class="w-50 text-muted">{% translate "Propriétaire" %} :</th>
                                    <td>{{ location.owner|default:"-" }}</td>
                                </tr>
                                <tr>
                                    <th class="text-muted">{% translate "Gestionnaire référent" %} :</th>
                                    <td>{% if location.manager %}{{ location.manager.get_full_name|default:location.manager.username }}{% else %}-{% endif %}</td>
                                </tr>
                                <tr>
                                    <th class="text-muted">{% translate "Service gestionnaire" %} :</th>
                                    <td>{{ location.occupant_entity|default:"-" }}</td>
                                </tr>
                            </table>
                        </div>
                    </div>

                    <!-- Card 2: Caractéristiques physiques & Aménagements -->
                    <div class="card shadow-sm mb-4">
                        <div class="card-header bg-light fw-bold"><i class="bi bi-rulers me-2"></i>{% translate "Caractéristiques physiques & Aménagements" %}</div>
                        <div class="card-body">
                            <table class="table table-borderless mb-0">
                                <tr>
                                    <th class="w-50 text-muted">{% translate "Surface totale" %} :</th>
                                    <td>{{ location.surface_m2|default:"-" }} m²</td>
                                </tr>
                                <tr>
                                    <th class="text-muted">{% translate "Jauge / Capacité d'accueil" %} :</th>
                                    <td>{% if location.max_capacity %}{{ location.max_capacity }} {% translate "personnes" %}{% else %}-{% endif %}</td>
                                </tr>
                                <tr>
                                    <th class="text-muted">{% translate "Accessibilité PMR" %} :</th>
                                    <td>{% if location.pmr_accessible %}<span class="text-success"><i class="bi bi-check-circle-fill me-1"></i>{% translate "Oui" %}</span>{% else %}<span class="text-muted">{% translate "Non" %}</span>{% endif %}</td>
                                </tr>
                                <tr>
                                    <th class="text-muted">{% translate "Point d'eau potable" %} :</th>
                                    <td>{% if location.has_water_point %}<span class="text-primary"><i class="bi bi-check-circle-fill me-1"></i>{% translate "Oui" %}</span>{% else %}<span class="text-muted">{% translate "Non" %}</span>{% endif %}</td>
                                </tr>
                                <tr>
                                    <th class="text-muted">{% translate "Alimentation électrique" %} :</th>
                                    <td>{% if location.has_power_supply %}<span class="text-warning"><i class="bi bi-check-circle-fill me-1"></i>{% translate "Disponible" %}</span>{% else %}<span class="text-muted">{% translate "Non" %}</span>{% endif %}</td>
                                </tr>
                                <tr>
                                    <th class="text-muted">{% translate "Clôture & Sécurité" %} :</th>
                                    <td>{% if location.is_fenced %}<span class="text-secondary"><i class="bi bi-shield-check me-1"></i>{% translate "Site clôturé" %}</span>{% else %}<span class="text-muted">{% translate "Accès libre" %}</span>{% endif %}</td>
                                </tr>
                            </table>
                        </div>
                    </div>

                    <!-- Card 3: Arborescence Unifiée des Localisations & Assets -->
                    <div class="card shadow-sm mb-4">
                        <div class="card-header bg-light fw-bold d-flex justify-content-between align-items-center">
                            <span><i class="bi bi-diagram-3 me-2"></i>{% translate "Arborescence Hiérarchique" %}</span>
                            <span class="badge bg-success-subtle text-success border">{{ location_tree.children|length }} {% translate "sous-localisation(s)" %}</span>
                        </div>
                        <div class="card-body p-3">
                            
                            <!-- Localisation Parente (si existante) -->
                            {% if parent_location %}
                            <div class="card bg-light border-secondary-subtle p-2 mb-3">
                                <div class="d-flex align-items-center justify-content-between">
                                    <div class="d-flex align-items-center gap-2">
                                        <i class="bi bi-geo-alt-fill text-danger fs-5"></i>
                                        <div>
                                            <div class="small text-muted fw-semibold">{% translate "Localisation parente" %} :</div>
                                            <a href="{{ parent_location.get_absolute_url }}" class="fw-bold text-primary text-decoration-underline">
                                                {{ parent_location.code }} - {{ parent_location.get_name }}
                                            </a>
                                            <span class="badge bg-secondary-subtle text-dark border small ms-1">{{ parent_location.get_site_type_display }}</span>
                                        </div>
                                    </div>
                                    <a href="{{ parent_location.get_absolute_url }}" class="btn btn-sm btn-outline-secondary py-0 px-2 small">
                                        <i class="bi bi-arrow-up me-1"></i>{% translate "Voir la parente" %}
                                    </a>
                                </div>
                            </div>
                            {% endif %}

                            <!-- Localisation Courante -->
                            <div class="p-2 border rounded bg-white mb-2">
                                <div class="d-flex align-items-center justify-content-between">
                                    <div class="d-flex align-items-center gap-2">
                                        {% if location.site_type == 'playground' %}
                                            <i class="bi bi-balloon-fill text-success fs-5"></i>
                                        {% elif location.site_type == 'sports_ground' %}
                                            <i class="bi bi-trophy-fill text-primary fs-5"></i>
                                        {% elif location.site_type == 'multisports_agora' %}
                                            <i class="bi bi-dribbble text-primary fs-5"></i>
                                        {% elif location.site_type == 'outdoor_fitness' %}
                                            <i class="bi bi-activity text-danger fs-5"></i>
                                        {% elif location.site_type == 'skatepark_pumptrack' %}
                                            <i class="bi bi-scooter text-warning fs-5"></i>
                                        {% elif location.site_type == 'open_air_theater' %}
                                            <i class="bi bi-ticket-detailed-fill text-info fs-5"></i>
                                        {% elif location.site_type == 'park_recreation' %}
                                            <i class="bi bi-tree-fill text-success fs-5"></i>
                                        {% elif location.site_type == 'dog_park' %}
                                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#fd7e14" class="bi" viewBox="0 0 512 512"><path d="M226.5 92.9c14.3 42.9-.3 86.2-32.6 96.8s-70.1-15.6-84.4-58.5s.3-86.2 32.6-96.8s70.1 15.6 84.4 58.5zM100.4 198.6c18.9 32.4 14.3 70.1-10.2 84.1s-59.7-.9-78.5-33.3S-2.7 179.3 21.8 165.3s59.7.9 78.6 33.3zM69.2 401.2c-7.1-17.4-2.8-37.1 11.6-47.5c22.7-16.4 57.5-12.7 87.2 8.7c31.1 22.3 53.6 56.4 46.5 73.8c-7.1 17.4-32.8 17.3-64 -5c-31.1-22.4-74.2-12.6-81.3 4.8zm342.4-202.6c18.9-32.4 54.1-47.3 78.6-33.3s29.1 51.7 10.2 84.1s-54.1 47.3-78.6 33.3s-29.1-51.7-10.2-84.1zm-56.5-105.7c14.3-42.9 52.1-69.1 84.4-58.5s46.9 53.9 32.6 96.8s-52.1 69.1-84.4 58.5s-46.9-53.9-32.6-96.8zM442.8 401.2c-7.1-17.4-50.2-27.2-81.3-4.8c-31.2 22.3-56.9 22.4-64 5c-7.1-17.4 15.4-51.5 46.5-73.8c29.7-21.4 64.5-25.1 87.2-8.7c14.4 10.4 18.7 30.1 11.6 47.5zM256 224c-53 0-103 34.6-122.6 88.8c-17.7 49 1.1 103.8 44.5 131.7c35.6 22.9 80 23.5 116.2 0c43.4-27.9 62.2-82.7 44.5-131.7C359 258.6 309 224 256 224z"/></svg>
                                        {% elif location.site_type == 'cemetery' %}
                                            <i class="bi bi-flower2 text-secondary fs-5"></i>
                                        {% else %}
                                            <i class="bi bi-geo-alt-fill text-success fs-5"></i>
                                        {% endif %}
                                        <span class="fw-bold fs-6 text-success">{{ location.code }}</span>
                                        <span class="fw-bold fs-6">- {{ location.get_name }}</span>
                                        <span class="badge bg-success text-white ms-1">{{ location.get_site_type_display }}</span>

                                        {% if location_tree.assets %}
                                        <button class="btn btn-sm btn-outline-success py-0 px-2 small ms-2 text-nowrap"
                                                type="button"
                                                data-bs-toggle="collapse"
                                                data-bs-target="#tree-assets-root"
                                                aria-expanded="false">
                                            <i class="bi bi-tools me-1"></i>Assets ({{ location_tree.assets|length }})
                                        </button>
                                        {% endif %}
                                    </div>
                                </div>

                                <!-- Collapsible Assets de la localisation courante -->
                                {% if location_tree.assets %}
                                <div id="tree-assets-root" class="collapse mt-2 ms-4">
                                    <div class="card card-body bg-light border-success-subtle p-2 mb-2">
                                        <div class="fw-bold small text-success mb-1"><i class="bi bi-tools me-1"></i>{% translate "Assets rattachés à" %} {{ location.code }} :</div>
                                        {% include "assets/outdoor/outdoorlocation_asset_tree.html" with asset_nodes=location_tree.assets only %}
                                    </div>
                                </div>
                                {% endif %}

                                <!-- Sous-localisations & leurs assets -->
                                <div class="mt-2">
                                    {% include "assets/outdoor/outdoorlocation_tree.html" with node=location_tree depth=1 only %}
                                </div>
                            </div>

                        </div>
                    </div>

                </div>

                <!-- Right Column: Localisation & Documents -->
                <div class="col-md-5">
                    
                    <!-- Card Localisation & Carte interactive -->
                    <div class="card shadow-sm mb-4">
                        <div class="card-header bg-light fw-bold d-flex justify-content-between align-items-center">
                            <span><i class="bi bi-geo-alt me-2"></i>{% translate "Localisation & Carte" %}</span>
                            {% if center_lat and center_lon %}
                            <a href="https://www.google.com/maps?cbll={{ center_lat|floatformat:'6u'}},{{ center_lon|floatformat:'6u'}}&cbp=12,0,0,0,5&layer=c&panoid=" 
                               target="_blank" class="btn btn-sm btn-outline-secondary py-0 px-2">
                                <img src="{% static 'common/google-street-view-logo.png' %}" alt="Street View" height="14" class="me-1">
                                Street View
                            </a>
                            {% endif %}
                        </div>
                        <div class="card-body p-0">
                            <div id="outdoor-map" style="height: 340px; width: 100%; border-radius: 0 0 4px 4px;"></div>
                        </div>
                        <div class="card-footer bg-white p-3">
                            <p class="mb-2 small">
                                <strong>{% translate "Adresse" %} :</strong> {{ location.address|default:_("Non renseignée") }}
                            </p>
                            {% if center_lat and center_lon %}
                            <div class="small text-muted font-monospace">
                                WGS84: {{ center_lat|floatformat:6 }}, {{ center_lon|floatformat:6 }}
                            </div>
                            {% endif %}
                        </div>
                    </div>

                    <!-- Card Documents associés -->
                    <div class="card shadow-sm mb-4">
                        <div class="card-header bg-light d-flex justify-content-between align-items-center">
                            <span class="fw-bold"><i class="bi bi-file-earmark-text me-2"></i>{% translate "Documents associés" %} ({{ documents.count }})</span>
                            <a href="{% url 'admin:assets_outdoorlocationdocument_add' %}?site={{ location.pk }}" class="btn btn-sm btn-outline-primary py-0 px-2">
                                <i class="bi bi-plus-lg me-1"></i>{% translate "Ajouter" %}
                            </a>
                        </div>
                        <div class="card-body">
                            <div class="row row-cols-1 row-cols-sm-2 g-3">
                                {% for doc in documents %}
                                <div class="col">
                                    <div class="card h-100 border text-center p-2">
                                        {% if doc.document.file %}
                                            <i class="bi bi-file-earmark-pdf text-danger fs-2 mb-1"></i>
                                            <div class="small text-truncate w-100 fw-bold" title="{{ doc.document.file.name }}">{{ doc.document.file.name }}</div>
                                            <a href="{{ doc.document.file.url }}" target="_blank" class="btn btn-sm btn-outline-secondary mt-2">
                                                <i class="bi bi-download me-1"></i>{% translate "Télécharger" %}
                                            </a>
                                        {% else %}
                                            <i class="bi bi-file-earmark text-secondary fs-2 mb-1"></i>
                                            <span class="text-muted small">{% translate "Fichier indisponible" %}</span>
                                        {% endif %}
                                    </div>
                                </div>
                                {% empty %}
                                <div class="col-12 text-center text-muted py-3">
                                    <i class="bi bi-folder-x fs-4 d-block mb-1"></i>
                                    {% translate "Aucun document associé." %}
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </div>

        <!-- 2. Assets & Équipements Tab -->
        <div class="tab-pane fade" id="equipments" role="tabpanel">
            <div class="card shadow-sm">
                <div class="card-header bg-light d-flex justify-content-between align-items-center">
                    <h5 class="card-title h6 mb-0"><i class="bi bi-tools me-2"></i>{% translate "Assets Physiques & Équipements du Site et de ses sous-localisations" %}</h5>
                    <span class="badge bg-success-subtle text-success border">{{ equipments|length }} {% translate "asset(s)" %}</span>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>{% translate "Code" %}</th>
                                    <th>{% translate "Nom" %}</th>
                                    <th>{% translate "Type d'asset" %}</th>
                                    <th>{% translate "Localisation spécifique" %}</th>
                                    <th>{% translate "Norme" %}</th>
                                    <th>{% translate "Statut" %}</th>
                                    <th class="text-end">{% translate "Actions" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for eq in equipments %}
                                <tr>
                                    <td class="fw-bold">
                                        <a href="{{ eq.get_absolute_url }}">{{ eq.code }}</a>
                                    </td>
                                    <td>{{ eq.get_name }}</td>
                                    <td>
                                        <span class="badge bg-success-subtle text-success border">{{ eq.get_asset_type_display }}</span>
                                    </td>
                                    <td>
                                        {% if eq.location %}
                                            <a href="{{ eq.location.get_absolute_url }}">{{ eq.location.code }} - {{ eq.location.get_name }}</a>
                                        {% else %}
                                            <span class="text-muted">{% translate "Site principal" %}</span>
                                        {% endif %}
                                    </td>
                                    <td>{{ eq.get_norm_display|default:"-" }}</td>
                                    <td>
                                        <span class="badge bg-secondary">{{ eq.get_status_display }}</span>
                                    </td>
                                    <td class="text-end">
                                        <a href="{{ eq.get_absolute_url }}" class="btn btn-sm btn-outline-primary">
                                            <i class="bi bi-eye"></i>
                                        </a>
                                    </td>
                                </tr>
                                {% empty %}
                                <tr>
                                    <td colspan="7" class="text-center text-muted py-4">
                                        {% translate "Aucun asset physique répertorié pour ce site." %}
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- 3. Interventions Tab -->
        <div class="tab-pane fade" id="interventions" role="tabpanel">
            <div class="card shadow-sm">
                <div class="card-header bg-light d-flex justify-content-between align-items-center">
                    <h5 class="card-title h6 mb-0"><i class="bi bi-tools me-2"></i>{% translate "Historique des Interventions" %}</h5>
                    <span class="badge bg-primary-subtle text-primary border">{{ interventions.count }} {% translate "intervention(s)" %}</span>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>{% translate "N° Ticket" %}</th>
                                    <th>{% translate "Titre" %}</th>
                                    <th>{% translate "Statut" %}</th>
                                    <th>{% translate "Priorité" %}</th>
                                    <th>{% translate "Créée le" %}</th>
                                    <th class="text-end">{% translate "Actions" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for intervention in interventions %}
                                <tr>
                                    <td class="fw-bold">#{{ intervention.pk }}</td>
                                    <td>{{ intervention.title }}</td>
                                    <td><span class="badge bg-info">{{ intervention.get_status_display }}</span></td>
                                    <td><span class="badge bg-warning text-dark">{{ intervention.get_priority_display }}</span></td>
                                    <td>{{ intervention.creation_time|date:"d/m/Y H:i" }}</td>
                                    <td class="text-end">
                                        <a href="{% url 'interventions:intervention_detail' intervention.pk %}" class="btn btn-sm btn-outline-primary">
                                            <i class="bi bi-eye"></i>
                                        </a>
                                    </td>
                                </tr>
                                {% empty %}
                                <tr>
                                    <td colspan="6" class="text-center text-muted py-4">
                                        {% translate "Aucune intervention enregistrée sur cet espace." %}
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const centerLat = {{ center_lat|default:"null" }};
    const centerLon = {{ center_lon|default:"null" }};
    const locationGeojson = {{ location_geojson_json|safe }};

    if (centerLat !== null && centerLon !== null) {
        const map = new maplibregl.Map({
            container: 'outdoor-map',
            style: '{{ MAP_STYLE_LIGHT|default:"https://api.maptiler.com/maps/streets-v2-light/style.json" }}',
            center: [centerLon, centerLat],
            zoom: 16
        });

        map.addControl(new maplibregl.NavigationControl());

        map.on('load', function() {
            if (locationGeojson) {
                map.addSource('location-shape', {
                    'type': 'geojson',
                    'data': {
                        'type': 'Feature',
                        'geometry': locationGeojson
                    }
                });

                if (locationGeojson.type === 'Polygon' || locationGeojson.type === 'MultiPolygon') {
                    map.addLayer({
                        'id': 'location-fill',
                        'type': 'fill',
                        'source': 'location-shape',
                        'paint': {
                            'fill-color': '#198754',
                            'fill-opacity': 0.3
                        }
                    });
                    map.addLayer({
                        'id': 'location-outline',
                        'type': 'line',
                        'source': 'location-shape',
                        'paint': {
                            'line-color': '#198754',
                            'line-width': 3
                        }
                    });
                } else {
                    new maplibregl.Marker({ color: '#198754' })
                        .setLngLat([centerLon, centerLat])
                        .addTo(map);
                }
            } else {
                new maplibregl.Marker({ color: '#198754' })
                    .setLngLat([centerLon, centerLat])
                    .addTo(map);
            }
        });
    } else {
        document.getElementById('outdoor-map').innerHTML = '<div class="d-flex align-items-center justify-content-center h-100 text-muted"><i class="bi bi-geo-alt-fill me-2"></i>{% translate "Géométrie non disponible" %}</div>';
    }
});
</script>
{% endblock content %}