@extends('layouts.app')
@section('title', 'Super Admin Dashboard')
@section('content')
    <div class="content-heading">
        <div>
            Dashboard
            <small>System Overview & Analytics</small>
        </div>
    </div>

    <!-- START KPI cards box -->
    <div class="row">
        <div class="col-xl-3 col-md-6">
            <!-- START card -->
            <div class="card flex-row align-items-center align-items-stretch border-0">
                <div class="col-4 d-flex align-items-center bg-primary-dark justify-content-center rounded-left">
                    <em class="fas fa-building fa-3x"></em>
                </div>
                <div class="col-8 py-3 bg-primary rounded-right">
                    <div class="h2 mt-0">{{ $totalCompanies }}</div>
                    <div class="text-uppercase">Companies</div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6">
            <!-- START card -->
            <div class="card flex-row align-items-center align-items-stretch border-0">
                <div class="col-4 d-flex align-items-center bg-purple-dark justify-content-center rounded-left">
                    <em class="fas fa-users fa-3x"></em>
                </div>
                <div class="col-8 py-3 bg-purple rounded-right">
                    <div class="h2 mt-0">{{ $totalUsers }}</div>
                    <div class="text-uppercase">Users</div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6">
            <!-- START card -->
            <div class="card flex-row align-items-center align-items-stretch border-0">
                <div class="col-4 d-flex align-items-center bg-green-dark justify-content-center rounded-left">
                    <em class="fas fa-user-tie fa-3x"></em>
                </div>
                <div class="col-8 py-3 bg-green rounded-right">
                    <div class="h2 mt-0">{{ $totalClients }}</div>
                    <div class="text-uppercase">Clients</div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6">
            <!-- START card -->
            <div class="card flex-row align-items-center align-items-stretch border-0">
                <div class="col-4 d-flex align-items-center bg-info-dark justify-content-center rounded-left">
                    <em class="fas fa-money-bill-wave fa-3x"></em>
                </div>
                <div class="col-8 py-3 bg-info rounded-right">
                    <div class="h2 mt-0">${{ number_format($totalRevenue, 0) }}</div>
                    <div class="text-uppercase">Revenue</div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xl-3 col-md-6">
            <!-- START card -->
            <div class="card flex-row align-items-center align-items-stretch border-0">
                <div class="col-4 d-flex align-items-center bg-danger-dark justify-content-center rounded-left">
                    <em class="fas fa-file-invoice fa-3x"></em>
                </div>
                <div class="col-8 py-3 bg-danger rounded-right">
                    <div class="h2 mt-0">{{ $totalBillings }}</div>
                    <div class="text-uppercase">Billings</div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6">
            <!-- START card -->
            <div class="card flex-row align-items-center align-items-stretch border-0">
                <div class="col-4 d-flex align-items-center bg-warning-dark justify-content-center rounded-left">
                    <em class="fas fa-hand-holding-usd fa-3x"></em>
                </div>
                <div class="col-8 py-3 bg-warning rounded-right">
                    <div class="h2 mt-0">${{ number_format($totalCollected, 0) }}</div>
                    <div class="text-uppercase">Collected</div>
                </div>
            </div>
        </div>

        <div class="col-xl-6 col-md-6">
            <!-- START card -->
            <div class="card flex-row align-items-center align-items-stretch border-0">
                <div class="col-4 d-flex align-items-center bg-success-dark justify-content-center rounded-left">
                    <em class="fas fa-chart-line fa-3x"></em>
                </div>
                <div class="col-8 py-3 bg-success rounded-right">
                    <div class="h2 mt-0">{{ $totalRevenue > 0 ? number_format(($totalCollected / $totalRevenue) * 100, 1) : 0 }}%</div>
                    <div class="text-uppercase">Collection Rate</div>
                </div>
            </div>
        </div>
    </div>
    <!-- END KPI cards box -->

    <div class="row">
        <!-- START dashboard main content -->
        <div class="col-xl-9">
            <!-- START Recent Companies -->
            <div class="card card-default card-demo mb-4">
                <div class="card-header">
                    <a class="float-right" href="{{ route('companies.index') }}" data-toggle="tooltip" title="View all companies">
                        <em class="fas fa-arrow-right"></em>
                    </a>
                    <div class="card-title">Recent Companies</div>
                </div>
                <div class="card-wrapper">
                    <div class="card-body">
                        @if($recentCompanies->count() > 0)
                            <div class="table-responsive">
                                <table class="table table-sm table-hover mb-0">
                                    <thead class="bg-light">
                                        <tr>
                                            <th>Company Name</th>
                                            <th>Email</th>
                                            <th>Phone</th>
                                            <th>Status</th>
                                            <th>Clients</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($recentCompanies as $company)
                                            <tr>
                                                <td class="text-truncate"><strong>{{ $company->name }}</strong></td>
                                                <td>{{ $company->email }}</td>
                                                <td>{{ $company->phone }}</td>
                                                <td>
                                                    @if($company->is_active)
                                                        <span class="badge badge-success">Active</span>
                                                    @else
                                                        <span class="badge badge-danger">Inactive</span>
                                                    @endif
                                                </td>
                                                <td>{{ $company->clients->count() }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        @else
                            <div class="text-center py-4 text-muted">
                                <em class="fas fa-inbox fa-3x mb-2"></em>
                                <p>No companies yet</p>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
            <!-- END Recent Companies -->

            <!-- START Activity Logs -->
            <div class="card card-default card-demo">
                <div class="card-header">
                    <div class="card-title">System Activity Logs</div>
                </div>
                <div class="card-wrapper">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-hover table-sm">
                                <thead class="bg-light">
                                    <tr>
                                        <th>User</th>
                                        <th>Company</th>
                                        <th>Action</th>
                                        <th>Model Type</th>
                                        <th>Description</th>
                                        <th>Timestamp</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($activityLogs as $log)
                                        <tr>
                                            <td>
                                                @if($log->user)
                                                    <span class="badge badge-primary">{{ $log->user->name }}</span>
                                                @else
                                                    <span class="text-muted">System</span>
                                                @endif
                                            </td>
                                            <td>
                                                @if($log->company)
                                                    <span class="badge badge-info">{{ $log->company->name }}</span>
                                                @else
                                                    <span class="text-muted">-</span>
                                                @endif
                                            </td>
                                            <td>
                                                @if($log->action === 'created')
                                                    <span class="badge badge-success">CREATE</span>
                                                @elseif($log->action === 'updated')
                                                    <span class="badge badge-warning">UPDATE</span>
                                                @elseif($log->action === 'deleted')
                                                    <span class="badge badge-danger">DELETE</span>
                                                @else
                                                    <span class="badge badge-secondary">{{ strtoupper($log->action) }}</span>
                                                @endif
                                            </td>
                                            <td><code class="text-xs">{{ $log->model_type }}</code></td>
                                            <td>{{ Str::limit($log->description, 50) }}</td>
                                            <td><small class="text-muted">{{ $log->created_at->diffForHumans() }}</small></td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="6" class="text-center text-muted py-4">
                                                No activity logs found
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                        @if($activityLogs->hasPages())
                            <nav aria-label="Page navigation" class="mt-3">
                                {{ $activityLogs->links('pagination::bootstrap-4') }}
                            </nav>
                        @endif
                    </div>
                </div>
            </div>
            <!-- END Activity Logs -->
        </div>
        <!-- END dashboard main content -->

        <!-- START dashboard sidebar -->
        <aside class="col-xl-3">
            <!-- START Platform Stats -->
            <div class="card card-default mb-4">
                <div class="card-header">
                    <div class="card-title">System Stats</div>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <div class="d-flex justify-content-between mb-2">
                            <span>Avg Revenue/Company</span>
                            <strong>${{ $totalCompanies > 0 ? number_format($totalRevenue / $totalCompanies, 0) : 0 }}</strong>
                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="d-flex justify-content-between mb-2">
                            <span>Avg Clients/Company</span>
                            <strong>{{ $totalCompanies > 0 ? number_format($totalClients / $totalCompanies, 1) : 0 }}</strong>
                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="d-flex justify-content-between mb-2">
                            <span>Avg Users/Company</span>
                            <strong>{{ $totalCompanies > 0 ? number_format($totalUsers / $totalCompanies, 1) : 0 }}</strong>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END Platform Stats -->

            <!-- START Recent Clients -->
            <div class="card card-default">
                <div class="card-header">
                    <div class="card-title">Recent Clients</div>
                </div>
                <div class="card-body">
                    @if($recentClients->count() > 0)
                        <ul class="list-unstyled">
                            @foreach($recentClients->take(5) as $client)
                                <li class="mb-2">
                                    <small>
                                        <strong>{{ $client->name }}</strong>
                                        <br>
                                        <span class="text-muted">{{ $client->email }}</span>
                                    </small>
                                </li>
                            @endforeach
                        </ul>
                    @else
                        <p class="text-muted text-sm">No recent clients</p>
                    @endif
                </div>
            </div>
            <!-- END Recent Clients -->

            <!-- START Recent Payments -->
            <div class="card card-default mt-4">
                <div class="card-header">
                    <div class="card-title">Recent Payments</div>
                </div>
                <div class="card-body">
                    @if($recentPayments->count() > 0)
                        <ul class="list-unstyled">
                            @foreach($recentPayments->take(5) as $payment)
                                <li class="mb-2">
                                    <small>
                                        <strong>${{ number_format($payment->amount, 2) }}</strong>
                                        <br>
                                        <span class="text-muted">{{ $payment->created_at->diffForHumans() }}</span>
                                    </small>
                                </li>
                            @endforeach
                        </ul>
                    @else
                        <p class="text-muted text-sm">No recent payments</p>
                    @endif
                </div>
            </div>
            <!-- END Recent Payments -->
        </aside>
        <!-- END dashboard sidebar -->
    </div>

@endsection

@section('styles')
    <style>
        .bg-primary-dark {
            background-color: #5b68ff !important;
        }
        .bg-purple-dark {
            background-color: #7266ba !important;
        }
        .bg-green-dark {
            background-color: #27a376 !important;
        }
        .bg-info-dark {
            background-color: #1b9d9e !important;
        }
        .bg-danger-dark {
            background-color: #d32f2f !important;
        }
        .bg-warning-dark {
            background-color: #f57c00 !important;
        }
        .bg-success-dark {
            background-color: #388e3c !important;
        }
    </style>
@endsection