@extends('adminlte::page')

@section('title', 'Sistema de Seguimiento de Batalla')
@section('body_class', 'sidebar-collapse tracking-fullscreen')

@section('content_header')
    <div class="tracking-title">
        <h1>Sistema de Seguimiento de Batalla</h1>
        <p>
            Ritmo de batalla / Unidad:
            {{ strtoupper($elemento->nombre ?: 'Sin nombre') }}
        </p>
    </div>
@stop

@section('content')

<div id="warSidebarHotspot"></div>

@if(session('success'))
    <div id="flashMessage" class="flash-message">
        <i class="fas fa-check-circle"></i>
        {{ session('success') }}
    </div>
@endif

@php
    $horaTacticaBase = $elemento->hora_tactica ?? null;

    if (!function_exists('resumenCampoSeguimiento')) {
        function resumenCampoSeguimiento($valor) {
            $valor = trim((string) $valor);

            if ($valor === '') {
                return 'Sin información registrada.';
            }

            return \Illuminate\Support\Str::limit($valor, 90);
        }
    }

    if (!function_exists('contenidoCampoSeguimiento')) {
        function contenidoCampoSeguimiento($valor) {
            $valor = trim((string) $valor);

            return $valor !== ''
                ? $valor
                : 'Sin información registrada.';
        }
    }

    $simboloResumen = $elemento->identificacion_nombre
        ?: ($elemento->simbolo->nombre ?? 'No asignado');

    $codigoResumen = $elemento->identificacion_codigo
        ?: ($elemento->simbolo->abreviatura ?? $elemento->simbolo->codigo ?? 'UN');

    $imagenSimboloUrl = ($elemento->simbolo && $elemento->simbolo->imagen)
        ? asset('storage/' . $elemento->simbolo->imagen)
        : null;

    $colorSimbolo = $elemento->simbolo->color_final
        ?? $elemento->simbolo->color_reglamentario
        ?? null;
@endphp

<div class="tracking-wrapper">

    <div class="tracking-actions">
        @if($elemento->proyecto_id)
            <a href="{{ route('proyectos.show', $elemento->proyecto_id) }}" class="tracking-action-btn">
                <i class="fas fa-arrow-left"></i>
                Volver a sala de guerra
            </a>
        @else
            <a href="{{ route('elementos-mapa.index') }}" class="tracking-action-btn">
                <i class="fas fa-arrow-left"></i>
                Volver
            </a>
        @endif

        <a href="{{ route('elementos-mapa.edit', $elemento->id) }}" class="tracking-action-btn primary">
            <i class="fas fa-edit"></i>
            Editar unidad
        </a>
    </div>

    <div class="battle-layout">

        {{-- COLUMNA IZQUIERDA --}}
        <div class="left-column">

            <button class="battle-field-btn"
                data-title="Misión"
                data-content="{{ e(contenidoCampoSeguimiento($elemento->mision)) }}">
                <span>Misión</span>
                <small>{{ resumenCampoSeguimiento($elemento->mision) }}</small>
            </button>

            <button class="battle-field-btn"
                data-title="Intención"
                data-content="{{ e(contenidoCampoSeguimiento($elemento->intencion)) }}">
                <span>Intención</span>
                <small>{{ resumenCampoSeguimiento($elemento->intencion) }}</small>
            </button>

            <button class="battle-field-btn"
                data-title="R.I.C.C."
                data-content="{{ e(contenidoCampoSeguimiento($elemento->ricc)) }}">
                <span>R.I.C.C.</span>
                <small>{{ resumenCampoSeguimiento($elemento->ricc) }}</small>
            </button>

            <button class="battle-field-btn"
                data-title="Eventos críticos"
                data-content="{{ e(contenidoCampoSeguimiento($elemento->eventos_criticos)) }}">
                <span>Eventos críticos</span>
                <small>{{ resumenCampoSeguimiento($elemento->eventos_criticos) }}</small>
            </button>

            <button class="battle-field-btn"
                data-title="Poder de combate"
                data-content="{{ e(contenidoCampoSeguimiento($elemento->poder_combate)) }}">
                <span>Poder de combate</span>
                <small>{{ resumenCampoSeguimiento($elemento->poder_combate) }}</small>
            </button>

            <button class="battle-field-btn"
                data-title="Organización para el combate"
                data-content="{{ e(contenidoCampoSeguimiento($elemento->organizacion_combate)) }}">
                <span>Organización para el combate</span>
                <small>{{ resumenCampoSeguimiento($elemento->organizacion_combate) }}</small>
            </button>

            <button class="battle-field-btn wide-btn"
                data-title="Medios disponibles"
                data-content="{{ e(contenidoCampoSeguimiento($elemento->medios_disponibles)) }}">
                <span>Medios disponibles</span>
                <small>{{ resumenCampoSeguimiento($elemento->medios_disponibles) }}</small>
            </button>

        </div>

        {{-- COLUMNA CENTRAL --}}
        <div class="center-column">

            <div class="time-row">
                <button
                    class="time-btn"
                    id="btnHoraTactica"
                    data-title="Hora táctica"
                    data-content=""
                    data-hora-tactica="{{ $horaTacticaBase }}"
                >
                    <span>Hora táctica</span>
                    <strong id="horaTacticaTexto">Calculando...</strong>
                </button>

                <button
                    class="time-btn"
                    id="btnHoraReal"
                    data-title="Hora real de Bolivia"
                    data-content=""
                >
                    <span>Hora real Bolivia</span>
                    <strong id="horaRealBoliviaTexto">Calculando...</strong>
                </button>
            </div>

            <div class="map-box">
                <div class="map-label">Mapa táctico</div>
                <div id="unitMap"></div>
            </div>

            <button
                class="location-btn"
                data-title="Ubicación"
                data-content="{{ e($elemento->ubicacion_tactica ?: 'Latitud: ' . ($elemento->lat ?? 'S/D') . ' | Longitud: ' . ($elemento->lng ?? 'S/D')) }}"
            >
                Ubicación
            </button>

        </div>

        {{-- COLUMNA DERECHA --}}
        <div class="right-column">

            <button class="battle-field-btn"
                data-title="Datos del clima"
                data-content="{{ e(contenidoCampoSeguimiento($elemento->datos_clima)) }}">
                <span>Datos del clima</span>
                <small>{{ resumenCampoSeguimiento($elemento->datos_clima) }}</small>
            </button>

            <button class="battle-field-btn"
                data-title="Estado de apoyo"
                data-content="{{ e(contenidoCampoSeguimiento($elemento->estado_apoyo)) }}">
                <span>Estado de apoyo</span>
                <small>{{ resumenCampoSeguimiento($elemento->estado_apoyo) }}</small>
            </button>

            <button class="battle-field-btn"
                data-title="Matriz de ejecución"
                data-content="{{ e(contenidoCampoSeguimiento($elemento->matriz_ejecucion)) }}">
                <span>Matriz de ejecución</span>
                <small>{{ resumenCampoSeguimiento($elemento->matriz_ejecucion) }}</small>
            </button>

            <button class="battle-field-btn"
                data-title="Rutas"
                data-content="{{ e(contenidoCampoSeguimiento($elemento->rutas)) }}">
                <span>Rutas</span>
                <small>{{ resumenCampoSeguimiento($elemento->rutas) }}</small>
            </button>

            <button class="battle-field-btn"
                data-title="Puesto de mando"
                data-content="{{ e(contenidoCampoSeguimiento($elemento->puesto_mando)) }}">
                <span>Puesto de mando</span>
                <small>{{ resumenCampoSeguimiento($elemento->puesto_mando) }}</small>
            </button>

            <button class="battle-field-btn"
                data-title="Clase II"
                data-content="{{ e(contenidoCampoSeguimiento($elemento->clase_ii)) }}">
                <span>Clase II</span>
                <small>{{ resumenCampoSeguimiento($elemento->clase_ii) }}</small>
            </button>

            <button class="battle-field-btn wide-btn"
                data-title="Clase V"
                data-content="{{ e(contenidoCampoSeguimiento($elemento->clase_v)) }}">
                <span>Clase V</span>
                <small>{{ resumenCampoSeguimiento($elemento->clase_v) }}</small>
            </button>

        </div>

    </div>

    {{-- RESUMEN INFERIOR --}}
    <div class="unit-summary">
        <div>
            <span>Proyecto</span>
            <strong>{{ $elemento->proyecto->nombre ?? 'No asignado' }}</strong>
        </div>

        <div>
            <span>Símbolo</span>
            <strong>{{ $simboloResumen }}</strong>
        </div>

        <div>
            <span>Código</span>
            <strong>{{ $codigoResumen }}</strong>
        </div>

        <div>
            <span>Bando</span>
            <strong>{{ strtoupper($elemento->bando ?? 'S/D') }}</strong>
        </div>

        <div>
            <span>Magnitud</span>
            <strong>{{ strtoupper($elemento->magnitud ?? 'S/D') }}</strong>
        </div>

        <div>
            <span>Coordenadas</span>
            <strong>{{ $elemento->lat ?? 'S/D' }}, {{ $elemento->lng ?? 'S/D' }}</strong>
        </div>
    </div>

</div>

{{-- MODAL --}}
<div class="battle-modal" id="battleModal">
    <div class="battle-modal-content">
        <div class="battle-modal-header">
            <h3 id="battleModalTitle">Detalle</h3>

            <button type="button" id="battleModalClose">
                &times;
            </button>
        </div>

        <div class="battle-modal-body" id="battleModalBody">
            Sin información registrada.
        </div>
    </div>
</div>

@stop

@section('css')
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />

<style>
    html,
    body {
        width: 100vw !important;
        min-height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        background: #0b1118 !important;
    }

    body.tracking-fullscreen {
        overflow-x: hidden !important;
    }

    .wrapper,
    .content-wrapper,
    .content,
    .container-fluid {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        background: transparent !important;
    }

    body.tracking-fullscreen .content-wrapper,
    body.tracking-fullscreen.sidebar-collapse .content-wrapper,
    body.tracking-fullscreen.sidebar-mini.sidebar-collapse .content-wrapper {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
    }

    .content-wrapper {
        min-height: 100vh !important;
        padding-top: 0 !important;
        margin-top: 0 !important;
        background:
            radial-gradient(circle at top left, rgba(132, 204, 22, 0.08), transparent 28%),
            linear-gradient(135deg, #0d140f 0%, #1f2d1f 50%, #090d13 100%) !important;
    }

    body.tracking-fullscreen .content-header {
        width: 100vw !important;
        max-width: 100vw !important;
        padding: 6px !important;
        margin: 0 !important;
    }

    body.tracking-fullscreen .content {
        width: 100vw !important;
        max-width: 100vw !important;
        padding: 0 6px 8px 6px !important;
        margin: 0 !important;
    }

    body.tracking-fullscreen .main-header {
        display: none !important;
        margin-left: 0 !important;
    }

    body.tracking-fullscreen .main-sidebar,
    body.tracking-fullscreen.sidebar-mini .main-sidebar,
    body.tracking-fullscreen.sidebar-collapse .main-sidebar,
    body.tracking-fullscreen.sidebar-mini.sidebar-collapse .main-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 250px !important;
        min-width: 250px !important;
        max-width: 250px !important;
        min-height: 100vh !important;
        margin-left: 0 !important;
        transform: translateX(-252px) !important;
        transition: transform 0.25s ease-in-out !important;
        z-index: 1050 !important;
        box-shadow: 8px 0 28px rgba(0, 0, 0, 0.55) !important;
        border-right: 1px solid rgba(163, 230, 53, 0.28) !important;
    }

    body.tracking-fullscreen.tracking-sidebar-open .main-sidebar,
    body.tracking-fullscreen.sidebar-collapse.tracking-sidebar-open .main-sidebar,
    body.tracking-fullscreen.sidebar-mini.sidebar-collapse.tracking-sidebar-open .main-sidebar {
        transform: translateX(0) !important;
    }

    #warSidebarHotspot {
        position: fixed;
        top: 0;
        left: 0;
        width: 4px;
        height: 100vh;
        z-index: 1049;
        background: transparent;
    }

    #warSidebarHotspot::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 3px;
        height: 100%;
        background: linear-gradient(
            180deg,
            rgba(163, 230, 53, 0.55),
            rgba(15, 23, 42, 0.35),
            rgba(163, 230, 53, 0.40)
        );
        box-shadow: 0 0 10px rgba(163, 230, 53, 0.30);
    }

    .flash-message {
        position: fixed;
        top: 22px;
        right: 24px;
        z-index: 99999;
        padding: 14px 18px;
        border-radius: 12px;
        background: rgba(22, 101, 52, 0.96);
        border: 1px solid rgba(190, 242, 100, 0.65);
        color: #ffffff;
        font-size: 13px;
        font-weight: 900;
        letter-spacing: 0.04em;
        box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
        animation: fadeOutFlash 5s forwards;
    }

    @keyframes fadeOutFlash {
        0% { opacity: 1; transform: translateY(0); }
        75% { opacity: 1; transform: translateY(0); }
        100% { opacity: 0; transform: translateY(-10px); pointer-events: none; }
    }

    .tracking-title {
        width: 100% !important;
        text-align: center;
        padding: 16px 18px;
        border: 1px solid rgba(163, 230, 53, 0.28);
        border-radius: 12px;
        background:
            linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(2, 6, 23, 0.96));
        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.30);
    }

    .tracking-title h1 {
        margin: 0;
        color: #ffffff;
        font-size: 25px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.10em;
    }

    .tracking-title p {
        margin: 7px 0 0;
        color: #bef264;
        font-size: 12px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.14em;
    }

    .tracking-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        padding-bottom: 8px;
    }

    .tracking-actions {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        margin: 10px 0 12px;
    }

    .tracking-action-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border-radius: 9px;
        padding: 10px 14px;
        color: #ffffff;
        border: 1px solid rgba(255, 255, 255, 0.50);
        background: rgba(15, 23, 42, 0.75);
        font-size: 12px;
        font-weight: 900;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        transition: all 0.2s ease;
    }

    .tracking-action-btn.primary {
        color: #0f172a;
        background: #a3e635;
        border-color: #bef264;
    }

    .tracking-action-btn:hover {
        color: #bef264;
        border-color: #bef264;
        background: rgba(132, 204, 22, 0.12);
        transform: translateY(-1px);
        text-decoration: none;
    }

    .tracking-action-btn.primary:hover {
        color: #0f172a;
        filter: brightness(1.12);
    }

    .battle-layout {
        width: 100% !important;
        max-width: 100% !important;
        display: grid;
        grid-template-columns: minmax(270px, 22%) minmax(0, 1fr) minmax(270px, 22%);
        gap: 10px;
        align-items: stretch;
        padding: 10px;
        border: 1px solid rgba(163, 230, 53, 0.28);
        border-radius: 14px;
        min-height: calc(100vh - 200px);
        background:
            linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.98)),
            repeating-linear-gradient(
                45deg,
                rgba(255, 255, 255, 0.025) 0,
                rgba(255, 255, 255, 0.025) 1px,
                transparent 1px,
                transparent 9px
            );
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.42);
        position: relative;
        overflow: hidden;
    }

    .battle-layout::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            linear-gradient(rgba(163, 230, 53, 0.045) 1px, transparent 1px),
            linear-gradient(90deg, rgba(163, 230, 53, 0.045) 1px, transparent 1px);
        background-size: 46px 46px;
        opacity: 0.28;
        pointer-events: none;
    }

    .left-column,
    .center-column,
    .right-column {
        position: relative;
        z-index: 2;
        min-width: 0;
    }

    .left-column,
    .right-column {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
        align-content: start;
    }

    .wide-btn {
        grid-column: 1 / -1;
    }

    .battle-field-btn,
    .time-btn,
    .location-btn {
        width: 100%;
        min-height: 72px;
        border: 1px solid rgba(190, 242, 100, 0.52);
        border-radius: 7px;
        color: #ffffff;
        background:
            linear-gradient(135deg, rgba(15, 23, 42, 0.86), rgba(30, 41, 59, 0.72));
        font-weight: 900;
        text-transform: uppercase;
        transition: all 0.2s ease;
        padding: 8px 9px;
        text-align: center;
        overflow: hidden;
    }

    .battle-field-btn span {
        display: block;
        color: #ffffff;
        font-size: 11px;
        letter-spacing: 0.05em;
        margin-bottom: 5px;
    }

    .battle-field-btn small {
        display: block;
        color: #cbd5e1;
        font-size: 9.5px;
        line-height: 1.25;
        text-transform: none;
        letter-spacing: 0;
        font-weight: 700;
    }

    .battle-field-btn:hover,
    .time-btn:hover,
    .location-btn:hover {
        color: #0f172a;
        background: #a3e635;
        border-color: #bef264;
        box-shadow: 0 0 20px rgba(163, 230, 53, 0.22);
        transform: translateY(-1px);
    }

    .battle-field-btn:hover span,
    .battle-field-btn:hover small {
        color: #0f172a;
    }

    .center-column {
        display: flex;
        flex-direction: column;
        align-items: center;
        min-width: 0;
    }

    .time-row {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 10px;
    }

    .time-btn {
        min-height: 58px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
    }

    .time-btn span {
        font-size: 10px;
        letter-spacing: 0.10em;
    }

    .time-btn strong {
        display: block;
        color: #bef264;
        font-size: 13px;
        letter-spacing: 0.08em;
    }

    .map-box {
        width: 100%;
        flex: 1;
        min-height: 650px;
        height: calc(100vh - 295px);
        position: relative;
        border: 1px solid rgba(190, 242, 100, 0.55);
        background: rgba(2, 6, 23, 0.88);
        overflow: hidden;
        border-radius: 8px;
    }

    .map-label {
        position: absolute;
        z-index: 500;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: rgba(255, 255, 255, 0.16);
        font-size: 34px;
        font-weight: 900;
        letter-spacing: 0.24em;
        text-transform: uppercase;
        pointer-events: none;
    }

    #unitMap {
        width: 100%;
        height: 100%;
    }

    .location-btn {
        width: 320px;
        margin-top: 10px;
        min-height: 42px;
        font-size: 12px;
        letter-spacing: 0.08em;
    }

    .unit-summary {
        margin-top: 10px;
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 8px;
    }

    .unit-summary div {
        padding: 10px;
        border: 1px solid rgba(163, 230, 53, 0.25);
        border-radius: 10px;
        background: rgba(15, 23, 42, 0.84);
    }

    .unit-summary span {
        display: block;
        margin-bottom: 5px;
        color: #94a3b8;
        font-size: 10px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.14em;
    }

    .unit-summary strong {
        color: #ffffff;
        font-size: 12px;
        font-weight: 900;
    }

    .battle-modal {
        display: none;
        position: fixed;
        z-index: 9999;
        inset: 0;
        align-items: center;
        justify-content: center;
        padding: 20px;
        background: rgba(0, 0, 0, 0.72);
        backdrop-filter: blur(5px);
    }

    .battle-modal.show {
        display: flex;
    }

    .battle-modal-content {
        width: min(760px, 95%);
        border: 1px solid rgba(190, 242, 100, 0.55);
        border-radius: 16px;
        background:
            linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.98));
        box-shadow:
            0 25px 70px rgba(0, 0, 0, 0.75),
            0 0 35px rgba(132, 204, 22, 0.15);
        overflow: hidden;
    }

    .battle-modal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 18px;
        border-bottom: 1px solid rgba(190, 242, 100, 0.32);
    }

    .battle-modal-header h3 {
        margin: 0;
        color: #bef264;
        font-size: 18px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.14em;
    }

    .battle-modal-header button {
        width: 34px;
        height: 34px;
        border: 1px solid rgba(255, 255, 255, 0.35);
        border-radius: 999px;
        color: #ffffff;
        background: transparent;
        font-size: 22px;
        line-height: 1;
        transition: all 0.2s ease;
    }

    .battle-modal-header button:hover {
        color: #0f172a;
        background: #a3e635;
        border-color: #bef264;
    }

    .battle-modal-body {
        min-height: 220px;
        max-height: 520px;
        overflow-y: auto;
        padding: 20px;
        color: #e5e7eb;
        font-size: 15px;
        line-height: 1.65;
        white-space: pre-line;
    }

    .leaflet-container {
        background: #0f172a;
    }

    .leaflet-control-layers {
        border: 1px solid rgba(163, 230, 53, 0.35) !important;
        background: rgba(15, 23, 42, 0.92) !important;
        color: #e5e7eb !important;
        border-radius: 10px !important;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.42) !important;
    }

    .leaflet-control-layers label {
        color: #e5e7eb !important;
        font-size: 12px;
        font-weight: 700;
    }

    .leaflet-control-zoom a {
        background: rgba(15, 23, 42, 0.94) !important;
        color: #bef264 !important;
        border-color: rgba(163, 230, 53, 0.30) !important;
    }

    .leaflet-popup-content-wrapper {
        background: #172019;
        color: #e8f0e4;
        border: 1px solid #4f6647;
    }

    .leaflet-popup-tip {
        background: #172019;
    }

    .leaflet-div-icon.simbolo-militar-leaflet {
        background: transparent !important;
        border: none !important;
    }

    .militar-map-marker {
        transform-origin: center center;
    }

    .militar-symbol {
        --militar-color: #0057B8;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-family: Arial, Helvetica, sans-serif;
        color: var(--militar-color);
        line-height: 1;
        min-width: 104px;
        text-align: center;
        font-weight: bold;
        filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.55));
    }

    .militar-magnitud {
        font-size: 15px;
        min-height: 16px;
        margin-bottom: 2px;
        color: var(--militar-color);
    }

    .militar-cuerpo {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
    }

    .militar-lateral {
        width: 34px;
        min-height: 20px;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--militar-color);
    }

    .militar-marco {
        width: 52px;
        height: 36px;
        border: 2px solid var(--militar-color);
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.96);
        color: var(--militar-color);
        overflow: hidden;
    }

    .militar-marco.con-imagen {
        width: 66px;
        height: 54px;
        border-radius: 4px;
        padding: 2px;
        background: #ffffff;
    }

    .militar-marco.con-imagen img {
        width: 100%;
        height: 100%;
        max-width: 60px;
        max-height: 48px;
        object-fit: contain;
        display: block;
        background: #ffffff;
    }

    .militar-centro-identidad {
        width: 42px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--militar-color);
        font-weight: 900;
        position: relative;
    }

    .militar-info {
        position: absolute;
        right: 1px;
        bottom: 1px;
        font-size: 8px;
        color: var(--militar-color);
    }

    .militar-futuro .militar-marco {
        border-style: dashed;
    }

    .militar-simulado .militar-marco::after {
        content: "";
        position: absolute;
        inset: 4px;
        border: 1px dashed var(--militar-color);
        pointer-events: none;
    }

    .simbolo-infanteria::before,
    .simbolo-infanteria::after {
        content: "";
        position: absolute;
        width: 43px;
        height: 2px;
        background: var(--militar-color);
        top: 13px;
        left: 0;
    }

    .simbolo-infanteria::before {
        transform: rotate(32deg);
    }

    .simbolo-infanteria::after {
        transform: rotate(-32deg);
    }

    .simbolo-caballeria::before {
        content: "";
        width: 24px;
        height: 16px;
        border: 2px solid var(--militar-color);
        border-top: 0;
        border-radius: 0 0 18px 18px;
        display: block;
    }

    .simbolo-artilleria::before {
        content: "";
        width: 22px;
        height: 22px;
        border: 2px solid var(--militar-color);
        border-radius: 50%;
        display: block;
    }

    .simbolo-comunicaciones::before {
        content: "";
        width: 28px;
        height: 2px;
        background: var(--militar-color);
        display: block;
        transform: rotate(-35deg);
    }

    .simbolo-comunicaciones::after {
        content: "";
        position: absolute;
        width: 28px;
        height: 2px;
        background: var(--militar-color);
        display: block;
        transform: rotate(35deg);
    }

    .simbolo-ingenieria::before {
        content: "ING";
        font-size: 11px;
        font-weight: 900;
    }

    .simbolo-blindados {
        display: flex;
        gap: 5px;
    }

    .simbolo-blindados::before,
    .simbolo-blindados::after {
        content: "";
        width: 12px;
        height: 12px;
        border: 2px solid var(--militar-color);
        border-radius: 50%;
    }

    .simbolo-motorizado {
        display: flex;
        gap: 6px;
    }

    .simbolo-motorizado::before,
    .simbolo-motorizado::after {
        content: "";
        width: 13px;
        height: 13px;
        border: 2px solid var(--militar-color);
        border-radius: 50%;
    }

    .simbolo-selva::before {
        content: "S";
        font-size: 16px;
        font-weight: 900;
    }

    .simbolo-pm::before {
        content: "P.M.";
        font-size: 13px;
        font-weight: 900;
    }

    .simbolo-sanidad::before {
        content: "+";
        font-size: 24px;
        font-weight: 900;
    }

    .simbolo-intendencia::before {
        content: "I";
        font-size: 16px;
        font-weight: 900;
    }

    .simbolo-material-belico::before {
        content: "M.B.";
        font-size: 12px;
        font-weight: 900;
    }

    .simbolo-generico::before {
        content: attr(data-label);
        font-size: 12px;
        font-weight: 900;
    }

    @media (max-width: 1200px) {
        .battle-layout {
            grid-template-columns: 1fr;
        }

        .left-column,
        .right-column {
            grid-template-columns: repeat(2, 1fr);
        }

        .unit-summary {
            grid-template-columns: repeat(2, 1fr);
        }

        .map-box {
            min-height: 540px;
            height: 560px;
        }
    }

    @media (max-width: 768px) {
        .tracking-title h1 {
            font-size: 18px;
        }

        .tracking-actions {
            justify-content: flex-start;
            flex-wrap: wrap;
        }

        .left-column,
        .right-column,
        .unit-summary {
            grid-template-columns: 1fr;
        }

        .battle-layout {
            padding: 10px;
            gap: 12px;
        }

        .map-box {
            height: 380px;
            min-height: 380px;
        }

        .time-row {
            grid-template-columns: 1fr;
        }

        .location-btn {
            width: 100%;
        }
    }
</style>
@stop

@section('js')
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function () {
    document.body.classList.add('tracking-fullscreen');
    document.body.classList.remove('sidebar-open');
    document.body.classList.add('sidebar-collapse');

    setTimeout(function () {
        document.body.classList.remove('sidebar-open');
        document.body.classList.add('sidebar-collapse');

        const contentWrapper = document.querySelector('.content-wrapper');
        const mainHeader = document.querySelector('.main-header');
        const mainFooter = document.querySelector('.main-footer');

        if (contentWrapper) {
            contentWrapper.style.marginLeft = '0px';
            contentWrapper.style.paddingLeft = '0px';
            contentWrapper.style.width = '100vw';
            contentWrapper.style.maxWidth = '100vw';
        }

        if (mainHeader) {
            mainHeader.style.marginLeft = '0px';
            mainHeader.style.display = 'none';
        }

        if (mainFooter) {
            mainFooter.style.marginLeft = '0px';
        }
    }, 50);

    const hotspot = document.getElementById('warSidebarHotspot');
    const sidebar = document.querySelector('.main-sidebar');

    if (hotspot && sidebar) {
        hotspot.addEventListener('mouseenter', function () {
            document.body.classList.add('tracking-sidebar-open');
        });

        sidebar.addEventListener('mouseenter', function () {
            document.body.classList.add('tracking-sidebar-open');
        });

        sidebar.addEventListener('mouseleave', function () {
            document.body.classList.remove('tracking-sidebar-open');
        });
    }

    const modal = document.getElementById('battleModal');
    const modalTitle = document.getElementById('battleModalTitle');
    const modalBody = document.getElementById('battleModalBody');
    const modalClose = document.getElementById('battleModalClose');

    document.querySelectorAll('[data-title][data-content]').forEach(function (button) {
        button.addEventListener('click', function () {
            modalTitle.textContent = this.dataset.title;
            modalBody.textContent = this.dataset.content || 'Sin información registrada.';
            modal.classList.add('show');
        });
    });

    modalClose.addEventListener('click', function () {
        modal.classList.remove('show');
    });

    modal.addEventListener('click', function (event) {
        if (event.target === modal) {
            modal.classList.remove('show');
        }
    });

    document.addEventListener('keydown', function (event) {
        if (event.key === 'Escape') {
            modal.classList.remove('show');
        }
    });

    function actualizarHoraRealBolivia() {
        const horaRealTexto = document.getElementById('horaRealBoliviaTexto');
        const btnHoraReal = document.getElementById('btnHoraReal');

        const ahora = new Date();

        const formatoCompleto = new Intl.DateTimeFormat('es-BO', {
            timeZone: 'America/La_Paz',
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit',
            hour12: false
        }).format(ahora);

        const formatoHora = new Intl.DateTimeFormat('es-BO', {
            timeZone: 'America/La_Paz',
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit',
            hour12: false
        }).format(ahora);

        if (horaRealTexto) {
            horaRealTexto.textContent = formatoHora;
        }

        if (btnHoraReal) {
            btnHoraReal.dataset.content = `Hora actual oficial en Bolivia: ${formatoCompleto}`;
        }
    }

    function actualizarHoraTactica() {
        const horaTacticaTexto = document.getElementById('horaTacticaTexto');
        const btnHoraTactica = document.getElementById('btnHoraTactica');

        if (!btnHoraTactica || !horaTacticaTexto) {
            return;
        }

        const horaTactica = btnHoraTactica.dataset.horaTactica || '';

        if (horaTactica) {
            horaTacticaTexto.textContent = horaTactica;
            btnHoraTactica.dataset.content = `Hora táctica registrada: ${horaTactica}`;
        } else {
            horaTacticaTexto.textContent = 'Sin registrar';
            btnHoraTactica.dataset.content = 'Hora táctica no registrada.';
        }
    }

    actualizarHoraRealBolivia();
    actualizarHoraTactica();

    setInterval(actualizarHoraRealBolivia, 1000);

    const rawLat = @json($elemento->lat);
    const rawLng = @json($elemento->lng);

    const lat = rawLat !== null && rawLat !== '' ? parseFloat(rawLat) : -16.5;
    const lng = rawLng !== null && rawLng !== '' ? parseFloat(rawLng) : -64.8;

    const unidad = {
        id: @json($elemento->id),
        nombre: @json($elemento->nombre ?: 'Unidad sin nombre'),
        proyecto: @json($elemento->proyecto->nombre ?? 'No asignado'),
        equipo: @json($elemento->equipo->nombre ?? 'No asignado'),

        lat: lat,
        lng: lng,

        bando: @json($elemento->bando ?: 'amigo'),
        estado: @json($elemento->estado ?: 'No registrado'),
        nivel_planeamiento: @json($elemento->nivel_planeamiento ?: 'tactico'),

        tipo_basico: @json($elemento->tipo_basico ?: 'unidad'),
        grupo_identificacion: @json($elemento->grupo_identificacion ?: 'armas'),
        identificacion_id: @json($elemento->identificacion_id ?: null),
        identificacion_nombre: @json($elemento->identificacion_nombre ?: ($elemento->simbolo->nombre ?? 'Unidad')),
        identificacion_codigo: @json($elemento->identificacion_codigo ?: ($elemento->simbolo->abreviatura ?? $elemento->simbolo->codigo ?? 'UN')),
        identificacion_clase: @json($elemento->identificacion_clase ?: 'simbolo-generico'),

        designacion_unica: @json($elemento->designacion_unica ?: ''),
        magnitud: @json($elemento->magnitud ?: ''),
        designacion_derecha: @json($elemento->designacion_derecha ?: ''),
        informacion_adicional: @json($elemento->informacion_adicional ?: ''),
        armamento: @json($elemento->armamento ?: ''),
        estado_grafico: @json($elemento->estado_grafico ?: 'actual'),

        simbolo_imagen_url: @json($imagenSimboloUrl),
        simbolo_color: @json($colorSimbolo)
    };

    const limiteMundo = L.latLngBounds(
        L.latLng(-85, -180),
        L.latLng(85, 180)
    );

    const limiteBolivia = L.latLngBounds(
        L.latLng(-23.50, -70.50),
        L.latLng(-8.50, -56.50)
    );

    const map = L.map('unitMap', {
        zoomControl: true,
        attributionControl: true,
        worldCopyJump: false,
        maxBounds: limiteBolivia,
        maxBoundsViscosity: 1.0,
        minZoom: 5,
        layers: []
    }).setView([lat, lng], rawLat && rawLng ? 8 : 6);

    const mapaBase = L.tileLayer(
        'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        {
            maxZoom: 19,
            minZoom: 5,
            noWrap: true,
            bounds: limiteMundo,
            attribution: '&copy; OpenStreetMap'
        }
    );

    const mapaSatelital = L.tileLayer(
        'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
        {
            maxZoom: 19,
            minZoom: 5,
            noWrap: true,
            bounds: limiteMundo,
            attribution: 'Tiles &copy; Esri'
        }
    );

    const mapaTopografico = L.tileLayer(
        'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png',
        {
            maxZoom: 17,
            minZoom: 5,
            noWrap: true,
            bounds: limiteMundo,
            attribution: '&copy; OpenTopoMap'
        }
    );

    mapaBase.addTo(map);

    L.control.layers(
        {
            'Mapa base': mapaBase,
            'Mapa satelital': mapaSatelital,
            'Mapa topográfico': mapaTopografico
        },
        {},
        {
            position: 'topright',
            collapsed: false
        }
    ).addTo(map);

    function escapeHtml(text) {
        const div = document.createElement('div');
        div.innerText = text ?? '';
        return div.innerHTML;
    }

    function normalizarUrlImagenSimbolo(imagen) {
        if (!imagen) {
            return '';
        }

        const texto = String(imagen);

        if (texto.startsWith('http://') || texto.startsWith('https://')) {
            return texto;
        }

        if (texto.startsWith('/storage/')) {
            return texto;
        }

        if (texto.startsWith('storage/')) {
            return '/' + texto;
        }

        return `/storage/${texto}`;
    }

    function colorReglamentarioPorBando(bando) {
        if (bando === 'enemigo') {
            return '#D00000';
        }

        if (bando === 'obstaculo') {
            return '#008000';
        }

        if (bando === 'contaminado') {
            return '#F2C300';
        }

        if (bando === 'neutral') {
            return '#6b7280';
        }

        return '#0057B8';
    }

    function construirCentroIdentidad(unidad) {
        const clase = unidad.identificacion_clase || 'simbolo-generico';
        const codigo = unidad.identificacion_codigo || 'UN';

        return `
            <div class="militar-centro-identidad ${escapeHtml(clase)}"
                 data-label="${escapeHtml(codigo)}">
            </div>
        `;
    }

    function construirHtmlSimboloMilitar(unidad) {
        const color = unidad.simbolo_color || colorReglamentarioPorBando(unidad.bando);

        const claseEstado = unidad.estado_grafico === 'futuro'
            ? 'militar-futuro'
            : unidad.estado_grafico === 'simulado'
                ? 'militar-simulado'
                : '';

        const imagen = normalizarUrlImagenSimbolo(unidad.simbolo_imagen_url || '');

        let contenidoCentral = construirCentroIdentidad(unidad);
        let claseMarcoImagen = '';

        if (imagen) {
            contenidoCentral = `
                <img
                    src="${escapeHtml(imagen)}"
                    alt="${escapeHtml(unidad.identificacion_nombre || unidad.nombre || 'Símbolo')}"
                    onerror="this.style.display='none'; this.parentElement.classList.remove('con-imagen');"
                >
            `;

            claseMarcoImagen = 'con-imagen';
        }

        return `
            <div class="militar-map-marker">
                <div class="militar-symbol ${claseEstado}" style="--militar-color:${escapeHtml(color)};">
                    <div class="militar-magnitud">
                        ${escapeHtml(unidad.magnitud || '')}
                    </div>

                    <div class="militar-cuerpo">
                        <div class="militar-lateral militar-izq">
                            ${escapeHtml(unidad.designacion_unica || '')}
                        </div>

                        <div class="militar-marco ${claseMarcoImagen}">
                            ${contenidoCentral}
                            <span class="militar-info">
                                ${escapeHtml(unidad.informacion_adicional || '')}
                            </span>
                        </div>

                        <div class="militar-lateral militar-der">
                            ${escapeHtml(unidad.designacion_derecha || '')}
                        </div>
                    </div>
                </div>
            </div>
        `;
    }

    function iconoTactico(unidad) {
        return L.divIcon({
            className: 'simbolo-militar-leaflet',
            html: construirHtmlSimboloMilitar(unidad),
            iconSize: [112, 82],
            iconAnchor: [56, 41],
            popupAnchor: [0, -42]
        });
    }

    L.marker([lat, lng], {
        icon: iconoTactico(unidad)
    })
        .addTo(map)
        .bindPopup(`
            <strong>${escapeHtml(unidad.nombre)}</strong><br>
            Proyecto: ${escapeHtml(unidad.proyecto)}<br>
            Equipo: ${escapeHtml(unidad.equipo)}<br>
            Símbolo: ${escapeHtml(unidad.identificacion_nombre)}<br>
            Código: ${escapeHtml(unidad.identificacion_codigo)}<br>
            Bando: ${escapeHtml(unidad.bando)}<br>
            Magnitud: ${escapeHtml(unidad.magnitud || 'N/D')}<br>
            Designación: ${escapeHtml(unidad.designacion_unica || 'N/D')}<br>
            Estado: ${escapeHtml(unidad.estado)}<br>
            Lat: ${escapeHtml(lat)}<br>
            Lng: ${escapeHtml(lng)}
        `)
        .openPopup();

    setTimeout(function () {
        map.invalidateSize();
    }, 300);
});
</script>
@stop