@extends('layouts.app', ['title' => 'Reportes Financieros y Operativos (Últimos 30 días)', 'menu' => 'admin'])

@section('content')

<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-4">
                        <div class="card bg-primary text-white">
                            <div class="card-body">
                                <h5 class="card-title text-white">Ingresos Totales</h5>
                                <h2 class="text-white mb-0">S/ {{ number_format($totalIncomeMonth, 2) }}</h2>
                                <br>
                                <i class="ri-money-dollar-circle-line position-absolute top-0 end-0 p-3 fs-1"></i>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card bg-success text-white">
                            <div class="card-body">
                                <h5 class="card-title text-white">Archivos Traducidos</h5>
                                <h2 class="text-white mb-0">{{ $totalFilesMonth }} <small class="fs-6">archivos</small></h2>
                                <br>
                                <i class="ri-file-text-line position-absolute top-0 end-0 p-3 fs-1"></i>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card bg-info text-white">
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-start">
                                    <div>
                                        <h5 class="card-title text-white mb-1">Ticket Promedio</h5>
                                        <h2 class="text-white mb-0">S/ {{ number_format($ticketAvg, 2) }}</h2>
                                        <i class="ri-shopping-cart-2-line position-absolute top-0 end-0 p-3 fs-1"></i>
                                    </div>
                                </div>

                                <div class="mt-1 d-flex align-items-center justify-content-between">
                                    <div>
                                        @if($ticketGrowth > 0)
                                            <span class="badge bg-success text-white border border-success border-opacity-25">
                                                <i class="ri-arrow-up-line"></i> {{ number_format($ticketGrowth, 1) }}%
                                            </span>
                                        @elseif($ticketGrowth < 0)
                                            <span class="badge bg-danger text-white border border-danger border-opacity-25">
                                                <i class="ri-arrow-down-line"></i> {{ number_format(abs($ticketGrowth), 1) }}%
                                            </span>
                                        @else
                                            <span class="badge bg-white bg-opacity-25 text-white">
                                                <i class="ri-subtract-line"></i> 0%
                                            </span>
                                        @endif
                                        <span class="text-white font-size-12 ms-1">vs mes anterior</span>
                                    </div>
                                    
                                    <div class="text-white font-size-12">
                                        en {{ $transactionsCount }} recargas
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-lg-6">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="card-title mb-4">Evolución de Ingresos (S/)</h4>
                                <div id="incomeChart"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="card-title mb-4">Volumen de Traducciones</h4>
                                <div id="usageChart"></div>
                            </div>
                        </div>
                    </div>
                </div>
    
                <div class="row">
                    <div class="col-lg-6">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="card-title mb-4">Idiomas Más Solicitados</h4>
                                <div id="langChart" class="d-flex justify-content-center"></div>
                            </div>
                        </div>
                    </div>
    
                    <div class="col-lg-6">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="card-title mb-4">Preferencia de Pago (Yape vs Plin)</h4>
                                <div id="paymentChart" class="d-flex justify-content-center"></div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-lg-6">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="card-title mb-4">Tasa de Éxito vs Fallo</h4>
                                <div id="statusChart" class="d-flex justify-content-center"></div>
                                <div class="text-center mt-3">
                                    <p class="text-muted mb-0">Monitorea los fallos para mejorar el servicio.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                
                    <div class="col-lg-6">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="card-title mb-4">Top 5 Mejores Clientes</h4>
                                <div class="table-responsive">
                                    <table class="table table-nowrap align-middle mb-0">
                                        <tbody>
                                            @forelse($topClients as $client)
                                            <tr>
                                                <td style="width: 40px;">
                                                    <div class="avatar-xs">
                                                        <span class="avatar-title rounded-circle bg-primary-subtle text-primary">
                                                            {{ substr($client->user->name ?? 'U', 0, 1) }}
                                                        </span>
                                                    </div>
                                                </td>
                                                <td>
                                                    <h5 class="font-size-14 mb-1">{{ $client->user->name ?? 'Usuario Eliminado' }}</h5>
                                                    <p class="text-muted mb-0 font-size-12">{{ $client->user->email ?? '' }}</p>
                                                </td>
                                                <td class="text-end">
                                                    <h5 class="font-size-14 mb-0 text-success">S/ {{ number_format($client->total_spent, 2) }}</h5>
                                                </td>
                                            </tr>
                                            @empty
                                            <tr>
                                                <td colspan="3" class="text-center">Aún no hay clientes top.</td>
                                            </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

<script>
    // --- DATOS PHP A JS ---
    var labels = {!! json_encode($chartLabels) !!};
    var incomeData = {!! json_encode($chartIncome) !!};
    var usageData = {!! json_encode($chartUsage) !!};
    
    var langLabels = {!! json_encode($langLabels) !!};
    var langData = {!! json_encode($langData) !!};
    
    var statusData = {!! json_encode($statusData) !!}; // [Completado, Fallido, Pendiente]

    var paymentLabels = {!! json_encode($paymentLabels) !!};
    var paymentData = {!! json_encode($paymentData) !!};

    // 1. Gráfico Ingresos (Barras)
    var optionsIncome = {
        series: [{ name: 'Ingresos', data: incomeData }],
        chart: { type: 'bar', height: 300, toolbar: { show: false } },
        colors: ['#556ee6'],
        plotOptions: { bar: { borderRadius: 4, columnWidth: '50%' } },
        dataLabels: { enabled: false },
        xaxis: { categories: labels },
        yaxis: { labels: { formatter: (val) => "S/ " + val } }
    };
    new ApexCharts(document.querySelector("#incomeChart"), optionsIncome).render();

    // 2. Gráfico Uso (Área)
    var optionsUsage = {
        series: [{ name: 'Archivos', data: usageData }],
        chart: { type: 'area', height: 300, toolbar: { show: false } },
        colors: ['#34c38f'],
        stroke: { curve: 'smooth', width: 2 },
        dataLabels: { enabled: false },
        xaxis: { categories: labels },
        fill: { opacity: 0.5 }
    };
    new ApexCharts(document.querySelector("#usageChart"), optionsUsage).render();

    // 3. Gráfico Idiomas (Pie)
    var optionsLang = {
        series: langData,
        labels: langLabels,
        chart: { type: 'pie', height: 300 },
        colors: ['#556ee6', '#34c38f', '#f1b44c', '#f46a6a', '#50a5f1'], // Paleta de colores variada
        legend: { position: 'bottom' },
        dataLabels: { enabled: true }
    };
    // Solo renderizar si hay datos
    if(langData.length > 0) {
        new ApexCharts(document.querySelector("#langChart"), optionsLang).render();
    } else {
        document.querySelector("#langChart").innerHTML = "<p class='text-center text-muted mt-5'>Sin datos aún</p>";
    }

    // 4. Gráfico Estados (Donut)
    var optionsStatus = {
        series: statusData, 
        labels: ['Completado', 'Fallido', 'Pendiente'],
        chart: { type: 'donut', height: 300 },
        colors: ['#34c38f', '#f46a6a', '#f1b44c'], // Verde, Rojo, Amarillo
        plotOptions: {
            pie: {
                donut: {
                    size: '65%',
                    labels: {
                        show: true,
                        total: {
                            show: true,
                            label: 'Total',
                            formatter: function (w) {
                                return w.globals.seriesTotals.reduce((a, b) => a + b, 0)
                            }
                        }
                    }
                }
            }
        },
        legend: { position: 'bottom' }
    };

    var optionsPayment = {
        series: paymentData,
        labels: paymentLabels,
        chart: { type: 'donut', height: 300 },
        colors: ['#743ee2', '#00d1d1'], // Morado (tipo Yape) y Turquesa (tipo Plin)
        plotOptions: {
            pie: {
                donut: {
                    size: '60%',
                    labels: {
                        show: true,
                        total: { show: true, label: 'Total Pagos' }
                    }
                }
            }
        },
        legend: { position: 'bottom' },
        dataLabels: { enabled: true }
    };

    // Renderizar solo si hay datos
    if(paymentData.length > 0) {
        new ApexCharts(document.querySelector("#paymentChart"), optionsPayment).render();
    } else {
        document.querySelector("#paymentChart").innerHTML = "<p class='text-center text-muted mt-5'>Sin pagos registrados aún</p>";
    }

    // Renderizar solo si hay algún job
    if(statusData.reduce((a, b) => a + b, 0) > 0) {
        new ApexCharts(document.querySelector("#statusChart"), optionsStatus).render();
    } else {
        document.querySelector("#statusChart").innerHTML = "<p class='text-center text-muted mt-5'>Sin datos aún</p>";
    }
</script>
@endpush