@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <h1><i class="fas fa-chart-bar text-primary me-3"></i>Reporte de Pagos</h1>
                <div>
                    <button onclick="window.print()" class="btn btn-outline-secondary me-2">
                        <i class="fas fa-print me-2"></i>Imprimir
                    </button>
                    <a href="{{ route('pagos.index') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left me-2"></i>Volver
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Estadísticas Generales -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card text-white bg-primary">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="text-white-50 mb-1">Total Pagos</h6>
                            <h3 class="mb-0">{{ $estadisticas['total_pagos'] }}</h3>
                        </div>
                        <i class="fas fa-file-invoice-dollar fa-2x opacity-50"></i>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="card text-white bg-success">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="text-white-50 mb-1">Monto Total</h6>
                            <h3 class="mb-0">Bs {{ number_format($estadisticas['monto_total'], 2) }}</h3>
                        </div>
                        <i class="fas fa-money-bill-wave fa-2x opacity-50"></i>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="card text-white bg-warning">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="text-white-50 mb-1">Pendientes</h6>
                            <h3 class="mb-0">{{ $estadisticas['pagos_pendientes'] }}</h3>
                        </div>
                        <i class="fas fa-clock fa-2x opacity-50"></i>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="card text-white bg-info">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="text-white-50 mb-1">Verificados</h6>
                            <h3 class="mb-0">{{ $estadisticas['pagos_verificados'] }}</h3>
                        </div>
                        <i class="fas fa-check-circle fa-2x opacity-50"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Gráficos -->
    <div class="row mb-4">
        <!-- Por Método de Pago -->
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-wallet me-2"></i>Pagos por Método</h5>
                </div>
                <div class="card-body">
                    <canvas id="chartMetodos" height="250"></canvas>
                </div>
            </div>
        </div>

        <!-- Por Estado -->
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-tasks me-2"></i>Pagos por Estado</h5>
                </div>
                <div class="card-body">
                    <canvas id="chartEstados" height="250"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Tabla Detallada por Método -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-table me-2"></i>Detalle por Método de Pago</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>Método</th>
                                    <th class="text-center">Cantidad</th>
                                    <th class="text-end">Monto Total</th>
                                    <th class="text-center">Porcentaje</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($estadisticas['por_metodo'] as $metodo)
                                    <tr>
                                        <td>
                                            <i class="fas fa-{{ 
                                                $metodo['metodo'] == 'efectivo' ? 'money-bill' : 
                                                ($metodo['metodo'] == 'transferencia' ? 'exchange-alt' : 
                                                ($metodo['metodo'] == 'tarjeta' ? 'credit-card' : 'qr-code'))
                                            }} me-2"></i>
                                            {{ ucfirst(str_replace('_', ' ', $metodo['metodo'] ?? 'N/A')) }}
                                        </td>
                                        <td class="text-center">
                                            <span class="badge bg-primary">{{ $metodo['cantidad'] }}</span>
                                        </td>
                                        <td class="text-end">
                                            <strong>Bs {{ number_format($metodo['monto'], 2) }}</strong>
                                        </td>
                                        <td class="text-center">
                                            <div class="progress" style="height: 20px;">
                                                <div class="progress-bar" role="progressbar" 
                                                     style="width: {{ $metodo['porcentaje'] }}%"
                                                     aria-valuenow="{{ $metodo['porcentaje'] }}" 
                                                     aria-valuemin="0" 
                                                     aria-valuemax="100">
                                                    {{ number_format($metodo['porcentaje'], 1) }}%
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                            <tfoot>
                                <tr class="table-active">
                                    <th>TOTAL</th>
                                    <th class="text-center">{{ $estadisticas['total_pagos'] }}</th>
                                    <th class="text-end">Bs {{ number_format($estadisticas['monto_total'], 2) }}</th>
                                    <th class="text-center">100%</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Tabla Detallada por Estado -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-info-circle me-2"></i>Detalle por Estado</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>Estado</th>
                                    <th class="text-center">Cantidad</th>
                                    <th class="text-end">Monto Total</th>
                                    <th class="text-center">Porcentaje</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($estadisticas['por_estado'] as $estado)
                                    <tr>
                                        <td>
                                            <span class="badge bg-{{ 
                                                $estado['estado'] == 'verificado' ? 'success' : 
                                                ($estado['estado'] == 'pendiente' ? 'warning' : 'danger')
                                            }}">
                                                {{ ucfirst($estado['estado']) }}
                                            </span>
                                        </td>
                                        <td class="text-center">
                                            <span class="badge bg-primary">{{ $estado['cantidad'] }}</span>
                                        </td>
                                        <td class="text-end">
                                            <strong>Bs {{ number_format($estado['monto'], 2) }}</strong>
                                        </td>
                                        <td class="text-center">
                                            {{ number_format($estado['porcentaje'], 1) }}%
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
    // Gráfico de Métodos de Pago
    const ctxMetodos = document.getElementById('chartMetodos').getContext('2d');
    new Chart(ctxMetodos, {
        type: 'doughnut',
        data: {
            labels: [
                @foreach($estadisticas['por_metodo'] as $metodo)
                    '{{ ucfirst(str_replace("_", " ", $metodo["metodo"] ?? "N/A")) }}',
                @endforeach
            ],
            datasets: [{
                data: [
                    @foreach($estadisticas['por_metodo'] as $metodo)
                        {{ $metodo['cantidad'] }},
                    @endforeach
                ],
                backgroundColor: [
                    '#36a2eb',
                    '#ff6384',
                    '#4bc0c0',
                    '#ff9f40',
                    '#9966ff'
                ]
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom'
                },
                title: {
                    display: false
                }
            }
        }
    });

    // Gráfico de Estados
    const ctxEstados = document.getElementById('chartEstados').getContext('2d');
    new Chart(ctxEstados, {
        type: 'bar',
        data: {
            labels: [
                @foreach($estadisticas['por_estado'] as $estado)
                    '{{ ucfirst($estado["estado"]) }}',
                @endforeach
            ],
            datasets: [{
                label: 'Cantidad de Pagos',
                data: [
                    @foreach($estadisticas['por_estado'] as $estado)
                        {{ $estado['cantidad'] }},
                    @endforeach
                ],
                backgroundColor: [
                    @foreach($estadisticas['por_estado'] as $estado)
                        '{{ $estado["estado"] == "verificado" ? "#28a745" : ($estado["estado"] == "pendiente" ? "#ffc107" : "#dc3545") }}',
                    @endforeach
                ]
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        stepSize: 1
                    }
                }
            }
        }
    });
</script>

<style>
    @media print {
        .btn, .card-header h5 i {
            display: none !important;
        }
        .card {
            page-break-inside: avoid;
        }
    }
</style>
@endpush
@endsection