@forelse ($notificaciones_usuario as $notificacionUsuario)
    @php
        $datosNotificacion = $notificacionUsuario->datos_notificacion;
        $config = $datosNotificacion
            ? $datosNotificacion->moduloConfig()
            : \App\Notificacion::configuracionVisualModulo();
        $iconoImagen = $datosNotificacion ? $datosNotificacion->iconoModuloImagen() : null;
        $modulo = $datosNotificacion ? $datosNotificacion->moduloLabel() : 'General';
        $generadoPor = $datosNotificacion ? $datosNotificacion->generadoPorNombre() : \App\Notificacion::normalizarNombreGeneradorVisual('Sistema');
        // La campanita conserva el layout y muestra fecha corta sin hora.
        $fecha = $datosNotificacion ? $datosNotificacion->fechaVisual(false) : 'Sin fecha';
        $contenidoHomologado = $datosNotificacion
            ? $datosNotificacion->contenidoVisualHomologado()
            : ['homologado' => false, 'titulo' => '', 'filas' => []];
        $esInformePdfCobranza = $datosNotificacion && $datosNotificacion->esInformePdfCobranza();
        $datosInformePdfCobranza = $esInformePdfCobranza
            && !$contenidoHomologado['homologado']
            ? $datosNotificacion->datosVisualesInformePdfCobranza()
            : null;
        $esSolicitudReemplazoInformeCobranza = $datosNotificacion
            && $datosNotificacion->esSolicitudReemplazoInformeCobranza();
        $datosSolicitudReemplazoInformeCobranza = $esSolicitudReemplazoInformeCobranza
            && !$contenidoHomologado['homologado']
            ? $datosNotificacion->datosVisualesSolicitudReemplazoInformeCobranza()
            : null;
        $esInformeLiberadoCobranza = $datosNotificacion
            && $datosNotificacion->esInformeLiberadoCobranza();
        $datosInformeLiberadoCobranza = $esInformeLiberadoCobranza
            && !$contenidoHomologado['homologado']
            ? $datosNotificacion->datosVisualesInformeLiberadoCobranza()
            : null;
        $esInformePdfFacturacion = $datosNotificacion
            && $datosNotificacion->esInformePdfFacturacion();
        $datosInformePdfFacturacion = $esInformePdfFacturacion
            && !$contenidoHomologado['homologado']
            ? $datosNotificacion->datosVisualesInformePdfFacturacion()
            : null;
        $esBloqueNotificacionesGeneralesLineaPruebas = $datosNotificacion
            && $datosNotificacion->esBloqueNotificacionesGeneralesLineaPruebas();
        $datosNotificacionGeneralLineaPruebas = $esBloqueNotificacionesGeneralesLineaPruebas
            && !$contenidoHomologado['homologado']
            ? $datosNotificacion->datosVisualesNotificacionGeneralLineaPruebas()
            : null;
        $esNotificacionManualAlmacen = $datosNotificacion
            && $datosNotificacion->esNotificacionManualAlmacen();
        $datosNotificacionManualAlmacen = $esNotificacionManualAlmacen
            && !$contenidoHomologado['homologado']
            ? $datosNotificacion->datosVisualesNotificacionManualAlmacen()
            : null;
        $esNotificacionBancos = $datosNotificacion
            && $datosNotificacion->moduloNamespace() === 'bancos';
        $estadoClass = $notificacionUsuario->estaVista()
            ? 'notification-dropdown-card--viewed'
            : 'notification-dropdown-card--pending';
        $requiereAccion = $datosNotificacion
            ? (int) $datosNotificacion->requiere_accion === 1
            : false;
        $limpiarTextoDropdown = function ($texto) {
            $texto = html_entity_decode(strip_tags((string) $texto), ENT_QUOTES, 'UTF-8');
            $texto = preg_replace('/\s+/u', ' ', trim($texto));

            return trim((string) $texto);
        };
        $candidatosMensaje = [];
        $detallesDropdown = [];
        if ($datosNotificacion) {
            $detallesDropdown = $datosNotificacion->detallesAdicionales();
            $candidatosMensaje = [
                isset($detallesDropdown['Mensaje']) ? $limpiarTextoDropdown($detallesDropdown['Mensaje']) : '',
                $limpiarTextoDropdown($datosNotificacion->mensajeVisual()),
                $limpiarTextoDropdown($datosNotificacion->textoPrincipal()),
                $limpiarTextoDropdown($datosNotificacion->titulo),
                $datosNotificacion->datos_tipo_notificacion
                    ? $limpiarTextoDropdown($datosNotificacion->datos_tipo_notificacion->tipo)
                    : '',
                $limpiarTextoDropdown($datosNotificacion->tipoVisual()),
                $limpiarTextoDropdown($datosNotificacion->descripcion),
            ];
        }
        $mensajesGenericos = [
            'alert',
            'system',
            'create',
            'update',
            'delete',
            'restore',
            'notificacion del sistema',
            'notificación del sistema',
        ];
        $mensajePrincipal = 'Notificación no disponible.';
        foreach ($candidatosMensaje as $candidatoMensaje) {
            if ($candidatoMensaje === '') {
                continue;
            }

            $candidatoNormalizado = function_exists('mb_strtolower')
                ? mb_strtolower($candidatoMensaje, 'UTF-8')
                : strtolower($candidatoMensaje);

            if (in_array($candidatoNormalizado, $mensajesGenericos, true)) {
                continue;
            }

            $mensajePrincipal = $candidatoMensaje;
            break;
        }
        $mensajePrincipal = \Illuminate\Support\Str::limit($mensajePrincipal, 100);
    @endphp
    <li class="list-group-item notification-list-item notification-dropdown-item">
        <div class="notification-dropdown-card {{ $estadoClass }}">
            <div class="notification-dropdown-card__icon">
                @if ($iconoImagen)
                    <img src="{{ $iconoImagen }}" alt="{{ $modulo }}" class="notification-dropdown-card__icon-image">
                @else
                    <i class="{{ $datosNotificacion ? $datosNotificacion->iconoModulo() : $config['icon'] }} icon"></i>
                @endif
            </div>

            <div class="notification-dropdown-card__content">
                <div class="notification-dropdown-card__row">
                    <span class="notification-dropdown-card__label">Módulo:</span>
                    <span class="notification-dropdown-card__value">{{ $modulo }}</span>
                </div>

                @if ($esNotificacionBancos)
                    {{-- La campana oculta el contenido bancario sensible. --}}
                    <div class="notification-dropdown-card__row">
                        <span class="notification-dropdown-card__label">Título:</span>
                        <span class="notification-dropdown-card__value">{{ $datosNotificacion->tipoVisual() }}</span>
                    </div>

                    <div class="notification-dropdown-card__row">
                        <span class="notification-dropdown-card__value notification-dropdown-card__value--message">
                            Esta notificación contiene información sensible del módulo Bancos.
                            <br><br>
                            Para consultar el detalle y realizar las acciones correspondientes, ingrese al módulo Bancos.
                        </span>
                    </div>

                    <div class="notification-dropdown-card__row">
                        <span class="notification-dropdown-card__label">Fecha:</span>
                        <span class="notification-dropdown-card__value">{{ $fecha }}</span>
                    </div>

                    <div class="notification-dropdown-card__row">
                        <span class="notification-dropdown-card__label">Estado:</span>
                        <span class="notification-dropdown-card__value">
                            {{ $notificacionUsuario->estaVista() ? 'Visto' : 'Sin ver' }}
                        </span>
                    </div>
                @elseif ($contenidoHomologado['homologado'])
                    {{-- La campana respeta los campos y el orden de la matriz. --}}
                    <div class="notification-dropdown-card__row">
                        <span class="notification-dropdown-card__label">Título:</span>
                        <span class="notification-dropdown-card__value">{{ $contenidoHomologado['titulo'] }}</span>
                    </div>

                    @foreach ($contenidoHomologado['filas'] as $filaHomologada)
                        <div class="notification-dropdown-card__row">
                            <span class="notification-dropdown-card__label">{{ $filaHomologada['label'] }}:</span>
                            @if (!empty($filaHomologada['href']))
                                <a class="notification-dropdown-card__value"
                                    href="{{ $filaHomologada['href'] }}"
                                    @if (!empty($filaHomologada['target']))
                                        target="{{ $filaHomologada['target'] }}"
                                        rel="noopener noreferrer"
                                    @endif>
                                    {{ $filaHomologada['value'] }}
                                </a>
                            @else
                                <span class="notification-dropdown-card__value notification-dropdown-card__value--message">
                                    {{ $filaHomologada['value'] }}
                                </span>
                            @endif
                        </div>
                    @endforeach
                @elseif ($esInformePdfCobranza && $datosInformePdfCobranza)
                    <div class="notification-dropdown-card__row">
                        <span class="notification-dropdown-card__label">Título:</span>
                        <span class="notification-dropdown-card__value">{{ $datosNotificacion->tipoVisual() }}</span>
                    </div>

                    <div class="notification-dropdown-card__row">
                        <span class="notification-dropdown-card__label">No. de informe:</span>
                        @if ($datosInformePdfCobranza['url_pdf'])
                            <a class="notification-dropdown-card__value"
                                href="{{ $datosInformePdfCobranza['url_pdf'] }}"
                                target="_blank"
                                rel="noopener noreferrer">
                                {{ $datosInformePdfCobranza['numero_informe'] }}
                            </a>
                        @else
                            <span class="notification-dropdown-card__value">{{ $datosInformePdfCobranza['numero_informe'] }}</span>
                        @endif
                    </div>

                    <div class="notification-dropdown-card__row">
                        <span class="notification-dropdown-card__label">Generado por:</span>
                        <span class="notification-dropdown-card__value">{{ $generadoPor }}</span>
                    </div>

                    <div class="notification-dropdown-card__row">
                        <span class="notification-dropdown-card__label">Fecha y hora:</span>
                        <span class="notification-dropdown-card__value">{{ $datosInformePdfCobranza['fecha_hora'] }}</span>
                    </div>
                @elseif ($esSolicitudReemplazoInformeCobranza && $datosSolicitudReemplazoInformeCobranza)
                    <div class="notification-dropdown-card__row">
                        <span class="notification-dropdown-card__label">Título:</span>
                        <span class="notification-dropdown-card__value">{{ $datosNotificacion->tipoVisual() }}</span>
                    </div>

                    <div class="notification-dropdown-card__row">
                        <span class="notification-dropdown-card__label">Mensaje:</span>
                        <span class="notification-dropdown-card__value notification-dropdown-card__value--message">
                            {{ $datosNotificacion->mensajeVisual() }}
                        </span>
                    </div>

                    <div class="notification-dropdown-card__row">
                        <span class="notification-dropdown-card__label">No. de informe:</span>
                        <span class="notification-dropdown-card__value">
                            {{ $datosSolicitudReemplazoInformeCobranza['numero_informe'] }}
                        </span>
                    </div>

                    <div class="notification-dropdown-card__row">
                        <span class="notification-dropdown-card__label">Generado por:</span>
                        <span class="notification-dropdown-card__value">{{ $generadoPor }}</span>
                    </div>

                    <div class="notification-dropdown-card__row">
                        <span class="notification-dropdown-card__label">Fecha y hora:</span>
                        <span class="notification-dropdown-card__value">
                            {{ $datosSolicitudReemplazoInformeCobranza['fecha_hora'] }}
                        </span>
                    </div>
                @elseif ($esInformeLiberadoCobranza && $datosInformeLiberadoCobranza)
                    <div class="notification-dropdown-card__row">
                        <span class="notification-dropdown-card__label">Título:</span>
                        <span class="notification-dropdown-card__value">{{ $datosNotificacion->tipoVisual() }}</span>
                    </div>

                    <div class="notification-dropdown-card__row">
                        <span class="notification-dropdown-card__label">Mensaje:</span>
                        <span class="notification-dropdown-card__value notification-dropdown-card__value--message">
                            {{ $datosNotificacion->mensajeVisual() }}
                        </span>
                    </div>

                    <div class="notification-dropdown-card__row">
                        <span class="notification-dropdown-card__label">Generado por:</span>
                        <span class="notification-dropdown-card__value">{{ $generadoPor }}</span>
                    </div>

                    <div class="notification-dropdown-card__row">
                        <span class="notification-dropdown-card__label">Fecha y hora:</span>
                        <span class="notification-dropdown-card__value">
                            {{ $datosInformeLiberadoCobranza['fecha_hora'] }}
                        </span>
                    </div>
                @elseif ($esInformePdfFacturacion && $datosInformePdfFacturacion)
                    <div class="notification-dropdown-card__row">
                        <span class="notification-dropdown-card__label">Título:</span>
                        <span class="notification-dropdown-card__value">{{ $datosNotificacion->tipoVisual() }}</span>
                    </div>

                    <div class="notification-dropdown-card__row">
                        <span class="notification-dropdown-card__label">No. de informe:</span>
                        @if ($datosInformePdfFacturacion['url_pdf'])
                            <a class="notification-dropdown-card__value"
                                href="{{ $datosInformePdfFacturacion['url_pdf'] }}"
                                target="_blank"
                                rel="noopener noreferrer">
                                {{ $datosInformePdfFacturacion['numero_informe'] }}
                            </a>
                        @else
                            <span class="notification-dropdown-card__value">
                                {{ $datosInformePdfFacturacion['numero_informe'] }}
                            </span>
                        @endif
                    </div>

                    <div class="notification-dropdown-card__row">
                        <span class="notification-dropdown-card__label">Generado por:</span>
                        <span class="notification-dropdown-card__value">{{ $generadoPor }}</span>
                    </div>

                    <div class="notification-dropdown-card__row">
                        <span class="notification-dropdown-card__label">Fecha y hora:</span>
                        <span class="notification-dropdown-card__value">
                            {{ $datosInformePdfFacturacion['fecha_hora'] }}
                        </span>
                    </div>
                @elseif ($esNotificacionManualAlmacen && $datosNotificacionManualAlmacen)
                    <div class="notification-dropdown-card__row">
                        <span class="notification-dropdown-card__label">Título:</span>
                        <span class="notification-dropdown-card__value">{{ $datosNotificacion->tipoVisual() }}</span>
                    </div>

                    <div class="notification-dropdown-card__row">
                        <span class="notification-dropdown-card__label">Mensaje:</span>
                        <span class="notification-dropdown-card__value notification-dropdown-card__value--message">
                            {{ $datosNotificacionManualAlmacen['mensaje'] }}
                        </span>
                    </div>

                    <div class="notification-dropdown-card__row">
                        <span class="notification-dropdown-card__label">No. de informe:</span>
                        <span class="notification-dropdown-card__value">
                            {{ $datosNotificacionManualAlmacen['numero_informe'] }}
                        </span>
                    </div>

                    <div class="notification-dropdown-card__row">
                        <span class="notification-dropdown-card__label">Generado por:</span>
                        <span class="notification-dropdown-card__value">{{ $generadoPor }}</span>
                    </div>

                    <div class="notification-dropdown-card__row">
                        <span class="notification-dropdown-card__label">Fecha y hora:</span>
                        <span class="notification-dropdown-card__value">
                            {{ $datosNotificacionManualAlmacen['fecha_hora'] }}
                        </span>
                    </div>
                @elseif ($esBloqueNotificacionesGeneralesLineaPruebas
                    && $datosNotificacionGeneralLineaPruebas)
                    <div class="notification-dropdown-card__row">
                        <span class="notification-dropdown-card__label">Título:</span>
                        <span class="notification-dropdown-card__value">{{ $datosNotificacion->tipoVisual() }}</span>
                    </div>

                    @if ($datosNotificacion->esNotificacionGeneralLineaPruebas()
                        && trim((string) $datosNotificacionGeneralLineaPruebas['mensaje']) !== '')
                        <div class="notification-dropdown-card__row">
                            <span class="notification-dropdown-card__label">Mensaje:</span>
                            <span class="notification-dropdown-card__value notification-dropdown-card__value--message">
                                {{ $datosNotificacionGeneralLineaPruebas['mensaje'] }}
                            </span>
                        </div>
                    @endif

                    <div class="notification-dropdown-card__row">
                        <span class="notification-dropdown-card__label">No. de informe:</span>
                        <span class="notification-dropdown-card__value">
                            {{ $datosNotificacionGeneralLineaPruebas['numero_informe'] }}
                        </span>
                    </div>

                    <div class="notification-dropdown-card__row">
                        <span class="notification-dropdown-card__label">Generado por:</span>
                        <span class="notification-dropdown-card__value">{{ $generadoPor }}</span>
                    </div>

                    <div class="notification-dropdown-card__row">
                        <span class="notification-dropdown-card__label">Fecha y hora:</span>
                        <span class="notification-dropdown-card__value">
                            {{ $datosNotificacionGeneralLineaPruebas['fecha_hora'] }}
                        </span>
                    </div>
                @else
                    <div class="notification-dropdown-card__row">
                        <span class="notification-dropdown-card__label">Mensaje:</span>
                        <span class="notification-dropdown-card__value notification-dropdown-card__value--message">{{ $mensajePrincipal }}</span>
                    </div>

                    @foreach ($detallesDropdown as $labelDetalle => $valorDetalle)
                        @if ($labelDetalle !== 'Mensaje' && trim((string) $valorDetalle) !== '')
                            <div class="notification-dropdown-card__row">
                                @if (strpos((string) $labelDetalle, '__texto_') === 0)
                                    <span class="notification-dropdown-card__value">{{ $valorDetalle }}</span>
                                @else
                                    <span class="notification-dropdown-card__label">{{ $labelDetalle }}:</span>
                                    <span class="notification-dropdown-card__value">{{ $valorDetalle }}</span>
                                @endif
                            </div>
                        @endif
                    @endforeach

                    <div class="notification-dropdown-card__row">
                        <span class="notification-dropdown-card__label">Generado por:</span>
                        <span class="notification-dropdown-card__value">{{ $generadoPor }}</span>
                    </div>

                    <div class="notification-dropdown-card__row">
                        <span class="notification-dropdown-card__label">Fecha:</span>
                        <span class="notification-dropdown-card__value">{{ $fecha }}</span>
                    </div>
                @endif

                <div class="notification-dropdown-card__actions">
                    @if ($datosNotificacion)
                        <a class="btn seatsa-notification-btn show-loader-before-leave notification-dropdown-action"
                            href="{{ route('notificaciones.abrir', ['id' => $notificacionUsuario->id_notificacion_x_usuario]) }}">
                            @if ($esInformePdfCobranza
                                || $esSolicitudReemplazoInformeCobranza
                                || $esInformeLiberadoCobranza
                                || $esInformePdfFacturacion
                                || $esNotificacionManualAlmacen
                                || $esBloqueNotificacionesGeneralesLineaPruebas)
                                Ver detalles
                            @else
                                Ver detalle
                            @endif
                        </a>
                    @endif
                </div>
            </div>
        </div>
    </li>
@empty
    <li class="list-group-item notification-list-item">
        <div class="notification-empty-state">
            No hay notificaciones pendientes.
        </div>
    </li>
@endforelse