@extends('layouts.app')

@section('title', 'Dashboard')

@section('content')
<div class="page-header">
    <h1 class="page-title">Bienvenido, LicenciasPro</h1>
</div>

<div class="stats-grid">
    <div class="stat-card" style="border-left: 4px solid var(--primary);">
        <h3>Empresas Activas</h3>
        <div class="value">{{ $stats['empresas'] }}</div>
    </div>
    <div class="stat-card" style="border-left: 4px solid var(--success);">
        <h3>Licencias Activas</h3>
        <div class="value">{{ $stats['licencias_activas'] }}</div>
    </div>
    <div class="stat-card" style="border-left: 4px solid var(--warning);">
        <h3>Por Vencer (30d)</h3>
        <div class="value">{{ $stats['por_vencer'] }}</div>
    </div>
    <div class="stat-card" style="border-left: 4px solid var(--danger);">
        <h3>Ingresos del Mes</h3>
        <div class="value">S/ {{ number_format($stats['ingresos_mes'], 2) }}</div>
    </div>
</div>

<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 30px;">
    <div class="card">
        <h3 style="margin-bottom: 15px; font-size: 1.1rem; color: var(--text-muted);">Últimas Licencias</h3>
        <table class="table">
            <thead>
                <tr>
                    <th>Empresa</th>
                    <th>Tipo</th>
                    <th>Vence</th>
                </tr>
            </thead>
            <tbody>
                @forelse($ultimas_licencias as $l)
                <tr>
                    <td>{{ $l->empresa->razon_social }}</td>
                    <td><span class="badge badge-info">{{ $l->tipo }}</span></td>
                    <td>{{ \Carbon\Carbon::parse($l->fecha_vencimiento)->format('d/m/Y') }}</td>
                </tr>
                @empty
                <tr><td colspan="3">No hay datos</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div class="card">
        <h3 style="margin-bottom: 15px; font-size: 1.1rem; color: var(--text-muted);">Últimas Activaciones Locales</h3>
        <table class="table">
            <thead>
                <tr>
                    <th>Licencia</th>
                    <th>IP</th>
                    <th>Estado</th>
                </tr>
            </thead>
            <tbody>
                @forelse($ultimas_activaciones as $a)
                <tr>
                    <td>{{ $a->licencia->empresa->razon_social }}</td>
                    <td>{{ $a->ip_address }}</td>
                    <td>
                        @if($a->estado == 'EXITO')
                            <span class="badge badge-success">EXITO</span>
                        @else
                            <span class="badge badge-danger">{{ $a->estado }}</span>
                        @endif
                    </td>
                </tr>
                @empty
                <tr><td colspan="3">No hay datos</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<style>
    .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
    .stat-card { background: var(--bg-card); border: 1px solid var(--border-color); padding: 20px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
    .stat-card h3 { font-size: 0.9rem; color: var(--text-muted); font-weight: 500; margin-bottom: 10px; }
    .stat-card .value { font-size: 1.8rem; font-weight: 700; color: var(--text-main); }
    .table { width: 100%; border-collapse: collapse; }
    .table th, .table td { padding: 12px 15px; text-align: left; border-bottom: 1px solid var(--border-color); }
    .table th { font-weight: 600; color: var(--text-muted); font-size: 0.85rem; text-transform: uppercase; }
    .table tr:last-child td { border-bottom: none; }
    .badge { padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 600; }
    .badge-success { background: rgba(35, 134, 54, 0.2); color: #3fb950; }
    .badge-info { background: rgba(88, 166, 255, 0.2); color: var(--primary); }
    .badge-danger { background: rgba(248, 81, 73, 0.2); color: var(--danger); }
</style>
@endsection
