@extends('backend.layouts.app')

{{-- Estilos críticos en el head para evitar FOUC --}}
@push('before-styles')
    @vite(['resources/sass/tramite-form.scss'])
@endpush

@push('after-styles')
<style>
.page-title-icon {
    background: linear-gradient(135deg, #1565C0, #42A5F5);
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    box-shadow: 0 4px 12px rgba(21, 101, 192, 0.3);
    opacity: 0;
    animation: fadeInScale 0.6s ease forwards;
}

.page-title-icon i {
    font-size: 24px;
}

.page-title-content {
    flex: 1;
    opacity: 0;
    animation: fadeInRight 0.6s ease 0.2s forwards;
}

.page-main-title {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: #1565C0;
    background: linear-gradient(135deg, #1565C0, #1976D2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.page-subtitle {
    margin: 0;
    font-size: 14px;
    color: #666;
    font-weight: 400;
    margin-top: 2px;
}

.c-subheader {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    border-bottom: 1px solid #dee2e6 !important;
    padding: 20px 15px !important;
    min-height: auto !important;
}

.page-title-icon:hover {
    transform: scale(1.05);
    transition: transform 0.2s ease;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (max-width: 768px) {
    .page-main-title {
        font-size: 24px;
    }
    
    .page-title-icon {
        width: 50px;
        height: 50px;
        margin-right: 12px;
    }
    
    .page-title-icon i {
        font-size: 20px;
    }
    
    .page-subtitle {
        font-size: 12px;
    }
}
</style>
@endpush

{{-- Título personalizado mejorado --}}
@section('page-title')
    <div class="d-flex align-items-center">
        <div class="page-title-icon">
            <i class="fas fa-plus-circle"></i>
        </div>
        <div class="page-title-content">
            <h1 class="page-main-title">Crear Nuevo Trámite</h1>
            <p class="page-subtitle">Registra un nuevo trámite en el sistema</p>
        </div>
    </div>
@endsection

@section('content')
<!-- Enlaces a los nuevos estilos y scripts -->
@vite(['resources/sass/tramite-form.scss'])

<!-- Estilos para el dropdown de búsqueda de productos -->
<style>
.search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    max-height: 300px;
    overflow-y: auto;
}

.dropdown-item {
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.2s ease;
    background: white;
}

.dropdown-item:last-child {
    border-bottom: none;
    border-radius: 0 0 8px 8px;
}

.dropdown-item:hover {
    background: #f8f9fa;
    border-left: 4px solid #007bff;
    padding-left: 12px;
}

.dropdown-item.loading {
    background: #f8f9fa;
    color: #6c757d;
    text-align: center;
    font-style: italic;
    cursor: default;
}

.dropdown-item.no-results {
    background: #fff3cd;
    color: #856404;
    text-align: center;
    cursor: default;
}

.dropdown-item.error {
    background: #f8d7da;
    color: #721c24;
    text-align: center;
    cursor: default;
}

.product-name {
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
    font-size: 14px;
}

.product-details {
    font-size: 12px;
    color: #6c757d;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.product-details span {
    background: #e9ecef;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
}

.product-details .expediente {
    background: #d1ecf1;
    color: #0c5460;
}

.product-details .ingrediente {
    background: #d4edda;
    color: #155724;
}

.product-details .forma {
    background: #fff3cd;
    color: #856404;
}

.product-details .concentracion {
    background: #e2e3e5;
    color: #383d41;
}

/* Estilo para el campo de búsqueda cuando tiene producto seleccionado */
.producto-seleccionado {
    background: #d4edda !important;
    border-color: #28a745 !important;
    color: #155724 !important;
    font-weight: bold !important;
    padding-right: 45px !important; /* Espacio para el botón de limpiar */
}

/* Botón de limpiar mejorado */
#clear-product-btn {
    background: white;
    border: 1px solid #dc3545;
    color: #dc3545;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 50%;
    font-size: 12px;
}

#clear-product-btn:hover {
    background: #dc3545;
    color: white;
}
</style>

<div class="tramite-form-container">
    @if ($errors->any())
        <div class="alert alert-danger">
            <h6><i class="fas fa-exclamation-triangle"></i> Por favor corrija los siguientes errores:</h6>
            <ul class="mb-0">
                @foreach($errors->all() as $error)
                   <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form id="tramite-form" action="{{ route('tramites.store') }}" method="POST" onsubmit="prepareFormSubmission()">
        @csrf



        <!-- SECCIÓN 1: INFORMACIÓN BÁSICA DEL TRÁMITE -->
        <div class="form-section">
            <h3 class="section-title">
                <i class="fas fa-clipboard-list"></i>
                Información Básica del Trámite
            </h3>
            
            <div class="row">
                <div class="col-lg-6 col-md-6">
                    <div class="form-field" id="field-producto">
                        <label for="producto_id" class="required">TIPO DE PRODUCTO</label>
                        <select name="producto_id" id="producto_id" class="form-control" required>
                            <option value="">-- SELECCIONE TIPO DE PRODUCTO --</option>
                            @foreach($tiposProductos ?? [] as $tipoProducto)
                                <option value="{{ $tipoProducto->id }}" {{ old('producto_id') == $tipoProducto->id ? 'selected' : '' }}>
                                    {{ $tipoProducto->nombre }}
                                </option>
                            @endforeach
                        </select>
                        <small class="form-help">Seleccione el tipo de producto que será objeto del trámite</small>
                    </div>
                </div>

                <div class="col-lg-6 col-md-6">
                    <div class="form-field" id="field-country">
                        <label for="country_id" class="required">PAÍS DESTINO</label>
                        <select name="country_id" id="country_id" class="form-control" required>
                            <option value="">-- SELECCIONE PAÍS DESTINO --</option>
                            @foreach($countries ?? [] as $country)
                                <option value="{{ $country->id }}" {{ old('country_id') == $country->id ? 'selected' : '' }}>
                                    {{ $country->nombre }}
                                </option>
                            @endforeach
                        </select>
                        <small class="form-help">Seleccione el país destino del trámite</small>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-6 col-md-6">
                    <div class="form-field" id="field-tipotramite">
                        <label for="tipo_tramite" class="required">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>
                        <small class="form-help">El tipo de trámite se cargará según el producto seleccionado</small>
                    </div>
                </div>

                <div class="col-lg-6 col-md-6">
                    <div class="form-field" 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>
                        <small class="form-help">Opcional: especificación adicional del trámite</small>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-6 col-md-6">
                    <div class="form-field" id="field-nombreproducto">
                        <label for="nombre_producto" class="required">NOMBRE DEL PRODUCTO</label>
                        
                        <!-- Campo de texto para productos NUEVOS -->
                        <input type="text" name="nombre_producto" id="nombre_producto" 
                               class="form-control texto-normalizado" 
                               value="{{ old('nombre_producto') }}" 
                               placeholder="Ingrese el nombre comercial del producto"
                               required
                               data-original-name="nombre_producto"
                               style="display: block;">
                        
                        <!-- Campo de búsqueda para productos EXISTENTES (inicialmente oculto) -->
                        <div id="producto-search-container" style="display: none;">
                            <div class="search-input-container" style="position: relative;">
                                <input type="text" id="producto_busqueda" 
                                       class="form-control" 
                                       placeholder="Buscar producto existente..."
                                       autocomplete="off">
                                <div id="productos_dropdown" class="search-dropdown" style="display: none; z-index: 10000;"></div>
                                <button type="button" id="clear-product-btn" class="btn btn-sm" 
                                        style="display: none; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); z-index: 10;"
                                        onclick="clearProductSelection()"
                                        title="Limpiar selección">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                            <input type="hidden" name="producto_especifico_id" id="producto_especifico_id" value="">
                        </div>
                        

                        

                        
                        <small class="form-help" id="nombre-help-new">Nombre comercial o denominación del producto</small>
                        <small class="form-help" id="nombre-help-existing" style="display: none;">Busque y seleccione un producto existente de la base de datos</small>
                    </div>
                </div>
            </div>


        </div>

        <!-- SECCIÓN 2: DETALLES TÉCNICOS -->
        <div class="form-section">
            <h3 class="section-title">
                <i class="fas fa-flask"></i>
                Detalles Técnicos del Producto
            </h3>
            
            <div class="row">
                <div class="col-lg-6 col-md-6">
                    <div class="form-field" id="field-marca">
                        <label for="marca">MARCA</label>
                        <input type="text" name="marca" id="marca" 
                               class="form-control texto-normalizado" 
                               value="{{ old('marca') }}" 
                               placeholder="Ingrese la marca del producto">
                        <small class="form-help">Marca comercial del producto</small>
                    </div>
                </div>

                <div class="col-lg-6 col-md-6">
                    <div class="form-field" id="field-unidad-negocio">
                        <label for="unidad_de_negocio">UNIDAD DE NEGOCIO</label>
                        <input type="text" name="unidad_de_negocio" id="unidad_de_negocio" 
                               class="form-control texto-normalizado" 
                               value="{{ old('unidad_de_negocio') }}" 
                               placeholder="Ingrese la unidad de negocio">
                        <small class="form-help">Unidad de negocio responsable</small>
                    </div>
                </div>
            </div>
            
            <div class="row">
                <div class="col-lg-6 col-md-6">
                    <div class="form-field" 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') }}"
                               placeholder="Ej: Paracetamol, Ibuprofeno">
                        <small class="form-help">Principio activo principal del producto</small>
                    </div>
                </div>

                <div class="col-lg-6 col-md-6">
                    <div class="form-field" 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>
                        <small class="form-help">Forma de presentación del producto</small>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-6 col-md-6">
                    <div class="form-field" id="field-concentracion">
                        <label for="concentracion">CONCENTRACIÓN</label>
                        <input type="text" name="concentracion" id="concentracion" 
                               class="form-control texto-normalizado" 
                               value="{{ old('concentracion') }}"
                               placeholder="Ej: 500mg, 10mg/ml">
                        <small class="form-help">Concentración del principio activo</small>
                    </div>
                </div>

                <div class="col-lg-6 col-md-6">
                    <div class="form-field conditional-field" id="field-expediente">
                        <label for="expediente">EXPEDIENTE <span class="text-danger">*</span></label>
                        <input type="text" name="expediente" id="expediente" 
                               class="form-control texto-normalizado" 
                               value="{{ old('expediente') }}"
                               placeholder="Número de expediente"
                               required>
                        <small class="form-help">Número de expediente asignado (obligatorio)</small>
                    </div>
                </div>
            </div>
        </div>

        <!-- SECCIÓN 4: ASIGNACIÓN Y RESPONSABLES -->
        <div class="form-section">
            <h3 class="section-title">
                <i class="fas fa-users"></i>
                Asignación y Responsables
            </h3>
            
            <div class="row">
                <div class="col-lg-6 col-md-6">
                    <div class="form-field conditional-field" 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>
                        <small class="form-help">Usuario encargado de gestionar el trámite</small>
                    </div>
                </div>

                <div class="col-lg-6 col-md-6">

                </div>
            </div>
        </div>

        <!-- SECCIÓN 5: FECHAS Y GESTIÓN (Condicional) -->
        <div class="form-section" id="fechas-gestion-section" style="display: none;">
            <h3 class="section-title">
                <i class="fas fa-calendar-alt"></i>
                Fechas y Gestión del Trámite
            </h3>
            
            <div class="row">
                <div class="col-lg-4 col-md-6">
                    <div class="form-field" id="field-fechaplaneada">
                        <label for="fecha_planeada_de_entrega_del_dossier">FECHA PLANEADA DE ENTREGA DEL DOSSIER</label>
                        <input type="date" name="fecha_planeada_de_entrega_del_dossier" id="fecha_planeada_de_entrega_del_dossier" 
                               class="form-control" 
                               min="{{ date('Y-m-d') }}" 
                               value="{{ old('fecha_planeada_de_entrega_del_dossier') }}">
                        <small class="form-help">Fecha estimada de finalización</small>
                    </div>
                </div>

                <div class="col-lg-4 col-md-6">
                    <div class="form-field" id="field-fechamaxradicacion">
                        <label for="fecha_maxima_de_radicacion">FECHA MÁXIMA RADICACIÓN DOSSIER</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') }}">
                        <small class="form-help">Fecha límite para radicación</small>
                    </div>
                </div>

                <div class="col-lg-4 col-md-6">
                    <div class="form-field" id="field-cargalaboral">
                        <label for="carga_laboral_en_horas">CARGA LABORAL (HORAS)</label>
                        <input type="number" name="carga_laboral_en_horas" id="carga_laboral_en_horas" 
                               class="form-control" 
                               min="0" max="999" step="0.5"
                               value="{{ old('carga_laboral_en_horas') }}"
                               placeholder="0">
                        <small class="form-help">Estimación de horas de trabajo requeridas</small>
                    </div>
                </div>
            </div>
        </div>



        <!-- ACCIONES DEL FORMULARIO -->
        <div class="form-actions">
            <div class="btn-group-left">
                <button type="button" class="btn btn-outline" onclick="window.history.back()">
                    <i class="fas fa-arrow-left"></i>
                    Volver
                </button>
                <button type="button" class="btn btn-secondary" onclick="resetForm()">
                    <i class="fas fa-undo"></i>
                    Limpiar
                </button>
            </div>
            
            <div class="btn-group-right">
                <a href="{{ route('tramites.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 Trámite
                </button>
            </div>
        </div>
    </form>
</div>

    @stack('before-scripts')
    @vite(['resources/js/tramite-form.js'])
    @stack('after-scripts')

<script>
console.log('DEBUG: Script de tramites/create.blade.php cargado');

// Funciones adicionales para compatibilidad
function resetForm() {
    if (confirm('¿Está seguro de que desea limpiar todos los campos del formulario?')) {
        document.getElementById('tramite-form').reset();
        
        // Limpiar localStorage
        localStorage.removeItem('tramite_form_draft');
        
        // Resetear selects dependientes
        document.getElementById('tipo_tramite').innerHTML = '<option value="">-- SELECCIONE TIPO DE TRÁMITE --</option>';
        document.getElementById('subtipo_tramite').innerHTML = '<option value="">-- SELECCIONE SUBTIPO --</option>';
        document.getElementById('forma_farmaceutica').innerHTML = '<option value="">-- SELECCIONE FORMA --</option>';
        
        // Mostrar todos los campos
        document.querySelectorAll('.conditional-field').forEach(field => {
            field.classList.remove('hidden-field');
        });

        // Ocultar sección de fechas
        document.getElementById('fechas-gestion-section').style.display = 'none';
    }
}

// Control de visibilidad de la sección de fechas
document.getElementById('usuario_responsable_id').addEventListener('change', function() {
    const fechasSection = document.getElementById('fechas-gestion-section');
    
    if (this.value) {
        fechasSection.style.display = 'block';
    } else {
        fechasSection.style.display = 'none';
        
        // Limpiar campos de fechas cuando no hay usuario asignado
        document.getElementById('fecha_planeada_de_entrega_del_dossier').value = '';
        document.getElementById('fecha_maxima_de_radicacion').value = '';
        document.getElementById('carga_laboral_en_horas').value = '';
    }
});

// Mejorar accesibilidad con navegación por teclado
document.addEventListener('keydown', function(e) {
    // Alt + S para guardar
    if (e.altKey && e.key === 's') {
        e.preventDefault();
        document.getElementById('tramite-form').submit();
    }
    
    // Escape para cancelar
    if (e.key === 'Escape') {
        const cancelBtn = document.querySelector('a[href*="tramites.index"]');
        if (cancelBtn && confirm('¿Desea cancelar y salir del formulario?')) {
            window.location.href = cancelBtn.href;
        }
    }
});

// Confirmar antes de salir si hay cambios sin guardar
let formChanged = false;
document.getElementById('tramite-form').addEventListener('change', function() {
    formChanged = true;
});

window.addEventListener('beforeunload', function(e) {
    if (formChanged) {
        e.preventDefault();
        e.returnValue = '¿Está seguro de que desea salir? Los cambios no guardados se perderán.';
    }
});

// Marcar formulario como enviado al hacer submit
document.getElementById('tramite-form').addEventListener('submit', function() {
    formChanged = false;
});

// Marcar opciones originales del select al cargar la página
document.addEventListener('DOMContentLoaded', function() {
    console.log('DEBUG: DOMContentLoaded ejecutado');
    const formaSelect = document.getElementById('forma_farmaceutica');
    if (formaSelect) {
        Array.from(formaSelect.options).forEach(option => {
            option.setAttribute('data-original', 'true');
        });
    }
    
    // Verificar si hay un tipo de trámite seleccionado al cargar la página
    const tipoTramiteSelect = document.getElementById('tipo_tramite');
    if (tipoTramiteSelect && tipoTramiteSelect.value) {
        const tipoTramiteId = parseInt(tipoTramiteSelect.value);
        if (tiposNuevos.includes(tipoTramiteId)) {
            // Si es tipo NUEVO, habilitar campos técnicos
            habilitarCamposTecnicosParaNuevo();
        }
    }
});

// ========================================
// LÓGICA CONDICIONAL PARA NOMBRE DEL PRODUCTO
// ========================================

// IDs de tipos de trámite que corresponden a productos NUEVOS
const tiposNuevos = [7, 8, 9, 10];
let productosCache = [];

// (NO AGREGAR NINGÚN LISTENER SOBRE producto_id AQUÍ)
// El manejo de cambio de producto_id lo hace TramiteFormManager en tramite-form.js

// Escuchar cambios en el tipo de trámite
document.getElementById('tipo_tramite').addEventListener('change', function() {

    const tipoTramiteId = parseInt(this.value);
    const nombreProductoInput = document.getElementById('nombre_producto');
    const productoSearchContainer = document.getElementById('producto-search-container');
    const helpNew = document.getElementById('nombre-help-new');
    const helpExisting = document.getElementById('nombre-help-existing');

    if (tiposNuevos.includes(tipoTramiteId)) {
        // Es tipo NUEVO: mostrar campo de texto normal
        console.log('DEBUG: Mostrando campo de texto (NUEVO)');
        nombreProductoInput.style.display = 'block';
        nombreProductoInput.required = true;
        nombreProductoInput.value = ''; // Limpiar valor anterior
        productoSearchContainer.style.display = 'none';
        helpNew.style.display = 'block';
        helpExisting.style.display = 'none';
        
        // Limpiar búsqueda de productos y HABILITAR campos técnicos para productos nuevos
        clearProductSelection();
        habilitarCamposTecnicosParaNuevo();
    } else if (tipoTramiteId) {
        // Es tipo EXISTENTE: mostrar campo de búsqueda
        console.log('DEBUG: Mostrando campo de búsqueda (EXISTENTE)');
        nombreProductoInput.style.display = 'none';
        nombreProductoInput.required = false;
        nombreProductoInput.value = ''; // Limpiar valor del campo de texto
        nombreProductoInput.removeAttribute('required'); // Remover atributo required por completo
        productoSearchContainer.style.display = 'block';
        helpNew.style.display = 'none';
        helpExisting.style.display = 'block';
        
        // Limpiar cualquier búsqueda anterior
        clearProductSelection();
    } else {
        // No hay tipo seleccionado: mostrar campo normal
        nombreProductoInput.style.display = 'block';
        nombreProductoInput.required = true;
        productoSearchContainer.style.display = 'none';
        helpNew.style.display = 'block';
        helpExisting.style.display = 'none';
        
        // Habilitar campos técnicos cuando no hay tipo seleccionado
        habilitarCamposTecnicosParaNuevo();
    }

});

// Búsqueda de productos (búsqueda en tiempo real)
let searchTimeout;
document.getElementById('producto_busqueda').addEventListener('input', function() {
    const query = this.value.trim();
    const dropdown = document.getElementById('productos_dropdown');
    const productoSeleccionadoId = document.getElementById('producto_especifico_id').value;
    
    // Limpiar timeout anterior
    clearTimeout(searchTimeout);
    
    // Si hay un producto seleccionado y el usuario está escribiendo algo diferente, limpiar selección
    if (productoSeleccionadoId && query.length > 0) {
        limpiarCamposTecnicos();
        document.getElementById('producto_especifico_id').value = '';
        document.getElementById('clear-product-btn').style.display = 'none';
        this.classList.remove('producto-seleccionado');
    }
    
    if (query.length < 2) {
        dropdown.style.display = 'none';
        return;
    }
    
    // Mostrar indicador de carga
    dropdown.innerHTML = '<div class="dropdown-item loading">Buscando productos...</div>';
    dropdown.style.display = 'block';
    
    // Búsqueda con delay para evitar demasiadas peticiones
    searchTimeout = setTimeout(async () => {
        try {
            const response = await fetch(`/api/productos/buscar?q=${encodeURIComponent(query)}&limit=10`);
            if (!response.ok) throw new Error('Error en la búsqueda');
            
            const productos = await response.json();
            
            if (productos.length === 0) {
                dropdown.innerHTML = '<div class="dropdown-item no-results">No se encontraron productos</div>';
                return;
            }
            
            // Mostrar resultados
            dropdown.innerHTML = productos.map(producto => `
                <div class="dropdown-item" onclick="seleccionarProducto(${JSON.stringify(producto).replace(/"/g, '&quot;')})">
                    <div class="product-name">${producto.nombre}</div>
                    <div class="product-details ml-1">
                        <span class="expediente">Exp: ${producto.expediente}</span>
                    </div>
                </div>
            `).join('');
            
        } catch (error) {
            console.error('Error buscando productos:', error);
            dropdown.innerHTML = '<div class="dropdown-item error">Error al buscar productos</div>';
        }
    }, 300); // Delay de 300ms
});

// Función para seleccionar un producto
function seleccionarProducto(productoData) {
    // Parsear datos del producto si es string
    const producto = typeof productoData === 'string' ? JSON.parse(productoData) : productoData;
    
    // Ocultar dropdown
    document.getElementById('productos_dropdown').style.display = 'none';
    
    // Mostrar el nombre del producto en el campo de búsqueda con estilo especial
    const searchField = document.getElementById('producto_busqueda');
    searchField.value = producto.nombre;
    searchField.classList.add('producto-seleccionado');
    
    // Llenar campos ocultos
    document.getElementById('producto_especifico_id').value = producto.id;
    
    // Mostrar botón de limpiar
    document.getElementById('clear-product-btn').style.display = 'block';
    
    // AUTO-COMPLETAR Y BLOQUEAR CAMPOS TÉCNICOS
    completarCamposTecnicos(producto);
}

// Función para completar los campos técnicos del producto existente
function completarCamposTecnicos(producto) {
    // Campos a completar y bloquear
    const campos = [
        { id: 'marca', valor: producto.marca || '' },
        { id: 'unidad_de_negocio', valor: producto.unidad_de_negocio || '' },
        { id: 'ingrediente_principal', valor: producto.ingrediente_principal || '' },
        { id: 'concentracion', valor: producto.concentracion || '' },
        { id: 'expediente', valor: producto.expediente || '' }
    ];
    
    // Llenar y bloquear campos de texto
    campos.forEach(campo => {
        const elemento = document.getElementById(campo.id);
        if (elemento) {
            elemento.value = campo.valor;
            elemento.readOnly = true;
            elemento.style.backgroundColor = '#f8f9fa';
            elemento.style.color = '#6c757d';
        }
    });
    
    // Manejar el select de forma farmacéutica
    const formaSelect = document.getElementById('forma_farmaceutica');
    if (formaSelect && producto.forma_farmaceutica_id) {
        // Buscar la opción correcta y seleccionarla
        const opciones = formaSelect.options;
        for (let i = 0; i < opciones.length; i++) {
            if (opciones[i].value == producto.forma_farmaceutica_id) {
                formaSelect.selectedIndex = i;
                break;
            }
        }
        
        // Si no existe la opción, crearla
        if (formaSelect.value != producto.forma_farmaceutica_id && producto.forma_farmaceutica) {
            const nuevaOpcion = document.createElement('option');
            nuevaOpcion.value = producto.forma_farmaceutica_id;
            nuevaOpcion.textContent = producto.forma_farmaceutica;
            nuevaOpcion.selected = true;
            formaSelect.appendChild(nuevaOpcion);
        }
        
        // Bloquear el select
        formaSelect.disabled = true;
        formaSelect.style.backgroundColor = '#f8f9fa';
        formaSelect.style.color = '#6c757d';
    }
}

// Función para limpiar selección de producto
function clearProductSelection() {
    document.getElementById('producto_especifico_id').value = '';
    
    // Limpiar y restaurar campo de búsqueda
    const searchField = document.getElementById('producto_busqueda');
    searchField.value = '';
    searchField.classList.remove('producto-seleccionado');
    searchField.placeholder = 'Buscar producto existente...';
    
    // Ocultar elementos
    document.getElementById('productos_dropdown').style.display = 'none';
    document.getElementById('clear-product-btn').style.display = 'none';
    
    // Limpiar campos técnicos bloqueados
    limpiarCamposTecnicos();
}

// Función para limpiar y desbloquear campos técnicos
function limpiarCamposTecnicos() {
    // Campos a limpiar y desbloquear
    const camposIds = ['marca', 'unidad_de_negocio', 'ingrediente_principal', 'concentracion', 'expediente'];
    
    camposIds.forEach(campoId => {
        const elemento = document.getElementById(campoId);
        if (elemento) {
            // Solo limpiar si estaba bloqueado (para no borrar datos ingresados manualmente)
            if (elemento.readOnly) {
                elemento.value = '';
                elemento.readOnly = false;
                elemento.style.backgroundColor = '';
                elemento.style.color = '';
            }
        }
    });
    
    // Manejar el select de forma farmacéutica
    const formaSelect = document.getElementById('forma_farmaceutica');
    if (formaSelect && formaSelect.disabled) {
        formaSelect.disabled = false;
        formaSelect.style.backgroundColor = '';
        formaSelect.style.color = '';
        formaSelect.selectedIndex = 0; // Volver a la opción default
        
        // Remover opciones agregadas dinámicamente (que tengan un value específico)
        const opciones = Array.from(formaSelect.options);
        opciones.forEach(opcion => {
            if (opcion.value && !opcion.hasAttribute('data-original')) {
                opcion.remove();
            }
        });
    }
}

// Evento para permitir nueva búsqueda al hacer clic en campo con producto seleccionado
document.getElementById('producto_busqueda').addEventListener('focus', function() {
    if (document.getElementById('producto_especifico_id').value) {
        // Si hay un producto seleccionado, preparar para nueva búsqueda
        this.classList.remove('producto-seleccionado');
        this.select(); // Seleccionar todo el texto para facilitar reemplazo
    }
});

// Cerrar dropdown al hacer click fuera
document.addEventListener('click', function(e) {
    const searchContainer = document.getElementById('producto-search-container');
    if (!searchContainer.contains(e.target)) {
        document.getElementById('productos_dropdown').style.display = 'none';
    }
});

// Función para preparar el formulario antes del envío
function prepareFormSubmission() {
    const productoEspecificoId = document.getElementById('producto_especifico_id').value;
    const nombreProductoField = document.getElementById('nombre_producto');
    
    // DEBUG: Log de los valores antes de procesar
    console.log('prepareFormSubmission - DEBUG:', {
        productoEspecificoId: productoEspecificoId,
        nombreProductoValue: nombreProductoField ? nombreProductoField.value : 'NULL',
        nombreProductoName: nombreProductoField ? nombreProductoField.name : 'NULL'
    });
    
    // Si hay un producto específico seleccionado, asegurar que nombre_producto esté vacío
    if (productoEspecificoId && nombreProductoField) {
        console.log('Limpiando nombre_producto porque hay producto específico seleccionado');
        nombreProductoField.value = '';
        nombreProductoField.name = ''; // Limpiar el name attribute
        nombreProductoField.removeAttribute('name'); // Evitar que se envíe este campo
        nombreProductoField.disabled = true; // Deshabilitar para evitar envío
    } else if (nombreProductoField && !productoEspecificoId) {
        // Restaurar el campo si no hay producto específico
        console.log('Restaurando nombre_producto porque NO hay producto específico seleccionado');
        nombreProductoField.name = 'nombre_producto';
        nombreProductoField.disabled = false;
    } else {
        console.log('Caso no manejado en prepareFormSubmission');
    }
    
    // Validar formulario antes de enviar
    if (window.tramiteFormManager && typeof window.tramiteFormManager.validateAllFields === 'function') {
        const isValid = window.tramiteFormManager.validateAllFields();
        if (!isValid) {
            console.log('Validación falló, no enviando formulario');
            return false; // Prevenir envío
        }
    }
    
    return true; // Continuar con el envío
}

// Función para habilitar campos técnicos para productos nuevos
function habilitarCamposTecnicosParaNuevo() {
    const camposIds = ['marca', 'unidad_de_negocio', 'ingrediente_principal', 'concentracion', 'expediente'];
    
    camposIds.forEach(campoId => {
        const elemento = document.getElementById(campoId);
        if (elemento) {
            // Asegurar que los campos estén habilitados para productos nuevos
            elemento.readOnly = false;
            elemento.disabled = false;
            elemento.style.backgroundColor = '';
            elemento.style.color = '';
            elemento.style.cursor = '';
        }
    });
    
    // Manejar el select de forma farmacéutica
    const formaSelect = document.getElementById('forma_farmaceutica');
    if (formaSelect) {
        formaSelect.disabled = false;
        formaSelect.style.backgroundColor = '';
        formaSelect.style.color = '';
        formaSelect.style.cursor = '';
    }
}

// Inicialización cuando se carga la página
// (Eliminado: inicialización duplicada de TramiteFormManager, ya lo hace el JS compilado)
</script>

@endsection