@extends('layouts.admin')

@section('title', 'Gestión de Pagos')
@section('page-title', 'Gestión de Pagos y Finanzas')

@section('content')
<div class="row mb-4">
    <!-- Filtros y búsqueda -->
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <form action="{{ route('admin.pagos.index') }}" method="GET" class="row g-3">
                    <div class="col-md-2">
                        <label class="form-label">Desde</label>
                        <input type="date" class="form-control" name="fecha_inicio" value="{{ request('fecha_inicio', date('Y-m-d', strtotime('-30 days'))) }}">
                    </div>
                    
                    <div class="col-md-2">
                        <label class="form-label">Hasta</label>
                        <input type="date" class="form-control" name="fecha_fin" value="{{ request('fecha_fin', date('Y-m-d')) }}">
                    </div>
                    
                    <div class="col-md-2">
                        <label class="form-label">Estado</label>
                        <select class="form-select" name="estado">
                            <option value="">Todos</option>
                            <option value="completado" {{ request('estado') == 'completado' ? 'selected' : '' }}>Completado</option>
                            <option value="pendiente" {{ request('estado') == 'pendiente' ? 'selected' : '' }}>Pendiente</option>
                            <option value="cancelado" {{ request('estado') == 'cancelado' ? 'selected' : '' }}>Cancelado</option>
                            <option value="reembolsado" {{ request('estado') == 'reembolsado' ? 'selected' : '' }}>Reembolsado</option>
                        </select>
                    </div>
                    
                    <div class="col-md-2">
                        <label class="form-label">Método de Pago</label>
                        <select class="form-select" name="metodo">
                            <option value="">Todos</option>
                            <option value="tarjeta" {{ request('metodo') == 'tarjeta' ? 'selected' : '' }}>Tarjeta</option>
                            <option value="transferencia" {{ request('metodo') == 'transferencia' ? 'selected' : '' }}>Transferencia</option>
                            <option value="efectivo" {{ request('metodo') == 'efectivo' ? 'selected' : '' }}>Efectivo</option>
                            <option value="paypal" {{ request('metodo') == 'paypal' ? 'selected' : '' }}>PayPal</option>
                        </select>
                    </div>
                    
                    <div class="col-md-2">
                        <label class="form-label">Cliente</label>
                        <input type="text" class="form-control" name="cliente" placeholder="Nombre o ID" value="{{ request('cliente') }}">
                    </div>
                    
                    <div class="col-md-2 d-flex align-items-end">
                        <button type="submit" class="btn btn-primary w-100">
                            <i class="fas fa-filter me-2"></i>Filtrar
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Resumen financiero -->
<div class="row mb-4">
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card border-left-success 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">{{ number_format($estadisticas['ingresos_totales'], 2) }} €</div>
                        <div class="text-xs text-muted mt-1">Período seleccionado</div>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-euro-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-info 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">
                            Transacciones</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $estadisticas['total_transacciones'] }}</div>
                        <div class="text-xs text-muted mt-1">{{ $estadisticas['completadas'] }} completadas</div>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-receipt 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 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">
                            Pendientes de Cobro</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($estadisticas['pendientes_cobro'], 2) }} €</div>
                        <div class="text-xs text-muted mt-1">{{ $estadisticas['pendientes'] }} transacciones</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 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">{{ number_format($estadisticas['reembolsos'], 2) }} €</div>
                        <div class="text-xs text-muted mt-1">{{ $estadisticas['reembolsados'] }} transacciones</div>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-undo-alt fa-2x text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Tabla de pagos -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h6 class="mb-0">Historial de Pagos</h6>
                <div>
                    <a href="{{ route('admin.pagos.exportar') }}" class="btn btn-sm btn-outline-primary me-2">
                        <i class="fas fa-download me-1"></i>Exportar CSV
                    </a>
                    <a href="{{ route('admin.pagos.create') }}" class="btn btn-sm btn-primary">
                        <i class="fas fa-plus me-1"></i>Registrar Pago
                    </a>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover" id="tablaPagos">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Fecha</th>
                                <th>Cliente</th>
                                <th>Concepto</th>
                                <th>Método</th>
                                <th>Importe</th>
                                <th>Estado</th>
                                <th>Acciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($pagos as $pago)
                                <tr>
                                    <td>{{ $pago->id }}</td>
                                    <td>{{ \Carbon\Carbon::parse($pago->fecha)->format('d/m/Y H:i') }}</td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="avatar-sm me-2">
                                                @if($pago->usuario->avatar)
                                                    <img src="{{ asset('storage/' . $pago->usuario->avatar) }}" alt="{{ $pago->usuario->nombre }}" class="rounded-circle">
                                                @else
                                                    <div class="avatar-circle bg-primary text-white">
                                                        {{ substr($pago->usuario->nombre, 0, 1) }}{{ substr($pago->usuario->apellidos, 0, 1) }}
                                                    </div>
                                                @endif
                                            </div>
                                            <div>
                                                <h6 class="mb-0">{{ $pago->usuario->nombre }} {{ $pago->usuario->apellidos }}</h6>
                                                <small class="text-muted">{{ $pago->usuario->email }}</small>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        @if($pago->reserva_id)
                                            <span class="badge bg-info me-1">Reserva #{{ $pago->reserva_id }}</span>
                                            {{ $pago->reserva->cancha->nombre }}
                                        @elseif($pago->evento_id)
                                            <span class="badge bg-warning me-1">Evento #{{ $pago->evento_id }}</span>
                                            {{ $pago->evento->nombre }}
                                        @elseif($pago->suscripcion_id)
                                            <span class="badge bg-success me-1">Suscripción #{{ $pago->suscripcion_id }}</span>
                                            {{ $pago->suscripcion->plan }}
                                        @else
                                            <span class="badge bg-secondary me-1">Otro</span>
                                            {{ $pago->concepto }}
                                        @endif
                                    </td>
                                    <td>
                                        @switch($pago->metodo_pago)
                                            @case('tarjeta')
                                                <span class="badge bg-primary"><i class="fas fa-credit-card me-1"></i> Tarjeta</span>
                                                @break
                                            @case('transferencia')
                                                <span class="badge bg-info"><i class="fas fa-university me-1"></i> Transferencia</span>
                                                @break
                                            @case('efectivo')
                                                <span class="badge bg-success"><i class="fas fa-money-bill-wave me-1"></i> Efectivo</span>
                                                @break
                                            @case('paypal')
                                                <span class="badge bg-primary"><i class="fab fa-paypal me-1"></i> PayPal</span>
                                                @break
                                            @default
                                                <span class="badge bg-secondary"><i class="fas fa-money-check me-1"></i> {{ $pago->metodo_pago }}</span>
                                        @endswitch
                                    </td>
                                    <td>
                                        <span class="fw-bold">{{ number_format($pago->importe, 2) }} €</span>
                                    </td>
                                    <td>
                                        @if($pago->estado == 'completado')
                                            <span class="badge bg-success">Completado</span>
                                        @elseif($pago->estado == 'pendiente')
                                            <span class="badge bg-warning">Pendiente</span>
                                        @elseif($pago->estado == 'cancelado')
                                            <span class="badge bg-danger">Cancelado</span>
                                        @elseif($pago->estado == 'reembolsado')
                                            <span class="badge bg-info">Reembolsado</span>
                                        @else
                                            <span class="badge bg-secondary">{{ $pago->estado }}</span>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="dropdown">
                                            <button class="btn btn-sm btn-icon" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                                <i class="fas fa-ellipsis-v"></i>
                                            </button>
                                            <ul class="dropdown-menu">
                                                <li>
                                                    <a class="dropdown-item" href="{{ route('admin.pagos.show', $pago->id) }}">
                                                        <i class="fas fa-eye me-2"></i>Ver Detalles
                                                    </a>
                                                </li>
                                                @if($pago->estado == 'pendiente')
                                                    <li>
                                                        <form action="{{ route('admin.pagos.cambiarEstado', $pago->id) }}" method="POST">
                                                            @csrf
                                                            @method('PUT')
                                                            <input type="hidden" name="estado" value="completado">
                                                            <button type="submit" class="dropdown-item text-success">
                                                                <i class="fas fa-check-circle me-2"></i>Marcar como Completado
                                                            </button>
                                                        </form>
                                                    </li>
                                                    <li>
                                                        <form action="{{ route('admin.pagos.cambiarEstado', $pago->id) }}" method="POST">
                                                            @csrf
                                                            @method('PUT')
                                                            <input type="hidden" name="estado" value="cancelado">
                                                            <button type="submit" class="dropdown-item text-danger">
                                                                <i class="fas fa-times-circle me-2"></i>Cancelar Pago
                                                            </button>
                                                        </form>
                                                    </li>
                                                @endif
                                                @if($pago->estado == 'completado')
                                                    <li>
                                                        <a class="dropdown-item" href="{{ route('admin.pagos.factura', $pago->id) }}" target="_blank">
                                                            <i class="fas fa-file-invoice me-2"></i>Generar Factura
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <button type="button" class="dropdown-item text-warning" data-bs-toggle="modal" data-bs-target="#reembolsoModal" data-pago-id="{{ $pago->id }}" data-pago-importe="{{ $pago->importe }}">
                                                            <i class="fas fa-undo-alt me-2"></i>Procesar Reembolso
                                                        </button>
                                                    </li>
                                                @endif
                                                <li><hr class="dropdown-divider"></li>
                                                <li>
                                                    <form action="{{ route('admin.pagos.destroy', $pago->id) }}" method="POST" class="delete-form">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="dropdown-item text-danger">
                                                            <i class="fas fa-trash-alt me-2"></i>Eliminar
                                                        </button>
                                                    </form>
                                                </li>
                                            </ul>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="8" class="text-center py-4">
                                        <i class="fas fa-receipt text-muted mb-2" style="font-size: 2.5rem;"></i>
                                        <p class="mb-0 text-muted">No se encontraron pagos</p>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                
                <div class="d-flex justify-content-end mt-3">
                    {{ $pagos->links('pagination.custom') }}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Gráficos financieros -->
<div class="row">
    <div class="col-lg-8 mb-4">
        <div class="card">
            <div class="card-header">
                <h6 class="mb-0">Ingresos por Período</h6>
            </div>
            <div class="card-body">
                <div class="chart-container" style="height: 300px;">
                    <canvas id="ingresosPorPeriodo"></canvas>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-lg-4 mb-4">
        <div class="card">
            <div class="card-header">
                <h6 class="mb-0">Distribución por Método de Pago</h6>
            </div>
            <div class="card-body">
                <div class="chart-container" style="height: 300px;">
                    <canvas id="distribucionMetodos"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal de Reembolso -->
<div class="modal fade" id="reembolsoModal" tabindex="-1" aria-labelledby="reembolsoModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="reembolsoModalLabel">Procesar Reembolso</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('admin.pagos.reembolsar') }}" method="POST">
                @csrf
                <div class="modal-body">
                    <input type="hidden" name="pago_id" id="reembolsoPagoId">
                    
                    <div class="alert alert-warning">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        Está a punto de procesar un reembolso. Esta acción puede afectar a reservas o suscripciones asociadas.
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Importe a reembolsar</label>
                        <div class="input-group">
                            <input type="number" class="form-control" name="importe" id="reembolsoImporte" step="0.01" required>
                            <span class="input-group-text">€</span>
                        </div>
                        <div class="form-text">Importe máximo: <span id="reembolsoMaximo">0.00</span> €</div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Motivo del reembolso</label>
                        <select class="form-select" name="motivo" required>
                            <option value="">Seleccionar motivo</option>
                            <option value="cancelacion_cliente">Cancelación por cliente</option>
                            <option value="cancelacion_sistema">Cancelación por el sistema</option>
                            <option value="error_cobro">Error en el cobro</option>
                            <option value="insatisfaccion">Cliente insatisfecho</option>
                            <option value="otro">Otro motivo</option>
                        </select>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Comentarios</label>
                        <textarea class="form-control" name="comentarios" rows="3"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-warning">Procesar Reembolso</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
.border-left-success {
    border-left: 4px solid #1cc88a;
}

.border-left-info {
    border-left: 4px solid #36b9cc;
}

.border-left-warning {
    border-left: 4px solid #f6c23e;
}

.border-left-danger {
    border-left: 4px solid #e74a3b;
}

.avatar-sm {
    width: 40px;
    height: 40px;
    overflow: hidden;
}

.avatar-sm img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 500;
}
</style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.0/dist/chart.min.js"></script>
<script>
$(document).ready(function() {
    // Inicializar DataTable
    $('#tablaPagos').DataTable({
        "paging": false,
        "info": false,
        "searching": false,
        "language": {
            "emptyTable": "No hay datos disponibles",
            "zeroRecords": "No se encontraron coincidencias"
        }
    });
    
    // Confirmación de eliminación
    $('.delete-form').on('submit', function(e) {
        e.preventDefault();
        
        const form = this;
        
        Swal.fire({
            title: '¿Estás seguro?',
            text: "Esta acción no se puede revertir",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Sí, eliminar',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                form.submit();
            }
        });
    });
    
    // Modal de reembolso
    $('#reembolsoModal').on('show.bs.modal', function (event) {
        const button = $(event.relatedTarget);
        const pagoId = button.data('pago-id');
        const pagoImporte = button.data('pago-importe');
        
        const modal = $(this);
        modal.find('#reembolsoPagoId').val(pagoId);
        modal.find('#reembolsoImporte').val(pagoImporte);
        modal.find('#reembolsoImporte').attr('max', pagoImporte);
        modal.find('#reembolsoMaximo').text(pagoImporte.toFixed(2));
    });
    
    // Gráfico de ingresos por período
    const ctxIngresos = document.getElementById('ingresosPorPeriodo').getContext('2d');
    const ingresosPorPeriodo = new Chart(ctxIngresos, {
        type: 'line',
        data: {
            labels: @json($graficos['ingresos']['labels']),
            datasets: [{
                label: 'Ingresos (€)',
                data: @json($graficos['ingresos']['data']),
                backgroundColor: 'rgba(78, 115, 223, 0.05)',
                borderColor: 'rgba(78, 115, 223, 1)',
                borderWidth: 2,
                pointBackgroundColor: 'rgba(78, 115, 223, 1)',
                pointBorderColor: '#fff',
                pointHoverRadius: 5,
                pointHoverBackgroundColor: 'rgba(78, 115, 223, 1)',
                pointHoverBorderColor: '#fff',
                pointHitRadius: 10,
                pointBorderWidth: 2,
                tension: 0.3,
                fill: true
            }]
        },
        options: {
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return context.parsed.y.toFixed(2) + ' €';
                        }
                    }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        callback: function(value) {
                            return value + ' €';
                        }
                    }
                }
            }
        }
    });
    
    // Gráfico de distribución por método de pago
    const ctxMetodos = document.getElementById('distribucionMetodos').getContext('2d');
    const distribucionMetodos = new Chart(ctxMetodos, {
        type: 'doughnut',
        data: {
            labels: @json($graficos['metodos']['labels']),
            datasets: [{
                data: @json($graficos['metodos']['data']),
                backgroundColor: [
                    'rgba(78, 115, 223, 0.8)',
                    'rgba(28, 200, 138, 0.8)',
                    'rgba(246, 194, 62, 0.8)',
                    'rgba(54, 185, 204, 0.8)',
                    'rgba(231, 74, 59, 0.8)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom'
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            const label = context.label || '';
                            const value = context.parsed || 0;
                            const total = context.dataset.data.reduce((a, b) => a + b, 0);
                            const percentage = Math.round((value / total) * 100);
                            return `${label}: ${percentage}% (${value})`;
                        }
                    }
                }
            },
            cutout: '65%'
        }
    });
});
</script>
@endpush