@php
if (!isset($vendorViewBySuperAdmin)) {
    $vendorViewBySuperAdmin = false;
}
@endphp

{{-- Central Admin Stats --}}
@if (hasCentralAccess() && !$vendorViewBySuperAdmin)

<br><br><br>
<div class="header pb-5 pt-2 pt-md-7">
    <div class="container-fluid">
        <div class="header-body" x-cloak x-data="{
            totalVendors: {{ $totalVendors }},
            totalActiveVendors: {{ $totalActiveVendors }},
            totalCampaigns: {{ $totalCampaigns }},
            messagesInQueue: {{ $messagesInQueue }},
            totalContacts: {{ $totalContacts }},
            totalMessagesProcessed: {{ $totalMessagesProcessed }}
        }">
            <!-- Row 1 -->
            <div class="row">
                <div class="col-md-6 col-lg col-sm-12">
                    <div class="card card-stats mb-4 mb-xl-0">
                        <div class="card-body">
                            <div class="row">
                                <div class="col">
                                    <h5 class="card-title text-uppercase text-muted mb-0">{{ __tr('Total Vendors') }}</h5>
                                    <span class="h2 font-weight-bold mb-0" x-text="__Utils.formatAsLocaleNumber(totalVendors)"></span>
                                </div>
                                <div class="col-auto">
                                    <div class="icon icon-shape bg-danger text-white rounded-circle shadow">
                                        <i class="fas fa-store"></i>
                                    </div>
                                </div>
                            </div>
                            <p class="mt-3 mb-0 text-muted text-sm">
                                <span>{{ __tr('Total Vendors in the system') }}</span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg col-sm-12">
                    <div class="card card-stats mb-4 mb-xl-0">
                        <div class="card-body">
                            <div class="row">
                                <div class="col">
                                    <h5 class="card-title text-uppercase text-muted mb-0">{{ __tr('Total Active Vendors') }}</h5>
                                    <span class="h2 font-weight-bold mb-0" x-text="__Utils.formatAsLocaleNumber(totalActiveVendors)"></span>
                                </div>
                                <div class="col-auto">
                                    <div class="icon icon-shape bg-danger text-white rounded-circle shadow">
                                        <i class="fas fa-store"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md col-sm-12">
                    <div class="card card-stats mb-4 mb-xl-0">
                        <div class="card-body">
                            <div class="row">
                                <div class="col">
                                    <h5 class="card-title text-uppercase text-muted mb-0">{{ __tr('Total Contacts') }}</h5>
                                    <span class="h2 font-weight-bold mb-0" x-text="__Utils.formatAsLocaleNumber(totalContacts)"></span>
                                </div>
                                <div class="col-auto">
                                    <div class="icon icon-shape bg-danger text-white rounded-circle shadow">
                                        <i class="fas fa-users"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Row 2 -->
            <div class="row mt-md-4">
                <div class="col-md-6 col-lg col-sm-12">
                    <div class="card card-stats mb-4 mb-xl-0">
                        <div class="card-body">
                            <div class="row">
                                <div class="col">
                                    <h5 class="card-title text-uppercase text-muted mb-0">{{ __tr('Total Campaigns') }}</h5>
                                    <span class="h2 font-weight-bold mb-0" x-text="__Utils.formatAsLocaleNumber(totalCampaigns)"></span>
                                </div>
                                <div class="col-auto">
                                    <div class="icon icon-shape bg-primary text-white rounded-circle shadow">
                                        <i class="fas fa-bullhorn"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg col-sm-12">
                    <div class="card card-stats mb-4 mb-xl-0">
                        <div class="card-body">
                            <div class="row">
                                <div class="col">
                                    <h5 class="card-title text-uppercase text-muted mb-0">{{ __tr('Messages in Queue') }}</h5>
                                    <span class="h2 font-weight-bold mb-0" x-text="__Utils.formatAsLocaleNumber(messagesInQueue)"></span>
                                </div>
                                <div class="col-auto">
                                    <div class="icon icon-shape bg-primary text-white rounded-circle shadow">
                                        <i class="fas fa-stream"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md col-sm-12">
                    <div class="card card-stats mb-4 mb-xl-0">
                        <div class="card-body">
                            <div class="row">
                                <div class="col">
                                    <h5 class="card-title text-uppercase text-muted mb-0">{{ __tr('Messages Processed') }}</h5>
                                    <span class="h2 font-weight-bold mb-0" x-text="__Utils.formatAsLocaleNumber(totalMessagesProcessed)"></span>
                                </div>
                                <div class="col-auto">
                                    <div class="icon icon-shape bg-primary text-white rounded-circle shadow">
                                        <i class="fas fa-tasks"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endif

{{-- Vendor / User Stats (Modern Cards) --}}
@if(hasVendorAccess() || hasVendorUserAccess() || $vendorViewBySuperAdmin)
<marquee style="width:100%; padding:10px; background:#18542d; color:#ffff; font-size:1.2rem; border-radius:8px;" scrollamount="5">
   Welcome to WapsChat! Powered by the official WhatsApp API, WapsChat lets you send unlimited bulk messages safely, no bans, no limits. Elevate your support team's performance while smart bots handle the heavy lifting for you! 
</marquee>
<div class="container-fluid mt-5">
    <div class="dashboard-stats-grid">
        <div class="row g-4">
            @if (hasVendorAccess('manage_contacts'))
                <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12">
                    <div class="stat-card">
                        <div class="stat-icon bg-gradient-info">
                            <i class="fas fa-user"></i>
                        </div>
                        <div class="stat-content">
                            <h6 class="stat-title text-muted">{{ __tr('Total Contacts') }}</h6>
                            <div class="stat-value">{{ __tr($totalContacts) }}</div>
                        </div>
                        @if(!$vendorViewBySuperAdmin)
                            <a href="{{ route('vendor.contact.read.list_view') }}" class="stat-link">
                                {{ __tr('Manage Contacts') }}
                            </a>
                        @endif
                    </div>
                </div>
            @endif

            @if (hasVendorAccess('manage_contacts'))
                <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12">
                    <div class="stat-card">
                        <div class="stat-icon bg-gradient-primary">
                            <i class="fas fa-users"></i>
                        </div>
                        <div class="stat-content">
                            <h6 class="stat-title text-muted">{{ __tr('Total Groups') }}</h6>
                            <div class="stat-value">{{ __tr($totalGroups) }}</div>
                        </div>
                        @if(!$vendorViewBySuperAdmin)
                            <a href="{{ route('vendor.contact.group.read.list_view') }}" class="stat-link">
                                {{ __tr('Manage Groups') }}
                            </a>
                        @endif
                    </div>
                </div>
            @endif

            @if (hasVendorAccess('manage_campaigns'))
                <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12">
                    <div class="stat-card">
                        <div class="stat-icon bg-gradient-danger">
                            <i class="fas fa-bullhorn"></i>
                        </div>
                        <div class="stat-content">
                            <h6 class="stat-title text-muted">{{ __tr('Total Campaigns') }}</h6>
                            <div class="stat-value">{{ __tr($totalCampaigns) }}</div>
                        </div>
                        @if(!$vendorViewBySuperAdmin)
                            <a href="{{ route('vendor.campaign.read.list_view') }}" class="stat-link">
                                {{ __tr('Manage Campaigns') }}
                            </a>
                        @endif
                    </div>
                </div>
            @endif

            @if (hasVendorAccess('manage_templates'))
                <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12">
                    <div class="stat-card">
                        <div class="stat-icon bg-gradient-indigo">
                            <i class="fas fa-layer-group"></i>
                        </div>
                        <div class="stat-content">
                            <h6 class="stat-title text-muted">{{ __tr('Total Templates') }}</h6>
                            <div class="stat-value">{{ __tr($totalTemplates) }}</div>
                        </div>
                        @if(!$vendorViewBySuperAdmin)
                            <a href="{{ route('vendor.whatsapp_service.templates.read.list_view') }}" class="stat-link">
                                {{ __tr('Manage Templates') }}
                            </a>
                        @endif
                    </div>
                </div>
            @endif

            @if (hasVendorAccess('manage_bot_replies'))
                <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12">
                    <div class="stat-card">
                        <div class="stat-icon bg-gradient-success">
                            <i class="fas fa-robot"></i>
                        </div>
                        <div class="stat-content">
                            <h6 class="stat-title text-muted">{{ __tr('Total Bot Replies') }}</h6>
                            <div class="stat-value">{{ __tr($totalBotReplies) }}</div>
                        </div>
                        @if(!$vendorViewBySuperAdmin)
                            <a href="{{ route('vendor.bot_reply.read.list_view') }}" class="stat-link">
                                {{ __tr('Manage Bot Replies') }}
                            </a>
                        @endif
                    </div>
                </div>
            @endif

            @if (hasVendorAccess('administrative'))
                <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12">
                    <div class="stat-card">
                        <div class="stat-icon bg-gradient-warning">
                            <i class="fas fa-user-tie"></i>
                        </div>
                        <div class="stat-content">
                            <h6 class="stat-title text-muted">{{ __tr('Active Team Members') }}</h6>
                            <div class="stat-value">{{ __tr($activeTeamMembers) }}</div>
                        </div>
                        @if(!$vendorViewBySuperAdmin)
                            <a href="{{ route('vendor.user.read.list_view') }}" class="stat-link">
                                {{ __tr('Manage Team Member') }}
                            </a>
                        @endif
                    </div>
                </div>
            @endif

            @if (hasVendorAccess('manage_campaigns'))
                <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12">
                    <div class="stat-card">
                        <div class="stat-icon bg-gradient-purple">
                            <i class="fas fa-stream"></i>
                        </div>
                        <div class="stat-content">
                            <h6 class="stat-title text-muted">{{ __tr('Messages in Queue') }}</h6>
                            <div class="stat-value">{{ __tr($messagesInQueue) }}</div>
                        </div>
                    </div>
                </div>
            @endif

            @if (hasVendorAccess('messaging'))
                <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12">
                    <div class="stat-card">
                        <div class="stat-icon bg-gradient-teal">
                            <i class="fas fa-tasks"></i>
                        </div>
                        <div class="stat-content">
                            <h6 class="stat-title text-muted">{{ __tr('Messages Processed') }}</h6>
                            <div class="stat-value">{{ __tr($totalMessagesProcessed) }}</div>
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>

<style>
.dashboard-stats-grid {
    margin: 1.5rem 0 2rem;
}
.stat-card {
    background:#1d401e; 
    border-radius: 20px;
    padding: 1rem;
    box-shadow: 0 8px 50px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.03);
    height: 90%;
    display: flex;
    flex-direction: column;
}
.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: #fff;
    background: #0d170d;
}
.stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    color: white;
    font-size: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.bg-gradient-info { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.bg-gradient-primary { background: linear-gradient(135deg, #6366f1, #4f46e5); }
.bg-gradient-danger { background: linear-gradient(135deg, #ef4444, #dc2626); }
.bg-gradient-indigo { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.bg-gradient-success { background: linear-gradient(135deg, #10b981, #047857); }
.bg-gradient-warning { background: linear-gradient(135deg, #f59e0b, #d97706); }
.bg-gradient-purple { background: linear-gradient(135deg, #a855f7, #9333ea); }
.bg-gradient-teal { background: linear-gradient(135deg, #0d9488, #0f766e); }
.stat-content { flex: 1; }
.stat-title {
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    
}
.stat-value {
    font-size: 1.75rem;
    font-weight: 800;
    color: #fff;
    margin: 0.25rem 0;
}
.stat-link {
    display: inline-block;
    margin-top: auto;
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: color 0.2s;
    margin-top: 1rem;
}
.stat-link:hover {
    color: #7c3aed;
    text-decoration: underline;
}
@media (max-width: 768px) {
    .stat-card { padding: 1.25rem; }
    .stat-value { font-size: 1.5rem; }
}
@media (max-width: 576px) {
    .stat-value { font-size: 1.35rem; }
}
</style>
@endif