@extends('layouts.admin')

@section('title', 'Análisis de Ingresos')

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">
            <i class="fas fa-chart-line text-success"></i>
            Análisis de Ingresos
        </h1>
        <div class="d-flex gap-2">
            <button class="btn btn-success btn-sm" onclick="exportarReporte()">
                <i class="fas fa-download"></i> Exportar Reporte
            </button>
            <button class="btn btn-info btn-sm" data-toggle="modal" data-target="#modalComparacion">
                <i class="fas fa-balance-scale"></i> Comparar Períodos
            </button>
            <button class="btn btn-primary btn-sm" onclick="actualizarDatos()">
                <i class="fas fa-sync"></i> Actualizar
            </button>
        </div>
    </div>

    <!-- Filtros de Período -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">
                <i class="fas fa-calendar"></i> Período de Análisis
            </h6>
        </div>
        <div class="card-body">
            <form id="filtrosPeriodo" class="row g-3">
                <div class="col-md-2">
                    <label for="periodo_tipo" class="form-label">Tipo de Período</label>
                    <select class="form-select" id="periodo_tipo" name="periodo_tipo" onchange="cambiarTipoPeriodo()">
                        <option value="personalizado" {{ request('periodo_tipo') == 'personalizado' ? 'selected' : '' }}>Personalizado</option>
                        <option value="hoy" {{ request('periodo_tipo') == 'hoy' ? 'selected' : '' }}>Hoy</option>
                        <option value="semana" {{ request('periodo_tipo') == 'semana' ? 'selected' : '' }}>Esta Semana</option>
                        <option value="mes" {{ request('periodo_tipo') == 'mes' ? 'selected' : '' }}>Este Mes</option>
                        <option value="trimestre" {{ request('periodo_tipo') == 'trimestre' ? 'selected' : '' }}>Este Trimestre</option>
                        <option value="año" {{ request('periodo_tipo') == 'año' ? 'selected' : '' }}>Este Año</option>
                    </select>
                </div>
                <div class="col-md-2" id="fecha_desde_container">
                    <label for="fecha_desde" class="form-label">Fecha Desde</label>
                    <input type="date" class="form-control" id="fecha_desde" name="fecha_desde" value="{{ request('fecha_desde', date('Y-m-01')) }}">
                </div>
                <div class="col-md-2" id="fecha_hasta_container">
                    <label for="fecha_hasta" class="form-label">Fecha Hasta</label>
                    <input type="date" class="form-control" id="fecha_hasta" name="fecha_hasta" value="{{ request('fecha_hasta', date('Y-m-d')) }}">
                </div>
                <div class="col-md-2">
                    <label for="cancha_filtro" class="form-label">Cancha</label>
                    <select class="form-select" id="cancha_filtro" name="cancha_id">
                        <option value="">Todas las Canchas</option>
                        @foreach($canchas ?? [] as $cancha)
                            <option value="{{ $cancha->id }}" {{ request('cancha_id') == $cancha->id ? 'selected' : '' }}>
                                {{ $cancha->nombre }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="tipo_ingreso" class="form-label">Tipo de Ingreso</label>
                    <select class="form-select" id="tipo_ingreso" name="tipo_ingreso">
                        <option value="">Todos</option>
                        <option value="reservas" {{ request('tipo_ingreso') == 'reservas' ? 'selected' : '' }}>Reservas</option>
                        <option value="eventos" {{ request('tipo_ingreso') == 'eventos' ? 'selected' : '' }}>Eventos</option>
                        <option value="membresías" {{ request('tipo_ingreso') == 'membresías' ? 'selected' : '' }}>Membresías</option>
                        <option value="otros" {{ request('tipo_ingreso') == 'otros' ? 'selected' : '' }}>Otros</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">&nbsp;</label>
                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-search"></i> Aplicar
                        </button>
                        <button type="button" class="btn btn-outline-secondary" onclick="limpiarFiltros()">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Métricas Principales -->
    <div class="row mb-4">
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                Ingresos Totales
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ format_currency($metricas['ingresos_totales'] ?? 0, 2) }}</div>
                            @if(isset($metricas['comparacion_ingresos']))
                                <div class="text-xs {{ ($metricas['comparacion_ingresos'] ?? 0) >= 0 ? 'text-success' : 'text-danger' }}">
                                    <i class="fas fa-arrow-{{ ($metricas['comparacion_ingresos'] ?? 0) >= 0 ? 'up' : 'down' }}"></i>
                                    {{ abs($metricas['comparacion_ingresos'] ?? 0) }}% vs período anterior
                                </div>
                            @endif
                            <div class="text-xs {{ ($metricas['variacion_ingresos'] ?? 0) >= 0 ? 'text-success' : 'text-danger' }}">
                                <i class="fas fa-{{ ($metricas['variacion_ingresos'] ?? 0) >= 0 ? 'arrow-up' : 'arrow-down' }}"></i>
                                {{ abs($metricas['variacion_ingresos'] ?? 0) }}% vs período anterior
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-dollar-sign fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                Ingreso Promedio Diario
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ format_currency($metricas['ingreso_promedio_diario'] ?? 0, 2) }}</div>
                            <div class="text-xs text-primary">
                                <i class="fas fa-calendar-day"></i> Basado en {{ $metricas['dias_periodo'] ?? 0 }} días
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-chart-bar fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-info shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                Mejor Día de Ingresos
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ format_currency($metricas['mejor_dia_monto'] ?? 0, 2) }}</div>
                            <div class="text-xs text-info">
                                <i class="fas fa-star"></i> {{ $metricas['mejor_dia_fecha'] ?? 'N/A' }}
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-trophy fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-warning shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                Comisiones Generadas
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ format_currency($metricas['comisiones_totales'] ?? 0, 2) }}</div>
                            <div class="text-xs text-warning">
                                <i class="fas fa-percentage"></i> {{ number_format(($metricas['porcentaje_comision'] ?? 0), 1) }}% del total
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-hand-holding-usd fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Gráficos de Ingresos -->
    <div class="row mb-4">
        <div class="col-xl-8 col-lg-7">
            <div class="card shadow mb-4">
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">Evolución de Ingresos</h6>
                    <div class="dropdown no-arrow">
                        <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown">
                            <i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
                        </a>
                        <div class="dropdown-menu dropdown-menu-right shadow">
                            <a class="dropdown-item" href="#" onclick="cambiarVistaGrafico('diario')">Vista Diaria</a>
                            <a class="dropdown-item" href="#" onclick="cambiarVistaGrafico('semanal')">Vista Semanal</a>
                            <a class="dropdown-item" href="#" onclick="cambiarVistaGrafico('mensual')">Vista Mensual</a>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="chart-area">
                        <canvas id="graficoIngresos"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-4 col-lg-5">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Distribución por Tipo</h6>
                </div>
                <div class="card-body">
                    <div class="chart-pie pt-4 pb-2">
                        <canvas id="graficoTipos"></canvas>
                    </div>
                    <div class="mt-4 text-center small">
                        @foreach($distribucion_tipos ?? [] as $tipo => $datos)
                            <span class="mr-2">
                                <i class="fas fa-circle text-{{ $loop->index == 0 ? 'primary' : ($loop->index == 1 ? 'success' : ($loop->index == 2 ? 'info' : 'warning')) }}"></i>
                                {{ ucfirst($tipo) }}: {{ format_currency($datos['monto'], 2) }}
                            </span>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Análisis por Canchas -->
    <div class="row mb-4">
        <div class="col-lg-6">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-futbol"></i> Ingresos por Cancha
                    </h6>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered" id="tablaIngresosCancha">
                            <thead>
                                <tr>
                                    <th>Cancha</th>
                                    <th>Ingresos</th>
                                    <th>Reservas</th>
                                    <th>Promedio</th>
                                    <th>% del Total</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($ingresos_por_cancha ?? [] as $cancha)
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                @if($cancha->imagen)
                                                    <img src="{{ asset('storage/' . $cancha->imagen) }}" 
                                                         class="rounded mr-2" width="30" height="30">
                                                @endif
                                                <div>
                                                    <div class="font-weight-bold">{{ $cancha->nombre }}</div>
                                                    <small class="text-muted">{{ $cancha->tipo }}</small>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <span class="font-weight-bold text-success">
                                                {{ format_currency($cancha->ingresos_totales, 2) }}
                                            </span>
                                        </td>
                                        <td>{{ $cancha->total_reservas }}</td>
                                        <td>{{ format_currency($cancha->ingreso_promedio, 2) }}</td>
                                        <td>
                                            <div class="progress progress-sm mr-2">
                                                <div class="progress-bar bg-success" role="progressbar" 
                                                     style="width: {{ $cancha->porcentaje_total }}%"></div>
                                            </div>
                                            <span class="text-xs font-weight-bold text-success">{{ number_format($cancha->porcentaje_total, 1) }}%</span>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-6">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-clock"></i> Ingresos por Horario
                    </h6>
                </div>
                <div class="card-body">
                    <div class="chart-bar">
                        <canvas id="graficoHorarios"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Análisis de Tendencias -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">
                <i class="fas fa-trending-up"></i> Análisis de Tendencias y Proyecciones
            </h6>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-lg-8">
                    <div class="chart-area">
                        <canvas id="graficoTendencias"></canvas>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="card bg-light">
                        <div class="card-body">
                            <h6 class="font-weight-bold text-primary mb-3">Proyecciones</h6>
                            
                            <div class="mb-3">
                                <small class="text-muted">Ingresos Proyectados (Próximo Mes)</small>
                                <div class="h6 text-success">{{ format_currency($proyecciones['proximo_mes'] ?? 0, 2) }}</div>
                            </div>
                            
                            <div class="mb-3">
                                <small class="text-muted">Crecimiento Estimado</small>
                                <div class="h6 {{ ($proyecciones['crecimiento'] ?? 0) >= 0 ? 'text-success' : 'text-danger' }}">
                                    {{ ($proyecciones['crecimiento'] ?? 0) >= 0 ? '+' : '' }}{{ number_format($proyecciones['crecimiento'] ?? 0, 1) }}%
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <small class="text-muted">Mejor Día de la Semana</small>
                                <div class="h6 text-info">{{ $tendencias['mejor_dia_semana'] ?? 'N/A' }}</div>
                            </div>
                            
                            <div class="mb-3">
                                <small class="text-muted">Horario Pico</small>
                                <div class="h6 text-warning">{{ $tendencias['horario_pico'] ?? 'N/A' }}</div>
                            </div>
                            
                            <div class="alert alert-info alert-sm">
                                <i class="fas fa-info-circle"></i>
                                <small>Las proyecciones se basan en tendencias históricas y pueden variar según factores externos.</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Tabla Detallada de Transacciones -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">
                <i class="fas fa-table"></i> Detalle de Transacciones
            </h6>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered" id="tablaTransacciones">
                    <thead>
                        <tr>
                            <th>Fecha</th>
                            <th>Tipo</th>
                            <th>Descripción</th>
                            <th>Usuario</th>
                            <th>Cancha</th>
                            <th>Monto</th>
                            <th>Comisión</th>
                            <th>Estado</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($transacciones ?? [] as $transaccion)
                            <tr>
                                <td>
                                    <div>{{ $transaccion->created_at->format('d/m/Y') }}</div>
                                    <small class="text-muted">{{ $transaccion->created_at->format('H:i') }}</small>
                                </td>
                                <td>
                                    <span class="badge badge-{{ $transaccion->tipo === 'reserva' ? 'primary' : ($transaccion->tipo === 'evento' ? 'info' : 'secondary') }}">
                                        {{ ucfirst($transaccion->tipo) }}
                                    </span>
                                </td>
                                <td>{{ $transaccion->concepto }}</td>
                                <td>
                                    <div class="font-weight-bold">{{ $transaccion->usuario->nombre }}</div>
                                    <small class="text-muted">{{ $transaccion->usuario->email }}</small>
                                </td>
                                <td>{{ $transaccion->cancha->nombre ?? 'N/A' }}</td>
                                <td>
                                    <span class="font-weight-bold text-success">
                                        {{ format_currency($transaccion->monto, 2) }}
                                    </span>
                                </td>
                                <td>
                                    <span class="text-warning">
                                        {{ format_currency($transaccion->comision, 2) }}
                                    </span>
                                </td>
                                <td>
                                    <span class="badge badge-{{ $transaccion->estado === 'completado' ? 'success' : ($transaccion->estado === 'pendiente' ? 'warning' : 'danger') }}">
                                        {{ ucfirst($transaccion->estado) }}
                                    </span>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Modal Comparación de Períodos -->
<div class="modal fade" id="modalComparacion" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Comparación de Períodos</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="formComparacion">
                    <div class="row">
                        <div class="col-md-6">
                            <h6 class="text-primary">Período 1</h6>
                            <div class="mb-3">
                                <label for="periodo1_desde" class="form-label">Desde</label>
                                <input type="date" class="form-control" id="periodo1_desde" name="periodo1_desde">
                            </div>
                            <div class="mb-3">
                                <label for="periodo1_hasta" class="form-label">Hasta</label>
                                <input type="date" class="form-control" id="periodo1_hasta" name="periodo1_hasta">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <h6 class="text-success">Período 2</h6>
                            <div class="mb-3">
                                <label for="periodo2_desde" class="form-label">Desde</label>
                                <input type="date" class="form-control" id="periodo2_desde" name="periodo2_desde">
                            </div>
                            <div class="mb-3">
                                <label for="periodo2_hasta" class="form-label">Hasta</label>
                                <input type="date" class="form-control" id="periodo2_hasta" name="periodo2_hasta">
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="cancha_comparacion" class="form-label">Cancha (Opcional)</label>
                        <select class="form-select" id="cancha_comparacion" name="cancha_id">
                            <option value="">Todas las Canchas</option>
                            @foreach($canchas ?? [] as $cancha)
                                <option value="{{ $cancha->id }}">{{ $cancha->nombre }}</option>
                            @endforeach
                        </select>
                    </div>
                </form>
                
                <div id="resultadosComparacion" style="display: none;">
                    <hr>
                    <h6 class="text-primary mb-3">Resultados de la Comparación</h6>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="card bg-light">
                                <div class="card-body text-center">
                                    <h6 class="text-primary">Período 1</h6>
                                    <div class="h4 text-success" id="ingresos1">{{ currency_symbol() }}0.00</div>
                                    <small class="text-muted" id="transacciones1">0 transacciones</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card bg-light">
                                <div class="card-body text-center">
                                    <h6 class="text-success">Período 2</h6>
                                    <div class="h4 text-success" id="ingresos2">{{ currency_symbol() }}0.00</div>
                                    <small class="text-muted" id="transacciones2">0 transacciones</small>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="text-center mt-3">
                        <div class="h5" id="diferencia">Diferencia: $0.00 (0%)</div>
                        <div class="chart-area mt-3">
                            <canvas id="graficoComparacion"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-primary" onclick="compararPeriodos()">
                    <i class="fas fa-chart-line"></i> Comparar
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
let graficoIngresos, graficoTipos, graficoHorarios, graficoTendencias, graficoComparacion;

$(document).ready(function() {
    // Inicializar DataTables
    $('#tablaTransacciones').DataTable({
        responsive: true,
        language: {
            url: '//cdn.datatables.net/plug-ins/1.10.24/i18n/Spanish.json'
        },
        order: [[0, 'desc']],
        pageLength: 25
    });
    
    $('#tablaIngresosCancha').DataTable({
        responsive: true,
        language: {
            url: '//cdn.datatables.net/plug-ins/1.10.24/i18n/Spanish.json'
        },
        order: [[1, 'desc']],
        pageLength: 10,
        columnDefs: [
            { orderable: false, targets: [4] }
        ]
    });
    
    // Inicializar gráficos
    inicializarGraficos();
    
    // Manejar formulario de filtros
    $('#filtrosPeriodo').on('submit', function(e) {
        e.preventDefault();
        aplicarFiltros();
    });
    
    // Configurar fechas por defecto para comparación
    const hoy = new Date();
    const hace30Dias = new Date(hoy.getTime() - (30 * 24 * 60 * 60 * 1000));
    const hace60Dias = new Date(hoy.getTime() - (60 * 24 * 60 * 60 * 1000));
    
    $('#periodo1_desde').val(hace30Dias.toISOString().split('T')[0]);
    $('#periodo1_hasta').val(hoy.toISOString().split('T')[0]);
    $('#periodo2_desde').val(hace60Dias.toISOString().split('T')[0]);
    $('#periodo2_hasta').val(hace30Dias.toISOString().split('T')[0]);
});

function inicializarGraficos() {
    // Gráfico de evolución de ingresos
    const ctxIngresos = document.getElementById('graficoIngresos').getContext('2d');
    const fechas = {!! json_encode($datos_grafico['fechas'] ?? []) !!};
    const ingresos = {!! json_encode($datos_grafico['ingresos'] ?? []) !!};

    if (fechas.length === 0 || ingresos.length === 0) {
        ctxIngresos.font = '14px Arial';
        ctxIngresos.fillStyle = '#666';
        ctxIngresos.textAlign = 'center';
        ctxIngresos.fillText('No hay datos disponibles para el período seleccionado', ctxIngresos.canvas.width/2, ctxIngresos.canvas.height/2);
        return;
    }

    graficoIngresos = new Chart(ctxIngresos, {
        type: 'line',
        data: {
            labels: fechas,
            datasets: [{
                label: 'Ingresos Diarios',
                data: ingresos,
                borderColor: 'rgb(75, 192, 192)',
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                tension: 0.1,
                fill: true
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        callback: function(value) {
                            return '{{ currency_symbol() }}' + value.toLocaleString();
                        }
                    }
                }
            },
            plugins: {
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return 'Ingresos: {{ currency_symbol() }}' + context.parsed.y.toLocaleString();
                        }
                    }
                }
            }
        }
    });
    
    // Gráfico de distribución por tipos
    const ctxTipos = document.getElementById('graficoTipos').getContext('2d');
    graficoTipos = new Chart(ctxTipos, {
        type: 'doughnut',
        data: {
            labels: {!! json_encode(array_keys($distribucion_tipos ?? [])) !!},
            datasets: [{
                data: {!! json_encode(array_values(array_column($distribucion_tipos ?? [], 'monto'))) !!},
                backgroundColor: [
                    '#4e73df',
                    '#1cc88a',
                    '#36b9cc',
                    '#f6c23e',
                    '#e74a3b'
                ]
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom'
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            const total = context.dataset.data.reduce((a, b) => a + b, 0);
                            const percentage = ((context.parsed / total) * 100).toFixed(1);
                            return context.label + ': $' + context.parsed.toLocaleString() + ' (' + percentage + '%)';
                        }
                    }
                }
            }
        }
    });
    
    // Gráfico de ingresos por horario
    const ctxHorarios = document.getElementById('graficoHorarios').getContext('2d');
    graficoHorarios = new Chart(ctxHorarios, {
        type: 'bar',
        data: {
            labels: {!! json_encode($datos_horarios['horas'] ?? []) !!},
            datasets: [{
                label: 'Ingresos por Hora',
                data: {!! json_encode($datos_horarios['ingresos'] ?? []) !!},
                backgroundColor: 'rgba(54, 185, 204, 0.8)',
                borderColor: 'rgba(54, 185, 204, 1)',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        callback: function(value) {
                            return '{{ currency_symbol() }}' + value.toLocaleString();
                        }
                    }
                }
            },
            plugins: {
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return 'Ingresos: $' + context.parsed.y.toLocaleString();
                        }
                    }
                }
            }
        }
    });
    
    // Gráfico de tendencias
    const ctxTendencias = document.getElementById('graficoTendencias').getContext('2d');
    graficoTendencias = new Chart(ctxTendencias, {
        type: 'line',
        data: {
            labels: {!! json_encode($datos_tendencias['fechas'] ?? []) !!},
            datasets: [
                {
                    label: 'Ingresos Reales',
                    data: {!! json_encode($datos_tendencias['reales'] ?? []) !!},
                    borderColor: 'rgb(75, 192, 192)',
                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
                    tension: 0.1
                },
                {
                    label: 'Tendencia',
                    data: {!! json_encode($datos_tendencias['tendencia'] ?? []) !!},
                    borderColor: 'rgb(255, 99, 132)',
                    backgroundColor: 'rgba(255, 99, 132, 0.1)',
                    borderDash: [5, 5],
                    tension: 0.1
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        callback: function(value) {
                            return '{{ currency_symbol() }}' + value.toLocaleString();
                        }
                    }
                }
            }
        }
    });
}

function cambiarTipoPeriodo() {
    const tipo = document.getElementById('periodo_tipo').value;
    const fechaDesde = document.getElementById('fecha_desde_container');
    const fechaHasta = document.getElementById('fecha_hasta_container');
    
    if (tipo === 'personalizado') {
        fechaDesde.style.display = 'block';
        fechaHasta.style.display = 'block';
    } else {
        fechaDesde.style.display = 'none';
        fechaHasta.style.display = 'none';
    }
}

function limpiarFiltros() {
    $('#filtrosPeriodo')[0].reset();
    window.location.href = '{{ route("admin.analytics.ingresos") }}';
}

function aplicarFiltros() {
    const formData = new FormData($('#filtrosPeriodo')[0]);
    const params = new URLSearchParams(formData);
    window.location.href = '{{ route("admin.analytics.ingresos") }}?' + params.toString();
}

function cambiarVistaGrafico(vista) {
    // Actualizar gráfico según la vista seleccionada
    $.ajax({
        url: '{{ route("admin.analytics.ingresos.datos") }}',
        method: 'GET',
        data: {
            vista: vista,
            ...Object.fromEntries(new URLSearchParams(window.location.search))
        },
        success: function(response) {
            graficoIngresos.data.labels = response.fechas;
            graficoIngresos.data.datasets[0].data = response.ingresos;
            graficoIngresos.update();
        },
        error: function() {
            Swal.fire('Error', 'No se pudieron cargar los datos del gráfico', 'error');
        }
    });
}

function compararPeriodos() {
    const formData = new FormData($('#formComparacion')[0]);
    
    $.ajax({
        url: '{{ route("admin.analytics.ingresos.comparar") }}',
        method: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function(response) {
            mostrarResultadosComparacion(response);
        },
        error: function(xhr) {
            const message = xhr.responseJSON?.message || 'No se pudo realizar la comparación';
            Swal.fire('Error', message, 'error');
        }
    });
}

function mostrarResultadosComparacion(datos) {
    $('#ingresos1').text('$' + datos.periodo1.ingresos.toLocaleString());
    $('#transacciones1').text(datos.periodo1.transacciones + ' transacciones');
    $('#ingresos2').text('$' + datos.periodo2.ingresos.toLocaleString());
    $('#transacciones2').text(datos.periodo2.transacciones + ' transacciones');
    
    const diferencia = datos.periodo2.ingresos - datos.periodo1.ingresos;
    const porcentaje = datos.periodo1.ingresos > 0 ? ((diferencia / datos.periodo1.ingresos) * 100).toFixed(1) : 0;
    
    $('#diferencia').html(`
        Diferencia: <span class="${diferencia >= 0 ? 'text-success' : 'text-danger'}">
            ${diferencia >= 0 ? '+' : ''}$${Math.abs(diferencia).toLocaleString()} (${diferencia >= 0 ? '+' : ''}${porcentaje}%)
        </span>
    `);
    
    // Crear gráfico de comparación
    if (graficoComparacion) {
        graficoComparacion.destroy();
    }
    
    const ctxComparacion = document.getElementById('graficoComparacion').getContext('2d');
    graficoComparacion = new Chart(ctxComparacion, {
        type: 'bar',
        data: {
            labels: ['Período 1', 'Período 2'],
            datasets: [{
                label: 'Ingresos',
                data: [datos.periodo1.ingresos, datos.periodo2.ingresos],
                backgroundColor: ['rgba(78, 115, 223, 0.8)', 'rgba(28, 200, 138, 0.8)'],
                borderColor: ['rgba(78, 115, 223, 1)', 'rgba(28, 200, 138, 1)'],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        callback: function(value) {
                            return '$' + value.toLocaleString();
                        }
                    }
                }
            },
            plugins: {
                legend: {
                    display: false
                }
            }
        }
    });
    
    $('#resultadosComparacion').show();
}

function exportarReporte() {
    const params = new URLSearchParams(window.location.search);
    window.open(`{{ route('admin.analytics.ingresos.export') }}?${params.toString()}`, '_blank');
}

function actualizarDatos() {
    location.reload();
}
</script>
@endpush