@extends('layouts.app')

@section('title', 'Estadísticas - Flujo de Caja')

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

@section('content')
<div class="flujo-caja-container">
    <!-- Botón volver -->
    <div class="mb-3">
        <a href="{{ route('flujo-caja.index') }}" class="btn-volver-estadisticas">
            <i class="bi bi-arrow-left"></i> Volver
        </a>
    </div>

    <!-- Header -->
    <div class="header-flujo">
        <h1><i class="bi bi-graph-up"></i> Estadísticas Anuales</h1>
        <p class="mb-0">Resumen de ingresos y ganancias por mes</p>
    </div>

    <!-- Selector de año -->
    <div class="card-filtros-modern mb-4">
        <div class="filtros-titulo" data-bs-toggle="collapse" data-bs-target="#filtrosEstadisticasCollapse" aria-expanded="false" aria-controls="filtrosEstadisticasCollapse" 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="filtrosEstadisticasChevron"></i>
        </div>
        <div class="collapse" id="filtrosEstadisticasCollapse">
            <form action="{{ route('flujo-caja.estadisticas') }}" method="GET">
                <div class="row g-2 align-items-end">
                    <div class="col-auto">
                        <label class="form-label-custom">Año</label>
                        <select name="anio" class="form-select form-control-custom" onchange="this.form.submit()">
                            @for($year = 2024; $year <= now()->year + 1; $year++)
                                <option value="{{ $year }}" {{ $anio == $year ? 'selected' : '' }}>{{ $year }}</option>
                            @endfor
                        </select>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Totales generales -->
    <div class="totales-historicos-section">
        <div class="totales-header">
            <i class="bi bi-trophy-fill"></i>
            <span>Totales Históricos</span>
        </div>
        <div class="row g-3">
            <div class="col-12 col-md-6 col-lg-4">
                <div class="card-total">
                    <div class="total-icon" style="background: linear-gradient(135deg, #10b981, #059669);">
                        <i class="bi bi-cash-stack"></i>
                    </div>
                    <div class="total-info">
                        <div class="total-label">Total Ingresos</div>
                        <div class="total-value">${{ number_format($totalesGenerales['total_ingresos'], 0, ',', '.') }}</div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <div class="card-total">
                    <div class="total-icon" style="background: linear-gradient(135deg, #3b82f6, #2563eb);">
                        <i class="bi bi-person-check"></i>
                    </div>
                    <div class="total-info">
                        <div class="total-label">Ganancia Sebas</div>
                        <div class="total-value">${{ number_format($totalesGenerales['total_ganancia_sebas'], 0, ',', '.') }}</div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <div class="card-total">
                    <div class="total-icon" style="background: linear-gradient(135deg, #8b5cf6, #7c3aed);">
                        <i class="bi bi-person-check-fill"></i>
                    </div>
                    <div class="total-info">
                        <div class="total-label">Ganancia Frank</div>
                        <div class="total-value">${{ number_format($totalesGenerales['total_ganancia_frank'], 0, ',', '.') }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @php
        $totalAnualIngresos = 0;
        $totalAnualInteres = 0;
        $totalAnualSebas = 0;
        $totalAnualFrank = 0;
        $totalMovimientos = 0;

        foreach($estadisticasMensuales as $mes) {
            $totalAnualIngresos += $mes['total_ingresos'];
            $totalAnualInteres += $mes['total_interes'];
            $totalAnualSebas += $mes['ganancia_sebas'];
            $totalAnualFrank += $mes['ganancia_frank'];
            $totalMovimientos += $mes['cantidad_movimientos'];
        }
    @endphp

    <!-- Tabla mensual para desktop -->
    <div class="card-tabla d-none d-lg-block">
        <div class="card-header-custom">
            <i class="bi bi-calendar3"></i> Resumen Mensual {{ $anio }}
        </div>
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead>
                    <tr>
                        <th>Mes</th>
                        <th class="text-center">Movimientos</th>
                        <th class="text-end">Total Ingresos</th>
                        <th class="text-end">Total Interés</th>
                        <th class="text-end">Ganancia Sebas</th>
                        <th class="text-end">Ganancia Frank</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($estadisticasMensuales as $mes)
                        <tr>
                            <td>
                                <span class="mes-badge">{{ ucfirst($mes['nombre_mes']) }}</span>
                            </td>
                            <td class="text-center">
                                <span class="badge bg-secondary">{{ $mes['cantidad_movimientos'] }}</span>
                            </td>
                            <td class="text-end fw-bold" style="color: #10b981;">
                                ${{ number_format($mes['total_ingresos'], 0, ',', '.') }}
                            </td>
                            <td class="text-end fw-bold" style="color: #d4af37;">
                                ${{ number_format($mes['total_interes'], 0, ',', '.') }}
                            </td>
                            <td class="text-end" style="color: #3b82f6;">
                                ${{ number_format($mes['ganancia_sebas'], 0, ',', '.') }}
                            </td>
                            <td class="text-end" style="color: #8b5cf6;">
                                ${{ number_format($mes['ganancia_frank'], 0, ',', '.') }}
                            </td>
                        </tr>
                    @endforeach

                    <!-- Total anual -->
                    <tr class="table-active fw-bold">
                        <td>TOTAL {{ $anio }}</td>
                        <td class="text-center">
                            <span class="badge bg-dark">{{ $totalMovimientos }}</span>
                        </td>
                        <td class="text-end" style="color: #10b981; font-size: 1.1rem;">
                            ${{ number_format($totalAnualIngresos, 0, ',', '.') }}
                        </td>
                        <td class="text-end" style="color: #d4af37; font-size: 1.1rem;">
                            ${{ number_format($totalAnualInteres, 0, ',', '.') }}
                        </td>
                        <td class="text-end" style="color: #3b82f6; font-size: 1.1rem;">
                            ${{ number_format($totalAnualSebas, 0, ',', '.') }}
                        </td>
                        <td class="text-end" style="color: #8b5cf6; font-size: 1.1rem;">
                            ${{ number_format($totalAnualFrank, 0, ',', '.') }}
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- Cards para móvil -->
    <div class="d-lg-none">
        <div class="card-header-mobile mb-3">
            <i class="bi bi-calendar3"></i> Resumen Mensual {{ $anio }}
        </div>

        @foreach($estadisticasMensuales as $mes)
        <div class="mes-card">
            <div class="mes-card-header">
                <span class="mes-nombre">{{ ucfirst($mes['nombre_mes']) }}</span>
                <span class="badge bg-secondary">{{ $mes['cantidad_movimientos'] }} mov.</span>
            </div>
            <div class="mes-card-body">
                <div class="row g-2">
                    <div class="col-6">
                        <div class="mes-item">
                            <div class="mes-label">Ingresos</div>
                            <div class="mes-value ingreso">${{ number_format($mes['total_ingresos'], 0, ',', '.') }}</div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="mes-item">
                            <div class="mes-label">Interés</div>
                            <div class="mes-value interes">${{ number_format($mes['total_interes'], 0, ',', '.') }}</div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="mes-item">
                            <div class="mes-label">Gan. Sebas</div>
                            <div class="mes-value sebas">${{ number_format($mes['ganancia_sebas'], 0, ',', '.') }}</div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="mes-item">
                            <div class="mes-label">Gan. Frank</div>
                            <div class="mes-value frank">${{ number_format($mes['ganancia_frank'], 0, ',', '.') }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endforeach

        <!-- Total anual card -->
        <div class="total-anual-card">
            <div class="total-anual-header">
                <i class="bi bi-calculator"></i> TOTAL {{ $anio }}
            </div>
            <div class="total-anual-body">
                <div class="row g-2">
                    <div class="col-6">
                        <div class="total-anual-item">
                            <div class="total-anual-label">Total Ingresos</div>
                            <div class="total-anual-value ingreso">${{ number_format($totalAnualIngresos, 0, ',', '.') }}</div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="total-anual-item">
                            <div class="total-anual-label">Total Interés</div>
                            <div class="total-anual-value interes">${{ number_format($totalAnualInteres, 0, ',', '.') }}</div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="total-anual-item">
                            <div class="total-anual-label">Gan. Sebas</div>
                            <div class="total-anual-value sebas">${{ number_format($totalAnualSebas, 0, ',', '.') }}</div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="total-anual-item">
                            <div class="total-anual-label">Gan. Frank</div>
                            <div class="total-anual-value frank">${{ number_format($totalAnualFrank, 0, ',', '.') }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

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

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

        filtrosEstadisticasCollapse.addEventListener('hide.bs.collapse', function() {
            filtrosEstadisticasChevron.classList.remove('bi-chevron-up');
            filtrosEstadisticasChevron.classList.add('bi-chevron-down');
        });
    }
});
</script>
@endpush