@extends('layouts.goberdata')

@section('title', 'Facturación')
@section('page_title', 'Facturación')
@section('page_sub', 'Vista alineada al diseño GoberData por rol')

@push('styles')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
@endpush

@section('content')
<div id="app" class="min-h-screen">
        <!-- Sidebar -->
<div class="flex flex-col">
            <!-- Header -->
            <header class="flex justify-between items-center p-6 gd-header shadow-sm">
                <div class="flex items-center space-x-4">
                    <a href="{{ url('/superadmin/dashboard') }}" class="text-white hover:text-emerald-100">
                        <i class="fas fa-arrow-left"></i>
                    </a>
                    <h1 class="text-2xl font-semibold text-white">
                        💳 Facturación y Planes
                    </h1>
                </div>
                <div class="flex items-center space-x-4">
                    <span class="text-white">Super Admin</span>
                    <i class="fas fa-user-circle text-white text-2xl"></i>
                </div>
            </header>

            <!-- Main Content -->
            <main class="bg-gray-100 p-3">
                <div class="w-full">

                    <!-- Estadísticas Generales -->
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
                        <div class="bg-white rounded-lg shadow-lg p-6">
                            <div class="flex items-center">
                                <div class="p-3 rounded-full bg-blue-100 text-blue-600">
                                    <i class="fas fa-dollar-sign text-2xl"></i>
                                </div>
                                <div class="ml-4">
                                    <p class="text-sm font-medium text-gray-600">Ingresos Totales</p>
                                    <p class="text-2xl font-bold text-gray-900" id="totalRevenue">$0</p>
                                </div>
                            </div>
                        </div>

                        <div class="bg-white rounded-lg shadow-lg p-6">
                            <div class="flex items-center">
                                <div class="p-3 rounded-full bg-green-100 text-green-600">
                                    <i class="fas fa-users text-2xl"></i>
                                </div>
                                <div class="ml-4">
                                    <p class="text-sm font-medium text-gray-600">Clientes Activos</p>
                                    <p class="text-2xl font-bold text-gray-900" id="activeClients">0</p>
                                </div>
                            </div>
                        </div>

                        <div class="bg-white rounded-lg shadow-lg p-6">
                            <div class="flex items-center">
                                <div class="p-3 rounded-full bg-yellow-100 text-yellow-600">
                                    <i class="fas fa-credit-card text-2xl"></i>
                                </div>
                                <div class="ml-4">
                                    <p class="text-sm font-medium text-gray-600">Facturas Pendientes</p>
                                    <p class="text-2xl font-bold text-gray-900" id="pendingInvoices">0</p>
                                </div>
                            </div>
                        </div>

                        <div class="bg-white rounded-lg shadow-lg p-6">
                            <div class="flex items-center">
                                <div class="p-3 rounded-full bg-purple-100 text-purple-600">
                                    <i class="fas fa-chart-line text-2xl"></i>
                                </div>
                                <div class="ml-4">
                                    <p class="text-sm font-medium text-gray-600">Crecimiento Mensual</p>
                                    <p class="text-2xl font-bold text-gray-900" id="monthlyGrowth">0%</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Gráficos -->
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
                        <!-- Ingresos por Mes -->
                        <div class="bg-white rounded-lg shadow-lg p-6">
                            <h3 class="text-lg font-semibold mb-4">📈 Ingresos por Mes</h3>
                            <div class="relative h-80 w-full">
                                <canvas id="revenueChart"></canvas>
                            </div>
                        </div>

                        <!-- Distribución de Planes -->
                        <div class="bg-white rounded-lg shadow-lg p-6">
                            <h3 class="text-lg font-semibold mb-4">📊 Distribución de Planes</h3>
                            <div class="relative h-80 w-full">
                                <canvas id="plansChart"></canvas>
                            </div>
                        </div>
                    </div>

                    <!-- Tabla de Clientes -->
                    <div class="bg-white rounded-lg shadow-lg p-6">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-lg font-semibold">👥 Clientes y Facturación</h3>
                            <button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">
                                <i class="fas fa-plus mr-2"></i>Nuevo Cliente
                            </button>
                        </div>

                        <div class="overflow-x-auto">
                            <table class="w-full">
                                <thead>
                                    <tr class="border-b">
                                        <th class="text-left p-3 font-semibold">Cliente</th>
                                        <th class="text-left p-3 font-semibold">Plan</th>
                                        <th class="text-left p-3 font-semibold">Estado</th>
                                        <th class="text-left p-3 font-semibold">Último Pago</th>
                                        <th class="text-left p-3 font-semibold">Próximo Pago</th>
                                        <th class="text-right p-3 font-semibold">Monto</th>
                                        <th class="text-center p-3 font-semibold">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody id="clientsTable">
                                    <tr>
                                        <td colspan="7" class="p-6 text-center text-gray-500">Cargando datos...</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                </div>
            </main>
        </div>
    </div>
@endsection

@push('scripts')
<script>
        let token = localStorage.getItem('token');
        let revenueChart, plansChart;

        document.addEventListener('DOMContentLoaded', function() {
            loadBillingData();
        });

        async function loadBillingData() {
            try {
                // Simular datos de facturación desde BD
                const billingData = {
                    stats: {
                        total_revenue: 125000,
                        active_clients: 23,
                        pending_invoices: 5,
                        monthly_growth: 15.2
                    },
                    revenue_by_month: [
                        { month: 'Ene', revenue: 8500 },
                        { month: 'Feb', revenue: 9200 },
                        { month: 'Mar', revenue: 10800 },
                        { month: 'Abr', revenue: 12500 },
                        { month: 'May', revenue: 14200 },
                        { month: 'Jun', revenue: 15800 },
                        { month: 'Jul', revenue: 17200 },
                        { month: 'Ago', revenue: 18900 },
                        { month: 'Sep', revenue: 20100 },
                        { month: 'Oct', revenue: 22500 }
                    ],
                    plans_distribution: [
                        { plan: 'Básico', count: 8, revenue: 2400 },
                        { plan: 'Pro', count: 12, revenue: 9600 },
                        { plan: 'Enterprise', count: 3, revenue: 15000 }
                    ],
                    clients: [
                        { name: 'Campaña Juan Jaramillo', plan: 'Pro', status: 'Activo', last_payment: '2025-10-15', next_payment: '2025-11-15', amount: 800 },
                        { name: 'Alcaldía Medellín', plan: 'Enterprise', status: 'Activo', last_payment: '2025-10-10', next_payment: '2025-11-10', amount: 5000 },
                        { name: 'Gobernación Valle', plan: 'Pro', status: 'Activo', last_payment: '2025-10-12', next_payment: '2025-11-12', amount: 800 },
                        { name: 'Presidencia Colombia', plan: 'Enterprise', status: 'Activo', last_payment: '2025-10-08', next_payment: '2025-11-08', amount: 5000 },
                        { name: 'Campaña Demo', plan: 'Básico', status: 'Pendiente', last_payment: '2025-09-20', next_payment: '2025-10-20', amount: 300 }
                    ]
                };

                updateStats(billingData.stats);
                renderRevenueChart(billingData.revenue_by_month);
                renderPlansChart(billingData.plans_distribution);
                renderClientsTable(billingData.clients);

            } catch (err) {
                console.error('Error loading billing data:', err);
            }
        }

        function updateStats(stats) {
            document.getElementById('totalRevenue').textContent = '$' + stats.total_revenue.toLocaleString();
            document.getElementById('activeClients').textContent = stats.active_clients;
            document.getElementById('pendingInvoices').textContent = stats.pending_invoices;
            document.getElementById('monthlyGrowth').textContent = '+' + stats.monthly_growth + '%';
        }

        function renderRevenueChart(data) {
            const ctx = document.getElementById('revenueChart').getContext('2d');
            if (revenueChart) revenueChart.destroy();

            revenueChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: data.map(d => d.month),
                    datasets: [{
                        label: 'Ingresos ($)',
                        data: data.map(d => d.revenue),
                        borderColor: 'rgb(59, 130, 246)',
                        backgroundColor: 'rgba(59, 130, 246, 0.1)',
                        tension: 0.3,
                        fill: true
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: { beginAtZero: true }
                    }
                }
            });
        }

        function renderPlansChart(data) {
            const ctx = document.getElementById('plansChart').getContext('2d');
            if (plansChart) plansChart.destroy();

            plansChart = new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: data.map(d => d.plan),
                    datasets: [{
                        data: data.map(d => d.count),
                        backgroundColor: [
                            'rgb(34, 197, 94)',
                            'rgb(59, 130, 246)',
                            'rgb(168, 85, 247)'
                        ]
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom'
                        }
                    }
                }
            });
        }

        function renderClientsTable(clients) {
            const tbody = document.getElementById('clientsTable');
            tbody.innerHTML = clients.map(client => `
                <tr class="border-b hover:bg-gray-50">
                    <td class="p-3 font-medium">${client.name}</td>
                    <td class="p-3">
                        <span class="px-2 py-1 rounded text-xs font-semibold ${
                            client.plan === 'Enterprise' ? 'bg-purple-100 text-purple-800' :
                            client.plan === 'Pro' ? 'bg-blue-100 text-blue-800' :
                            'bg-green-100 text-green-800'
                        }">${client.plan}</span>
                    </td>
                    <td class="p-3">
                        <span class="px-2 py-1 rounded text-xs font-semibold ${
                            client.status === 'Activo' ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'
                        }">${client.status}</span>
                    </td>
                    <td class="p-3 text-gray-600">${client.last_payment}</td>
                    <td class="p-3 text-gray-600">${client.next_payment}</td>
                    <td class="p-3 text-right font-semibold">$${client.amount.toLocaleString()}</td>
                    <td class="p-3 text-center">
                        <button class="text-blue-600 hover:text-blue-800 mr-2">
                            <i class="fas fa-edit"></i>
                        </button>
                        <button class="text-green-600 hover:text-green-800">
                            <i class="fas fa-file-invoice"></i>
                        </button>
                    </td>
                </tr>
            `).join('');
        }
    </script>
@endpush