@extends('adminlte::page')

@section('title', 'Sala de Guerra')

@section('content_header')
    <div class="war-room-header">
        <div>
            <h1 class="mb-1 text-white">
                <i class="fas fa-crosshairs"></i>
                SALA DE GUERRA: {{ strtoupper($proyecto->nombre ?? 'SIN NOMBRE') }}
            </h1>

            <div class="text-light small">
                Estado:
                <strong>{{ $proyecto->estado ?? 'Sin estado' }}</strong>
            </div>
        </div>

        <div class="mt-2 mt-md-0">
            @if(\Illuminate\Support\Facades\Route::has('proyectos.pdf'))
                <a href="{{ route('proyectos.pdf', $proyecto) }}" class="btn btn-danger btn-sm">
                    <i class="fas fa-file-pdf"></i>
                    Exportar PDF
                </a>
            @endif

            <a href="{{ route('proyectos.index') }}" class="btn btn-secondary btn-sm">
                <i class="fas fa-arrow-left"></i>
                Volver
            </a>
        </div>
    </div>
@stop

@section('content')

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

@if(session('success'))
    <div class="alert alert-success alert-dismissible fade show">
        <i class="fas fa-check-circle"></i>
        {{ session('success') }}
        <button type="button" class="close" data-dismiss="alert" aria-label="Cerrar">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
@endif

@if($errors->any())
    <div class="alert alert-danger alert-dismissible fade show">
        <strong>Revise los datos:</strong>
        <ul class="mb-0">
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
        <button type="button" class="close" data-dismiss="alert" aria-label="Cerrar">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
@endif

<div id="menuContextualUnidad" class="war-context-menu">
    <button type="button" id="ctxSeleccionarUnidad">
        <i class="fas fa-crosshairs"></i>
        Seleccionar unidad
    </button>

    <button type="button" id="ctxOrdenarMovimiento">
        <i class="fas fa-route"></i>
        Ordenar movimiento
    </button>

    <button type="button" id="ctxVerDetalle">
        <i class="fas fa-eye"></i>
        Ver detalle
    </button>
</div>

<div class="war-room-layout row mt-3">

    {{-- PANEL IZQUIERDO --}}
    <div class="war-left-panel col-lg-4 col-xl-3">

        {{-- CENTRO DE MANDO --}}
        <div class="card bg-dark text-light tactical-card">
            <div class="card-header">
                <strong>
                    <i class="fas fa-chess-king"></i>
                    Centro de mando
                </strong>
            </div>

            <div class="card-body">
                <p><strong>Proyecto:</strong> {{ $proyecto->nombre ?? 'Sin nombre' }}</p>
                <p><strong>Descripción:</strong> {{ $proyecto->descripcion ?? 'Sin descripción' }}</p>
                <p><strong>Estado:</strong> {{ $proyecto->estado ?? 'Sin estado' }}</p>
            </div>
        </div>

        {{-- CAPAS KML / KMZ --}}
        <div class="card bg-dark text-light tactical-card">
            <div class="card-header">
                <strong>
                    <i class="fas fa-layer-group"></i>
                    Capas KML / KMZ
                </strong>
            </div>

            <div class="card-body">
                @if(\Illuminate\Support\Facades\Route::has('proyectos.capas.store'))
                    <form action="{{ route('proyectos.capas.store', $proyecto) }}" method="POST" enctype="multipart/form-data">
                        @csrf

                        <div class="form-group">
                            <label>Nombre de la capa</label>
                            <input
                                type="text"
                                name="nombre"
                                class="form-control form-control-sm tactical-input"
                                placeholder="Ej: Área de operaciones"
                                required
                            >
                        </div>

                        <div class="form-group">
                            <label>Archivo KML / KMZ</label>
                            <input
                                type="file"
                                name="archivo"
                                class="form-control form-control-sm tactical-input"
                                accept=".kml,.kmz,.xml"
                                required
                            >
                        </div>

                        <div class="form-group">
                            <label>Color de la capa</label>
                            <input
                                type="color"
                                name="color"
                                class="form-control form-control-sm tactical-input capa-color-input-form"
                                value="#a3e635"
                                required
                            >
                        </div>

                        <button type="submit" class="btn btn-success btn-block btn-sm">
                            <i class="fas fa-upload"></i>
                            Cargar capa
                        </button>
                    </form>
                @endif

                <button type="button" class="btn btn-outline-light btn-block btn-sm mt-2" id="btnRecargarCapas">
                    <i class="fas fa-sync-alt"></i>
                    Recargar capas
                </button>

                <div class="mt-3">
                    <label>Capas cargadas</label>
                    <div id="listaCapas" class="capas-lista">
                        <div class="text-muted small">Cargando capas...</div>
                    </div>
                </div>
            </div>
        </div>

        {{-- EQUIPOS --}}
        <div class="card bg-dark text-light tactical-card">
            <div class="card-header">
                <strong>
                    <i class="fas fa-users"></i>
                    Equipos
                </strong>
            </div>

            <div class="card-body">
                @forelse($equipos as $equipo)
                    <div class="team-item">
                        <div>
                            <strong>{{ $equipo->nombre }}</strong><br>
                            <small>{{ ucfirst($equipo->tipo ?? 'sin tipo') }}</small>
                        </div>

                        <span
                            class="team-color"
                            style="background: {{ $equipo->color ?: '#6b7280' }}"
                        ></span>
                    </div>
                @empty
                    <div class="text-muted">No hay equipos.</div>
                @endforelse
            </div>
        </div>

        {{-- DESPLEGAR UNIDAD --}}
        <div class="card bg-dark text-light tactical-card">
            <div class="card-header">
                <strong>
                    <i class="fas fa-map-marker-alt"></i>
                    Desplegar unidad
                </strong>
            </div>

            <div class="card-body">
                <div class="form-group">
                    <label>Símbolo reglamentario</label>
                    <select id="simbolo_id" class="form-control form-control-sm tactical-input">
                        <option value="">Seleccione</option>

                        @foreach($simbolos as $simbolo)
                            <option
                                value="{{ $simbolo->id }}"
                                data-nombre="{{ $simbolo->nombre }}"
                                data-codigo="{{ $simbolo->codigo }}"
                                data-abreviatura="{{ $simbolo->abreviatura }}"
                                data-magnitud="{{ $simbolo->magnitud }}"
                                data-estado-grafico="{{ $simbolo->estado_grafico }}"
                                data-designacion-izquierda="{{ $simbolo->designacion_izquierda }}"
                                data-designacion-derecha="{{ $simbolo->designacion_derecha }}"
                                data-informacion-adicional="{{ $simbolo->informacion_adicional }}"
                                data-armamento="{{ $simbolo->armamento }}"
                                data-color="{{ $simbolo->color_final ?? $simbolo->color_reglamentario ?? '#0057B8' }}"
                                data-imagen="{{ $simbolo->imagen ? asset('storage/' . $simbolo->imagen) : '' }}"
                            >
                                {{ $simbolo->nombre }}
                                @if($simbolo->codigo)
                                    - {{ $simbolo->codigo }}
                                @endif
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="form-group">
                    <label>Nombre unidad</label>
                    <input type="text" id="nombre_unidad" class="form-control form-control-sm tactical-input">
                </div>

                <div class="form-group">
                    <label>Designación izquierda / propia</label>
                    <input
                        type="text"
                        id="designacion_unica"
                        class="form-control form-control-sm tactical-input"
                        placeholder="Ej: A/IX, D/II"
                    >
                </div>

                <div class="form-group">
                    <label>Magnitud de escalón</label>
                    <input
                        type="text"
                        id="magnitud"
                        class="form-control form-control-sm tactical-input"
                        placeholder="Ej: I, II, III, X, XX, XXX"
                    >
                </div>

                <div class="form-group">
                    <label>Designación derecha</label>
                    <input
                        type="text"
                        id="designacion_derecha"
                        class="form-control form-control-sm tactical-input"
                        placeholder="Ej: 1, 7, 10"
                    >
                </div>

                <div class="form-group">
                    <label>Información adicional</label>
                    <input
                        type="text"
                        id="informacion_adicional"
                        class="form-control form-control-sm tactical-input"
                        placeholder="Ej: Ref., Comb., SPAC"
                    >
                </div>

                <div class="form-group">
                    <label>Armamento / calibre</label>
                    <input
                        type="text"
                        id="armamento"
                        class="form-control form-control-sm tactical-input"
                        placeholder="Ej: 30, 400, 500"
                    >
                    <small class="text-muted">
                        Este dato se guarda y aparece en el detalle, pero no se dibuja debajo del símbolo.
                    </small>
                </div>

                <div class="form-group">
                    <label>Estado gráfico</label>
                    <select id="estado_grafico" class="form-control form-control-sm tactical-input">
                        <option value="actual">Actual</option>
                        <option value="futuro">Futuro o previsto</option>
                        <option value="simulado">Simulado</option>
                    </select>
                </div>

                <div class="form-group">
                    <label>Equipo</label>
                    <select id="equipo_id" class="form-control form-control-sm tactical-input">
                        <option value="">Seleccione</option>
                        @foreach($equipos as $equipo)
                            <option value="{{ $equipo->id }}">{{ $equipo->nombre }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="form-group">
                    <label>Bando</label>
                    <select id="bando" class="form-control form-control-sm tactical-input">
                        <option value="amigo">Amigo / Propio</option>
                        <option value="enemigo">Enemigo</option>
                        <option value="neutral">Neutral</option>
                    </select>
                </div>

                <div class="form-group">
                    <label>Nivel</label>
                    <select id="nivel_planeamiento" class="form-control form-control-sm tactical-input">
                        <option value="tactico">Táctico</option>
                        <option value="operacional">Operacional</option>
                        <option value="estrategico">Estratégico</option>
                    </select>
                </div>

                <div class="form-group">
                    <label>Estado</label>
                    <select id="estado_unidad" class="form-control form-control-sm tactical-input">
                        <option value="activo">Activo</option>
                        <option value="movimiento">Movimiento</option>
                        <option value="espera">Espera</option>
                        <option value="combate">Combate</option>
                    </select>
                </div>

                <div class="preview-reglamentario-box">
                    <label>Vista previa</label>

                    <div id="previewSimboloMilitar" class="preview-simbolo-contenedor">
                        <div class="militar-symbol" style="--militar-color:#0057B8;">
                            <div class="militar-magnitud" id="previewMagnitud"></div>

                            <div class="militar-cuerpo">
                                <div class="militar-lateral militar-izq" id="previewIzquierda"></div>

                                <div class="militar-marco" id="previewMarco">
                                    <span class="militar-abreviatura" id="previewCentro">UN</span>
                                    <span class="militar-info" id="previewInfo"></span>
                                </div>

                                <div class="militar-lateral militar-der" id="previewDerecha"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="alert alert-secondary mb-0 tactical-alert mt-2">
                    Haz clic en el mapa para desplegar la unidad.
                </div>
            </div>
        </div>

        {{-- MENSAJE RÁPIDO --}}
        <div class="card bg-dark text-light tactical-card">
            <div class="card-header">
                <strong>
                    <i class="fas fa-comments"></i>
                    Mensaje rápido
                </strong>
            </div>

            <div class="card-body">
                <div class="form-group">
                    <label>Tipo destino</label>
                    <select id="tipo_destino" class="form-control form-control-sm tactical-input">
                        <option value="general">General</option>
                        <option value="equipo">Equipo</option>
                        <option value="unidad">Unidad</option>
                    </select>
                </div>

                <div class="form-group">
                    <label>Equipo origen</label>
                    <select id="equipo_origen_id" class="form-control form-control-sm tactical-input">
                        <option value="">Seleccione</option>
                        @foreach($equipos as $equipo)
                            <option value="{{ $equipo->id }}">{{ $equipo->nombre }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="form-group" id="grupo_equipo_destino">
                    <label>Equipo destino</label>
                    <select id="equipo_destino_id" class="form-control form-control-sm tactical-input">
                        <option value="">Seleccione</option>
                        @foreach($equipos as $equipo)
                            <option value="{{ $equipo->id }}">{{ $equipo->nombre }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="form-group" id="grupo_unidad_destino" style="display:none;">
                    <label>Unidad destino</label>
                    <select id="unidad_destino_id" class="form-control form-control-sm tactical-input">
                        <option value="">Seleccione</option>
                    </select>
                </div>

                <div class="form-group">
                    <label>Prioridad</label>
                    <select id="prioridad" class="form-control form-control-sm tactical-input">
                        <option value="baja">Baja</option>
                        <option value="normal" selected>Normal</option>
                        <option value="alta">Alta</option>
                    </select>
                </div>

                <div class="form-group">
                    <label>Mensaje</label>
                    <textarea id="contenido_mensaje" class="form-control form-control-sm tactical-input" rows="4"></textarea>
                </div>

                <button type="button" id="btnEnviarMensaje" class="btn btn-success btn-block btn-sm">
                    <i class="fas fa-paper-plane"></i>
                    Enviar mensaje
                </button>
            </div>
        </div>
    </div>

    {{-- PANEL PRINCIPAL --}}
    <div class="war-main-panel col-lg-8 col-xl-9">
        <div class="card bg-dark text-light war-map-card" id="warMapCard">
            <div class="card-header d-flex justify-content-between align-items-center flex-wrap">
                <div>
                    <strong>
                        <i class="fas fa-map-marked-alt"></i>
                        Mapa táctico
                    </strong>
                    <small class="d-block text-muted">Vista operacional / seguimiento de unidades</small>
                </div>

                <div class="map-toolbar mt-2 mt-md-0">
                    <button type="button" class="btn btn-outline-success btn-sm" id="btnOrdenarMovimiento">
                        <i class="fas fa-route"></i>
                        Ordenar movimiento
                    </button>

                    <button type="button" class="btn btn-outline-light btn-sm" id="btnExpandirMapa">
                        <i class="fas fa-expand"></i>
                        Ampliar mapa
                    </button>

                    <button type="button" class="btn btn-outline-light btn-sm" id="btnRecargar">
                        <i class="fas fa-sync-alt"></i>
                        Recargar
                    </button>

                    <button type="button" class="btn btn-warning btn-sm" id="btnSimularMovimiento">
                        <i class="fas fa-running"></i>
                        Simular patrulla
                    </button>
                </div>
            </div>

            <div class="card-body p-0 position-relative">
                <div class="map-hud-label" id="mapHudLabel">SALA DE GUERRA · MAPA OPERACIONAL</div>
                <div id="map" class="war-map"></div>
            </div>
        </div>

        <div class="movement-panel mt-3" id="movementPanel">
            <div>
                <strong>Unidad seleccionada:</strong>
                <span id="unidadSeleccionadaTexto">Ninguna</span>

                <span class="ml-3">
                    <strong>Modo movimiento:</strong>
                    <span id="modoMovimientoTexto">Inactivo</span>
                </span>
            </div>

            <div id="descripcionUnidadPanel" class="unidad-descripcion-panel mt-2">
                Seleccione una unidad para ver su descripción.
            </div>
        </div>

        <div class="row mt-3">
            <div class="col-md-7">
                <div class="card bg-dark text-light tactical-card">
                    <div class="card-header">
                        <strong>
                            <i class="fas fa-list"></i>
                            Unidades desplegadas
                        </strong>
                    </div>

                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-dark table-hover table-sm mb-0">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Unidad</th>
                                        <th>Equipo</th>
                                        <th>Bando</th>
                                        <th>Estado</th>
                                    </tr>
                                </thead>

                                <tbody id="tablaUnidadesBody">
                                    <tr>
                                        <td colspan="5" class="text-center text-muted py-3">Cargando unidades...</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-5">
                <div class="card bg-dark text-light tactical-card">
                    <div class="card-header">
                        <strong>
                            <i class="fas fa-broadcast-tower"></i>
                            Comunicaciones recientes
                        </strong>
                    </div>

                    <div class="card-body">
                        <div id="listaMensajes" style="max-height: 300px; overflow-y: auto;">
                            <div class="text-muted">Cargando mensajes...</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@stop

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

<style>
    body { background: #0b1118 !important; }
    body.war-fullscreen { overflow-x: hidden !important; }

    .wrapper,
    .content-wrapper,
    .content,
    .container-fluid {
        margin-left: 0 !important;
        padding-left: 0 !important;
        background: transparent !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%, #111a14 100%) !important;
    }

    body.war-fullscreen .main-header { display: none !important; }

    body.war-fullscreen .main-sidebar,
    body.war-fullscreen.sidebar-mini .main-sidebar,
    body.war-fullscreen.sidebar-collapse .main-sidebar,
    body.war-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.war-fullscreen.war-sidebar-open .main-sidebar,
    body.war-fullscreen.sidebar-collapse.war-sidebar-open .main-sidebar,
    body.war-fullscreen.sidebar-mini.sidebar-collapse.war-sidebar-open .main-sidebar {
        transform: translateX(0) !important;
    }

    #warSidebarHotspot {
        position: fixed;
        top: 0;
        left: 0;
        width: 5px;
        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);
    }

    body.war-fullscreen .content-header { padding: 8px 8px 4px 8px !important; margin: 0 !important; }
    body.war-fullscreen .content { padding: 0 8px 10px 8px !important; margin: 0 !important; }

    .war-room-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        padding: 16px 18px;
        border-radius: 14px;
        border: 1px solid rgba(163, 230, 53, 0.25);
        background: linear-gradient(135deg, rgba(31, 45, 31, 0.96), rgba(50, 70, 50, 0.94));
        box-shadow: 0 14px 35px rgba(0, 0, 0, 0.35);
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .war-room-header h1 {
        font-size: 24px;
        font-weight: 900;
        letter-spacing: 0.02em;
        text-transform: uppercase;
    }

    .war-room-layout { align-items: flex-start; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; }
    .war-left-panel { max-width: 345px; flex: 0 0 345px; padding-left: 0 !important; padding-right: 12px !important; }
    .war-main-panel { flex: 1; max-width: calc(100% - 345px); padding-left: 8px !important; padding-right: 0 !important; }
    .war-left-panel > .card { width: 100%; margin-left: auto; margin-right: auto; margin-bottom: 12px !important; }

    .tactical-card {
        border-radius: 10px !important;
        border: 1px solid rgba(163, 230, 53, 0.18) !important;
        box-shadow: 0 14px 32px rgba(0, 0, 0, 0.30);
        overflow: hidden;
    }

    .card,
    .card-header,
    .card-body,
    .content-header h1,
    .table td,
    .table th,
    label { color: #e8f0e4 !important; }

    .card-header {
        min-height: 40px;
        display: flex;
        align-items: center;
        padding: 9px 13px !important;
        background: linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(31, 45, 31, 0.92)) !important;
        border-bottom: 1px solid rgba(163, 230, 53, 0.20) !important;
    }

    .card-header strong { font-size: 13px; font-weight: 900; letter-spacing: 0.02em; }
    .card-body { padding: 13px 15px !important; background: rgba(15, 23, 42, 0.75); }
    .form-group { margin-bottom: 10px !important; }

    .form-group label {
        margin-bottom: 5px !important;
        font-size: 11px !important;
        font-weight: 900 !important;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .tactical-input {
        min-height: 34px !important;
        font-size: 12px !important;
        background: rgba(2, 6, 23, 0.82) !important;
        color: #ffffff !important;
        border: 1px solid rgba(148, 163, 184, 0.45) !important;
        border-radius: 8px !important;
        font-weight: 700;
    }

    .tactical-input:focus {
        border-color: #a3e635 !important;
        box-shadow: 0 0 0 0.15rem rgba(163, 230, 53, 0.18) !important;
    }

    .tactical-input option { color: #111827; background: #ffffff; }
    .tactical-card .btn-block { height: 34px; font-size: 12px; font-weight: 800; }

    .tactical-alert {
        background: rgba(148, 163, 184, 0.12) !important;
        color: #e5e7eb !important;
        border: 1px solid rgba(148, 163, 184, 0.25) !important;
        font-size: 12px;
    }

    .team-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
        padding: 10px;
        border-radius: 9px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.04);
    }

    .team-color {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        display: inline-block;
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.18);
    }

    .capas-lista {
        display: grid;
        gap: 8px;
        max-height: 160px !important;
        overflow-y: auto !important;
        padding-right: 4px;
    }

    .capa-item {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 9px 10px;
        border-radius: 8px;
        background: rgba(15, 23, 42, 0.78);
        border: 1px solid rgba(163, 230, 53, 0.18);
    }

    .capa-info strong {
        display: flex;
        align-items: center;
        color: #ffffff;
        font-size: 12px;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 190px;
    }

    .capa-info small { color: #94a3b8; font-size: 10px; text-transform: uppercase; }

    .capa-actions {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
    }

    .capa-color-preview {
        width: 12px;
        height: 12px;
        display: inline-block;
        border-radius: 50%;
        margin-right: 6px;
        border: 1px solid rgba(255, 255, 255, 0.85);
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.20);
        flex-shrink: 0;
    }

    .capa-color-input,
    .capa-color-input-form {
        width: 38px !important;
        height: 30px !important;
        min-height: 30px !important;
        padding: 2px !important;
        border-radius: 7px !important;
        border: 1px solid rgba(163, 230, 53, 0.35) !important;
        background: rgba(15, 23, 42, 0.95) !important;
        cursor: pointer;
    }

    .capa-color-input-form {
        width: 100% !important;
        height: 36px !important;
    }

    .btn-eliminar-capa {
        border: 1px solid rgba(239, 68, 68, 0.65);
        background: rgba(127, 29, 29, 0.75);
        color: #ffffff;
        border-radius: 7px;
        padding: 5px 8px;
        font-size: 11px;
        font-weight: 800;
        transition: all 0.2s ease;
    }

    .btn-eliminar-capa:hover { background: #dc2626; color: #ffffff; }

    .war-map-card {
        position: relative;
        border-radius: 10px !important;
        border: 1px solid rgba(163, 230, 53, 0.25) !important;
        box-shadow: 0 18px 45px rgba(0, 0, 0, 0.38);
        overflow: hidden;
    }

    .map-toolbar { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }

    .war-map {
        height: calc(100vh - 230px) !important;
        min-height: 610px !important;
        width: 100%;
        background: #0f172a;
    }

    .map-hud-label {
        position: absolute;
        z-index: 500;
        top: 12px;
        left: 50%;
        transform: translateX(-50%);
        padding: 6px 14px;
        border: 1px solid rgba(190, 242, 100, 0.45);
        border-radius: 999px;
        background: rgba(2, 6, 23, 0.72);
        color: #bef264;
        font-size: 11px;
        font-weight: 900;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        pointer-events: none;
        backdrop-filter: blur(6px);
        box-shadow: 0 0 18px rgba(132, 204, 22, 0.16);
    }

    .war-map-card.map-expanded {
        position: fixed !important;
        inset: 14px !important;
        z-index: 9998 !important;
        margin: 0 !important;
        border-radius: 14px !important;
        background: #0b1118 !important;
    }

    .war-map-card.map-expanded .war-map { height: calc(100vh - 96px) !important; min-height: unset !important; }
    body.map-is-expanded { overflow: hidden !important; }

    .movement-panel {
        padding: 12px 14px;
        border-radius: 10px;
        border: 1px solid rgba(163, 230, 53, 0.22);
        color: #e5e7eb;
        background: rgba(15, 23, 42, 0.78);
        font-size: 13px;
    }

    .movement-panel strong { color: #bef264; }

    .unidad-descripcion-panel {
        padding: 10px 12px;
        border-radius: 8px;
        border: 1px solid rgba(148, 163, 184, 0.25);
        background: rgba(2, 6, 23, 0.38);
        color: #cbd5e1;
        font-size: 12px;
        line-height: 1.45;
    }

    .war-context-menu {
        display: none;
        position: fixed;
        z-index: 20000;
        min-width: 210px;
        padding: 7px;
        border-radius: 10px;
        border: 1px solid rgba(163, 230, 53, 0.35);
        background: rgba(15, 23, 42, 0.96);
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
    }

    .war-context-menu button {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
        border: 0;
        border-radius: 7px;
        background: transparent;
        color: #e5e7eb;
        font-size: 12px;
        font-weight: 800;
        text-align: left;
    }

    .war-context-menu button:hover { background: rgba(132, 204, 22, 0.16); color: #bef264; }

    .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-control-zoom a:hover { background: #a3e635 !important; color: #0f172a !important; }

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

    .leaflet-popup-tip { background: #172019; }
    .table-responsive { max-height: 230px !important; overflow-y: auto !important; }

    .message-item {
        background: rgba(255, 255, 255, 0.04);
        border-left: 4px solid #64748b;
        padding: 10px;
        border-radius: 8px;
        margin-bottom: 10px;
    }

    .message-item.alta { border-left-color: #dc2626; }
    .message-item.normal { border-left-color: #f59e0b; }
    .message-item.baja { border-left-color: #6b7280; }

    .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: 96px;
        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: 30px;
        min-height: 18px;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--militar-color);
    }

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

    .militar-marco.con-imagen {
        width: 62px;
        height: 48px;
        border-radius: 4px;
        padding: 2px;
    }

    .militar-marco img {
        width: 100%;
        height: 100%;
        max-width: 56px;
        max-height: 42px;
        object-fit: contain;
        display: block;
        background: #ffffff;
    }

    .militar-abreviatura {
        font-size: 13px;
        font-weight: 900;
        color: var(--militar-color);
    }

    .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;
    }

    .militar-seleccionado .militar-marco {
        box-shadow:
            0 0 0 3px rgba(190, 242, 100, 0.85),
            0 0 22px rgba(190, 242, 100, 0.75);
    }

    .preview-reglamentario-box {
        padding: 10px;
        border-radius: 10px;
        border: 1px solid rgba(163, 230, 53, 0.18);
        background: rgba(2, 6, 23, 0.38);
        margin-bottom: 10px;
    }

    .preview-simbolo-contenedor {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 90px;
        background: rgba(255, 255, 255, 0.06);
        border-radius: 8px;
        padding: 8px;
    }

    @media (max-width: 1200px) {
        .war-left-panel { max-width: 100%; flex: 0 0 100%; padding-right: 0 !important; }
        .war-main-panel { max-width: 100%; flex: 0 0 100%; padding-left: 0 !important; }
        .war-map { height: 560px !important; min-height: 520px !important; }
    }

    @media (max-width: 768px) {
        .war-map { height: 480px !important; min-height: 420px !important; }
        .map-hud-label { display: none; }
        .war-map-card.map-expanded { inset: 8px !important; }
        .war-map-card.map-expanded .war-map { height: calc(100vh - 110px) !important; }
    }
</style>
@stop

@section('js')
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-omnivore@0.3.4/leaflet-omnivore.min.js"></script>
<script src="https://unpkg.com/@tmcw/togeojson@5.8.1/dist/togeojson.umd.js"></script>
<script src="https://unpkg.com/jszip@3.10.1/dist/jszip.min.js"></script>

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

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

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

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

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

    const csrfToken = '{{ csrf_token() }}';

    const rutas = {
        unidadesJson: `{{ route('proyectos.elementos-mapa.listado-json', $proyecto) }}`,
        unidadStore: `{{ route('proyectos.elementos-mapa.store-from-map', $proyecto) }}`,
        mensajesJson: `{{ route('proyectos.mensajes-json', $proyecto) }}`,
        mensajeStore: `{{ route('proyectos.mensajes-quick-store', $proyecto) }}`,
        capasJson: `{{ route('proyectos.capas-json', $proyecto) }}`,
    };

    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('map', {
        zoomControl: true,
        layers: [],
        worldCopyJump: false,
        maxBounds: limiteBolivia,
        maxBoundsViscosity: 1.0,
        minZoom: 5
    }).setView([-16.5, -64.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);

    const markersLayer = L.layerGroup().addTo(map);
    const capasKmlKmzLayer = L.layerGroup().addTo(map);

    const controlCapas = L.control.layers(
        {
            'Mapa base': mapaBase,
            'Mapa satelital': mapaSatelital,
            'Mapa topográfico': mapaTopografico,
        },
        {
            'Unidades desplegadas': markersLayer,
            'Capas KML / KMZ': capasKmlKmzLayer,
        },
        {
            position: 'topright',
            collapsed: false
        }
    ).addTo(map);

    let unidadesCache = [];
    let mensajesCache = [];
    let markersById = {};
    let unidadSeleccionada = null;
    let modoMovimiento = false;
    let overlaysCapasCargadas = [];
    let actualizandoMovimiento = false;
    let unidadContextual = null;

    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 urlMoverUnidad(id) {
        return `/elementos-mapa/${id}/mover`;
    }

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

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

        return '#0057B8';
    }

    function construirHtmlSimboloMilitar(unidad, seleccionada = false) {
        const simbolo = unidad.simbolo || {};
        const bando = unidad.bando || 'amigo';

        const color =
            unidad.color_reglamentario ||
            simbolo.color_reglamentario ||
            simbolo.color_final ||
            colorReglamentarioPorBando(bando);

        const magnitud =
            unidad.magnitud ||
            simbolo.magnitud ||
            '';

        const designacionIzquierda =
            unidad.designacion_unica ||
            unidad.designacion_izquierda ||
            simbolo.designacion_izquierda ||
            '';

        const designacionDerecha =
            unidad.designacion_derecha ||
            simbolo.designacion_derecha ||
            '';

        const informacionAdicional =
            unidad.informacion_adicional ||
            simbolo.informacion_adicional ||
            '';

        const estadoGrafico =
            unidad.estado_grafico ||
            simbolo.estado_grafico ||
            'actual';

        const textoCentral =
            simbolo.abreviatura ||
            simbolo.codigo ||
            unidad.identificacion_codigo ||
            unidad.nombre ||
            'UN';

        const imagen = normalizarUrlImagenSimbolo(
            simbolo.imagen_url ||
            simbolo.imagen_full_url ||
            simbolo.imagen ||
            ''
        );

        let contenidoCentral = `<span class="militar-abreviatura">${escapeHtml(textoCentral)}</span>`;
        let claseMarcoImagen = '';

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

            claseMarcoImagen = 'con-imagen';
        }

        const claseEstado = estadoGrafico === 'futuro'
            ? 'militar-futuro'
            : estadoGrafico === 'simulado'
                ? 'militar-simulado'
                : '';

        const claseSeleccion = seleccionada ? 'militar-seleccionado' : '';

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

                    <div class="militar-cuerpo">
                        <div class="militar-lateral militar-izq">${escapeHtml(designacionIzquierda)}</div>

                        <div class="militar-marco ${claseMarcoImagen}">
                            ${contenidoCentral}
                            <span class="militar-info">${escapeHtml(informacionAdicional)}</span>
                        </div>

                        <div class="militar-lateral militar-der">${escapeHtml(designacionDerecha)}</div>
                    </div>
                </div>
            </div>
        `;
    }

    function iconoTactico(unidad, seleccionada = false) {
        return L.divIcon({
            className: 'simbolo-militar-leaflet',
            html: construirHtmlSimboloMilitar(unidad, seleccionada),
            iconSize: [110, 86],
            iconAnchor: [55, 43],
            popupAnchor: [0, -42]
        });
    }

    function descripcionUnidad(unidad) {
        if (!unidad) {
            return 'Seleccione una unidad para ver su descripción.';
        }

        const descripcion =
            unidad.descripcion ||
            unidad.comentarios ||
            unidad.informacion_adicional ||
            unidad.designacion_unica ||
            'Sin descripción registrada.';

        return `
            <strong>Unidad:</strong> ${escapeHtml(unidad.nombre || 'Sin nombre')} |
            <strong>Equipo:</strong> ${escapeHtml(unidad.equipo?.nombre || 'N/D')} |
            <strong>Bando:</strong> ${escapeHtml(unidad.bando || 'N/D')} |
            <strong>Estado:</strong> ${escapeHtml(unidad.estado || 'N/D')}
            <br>
            <strong>Descripción:</strong> ${escapeHtml(descripcion)}
        `;
    }

    function actualizarPanelMovimiento() {
        const unidadTexto = document.getElementById('unidadSeleccionadaTexto');
        const modoTexto = document.getElementById('modoMovimientoTexto');
        const hud = document.getElementById('mapHudLabel');
        const descripcionPanel = document.getElementById('descripcionUnidadPanel');

        if (unidadTexto) {
            unidadTexto.textContent = unidadSeleccionada
                ? `${unidadSeleccionada.nombre || 'Sin nombre'} | ID ${unidadSeleccionada.id}`
                : 'Ninguna';
        }

        if (modoTexto) {
            modoTexto.textContent = modoMovimiento ? 'Activo: haga clic en el destino' : 'Inactivo';
        }

        if (hud) {
            hud.textContent = modoMovimiento
                ? 'MODO MOVIMIENTO ACTIVO · SELECCIONE DESTINO'
                : 'SALA DE GUERRA · MAPA OPERACIONAL';
        }

        if (descripcionPanel) {
            descripcionPanel.innerHTML = descripcionUnidad(unidadSeleccionada);
        }
    }

    function popupUnidad(unidad) {
        return `
            <div style="min-width:250px;">
                <strong>${escapeHtml(unidad.nombre || 'Sin nombre')}</strong><br>
                <b>Equipo:</b> ${escapeHtml(unidad.equipo?.nombre || 'N/D')}<br>
                <b>Símbolo:</b> ${escapeHtml(unidad.simbolo?.nombre || 'N/D')}<br>
                <b>Bando:</b> ${escapeHtml(unidad.bando || 'N/D')}<br>
                <b>Nivel:</b> ${escapeHtml(unidad.nivel_planeamiento || 'N/D')}<br>
                <b>Estado:</b> ${escapeHtml(unidad.estado || 'N/D')}<br>
                <b>Designación:</b> ${escapeHtml(unidad.designacion_unica || 'N/D')}<br>
                <b>Magnitud:</b> ${escapeHtml(unidad.magnitud || 'N/D')}<br>
                <b>Armamento:</b> ${escapeHtml(unidad.armamento || 'N/D')}<br>
                <b>Descripción:</b> ${escapeHtml(unidad.descripcion || unidad.comentarios || unidad.informacion_adicional || 'Sin descripción')}<br>
                <hr>
                <button type="button" class="btn btn-success btn-sm btnSeleccionarUnidad" data-id="${unidad.id}">
                    Seleccionar
                </button>
                <a href="/elementos-mapa/${unidad.id}" class="btn btn-info btn-sm">Ver detalle</a>
                <a href="/elementos-mapa/${unidad.id}/edit" class="btn btn-warning btn-sm">Editar</a>
            </div>
        `;
    }

    function ocultarMenuContextual() {
        const menu = document.getElementById('menuContextualUnidad');
        if (menu) {
            menu.style.display = 'none';
        }
    }

    function mostrarMenuContextualUnidad(eventoOriginal, unidad) {
        const menu = document.getElementById('menuContextualUnidad');

        if (!menu) {
            return;
        }

        unidadContextual = unidad;

        let x = eventoOriginal.clientX;
        let y = eventoOriginal.clientY;

        menu.style.display = 'block';

        const anchoMenu = menu.offsetWidth;
        const altoMenu = menu.offsetHeight;
        const anchoVentana = window.innerWidth;
        const altoVentana = window.innerHeight;

        if (x + anchoMenu > anchoVentana) {
            x = anchoVentana - anchoMenu - 10;
        }

        if (y + altoMenu > altoVentana) {
            y = altoVentana - altoMenu - 10;
        }

        menu.style.left = `${x}px`;
        menu.style.top = `${y}px`;
    }

    function seleccionarUnidad(unidad) {
        unidadSeleccionada = unidad;
        actualizarPanelMovimiento();
        renderUnidadesMapa();
    }

    function renderUnidadesMapa() {
        markersLayer.clearLayers();
        markersById = {};

        unidadesCache.forEach(unidad => {
            if (!unidad.lat || !unidad.lng) {
                return;
            }

            const lat = parseFloat(unidad.lat);
            const lng = parseFloat(unidad.lng);

            if (isNaN(lat) || isNaN(lng)) {
                return;
            }

            const seleccionada = unidadSeleccionada && parseInt(unidadSeleccionada.id) === parseInt(unidad.id);

            const marker = L.marker([lat, lng], {
                icon: iconoTactico(unidad, seleccionada)
            }).addTo(markersLayer);

            marker.bindPopup(popupUnidad(unidad));

            marker.on('click', function () {
                seleccionarUnidad(unidad);
            });

            marker.on('contextmenu', function (e) {
                seleccionarUnidad(unidad);
                mostrarMenuContextualUnidad(e.originalEvent, unidad);
            });

            markersById[unidad.id] = marker;
        });
    }

    function moverMarcadorVisual(id, destinoLatLng) {
        const marker = markersById[id];

        if (!marker) {
            return;
        }

        const inicio = marker.getLatLng();
        const pasos = 28;
        const intervalo = 45;
        let paso = 0;

        const deltaLat = (destinoLatLng.lat - inicio.lat) / pasos;
        const deltaLng = (destinoLatLng.lng - inicio.lng) / pasos;

        const timer = setInterval(() => {
            paso++;

            marker.setLatLng([
                inicio.lat + deltaLat * paso,
                inicio.lng + deltaLng * paso
            ]);

            if (paso >= pasos) {
                clearInterval(timer);
                marker.setLatLng(destinoLatLng);
            }
        }, intervalo);
    }

    function renderUnidadesTabla() {
        const tbody = document.getElementById('tablaUnidadesBody');

        if (!tbody) {
            return;
        }

        if (!unidadesCache.length) {
            tbody.innerHTML = `
                <tr>
                    <td colspan="5" class="text-center text-muted py-3">No hay unidades desplegadas.</td>
                </tr>
            `;
            return;
        }

        tbody.innerHTML = unidadesCache.map(unidad => `
            <tr style="cursor:pointer;" onclick="window.seleccionarUnidadDesdeTabla(${unidad.id})">
                <td>${unidad.id}</td>
                <td>${escapeHtml(unidad.nombre || 'Sin nombre')}</td>
                <td>${escapeHtml(unidad.equipo?.nombre || 'N/D')}</td>
                <td>${escapeHtml(unidad.bando || 'N/D')}</td>
                <td>${escapeHtml(unidad.estado || 'N/D')}</td>
            </tr>
        `).join('');
    }

    window.seleccionarUnidadDesdeTabla = function (id) {
        const unidad = unidadesCache.find(item => parseInt(item.id) === parseInt(id));

        if (!unidad) {
            return;
        }

        seleccionarUnidad(unidad);

        if (markersById[id]) {
            map.setView(markersById[id].getLatLng(), Math.max(map.getZoom(), 8));
            markersById[id].openPopup();
        }
    };

    document.addEventListener('click', function (event) {
        const menu = document.getElementById('menuContextualUnidad');

        if (menu && !menu.contains(event.target)) {
            ocultarMenuContextual();
        }

        const btnUnidad = event.target.closest('.btnSeleccionarUnidad');

        if (btnUnidad) {
            const id = btnUnidad.dataset.id;
            const unidad = unidadesCache.find(item => parseInt(item.id) === parseInt(id));

            if (!unidad) {
                return;
            }

            seleccionarUnidad(unidad);
            return;
        }

        const btnCapa = event.target.closest('.btn-eliminar-capa');

        if (btnCapa) {
            const nombre = btnCapa.dataset.nombre || 'esta capa';
            const deleteUrl = btnCapa.dataset.url;

            if (!confirm(`¿Está seguro de eliminar la capa "${nombre}"?`)) {
                return;
            }

            fetch(deleteUrl, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': csrfToken,
                    'Accept': 'application/json'
                }
            })
                .then(async response => {
                    const data = await response.json();

                    if (!response.ok) {
                        alert(data.message || 'No se pudo eliminar la capa.');
                        return;
                    }

                    alert(data.message || 'Capa eliminada correctamente.');
                    cargarCapasKmlKmz();
                })
                .catch(() => {
                    alert('No se pudo eliminar la capa.');
                });
        }
    });

    document.addEventListener('change', function (event) {
        const inputColor = event.target.closest('.capa-color-input');

        if (!inputColor) {
            return;
        }

        const color = inputColor.value;
        const url = inputColor.dataset.url;

        if (!url) {
            alert('No se encontró la ruta para actualizar el color.');
            cargarCapasKmlKmz();
            return;
        }

        fetch(url, {
            method: 'PATCH',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken,
                'Accept': 'application/json'
            },
            body: JSON.stringify({
                color: color
            })
        })
            .then(async response => {
                const data = await response.json();

                if (!response.ok) {
                    alert(data.message || 'No se pudo actualizar el color de la capa.');
                    cargarCapasKmlKmz();
                    return;
                }

                cargarCapasKmlKmz();
            })
            .catch(() => {
                alert('No se pudo actualizar el color de la capa.');
                cargarCapasKmlKmz();
            });
    });

    document.getElementById('ctxSeleccionarUnidad').addEventListener('click', function () {
        if (!unidadContextual) {
            return;
        }

        seleccionarUnidad(unidadContextual);
        ocultarMenuContextual();
    });

    document.getElementById('ctxOrdenarMovimiento').addEventListener('click', function () {
        if (!unidadContextual) {
            return;
        }

        seleccionarUnidad(unidadContextual);
        modoMovimiento = true;
        actualizarPanelMovimiento();
        ocultarMenuContextual();
    });

    document.getElementById('ctxVerDetalle').addEventListener('click', function () {
        if (!unidadContextual) {
            return;
        }

        window.location.href = `/elementos-mapa/${unidadContextual.id}`;
    });

    function renderUnidadDestinoSelect() {
        const select = document.getElementById('unidad_destino_id');

        if (!select) {
            return;
        }

        select.innerHTML = '<option value="">Seleccione</option>';

        unidadesCache.forEach(unidad => {
            select.innerHTML += `
                <option value="${unidad.id}">
                    ${escapeHtml(unidad.nombre || 'Sin nombre')} - ${escapeHtml(unidad.equipo?.nombre || 'Sin equipo')}
                </option>
            `;
        });
    }

    function cargarUnidades(silencioso = false) {
        fetch(rutas.unidadesJson, {
            headers: {
                'Accept': 'application/json'
            }
        })
            .then(response => response.json())
            .then(data => {
                unidadesCache = data;

                if (unidadSeleccionada) {
                    const actualizada = unidadesCache.find(item => parseInt(item.id) === parseInt(unidadSeleccionada.id));
                    unidadSeleccionada = actualizada || unidadSeleccionada;
                }

                renderUnidadesMapa();
                renderUnidadesTabla();
                renderUnidadDestinoSelect();
                actualizarPanelMovimiento();
            })
            .catch(() => {
                if (!silencioso) {
                    alert('No se pudieron cargar las unidades.');
                }
            });
    }

    function cargarMensajes() {
        fetch(rutas.mensajesJson, {
            headers: {
                'Accept': 'application/json'
            }
        })
            .then(response => response.json())
            .then(data => {
                mensajesCache = data;
                renderMensajes();
            })
            .catch(() => {
                const cont = document.getElementById('listaMensajes');

                if (cont) {
                    cont.innerHTML = '<div class="text-danger">No se pudieron cargar los mensajes.</div>';
                }
            });
    }

    function renderMensajes() {
        const cont = document.getElementById('listaMensajes');

        if (!cont) {
            return;
        }

        if (!mensajesCache.length) {
            cont.innerHTML = '<div class="text-muted">No hay mensajes.</div>';
            return;
        }

        cont.innerHTML = mensajesCache.map(msg => {
            let destino = 'General';

            if (msg.tipo_destino === 'equipo') {
                destino = 'Equipo: ' + (msg.equipo_destino?.nombre || 'N/D');
            }

            if (msg.tipo_destino === 'unidad') {
                destino = 'Unidad: ' + (msg.unidad_destino?.nombre || 'N/D');
            }

            return `
                <div class="message-item ${msg.prioridad}">
                    <div style="font-size:11px; color:#b6c3af; margin-bottom:4px;">
                        ${escapeHtml(msg.remitente?.name || 'Sistema')} |
                        ${escapeHtml(destino)} |
                        ${escapeHtml(msg.prioridad)}
                    </div>

                    <div>
                        <strong>${escapeHtml(msg.contenido)}</strong>
                    </div>
                </div>
            `;
        }).join('');
    }

    function actualizarTipoDestino() {
        const tipoDestino = document.getElementById('tipo_destino');
        const grupoEquipoDestino = document.getElementById('grupo_equipo_destino');
        const grupoUnidadDestino = document.getElementById('grupo_unidad_destino');

        if (!tipoDestino || !grupoEquipoDestino || !grupoUnidadDestino) {
            return;
        }

        grupoEquipoDestino.style.display = tipoDestino.value === 'equipo' ? 'block' : 'none';
        grupoUnidadDestino.style.display = tipoDestino.value === 'unidad' ? 'block' : 'none';
    }

    function limpiarOverlaysCapas() {
        capasKmlKmzLayer.clearLayers();

        overlaysCapasCargadas.forEach(item => {
            try {
                controlCapas.removeLayer(item.layer);
            } catch (e) {
                console.warn('No se pudo remover una capa del control.');
            }
        });

        overlaysCapasCargadas = [];
    }

    function colorCapa(capa) {
        return capa.color || '#a3e635';
    }

    function estiloCapa(capa) {
        return {
            color: colorCapa(capa),
            weight: 3,
            opacity: 0.95,
            fillColor: colorCapa(capa),
            fillOpacity: 0.15
        };
    }

    function aplicarEstiloALayer(layer, capa) {
        if (layer.setStyle) {
            layer.setStyle(estiloCapa(capa));
        }

        if (layer.eachLayer) {
            layer.eachLayer(function (subLayer) {
                aplicarEstiloALayer(subLayer, capa);
            });
        }
    }

    function cargarCapaKml(capa) {
        const capaLeaflet = omnivore.kml(capa.url)
            .on('ready', function () {
                capaLeaflet.eachLayer(function (layer) {
                    aplicarEstiloALayer(layer, capa);

                    if (layer.bindPopup) {
                        layer.bindPopup(`
                            <strong>${escapeHtml(capa.nombre)}</strong><br>
                            Tipo: ${escapeHtml((capa.tipo || '').toUpperCase())}<br>
                            Color: <span style="color:${escapeHtml(colorCapa(capa))}; font-weight:bold;">
                                ${escapeHtml(colorCapa(capa))}
                            </span>
                        `);
                    }
                });

                capaLeaflet.addTo(capasKmlKmzLayer);
                controlCapas.addOverlay(capaLeaflet, capa.nombre);
                overlaysCapasCargadas.push({ id: capa.id, layer: capaLeaflet });
            })
            .on('error', function () {
                console.warn('No se pudo cargar la capa KML:', capa.nombre);
            });
    }

    function cargarCapaKmz(capa) {
        fetch(capa.url)
            .then(response => response.arrayBuffer())
            .then(buffer => JSZip.loadAsync(buffer))
            .then(zip => {
                const archivoKml = Object.keys(zip.files).find(nombre => nombre.toLowerCase().endsWith('.kml'));

                if (!archivoKml) {
                    console.warn('El KMZ no contiene archivo KML:', capa.nombre);
                    return null;
                }

                return zip.files[archivoKml].async('text');
            })
            .then(kmlText => {
                if (!kmlText) {
                    return;
                }

                const parser = new DOMParser();
                const kml = parser.parseFromString(kmlText, 'text/xml');
                const geojson = toGeoJSON.kml(kml);

                const capaLeaflet = L.geoJSON(geojson, {
                    style: estiloCapa(capa),
                    onEachFeature: function (feature, layer) {
                        const nombre = feature.properties?.name || capa.nombre;

                        layer.bindPopup(`
                            <strong>${escapeHtml(nombre)}</strong><br>
                            Capa: ${escapeHtml(capa.nombre)}<br>
                            Tipo: KMZ<br>
                            Color: <span style="color:${escapeHtml(colorCapa(capa))}; font-weight:bold;">
                                ${escapeHtml(colorCapa(capa))}
                            </span>
                        `);
                    }
                });

                capaLeaflet.addTo(capasKmlKmzLayer);
                controlCapas.addOverlay(capaLeaflet, capa.nombre);
                overlaysCapasCargadas.push({ id: capa.id, layer: capaLeaflet });
            })
            .catch(() => {
                console.warn('No se pudo cargar la capa KMZ:', capa.nombre);
            });
    }

    function renderListaCapas(capas) {
        const contenedor = document.getElementById('listaCapas');

        if (!contenedor) {
            return;
        }

        if (!capas.length) {
            contenedor.innerHTML = `<div class="text-muted small">No hay capas cargadas.</div>`;
            return;
        }

        contenedor.innerHTML = capas.map(capa => `
            <div class="capa-item">
                <div class="capa-info">
                    <strong>
                        <span class="capa-color-preview" style="background:${escapeHtml(colorCapa(capa))};"></span>
                        ${escapeHtml(capa.nombre)}
                    </strong>
                    <small>${escapeHtml((capa.tipo || '').toUpperCase())}</small>
                </div>

                <div class="capa-actions">
                    <input
                        type="color"
                        class="capa-color-input"
                        value="${escapeHtml(colorCapa(capa))}"
                        data-id="${capa.id}"
                        data-url="${capa.color_url || ''}"
                        data-nombre="${escapeHtml(capa.nombre)}"
                        title="Cambiar color"
                    >

                    <button
                        type="button"
                        class="btn-eliminar-capa"
                        data-id="${capa.id}"
                        data-url="${capa.delete_url}"
                        data-nombre="${escapeHtml(capa.nombre)}"
                        title="Eliminar capa"
                    >
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
            </div>
        `).join('');
    }

    function cargarCapasKmlKmz() {
        limpiarOverlaysCapas();

        fetch(rutas.capasJson, {
            headers: {
                'Accept': 'application/json'
            }
        })
            .then(response => response.json())
            .then(capas => {
                renderListaCapas(capas);

                capas.forEach(capa => {
                    const tipo = (capa.tipo || '').toLowerCase();

                    if (tipo === 'kml' || tipo === 'xml') {
                        cargarCapaKml(capa);
                    }

                    if (tipo === 'kmz') {
                        cargarCapaKmz(capa);
                    }
                });
            })
            .catch(() => {
                console.warn('No se pudieron cargar las capas KML/KMZ.');

                const contenedor = document.getElementById('listaCapas');

                if (contenedor) {
                    contenedor.innerHTML = `<div class="text-danger small">No se pudieron cargar las capas.</div>`;
                }
            });
    }

    function actualizarVistaPreviaSimbolo() {
        const select = document.getElementById('simbolo_id');
        const option = select?.selectedOptions[0];

        const preview = document.getElementById('previewSimboloMilitar');
        const previewMagnitud = document.getElementById('previewMagnitud');
        const previewIzquierda = document.getElementById('previewIzquierda');
        const previewDerecha = document.getElementById('previewDerecha');
        const symbol = preview?.querySelector('.militar-symbol');
        const marco = document.getElementById('previewMarco');

        if (!preview || !symbol || !marco) {
            return;
        }

        const bando = document.getElementById('bando')?.value || 'amigo';
        const color = option?.dataset?.color || colorReglamentarioPorBando(bando);
        const textoCentral = option?.dataset?.abreviatura || option?.dataset?.codigo || 'UN';
        const imagen = normalizarUrlImagenSimbolo(option?.dataset?.imagen || '');
        const informacionAdicional = document.getElementById('informacion_adicional')?.value || '';

        symbol.style.setProperty('--militar-color', color);
        symbol.classList.remove('militar-futuro', 'militar-simulado');

        const estadoGrafico = document.getElementById('estado_grafico')?.value || 'actual';

        if (estadoGrafico === 'futuro') {
            symbol.classList.add('militar-futuro');
        }

        if (estadoGrafico === 'simulado') {
            symbol.classList.add('militar-simulado');
        }

        previewMagnitud.textContent = document.getElementById('magnitud')?.value || '';
        previewIzquierda.textContent = document.getElementById('designacion_unica')?.value || '';
        previewDerecha.textContent = document.getElementById('designacion_derecha')?.value || '';

        marco.classList.remove('con-imagen');

        if (imagen) {
            marco.classList.add('con-imagen');
            marco.innerHTML = `
                <img
                    id="previewCentro"
                    src="${escapeHtml(imagen)}"
                    alt="${escapeHtml(option?.dataset?.nombre || 'Símbolo')}"
                    onerror="this.outerHTML='<span class=&quot;militar-abreviatura&quot; id=&quot;previewCentro&quot;>${escapeHtml(textoCentral)}</span>';"
                >
                <span class="militar-info" id="previewInfo">${escapeHtml(informacionAdicional)}</span>
            `;
        } else {
            marco.innerHTML = `
                <span class="militar-abreviatura" id="previewCentro">${escapeHtml(textoCentral)}</span>
                <span class="militar-info" id="previewInfo">${escapeHtml(informacionAdicional)}</span>
            `;
        }
    }

    const simboloSelect = document.getElementById('simbolo_id');

    if (simboloSelect) {
        simboloSelect.addEventListener('change', function () {
            const option = this.selectedOptions[0];

            if (!option) {
                return;
            }

            document.getElementById('nombre_unidad').value = document.getElementById('nombre_unidad').value || option.dataset.nombre || '';
            document.getElementById('magnitud').value = option.dataset.magnitud || '';
            document.getElementById('designacion_derecha').value = option.dataset.designacionDerecha || '';
            document.getElementById('informacion_adicional').value = option.dataset.informacionAdicional || '';
            document.getElementById('armamento').value = option.dataset.armamento || '';
            document.getElementById('estado_grafico').value = option.dataset.estadoGrafico || 'actual';

            actualizarVistaPreviaSimbolo();
        });
    }

    ['designacion_unica', 'magnitud', 'designacion_derecha', 'informacion_adicional', 'armamento', 'estado_grafico', 'bando'].forEach(id => {
        const input = document.getElementById(id);

        if (input) {
            input.addEventListener('input', actualizarVistaPreviaSimbolo);
            input.addEventListener('change', actualizarVistaPreviaSimbolo);
        }
    });

    const tipoDestino = document.getElementById('tipo_destino');

    if (tipoDestino) {
        tipoDestino.addEventListener('change', actualizarTipoDestino);
        actualizarTipoDestino();
    }

    const btnEnviarMensaje = document.getElementById('btnEnviarMensaje');

    if (btnEnviarMensaje) {
        btnEnviarMensaje.addEventListener('click', function () {
            const payload = {
                tipo_destino: document.getElementById('tipo_destino').value,
                equipo_origen_id: document.getElementById('equipo_origen_id').value || null,
                equipo_destino_id: document.getElementById('equipo_destino_id').value || null,
                unidad_destino_id: document.getElementById('unidad_destino_id').value || null,
                prioridad: document.getElementById('prioridad').value,
                contenido: document.getElementById('contenido_mensaje').value
            };

            fetch(rutas.mensajeStore, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken,
                    'Accept': 'application/json'
                },
                body: JSON.stringify(payload)
            })
                .then(async response => {
                    const data = await response.json();

                    if (!response.ok) {
                        alert(data.message || 'No se pudo enviar el mensaje.');
                        return;
                    }

                    document.getElementById('contenido_mensaje').value = '';
                    cargarMensajes();
                    alert(data.message || 'Mensaje enviado.');
                });
        });
    }

    map.on('click', function (e) {
        ocultarMenuContextual();

        if (actualizandoMovimiento) {
            return;
        }

        if (modoMovimiento && unidadSeleccionada) {
            actualizandoMovimiento = true;

            const destino = { lat: e.latlng.lat, lng: e.latlng.lng };
            moverMarcadorVisual(unidadSeleccionada.id, destino);

            fetch(urlMoverUnidad(unidadSeleccionada.id), {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken,
                    'Accept': 'application/json'
                },
                body: JSON.stringify(destino)
            })
                .then(async response => {
                    const data = await response.json();

                    if (!response.ok) {
                        actualizandoMovimiento = false;
                        alert(data.message || 'No se pudo mover la unidad.');
                        return;
                    }

                    modoMovimiento = false;
                    actualizandoMovimiento = false;

                    cargarUnidades(true);
                    actualizarPanelMovimiento();
                })
                .catch(() => {
                    actualizandoMovimiento = false;
                    alert('No se pudo mover la unidad.');
                });

            return;
        }

        const simboloId = document.getElementById('simbolo_id').value;

        if (!simboloId) {
            alert('Seleccione un símbolo antes de desplegar la unidad.');
            return;
        }

        const selectedOption = document.getElementById('simbolo_id').selectedOptions[0];
        const nombreDefault = selectedOption?.dataset?.nombre || '';

        const payload = {
            simbolo_id: simboloId,
            nombre: document.getElementById('nombre_unidad').value || nombreDefault,
            designacion_unica: document.getElementById('designacion_unica').value,
            magnitud: document.getElementById('magnitud').value,
            designacion_derecha: document.getElementById('designacion_derecha').value,
            informacion_adicional: document.getElementById('informacion_adicional').value,
            armamento: document.getElementById('armamento').value,
            estado_grafico: document.getElementById('estado_grafico').value,
            equipo_id: document.getElementById('equipo_id').value || null,
            bando: document.getElementById('bando').value,
            nivel_planeamiento: document.getElementById('nivel_planeamiento').value,
            estado: document.getElementById('estado_unidad').value,
            lat: e.latlng.lat,
            lng: e.latlng.lng
        };

        fetch(rutas.unidadStore, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken,
                'Accept': 'application/json'
            },
            body: JSON.stringify(payload)
        })
            .then(async response => {
                const data = await response.json();

                if (!response.ok) {
                    alert(data.message || 'No se pudo guardar la unidad.');
                    return;
                }

                document.getElementById('nombre_unidad').value = '';
                document.getElementById('designacion_unica').value = '';
                document.getElementById('magnitud').value = '';
                document.getElementById('designacion_derecha').value = '';
                document.getElementById('informacion_adicional').value = '';
                document.getElementById('armamento').value = '';
                document.getElementById('estado_grafico').value = 'actual';

                actualizarVistaPreviaSimbolo();
                cargarUnidades(true);
                alert(data.message || 'Unidad desplegada correctamente.');
            });
    });

    document.getElementById('btnOrdenarMovimiento').addEventListener('click', function () {
        if (!unidadSeleccionada) {
            alert('Primero seleccione una unidad desde el mapa o la tabla.');
            return;
        }

        modoMovimiento = !modoMovimiento;
        actualizarPanelMovimiento();
    });

    document.getElementById('btnRecargar').addEventListener('click', function () {
        cargarUnidades(true);
        cargarMensajes();
        cargarCapasKmlKmz();

        setTimeout(function () {
            map.invalidateSize();
        }, 200);
    });

    document.getElementById('btnRecargarCapas').addEventListener('click', function () {
        cargarCapasKmlKmz();
    });

    const btnExpandirMapa = document.getElementById('btnExpandirMapa');
    const warMapCard = document.getElementById('warMapCard');

    btnExpandirMapa.addEventListener('click', function () {
        warMapCard.classList.toggle('map-expanded');
        document.body.classList.toggle('map-is-expanded');

        const expanded = warMapCard.classList.contains('map-expanded');

        btnExpandirMapa.innerHTML = expanded
            ? '<i class="fas fa-compress"></i> Reducir mapa'
            : '<i class="fas fa-expand"></i> Ampliar mapa';

        setTimeout(function () {
            map.invalidateSize();
        }, 250);
    });

    document.addEventListener('keydown', function (event) {
        if (event.key === 'Escape' && warMapCard.classList.contains('map-expanded')) {
            warMapCard.classList.remove('map-expanded');
            document.body.classList.remove('map-is-expanded');
            btnExpandirMapa.innerHTML = '<i class="fas fa-expand"></i> Ampliar mapa';

            setTimeout(function () {
                map.invalidateSize();
            }, 250);
        }

        if (event.key === 'Escape') {
            ocultarMenuContextual();
        }
    });

    document.getElementById('btnSimularMovimiento').addEventListener('click', function () {
        const ids = Object.keys(markersById).slice(0, 3);

        if (!ids.length) {
            alert('No hay unidades para simular movimiento.');
            return;
        }

        ids.forEach(id => {
            const marker = markersById[id];

            if (!marker) {
                return;
            }

            const actual = marker.getLatLng();

            const destino = {
                lat: actual.lat + ((Math.random() - 0.5) * 0.25),
                lng: actual.lng + ((Math.random() - 0.5) * 0.25),
            };

            moverMarcadorVisual(id, destino);
        });
    });

    cargarUnidades(true);
    cargarMensajes();
    cargarCapasKmlKmz();
    actualizarPanelMovimiento();
    actualizarVistaPreviaSimbolo();

    setInterval(function () {
        if (!actualizandoMovimiento) {
            cargarUnidades(true);
        }

        cargarMensajes();
    }, 5000);

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