{{-- resources/views/tramites/edicion/asignador/estados/estado-4.blade.php --}}
{{-- Vista para el estado 4 del rol Asignador - EN REVISIÓN --}}

<div class="estado-tramite estado-4">
    {{-- Alerta informativa del estado --}}
    <div class="alert alert-info">
        <i class="fas fa-info-circle"></i> Este trámite está <strong>EN REVISIÓN</strong>. Solo puede modificar el estado del trámite.
        @if($tramite->usuario_responsable)
            <br><strong>Responsable:</strong> {{ strtoupper($tramite->usuario_responsable->name) }}
        @endif
    </div>

    {{-- Selector editable de estado --}}
    <div class="row mt-3">
        <div class="col-md-4">
            <label for="estado_tramite_id" class="form-label">ESTADO TRÁMITE</label>
            <select name="estado_tramite_id" id="estado_tramite_id" class="form-control">
                <option value="4" {{ $tramite->estado_tramite_id == 4 ? 'selected' : '' }}>EN REVISIÓN</option>
                <option value="5" {{ $tramite->estado_tramite_id == 5 ? 'selected' : '' }}>APROBADO</option>
                <option value="3" {{ $tramite->estado_tramite_id == 3 ? 'selected' : '' }}>DEVUELTO</option>
                <option value="10" {{ $tramite->estado_tramite_id == 10 ? 'selected' : '' }}>CANCELADO</option>
            </select>
        </div>
    </div>

    {{-- Partials visibles solo lectura (excepto observaciones) --}}
    @include('tramites.partials.base-fields')
    @include('tramites.partials.registro-fields')
    @include('tramites.partials.detalle-fields')
    @include('tramites.partials.ticket-fields')
    @include('tramites.partials.asignacion-fields')
    @include('tramites.partials.observaciones')
</div>

@push('after-scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const form = document.getElementById('formTramite');
        const campos = form.querySelectorAll('input:not([type="hidden"]):not(#estado_tramite_id), select:not(#estado_tramite_id), textarea');

        campos.forEach(campo => {
            if (campo.name !== 'observaciones') {
                campo.classList.add('campo-bloqueado');
                campo.setAttribute('readonly', 'readonly');
                campo.setAttribute('tabindex', '-1');

                if (campo.tagName === 'SELECT') {
                    campo.setAttribute('disabled', 'disabled');
                }
            }
        });

        // Habilitar observaciones
        const observaciones = document.getElementById('observaciones');
        if (observaciones) {
            observaciones.classList.remove('campo-bloqueado');
            observaciones.removeAttribute('readonly');
            observaciones.removeAttribute('tabindex');
            observaciones.style.backgroundColor = '#ffffff';
            observaciones.style.opacity = '1';
            observaciones.style.cursor = 'text';
        }

        // Validación de confirmación al cambiar estado
        const estadoSelect = document.getElementById('estado_tramite_id');
        if (estadoSelect) {
            estadoSelect.addEventListener('change', function () {
                const nuevoEstado = this.value;
                let mensaje = '';

                switch (nuevoEstado) {
                    case '5':
                        mensaje = '¿Está seguro que desea APROBAR este trámite?';
                        break;
                    case '3':
                        mensaje = '¿Está seguro que desea DEVOLVER este trámite? Se cambiará a estado INICIADO.';
                        break;
                    case '10':
                        mensaje = '¿Está seguro que desea CANCELAR este trámite? Se cambiará a estado FINALIZADO.';
                        break;
                    case '4':
                        return; // No mostrar confirmación si se mantiene igual
                }

                if (mensaje && !confirm(mensaje)) {
                    this.value = '4';
                }
            });
        }
    });
</script>
@endpush