@extends('adminlte::page')

@section('title', 'Nueva 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">Nueva unidad táctica</h1>
                <p class="unit-subtitle">Registro de elemento para seguimiento de batalla</p>
            </div>
        </div>
    </div>
@stop

@section('content')

<form action="{{ route('elementos-mapa.store') }}" method="POST" class="battle-form">
    @csrf

    <div class="battle-card">

        <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') == $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') == $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') == $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') }}" 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') }}" 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') == 'amigo' ? 'selected' : '' }}>Amigo</option>
                        <option value="enemigo" {{ old('bando') == 'enemigo' ? 'selected' : '' }}>Enemigo</option>
                        <option value="neutral" {{ old('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') == 'tactico' ? 'selected' : '' }}>Táctico</option>
                        <option value="operacional" {{ old('nivel_planeamiento') == 'operacional' ? 'selected' : '' }}>Operacional</option>
                        <option value="estrategico" {{ old('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', 'activo') }}" class="form-control tactical-control">
                    @error('estado') <small class="text-danger">{{ $message }}</small> @enderror
                </div>
            </div>
        </div>

        <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') }}" 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') }}" class="form-control tactical-control">
                    @error('lng') <small class="text-danger">{{ $message }}</small> @enderror
                </div>
            </div>
        </div>

        <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') }}</textarea>
            </div>

            <div class="tactical-group">
                <label>Intención</label>
                <textarea name="intencion" class="form-control tactical-control" rows="3">{{ old('intencion') }}</textarea>
            </div>

            <div class="tactical-group">
                <label>R.I.C.C.</label>
                <textarea name="ricc" class="form-control tactical-control" rows="3">{{ old('ricc') }}</textarea>
            </div>

            <div class="tactical-group">
                <label>Eventos críticos</label>
                <textarea name="eventos_criticos" class="form-control tactical-control" rows="3">{{ old('eventos_criticos') }}</textarea>
            </div>

            <div class="tactical-group">
                <label>Poder de combate</label>
                <textarea name="poder_combate" class="form-control tactical-control" rows="3">{{ old('poder_combate') }}</textarea>
            </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') }}</textarea>
            </div>

            <div class="tactical-group">
                <label>Medios disponibles</label>
                <textarea name="medios_disponibles" class="form-control tactical-control" rows="3">{{ old('medios_disponibles') }}</textarea>
            </div>

            <div class="tactical-group">
                <label>Ubicación</label>
                <textarea name="ubicacion_tactica" class="form-control tactical-control" rows="3">{{ old('ubicacion_tactica') }}</textarea>
            </div>

            <div class="tactical-group">
                <label>Datos del clima</label>
                <textarea name="datos_clima" class="form-control tactical-control" rows="3">{{ old('datos_clima') }}</textarea>
            </div>

            <div class="tactical-group">
                <label>Estado de apoyo</label>
                <textarea name="estado_apoyo" class="form-control tactical-control" rows="3">{{ old('estado_apoyo') }}</textarea>
            </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') }}</textarea>
            </div>

            <div class="tactical-group">
                <label>Rutas</label>
                <textarea name="rutas" class="form-control tactical-control" rows="3">{{ old('rutas') }}</textarea>
            </div>

            <div class="tactical-group">
                <label>Puesto de mando</label>
                <textarea name="puesto_mando" class="form-control tactical-control" rows="3">{{ old('puesto_mando') }}</textarea>
            </div>

            <div class="tactical-group">
                <label>Clase II</label>
                <textarea name="clase_ii" class="form-control tactical-control" rows="3">{{ old('clase_ii') }}</textarea>
            </div>

            <div class="tactical-group">
                <label>Clase V</label>
                <textarea name="clase_v" class="form-control tactical-control" rows="3">{{ old('clase_v') }}</textarea>
            </div>

            <div class="tactical-group">
                <label>Hora táctica</label>
                <input type="text" name="hora_tactica" value="{{ old('hora_tactica') }}" class="form-control tactical-control">
            </div>

            <div class="tactical-group">
                <label>Hora real</label>
                <input type="text" name="hora_real" value="{{ old('hora_real') }}" class="form-control tactical-control">
            </div>

        </div>

        <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') }}</textarea>
        </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') }}</textarea>
        </div>

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

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

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

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