@extends('layouts.admin')

@section('title', 'Reporte de Pagos')

@section('content')
<div class="container-fluid">
    <!-- Encabezado -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                <h4 class="mb-sm-0">Reporte de Pagos</h4>
                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('admin.reportes.index') }}">Reportes</a></li>
                        <li class="breadcrumb-item active">Pagos</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <!-- Filtros -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title mb-0">Filtros de Búsqueda</h4>
                </div>
                <div class="card-body">
                    <form method="GET" action="{{ route('admin.reportes.pagos') }}">
                        <div class="row g-3">
                            <div class="col-md-3">
                                <label for="fecha_inicio" class="form-label">Fecha Inicio</label>
                                <input type="date" class="form-control" id="fecha_inicio" name="fecha_inicio" 
                                       value="{{ $fechaInicio }}">
                            </div>
                            <div class="col-md-3">
                                <label for="fecha_fin" class="form-label">Fecha Fin</label>
                                <input type="date" class="form-control" id="fecha_fin" name="fecha_fin" 
                                       value="{{ $fechaFin }}">
                            </div>
                            <div class="col-md-3">
                                <label for="estado" class="form-label">Estado</label>
                                <select class="form-select" id="estado" name="estado">
                                    <option value="">Todos los estados</option>
                                    <option value="completado" {{ $estado == 'completado' ? 'selected' : '' }}>Completado</option>
                                    <option value="pendiente" {{ $estado == 'pendiente' ? 'selected' : '' }}>Pendiente</option>
                                    <option value="fallido" {{ $estado == 'fallido' ? 'selected' : '' }}>Fallido</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label for="metodo_pago" class="form-label">Método de Pago</label>
                                <select class="form-select" id="metodo_pago" name="metodo_pago">
                                    <option value="">Todos los métodos</option>
                                    @foreach($metodosPago as $metodo)
                                        <option value="{{ $metodo }}" {{ $metodoPago == $metodo ? 'selected' : '' }}>
                                            {{ ucfirst($metodo) }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-search me-1"></i>Filtrar
                                </button>
                                <a href="{{ route('admin.reportes.pagos') }}" class="btn btn-secondary">
                                    <i class="fas fa-undo me-1"></i>Limpiar
                                </a>
                                <a href="{{ route('admin.reportes.exportar', ['tipo' => 'pagos', 'fecha_inicio' => $fechaInicio, 'fecha_fin' => $fechaFin, 'estado' => $estado, 'metodo_pago' => $metodoPago]) }}" 
                                   class="btn btn-success">
                                    <i class="fas fa-file-excel me-1"></i>Exportar Excel
                                </a>
                                <a href="{{ route('admin.reportes.exportar-pagos-pdf', ['fecha_inicio' => $fechaInicio, 'fecha_fin' => $fechaFin, 'estado' => $estado, 'metodo_pago' => $metodoPago]) }}" 
                                   class="btn btn-danger">
                                    <i class="fas fa-file-pdf me-1"></i>Exportar PDF
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Estadísticas generales -->
    <div class="row">
        <div class="col-xl-3 col-md-6">
            <div class="card card-h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <span class="badge badge-soft-primary fs-2">
                                <i class="fas fa-credit-card"></i>
                            </span>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h6 class="mb-0">Total Pagos</h6>
                            <h4 class="my-1">{{ $totalPagos }}</h4>
                            <p class="text-muted mb-0">Período seleccionado</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card card-h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <span class="badge badge-soft-success fs-2">
                                <i class="fas fa-check-circle"></i>
                            </span>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h6 class="mb-0">Aceptados</h6>
                            <h4 class="my-1 text-success">{{ $pagosAceptados }}</h4>
                            <p class="text-muted mb-0">{{ $simboloMoneda }}{{ number_format($montoAceptados, 2) }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card card-h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <span class="badge badge-soft-warning fs-2">
                                <i class="fas fa-hourglass-half"></i>
                            </span>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h6 class="mb-0">Pendientes</h6>
                            <h4 class="my-1 text-warning">{{ $pagosPendientes }}</h4>
                            <p class="text-muted mb-0">{{ $simboloMoneda }}{{ number_format($montoPendientes, 2) }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card card-h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <span class="badge badge-soft-danger fs-2">
                                <i class="fas fa-times-circle"></i>
                            </span>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h6 class="mb-0">Rechazados</h6>
                            <h4 class="my-1 text-danger">{{ $pagosRechazados }}</h4>
                            <p class="text-muted mb-0">{{ $simboloMoneda }}{{ number_format($montoRechazados, 2) }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Métricas adicionales -->
    <div class="row">
        <div class="col-xl-3 col-md-6">
            <div class="card card-h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <span class="badge badge-soft-warning fs-2">
                                <i class="fas fa-dollar-sign"></i>
                            </span>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h6 class="mb-0">Monto Total</h6>
                            <h4 class="my-1 text-warning">{{ $simboloMoneda }}{{ number_format($montoTotal, 2) }}</h4>
                            <p class="text-muted mb-0">Todos los pagos</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card card-h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <span class="badge badge-soft-primary fs-2">
                                <i class="fas fa-chart-line"></i>
                            </span>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h6 class="mb-0">Promedio por Pago</h6>
                            <h4 class="my-1 text-primary">{{ $simboloMoneda }}{{ number_format($promedioMonto, 2) }}</h4>
                            <p class="text-muted mb-0">Ticket promedio</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card card-h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <span class="badge badge-soft-success fs-2">
                                <i class="fas fa-percentage"></i>
                            </span>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h6 class="mb-0">Tasa de Éxito</h6>
                            <h4 class="my-1 text-success">{{ number_format($tasaExito, 1) }}%</h4>
                            <p class="text-muted mb-0">Pagos exitosos</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card card-h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <span class="badge badge-soft-danger fs-2">
                                <i class="fas fa-exclamation-triangle"></i>
                            </span>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h6 class="mb-0">Tasa de Rechazo</h6>
                            <h4 class="my-1 text-danger">{{ number_format($tasaRechazo, 1) }}%</h4>
                            <p class="text-muted mb-0">Pagos rechazados</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Gráficos -->
    <div class="row">
        <div class="col-xl-8">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title mb-0">Evolución de Pagos por Día</h4>
                </div>
                <div class="card-body">
                    <canvas id="pagosPorDiaChart" height="300"></canvas>
                </div>
            </div>
        </div>
        <div class="col-xl-4">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title mb-0">Distribución por Estado</h4>
                </div>
                <div class="card-body">
                    <canvas id="pagosPorEstadoChart" height="300"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Análisis por método de pago -->
    <div class="row">
        <div class="col-xl-6">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title mb-0">Pagos por Método</h4>
                </div>
                <div class="card-body">
                    <canvas id="pagosPorMetodoChart" height="300"></canvas>
                </div>
            </div>
        </div>
        <div class="col-xl-6">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title mb-0">Análisis de Métodos de Pago</h4>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-nowrap mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>Método</th>
                                    <th>Total</th>
                                    <th>Exitosos</th>
                                    <th>Tasa Éxito</th>
                                    <th>Monto</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($pagosPorMetodo as $metodo)
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="flex-shrink-0 me-2">
                                                    <div class="avatar-xs">
                                                        <span class="avatar-title bg-primary-subtle text-primary rounded">
                                                            <i class="fas fa-credit-card"></i>
                                                        </span>
                                                    </div>
                                                </div>
                                                <div>
                                                    <h6 class="mb-0">{{ $metodo->nombre }}</h6>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <span class="badge bg-info-subtle text-info fs-6">
                                                {{ $metodo->total_pagos }}
                                            </span>
                                        </td>
                                        <td>
                                            <span class="badge bg-success-subtle text-success fs-6">
                                                {{ $metodo->pagos_exitosos }}
                                            </span>
                                        </td>
                                        <td>
                                            <div class="progress" style="height: 6px;">
                                                <div class="progress-bar bg-success" role="progressbar" 
                                                     style="width: {{ $metodo->tasa_exito }}%">
                                                </div>
                                            </div>
                                            <small class="text-muted">{{ number_format($metodo->tasa_exito, 1) }}%</small>
                                        </td>
                                        <td>
                                            <span class="text-success fw-medium">
                                                {{ $simboloMoneda }}{{ number_format($metodo->monto_total, 2) }}
                                            </span>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="5" class="text-center">No hay datos disponibles</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Tabla detallada de pagos -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title mb-0">Detalle de Pagos</h4>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered dt-responsive nowrap w-100" id="tablaPagos">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Usuario</th>
                                    <th>Reserva</th>
                                    <th>Método</th>
                                    <th>Monto</th>
                                    <th>Estado</th>
                                    <th>Referencia</th>
                                    <th>Fecha Pago</th>
                                    <th>Fecha Verificación</th>
                                    <th>Observaciones</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($pagos as $pago)
                                    <tr>
                                        <td>{{ $pago->id }}</td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="flex-shrink-0 me-2">
                                                    <div class="avatar-xs">
                                                        <span class="avatar-title bg-success-subtle text-success rounded-circle">
                                                            {{ strtoupper(substr($pago->reserva->usuario->name, 0, 1)) }}
                                                        </span>
                                                    </div>
                                                </div>
                                                <div>
                                                    <h6 class="mb-0">{{ $pago->reserva->usuario->name }}</h6>
                                                    <p class="text-muted mb-0 small">{{ $pago->reserva->usuario->email }}</p>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <div>
                                                <h6 class="mb-0">Reserva #{{ $pago->reserva->id }}</h6>
                                                <p class="text-muted mb-0 small">{{ $pago->reserva->cancha->nombre }}</p>
                                                <p class="text-muted mb-0 small">{{ \Carbon\Carbon::parse($pago->reserva->fecha)->format('d/m/Y') }}</p>
                                            </div>
                                        </td>
                                        <td>
                                            <span class="badge bg-primary-subtle text-primary">
                                                {{ ucfirst($pago->metodo_pago ?? 'N/A') }}
                                            </span>
                                        </td>
                                        <td>
                            <span class="text-success fw-medium">
                                {{ $simboloMoneda }}{{ number_format($pago->monto, 2) }}
                            </span>
                        </td>
                                        <td>
                                            @if(in_array($pago->estado, ['aceptado', 'completado']))
                                                <span class="badge bg-success">{{ $pago->estado == 'completado' ? 'Completado' : 'Aceptado' }}</span>
                                            @elseif(in_array($pago->estado, ['verificado', 'pendiente']))
                                                <span class="badge bg-warning">{{ $pago->estado == 'verificado' ? 'Verificado' : 'Pendiente' }}</span>
                                            @elseif(in_array($pago->estado, ['rechazado', 'fallido']))
                                                <span class="badge bg-danger">{{ $pago->estado == 'fallido' ? 'Fallido' : 'Rechazado' }}</span>
                                            @else
                                                <span class="badge bg-secondary">{{ ucfirst($pago->estado) }}</span>
                                            @endif
                                        </td>
                                        <td>
                                            @if($pago->referencia_pago)
                                                <code>{{ $pago->referencia_pago }}</code>
                                            @else
                                                <span class="text-muted">Sin referencia</span>
                                            @endif
                                        </td>
                                        <td>{{ optional($pago->fecha_pago)->format('d/m/Y H:i') ?? $pago->created_at->format('d/m/Y H:i') }}</td>
                                        <td>
                                            @if($pago->estado === 'completado' && $pago->fecha_pago)
                                                {{ $pago->fecha_pago->format('d/m/Y H:i') }}
                                            @else
                                                <span class="text-muted">No verificado</span>
                                            @endif
                                        </td>
                                        <td>
                                            @if($pago->observaciones)
                                                <span class="text-muted" title="{{ $pago->observaciones }}">
                                                    {{ Str::limit($pago->observaciones, 30) }}
                                                </span>
                                            @else
                                                <span class="text-muted">Sin observaciones</span>
                                            @endif
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="10" class="text-center py-4">
                                            <i class="fas fa-info-circle text-muted me-2"></i>No hay pagos disponibles
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                    
                    <!-- Paginación -->
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="pagination-block">
                                {{ $pagos->appends(request()->query())->links() }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Gráfico de evolución de pagos por día
const ctxDia = document.getElementById('pagosPorDiaChart').getContext('2d');
const pagosPorDiaData = @json($pagosPorDia);

new Chart(ctxDia, {
    type: 'line',
    data: {
        labels: pagosPorDiaData.map(item => item.fecha),
        datasets: [
            {
                label: 'Completados',
                data: pagosPorDiaData.map(item => item.aceptados),
                borderColor: '#0ab39c',
                backgroundColor: 'rgba(10, 179, 156, 0.1)',
                borderWidth: 2,
                fill: false
            },
            {
                label: 'Fallidos',
                data: pagosPorDiaData.map(item => item.rechazados),
                borderColor: '#f06292',
                backgroundColor: 'rgba(240, 98, 146, 0.1)',
                borderWidth: 2,
                fill: false
            }
        ]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                position: 'top'
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                ticks: {
                    stepSize: 1
                }
            }
        }
    }
});

// Gráfico de pagos por estado
const ctxEstado = document.getElementById('pagosPorEstadoChart').getContext('2d');
const pagosPorEstadoData = @json($pagosPorEstado);

new Chart(ctxEstado, {
    type: 'doughnut',
    data: {
        labels: pagosPorEstadoData.map(item => item.estado.charAt(0).toUpperCase() + item.estado.slice(1)),
        datasets: [{
            data: pagosPorEstadoData.map(item => item.total),
            backgroundColor: ['#0ab39c', '#17a2b8', '#f06292', '#f7b84b'],
            borderWidth: 2,
            borderColor: '#fff'
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                position: 'bottom',
                labels: {
                    padding: 20,
                    usePointStyle: true
                }
            }
        }
    }
});

// Gráfico de pagos por método
const ctxMetodo = document.getElementById('pagosPorMetodoChart').getContext('2d');
const pagosPorMetodoData = @json($pagosPorMetodo);

new Chart(ctxMetodo, {
    type: 'bar',
    data: {
        labels: pagosPorMetodoData.map(item => item.nombre),
        datasets: [{
            label: 'Total Pagos',
            data: pagosPorMetodoData.map(item => item.total_pagos),
            backgroundColor: '#405189',
            borderColor: '#405189',
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                display: false
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                ticks: {
                    stepSize: 1
                }
            }
        }
    }
});

// DataTable
$(document).ready(function() {
    $('#tablaPagos').DataTable({
        "pageLength": 10,
        "searching": true,
        "ordering": true,
        "info": true,
        "autoWidth": false,
        "responsive": true,
        "language": {
            "url": "//cdn.datatables.net/plug-ins/1.10.24/i18n/Spanish.json"
        }
    });
});
</script>
@endsection