{% extends "assets/detail_generic.html" %}
{% load i18n %}
{% load static %}
{% load asset_tags %}

{% block head %}
{{ block.super }}
<style>
    /* Adaptations mobiles avancées pour le template générique d'asset */
    @media (max-width: 767.98px) {
        #asset-detail-container {
            padding-left: 0.5rem !important;
            padding-right: 0.5rem !important;
        }

        /* En-tête mobile compact */
        .generic-asset-mobile-header {
            background-color: #ffffff;
            border: 1px solid #cbd5e1;
            border-radius: 0.85rem;
            padding: 0.85rem;
            box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
            margin-bottom: 0.75rem;
        }
        .generic-asset-mobile-header .asset-thematic-avatar {
            width: 44px;
            height: 44px;
            border-radius: 0.75rem;
            background-color: rgba(47, 62, 139, 0.1);
            color: #0f172a;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.4rem;
            flex-shrink: 0;
        }

        /* Barre d'onglets de navigation segmentée */
        .mobile-asset-tabs-nav {
            position: sticky;
            top: 3.5rem;
            z-index: 1015;
            background: #ffffff;
            border: 1px solid #cbd5e1;
            border-radius: 0.75rem;
            padding: 0.3rem;
            display: flex;
            gap: 0.35rem;
            overflow-x: auto;
            white-space: nowrap;
            scrollbar-width: none;
            -webkit-overflow-scrolling: touch;
            box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
            margin-bottom: 0.85rem;
        }
        .mobile-asset-tabs-nav::-webkit-scrollbar {
            display: none;
        }
        .mobile-tab-btn {
            font-size: 0.82rem;
            font-weight: 600;
            padding: 0.4rem 0.75rem;
            border-radius: 0.55rem;
            border: none;
            background: transparent;
            color: #64748b;
            transition: all 0.15s ease-in-out;
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
        }
        .mobile-tab-btn.active {
            background-color: #0f172a;
            color: #ffffff;
            box-shadow: 0 2px 4px rgba(47, 62, 139, 0.25);
        }

        /* Cartes et sections sur mobile */
        #asset-detail-container .card {
            border-radius: 0.85rem !important;
            border: 1px solid #cbd5e1 !important;
            box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
            margin-bottom: 0.75rem !important;
        }
        #asset-detail-container .card-header {
            padding: 0.65rem 0.85rem;
            border-top-left-radius: 0.85rem !important;
            border-top-right-radius: 0.85rem !important;
        }
        #asset-detail-container .card-header h5 {
            font-size: 0.95rem !important;
            font-weight: 600;
        }
        #asset-detail-container .card-body {
            padding: 0.75rem 0.85rem;
        }

        /* Tableaux tactiles */
        #asset-detail-container .table th {
            font-size: 0.84rem;
            padding: 0.5rem 0.4rem;
            width: 38% !important;
        }
        #asset-detail-container .table td {
            font-size: 0.86rem;
            padding: 0.5rem 0.4rem;
        }

        /* Barre d'édition CMS mobile */
        #asset-cms-edit-bar.mobile-edit-bar {
            top: 3.5rem;
            z-index: 1020;
            border-radius: 0.75rem;
            border: 1px solid #b8c5d3;
        }

        /* Carte MapLibre sur mobile */
        #asset-map {
            height: 320px !important;
            border-radius: 0 0 0.85rem 0.85rem;
        }
    }
</style>
{% endblock head %}

{# ── En-tête mobile readonly avec icône, thématique et badges ── #}
{% block asset_header_title_readonly %}
<div class="generic-asset-mobile-header">
    <div class="d-flex align-items-center gap-2.5">
        <div class="asset-thematic-avatar" {% if thematic.color %}style="background-color: {{ thematic.color }}18; color: {{ thematic.color }};"{% endif %}>
            {% if thematic.icon %}
                <i class="bi {{ thematic.icon }}"></i>
            {% else %}
                <i class="bi bi-pin-map"></i>
            {% endif %}
        </div>
        <div class="flex-grow-1 text-truncate">
            <div class="d-flex align-items-center gap-1.5 flex-wrap">
                <span class="fw-bold text-dark fs-6" style="color: #0f172a;">{{ asset.code }}</span>
                {% if asset.status == 'active' %}
                    <span class="badge bg-success">{{ asset.get_status_display }}</span>
                {% elif asset.status == 'damaged' or asset.status == 'to_replace' %}
                    <span class="badge bg-warning text-dark">{{ asset.get_status_display }}</span>
                {% else %}
                    <span class="badge bg-secondary">{{ asset.get_status_display|default:asset.status }}</span>
                {% endif %}
            </div>
            <div class="small text-secondary text-truncate">
                {% if thematic.name_fr %}
                    <span>{{ thematic.name_fr }}</span> &bull;
                {% endif %}
                <span>{{ asset_verbose_name }}</span>
                {% if asset.name_fr %}
                    &mdash; <span class="fw-semibold text-dark">{{ asset.name_fr }}</span>
                {% elif asset.model %}
                    &mdash; <span class="fw-semibold text-dark">{{ asset.model.get_name }}</span>
                {% endif %}
            </div>
        </div>
    </div>
</div>

{# Barre de navigation par onglets segmentés (Infos, Carte, Documents, Liens) #}
<div class="mobile-asset-tabs-nav" id="mobileAssetTabsNav">
    <button type="button" class="mobile-tab-btn active" data-target-tab="tab-infos">
        <i class="bi bi-card-checklist"></i>{% translate "Informations" %}
    </button>
    <button type="button" class="mobile-tab-btn" data-target-tab="tab-geo">
        <i class="bi bi-geo-alt"></i>{% translate "Carte & Localisation" %}
    </button>
    <button type="button" class="mobile-tab-btn" data-target-tab="tab-docs">
        <i class="bi bi-paperclip"></i>{% translate "Documents & Photos" %}
    </button>
    <button type="button" class="mobile-tab-btn" data-target-tab="tab-links">
        <i class="bi bi-link-45deg"></i>{% translate "Assets Liés" %}
    </button>
</div>
{% endblock asset_header_title_readonly %}

{# ── Script pour la gestion des onglets mobiles ── #}
{% block extra_scripts %}
{{ block.super }}
<script>
(function() {
    function initMobileAssetTabs() {
        const tabButtons = document.querySelectorAll('.mobile-tab-btn');
        const container = document.getElementById('asset-detail-container');
        if (!tabButtons.length || !container) return;

        // Identification des cartes par catégorie
        const mainCol = container.querySelector('.col-12, .col-md-8');
        const sideCol = container.querySelector('.col-md-4, .col-12:last-child');

        // Assigner les classes de section aux cartes
        // 1. Informations
        const infoCards = [
            container.querySelector('.card:has(table)'),
            document.getElementById('model-card'),
            container.querySelector('.card:has(#observations-card)'),
        ].filter(Boolean);

        // 2. Géolocalisation & Carte
        const geoCards = [
            container.querySelector('.card:has(#asset-map)'),
            container.querySelector('.card:has(.asset-location-link)'),
        ].filter(Boolean);

        // 3. Documents
        const docCards = [
            document.getElementById('documents-card') || container.querySelector('.card:has(#documents-list)') || container.querySelector('.card:has(.document-item)')
        ].filter(Boolean);

        // 4. Assets Liés & Remplacements
        const linkCards = [
            container.querySelector('.card:has(.replacement-chain)'),
            container.querySelector('.card:has(#associated-assets-list)'),
            container.querySelector('.card:has(#linked-interventions-list)'),
        ].filter(Boolean);

        // Initialiser les groupes
        infoCards.forEach(c => c && c.classList.add('mobile-section-infos'));
        geoCards.forEach(c => c && c.classList.add('mobile-section-geo'));
        docCards.forEach(c => c && c.classList.add('mobile-section-docs'));
        linkCards.forEach(c => c && c.classList.add('mobile-section-links'));

        function showSection(targetTab) {
            tabButtons.forEach(btn => {
                if (btn.dataset.targetTab === targetTab) {
                    btn.classList.add('active');
                } else {
                    btn.classList.remove('active');
                }
            });

            const allCustomSections = container.querySelectorAll(
                '.mobile-section-infos, .mobile-section-geo, .mobile-section-docs, .mobile-section-links'
            );

            if (targetTab === 'tab-infos') {
                allCustomSections.forEach(c => c.style.display = 'none');
                infoCards.forEach(c => c.style.display = '');
                // Si aucune carte taguée infos, tout afficher
                if (!infoCards.length) allCustomSections.forEach(c => c.style.display = '');
            } else if (targetTab === 'tab-geo') {
                allCustomSections.forEach(c => c.style.display = 'none');
                geoCards.forEach(c => c.style.display = '');
                // Redimensionner la carte MapLibre pour s'adapter au conteneur
                setTimeout(() => {
                    window.dispatchEvent(new Event('resize'));
                }, 100);
            } else if (targetTab === 'tab-docs') {
                allCustomSections.forEach(c => c.style.display = 'none');
                docCards.forEach(c => c.style.display = '');
            } else if (targetTab === 'tab-links') {
                allCustomSections.forEach(c => c.style.display = 'none');
                linkCards.forEach(c => c.style.display = '');
            }
        }

        tabButtons.forEach(btn => {
            btn.addEventListener('click', () => {
                showSection(btn.dataset.targetTab);
            });
        });

        // Par défaut, afficher les infos
        showSection('tab-infos');

        // Si on active le mode édition, s'assurer que les champs éditables restent interactifs
        document.addEventListener('assetEditModeChanged', (e) => {
            if (e.detail && e.detail.editing) {
                // En mode édition, toutes les cartes peuvent être consultées via les onglets
            }
        });
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initMobileAssetTabs);
    } else {
        initMobileAssetTabs();
    }
})();
</script>
{% endblock extra_scripts %}

{% block script %}
{{ block.super }}
{% endblock script %}