@extends('backend.layouts.app')

{{-- Mueve el título a la franja superior en el layout --}}
@section('page-title', 'CREAR NUEVO TRÁMITE')

@section('content')
<!-- Estilos para la clase utilizada para ocultar -->
<style>
    .hidden-field {
        display: none !important;
    }
</style>

<div class="container">
    @if ($errors->any())
        <div class="alert alert-danger mt-3">
            <ul>
                @foreach($errors->all() as $error)
                   <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form action="{{ route('tramites.store') }}" method="POST" class="mt-3">
        @csrf

        <!-- Primera fila - Campos que siempre aparecen -->
        <div class="row mt-3">
            <div class="col-md-3" id="field-producto">
                <label for="producto_id">TIPO DE PRODUCTO</label>
                <select name="producto_id" id="producto_id" class="form-control" required>
                    <option value="">-- SELECCIONE PRODUCTO --</option>
                    @foreach($productos ?? [] as $producto)
                        <option value="{{ $producto->id }}" {{ old('producto_id') == $producto->id ? 'selected' : '' }}>
                            {{ strtoupper($producto->nombre) }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3" id="field-tipotramite">
                <label for="tipo_tramite">TIPO DE TRÁMITE</label>
                <select name="tipo_tramite_id" id="tipo_tramite" class="form-control" required>
                    <option value="">-- SELECCIONE TIPO DE TRÁMITE --</option>
                </select>
            </div>
            <div class="col-md-3" id="field-subtipotramite">
                <label for="subtipo_tramite">TIPO DE SUBTRÁMITE</label>
                <select name="subtipo_tramite_id" id="subtipo_tramite" class="form-control">
                    <option value="">-- SELECCIONE SUBTIPO --</option>
                </select>
            </div>
            <div class="col-md-3" id="field-nombreproducto">
                <label for="nombre_producto">NOMBRE DEL PRODUCTO</label>
                <input type="text" name="nombre_producto" id="nombre_producto" class="form-control texto-normalizado" value="{{ old('nombre_producto') }}">
            </div>
        </div>

        <!-- Segunda fila - Campos que pueden ocultarse según tramite "NUEVO" -->
        <div class="row mt-3">
            <div class="col-md-3" id="field-expediente">
                <label for="expediente">EXPEDIENTE</label>
                <input type="text" name="expediente" id="expediente" class="form-control texto-normalizado" value="{{ old('expediente') }}">
            </div>
            <div class="col-md-3" id="field-numregistro">
                <label for="num_registro">NÚMERO DE REGISTRO</label>
                <input type="text" name="num_registro" id="num_registro" class="form-control texto-normalizado" value="{{ old('num_registro') }}">
            </div>
            <div class="col-md-3" id="field-fechavencimiento">
                <label for="fecha_vencimiento_registro">FECHA VENCIMIENTO REGISTRO</label>
                <input type="date" name="fecha_vencimiento_registro" id="fecha_vencimiento_registro" class="form-control" min="{{ date('Y-m-d') }}" value="{{ old('fecha_vencimiento_registro') }}">
            </div>
            <div class="col-md-3" id="field-estadoregistro">
                <label for="estado_registro">ESTADO DEL REGISTRO</label>
                <select name="estado_registro_id" id="estado_registro" class="form-control">
                    <option value="">-- SELECCIONE ESTADO DEL REGISTRO --</option>
                    @foreach($estadosRegistro ?? [] as $er)
                        <option value="{{ $er->id }}" {{ old('estado_registro_id') == $er->id ? 'selected' : '' }}>
                            {{ strtoupper($er->nombre) }}
                        </option>
                    @endforeach
                </select>
            </div>
        </div>

        <!-- Tercera fila - Campos fijos -->
        <div class="row mt-3">
            <div class="col-md-3" id="field-ingrediente">
                <label for="ingrediente_principal">INGREDIENTE PRINCIPAL</label>
                <input type="text" name="ingrediente_principal" id="ingrediente_principal" class="form-control texto-normalizado" value="{{ old('ingrediente_principal') }}">
            </div>
            <div class="col-md-3" id="field-forma">
                <label for="forma_farmaceutica">FORMA</label>
                <select name="forma_farmaceutica_id" id="forma_farmaceutica" class="form-control">
                    <option value="">-- SELECCIONE FORMA --</option>
                </select>
            </div>
            <div class="col-md-3" id="field-concentracion">
                <label for="concentracion">CONCENTRACIÓN</label>
                <input type="text" name="concentracion" id="concentracion" class="form-control texto-normalizado" value="{{ old('concentracion') }}">
            </div>
            <div class="col-md-3" id="field-asignacion">
                <label for="asignacion">ASIGNACIÓN</label>
                <select name="asignacion" id="asignacion" class="form-control">
                    <option value="">-- SELECCIONAR --</option>
                    <option value="SI" {{ old('asignacion') == 'SI' ? 'selected' : '' }}>SI</option>
                    <option value="NO" {{ old('asignacion') == 'NO' ? 'selected' : '' }}>NO</option>
                </select>
            </div>
        </div>

        <!-- Cuarta fila - Contiene el campo usuario que se puede ocultar -->
        <div class="row mt-3">
            <div class="col-md-3" id="field-usuario">
                <label for="usuario_responsable_id">USUARIO RESPONSABLE</label>
                <select name="usuario_responsable_id" id="usuario_responsable_id" class="form-control">
                    <option value="">-- SELECCIONE UN USUARIO --</option>
                    @foreach($usuarios ?? [] as $user)
                        <option value="{{ $user->id }}" {{ old('usuario_responsable_id') == $user->id ? 'selected' : '' }}>
                            {{ strtoupper($user->name) }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3" id="field-fechaplaneada">
                <label for="fecha_planeada_de_entrega">FECHA PLANEADA DE ENTREGA</label>
                <input type="date" name="fecha_planeada_de_entrega" id="fecha_planeada_de_entrega" class="form-control" min="{{ date('Y-m-d') }}" value="{{ old('fecha_planeada_de_entrega') }}">
            </div>
            <div class="col-md-3" id="field-fechamaxradicacion">
                <label for="fecha_maxima_de_radicacion">FECHA MÁXIMA DE RADICACIÓN</label>
                <input type="date" name="fecha_maxima_de_radicacion" id="fecha_maxima_de_radicacion" class="form-control" min="{{ date('Y-m-d') }}" value="{{ old('fecha_maxima_de_radicacion') }}">
            </div>
            <div class="col-md-3" id="field-cargalaboral">
                <label for="carga_laboral_en_horas">CARGA LABORAL EN HORAS</label>
                <input type="number" name="carga_laboral_en_horas" id="carga_laboral_en_horas" class="form-control" min="0" value="{{ old('carga_laboral_en_horas') }}">
            </div>
        </div>

        <!-- Row para Observaciones -->
        <div class="row mt-3">
            <div class="col-md-12" id="field-observaciones">
                <label for="observaciones">OBSERVACIONES</label>
                <textarea name="observaciones" id="observaciones" class="form-control texto-normalizado" rows="3">{{ old('observaciones') }}</textarea>
            </div>
        </div>

        <!-- Row para Botones -->
        <div class="row mt-3">
            <div class="col-md-12 text-right">
                <button type="submit" class="btn btn-success">GUARDAR</button>
                <a href="{{ route('tramites.index') }}" class="btn btn-secondary">CANCELAR</a>
            </div>
        </div>
    </form>
</div>

<script>
// Funciones para ocultar/mostrar campos
function hideField(id) {
    var el = document.getElementById(id);
    if (el) {
        el.classList.add("hidden-field");
        
        // Limpiar el valor del campo si es un input o select
        var input = el.querySelector('input, select, textarea');
        if (input && input.tagName !== 'SELECT') {
            input.value = '';
        } else if (input && input.tagName === 'SELECT') {
            input.selectedIndex = 0;
        }
    }
}

function showField(id) {
    var el = document.getElementById(id);
    if (el) {
        el.classList.remove("hidden-field");
    }
}

// Función para actualizar visibilidad según tipo de trámite
function toggleCamposTramiteNuevo() {
    console.log("Actualizando campos según tipo de trámite...");
    var tipoTramite = document.getElementById('tipo_tramite');
    var selectedOption = tipoTramite ? tipoTramite.options[tipoTramite.selectedIndex] : null;
    var selectedText = selectedOption ? selectedOption.text.trim().toUpperCase() : "";
    
    // Normaliza para eliminar acentos
    var norm = selectedText.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
    console.log("Tipo de trámite seleccionado:", norm);
    
    if (norm === "NUEVO") {
        // Ocultar campos que no aplican para trámite "NUEVO"
        hideField("field-expediente");
        hideField("field-numregistro");
        hideField("field-fechavencimiento");
        hideField("field-estadoregistro");
    } else {
        // Mostrar campos para otros tipos de trámite
        showField("field-expediente");
        showField("field-numregistro");
        showField("field-fechavencimiento");
        showField("field-estadoregistro");
    }
}

// Función para actualizar visibilidad según asignación
function toggleUsuarioResponsable() {
    console.log("Actualizando campos según asignación...");
    var asignacion = document.getElementById('asignacion');
    var valorAsignacion = asignacion ? asignacion.value : "";
    console.log("Asignación seleccionada:", valorAsignacion);
    
    if (valorAsignacion === "NO") {
        hideField("field-usuario");
        hideField("field-fechaplaneada");
        hideField("field-fechamaxradicacion");
        hideField("field-cargalaboral");
    } else {
        showField("field-usuario");
        showField("field-fechaplaneada");
        showField("field-fechamaxradicacion");
        showField("field-cargalaboral");
    }
}

// Normalizar texto automáticamente
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.texto-normalizado').forEach(function(input) {
        input.addEventListener('input', function() {
            var val = this.value.toUpperCase();
            val = val.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
            val = val.replace(/[^A-Z0-9\s]/g, '');
            this.value = val;
        });
    });
    
    // Establecer listeners para los eventos de cambio
    var tipoTramiteSelect = document.getElementById('tipo_tramite');
    if (tipoTramiteSelect) {
        tipoTramiteSelect.addEventListener('change', function() {
            toggleCamposTramiteNuevo();
            
            // Cargar subtipos si corresponde
            var productoId = document.getElementById('producto_id').value;
            var tipoTramiteId = this.value;
            if (productoId && tipoTramiteId) {
                cargarSubtiposTramite(productoId, tipoTramiteId);
            }
        });
    }
    
    var asignacionSelect = document.getElementById('asignacion');
    if (asignacionSelect) {
        asignacionSelect.addEventListener('change', toggleUsuarioResponsable);
    }
    
    var productoSelect = document.getElementById('producto_id');
    if (productoSelect) {
        productoSelect.addEventListener('change', function() {
            var productoId = this.value;
            if (productoId) {
                cargarTiposTramite(productoId);
                cargarFormasFarmaceuticas(productoId);
            }
        });
    }
    
    // Aplicar reglas iniciales
    toggleCamposTramiteNuevo();
    toggleUsuarioResponsable();
    
    console.log("Formulario inicializado correctamente");
});

// Función para cargar tipos de trámite
function cargarTiposTramite(productoId) {
    console.log("Cargando tipos de trámite para producto:", productoId);
    var tipoTramiteSelect = document.getElementById('tipo_tramite');
    
    if (tipoTramiteSelect) {
        tipoTramiteSelect.innerHTML = '<option value="">Cargando...</option>';
        
        fetch(`/api/tipos-tramite/${productoId}`)
            .then(response => response.json())
            .then(function(data) {
                tipoTramiteSelect.innerHTML = '<option value="">-- SELECCIONE TIPO DE TRÁMITE --</option>';
                data.forEach(function(tipo) {
                    var option = document.createElement('option');
                    option.value = tipo.id;
                    option.text = tipo.nombre;
                    tipoTramiteSelect.appendChild(option);
                });
                // Actualizar los campos al cargar los tipos
                toggleCamposTramiteNuevo();
            })
            .catch(function(error) {
                console.error("Error al cargar tipos de trámite:", error);
                tipoTramiteSelect.innerHTML = '<option value="">Error al cargar</option>';
            });
    }
}

// Función para cargar formas farmacéuticas
function cargarFormasFarmaceuticas(productoId) {
    console.log("Cargando formas farmacéuticas para producto:", productoId);
    var formaSelect = document.getElementById('forma_farmaceutica');
    
    if (formaSelect) {
        formaSelect.innerHTML = '<option value="">Cargando...</option>';
        
        fetch(`/api/formas-farmaceuticas/${productoId}`)
            .then(response => response.json())
            .then(function(data) {
                formaSelect.innerHTML = '<option value="">-- SELECCIONE FORMA --</option>';
                data.forEach(function(forma) {
                    var option = document.createElement('option');
                    option.value = forma.id;
                    option.text = forma.nombre;
                    formaSelect.appendChild(option);
                });
            })
            .catch(function(error) {
                console.error("Error al cargar formas farmacéuticas:", error);
                formaSelect.innerHTML = '<option value="">Error al cargar</option>';
            });
    }
}

// Función para cargar subtipos de trámite
function cargarSubtiposTramite(productoId, tipoTramiteId) {
    console.log("Cargando subtipos para producto:", productoId, "y tipo:", tipoTramiteId);
    var subtipoSelect = document.getElementById('subtipo_tramite');
    
    if (subtipoSelect) {
        subtipoSelect.innerHTML = '<option value="">Cargando...</option>';
        
        fetch(`/api/subtipos-tramite/${productoId}/${tipoTramiteId}`)
            .then(response => response.json())
            .then(function(data) {
                subtipoSelect.innerHTML = '<option value="">-- SELECCIONE SUBTIPO --</option>';
                data.forEach(function(subtipo) {
                    var option = document.createElement('option');
                    option.value = subtipo.id;
                    option.text = subtipo.nombre;
                    subtipoSelect.appendChild(option);
                });
            })
            .catch(function(error) {
                console.error("Error al cargar subtipos:", error);
                subtipoSelect.innerHTML = '<option value="">Error al cargar</option>';
            });
    }
}
</script>
@endsection