@extends('layouts.admin')

@section('content')
<div class="welcome-hero-banner mb-4" style="background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 55%, #4f46e5 100%);">
    <div>
        <div class="d-flex align-items-center mb-1">
            <span class="badge badge-warning text-dark font-weight-bold px-2 py-1 mr-2" style="border-radius: 6px; font-size: 0.75rem;">
                <i class="bi bi-stars mr-1"></i> MODO SUPERADMIN SAAS
            </span>
            <span class="text-white-50 small">Control Central Multi-Empresa &bull; Licencias, Planes y Facturación Cloud</span>
        </div>
        <h2 class="hero-title mb-1">
            <i class="bi bi-cloud-check-fill text-info mr-2"></i>
            Centro de Control SaaS — DevMedic Cloud
        </h2>
        <div class="hero-subtitle">
            <span>Administración global de empresas médicas, planes por cupo de pacientes, módulos por valor y cobros de licencias.</span>
        </div>
    </div>
    <div class="d-flex flex-wrap align-items-center mt-3 mt-lg-0" style="gap: 8px;">
        <a href="{{ route('admin.saas.empresas.create') }}" class="btn btn-light text-primary font-weight-bold shadow-sm" style="border-radius: 10px;">
            <i class="bi bi-building-add mr-1"></i> Crear Empresa
        </a>
        <a href="{{ route('admin.saas.licencias.index') }}" class="btn btn-warning text-dark font-weight-bold shadow-sm" style="border-radius: 10px;">
            <i class="bi bi-key-fill mr-1"></i> Vender Licencia
        </a>
        <a href="{{ route('admin.saas.planes.index') }}" class="btn btn-outline-light font-weight-bold" style="border-radius: 10px;">
            <i class="bi bi-layers-fill mr-1"></i> Planes y Módulos
        </a>
    </div>
</div>

<!-- Tarjetas KPI SuperAdmin SaaS -->
<div class="row">
    <div class="col-xl-3 col-md-6 mb-3">
        <div class="card border-0 shadow-sm h-100" style="border-radius: 14px; border-left: 4px solid #2563eb !important;">
            <div class="card-body p-3">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <span class="text-uppercase text-muted font-weight-bold small">Empresas / Clínicas</span>
                        <h3 class="font-weight-bold text-dark mb-1 mt-1">{{ $totalEmpresas }}</h3>
                        <span class="badge badge-success">{{ $empresasActivas }} Activas</span>
                        @if($empresasSuspendidas > 0)
                            <span class="badge badge-danger ml-1">{{ $empresasSuspendidas }} Suspendidas</span>
                        @endif
                    </div>
                    <div class="rounded-circle d-flex align-items-center justify-content-center" style="width: 50px; height: 50px; background: rgba(37,99,235,0.12); color: #2563eb;">
                        <i class="bi bi-buildings-fill" style="font-size: 1.5rem;"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-3">
        <div class="card border-0 shadow-sm h-100" style="border-radius: 14px; border-left: 4px solid #10b981 !important;">
            <div class="card-body p-3">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <span class="text-uppercase text-muted font-weight-bold small">Ingresos por Licencias</span>
                        <h3 class="font-weight-bold text-success mb-1 mt-1">${{ number_format($ingresosTotales, 2) }}</h3>
                        <span class="text-muted small"><i class="bi bi-calendar-check text-success"></i> Este mes: <b>${{ number_format($ingresosMes, 2) }}</b></span>
                    </div>
                    <div class="rounded-circle d-flex align-items-center justify-content-center" style="width: 50px; height: 50px; background: rgba(16,185,129,0.12); color: #10b981;">
                        <i class="bi bi-cash-coin" style="font-size: 1.5rem;"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-3">
        <div class="card border-0 shadow-sm h-100" style="border-radius: 14px; border-left: 4px solid #7c3aed !important;">
            <div class="card-body p-3">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <span class="text-uppercase text-muted font-weight-bold small">Licencias Vigentes</span>
                        <h3 class="font-weight-bold text-dark mb-1 mt-1">{{ $licenciasActivas }}</h3>
                        <span class="badge badge-warning text-dark">{{ $licenciasPorVencer->count() }} por vencer (15d)</span>
                    </div>
                    <div class="rounded-circle d-flex align-items-center justify-content-center" style="width: 50px; height: 50px; background: rgba(124,58,237,0.12); color: #7c3aed;">
                        <i class="bi bi-key-fill" style="font-size: 1.5rem;"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-3">
        <div class="card border-0 shadow-sm h-100" style="border-radius: 14px; border-left: 4px solid #f59e0b !important;">
            <div class="card-body p-3">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <span class="text-uppercase text-muted font-weight-bold small">Pacientes en la Nube</span>
                        <h3 class="font-weight-bold text-dark mb-1 mt-1">{{ number_format($totalPacientesGlobal) }}</h3>
                        <span class="text-muted small"><i class="bi bi-people-fill text-warning"></i> {{ $totalUsuariosGlobal }} usuarios totales</span>
                    </div>
                    <div class="rounded-circle d-flex align-items-center justify-content-center" style="width: 50px; height: 50px; background: rgba(245,158,11,0.12); color: #f59e0b;">
                        <i class="bi bi-person-heart" style="font-size: 1.5rem;"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Fila: Resumen de Planes según Pacientes y Módulos + Gráfico de Ingresos SaaS -->
<div class="row">
    <div class="col-lg-7 mb-4">
        <div class="card card-outline card-primary shadow-sm h-100">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h3 class="card-title font-weight-bold">
                    <i class="bi bi-layers-half text-primary mr-1"></i> Planes SaaS (Por Cupo de Pacientes y Valor de Módulos)
                </h3>
                <a href="{{ route('admin.saas.planes.index') }}" class="btn btn-xs btn-primary font-weight-bold">
                    <i class="bi bi-gear-fill mr-1"></i> Configurar Planes
                </a>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="bg-light">
                            <tr>
                                <th>Plan</th>
                                <th class="text-center">Valor Mensual / Anual</th>
                                <th class="text-center">Cupo de Pacientes</th>
                                <th>Módulos Incluidos</th>
                                <th class="text-center">Empresas</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($planes as $plan)
                                <tr>
                                    <td>
                                        <span class="font-weight-bold" style="color: {{ $plan->color }};">
                                            <i class="bi bi-circle-fill mr-1" style="font-size: 0.6rem;"></i> {{ $plan->nombre }}
                                        </span>
                                        @if($plan->destacado)
                                            <span class="badge badge-warning text-dark ml-1">Popular</span>
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        <b>${{ number_format($plan->precio_mensual, 2) }}</b><small class="text-muted">/mes</small><br>
                                        <small class="text-success font-weight-bold">${{ number_format($plan->precio_anual, 2) }}/año</small>
                                    </td>
                                    <td class="text-center">
                                        @if(is_null($plan->max_pacientes) || $plan->max_pacientes <= 0)
                                            <span class="badge badge-success px-2 py-1"><i class="bi bi-infinity mr-1"></i> Ilimitados</span>
                                        @else
                                            <span class="badge badge-info px-2 py-1">Hasta {{ number_format($plan->max_pacientes) }}</span>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="d-flex flex-wrap" style="gap: 3px;">
                                            @foreach($plan->modulos ?? [] as $modKey)
                                                @if(isset($catalogoModulos[$modKey]))
                                                    <span class="badge badge-light border text-dark" style="font-size: 0.7rem;">
                                                        <i class="bi {{ $catalogoModulos[$modKey]['icono'] }} text-primary"></i>
                                                        {{ explode(',', $catalogoModulos[$modKey]['nombre'])[0] }}
                                                    </span>
                                                @endif
                                            @endforeach
                                        </div>
                                    </td>
                                    <td class="text-center">
                                        <span class="badge badge-pill badge-primary px-2 py-1">{{ $plan->empresas_count }}</span>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-5 mb-4">
        <div class="card card-outline card-success shadow-sm h-100">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h3 class="card-title font-weight-bold">
                    <i class="bi bi-graph-up-arrow text-success mr-1"></i> Ingresos Mensuales por Venta de Licencias ({{ date('Y') }})
                </h3>
                <a href="{{ route('admin.saas.pagos.index') }}" class="btn btn-xs btn-outline-success font-weight-bold">Ver Pagos</a>
            </div>
            <div class="card-body">
                <div style="height: 240px;">
                    <canvas id="saasRevenueChart"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Fila: Empresas Registradas y Licencias / Pagos Recientes -->
<div class="row">
    <div class="col-lg-7 mb-4">
        <div class="card card-outline card-info shadow-sm">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h3 class="card-title font-weight-bold">
                    <i class="bi bi-buildings text-info mr-1"></i> Empresas / Clínicas Clientes y Consumo de Pacientes
                </h3>
                <a href="{{ route('admin.saas.empresas.index') }}" class="btn btn-xs btn-info font-weight-bold">Ver Todas</a>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="bg-light">
                            <tr>
                                <th>Empresa / RUC</th>
                                <th>Plan Actual</th>
                                <th>Cupo de Pacientes</th>
                                <th class="text-center">Estado</th>
                                <th class="text-right">Acciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($empresasRecientes as $emp)
                                @php
                                    $pacCount = $emp->getPacientesCount();
                                    $pacMax = $emp->getMaxPacientes();
                                    $pct = $emp->getPorcentajePacientes();
                                @endphp
                                <tr>
                                    <td>
                                        <a href="{{ route('admin.saas.empresas.show', $emp->id) }}" class="font-weight-bold text-dark">
                                            {{ $emp->nombre }}
                                        </a>
                                        <div class="text-muted small">{{ $emp->codigo }} &bull; RUC: {{ $emp->ruc }}</div>
                                    </td>
                                    <td>
                                        <span class="badge badge-light border font-weight-bold" style="color: {{ $emp->plan->color ?? '#2563eb' }};">
                                            {{ $emp->plan->nombre ?? 'Sin Plan' }}
                                        </span>
                                        @if($emp->licenciaActiva)
                                            <div class="small text-muted">Vence: {{ $emp->licenciaActiva->fecha_vencimiento->format('d/m/Y') }}</div>
                                        @endif
                                    </td>
                                    <td style="min-width: 150px;">
                                        <div class="d-flex justify-content-between small mb-1">
                                            <span><b>{{ $pacCount }}</b> / {{ $pacMax ? number_format($pacMax) : 'Ilimitados' }}</span>
                                            @if($pacMax)
                                                <span class="text-muted">{{ $pct }}%</span>
                                            @endif
                                        </div>
                                        <div class="progress" style="height: 6px; border-radius: 4px;">
                                            <div class="progress-bar {{ $pct >= 90 ? 'bg-danger' : ($pct >= 70 ? 'bg-warning' : 'bg-primary') }}"
                                                 style="width: {{ $pacMax ? $pct : 25 }}%"></div>
                                        </div>
                                    </td>
                                    <td class="text-center">
                                        @if($emp->estado === 'ACTIVA')
                                            <span class="badge badge-success">ACTIVA</span>
                                        @elseif($emp->estado === 'PRUEBA')
                                            <span class="badge badge-info">DEMO</span>
                                        @else
                                            <span class="badge badge-danger">{{ $emp->estado }}</span>
                                        @endif
                                    </td>
                                    <td class="text-right">
                                        <div class="btn-group btn-group-sm">
                                            <a href="{{ route('admin.saas.empresas.show', $emp->id) }}" class="btn btn-outline-primary" title="Gestionar Empresa">
                                                <i class="bi bi-eye"></i>
                                            </a>
                                            <form action="{{ route('admin.saas.cambiar_empresa') }}" method="POST" class="d-inline">
                                                @csrf
                                                <input type="hidden" name="empresa_id" value="{{ $emp->id }}">
                                                <button type="submit" class="btn btn-outline-dark" title="Entrar a supervisar esta clínica">
                                                    <i class="bi bi-box-arrow-in-right"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-5 mb-4">
        <div class="card card-outline card-warning shadow-sm">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h3 class="card-title font-weight-bold">
                    <i class="bi bi-receipt text-warning mr-1"></i> Últimos Pagos de Licencias
                </h3>
                <a href="{{ route('admin.saas.pagos.index') }}" class="btn btn-xs btn-warning font-weight-bold">Gestionar Pagos</a>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="bg-light">
                            <tr>
                                <th>Recibo / Empresa</th>
                                <th>Fecha</th>
                                <th class="text-right">Monto</th>
                                <th class="text-center">PDF</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($ultimosPagos as $pago)
                                <tr>
                                    <td>
                                        <div class="font-weight-bold text-dark">{{ $pago->empresa->nombre ?? 'Empresa' }}</div>
                                        <small class="text-muted">{{ $pago->numero_comprobante }} &bull; {{ $pago->metodo_pago }}</small>
                                    </td>
                                    <td><small>{{ $pago->fecha_pago->format('d/m/Y') }}</small></td>
                                    <td class="text-right font-weight-bold text-success">${{ number_format($pago->monto_total, 2) }}</td>
                                    <td class="text-center">
                                        <a href="{{ route('admin.saas.pagos.pdf', $pago->id) }}" target="_blank" class="btn btn-xs btn-outline-secondary" title="Imprimir Recibo">
                                            <i class="bi bi-printer"></i>
                                        </a>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="text-center text-muted py-3">Sin pagos registrados aún.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="{{ url('plugins/chart.js/Chart.bundle.min.js') }}"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    var ctx = document.getElementById('saasRevenueChart');
    if (!ctx) return;

    new Chart(ctx.getContext('2d'), {
        type: 'bar',
        data: {
            labels: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
            datasets: [{
                label: 'Ingresos SaaS ($)',
                data: @json($ingresosMensualesChart),
                backgroundColor: 'rgba(16, 185, 129, 0.78)',
                borderColor: '#059669',
                borderWidth: 1.5
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            legend: { display: false },
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true,
                        callback: function(v) { return '$' + v; }
                    }
                }]
            }
        }
    });
});
</script>
@endsection