@extends('layouts.admin')

@section('title', 'Reportes Financieros')

@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-bar text-primary"></i>
            Reportes Financieros
        </h1>
        <div class="d-flex gap-2">
            <button class="btn btn-success btn-sm" onclick="exportarTodosReportes()">
                <i class="fas fa-download"></i> Exportar Todo
            </button>
            <button class="btn btn-info btn-sm" data-toggle="modal" data-target="#modalReportePersonalizado">
                <i class="fas fa-cog"></i> Reporte Personalizado
            </button>
            <button class="btn btn-primary btn-sm" onclick="programarReporte()">
                <i class="fas fa-clock"></i> Programar Envío
            </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-3">
                    <label for="periodo_reporte" class="form-label">Período</label>
                    <select class="form-select" id="periodo_reporte" name="periodo">
                        <option value="hoy" {{ request('periodo') == 'hoy' ? 'selected' : '' }}>Hoy</option>
                        <option value="ayer" {{ request('periodo') == 'ayer' ? 'selected' : '' }}>Ayer</option>
                        <option value="semana" {{ request('periodo') == 'semana' ? 'selected' : '' }}>Esta Semana</option>
                        <option value="semana_pasada" {{ request('periodo') == 'semana_pasada' ? 'selected' : '' }}>Semana Pasada</option>
                        <option value="mes" {{ request('periodo', 'mes') == 'mes' ? 'selected' : '' }}>Este Mes</option>
                        <option value="mes_pasado" {{ request('periodo') == 'mes_pasado' ? 'selected' : '' }}>Mes Pasado</option>
                        <option value="trimestre" {{ request('periodo') == 'trimestre' ? 'selected' : '' }}>Este Trimestre</option>
                        <option value="año" {{ request('periodo') == 'año' ? 'selected' : '' }}>Este Año</option>
                        <option value="personalizado" {{ request('periodo') == 'personalizado' ? 'selected' : '' }}>Personalizado</option>
                    </select>
                </div>
                <div class="col-md-2" id="fechaDesdeContainer" style="display: none;">
                    <label for="fecha_desde" class="form-label">Desde</label>
                    <input type="date" class="form-control" id="fecha_desde" name="fecha_desde" value="{{ request('fecha_desde') }}">
                </div>
                <div class="col-md-2" id="fechaHastaContainer" style="display: none;">
                    <label for="fecha_hasta" class="form-label">Hasta</label>
                    <input type="date" class="form-control" id="fecha_hasta" name="fecha_hasta" value="{{ request('fecha_hasta') }}">
                </div>
                <div class="col-md-2">
                    <label for="comparar_con" class="form-label">Comparar con</label>
                    <select class="form-select" id="comparar_con" name="comparar_con">
                        <option value="">Sin comparación</option>
                        <option value="periodo_anterior" {{ request('comparar_con') == 'periodo_anterior' ? 'selected' : '' }}>Período Anterior</option>
                        <option value="año_anterior" {{ request('comparar_con') == 'año_anterior' ? 'selected' : '' }}>Año Anterior</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <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> Generar
                        </button>
                        <button type="button" class="btn btn-outline-secondary" onclick="limpiarFiltros()">
                            <i class="fas fa-times"></i> Limpiar
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Resumen Ejecutivo -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card shadow">
                <div class="card-header py-3 d-flex justify-content-between align-items-center">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-chart-line"></i> Resumen Ejecutivo
                    </h6>
                    <div class="dropdown">
                        <button class="btn btn-outline-primary btn-sm dropdown-toggle" type="button" 
                                data-toggle="dropdown" aria-expanded="false">
                            <i class="fas fa-download"></i> Exportar
                        </button>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="#" onclick="exportarResumen('pdf')">PDF</a>
                            <a class="dropdown-item" href="#" onclick="exportarResumen('excel')">Excel</a>
                            <a class="dropdown-item" href="#" onclick="exportarResumen('csv')">CSV</a>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <!-- Métricas Principales -->
                        <div class="col-lg-8">
                            <div class="row">
                                <div class="col-md-3 mb-3">
                                    <div class="card border-left-primary h-100">
                                        <div class="card-body py-3">
                                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                                Ingresos Totales
                                            </div>
                                            <div class="h6 mb-1 font-weight-bold text-gray-800">
                                                {{ format_currency($resumen['ingresos_totales'] ?? 0, 2) }}
                                            </div>
                                            @if(isset($resumen['comparacion']['ingresos']))
                                                <div class="text-xs {{ $resumen['comparacion']['ingresos'] >= 0 ? 'text-success' : 'text-danger' }}">
                                                    <i class="fas fa-arrow-{{ $resumen['comparacion']['ingresos'] >= 0 ? 'up' : 'down' }}"></i>
                                                    {{ abs($resumen['comparacion']['ingresos']) }}%
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="col-md-3 mb-3">
                                    <div class="card border-left-success h-100">
                                        <div class="card-body py-3">
                                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                                Transacciones
                                            </div>
                                            <div class="h6 mb-1 font-weight-bold text-gray-800">
                                                {{ number_format($resumen['total_transacciones'] ?? 0) }}
                                            </div>
                                            @if(isset($resumen['comparacion']['transacciones']))
                                                <div class="text-xs {{ $resumen['comparacion']['transacciones'] >= 0 ? 'text-success' : 'text-danger' }}">
                                                    <i class="fas fa-arrow-{{ $resumen['comparacion']['transacciones'] >= 0 ? 'up' : 'down' }}"></i>
                                                    {{ abs($resumen['comparacion']['transacciones']) }}%
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="col-md-3 mb-3">
                                    <div class="card border-left-info h-100">
                                        <div class="card-body py-3">
                                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                                Ticket Promedio
                                            </div>
                                            <div class="h6 mb-1 font-weight-bold text-gray-800">
                                                {{ format_currency($resumen['ticket_promedio'] ?? 0, 2) }}
                                            </div>
                                            @if(isset($resumen['comparacion']['ticket_promedio']))
                                                <div class="text-xs {{ $resumen['comparacion']['ticket_promedio'] >= 0 ? 'text-success' : 'text-danger' }}">
                                                    <i class="fas fa-arrow-{{ $resumen['comparacion']['ticket_promedio'] >= 0 ? 'up' : 'down' }}"></i>
                                                    {{ abs($resumen['comparacion']['ticket_promedio']) }}%
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="col-md-3 mb-3">
                                    <div class="card border-left-warning h-100">
                                        <div class="card-body py-3">
                                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                                Tasa Éxito
                                            </div>
                                            <div class="h6 mb-1 font-weight-bold text-gray-800">
                                                {{ number_format($resumen['tasa_exito'] ?? 0, 1) }}%
                                            </div>
                                            @if(isset($resumen['comparacion']['tasa_exito']))
                                                <div class="text-xs {{ $resumen['comparacion']['tasa_exito'] >= 0 ? 'text-success' : 'text-danger' }}">
                                                    <i class="fas fa-arrow-{{ $resumen['comparacion']['tasa_exito'] >= 0 ? 'up' : 'down' }}"></i>
                                                    {{ abs($resumen['comparacion']['tasa_exito']) }}pp
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Gráfico de Tendencia -->
                        <div class="col-lg-4">
                            <div class="chart-area">
                                <canvas id="graficoTendencia" width="100%" height="200"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Reportes Detallados -->
    <div class="row">
        <!-- Reporte por Categorías -->
        <div class="col-lg-6 mb-4">
            <div class="card shadow h-100">
                <div class="card-header py-3 d-flex justify-content-between align-items-center">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-chart-pie"></i> Ingresos por Categoría
                    </h6>
                    <button class="btn btn-outline-primary btn-sm" onclick="exportarCategoria()">
                        <i class="fas fa-download"></i>
                    </button>
                </div>
                <div class="card-body">
                    <div class="chart-pie pt-4 pb-2">
                        <canvas id="graficoCategorias" width="100%" height="200"></canvas>
                    </div>
                    <div class="mt-4">
                        @foreach($ingresos_categoria ?? [] as $categoria)
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <div class="d-flex align-items-center">
                                    <div class="mr-2" style="width: 12px; height: 12px; background-color: {{ $categoria['color'] }}; border-radius: 50%;"></div>
                                    <span class="text-sm">{{ $categoria['nombre'] }}</span>
                                </div>
                                <div class="text-right">
                                    <div class="font-weight-bold">{{ format_currency($categoria['monto'], 2) }}</div>
                                    <div class="text-xs text-muted">{{ $categoria['porcentaje'] }}%</div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>

        <!-- Reporte por Métodos de Pago -->
        <div class="col-lg-6 mb-4">
            <div class="card shadow h-100">
                <div class="card-header py-3 d-flex justify-content-between align-items-center">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-credit-card"></i> Métodos de Pago
                    </h6>
                    <button class="btn btn-outline-primary btn-sm" onclick="exportarMetodos()">
                        <i class="fas fa-download"></i>
                    </button>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th>Método</th>
                                    <th class="text-right">Transacciones</th>
                                    <th class="text-right">Monto</th>
                                    <th class="text-right">%</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($metodos_pago ?? [] as $metodo)
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <i class="fas fa-{{ $metodo['icono'] }} text-{{ $metodo['color'] }} mr-2"></i>
                                                {{ $metodo['nombre'] }}
                                            </div>
                                        </td>
                                        <td class="text-right">{{ number_format($metodo['transacciones']) }}</td>
                                        <td class="text-right font-weight-bold">{{ format_currency($metodo['monto'], 2) }}</td>
                                        <td class="text-right">
                                            <span class="badge badge-{{ $metodo['color'] }}">{{ $metodo['porcentaje'] }}%</span>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Análisis Temporal -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card shadow">
                <div class="card-header py-3 d-flex justify-content-between align-items-center">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-chart-line"></i> Análisis Temporal
                    </h6>
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-outline-primary btn-sm" onclick="cambiarVistaAnalisis('diario')">
                            Diario
                        </button>
                        <button type="button" class="btn btn-outline-primary btn-sm" onclick="cambiarVistaAnalisis('semanal')">
                            Semanal
                        </button>
                        <button type="button" class="btn btn-outline-primary btn-sm" onclick="cambiarVistaAnalisis('mensual')">
                            Mensual
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="chart-area">
                        <canvas id="graficoAnalisisTemporal" width="100%" height="80"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Reportes de Rendimiento -->
    <div class="row">
        <!-- Top Usuarios -->
        <div class="col-lg-4 mb-4">
            <div class="card shadow h-100">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-users"></i> Top Usuarios
                    </h6>
                </div>
                <div class="card-body">
                    @foreach($top_usuarios ?? [] as $index => $usuario)
                        <div class="d-flex align-items-center mb-3">
                            <div class="mr-3">
                                <div class="bg-{{ $index < 3 ? ['warning', 'secondary', 'info'][$index] : 'light' }} rounded-circle d-flex align-items-center justify-content-center" 
                                     style="width: 35px; height: 35px;">
                                    <span class="text-white font-weight-bold">{{ $index + 1 }}</span>
                                </div>
                            </div>
                            <div class="flex-grow-1">
                                <div class="font-weight-bold">{{ $usuario['nombre'] }}</div>
                                <div class="text-xs text-muted">{{ $usuario['transacciones'] }} transacciones</div>
                            </div>
                            <div class="text-right">
                                <div class="font-weight-bold text-success">{{ format_currency($usuario['total'], 2) }}</div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>

        <!-- Horarios de Mayor Actividad -->
        <div class="col-lg-4 mb-4">
            <div class="card shadow h-100">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-clock"></i> Horarios de Actividad
                    </h6>
                </div>
                <div class="card-body">
                    <div class="chart-bar">
                        <canvas id="graficoHorarios" width="100%" height="200"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!-- Análisis de Reembolsos -->
        <div class="col-lg-4 mb-4">
            <div class="card shadow h-100">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-undo"></i> Análisis de Reembolsos
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row text-center mb-3">
                        <div class="col-6">
                            <div class="border-right">
                                <div class="h5 font-weight-bold text-danger">
                                    {{ $reembolsos['total'] ?? 0 }}
                                </div>
                                <div class="text-xs text-muted">Total Reembolsos</div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="h5 font-weight-bold text-warning">
                                {{ $reembolsos['tasa'] ?? 0 }}%
                            </div>
                            <div class="text-xs text-muted">Tasa de Reembolso</div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <div class="d-flex justify-content-between mb-1">
                            <span class="text-sm">Monto Total:</span>
                            <span class="font-weight-bold text-danger">{{ format_currency($reembolsos['monto_total'] ?? 0, 2) }}</span>
                        </div>
                        <div class="d-flex justify-content-between mb-1">
                            <span class="text-sm">Tiempo Promedio:</span>
                            <span class="font-weight-bold">{{ $reembolsos['tiempo_promedio'] ?? 0 }} días</span>
                        </div>
                    </div>
                    
                    <div class="mt-3">
                        <h6 class="text-sm font-weight-bold">Motivos Principales:</h6>
                        @foreach($reembolsos['motivos'] ?? [] as $motivo)
                            <div class="d-flex justify-content-between mb-1">
                                <span class="text-xs">{{ $motivo['nombre'] }}:</span>
                                <span class="text-xs font-weight-bold">{{ $motivo['cantidad'] }}</span>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Tabla de Transacciones Detallada -->
    <div class="card shadow mb-4">
        <div class="card-header py-3 d-flex justify-content-between align-items-center">
            <h6 class="m-0 font-weight-bold text-primary">
                <i class="fas fa-table"></i> Detalle de Transacciones
            </h6>
            <div class="d-flex gap-2">
                <button class="btn btn-outline-success btn-sm" onclick="exportarTransacciones('excel')">
                    <i class="fas fa-file-excel"></i> Excel
                </button>
                <button class="btn btn-outline-danger btn-sm" onclick="exportarTransacciones('pdf')">
                    <i class="fas fa-file-pdf"></i> PDF
                </button>
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered" id="tablaTransaccionesDetalle">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Fecha</th>
                            <th>Usuario</th>
                            <th>Concepto</th>
                            <th>Método</th>
                            <th>Monto</th>
                            <th>Comisión</th>
                            <th>Estado</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($transacciones_detalle ?? [] as $transaccion)
                            <tr>
                                <td><span class="font-weight-bold">#{{ $transaccion->id }}</span></td>
                                <td>
                                    <div>{{ $transaccion->created_at->format('d/m/Y') }}</div>
                                    <small class="text-muted">{{ $transaccion->created_at->format('H:i') }}</small>
                                </td>
                                <td>
                                    <div class="font-weight-bold">{{ $transaccion->usuario->nombre }}</div>
                                    <small class="text-muted">{{ $transaccion->usuario->email }}</small>
                                </td>
                                <td>{{ $transaccion->concepto }}</td>
                                <td>
                                    <span class="badge badge-{{ $transaccion->metodo_pago === 'tarjeta' ? 'primary' : 'info' }}">
                                        {{ ucfirst($transaccion->metodo_pago) }}
                                    </span>
                                </td>
                                <td>
                                    <span class="font-weight-bold text-{{ $transaccion->tipo === 'ingreso' ? 'success' : 'danger' }}">
                                        {{ $transaccion->tipo === 'ingreso' ? '+' : '-' }}{{ format_currency($transaccion->monto, 2, false) }}
                                    </span>
                                </td>
                                <td>
                                    <span class="text-muted">{{ format_currency($transaccion->comision ?? 0, 2) }}</span>
                                </td>
                                <td>
                                    <span class="badge badge-{{ $transaccion->estado === 'completado' ? 'success' : ($transaccion->estado === 'pendiente' ? 'warning' : 'danger') }}">
                                        {{ ucfirst($transaccion->estado) }}
                                    </span>
                                </td>
                                <td>
                                    <button class="btn btn-sm btn-outline-info" onclick="verTransaccion({{ $transaccion->id }})">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Modal Reporte Personalizado -->
<div class="modal fade" id="modalReportePersonalizado" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Reporte Personalizado</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <form id="formReportePersonalizado">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Métricas a Incluir:</label>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="incluir_ingresos" name="metricas[]" value="ingresos" checked>
                                    <label class="form-check-label" for="incluir_ingresos">Ingresos Totales</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="incluir_transacciones" name="metricas[]" value="transacciones" checked>
                                    <label class="form-check-label" for="incluir_transacciones">Número de Transacciones</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="incluir_comisiones" name="metricas[]" value="comisiones">
                                    <label class="form-check-label" for="incluir_comisiones">Comisiones</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="incluir_reembolsos" name="metricas[]" value="reembolsos">
                                    <label class="form-check-label" for="incluir_reembolsos">Reembolsos</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Gráficos a Incluir:</label>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="grafico_tendencia" name="graficos[]" value="tendencia" checked>
                                    <label class="form-check-label" for="grafico_tendencia">Tendencia Temporal</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="grafico_categorias" name="graficos[]" value="categorias">
                                    <label class="form-check-label" for="grafico_categorias">Por Categorías</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="grafico_metodos" name="graficos[]" value="metodos">
                                    <label class="form-check-label" for="grafico_metodos">Métodos de Pago</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="grafico_horarios" name="graficos[]" value="horarios">
                                    <label class="form-check-label" for="grafico_horarios">Horarios de Actividad</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="formato_reporte" class="form-label">Formato de Salida</label>
                                <select class="form-select" id="formato_reporte" name="formato">
                                    <option value="pdf">PDF</option>
                                    <option value="excel">Excel</option>
                                    <option value="csv">CSV</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="enviar_email" class="form-label">Enviar por Email</label>
                                <input type="email" class="form-control" id="enviar_email" name="email" 
                                       placeholder="email@ejemplo.com">
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="comentarios_reporte" class="form-label">Comentarios Adicionales</label>
                        <textarea class="form-control" id="comentarios_reporte" name="comentarios" 
                                  rows="3" placeholder="Comentarios o notas para incluir en el reporte..."></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-file-alt"></i> Generar Reporte
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
$(document).ready(function() {
    // Inicializar gráficos
    inicializarGraficos();
    
    // Manejar cambio de período
    $('#periodo_reporte').on('change', function() {
        if ($(this).val() === 'personalizado') {
            $('#fechaDesdeContainer, #fechaHastaContainer').show();
        } else {
            $('#fechaDesdeContainer, #fechaHastaContainer').hide();
        }
    });
    
    // Inicializar DataTable
    $('#tablaTransaccionesDetalle').DataTable({
        responsive: true,
        language: {
            url: '//cdn.datatables.net/plug-ins/1.10.24/i18n/Spanish.json'
        },
        order: [[1, 'desc']],
        pageLength: 25
    });
    
    // Manejar formularios
    $('#filtrosPeriodo').on('submit', function(e) {
        e.preventDefault();
        aplicarFiltrosPeriodo();
    });
    
    $('#formReportePersonalizado').on('submit', function(e) {
        e.preventDefault();
        generarReportePersonalizado();
    });
});

function inicializarGraficos() {
    // Gráfico de Tendencia
    const ctxTendencia = document.getElementById('graficoTendencia').getContext('2d');
    new Chart(ctxTendencia, {
        type: 'line',
        data: {
            labels: {!! json_encode($grafico_tendencia['labels'] ?? []) !!},
            datasets: [{
                label: 'Ingresos',
                data: {!! json_encode($grafico_tendencia['data'] ?? []) !!},
                borderColor: '#4e73df',
                backgroundColor: 'rgba(78, 115, 223, 0.1)',
                borderWidth: 2,
                fill: true
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        callback: function(value) {
                            return '$' + value.toLocaleString();
                        }
                    }
                }
            }
        }
    });
    
    // Gráfico de Categorías
    const ctxCategorias = document.getElementById('graficoCategorias').getContext('2d');
    new Chart(ctxCategorias, {
        type: 'doughnut',
        data: {
            labels: {!! json_encode(array_column($ingresos_categoria ?? [], 'nombre')) !!},
            datasets: [{
                data: {!! json_encode(array_column($ingresos_categoria ?? [], 'monto')) !!},
                backgroundColor: {!! json_encode(array_column($ingresos_categoria ?? [], 'color')) !!}
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                }
            }
        }
    });
    
    // Gráfico de Análisis Temporal
    const ctxAnalisis = document.getElementById('graficoAnalisisTemporal').getContext('2d');
    new Chart(ctxAnalisis, {
        type: 'bar',
        data: {
            labels: {!! json_encode($analisis_temporal['labels'] ?? []) !!},
            datasets: [{
                label: 'Ingresos',
                data: {!! json_encode($analisis_temporal['ingresos'] ?? []) !!},
                backgroundColor: '#4e73df'
            }, {
                label: 'Transacciones',
                data: {!! json_encode($analisis_temporal['transacciones'] ?? []) !!},
                backgroundColor: '#1cc88a',
                yAxisID: 'y1'
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    type: 'linear',
                    display: true,
                    position: 'left',
                    ticks: {
                        callback: function(value) {
                            return '$' + value.toLocaleString();
                        }
                    }
                },
                y1: {
                    type: 'linear',
                    display: true,
                    position: 'right',
                    grid: {
                        drawOnChartArea: false
                    }
                }
            }
        }
    });
    
    // Gráfico de Horarios
    const ctxHorarios = document.getElementById('graficoHorarios').getContext('2d');
    new Chart(ctxHorarios, {
        type: 'bar',
        data: {
            labels: {!! json_encode($horarios_actividad['labels'] ?? []) !!},
            datasets: [{
                label: 'Transacciones',
                data: {!! json_encode($horarios_actividad['data'] ?? []) !!},
                backgroundColor: '#36b9cc'
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                }
            },
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
}

function limpiarFiltros() {
    $('#filtrosPeriodo')[0].reset();
    $('#fechaDesdeContainer, #fechaHastaContainer').hide();
    window.location.href = '{{ route("admin.pagos.reportes") }}';
}

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

function cambiarVistaAnalisis(vista) {
    $.ajax({
        url: '{{ route("admin.pagos.reportes.analisis") }}',
        method: 'GET',
        data: { vista: vista },
        success: function(response) {
            // Actualizar gráfico con nuevos datos
            inicializarGraficos();
        },
        error: function() {
            Swal.fire('Error', 'No se pudo cambiar la vista del análisis', 'error');
        }
    });
}

function exportarResumen(formato) {
    const params = new URLSearchParams(window.location.search);
    params.set('formato', formato);
    window.open(`{{ route('admin.pagos.reportes.export.resumen') }}?${params.toString()}`, '_blank');
}

function exportarCategoria() {
    const params = new URLSearchParams(window.location.search);
    window.open(`{{ route('admin.pagos.reportes.export.categorias') }}?${params.toString()}`, '_blank');
}

function exportarMetodos() {
    const params = new URLSearchParams(window.location.search);
    window.open(`{{ route('admin.pagos.reportes.export.metodos') }}?${params.toString()}`, '_blank');
}

function exportarTransacciones(formato) {
    const params = new URLSearchParams(window.location.search);
    params.set('formato', formato);
    window.open(`{{ route('admin.pagos.reportes.export.transacciones') }}?${params.toString()}`, '_blank');
}

function exportarTodosReportes() {
    const params = new URLSearchParams(window.location.search);
    window.open(`{{ route('admin.pagos.reportes.export.completo') }}?${params.toString()}`, '_blank');
}

function generarReportePersonalizado() {
    const formData = new FormData($('#formReportePersonalizado')[0]);
    
    // Agregar filtros actuales
    const filtrosActuales = new URLSearchParams(window.location.search);
    for (const [key, value] of filtrosActuales) {
        formData.append(key, value);
    }
    
    $.ajax({
        url: '{{ route("admin.pagos.reportes.personalizado") }}',
        method: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function(response) {
            $('#modalReportePersonalizado').modal('hide');
            
            if (response.email_enviado) {
                Swal.fire('Éxito', 'Reporte generado y enviado por email', 'success');
            } else {
                // Descargar archivo
                window.open(response.download_url, '_blank');
                Swal.fire('Éxito', 'Reporte generado exitosamente', 'success');
            }
        },
        error: function(xhr) {
            const message = xhr.responseJSON?.message || 'No se pudo generar el reporte';
            Swal.fire('Error', message, 'error');
        }
    });
}

function programarReporte() {
    Swal.fire({
        title: 'Programar Envío de Reportes',
        html: `
            <div class="text-left">
                <div class="mb-3">
                    <label class="form-label">Frecuencia:</label>
                    <select class="form-select" id="frecuencia">
                        <option value="diario">Diario</option>
                        <option value="semanal">Semanal</option>
                        <option value="mensual">Mensual</option>
                    </select>
                </div>
                <div class="mb-3">
                    <label class="form-label">Email de destino:</label>
                    <input type="email" class="form-control" id="email_programado" placeholder="email@ejemplo.com">
                </div>
                <div class="mb-3">
                    <label class="form-label">Hora de envío:</label>
                    <input type="time" class="form-control" id="hora_envio" value="09:00">
                </div>
            </div>
        `,
        showCancelButton: true,
        confirmButtonText: 'Programar',
        cancelButtonText: 'Cancelar',
        preConfirm: () => {
            const frecuencia = document.getElementById('frecuencia').value;
            const email = document.getElementById('email_programado').value;
            const hora = document.getElementById('hora_envio').value;
            
            if (!email) {
                Swal.showValidationMessage('El email es requerido');
                return false;
            }
            
            return { frecuencia, email, hora };
        }
    }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
                url: '{{ route("admin.pagos.reportes.programar") }}',
                method: 'POST',
                data: result.value,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    Swal.fire('Éxito', 'Reporte programado exitosamente', 'success');
                },
                error: function() {
                    Swal.fire('Error', 'No se pudo programar el reporte', 'error');
                }
            });
        }
    });
}

function verTransaccion(transaccionId) {
    window.open(`{{ route('admin.pagos.transacciones.show', '') }}/${transaccionId}`, '_blank');
}
</script>
@endpush