@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="alert alert-success">
                <h4><i class="fas fa-check-circle me-2"></i>¡El menú de Finanzas funciona correctamente!</h4>
                <p>Las rutas están configuradas y el dropdown debería estar funcionando.</p>
            </div>
            
            <div class="card">
                <div class="card-header">
                    <h5>Test de Enlaces del Menú</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h6>Enlaces principales:</h6>
                            <ul class="list-unstyled">
                                <li><a href="{{ route('deudas.index') }}" class="btn btn-outline-warning btn-sm mb-1">📋 Pagos pendientes</a></li>
                                <li><a href="{{ route('pagos.index') }}" class="btn btn-outline-info btn-sm mb-1">📊 Reporte de Pagos</a></li>
                            </ul>
                        </div>
                        <div class="col-md-6">
                            <h6>Enlaces nuevos de Finanzas:</h6>
                            <ul class="list-unstyled">
                                <li><a href="{{ route('finanzas.promesas-pago') }}" class="btn btn-outline-primary btn-sm mb-1">🤝 Promesas de Pago</a></li>
                                <li><a href="{{ route('finanzas.otros-ingresos') }}" class="btn btn-outline-success btn-sm mb-1">➕ Otros Ingresos</a></li>
                                <li><a href="{{ route('finanzas.gastos') }}" class="btn btn-outline-danger btn-sm mb-1">➖ Gastos</a></li>
                                <li><a href="{{ route('finanzas.estadisticas') }}" class="btn btn-outline-info btn-sm mb-1">📈 Estadísticas</a></li>
                                <li><a href="{{ route('finanzas.contabilidad') }}" class="btn btn-outline-secondary btn-sm mb-1">🧮 Contabilidad</a></li>
                                <li><a href="{{ route('finanzas.formas-pago') }}" class="btn btn-outline-primary btn-sm mb-1">💳 Formas de Pagos</a></li>
                                <li><a href="{{ route('finanzas.lista-pagos') }}" class="btn btn-outline-dark btn-sm mb-1">📋 Lista Pagos</a></li>
                                <li><a href="{{ route('finanzas.registrar-excel') }}" class="btn btn-outline-success btn-sm mb-1">📄 Registrar desde Excel</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="alert alert-info mt-3">
                <h6>Instrucciones para verificar el dropdown:</h6>
                <ol>
                    <li>Haz clic en "Finanzas" en el menú lateral izquierdo</li>
                    <li>El menú debería desplegarse hacia abajo mostrando todas las opciones</li>
                    <li>Si no funciona, verifica la consola del navegador (F12) para errores de JavaScript</li>
                </ol>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    console.log('✅ Bootstrap cargado:', typeof bootstrap !== 'undefined');
    console.log('✅ jQuery cargado:', typeof $ !== 'undefined');
    
    const dropdownToggle = document.getElementById('finanzasDropdown');
    if (dropdownToggle) {
        console.log('✅ Elemento dropdown encontrado');
        
        dropdownToggle.addEventListener('click', function(e) {
            console.log('🖱️ Click en dropdown detectado');
        });
        
        // Verificar si Bootstrap dropdown está inicializado
        const dropdown = bootstrap.Dropdown.getOrCreateInstance(dropdownToggle);
        if (dropdown) {
            console.log('✅ Bootstrap Dropdown inicializado correctamente');
        }
    } else {
        console.log('❌ Elemento dropdown NO encontrado');
    }
});
</script>
@endsection