@extends('adminlte::page')

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

@section('content_header')
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <h1 class="mb-0">Nuevo símbolo militar</h1>
            <small class="text-muted">
                Registro de símbolo conforme al reglamento de simbología militar
            </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.store') }}"
          method="POST"
          enctype="multipart/form-data">

        @csrf

        <div class="row">

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

                <div class="card card-success card-outline">
                    <div class="card-header">
                        <h3 class="card-title">
                            <i class="fas fa-plus-circle"></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') == $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') }}"
                                   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') }}"
                                           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') }}"
                                           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', 'unidad') == $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') }}</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') }}"
                                           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', 'actual') == $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') }}"
                                           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') }}"
                                           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') }}"
                                           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') }}"
                                           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">

                        <div class="form-group">
                            <label for="imagen">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 class="text-center mt-3">
                            <img id="preview-imagen"
                                 src=""
                                 alt="Vista previa"
                                 class="img-fluid border rounded p-2 d-none"
                                 style="max-height: 140px; object-fit: contain;">
                        </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', 'propio') == $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', '#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', true) ? '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', true) ? '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', false) ? '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', false) ? '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', 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', true) ? 'checked' : '' }}>

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

                    </div>
                </div>

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

                    <div class="card-body text-center">
                        <div id="preview-simbolo" class="militar-symbol" style="--militar-color:#0057B8;">
                            <div class="militar-magnitud" id="pv-magnitud"></div>
                            <div class="militar-cuerpo">
                                <div class="militar-lateral militar-izq" id="pv-izq"></div>

                                <div class="militar-marco">
                                    <span class="militar-abreviatura" id="pv-abreviatura">SIM</span>
                                    <span class="militar-info" id="pv-info"></span>
                                </div>

                                <div class="militar-lateral militar-der" id="pv-der"></div>
                            </div>
                            <div class="militar-armamento" id="pv-armamento"></div>
                        </div>
                    </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-success">
                    <i class="fas fa-save"></i> Guardar 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 abreviatura = document.getElementById('abreviatura');
            const codigo = document.getElementById('codigo');
            const magnitud = document.getElementById('magnitud');
            const designacionIzquierda = document.getElementById('designacion_izquierda');
            const designacionDerecha = document.getElementById('designacion_derecha');
            const informacionAdicional = document.getElementById('informacion_adicional');
            const armamento = document.getElementById('armamento');
            const estadoGrafico = document.getElementById('estado_grafico');

            const previewSimbolo = document.getElementById('preview-simbolo');
            const pvAbreviatura = document.getElementById('pv-abreviatura');
            const pvMagnitud = document.getElementById('pv-magnitud');
            const pvIzq = document.getElementById('pv-izq');
            const pvDer = document.getElementById('pv-der');
            const pvInfo = document.getElementById('pv-info');
            const pvArmamento = document.getElementById('pv-armamento');

            const imagenInput = document.getElementById('imagen');
            const previewImagen = document.getElementById('preview-imagen');

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

            function actualizarVistaPrevia() {
                const textoCentral = abreviatura.value || codigo.value || 'SIM';

                previewSimbolo.style.setProperty('--militar-color', color.value || '#0057B8');
                pvAbreviatura.textContent = textoCentral;
                pvMagnitud.textContent = magnitud.value || '';
                pvIzq.textContent = designacionIzquierda.value || '';
                pvDer.textContent = designacionDerecha.value || '';
                pvInfo.textContent = informacionAdicional.value || '';
                pvArmamento.textContent = armamento.value || '';

                previewSimbolo.classList.remove('militar-futuro', 'militar-simulado');

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

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

            if (afiliacion && color) {
                afiliacion.addEventListener('change', function () {
                    if (coloresReglamentarios[this.value]) {
                        color.value = coloresReglamentarios[this.value];
                        actualizarVistaPrevia();
                    }
                });
            }

            [
                abreviatura,
                codigo,
                magnitud,
                designacionIzquierda,
                designacionDerecha,
                informacionAdicional,
                armamento,
                estadoGrafico,
                color
            ].forEach(function (input) {
                if (input) {
                    input.addEventListener('input', actualizarVistaPrevia);
                    input.addEventListener('change', actualizarVistaPrevia);
                }
            });

            if (imagenInput && previewImagen) {
                imagenInput.addEventListener('change', function () {
                    const file = this.files[0];

                    if (!file) {
                        previewImagen.src = '';
                        previewImagen.classList.add('d-none');
                        return;
                    }

                    const reader = new FileReader();

                    reader.onload = function (e) {
                        previewImagen.src = e.target.result;
                        previewImagen.classList.remove('d-none');
                    };

                    reader.readAsDataURL(file);
                });
            }

            actualizarVistaPrevia();
        });
    </script>
@stop