@extends('layouts.app')

@section('title', 'Super Admin Dashboard')
@section('page-title', 'Platform Dashboard')
@section('page-subtitle', 'Active, trial, new, and expired tenants')

@section('content')
<div class="row g-3 mb-4">
    @foreach([
        ['Active tenants', $activeTenants, 'bi-building-check', route('super.tenants.index', ['view' => 'active'])],
        ['Trial tenants', $trialTenants, 'bi-hourglass-split', route('super.tenants.index', ['view' => 'trial'])],
        ['New tenants', $newTenants, 'bi-stars', route('super.tenants.index', ['view' => 'new'])],
        ['Expired tenants', $expiredTenants, 'bi-exclamation-triangle', route('super.tenants.index', ['view' => 'expired'])],
    ] as [$label, $value, $icon, $url])
        <div class="col-md-6 col-xl-3">
            <a class="card metric-card text-decoration-none text-reset" href="{{ $url }}">
                <div class="card-body d-flex justify-content-between">
                    <div>
                        <div class="text-muted small">{{ $label }}</div>
                        <div class="h3 mb-0">{{ $value }}</div>
                    </div>
                    <i class="bi {{ $icon }} fs-2 text-info"></i>
                </div>
            </a>
        </div>
    @endforeach
</div>

<div class="row g-3 mb-4">
    <div class="col-md-3">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-body">
                <div class="text-muted small">Total tenants</div>
                <div class="h4 mb-0">{{ $tenantsTotal }}</div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <a href="{{ route('super.plans.index') }}" class="card border-0 shadow-sm h-100 text-reset text-decoration-none">
            <div class="card-body">
                <div class="text-muted small">Active plans</div>
                <div class="h4 mb-0">{{ $activePlans }}</div>
            </div>
        </a>
    </div>
    <div class="col-md-3">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-body">
                <div class="text-muted small">Monthly revenue</div>
                <div class="h4 mb-0">{{ number_format($monthlyRevenue, 2) }}</div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-body">
                <div class="text-muted small">Open tickets</div>
                <div class="h4 mb-0">{{ $openTickets }}</div>
            </div>
        </div>
    </div>
</div>

<div class="row g-3 mb-4">
    <div class="col-md-6">
        <a href="{{ route('super.agents.index', ['status' => 'active']) }}" class="card border-0 shadow-sm h-100 text-reset text-decoration-none">
            <div class="card-body d-flex justify-content-between align-items-start">
                <div>
                    <div class="text-muted small">Active merchants</div>
                    <div class="h4 mb-0">{{ $activeAgents }}</div>
                </div>
                <i class="bi bi-person-check fs-3 text-success"></i>
            </div>
        </a>
    </div>
    <div class="col-md-6">
        <a href="{{ route('super.agents.index', ['status' => 'pending']) }}" class="card border-0 shadow-sm h-100 text-reset text-decoration-none">
            <div class="card-body d-flex justify-content-between align-items-start">
                <div>
                    <div class="text-muted small">Pending merchant signups</div>
                    <div class="h4 mb-0">{{ $pendingAgents }}</div>
                </div>
                <i class="bi bi-hourglass-split fs-3 text-warning"></i>
            </div>
        </a>
    </div>
</div>

<div class="row g-4">
    <div class="col-lg-7">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white fw-semibold">New tenants</div>
            <div class="table-responsive">
                <table class="table mb-0">
                    <thead><tr><th>Company</th><th>Tenant state</th><th>Plan</th><th></th></tr></thead>
                    <tbody>
                    @foreach($newTenantsList as $tenant)
                        <tr>
                            <td>
                                <div class="fw-semibold">{{ $tenant->name }}</div>
                                <small class="text-muted">Joined {{ $tenant->created_at?->diffForHumans() }}</small>
                            </td>
                            <td>
                                @if($tenant->isExpired())
                                    <span class="badge text-bg-warning">Expired</span>
                                @elseif($tenant->isOnTrial())
                                    <span class="badge text-bg-success">Trial</span>
                                @else
                                    <span class="badge text-bg-secondary">{{ ucfirst($tenant->status) }}</span>
                                @endif
                            </td>
                            <td>{{ $tenant->plan?->name ?? 'None' }}</td>
                            <td><a href="{{ route('super.tenants.show', $tenant) }}" class="btn btn-sm btn-outline-primary">Open</a></td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="col-lg-5">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white fw-semibold">Pending payments</div>
            <div class="list-group list-group-flush">
                @forelse($pendingPayments as $payment)
                    <a class="list-group-item list-group-item-action" href="{{ route('super.billing.index') }}">
                        <div class="fw-semibold">{{ $payment->tenant?->name }} - {{ number_format($payment->amount, 2) }}</div>
                        <small class="text-muted">{{ $payment->plan?->name }} · {{ $payment->reference }}</small>
                    </a>
                @empty
                    <div class="list-group-item text-muted">No pending payments.</div>
                @endforelse
            </div>
        </div>
    </div>
</div>
@endsection
