@extends('adminlte::page')

@section('title', 'Editar símbolo militar')

@section('content_header')
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <h1 class="mb-0">Editar símbolo militar</h1>
            <small class="text-muted">
                Modificación de símbolo conforme a la estructura reglamentaria
            </small>
        </div>

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

@section('content')

    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show">
            <strong>Revise los siguientes errores:</strong>
            <ul class="mb-0 mt-2">
                @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

    <form action="{{ route('simbolos.update', $simbolo) }}"
          method="POST"
          enctype="multipart/form-data">

        @csrf
        @method('PUT')

        <div class="row">

            {{-- COLUMNA PRINCIPAL --}}
            <div class="col-md-8">

                <div class="card card-warning card-outline">
                    <div class="card-header">
                        <h3 class="card-title">
                            <i class="fas fa-edit"></i> Datos del símbolo
                        </h3>
                    </div>

                    <div class="card-body">

                        {{-- CATEGORÍA --}}
                        <div class="form-group">
                            <label for="categoria_simbolo_id">
                                Categoría reglamentaria <span class="text-danger">*</span>
                            </label>

                            <select name="categoria_simbolo_id"
                                    id="categoria_simbolo_id"
                                    class="form-control @error('categoria_simbolo_id') is-invalid @enderror"
                                    required>
                                <option value="">Seleccione una categoría</option>

                                @foreach($categorias as $categoria)
                                    <option value="{{ $categoria->id }}"
                                        {{ old('categoria_simbolo_id', $simbolo->categoria_simbolo_id) == $categoria->id ? 'selected' : '' }}>
                                        {{ $categoria->nombre }}
                                    </option>
                                @endforeach
                            </select>

                            @error('categoria_simbolo_id')
                                <span class="invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>

                        {{-- NOMBRE --}}
                        <div class="form-group">
                            <label for="nombre">
                                Nombre del símbolo <span class="text-danger">*</span>
                            </label>

                            <input type="text"
                                   name="nombre"
                                   id="nombre"
                                   value="{{ old('nombre', $simbolo->nombre) }}"
                                   class="form-control @error('nombre') is-invalid @enderror"
                                   placeholder="Ej: Unidad de Infantería"
                                   required>

                            @error('nombre')
                                <span class="invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="row">
                            {{-- CÓDIGO --}}
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="codigo">Código</label>

                                    <input type="text"
                                           name="codigo"
                                           id="codigo"
                                           value="{{ old('codigo', $simbolo->codigo) }}"
                                           class="form-control @error('codigo') is-invalid @enderror"
                                           placeholder="Ej: INF, ART, PM">

                                    @error('codigo')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            {{-- ABREVIATURA --}}
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="abreviatura">Abreviatura</label>

                                    <input type="text"
                                           name="abreviatura"
                                           id="abreviatura"
                                           value="{{ old('abreviatura', $simbolo->abreviatura) }}"
                                           class="form-control @error('abreviatura') is-invalid @enderror"
                                           placeholder="Ej: P.M., B.M., Rel.">

                                    @error('abreviatura')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        {{-- TIPO DE SÍMBOLO --}}
                        <div class="form-group">
                            <label for="tipo_simbolo">
                                Tipo de símbolo <span class="text-danger">*</span>
                            </label>

                            <select name="tipo_simbolo"
                                    id="tipo_simbolo"
                                    class="form-control @error('tipo_simbolo') is-invalid @enderror"
                                    required>
                                <option value="">Seleccione el tipo</option>

                                @foreach($tiposSimbolo as $key => $texto)
                                    <option value="{{ $key }}"
                                        {{ old('tipo_simbolo', $simbolo->tipo_simbolo) == $key ? 'selected' : '' }}>
                                        {{ $texto }}
                                    </option>
                                @endforeach
                            </select>

                            @error('tipo_simbolo')
                                <span class="invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>

                        {{-- DESCRIPCIÓN --}}
                        <div class="form-group">
                            <label for="descripcion">Descripción</label>

                            <textarea name="descripcion"
                                      id="descripcion"
                                      rows="4"
                                      class="form-control @error('descripcion') is-invalid @enderror"
                                      placeholder="Descripción doctrinal o uso del símbolo">{{ old('descripcion', $simbolo->descripcion) }}</textarea>

                            @error('descripcion')
                                <span class="invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>

                    </div>
                </div>

                {{-- COMPOSICIÓN REGLAMENTARIA --}}
                <div class="card card-primary card-outline">
                    <div class="card-header">
                        <h3 class="card-title">
                            <i class="fas fa-layer-group"></i> Composición reglamentaria
                        </h3>
                    </div>

                    <div class="card-body">

                        <div class="row">

                            {{-- MAGNITUD --}}
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="magnitud">Magnitud de escalón</label>

                                    <input type="text"
                                           name="magnitud"
                                           id="magnitud"
                                           value="{{ old('magnitud', $simbolo->magnitud) }}"
                                           class="form-control @error('magnitud') is-invalid @enderror"
                                           placeholder="Ej: I, II, III, X, XX, XXX">

                                    @error('magnitud')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            {{-- ESTADO GRÁFICO --}}
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="estado_grafico">
                                        Estado gráfico <span class="text-danger">*</span>
                                    </label>

                                    <select name="estado_grafico"
                                            id="estado_grafico"
                                            class="form-control @error('estado_grafico') is-invalid @enderror"
                                            required>
                                        @foreach($estadosGraficos as $key => $texto)
                                            <option value="{{ $key }}"
                                                {{ old('estado_grafico', $simbolo->estado_grafico) == $key ? 'selected' : '' }}>
                                                {{ $texto }}
                                            </option>
                                        @endforeach
                                    </select>

                                    @error('estado_grafico')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            {{-- DESIGNACIÓN IZQUIERDA --}}
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="designacion_izquierda">Designación izquierda</label>

                                    <input type="text"
                                           name="designacion_izquierda"
                                           id="designacion_izquierda"
                                           value="{{ old('designacion_izquierda', $simbolo->designacion_izquierda) }}"
                                           class="form-control @error('designacion_izquierda') is-invalid @enderror"
                                           placeholder="Ej: A/IX, D/II">

                                    @error('designacion_izquierda')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            {{-- DESIGNACIÓN DERECHA --}}
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="designacion_derecha">Designación derecha</label>

                                    <input type="text"
                                           name="designacion_derecha"
                                           id="designacion_derecha"
                                           value="{{ old('designacion_derecha', $simbolo->designacion_derecha) }}"
                                           class="form-control @error('designacion_derecha') is-invalid @enderror"
                                           placeholder="Ej: 1, 7, 10">

                                    @error('designacion_derecha')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            {{-- INFORMACIÓN ADICIONAL --}}
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="informacion_adicional">Información adicional</label>

                                    <input type="text"
                                           name="informacion_adicional"
                                           id="informacion_adicional"
                                           value="{{ old('informacion_adicional', $simbolo->informacion_adicional) }}"
                                           class="form-control @error('informacion_adicional') is-invalid @enderror"
                                           placeholder="Ej: Ref., Comb., SPAC">

                                    @error('informacion_adicional')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            {{-- ARMAMENTO --}}
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="armamento">Armamento / calibre</label>

                                    <input type="text"
                                           name="armamento"
                                           id="armamento"
                                           value="{{ old('armamento', $simbolo->armamento) }}"
                                           class="form-control @error('armamento') is-invalid @enderror"
                                           placeholder="Ej: 30, 400, 500">

                                    @error('armamento')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                        </div>

                    </div>
                </div>

            </div>

            {{-- COLUMNA LATERAL --}}
            <div class="col-md-4">

                {{-- IMAGEN --}}
                <div class="card card-secondary card-outline">
                    <div class="card-header">
                        <h3 class="card-title">
                            <i class="fas fa-image"></i> Imagen del símbolo
                        </h3>
                    </div>

                    <div class="card-body text-center">

                        <label class="d-block">Imagen actual</label>

                        @if($simbolo->imagen)
                            <img src="{{ asset('storage/' . $simbolo->imagen) }}"
                                 alt="{{ $simbolo->nombre }}"
                                 class="img-fluid border rounded p-2 mb-3"
                                 style="max-height: 140px; object-fit: contain;">
                        @else
                            <div class="alert alert-secondary">
                                Sin imagen registrada
                            </div>
                        @endif

                        <div class="form-group text-left">
                            <label for="imagen">Nueva imagen</label>

                            <input type="file"
                                   name="imagen"
                                   id="imagen"
                                   class="form-control-file @error('imagen') is-invalid @enderror"
                                   accept=".png,.jpg,.jpeg,.svg,.webp">

                            <small class="form-text text-muted">
                                Formatos permitidos: PNG, JPG, JPEG, SVG o WEBP.
                            </small>

                            @error('imagen')
                                <span class="invalid-feedback d-block">{{ $message }}</span>
                            @enderror
                        </div>

                    </div>
                </div>

                {{-- COLOR Y AFILIACIÓN --}}
                <div class="card card-info card-outline">
                    <div class="card-header">
                        <h3 class="card-title">
                            <i class="fas fa-flag"></i> Color reglamentario
                        </h3>
                    </div>

                    <div class="card-body">

                        {{-- AFILIACIÓN --}}
                        <div class="form-group">
                            <label for="afiliacion_defecto">
                                Afiliación <span class="text-danger">*</span>
                            </label>

                            <select name="afiliacion_defecto"
                                    id="afiliacion_defecto"
                                    class="form-control @error('afiliacion_defecto') is-invalid @enderror"
                                    required>
                                @foreach($afiliaciones as $key => $texto)
                                    <option value="{{ $key }}"
                                        {{ old('afiliacion_defecto', $simbolo->afiliacion_defecto) == $key ? 'selected' : '' }}>
                                        {{ $texto }}
                                    </option>
                                @endforeach
                            </select>

                            @error('afiliacion_defecto')
                                <span class="invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>

                        {{-- COLOR --}}
                        <div class="form-group">
                            <label for="color_reglamentario">Color</label>

                            <input type="color"
                                   name="color_reglamentario"
                                   id="color_reglamentario"
                                   value="{{ old('color_reglamentario', $simbolo->color_reglamentario ?? '#0057B8') }}"
                                   class="form-control @error('color_reglamentario') is-invalid @enderror"
                                   style="height: 42px; padding: 4px;">

                            @error('color_reglamentario')
                                <span class="invalid-feedback">{{ $message }}</span>
                            @enderror

                            <small class="form-text text-muted">
                                Azul: propio, rojo: enemigo, verde: obstáculo, amarillo: contaminado.
                            </small>
                        </div>

                    </div>
                </div>

                {{-- APLICACIÓN EN MAPA --}}
                <div class="card card-success card-outline">
                    <div class="card-header">
                        <h3 class="card-title">
                            <i class="fas fa-map-marker-alt"></i> Aplicación en mapa
                        </h3>
                    </div>

                    <div class="card-body">

                        <div class="form-check">
                            <input type="checkbox"
                                   name="es_combinable"
                                   value="1"
                                   id="es_combinable"
                                   class="form-check-input"
                                   {{ old('es_combinable', $simbolo->es_combinable) ? 'checked' : '' }}>

                            <label for="es_combinable" class="form-check-label">
                                Es combinable
                            </label>
                        </div>

                        <div class="form-check">
                            <input type="checkbox"
                                   name="es_punto"
                                   value="1"
                                   id="es_punto"
                                   class="form-check-input"
                                   {{ old('es_punto', $simbolo->es_punto) ? 'checked' : '' }}>

                            <label for="es_punto" class="form-check-label">
                                Se usa como punto
                            </label>
                        </div>

                        <div class="form-check">
                            <input type="checkbox"
                                   name="es_linea"
                                   value="1"
                                   id="es_linea"
                                   class="form-check-input"
                                   {{ old('es_linea', $simbolo->es_linea) ? 'checked' : '' }}>

                            <label for="es_linea" class="form-check-label">
                                Se usa como línea
                            </label>
                        </div>

                        <div class="form-check">
                            <input type="checkbox"
                                   name="es_area"
                                   value="1"
                                   id="es_area"
                                   class="form-check-input"
                                   {{ old('es_area', $simbolo->es_area) ? 'checked' : '' }}>

                            <label for="es_area" class="form-check-label">
                                Se usa como área
                            </label>
                        </div>

                        <hr>

                        <div class="form-group">
                            <label for="orden">Orden</label>

                            <input type="number"
                                   name="orden"
                                   id="orden"
                                   value="{{ old('orden', $simbolo->orden ?? 0) }}"
                                   class="form-control @error('orden') is-invalid @enderror"
                                   min="0">

                            @error('orden')
                                <span class="invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="form-check">
                            <input type="checkbox"
                                   name="activo"
                                   value="1"
                                   id="activo"
                                   class="form-check-input"
                                   {{ old('activo', $simbolo->activo) ? 'checked' : '' }}>

                            <label for="activo" class="form-check-label">
                                Activo
                            </label>
                        </div>

                    </div>
                </div>

                {{-- VISTA PREVIA --}}
                <div class="card card-primary card-outline">
                    <div class="card-header">
                        <h3 class="card-title">
                            <i class="fas fa-eye"></i> Vista previa
                        </h3>
                    </div>

                    <div class="card-body text-center">
                        @if(method_exists($simbolo, 'renderHtmlMilitar'))
                            {!! $simbolo->renderHtmlMilitar() !!}
                        @else
                            <div class="alert alert-warning mb-0">
                                Falta el método <strong>renderHtmlMilitar()</strong> en el modelo Simbolo.
                            </div>
                        @endif
                    </div>
                </div>

            </div>

        </div>

        {{-- BOTONES --}}
        <div class="card">
            <div class="card-footer d-flex justify-content-between">
                <a href="{{ route('simbolos.index') }}" class="btn btn-secondary">
                    <i class="fas fa-times"></i> Cancelar
                </a>

                <button type="submit" class="btn btn-warning">
                    <i class="fas fa-save"></i> Actualizar símbolo
                </button>
            </div>
        </div>

    </form>

@stop

@section('css')
    <link rel="stylesheet" href="{{ asset('css/simbolos-militares.css') }}">
@stop

@section('js')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const afiliacion = document.getElementById('afiliacion_defecto');
            const color = document.getElementById('color_reglamentario');

            const coloresReglamentarios = {
                propio: '#0057B8',
                enemigo: '#D00000',
                obstaculo: '#008000',
                contaminado: '#F2C300'
            };

            if (afiliacion && color) {
                afiliacion.addEventListener('change', function () {
                    if (coloresReglamentarios[this.value]) {
                        color.value = coloresReglamentarios[this.value];
                    }
                });
            }
        });
    </script>
@stop