@extends('adminlte::page')

@section('title', 'Editar unidad')

@section('content_header')
    <div class="unit-header">
        <div class="unit-header-left">
            <img
                src="{{ asset('img/login/logo.png') }}"
                alt="Logo Wargame"
                class="unit-header-logo"
            >

            <div>
                <p class="unit-label">WARGAME 2026</p>
                <h1 class="unit-title">Editar unidad táctica</h1>
                <p class="unit-subtitle">Actualización del elemento para seguimiento de batalla</p>
            </div>
        </div>

        <div class="unit-status">
            <span class="status-dot"></span>
            {{ strtoupper($elemento->estado ?? 'SIN ESTADO') }}
        </div>
    </div>
@stop

@section('content')

<form action="{{ route('elementos-mapa.update', $elemento) }}" method="POST" class="battle-form">
    @csrf
    @method('PUT')

    <div class="battle-card">

        <!-- DATOS BÁSICOS -->
        <div class="section-title">
            <i class="fas fa-crosshairs"></i>
            Datos básicos de la unidad
        </div>

        <div class="row">
            <div class="col-md-6">
                <div class="form-group tactical-group">
                    <label>Proyecto</label>
                    <select name="proyecto_id" class="form-control tactical-control" required>
                        <option value="">Seleccione</option>
                        @foreach($proyectos as $proyecto)
                            <option
                                value="{{ $proyecto->id }}"
                                {{ old('proyecto_id', $elemento->proyecto_id) == $proyecto->id ? 'selected' : '' }}
                            >
                                {{ $proyecto->nombre }}
                            </option>
                        @endforeach
                    </select>
                    @error('proyecto_id')
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>
            </div>

            <div class="col-md-6">
                <div class="form-group tactical-group">
                    <label>Símbolo</label>
                    <select name="simbolo_id" class="form-control tactical-control" required>
                        <option value="">Seleccione</option>
                        @foreach($simbolos as $simbolo)
                            <option
                                value="{{ $simbolo->id }}"
                                {{ old('simbolo_id', $elemento->simbolo_id) == $simbolo->id ? 'selected' : '' }}
                            >
                                {{ $simbolo->nombre }}
                            </option>
                        @endforeach
                    </select>
                    @error('simbolo_id')
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>
            </div>
        </div>

        @if(auth()->user()->hasRole('admin'))
            <div class="form-group tactical-group">
                <label>Equipo</label>
                <select name="equipo_id" class="form-control tactical-control">
                    <option value="">Seleccione</option>
                    @foreach($equipos as $equipo)
                        <option
                            value="{{ $equipo->id }}"
                            {{ old('equipo_id', $elemento->equipo_id) == $equipo->id ? 'selected' : '' }}
                        >
                            {{ $equipo->nombre }}
                        </option>
                    @endforeach
                </select>
                @error('equipo_id')
                    <small class="text-danger">{{ $message }}</small>
                @enderror
            </div>
        @endif

        <div class="row">
            <div class="col-md-6">
                <div class="form-group tactical-group">
                    <label>Nombre</label>
                    <input
                        type="text"
                        name="nombre"
                        value="{{ old('nombre', $elemento->nombre) }}"
                        class="form-control tactical-control"
                    >
                    @error('nombre')
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>
            </div>

            <div class="col-md-6">
                <div class="form-group tactical-group">
                    <label>Designación única</label>
                    <input
                        type="text"
                        name="designacion_unica"
                        value="{{ old('designacion_unica', $elemento->designacion_unica) }}"
                        class="form-control tactical-control"
                    >
                    @error('designacion_unica')
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-4">
                <div class="form-group tactical-group">
                    <label>Bando</label>
                    <select name="bando" class="form-control tactical-control">
                        <option value="amigo" {{ old('bando', $elemento->bando) === 'amigo' ? 'selected' : '' }}>
                            Amigo
                        </option>
                        <option value="enemigo" {{ old('bando', $elemento->bando) === 'enemigo' ? 'selected' : '' }}>
                            Enemigo
                        </option>
                        <option value="neutral" {{ old('bando', $elemento->bando) === 'neutral' ? 'selected' : '' }}>
                            Neutral
                        </option>
                    </select>
                    @error('bando')
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>
            </div>

            <div class="col-md-4">
                <div class="form-group tactical-group">
                    <label>Nivel de planeamiento</label>
                    <select name="nivel_planeamiento" class="form-control tactical-control">
                        <option value="tactico" {{ old('nivel_planeamiento', $elemento->nivel_planeamiento) === 'tactico' ? 'selected' : '' }}>
                            Táctico
                        </option>
                        <option value="operacional" {{ old('nivel_planeamiento', $elemento->nivel_planeamiento) === 'operacional' ? 'selected' : '' }}>
                            Operacional
                        </option>
                        <option value="estrategico" {{ old('nivel_planeamiento', $elemento->nivel_planeamiento) === 'estrategico' ? 'selected' : '' }}>
                            Estratégico
                        </option>
                    </select>
                    @error('nivel_planeamiento')
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>
            </div>

            <div class="col-md-4">
                <div class="form-group tactical-group">
                    <label>Estado</label>
                    <input
                        type="text"
                        name="estado"
                        value="{{ old('estado', $elemento->estado) }}"
                        class="form-control tactical-control"
                    >
                    @error('estado')
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>
            </div>
        </div>

        <!-- COORDENADAS -->
        <div class="section-title mt-4">
            <i class="fas fa-map-marked-alt"></i>
            Coordenadas de ubicación
        </div>

        <div class="row">
            <div class="col-md-6">
                <div class="form-group tactical-group">
                    <label>Latitud</label>
                    <input
                        type="text"
                        name="lat"
                        value="{{ old('lat', $elemento->lat) }}"
                        class="form-control tactical-control"
                    >
                    @error('lat')
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>
            </div>

            <div class="col-md-6">
                <div class="form-group tactical-group">
                    <label>Longitud</label>
                    <input
                        type="text"
                        name="lng"
                        value="{{ old('lng', $elemento->lng) }}"
                        class="form-control tactical-control"
                    >
                    @error('lng')
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>
            </div>
        </div>

        <!-- SISTEMA DE SEGUIMIENTO DE BATALLA -->
        <div class="section-title mt-4">
            <i class="fas fa-clipboard-list"></i>
            Sistema de seguimiento de batalla
        </div>

        <div class="battle-grid-form">

            <div class="tactical-group">
                <label>Misión</label>
                <textarea name="mision" class="form-control tactical-control" rows="3">{{ old('mision', $elemento->mision) }}</textarea>
                @error('mision') <small class="text-danger">{{ $message }}</small> @enderror
            </div>

            <div class="tactical-group">
                <label>Intención</label>
                <textarea name="intencion" class="form-control tactical-control" rows="3">{{ old('intencion', $elemento->intencion) }}</textarea>
                @error('intencion') <small class="text-danger">{{ $message }}</small> @enderror
            </div>

            <div class="tactical-group">
                <label>R.I.C.C.</label>
                <textarea name="ricc" class="form-control tactical-control" rows="3">{{ old('ricc', $elemento->ricc) }}</textarea>
                @error('ricc') <small class="text-danger">{{ $message }}</small> @enderror
            </div>

            <div class="tactical-group">
                <label>Eventos críticos</label>
                <textarea name="eventos_criticos" class="form-control tactical-control" rows="3">{{ old('eventos_criticos', $elemento->eventos_criticos) }}</textarea>
                @error('eventos_criticos') <small class="text-danger">{{ $message }}</small> @enderror
            </div>

            <div class="tactical-group">
                <label>Poder de combate</label>
                <textarea name="poder_combate" class="form-control tactical-control" rows="3">{{ old('poder_combate', $elemento->poder_combate) }}</textarea>
                @error('poder_combate') <small class="text-danger">{{ $message }}</small> @enderror
            </div>

            <div class="tactical-group">
                <label>Organización para el combate</label>
                <textarea name="organizacion_combate" class="form-control tactical-control" rows="3">{{ old('organizacion_combate', $elemento->organizacion_combate) }}</textarea>
                @error('organizacion_combate') <small class="text-danger">{{ $message }}</small> @enderror
            </div>

            <div class="tactical-group">
                <label>Medios disponibles</label>
                <textarea name="medios_disponibles" class="form-control tactical-control" rows="3">{{ old('medios_disponibles', $elemento->medios_disponibles) }}</textarea>
                @error('medios_disponibles') <small class="text-danger">{{ $message }}</small> @enderror
            </div>

            <div class="tactical-group">
                <label>Ubicación</label>
                <textarea name="ubicacion_tactica" class="form-control tactical-control" rows="3">{{ old('ubicacion_tactica', $elemento->ubicacion_tactica) }}</textarea>
                @error('ubicacion_tactica') <small class="text-danger">{{ $message }}</small> @enderror
            </div>

            <div class="tactical-group">
                <label>Datos del clima</label>
                <textarea name="datos_clima" class="form-control tactical-control" rows="3">{{ old('datos_clima', $elemento->datos_clima) }}</textarea>
                @error('datos_clima') <small class="text-danger">{{ $message }}</small> @enderror
            </div>

            <div class="tactical-group">
                <label>Estado de apoyo</label>
                <textarea name="estado_apoyo" class="form-control tactical-control" rows="3">{{ old('estado_apoyo', $elemento->estado_apoyo) }}</textarea>
                @error('estado_apoyo') <small class="text-danger">{{ $message }}</small> @enderror
            </div>

            <div class="tactical-group">
                <label>Matriz de ejecución</label>
                <textarea name="matriz_ejecucion" class="form-control tactical-control" rows="3">{{ old('matriz_ejecucion', $elemento->matriz_ejecucion) }}</textarea>
                @error('matriz_ejecucion') <small class="text-danger">{{ $message }}</small> @enderror
            </div>

            <div class="tactical-group">
                <label>Rutas</label>
                <textarea name="rutas" class="form-control tactical-control" rows="3">{{ old('rutas', $elemento->rutas) }}</textarea>
                @error('rutas') <small class="text-danger">{{ $message }}</small> @enderror
            </div>

            <div class="tactical-group">
                <label>Puesto de mando</label>
                <textarea name="puesto_mando" class="form-control tactical-control" rows="3">{{ old('puesto_mando', $elemento->puesto_mando) }}</textarea>
                @error('puesto_mando') <small class="text-danger">{{ $message }}</small> @enderror
            </div>

            <div class="tactical-group">
                <label>Clase II</label>
                <textarea name="clase_ii" class="form-control tactical-control" rows="3">{{ old('clase_ii', $elemento->clase_ii) }}</textarea>
                @error('clase_ii') <small class="text-danger">{{ $message }}</small> @enderror
            </div>

            <div class="tactical-group">
                <label>Clase V</label>
                <textarea name="clase_v" class="form-control tactical-control" rows="3">{{ old('clase_v', $elemento->clase_v) }}</textarea>
                @error('clase_v') <small class="text-danger">{{ $message }}</small> @enderror
            </div>

            <div class="tactical-group">
                <label>Hora táctica</label>
                <input
                    type="text"
                    name="hora_tactica"
                    value="{{ old('hora_tactica', $elemento->hora_tactica) }}"
                    class="form-control tactical-control"
                >
                @error('hora_tactica') <small class="text-danger">{{ $message }}</small> @enderror
            </div>

            <div class="tactical-group">
                <label>Hora real</label>
                <input
                    type="text"
                    name="hora_real"
                    value="{{ old('hora_real', $elemento->hora_real) }}"
                    class="form-control tactical-control"
                >
                @error('hora_real') <small class="text-danger">{{ $message }}</small> @enderror
            </div>

        </div>

        <!-- INFORMACIÓN COMPLEMENTARIA -->
        <div class="section-title mt-4">
            <i class="fas fa-info-circle"></i>
            Información complementaria
        </div>

        <div class="form-group tactical-group">
            <label>Comentarios</label>
            <textarea name="comentarios" class="form-control tactical-control" rows="3">{{ old('comentarios', $elemento->comentarios) }}</textarea>
            @error('comentarios')
                <small class="text-danger">{{ $message }}</small>
            @enderror
        </div>

        <div class="form-group tactical-group">
            <label>Información adicional</label>
            <textarea name="informacion_adicional" class="form-control tactical-control" rows="3">{{ old('informacion_adicional', $elemento->informacion_adicional) }}</textarea>
            @error('informacion_adicional')
                <small class="text-danger">{{ $message }}</small>
            @enderror
        </div>

        <div class="battle-footer">
            <button type="submit" class="battle-btn battle-btn-primary">
                <i class="fas fa-save"></i>
                Actualizar unidad
            </button>

            <a href="{{ route('elementos-mapa.show', $elemento->id) }}" class="battle-btn battle-btn-info">
                <i class="fas fa-eye"></i>
                Ver detalle
            </a>

            <a href="{{ route('elementos-mapa.index') }}" class="battle-btn battle-btn-secondary">
                <i class="fas fa-arrow-left"></i>
                Volver
            </a>
        </div>

    </div>
</form>

@stop

@section('css')
<style>
    body {
        background: #0b1118 !important;
    }

    .content-wrapper {
        background:
            radial-gradient(circle at top left, rgba(132, 204, 22, 0.08), transparent 28%),
            linear-gradient(135deg, #0b1118, #111827 55%, #090d13) !important;
    }

    .unit-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        padding: 14px 18px;
        border: 1px solid rgba(163, 230, 53, 0.25);
        border-radius: 14px;
        background: linear-gradient(135deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.96));
        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.30);
        margin-bottom: 10px;
    }

    .unit-header-left {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .unit-header-logo {
        width: 56px;
        height: 56px;
        object-fit: contain;
        filter: drop-shadow(0 0 12px rgba(163, 230, 53, 0.35));
    }

    .unit-label {
        margin: 0;
        color: #a3e635;
        font-size: 11px;
        font-weight: 900;
        letter-spacing: 0.32em;
        text-transform: uppercase;
    }

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

    .unit-subtitle {
        margin: 2px 0 0;
        color: #94a3b8;
        font-size: 13px;
        font-weight: 600;
    }

    .unit-status {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 14px;
        border: 1px solid rgba(163, 230, 53, 0.35);
        border-radius: 999px;
        color: #d9f99d;
        background: rgba(63, 98, 18, 0.18);
        font-size: 12px;
        font-weight: 900;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .status-dot {
        width: 9px;
        height: 9px;
        border-radius: 999px;
        background: #a3e635;
        box-shadow: 0 0 12px rgba(163, 230, 53, 0.95);
    }

    .battle-card {
        padding: 22px;
        border: 1px solid rgba(163, 230, 53, 0.28);
        border-radius: 18px;
        background:
            linear-gradient(135deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.97)),
            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);
    }

    .section-title {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 14px;
        padding-bottom: 8px;
        border-bottom: 1px solid rgba(163, 230, 53, 0.24);
        color: #bef264;
        font-size: 13px;
        font-weight: 900;
        letter-spacing: 0.18em;
        text-transform: uppercase;
    }

    .tactical-group {
        margin-bottom: 1rem;
    }

    .tactical-group label {
        color: #e5e7eb;
        font-size: 12px;
        font-weight: 900;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .tactical-control {
        border: 1px solid rgba(148, 163, 184, 0.45) !important;
        border-radius: 9px !important;
        background: rgba(15, 23, 42, 0.86) !important;
        color: #ffffff !important;
        font-weight: 700;
    }

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

    .tactical-control option {
        color: #111827;
        background: #ffffff;
    }

    .battle-grid-form {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }

    .battle-footer {
        display: flex;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 22px;
        padding-top: 18px;
        border-top: 1px solid rgba(163, 230, 53, 0.24);
    }

    .battle-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border-radius: 9px;
        padding: 10px 14px;
        font-size: 12px;
        font-weight: 900;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        transition: all 0.2s ease;
    }

    .battle-btn-primary {
        color: #0f172a !important;
        background: #a3e635 !important;
        border: 1px solid #bef264 !important;
    }

    .battle-btn-primary:hover {
        color: #0f172a !important;
        filter: brightness(1.12);
        transform: translateY(-1px);
    }

    .battle-btn-info {
        color: #ffffff !important;
        border: 1px solid rgba(56, 189, 248, 0.70) !important;
        background: rgba(14, 116, 144, 0.60) !important;
    }

    .battle-btn-info:hover {
        color: #ffffff !important;
        background: rgba(8, 145, 178, 0.85) !important;
        transform: translateY(-1px);
    }

    .battle-btn-secondary {
        color: #ffffff !important;
        border: 1px solid rgba(255, 255, 255, 0.50) !important;
        background: rgba(15, 23, 42, 0.75) !important;
    }

    .battle-btn-secondary:hover {
        color: #bef264 !important;
        border-color: #bef264 !important;
        background: rgba(132, 204, 22, 0.12) !important;
        transform: translateY(-1px);
    }

    @media (max-width: 992px) {
        .battle-grid-form {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 768px) {
        .unit-header {
            flex-direction: column;
            align-items: flex-start;
        }

        .unit-title {
            font-size: 20px;
        }

        .battle-grid-form {
            grid-template-columns: 1fr;
        }

        .battle-footer {
            justify-content: flex-start;
        }
    }
</style>
@stop