@extends('layouts.app')

@section('title', 'Flujo de Caja')

@push('styles')
<link rel="stylesheet" href="{{ asset('css/flujo-caja.css') }}">
@endpush

@section('content')
<div class="flujo-caja-container">
    <!-- Header -->
    <div class="header-flujo">
        <h1><i class="bi bi-cash-stack"></i> Flujo de Caja</h1>
        <p class="mb-0">Gestión y control de ingresos y egresos</p>
    </div>

    <!-- Filtros -->
    <div class="card-filtros-modern">
        <div class="filtros-titulo" data-bs-toggle="collapse" data-bs-target="#filtrosCollapse" aria-expanded="false" aria-controls="filtrosCollapse" style="cursor: pointer;">
            <i class="bi bi-funnel-fill"></i>
            <span>Filtro de Búsqueda</span>
            <i class="bi bi-chevron-down ms-auto" id="filtrosChevron"></i>
        </div>
        <div class="collapse" id="filtrosCollapse">
            <form action="{{ route('flujo-caja.index') }}" method="GET">
                <div class="filtros-grid-simple">
                    <div class="filtro-item">
                        <label class="filtro-label"><i class="bi bi-calendar-event"></i> Desde</label>
                        <input type="date" name="fecha_inicio" class="filtro-input" value="{{ $fechaInicio }}">
                    </div>
                    <div class="filtro-item">
                        <label class="filtro-label"><i class="bi bi-calendar-check"></i> Hasta</label>
                        <input type="date" name="fecha_fin" class="filtro-input" value="{{ $fechaFin }}">
                    </div>
                    <div class="filtro-item-btn">
                        <button type="submit" class="btn-filtrar-modern">
                            <i class="bi bi-search"></i>
                            <span>Buscar</span>
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Resumen de totales -->
    <div class="row g-3 mb-4">
        <!-- Fila 1: Principales (Balance, Ingresos, Egresos) -->
        <div class="col-6 col-md-4 col-lg-4">
            <div class="card-resumen" style="background: linear-gradient(135deg, #374151, #1f2937); border: 3px solid {{ $balanceDisponible >= 0 ? '#10b981' : '#ef4444' }};">
                <div class="resumen-icon" style="background: {{ $balanceDisponible >= 0 ? '#10b981' : '#ef4444' }};"><i class="bi bi-calculator"></i></div>
                <div class="resumen-info">
                    <div class="resumen-label">Balance Disponible</div>
                    <div class="resumen-value" style="color: {{ $balanceDisponible >= 0 ? '#10b981' : '#ef4444' }};">${{ number_format($balanceDisponible, 0, ',', '.') }}</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-4 col-lg-4">
            <div class="card-resumen ingreso">
                <div class="resumen-icon"><i class="bi bi-arrow-down-circle"></i></div>
                <div class="resumen-info">
                    <div class="resumen-label">Ingresos Totales</div>
                    <div class="resumen-value">${{ number_format($resumenIngresos['total_ingresos'], 0, ',', '.') }}</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-4 col-lg-4">
            <div class="card-resumen" style="background: linear-gradient(135deg, #374151, #1f2937); border: 3px solid #ef4444;">
                <div class="resumen-icon" style="background: #ef4444;"><i class="bi bi-arrow-up-circle"></i></div>
                <div class="resumen-info">
                    <div class="resumen-label">Egresos Totales</div>
                    <div class="resumen-value" style="color: #ef4444;">${{ number_format($resumenEgresos['total_egresos'], 0, ',', '.') }}</div>
                </div>
            </div>
        </div>

        <!-- Fila 2: Detalles (Interés, Ganancias) -->
        <div class="col-6 col-md-4 col-lg-4">
            <div class="card-resumen interes">
                <div class="resumen-icon"><i class="bi bi-percent"></i></div>
                <div class="resumen-info">
                    <div class="resumen-label">Interés Total</div>
                    <div class="resumen-value">${{ number_format($resumenIngresos['total_interes'], 0, ',', '.') }}</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-4 col-lg-4">
            <div class="card-resumen sebas">
                <div class="resumen-icon"><i class="bi bi-person-check"></i></div>
                <div class="resumen-info">
                    <div class="resumen-label">Ganancia Sebas</div>
                    <div class="resumen-value">${{ number_format($resumenIngresos['total_ganancia_sebas'], 0, ',', '.') }}</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-4 col-lg-4">
            <div class="card-resumen frank">
                <div class="resumen-icon"><i class="bi bi-person-check-fill"></i></div>
                <div class="resumen-info">
                    <div class="resumen-label">Ganancia Frank</div>
                    <div class="resumen-value">${{ number_format($resumenIngresos['total_ganancia_frank'], 0, ',', '.') }}</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Vista de cards para desktop -->
    <div class="d-none d-lg-block">
        <!-- SECCIÓN INGRESOS -->
        <div style="margin-bottom: 2rem;">
            <h2 style="font-size: 1.5rem; font-weight: 700; color: #10b981; margin-bottom: 1rem;">
                <i class="bi bi-arrow-down-circle-fill"></i> INGRESOS
            </h2>

            <!-- Mensaje de scroll -->
            <div class="scroll-hint">
                <i class="bi bi-arrow-down-circle"></i>
                <span>Desliza para ver todos los ingresos</span>
            </div>

            <div class="movimientos-scroll-container">
                <div class="row g-3" id="ingresosDesktopContainer">
                    @forelse($ingresos as $movimiento)
            <div class="col-12 col-md-6 col-lg-4">
                <div class="card-custom" style="height: 100%;">
                    <div class="card-header-custom d-flex justify-content-between align-items-center">
                        <div class="flex-grow-1">
                            <div style="font-weight: 600; font-size: 0.95rem;">{{ $movimiento->prestamo->cliente_nombre_completo }}</div>
                            <div style="font-size: 0.75rem; opacity: 0.9; margin-top: 0.25rem;">
                                <i class="bi bi-calendar3"></i> {{ $movimiento->fecha->format('d/m/Y') }}
                            </div>
                        </div>
                        <div class="ms-2">
                            @if($movimiento->tipo == 'pago_cuota')
                                @if(str_contains($movimiento->observaciones, 'Renovación'))
                                    <span class="badge" style="background: linear-gradient(135deg, #3b82f6, #2563eb); color: white; font-size: 0.8rem;">
                                        <i class="bi bi-arrow-repeat"></i> Pago-Renovación
                                    </span>
                                @else
                                    <span class="badge" style="background: linear-gradient(135deg, #10b981, #059669); color: white; font-size: 0.8rem;">
                                        <i class="bi bi-wallet2"></i> Pago
                                    </span>
                                @endif
                            @elseif($movimiento->tipo == 'renovacion')
                                <span class="badge" style="background: linear-gradient(135deg, #3b82f6, #2563eb); color: white; font-size: 0.8rem;">
                                    <i class="bi bi-arrow-repeat"></i> Renovación
                                </span>
                            @endif
                        </div>
                    </div>

                    <div class="card-body p-3">
                        @if($movimiento->cuota)
                            <div class="mb-2">
                                <span class="badge bg-secondary" style="font-size: 0.7rem;">Cuota #{{ $movimiento->cuota->numero_cuota }}</span>
                            </div>
                        @endif
                        <div class="row g-0">
                            <div class="col-6 p-2 border-libreta">
                                <div class="text-muted" style="font-size: 0.85rem; font-weight: 700;">Ingreso</div>
                                <div class="fw-bold" style="color: #10b981; font-size: 0.95rem;">${{ number_format($movimiento->ingreso_completo, 0, ',', '.') }}</div>
                            </div>
                            <div class="col-6 p-2 border-libreta border-left-mobile">
                                <div class="text-muted" style="font-size: 0.85rem; font-weight: 700;">Capital</div>
                                <div class="fw-bold" style="color: #1a1a1a; font-size: 0.95rem;">${{ number_format($movimiento->capital, 0, ',', '.') }}</div>
                            </div>
                            <div class="col-6 p-2 border-libreta">
                                <div class="text-muted" style="font-size: 0.85rem; font-weight: 700;">Interés</div>
                                <div class="fw-bold" style="color: #d4af37; font-size: 0.95rem;">${{ number_format($movimiento->interes, 0, ',', '.') }}</div>
                            </div>
                            <div class="col-6 p-2 border-libreta border-left-mobile">
                                <div class="text-muted" style="font-size: 0.85rem; font-weight: 700;">Gan. Sebas</div>
                                <div class="fw-bold" style="color: #3b82f6; font-size: 0.95rem;">${{ number_format($movimiento->ganancia_sebas, 0, ',', '.') }}</div>
                            </div>
                            <div class="col-6 p-2 border-libreta">
                                <div class="text-muted" style="font-size: 0.85rem; font-weight: 700;">Gan. Frank</div>
                                <div class="fw-bold" style="color: #8b5cf6; font-size: 0.95rem;">${{ number_format($movimiento->ganancia_frank, 0, ',', '.') }}</div>
                            </div>
                            <div class="col-6 p-2 border-libreta border-left-mobile d-flex align-items-center">
                                @if($movimiento->prestamo && $movimiento->cuota)
                                    <a href="{{ route('prestamos.show', $movimiento->prestamo) }}?highlight_cuota={{ $movimiento->cuota_id }}"
                                       class="btn btn-sm w-100"
                                       style="background: linear-gradient(135deg, #d4af37, #b8942c); color: #1a1a1a; border-radius: 8px; font-weight: 600; padding: 0.4rem 0.6rem; font-size: 0.75rem;">
                                        <i class="bi bi-eye"></i> Ver Detalle
                                    </a>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @empty
            <div class="col-12" id="emptyStateDesktop">
                <div class="text-center py-5">
                    <i class="bi bi-inbox" style="font-size: 3rem; color: #9ca3af;"></i>
                    <p class="text-muted mt-2">No hay movimientos en este período</p>
                </div>
            </div>
                @endforelse
                </div>
            </div>

            @if($ingresos->count() > 0)
            <div class="pagination-custom" style="margin-top: 1.5rem;">
                <div class="pagination-info">
                    Mostrando <span id="ingresosCountDesktop">{{ $ingresos->count() }}</span> de <span id="ingresosTotalDesktop">{{ $totalIngresos }}</span> ingresos
                </div>
                <div class="pagination-buttons">
                    <button class="btn-pagination" id="loadMoreIngresosDesktop" style="width: auto; padding: 0.5rem 1.5rem;">
                        <i class="bi bi-arrow-down-circle"></i> Cargar más ingresos
                    </button>
                </div>
            </div>
            @endif
        </div>

        <!-- SECCIÓN EGRESOS -->
        <div style="margin-top: 3rem;">
            <h2 style="font-size: 1.5rem; font-weight: 700; color: #ef4444; margin-bottom: 1rem;">
                <i class="bi bi-arrow-up-circle-fill"></i> EGRESOS
            </h2>

            <!-- Mensaje de scroll -->
            <div class="scroll-hint">
                <i class="bi bi-arrow-up-circle"></i>
                <span>Desliza para ver todos los egresos</span>
            </div>

            <div class="movimientos-scroll-container">
                <div class="row g-3" id="egresosDesktopContainer">
                    @forelse($egresos as $egreso)
                    <div class="col-12 col-md-6 col-lg-4">
                        <div class="card-custom" style="height: 100%;">
                            <div class="card-header-custom d-flex justify-content-between align-items-center">
                                <div class="flex-grow-1">
                                    <div style="font-weight: 600; font-size: 0.95rem;">{{ $egreso->prestamo->cliente_nombre_completo }}</div>
                                    <div style="font-size: 0.75rem; opacity: 0.9; margin-top: 0.25rem;">
                                        <i class="bi bi-calendar3"></i> {{ $egreso->fecha->format('d/m/Y') }}
                                    </div>
                                </div>
                                <div class="ms-2">
                                    <span class="badge" style="background: linear-gradient(135deg, #ef4444, #dc2626); color: white; font-size: 0.8rem;">
                                        <i class="bi bi-cash-coin"></i> Desembolso
                                    </span>
                                </div>
                            </div>

                            <div class="card-body p-3">
                                <div class="row g-0">
                                    <div class="col-12 p-2 border-libreta">
                                        <div class="text-muted" style="font-size: 0.85rem; font-weight: 700;">Codeudor</div>
                                        <div class="fw-bold" style="color: #1a1a1a; font-size: 0.95rem;">{{ $egreso->prestamo->codeudor_nombre_completo }}</div>
                                    </div>
                                    <div class="col-6 p-2 border-libreta">
                                        <div class="text-muted" style="font-size: 0.85rem; font-weight: 700;">Valor Préstamo</div>
                                        <div class="fw-bold" style="color: #ef4444; font-size: 0.95rem;">${{ number_format($egreso->ingreso_completo, 0, ',', '.') }}</div>
                                    </div>
                                    <div class="col-6 p-2 border-libreta border-left-mobile d-flex align-items-center">
                                        @if($egreso->prestamo)
                                            <a href="{{ route('prestamos.show', $egreso->prestamo) }}"
                                               class="btn btn-sm w-100"
                                               style="background: linear-gradient(135deg, #d4af37, #b8942c); color: #1a1a1a; border-radius: 8px; font-weight: 600; padding: 0.4rem 0.6rem; font-size: 0.75rem;">
                                                <i class="bi bi-eye"></i> Ver Detalle
                                            </a>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @empty
                    <div class="col-12" id="emptyStateEgresosDesktop">
                        <div class="text-center py-5">
                            <i class="bi bi-inbox" style="font-size: 3rem; color: #9ca3af;"></i>
                            <p class="text-muted mt-2">No hay egresos en este período</p>
                        </div>
                    </div>
                    @endforelse
                </div>
            </div>

            @if($egresos->count() > 0)
            <div class="pagination-custom" style="margin-top: 1.5rem;">
                <div class="pagination-info">
                    Mostrando <span id="egresosCountDesktop">{{ $egresos->count() }}</span> de <span id="egresosTotalDesktop">{{ $totalEgresos }}</span> egresos
                </div>
                <div class="pagination-buttons">
                    <button class="btn-pagination" id="loadMoreEgresosDesktop" style="width: auto; padding: 0.5rem 1.5rem;">
                        <i class="bi bi-arrow-up-circle"></i> Cargar más egresos
                    </button>
                </div>
            </div>
            @endif
        </div>

        <!-- Sección de estadísticas -->
        <div class="estadisticas-section" style="margin-top: 2rem;">
            <div class="estadisticas-header">
                <i class="bi bi-bar-chart-line"></i>
                <div>
                    <h3>Análisis Estadístico</h3>
                    <p>Visualiza el rendimiento anual completo</p>
                </div>
            </div>
            <a href="{{ route('flujo-caja.estadisticas') }}" class="btn btn-estadisticas w-100">
                <i class="bi bi-graph-up"></i> Ver Estadísticas Anuales
            </a>
        </div>
    </div>

    <!-- Vista de cards para móvil -->
    <div class="d-lg-none">
        <!-- SECCIÓN INGRESOS -->
        <div style="margin-bottom: 2rem;">
            <h2 style="font-size: 1.25rem; font-weight: 700; color: #10b981; margin-bottom: 1rem;">
                <i class="bi bi-arrow-down-circle-fill"></i> INGRESOS
            </h2>

            <!-- Mensaje de scroll -->
            <div class="scroll-hint">
                <i class="bi bi-arrow-down-circle"></i>
                <span>Desliza para ver todos los ingresos</span>
            </div>

            <div class="movimientos-scroll-container" id="ingresosMobileContainer">
                @forelse($ingresos as $movimiento)
            <div class="card-custom" style="height: 100%; margin-bottom: 1rem;">
                <div class="card-header-custom d-flex justify-content-between align-items-center">
                    <div class="flex-grow-1">
                        <div style="font-weight: 600; font-size: 0.95rem;">{{ $movimiento->prestamo->cliente_nombre_completo }}</div>
                        <div style="font-size: 0.75rem; opacity: 0.9; margin-top: 0.25rem;">
                            <i class="bi bi-calendar3"></i> {{ $movimiento->fecha->format('d/m/Y') }}
                        </div>
                    </div>
                    <div class="ms-2">
                        @if($movimiento->tipo == 'pago_cuota')
                            @if(str_contains($movimiento->observaciones, 'Renovación'))
                                <span class="badge" style="background: linear-gradient(135deg, #3b82f6, #2563eb); color: white; font-size: 0.8rem;">
                                    <i class="bi bi-arrow-repeat"></i> Pago-Renovación
                                </span>
                            @else
                                <span class="badge" style="background: linear-gradient(135deg, #10b981, #059669); color: white; font-size: 0.8rem;">
                                    <i class="bi bi-wallet2"></i> Pago
                                </span>
                            @endif
                        @elseif($movimiento->tipo == 'renovacion')
                            <span class="badge" style="background: linear-gradient(135deg, #3b82f6, #2563eb); color: white; font-size: 0.8rem;">
                                <i class="bi bi-arrow-repeat"></i> Renovación
                            </span>
                        @endif
                    </div>
                </div>

                <div class="card-body p-3">
                    @if($movimiento->cuota)
                        <div class="mb-2">
                            <span class="badge bg-secondary" style="font-size: 0.7rem;">Cuota #{{ $movimiento->cuota->numero_cuota }}</span>
                        </div>
                    @endif
                    <div class="row g-0">
                        <div class="col-6 p-2 border-libreta">
                            <div class="text-muted" style="font-size: 0.85rem; font-weight: 700;">Ingreso</div>
                            <div class="fw-bold" style="color: #10b981; font-size: 0.95rem;">${{ number_format($movimiento->ingreso_completo, 0, ',', '.') }}</div>
                        </div>
                        <div class="col-6 p-2 border-libreta border-left-mobile">
                            <div class="text-muted" style="font-size: 0.85rem; font-weight: 700;">Capital</div>
                            <div class="fw-bold" style="color: #1a1a1a; font-size: 0.95rem;">${{ number_format($movimiento->capital, 0, ',', '.') }}</div>
                        </div>
                        <div class="col-6 p-2 border-libreta">
                            <div class="text-muted" style="font-size: 0.85rem; font-weight: 700;">Interés</div>
                            <div class="fw-bold" style="color: #d4af37; font-size: 0.95rem;">${{ number_format($movimiento->interes, 0, ',', '.') }}</div>
                        </div>
                        <div class="col-6 p-2 border-libreta border-left-mobile">
                            <div class="text-muted" style="font-size: 0.85rem; font-weight: 700;">Gan. Sebas</div>
                            <div class="fw-bold" style="color: #3b82f6; font-size: 0.95rem;">${{ number_format($movimiento->ganancia_sebas, 0, ',', '.') }}</div>
                        </div>
                        <div class="col-6 p-2 border-libreta">
                            <div class="text-muted" style="font-size: 0.85rem; font-weight: 700;">Gan. Frank</div>
                            <div class="fw-bold" style="color: #8b5cf6; font-size: 0.95rem;">${{ number_format($movimiento->ganancia_frank, 0, ',', '.') }}</div>
                        </div>
                        <div class="col-6 p-2 border-libreta border-left-mobile d-flex align-items-center">
                            @if($movimiento->prestamo && $movimiento->cuota)
                                <a href="{{ route('prestamos.show', $movimiento->prestamo) }}?highlight_cuota={{ $movimiento->cuota_id }}"
                                   class="btn btn-sm w-100"
                                   style="background: linear-gradient(135deg, #d4af37, #b8942c); color: #1a1a1a; border-radius: 8px; font-weight: 600; padding: 0.4rem 0.6rem; font-size: 0.75rem;">
                                    <i class="bi bi-eye"></i> Ver Detalle
                                </a>
                            @endif
                        </div>
                    </div>
                </div>
                </div>
                @empty
                <div class="empty-state-mobile" id="emptyStateIngresosMobile">
                    <i class="bi bi-inbox"></i>
                    <p>No hay ingresos en este período</p>
                </div>
                @endforelse
            </div>

            @if($ingresos->count() > 0)
            <div class="pagination-custom-mobile">
                <div class="pagination-info-mobile">
                    Mostrando <span id="ingresosCountMobile">{{ $ingresos->count() }}</span> de <span id="ingresosTotalMobile">{{ $totalIngresos }}</span>
                </div>
                <div class="pagination-buttons-mobile">
                    <button class="btn-pagination-mobile" id="loadMoreIngresosMobile" style="width: auto; padding: 0.5rem 1.5rem;">
                        <i class="bi bi-arrow-down-circle"></i> Cargar más
                    </button>
                </div>
            </div>
            @endif
        </div>

        <!-- SECCIÓN EGRESOS -->
        <div style="margin-top: 2rem;">
            <h2 style="font-size: 1.25rem; font-weight: 700; color: #ef4444; margin-bottom: 1rem;">
                <i class="bi bi-arrow-up-circle-fill"></i> EGRESOS
            </h2>

            <!-- Mensaje de scroll -->
            <div class="scroll-hint">
                <i class="bi bi-arrow-up-circle"></i>
                <span>Desliza para ver todos los egresos</span>
            </div>

            <div class="movimientos-scroll-container" id="egresosMobileContainer">
                @forelse($egresos as $egreso)
                <div class="card-custom" style="height: 100%; margin-bottom: 1rem;">
                    <div class="card-header-custom d-flex justify-content-between align-items-center">
                        <div class="flex-grow-1">
                            <div style="font-weight: 600; font-size: 0.95rem;">{{ $egreso->prestamo->cliente_nombre_completo }}</div>
                            <div style="font-size: 0.75rem; opacity: 0.9; margin-top: 0.25rem;">
                                <i class="bi bi-calendar3"></i> {{ $egreso->fecha->format('d/m/Y') }}
                            </div>
                        </div>
                        <div class="ms-2">
                            <span class="badge" style="background: linear-gradient(135deg, #ef4444, #dc2626); color: white; font-size: 0.8rem;">
                                <i class="bi bi-cash-coin"></i> Desembolso
                            </span>
                        </div>
                    </div>

                    <div class="card-body p-3">
                        <div class="row g-0">
                            <div class="col-12 p-2 border-libreta">
                                <div class="text-muted" style="font-size: 0.85rem; font-weight: 700;">Codeudor</div>
                                <div class="fw-bold" style="color: #1a1a1a; font-size: 0.95rem;">{{ $egreso->prestamo->codeudor_nombre_completo }}</div>
                            </div>
                            <div class="col-6 p-2 border-libreta">
                                <div class="text-muted" style="font-size: 0.85rem; font-weight: 700;">Valor Préstamo</div>
                                <div class="fw-bold" style="color: #ef4444; font-size: 0.95rem;">${{ number_format($egreso->ingreso_completo, 0, ',', '.') }}</div>
                            </div>
                            <div class="col-6 p-2 border-libreta border-left-mobile d-flex align-items-center">
                                @if($egreso->prestamo)
                                    <a href="{{ route('prestamos.show', $egreso->prestamo) }}"
                                       class="btn btn-sm w-100"
                                       style="background: linear-gradient(135deg, #d4af37, #b8942c); color: #1a1a1a; border-radius: 8px; font-weight: 600; padding: 0.4rem 0.6rem; font-size: 0.75rem;">
                                        <i class="bi bi-eye"></i> Ver Detalle
                                    </a>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
                @empty
                <div class="empty-state-mobile" id="emptyStateEgresosMobile">
                    <i class="bi bi-inbox"></i>
                    <p>No hay egresos en este período</p>
                </div>
                @endforelse
            </div>

            @if($egresos->count() > 0)
            <div class="pagination-custom-mobile">
                <div class="pagination-info-mobile">
                    Mostrando <span id="egresosCountMobile">{{ $egresos->count() }}</span> de <span id="egresosTotalMobile">{{ $totalEgresos }}</span>
                </div>
                <div class="pagination-buttons-mobile">
                    <button class="btn-pagination-mobile" id="loadMoreEgresosMobile" style="width: auto; padding: 0.5rem 1.5rem;">
                        <i class="bi bi-arrow-up-circle"></i> Cargar más
                    </button>
                </div>
            </div>
            @endif
        </div>

        <!-- Sección de estadísticas -->
        <div class="estadisticas-section">
            <div class="estadisticas-header">
                <i class="bi bi-bar-chart-line"></i>
                <div>
                    <h3>Análisis Estadístico</h3>
                    <p>Visualiza el rendimiento anual completo</p>
                </div>
            </div>
            <a href="{{ route('flujo-caja.estadisticas') }}" class="btn btn-estadisticas w-100">
                <i class="bi bi-graph-up"></i> Ver Estadísticas Anuales
            </a>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const filtrosCollapse = document.getElementById('filtrosCollapse');
    const filtrosChevron = document.getElementById('filtrosChevron');

    if (filtrosCollapse && filtrosChevron) {
        filtrosCollapse.addEventListener('show.bs.collapse', function() {
            filtrosChevron.classList.remove('bi-chevron-down');
            filtrosChevron.classList.add('bi-chevron-up');
        });

        filtrosCollapse.addEventListener('hide.bs.collapse', function() {
            filtrosChevron.classList.remove('bi-chevron-up');
            filtrosChevron.classList.add('bi-chevron-down');
        });
    }

    // Variables para INGRESOS Desktop
    const loadMoreIngresosDesktop = document.getElementById('loadMoreIngresosDesktop');
    const ingresosDesktopContainer = document.getElementById('ingresosDesktopContainer');
    const ingresosCountDesktopSpan = document.getElementById('ingresosCountDesktop');
    const ingresosTotalDesktop = parseInt(document.getElementById('ingresosTotalDesktop')?.textContent || 0);
    let currentOffsetIngresosDesktop = {{ $ingresos->count() }};
    let isLoadingIngresosDesktop = false;

    // Variables para INGRESOS Mobile
    const loadMoreIngresosMobile = document.getElementById('loadMoreIngresosMobile');
    const ingresosMobileContainer = document.getElementById('ingresosMobileContainer');
    const ingresosCountMobileSpan = document.getElementById('ingresosCountMobile');
    const ingresosTotalMobile = parseInt(document.getElementById('ingresosTotalMobile')?.textContent || 0);
    let currentOffsetIngresosMobile = {{ $ingresos->count() }};
    let isLoadingIngresosMobile = false;

    // Variables para EGRESOS Desktop
    const loadMoreEgresosDesktop = document.getElementById('loadMoreEgresosDesktop');
    const egresosDesktopContainer = document.getElementById('egresosDesktopContainer');
    const egresosCountDesktopSpan = document.getElementById('egresosCountDesktop');
    const egresosTotalDesktop = parseInt(document.getElementById('egresosTotalDesktop')?.textContent || 0);
    let currentOffsetEgresosDesktop = {{ $egresos->count() }};
    let isLoadingEgresosDesktop = false;

    // Variables para EGRESOS Mobile
    const loadMoreEgresosMobile = document.getElementById('loadMoreEgresosMobile');
    const egresosMobileContainer = document.getElementById('egresosMobileContainer');
    const egresosCountMobileSpan = document.getElementById('egresosCountMobile');
    const egresosTotalMobile = parseInt(document.getElementById('egresosTotalMobile')?.textContent || 0);
    let currentOffsetEgresosMobile = {{ $egresos->count() }};
    let isLoadingEgresosMobile = false;

    // Event Listeners para Ingresos
    if (loadMoreIngresosDesktop) {
        if (currentOffsetIngresosDesktop >= ingresosTotalDesktop) {
            loadMoreIngresosDesktop.style.display = 'none';
        }
        loadMoreIngresosDesktop.addEventListener('click', () => loadMore('ingresos', 'desktop'));
    }

    if (loadMoreIngresosMobile) {
        if (currentOffsetIngresosMobile >= ingresosTotalMobile) {
            loadMoreIngresosMobile.style.display = 'none';
        }
        loadMoreIngresosMobile.addEventListener('click', () => loadMore('ingresos', 'mobile'));
    }

    // Event Listeners para Egresos
    if (loadMoreEgresosDesktop) {
        if (currentOffsetEgresosDesktop >= egresosTotalDesktop) {
            loadMoreEgresosDesktop.style.display = 'none';
        }
        loadMoreEgresosDesktop.addEventListener('click', () => loadMore('egresos', 'desktop'));
    }

    if (loadMoreEgresosMobile) {
        if (currentOffsetEgresosMobile >= egresosTotalMobile) {
            loadMoreEgresosMobile.style.display = 'none';
        }
        loadMoreEgresosMobile.addEventListener('click', () => loadMore('egresos', 'mobile'));
    }

    function loadMore(tipo, view) {
        const isDesktop = view === 'desktop';
        const isIngresos = tipo === 'ingresos';

        let loadMoreBtn, container, countSpan, currentOffset, isLoading;

        if (isIngresos && isDesktop) {
            loadMoreBtn = loadMoreIngresosDesktop;
            container = ingresosDesktopContainer;
            countSpan = ingresosCountDesktopSpan;
            currentOffset = currentOffsetIngresosDesktop;
            isLoading = isLoadingIngresosDesktop;
        } else if (isIngresos && !isDesktop) {
            loadMoreBtn = loadMoreIngresosMobile;
            container = ingresosMobileContainer;
            countSpan = ingresosCountMobileSpan;
            currentOffset = currentOffsetIngresosMobile;
            isLoading = isLoadingIngresosMobile;
        } else if (!isIngresos && isDesktop) {
            loadMoreBtn = loadMoreEgresosDesktop;
            container = egresosDesktopContainer;
            countSpan = egresosCountDesktopSpan;
            currentOffset = currentOffsetEgresosDesktop;
            isLoading = isLoadingEgresosDesktop;
        } else {
            loadMoreBtn = loadMoreEgresosMobile;
            container = egresosMobileContainer;
            countSpan = egresosCountMobileSpan;
            currentOffset = currentOffsetEgresosMobile;
            isLoading = isLoadingEgresosMobile;
        }

        if (isLoading) return;

        // Marcar como cargando
        if (isIngresos && isDesktop) isLoadingIngresosDesktop = true;
        else if (isIngresos && !isDesktop) isLoadingIngresosMobile = true;
        else if (!isIngresos && isDesktop) isLoadingEgresosDesktop = true;
        else isLoadingEgresosMobile = true;

        const originalText = loadMoreBtn.innerHTML;
        loadMoreBtn.innerHTML = '<i class="bi bi-hourglass-split"></i> Cargando...';
        loadMoreBtn.disabled = true;

        // Construir URL con filtros
        const urlParams = new URLSearchParams();
        urlParams.append('offset', currentOffset);
        urlParams.append('tipo', isIngresos ? 'pago_cuota' : 'desembolso');

        const fechaInicioInput = document.querySelector('input[name="fecha_inicio"]');
        const fechaFinInput = document.querySelector('input[name="fecha_fin"]');

        if (fechaInicioInput && fechaInicioInput.value) {
            urlParams.append('fecha_inicio', fechaInicioInput.value);
        }
        if (fechaFinInput && fechaFinInput.value) {
            urlParams.append('fecha_fin', fechaFinInput.value);
        }

        fetch('{{ route("flujo-caja.loadMore") }}?' + urlParams.toString())
            .then(response => response.json())
            .then(data => {
                if (data.movimientos && data.movimientos.length > 0) {
                    data.movimientos.forEach(movimiento => {
                        const card = isIngresos
                            ? createIngresoCard(movimiento, isDesktop)
                            : createEgresoCard(movimiento, isDesktop);
                        container.insertAdjacentHTML('beforeend', card);
                    });

                    // Actualizar offset y contador
                    if (isIngresos && isDesktop) {
                        currentOffsetIngresosDesktop += data.movimientos.length;
                        countSpan.textContent = currentOffsetIngresosDesktop;
                        const emptyState = document.getElementById('emptyStateDesktop');
                        if (emptyState) emptyState.remove();
                    } else if (isIngresos && !isDesktop) {
                        currentOffsetIngresosMobile += data.movimientos.length;
                        countSpan.textContent = currentOffsetIngresosMobile;
                        const emptyState = document.getElementById('emptyStateIngresosMobile');
                        if (emptyState) emptyState.remove();
                    } else if (!isIngresos && isDesktop) {
                        currentOffsetEgresosDesktop += data.movimientos.length;
                        countSpan.textContent = currentOffsetEgresosDesktop;
                        const emptyState = document.getElementById('emptyStateEgresosDesktop');
                        if (emptyState) emptyState.remove();
                    } else {
                        currentOffsetEgresosMobile += data.movimientos.length;
                        countSpan.textContent = currentOffsetEgresosMobile;
                        const emptyState = document.getElementById('emptyStateEgresosMobile');
                        if (emptyState) emptyState.remove();
                    }

                    if (!data.hasMore) {
                        loadMoreBtn.style.display = 'none';
                    }
                } else {
                    loadMoreBtn.style.display = 'none';
                }

                loadMoreBtn.innerHTML = originalText;
                loadMoreBtn.disabled = false;

                // Desmarcar como cargando
                if (isIngresos && isDesktop) isLoadingIngresosDesktop = false;
                else if (isIngresos && !isDesktop) isLoadingIngresosMobile = false;
                else if (!isIngresos && isDesktop) isLoadingEgresosDesktop = false;
                else isLoadingEgresosMobile = false;
            })
            .catch(error => {
                console.error('Error:', error);
                loadMoreBtn.innerHTML = originalText;
                loadMoreBtn.disabled = false;

                // Desmarcar como cargando
                if (isIngresos && isDesktop) isLoadingIngresosDesktop = false;
                else if (isIngresos && !isDesktop) isLoadingIngresosMobile = false;
                else if (!isIngresos && isDesktop) isLoadingEgresosDesktop = false;
                else isLoadingEgresosMobile = false;
            });
    }

    function createIngresoCard(movimiento, isDesktop = false) {
        const verDetalleBtn = movimiento.prestamo_id && movimiento.cuota_id ?
            `<div class="col-6 p-2 border-libreta border-left-mobile d-flex align-items-center">
                <a href="/prestamos/${movimiento.prestamo_id}?highlight_cuota=${movimiento.cuota_id}"
                   class="btn btn-sm w-100"
                   style="background: linear-gradient(135deg, #d4af37, #b8942c); color: #1a1a1a; border-radius: 8px; font-weight: 600; padding: 0.4rem 0.6rem; font-size: 0.75rem;">
                    <i class="bi bi-eye"></i> Ver Detalle
                </a>
             </div>` : '';

        const badgeHtml = movimiento.es_renovacion
            ? `<span class="badge" style="background: linear-gradient(135deg, #3b82f6, #2563eb); color: white; font-size: 0.8rem;">
                   <i class="bi bi-arrow-repeat"></i> Pago-Renovación
               </span>`
            : `<span class="badge" style="background: linear-gradient(135deg, #10b981, #059669); color: white; font-size: 0.8rem;">
                   <i class="bi bi-wallet2"></i> Pago
               </span>`;

        const cardContent = `
            <div class="card-custom" style="height: 100%; ${!isDesktop ? 'margin-bottom: 1rem;' : ''}">
                <div class="card-header-custom d-flex justify-content-between align-items-center">
                    <div class="flex-grow-1">
                        <div style="font-weight: 600; font-size: 0.95rem;">${movimiento.cliente_nombre}</div>
                        <div style="font-size: 0.75rem; opacity: 0.9; margin-top: 0.25rem;">
                            <i class="bi bi-calendar3"></i> ${movimiento.fecha}
                        </div>
                    </div>
                    <div class="ms-2">
                        ${badgeHtml}
                    </div>
                </div>
                <div class="card-body p-3">
                    ${movimiento.cuota_numero !== '-' ? `<div class="mb-2"><span class="badge bg-secondary" style="font-size: 0.7rem;">Cuota #${movimiento.cuota_numero}</span></div>` : ''}
                    <div class="row g-0">
                        <div class="col-6 p-2 border-libreta">
                            <div class="text-muted" style="font-size: 0.85rem; font-weight: 700;">Ingreso</div>
                            <div class="fw-bold" style="color: #10b981; font-size: 0.95rem;">$${movimiento.ingreso_completo}</div>
                        </div>
                        <div class="col-6 p-2 border-libreta border-left-mobile">
                            <div class="text-muted" style="font-size: 0.85rem; font-weight: 700;">Capital</div>
                            <div class="fw-bold" style="color: #1a1a1a; font-size: 0.95rem;">$${movimiento.capital}</div>
                        </div>
                        <div class="col-6 p-2 border-libreta">
                            <div class="text-muted" style="font-size: 0.85rem; font-weight: 700;">Interés</div>
                            <div class="fw-bold" style="color: #d4af37; font-size: 0.95rem;">$${movimiento.interes}</div>
                        </div>
                        <div class="col-6 p-2 border-libreta border-left-mobile">
                            <div class="text-muted" style="font-size: 0.85rem; font-weight: 700;">Gan. Sebas</div>
                            <div class="fw-bold" style="color: #3b82f6; font-size: 0.95rem;">$${movimiento.ganancia_sebas}</div>
                        </div>
                        <div class="col-6 p-2 border-libreta">
                            <div class="text-muted" style="font-size: 0.85rem; font-weight: 700;">Gan. Frank</div>
                            <div class="fw-bold" style="color: #8b5cf6; font-size: 0.95rem;">$${movimiento.ganancia_frank}</div>
                        </div>
                        ${verDetalleBtn}
                    </div>
                </div>
            </div>
        `;

        if (isDesktop) {
            return `<div class="col-12 col-md-6 col-lg-4">${cardContent}</div>`;
        }
        return cardContent;
    }

    function createEgresoCard(egreso, isDesktop = false) {
        const verDetalleBtn = egreso.prestamo_id ?
            `<div class="col-6 p-2 border-libreta border-left-mobile d-flex align-items-center">
                <a href="/prestamos/${egreso.prestamo_id}"
                   class="btn btn-sm w-100"
                   style="background: linear-gradient(135deg, #d4af37, #b8942c); color: #1a1a1a; border-radius: 8px; font-weight: 600; padding: 0.4rem 0.6rem; font-size: 0.75rem;">
                    <i class="bi bi-eye"></i> Ver Detalle
                </a>
             </div>` : '';

        const cardContent = `
            <div class="card-custom" style="height: 100%; ${!isDesktop ? 'margin-bottom: 1rem;' : ''}">
                <div class="card-header-custom d-flex justify-content-between align-items-center">
                    <div class="flex-grow-1">
                        <div style="font-weight: 600; font-size: 0.95rem;">${egreso.cliente_nombre}</div>
                        <div style="font-size: 0.75rem; opacity: 0.9; margin-top: 0.25rem;">
                            <i class="bi bi-calendar3"></i> ${egreso.fecha}
                        </div>
                    </div>
                    <div class="ms-2">
                        <span class="badge" style="background: linear-gradient(135deg, #ef4444, #dc2626); color: white; font-size: 0.8rem;">
                            <i class="bi bi-cash-coin"></i> Desembolso
                        </span>
                    </div>
                </div>
                <div class="card-body p-3">
                    <div class="row g-0">
                        <div class="col-12 p-2 border-libreta">
                            <div class="text-muted" style="font-size: 0.85rem; font-weight: 700;">Codeudor</div>
                            <div class="fw-bold" style="color: #1a1a1a; font-size: 0.95rem;">${egreso.codeudor_nombre}</div>
                        </div>
                        <div class="col-6 p-2 border-libreta">
                            <div class="text-muted" style="font-size: 0.85rem; font-weight: 700;">Valor Préstamo</div>
                            <div class="fw-bold" style="color: #ef4444; font-size: 0.95rem;">$${egreso.monto_desembolso}</div>
                        </div>
                        ${verDetalleBtn}
                    </div>
                </div>
            </div>
        `;

        if (isDesktop) {
            return `<div class="col-12 col-md-6 col-lg-4">${cardContent}</div>`;
        }
        return cardContent;
    }
});
</script>
@endpush