{{-- resources/views/tramites/edicion/asignador/estado-2.blade.php --}}
{{-- Vista para el estado 2: NO ASIGNADO --}}

<div class="estado-tramite estado-2">
    @include('tramites.partials.base-fields')
    @include('tramites.partials.detalle-fields')
    @include('tramites.partials.asignacion-fields')
    @include('tramites.partials.observaciones')
</div>

<div class="alert alert-warning">
    <i class="fas fa-exclamation-circle"></i> Este trámite aún no ha sido asignado. Puede modificar los campos necesarios.
</div>

@push('after-scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const estadoActual = document.getElementById('estado_actual')?.value;

        if (estadoActual === '2') {
            const camposPermitidos = [
                'producto_id', 'tipo_tramite_id', 'subtipo_tramite_id', 'nombre_producto',
                'expediente', 'num_registro', 'fecha_vencimiento_registro', 'estado_registro_id',
                'ingrediente_principal', 'forma_farmaceutica_id', 'concentracion', 'asignacion',
                'indicacion', 'via_administracion', 'condicion_de_venta', 'tiempo_de_vida_util',
                'condicion_de_almacenamiento', 'titular', 'importador', 'fabricante', 'acondicionador',
                'fecha_del_ticket', 'ticket', 'usuario_responsable_id', 'fecha_planeada_de_entrega',
                'fecha_maxima_de_radicacion', 'carga_laboral_en_horas', 'observaciones'
            ];

            document.querySelectorAll('#formTramite input, #formTramite select, #formTramite textarea').forEach(campo => {
                const name = campo.getAttribute('name');
                if (!camposPermitidos.includes(name)) {
                    campo.setAttribute('disabled', 'disabled');
                    campo.classList.add('campo-bloqueado');
                }
            });

            // Lógica para desplegables dependientes
            const tipoProductoSelect = document.querySelector('select[name="producto_id"]');
            const tipoTramiteSelect = document.querySelector('select[name="tipo_tramite_id"]');
            const subtipoTramiteSelect = document.querySelector('select[name="subtipo_tramite_id"]');

            function cargarTiposTramite(productoId) {
                fetch(`/api/tipos-tramite/${productoId}`)
                    .then(response => response.json())
                    .then(data => {
                        tipoTramiteSelect.innerHTML = '<option value="">-- Seleccione tipo trámite --</option>';
                        data.forEach(tipo => {
                            tipoTramiteSelect.innerHTML += `<option value="${tipo.id}">${tipo.nombre}</option>`;
                        });
                    });
            }

            function cargarSubtiposTramite(productoId, tipoTramiteId) {
                fetch(`/api/subtipos-tramite/${productoId}/${tipoTramiteId}`)
                    .then(response => response.json())
                    .then(data => {
                        subtipoTramiteSelect.innerHTML = '<option value="">-- Seleccione subtipo --</option>';
                        data.forEach(subtipo => {
                            subtipoTramiteSelect.innerHTML += `<option value="${subtipo.id}">${subtipo.nombre}</option>`;
                        });
                    });
            }

            if (tipoProductoSelect && tipoTramiteSelect && subtipoTramiteSelect) {
                tipoProductoSelect.addEventListener('change', () => {
                    const productoId = tipoProductoSelect.value;
                    cargarTiposTramite(productoId);
                    subtipoTramiteSelect.innerHTML = '<option value="">-- Seleccione subtipo --</option>';
                });

                tipoTramiteSelect.addEventListener('change', () => {
                    const productoId = tipoProductoSelect.value;
                    const tipoTramiteId = tipoTramiteSelect.value;
                    if (productoId && tipoTramiteId) {
                        cargarSubtiposTramite(productoId, tipoTramiteId);
                    }
                });
            }
        }
    });
</script>
@endpush