@extends('layouts.admin')

@section('title', 'Dashboard Financiero')

@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-primary"></i>
            Dashboard Financiero
        </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="#modalFiltroAvanzado">
                <i class="fas fa-filter"></i> Filtros Avanzados
            </button>
            <button class="btn btn-primary btn-sm" onclick="actualizarDatos()">
                <i class="fas fa-sync-alt"></i> Actualizar
            </button>
        </div>
    </div>

    <!-- Filtros Rápidos -->
    <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> Filtros Rápidos
            </h6>
        </div>
        <div class="card-body">
            <form id="filtrosForm" class="row g-3">
                <div class="col-md-3">
                    <label for="periodo" class="form-label">Período</label>
                    <select class="form-select" id="periodo" name="periodo">
                        <option value="hoy" {{ request('periodo') == 'hoy' ? 'selected' : '' }}>Hoy</option>
                        <option value="semana" {{ request('periodo') == 'semana' ? 'selected' : '' }}>Esta Semana</option>
                        <option value="mes" {{ request('periodo', 'mes') == 'mes' ? 'selected' : '' }}>Este Mes</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="tipo_pago" class="form-label">Tipo de Pago</label>
                    <select class="form-select" id="tipo_pago" name="tipo_pago">
                        <option value="">Todos</option>
                        <option value="reservas" {{ request('tipo_pago') == 'reservas' ? 'selected' : '' }}>Reservas</option>
                        <option value="eventos" {{ request('tipo_pago') == 'eventos' ? 'selected' : '' }}>Eventos</option>
                        <option value="membresías" {{ request('tipo_pago') == 'membresías' ? 'selected' : '' }}>Membresías</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> Aplicar
                        </button>
                        <button type="button" class="btn btn-outline-secondary" onclick="limpiarFiltros()">
                            <i class="fas fa-times"></i> Limpiar
                        </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-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">
                                Ingresos Totales
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">
                                {{ format_currency($metricas['ingresos_totales'] ?? 0, 2) }}
                            </div>
                            <div class="text-xs text-success">
                                <i class="fas fa-arrow-up"></i> {{ $metricas['crecimiento_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-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">
                                Pagos Completados
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $metricas['pagos_completados'] ?? 0 }}</div>
                            <div class="text-xs text-success">
                                <i class="fas fa-check"></i> {{ $metricas['tasa_exito'] ?? 0 }}% tasa de éxito
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-check-circle 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">
                                Pagos Pendientes
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $metricas['pagos_pendientes'] ?? 0 }}</div>
                            <div class="text-xs text-warning">
                                <i class="fas fa-clock"></i> {{ format_currency($metricas['monto_pendiente'] ?? 0, 2) }} en espera
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-clock 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-danger 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-danger text-uppercase mb-1">
                                Reembolsos
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $metricas['reembolsos'] ?? 0 }}</div>
                            <div class="text-xs text-danger">
                                <i class="fas fa-undo"></i> {{ format_currency($metricas['monto_reembolsos'] ?? 0, 2) }} reembolsados
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-undo fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Gráficos -->
    <div class="row mb-4">
        <!-- Gráfico de Ingresos -->
        <div class="col-xl-8 col-lg-7">
            <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-chart-area"></i> Evolución de Ingresos
                    </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-cog"></i>
                        </button>
                        <div class="dropdown-menu">
                            <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" width="100%" height="40"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!-- Distribución por Método de Pago -->
        <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">
                        <i class="fas fa-chart-pie"></i> Métodos de Pago
                    </h6>
                </div>
                <div class="card-body">
                    <div class="chart-pie pt-4 pb-2">
                        <canvas id="graficoMetodosPago" width="100%" height="200"></canvas>
                    </div>
                    <div class="mt-4 text-center small">
                        @foreach($metodos_pago ?? [] as $metodo)
                            <span class="mr-2">
                                <i class="fas fa-circle" style="color: {{ $metodo['color'] }}"></i> {{ $metodo['nombre'] }}
                            </span>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Transacciones Recientes y Alertas -->
    <div class="row">
        <!-- Transacciones Recientes -->
        <div class="col-lg-8">
            <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-list"></i> Transacciones Recientes
                    </h6>
                    <a href="{{ route('admin.pagos.transacciones') }}" class="btn btn-outline-primary btn-sm">
                        Ver Todas <i class="fas fa-arrow-right"></i>
                    </a>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered" id="tablaTransacciones">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Usuario</th>
                                    <th>Concepto</th>
                                    <th>Método</th>
                                    <th>Monto</th>
                                    <th>Estado</th>
                                    <th>Fecha</th>
                                    <th>Acciones</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($transacciones_recientes ?? [] as $transaccion)
                                    <tr>
                                        <td>
                                            <span class="font-weight-bold">#{{ $transaccion->id }}</span>
                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                @if($transaccion->usuario->avatar)
                                                    <img src="{{ asset('storage/' . $transaccion->usuario->avatar) }}" 
                                                         class="rounded-circle mr-2" width="30" height="30">
                                                @else
                                                    <div class="bg-primary rounded-circle mr-2 d-flex align-items-center justify-content-center" 
                                                         style="width: 30px; height: 30px;">
                                                        <span class="text-white font-weight-bold text-sm">
                                                            {{ substr($transaccion->usuario->nombre, 0, 1) }}
                                                        </span>
                                                    </div>
                                                @endif
                                                <div>
                                                    <div class="font-weight-bold">{{ $transaccion->usuario->nombre }}</div>
                                                    <small class="text-muted">{{ $transaccion->usuario->email }}</small>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <div>
                                                <span class="font-weight-bold">{{ $transaccion->concepto }}</span>
                                                <br><small class="text-muted">{{ $transaccion->descripcion }}</small>
                                            </div>
                                        </td>
                                        <td>
                                            <span class="badge badge-{{ $transaccion->metodo_pago === 'tarjeta' ? 'primary' : ($transaccion->metodo_pago === 'transferencia' ? 'info' : 'secondary') }}">
                                                {{ 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) }}
                                            </span>
                                        </td>
                                        <td>
                                            <span class="badge badge-{{ $transaccion->estado === 'completado' ? 'success' : ($transaccion->estado === 'pendiente' ? 'warning' : 'danger') }}">
                                                {{ ucfirst($transaccion->estado) }}
                                            </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="btn-group" role="group">
                                                <button class="btn btn-sm btn-outline-info" 
                                                        onclick="verTransaccion({{ $transaccion->id }})" 
                                                        title="Ver detalles">
                                                    <i class="fas fa-eye"></i>
                                                </button>
                                                @if($transaccion->estado === 'completado' && $transaccion->tipo === 'ingreso')
                                                    <button class="btn btn-sm btn-outline-warning" 
                                                            onclick="procesarReembolso({{ $transaccion->id }})" 
                                                            title="Reembolsar">
                                                        <i class="fas fa-undo"></i>
                                                    </button>
                                                @endif
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Panel de Alertas y Notificaciones -->
        <div class="col-lg-4">
            <!-- Alertas Financieras -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-warning">
                        <i class="fas fa-exclamation-triangle"></i> Alertas Financieras
                    </h6>
                </div>
                <div class="card-body">
                    @if(isset($alertas) && count($alertas) > 0)
                        @foreach($alertas as $alerta)
                            <div class="alert alert-{{ $alerta['tipo'] }} alert-dismissible fade show" role="alert">
                                <strong><i class="fas fa-{{ $alerta['icono'] }}"></i> {{ $alerta['titulo'] }}</strong>
                                <br>{{ $alerta['mensaje'] }}
                                <button type="button" class="close" data-dismiss="alert">
                                    <span>&times;</span>
                                </button>
                            </div>
                        @endforeach
                    @else
                        <div class="text-center text-muted py-3">
                            <i class="fas fa-check-circle fa-2x mb-2"></i>
                            <p>No hay alertas financieras</p>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Resumen de Comisiones -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-info">
                        <i class="fas fa-percentage"></i> Comisiones
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-6">
                            <div class="border-right">
                                <div class="h5 font-weight-bold text-primary">
                                    {{ format_currency($comisiones['total'] ?? 0, 2) }}
                                </div>
                                <div class="text-xs text-muted">Total Comisiones</div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="h5 font-weight-bold text-success">
                                {{ $comisiones['porcentaje'] ?? 0 }}%
                            </div>
                            <div class="text-xs text-muted">Promedio</div>
                        </div>
                    </div>
                    <hr>
                    <div class="small">
                        <div class="d-flex justify-content-between mb-1">
                            <span>Reservas:</span>
                            <span class="font-weight-bold">{{ format_currency($comisiones['reservas'] ?? 0, 2) }}</span>
                        </div>
                        <div class="d-flex justify-content-between mb-1">
                            <span>Eventos:</span>
                            <span class="font-weight-bold">{{ format_currency($comisiones['eventos'] ?? 0, 2) }}</span>
                        </div>
                        <div class="d-flex justify-content-between">
                            <span>Membresías:</span>
                            <span class="font-weight-bold">{{ format_currency($comisiones['membresias'] ?? 0, 2) }}</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Acciones Rápidas -->
            <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-bolt"></i> Acciones Rápidas
                    </h6>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <button class="btn btn-outline-primary btn-sm" onclick="generarReporte()">
                            <i class="fas fa-file-pdf"></i> Generar Reporte PDF
                        </button>
                        <button class="btn btn-outline-success btn-sm" onclick="exportarExcel()">
                            <i class="fas fa-file-excel"></i> Exportar a Excel
                        </button>
                        <button class="btn btn-outline-info btn-sm" data-toggle="modal" data-target="#modalConciliacion">
                            <i class="fas fa-balance-scale"></i> Conciliación Bancaria
                        </button>
                        <button class="btn btn-outline-warning btn-sm" onclick="revisarPendientes()">
                            <i class="fas fa-clock"></i> Revisar Pendientes
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Filtro Avanzado -->
<div class="modal fade" id="modalFiltroAvanzado" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Filtros Avanzados</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <form id="formFiltroAvanzado">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="rango_monto_min" class="form-label">Monto Mínimo</label>
                                <div class="input-group">
                                    <span class="input-group-text">{{ currency_symbol() }}</span>
                                    <input type="number" class="form-control" id="rango_monto_min" name="monto_min" 
                                           step="0.01" min="0">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="rango_monto_max" class="form-label">Monto Máximo</label>
                                <div class="input-group">
                                    <span class="input-group-text">{{ currency_symbol() }}</span>
                                    <input type="number" class="form-control" id="rango_monto_max" name="monto_max" 
                                           step="0.01" min="0">
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="metodo_pago_avanzado" class="form-label">Método de Pago</label>
                                <select class="form-select" id="metodo_pago_avanzado" name="metodo_pago">
                                    <option value="">Todos los métodos</option>
                                    <option value="tarjeta_credito">Tarjeta de Crédito</option>
                                    <option value="tarjeta_debito">Tarjeta de Débito</option>
                                    <option value="transferencia">Transferencia Bancaria</option>
                                    <option value="efectivo">Efectivo</option>
                                    <option value="paypal">PayPal</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="estado_avanzado" class="form-label">Estado</label>
                                <select class="form-select" id="estado_avanzado" name="estado">
                                    <option value="">Todos los estados</option>
                                    <option value="completado">Completado</option>
                                    <option value="pendiente">Pendiente</option>
                                    <option value="fallido">Fallido</option>
                                    <option value="reembolsado">Reembolsado</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="usuario_buscar" class="form-label">Usuario</label>
                        <select class="form-select" id="usuario_buscar" name="usuario_id">
                            <option value="">Buscar usuario...</option>
                        </select>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Incluir en el análisis:</label>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="incluir_comisiones" name="incluir_comisiones" checked>
                            <label class="form-check-label" for="incluir_comisiones">
                                Comisiones de plataforma
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="incluir_reembolsos" name="incluir_reembolsos" checked>
                            <label class="form-check-label" for="incluir_reembolsos">
                                Reembolsos procesados
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="incluir_pendientes" name="incluir_pendientes">
                            <label class="form-check-label" for="incluir_pendientes">
                                Pagos pendientes
                            </label>
                        </div>
                    </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-filter"></i> Aplicar Filtros
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Conciliación Bancaria -->
<div class="modal fade" id="modalConciliacion" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Conciliación Bancaria</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <form id="formConciliacion">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="archivo_banco" class="form-label">Archivo del Banco</label>
                        <input type="file" class="form-control" id="archivo_banco" name="archivo" 
                               accept=".csv,.xlsx,.xls" required>
                        <div class="form-text">Formatos permitidos: CSV, Excel</div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="fecha_conciliacion" class="form-label">Fecha de Conciliación</label>
                        <input type="date" class="form-control" id="fecha_conciliacion" name="fecha" 
                               value="{{ date('Y-m-d') }}" required>
                    </div>
                    
                    <div class="alert alert-info">
                        <h6><i class="fas fa-info-circle"></i> Información:</h6>
                        <p class="mb-0">El archivo debe contener las columnas: fecha, monto, referencia, descripción</p>
                    </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-upload"></i> Procesar Conciliación
                    </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').on('change', function() {
        if ($(this).val() === 'personalizado') {
            $('#fechaDesdeContainer, #fechaHastaContainer').show();
        } else {
            $('#fechaDesdeContainer, #fechaHastaContainer').hide();
        }
    });
    
    // Inicializar Select2 para búsqueda de usuarios
    $('#usuario_buscar').select2({
        placeholder: 'Buscar usuario...',
        ajax: {
            url: '{{ route("admin.usuarios.search") }}',
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return { q: params.term };
            },
            processResults: function (data) {
                return {
                    results: data.map(function(user) {
                        return {
                            id: user.id,
                            text: user.nombre + ' ' + user.apellido + ' (' + user.email + ')'
                        };
                    })
                };
            }
        }
    });
    
    // Manejar formularios
    $('#filtrosForm').on('submit', function(e) {
        e.preventDefault();
        aplicarFiltros();
    });
    
    $('#formFiltroAvanzado').on('submit', function(e) {
        e.preventDefault();
        aplicarFiltrosAvanzados();
    });
    
    $('#formConciliacion').on('submit', function(e) {
        e.preventDefault();
        procesarConciliacion();
    });
    
    // Auto-actualizar cada 5 minutos
    setInterval(function() {
        actualizarDatos();
    }, 300000);
});

function inicializarGraficos() {
    // Gráfico de Ingresos
    const ctxIngresos = document.getElementById('graficoIngresos').getContext('2d');
    new Chart(ctxIngresos, {
        type: 'line',
        data: {
            labels: {!! json_encode($grafico_ingresos['labels'] ?? []) !!},
            datasets: [{
                label: 'Ingresos',
                data: {!! json_encode($grafico_ingresos['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 '{{ currency_symbol() }}' + value.toLocaleString();
                        }
                    }
                }
            },
            plugins: {
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return 'Ingresos: {{ currency_symbol() }}' + context.parsed.y.toLocaleString();
                        }
                    }
                }
            }
        }
    });
    
    // Gráfico de Métodos de Pago
    const ctxMetodos = document.getElementById('graficoMetodosPago').getContext('2d');
    new Chart(ctxMetodos, {
        type: 'doughnut',
        data: {
            labels: {!! json_encode(array_column($metodos_pago ?? [], 'nombre')) !!},
            datasets: [{
                data: {!! json_encode(array_column($metodos_pago ?? [], 'valor')) !!},
                backgroundColor: {!! json_encode(array_column($metodos_pago ?? [], 'color')) !!}
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                },
                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 + ': ' + percentage + '%';
                        }
                    }
                }
            }
        }
    });
}

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

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

function aplicarFiltrosAvanzados() {
    const formData = new FormData($('#formFiltroAvanzado')[0]);
    const params = new URLSearchParams(formData);
    $('#modalFiltroAvanzado').modal('hide');
    window.location.href = '{{ route("admin.pagos.dashboard") }}?' + params.toString();
}

function actualizarDatos() {
    // Mostrar indicador de carga
    Swal.fire({
        title: 'Actualizando datos...',
        allowOutsideClick: false,
        didOpen: () => {
            Swal.showLoading();
        }
    });
    
    $.ajax({
        url: '{{ route("admin.pagos.dashboard.refresh") }}',
        method: 'GET',
        success: function(response) {
            Swal.close();
            location.reload();
        },
        error: function() {
            Swal.fire('Error', 'No se pudieron actualizar los datos', 'error');
        }
    });
}

function cambiarVistaGrafico(vista) {
    $.ajax({
        url: '{{ route("admin.pagos.dashboard.grafico") }}',
        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 gráfico', 'error');
        }
    });
}

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

function procesarReembolso(transaccionId) {
    Swal.fire({
        title: '¿Procesar reembolso?',
        text: 'Esta acción iniciará el proceso de reembolso',
        icon: 'question',
        showCancelButton: true,
        confirmButtonText: 'Sí, procesar',
        cancelButtonText: 'Cancelar'
    }).then((result) => {
        if (result.isConfirmed) {
            window.location.href = `{{ route('admin.pagos.reembolsos.create') }}?transaccion_id=${transaccionId}`;
        }
    });
}

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

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

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

function revisarPendientes() {
    window.location.href = '{{ route("admin.pagos.transacciones") }}?estado=pendiente';
}

function procesarConciliacion() {
    const formData = new FormData($('#formConciliacion')[0]);
    
    $.ajax({
        url: '{{ route("admin.pagos.conciliacion") }}',
        method: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function(response) {
            $('#modalConciliacion').modal('hide');
            Swal.fire('Éxito', response.message, 'success')
                .then(() => location.reload());
        },
        error: function(xhr) {
            const message = xhr.responseJSON?.message || 'No se pudo procesar la conciliación';
            Swal.fire('Error', message, 'error');
        }
    });
}
</script>
@endpush