@extends('layouts.user')
@section('title', 'Dashboard')
@section('topbar-title', 'Dashboard')

@section('content')
<div class="page-header">
    <div>
        <h1>Welcome, {{ auth()->user()->name }}! 👋</h1>
        <p style="color:var(--muted);font-size:0.85rem;margin-top:4px;">Here's an overview of your licenses and activity.</p>
    </div>
    <a href="{{ route('home') }}" class="btn btn-primary btn-sm"><i class="fa fa-plus"></i> Buy License</a>
</div>

<div class="stats-grid">
    <div class="stat-card">
        <div class="stat-icon green"><i class="fa fa-key"></i></div>
        <div class="stat-val">{{ $stats['active_licenses'] }}</div>
        <div class="stat-label">Active Licenses</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon purple"><i class="fa fa-layer-group"></i></div>
        <div class="stat-val">{{ $stats['total_licenses'] }}</div>
        <div class="stat-label">Total Licenses</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon blue"><i class="fa fa-receipt"></i></div>
        <div class="stat-val">{{ $stats['total_orders'] }}</div>
        <div class="stat-label">Total Orders</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon amber"><i class="fa fa-clock"></i></div>
        <div class="stat-val">{{ $stats['pending_orders'] }}</div>
        <div class="stat-label">Pending Orders</div>
    </div>
</div>

<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;">
    <!-- Recent Licenses -->
    <div class="card">
        <div class="card-header">
            <h3><i class="fa fa-key" style="color:var(--accent);"></i> Recent Licenses</h3>
            <a href="{{ route('user.licenses.index') }}" class="btn btn-outline btn-sm">View All</a>
        </div>
        <div style="overflow-x:auto;">
            @if($recentLicenses->isEmpty())
            <div style="padding:30px;text-align:center;color:var(--muted);font-size:0.85rem;">
                <i class="fa fa-key" style="font-size:2rem;margin-bottom:10px;display:block;opacity:0.3;"></i>
                No licenses yet. <a href="{{ route('home') }}" style="color:var(--accent);">Buy one now!</a>
            </div>
            @else
            <table>
                <thead>
                    <tr><th>Product</th><th>IP</th><th>Status</th><th></th></tr>
                </thead>
                <tbody>
                    @foreach($recentLicenses as $lic)
                    <tr>
                        <td style="font-weight:600;">{{ $lic->product->name }}</td>
                        <td style="font-family:monospace;font-size:0.8rem;color:var(--muted);">{{ $lic->valid_ip }}</td>
                        <td><span class="badge badge-{{ strtolower($lic->status) }}">{{ $lic->status }}</span></td>
                        <td><a href="{{ route('user.licenses.show', $lic) }}" class="btn btn-outline btn-sm">View</a></td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
            @endif
        </div>
    </div>

    <!-- Recent Orders -->
    <div class="card">
        <div class="card-header">
            <h3><i class="fa fa-receipt" style="color:var(--accent);"></i> Recent Orders</h3>
            <a href="{{ route('user.orders') }}" class="btn btn-outline btn-sm">View All</a>
        </div>
        <div style="overflow-x:auto;">
            @if($recentOrders->isEmpty())
            <div style="padding:30px;text-align:center;color:var(--muted);font-size:0.85rem;">
                <i class="fa fa-receipt" style="font-size:2rem;margin-bottom:10px;display:block;opacity:0.3;"></i>
                No orders yet.
            </div>
            @else
            <table>
                <thead>
                    <tr><th>Invoice</th><th>Product</th><th>Amount</th><th>Status</th></tr>
                </thead>
                <tbody>
                    @foreach($recentOrders as $order)
                    <tr>
                        <td style="font-size:0.78rem;color:var(--muted);">{{ $order->invoice_number }}</td>
                        <td style="font-weight:600;">{{ $order->plan->product->name }}</td>
                        <td>${{ number_format($order->amount, 2) }}</td>
                        <td><span class="badge badge-{{ $order->status }}">{{ ucfirst($order->status) }}</span></td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
            @endif
        </div>
    </div>
</div>

@if(auth()->user()->company)
<div class="card" style="margin-top:20px;padding:20px;display:flex;align-items:center;gap:16px;">
    <div style="width:44px;height:44px;background:rgba(108,99,255,0.1);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:1.1rem;flex-shrink:0;">
        <i class="fa fa-building"></i>
    </div>
    <div>
        <div style="font-weight:600;">{{ auth()->user()->company }}</div>
        <div style="font-size:0.78rem;color:var(--muted);">{{ auth()->user()->email }} @if(auth()->user()->phone) · {{ auth()->user()->phone }} @endif</div>
    </div>
    <a href="{{ route('user.profile') }}" class="btn btn-outline btn-sm" style="margin-left:auto;">Edit Profile</a>
</div>
@endif
@endsection