@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="page-header">
                <h1><i class="fas fa-chart-line me-3"></i>Dashboard Financiero</h1>
            </div>
        </div>
    </div>

    <!-- Resumen de métricas -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card bg-primary text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h5 class="card-title">Deudas Pendientes</h5>
                            <h3 class="mb-0">${{ number_format($totalDeudas, 2) }}</h3>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-exclamation-triangle fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-3">
            <div class="card bg-success text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h5 class="card-title">Pagos del Mes</h5>
                            <h3 class="mb-0">${{ number_format($pagosMes, 2) }}</h3>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-dollar-sign fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-3">
            <div class="card bg-info text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h5 class="card-title">Ingresos Totales</h5>
                            <h3 class="mb-0">${{ number_format($ingresosTotales, 2) }}</h3>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-chart-line fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Gráficos y reportes -->
    <div class="row">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h5><i class="fas fa-chart-bar me-2"></i>Evolución de Ingresos (Últimos 6 meses)</h5>
                </div>
                <div class="card-body">
                    <canvas id="ingresosEgresosChart" width="400" height="200"></canvas>
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h5><i class="fas fa-chart-pie me-2"></i>Métodos de Pago</h5>
                </div>
                <div class="card-body">
                    <canvas id="metodosPagoChart" width="300" height="300"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Acciones rápidas -->
    <div class="row mt-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5><i class="fas fa-bolt me-2"></i>Acciones Rápidas</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3">
                            <a href="{{ route('pagos.create') }}" class="btn btn-success btn-lg w-100 mb-2">
                                <i class="fas fa-plus me-2"></i>Registrar Pago
                            </a>
                        </div>
                        <div class="col-md-3">
                            <a href="{{ route('deudas.index') }}" class="btn btn-warning btn-lg w-100 mb-2">
                                <i class="fas fa-list me-2"></i>Ver Deudas
                            </a>
                        </div>
                        <div class="col-md-3">
                            <a href="{{ route('finanzas.promesas-pago') }}" class="btn btn-info btn-lg w-100 mb-2">
                                <i class="fas fa-handshake me-2"></i>Promesas
                            </a>
                        </div>
                        <div class="col-md-3">
                            <a href="{{ route('finanzas.estadisticas') }}" class="btn btn-primary btn-lg w-100 mb-2">
                                <i class="fas fa-chart-pie me-2"></i>Estadísticas
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // Gráfico de Ingresos
    const ctx1 = document.getElementById('ingresosEgresosChart').getContext('2d');
    const ingresosChart = new Chart(ctx1, {
        type: 'line',
        data: {
            labels: {!! json_encode($meses) !!},
            datasets: [{
                label: 'Ingresos',
                data: {!! json_encode($datosIngresos) !!},
                borderColor: '#28a745',
                backgroundColor: 'rgba(40, 167, 69, 0.1)',
                tension: 0.4
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        callback: function(value) {
                            return '$' + value.toLocaleString();
                        }
                    }
                }
            }
        }
    });

    // Gráfico de Métodos de Pago
    const ctx2 = document.getElementById('metodosPagoChart').getContext('2d');
    const metodosPagoChart = new Chart(ctx2, {
        type: 'doughnut',
        data: {
            labels: {!! json_encode($metodosPagoLabels) !!},
            datasets: [{
                data: {!! json_encode($metodosPagoData) !!},
                backgroundColor: [
                    '#007bff',
                    '#28a745',
                    '#ffc107',
                    '#dc3545',
                    '#6f42c1',
                    '#20c997'
                ]
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false
        }
    });
</script>
@endpush
@endsection