@extends('layouts.app', ['title' => __tr('Dashboard')])
@php
$vendorIdOrUid = $vendorIdOrUid ?? getVendorUid();
if(!isset($vendorViewBySuperAdmin)) {
$vendorViewBySuperAdmin = null;
}
@endphp
<?php $isExtendedLicence = true; ?>
@section('content')
@if(hasCentralAccess())
@include('users.partials.header', [
'title' => __tr('__vendorTitle__ Dashboard', [
'__vendorTitle__' => $vendorInfo['title'] ?? getVendorSettings('title')
]),
'description' => '',
])
@else
@include('users.partials.header', [
'title' => __tr('Hi __userFullName__,', [
'__userFullName__' => getUserAuthInfo('profile.first_name')
]),
'description' => '',
])
@endif

@push('head')
<style>
/* Modern Vendor Dashboard Styles */
.vendor-dashboard-container {
    padding: 0 15px;
}

/* Stats Cards Grid */
.vendor-stats-grid {
    display: grid;
    /* grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); */
        grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.vendor-stat-card {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    color: #333;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none !important;
    display: block;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.vendor-stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.12);
    color: #333;
}

.vendor-stat-card::before {
    display: none;
}

.vendor-stat-card.contacts { background: #fff; }
.vendor-stat-card.groups { background: #fff; }
.vendor-stat-card.campaigns { background: #fff; }
.vendor-stat-card.templates { background: #fff; }
.vendor-stat-card.bot-replies { background: #fff; }
.vendor-stat-card.team { background: #fff; color: #333; }
.vendor-stat-card.queue { background: #fff; }
.vendor-stat-card.processed { background: #fff; }

.vendor-stat-icon {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 50px;
    height: 50px;
    background: #7c3aed;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
}

.vendor-stat-card.contacts .vendor-stat-icon { background: #7c3aed; }
.vendor-stat-card.groups .vendor-stat-icon { background: #10b981; }
.vendor-stat-card.campaigns .vendor-stat-icon { background: #f59e0b; }
.vendor-stat-card.templates .vendor-stat-icon { background: #3b82f6; }
.vendor-stat-card.bot-replies .vendor-stat-icon { background: #ec4899; }
.vendor-stat-card.team .vendor-stat-icon { background: #06b6d4; }
.vendor-stat-card.queue .vendor-stat-icon { background: #ef4444; }
.vendor-stat-card.processed .vendor-stat-icon { background: #8b5cf6; }

.vendor-stat-label {
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    margin-bottom: 5px;
}

.vendor-stat-value {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    color: #111827;
}

.vendor-stat-link {
    font-size: 12px;
    color: #6b7280;
    margin-top: 8px;
    display: block;
}

/* Charts Grid */
.vendor-charts-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px;
    margin-bottom: 30px;
}

.vendor-chart-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    padding: 25px;
    animation: vendorFadeInUp 0.6s ease forwards;
    opacity: 0;
}

.vendor-chart-card:nth-child(1) { animation-delay: 0.1s; }
.vendor-chart-card:nth-child(2) { animation-delay: 0.2s; }
.vendor-chart-card:nth-child(3) { animation-delay: 0.3s; }

.vendor-chart-title {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.vendor-chart-title i {
    color: #667eea;
}

.vendor-pie-wrapper {
    position: relative;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Message Trends Chart - Enhanced Overlay Style */
.vendor-trends-container {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(102, 126, 234, 0.3);
    padding: 0;
    margin-bottom: 30px;
    overflow: hidden;
    position: relative;
}

.vendor-trends-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.5;
    z-index: 0;
}

.vendor-trends-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 28px 30px 20px;
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
    gap: 20px;
}

.vendor-trends-title-section {
    flex: 1;
}

.vendor-trends-title {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 6px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.vendor-trends-title i {
    font-size: 20px;
    opacity: 0.9;
}

.vendor-trends-subtitle {
    font-size: 14px;
    color: rgba(255,255,255,0.75);
    margin: 0;
}

/* Stats Summary Cards */
.vendor-trends-stats {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.vendor-trends-stat {
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    border-radius: 14px;
    padding: 14px 20px;
    min-width: 130px;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.2);
    transition: all 0.3s ease;
}

.vendor-trends-stat:hover {
    background: rgba(255,255,255,0.25);
    transform: translateY(-2px);
}

.vendor-trends-stat-value {
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
}

.vendor-trends-stat-label {
    font-size: 11px;
    color: rgba(255,255,255,0.8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

.vendor-trends-stat.incoming .vendor-trends-stat-value {
    color: #4ade80;
}

.vendor-trends-stat.outgoing .vendor-trends-stat-value {
    color: #60a5fa;
}

.vendor-trends-stat.total .vendor-trends-stat-value {
    color: #fbbf24;
}

/* Chart Wrapper */
.vendor-trends-chart-wrapper {
    position: relative;
    z-index: 1;
    padding: 0 20px 25px;
}

.vendor-trends-wrapper {
    position: relative;
    height: 280px;
    background: rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 20px;
    backdrop-filter: blur(5px);
}

/* Legend Customization */
.vendor-trends-legend {
    display: flex;
    justify-content: center;
    gap: 30px;
    padding: 15px 0 5px;
}

.vendor-trends-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,0.9);
    font-size: 13px;
    font-weight: 500;
}

.vendor-trends-legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.vendor-trends-legend-dot.incoming {
    background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
    box-shadow: 0 2px 8px rgba(74, 222, 128, 0.4);
}

.vendor-trends-legend-dot.outgoing {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    box-shadow: 0 2px 8px rgba(96, 165, 250, 0.4);
}

/* Responsive */
@media (max-width: 991px) {
    .vendor-trends-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .vendor-trends-stats {
        width: 100%;
        justify-content: flex-start;
    }

    .vendor-trends-stat {
        flex: 1;
        min-width: 100px;
    }
}

@media (max-width: 768px) {
    .vendor-trends-container {
        border-radius: 18px;
    }

    .vendor-trends-header {
        padding: 20px 20px 15px;
    }

    .vendor-trends-title {
        font-size: 18px;
    }

    .vendor-trends-stat {
        padding: 12px 15px;
    }

    .vendor-trends-stat-value {
        font-size: 20px;
    }

    .vendor-trends-chart-wrapper {
        padding: 0 15px 20px;
    }

    .vendor-trends-wrapper {
        height: 220px;
        padding: 15px;
    }
}

@media (max-width: 480px) {
    .vendor-trends-stats {
        gap: 10px;
    }

    .vendor-trends-stat {
        min-width: calc(50% - 5px);
        flex: none;
    }

    .vendor-trends-legend {
        gap: 20px;
    }

    .vendor-trends-legend-item {
        font-size: 12px;
    }
}

/* Recent Contacts Table */
.vendor-recent-table {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    overflow: hidden;
    margin-bottom: 30px;
}

.vendor-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    border-bottom: 1px solid #f0f0f0;
}

.vendor-table-title {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0;
}

.vendor-table {
    width: 100%;
    border-collapse: collapse;
}

.vendor-table th {
    padding: 15px 25px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #6c757d;
    background: #f8f9fa;
}

.vendor-table td {
    padding: 15px 25px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
}

.vendor-table tr:last-child td {
    border-bottom: none;
}

.vendor-table tr:hover {
    background-color: #f8f9ff;
}

/* Empty State */
.vendor-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 180px;
    color: #6c757d;
}

.vendor-empty-state i {
    font-size: 40px;
    margin-bottom: 10px;
    opacity: 0.4;
}

/* Quick Start Modern */
.vendor-quick-start {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 30px;
    color: #fff;
}

.vendor-quick-start h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 20px;
}

.vendor-quick-start-list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: step-counter;
}

.vendor-quick-start-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
    font-size: 16px;
    counter-increment: step-counter;
}

.vendor-quick-start-list li::before {
    content: counter(step-counter);
    background: rgba(255,255,255,0.2);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin-right: 15px;
    flex-shrink: 0;
}

.vendor-quick-start-list a {
    color: #fff;
    text-decoration: underline;
    font-weight: 600;
}

.vendor-quick-start-list a:hover {
    color: #fee140;
}

/* Alert Modern */
.vendor-alert {
    border-radius: 16px;
    padding: 20px 25px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.vendor-alert.danger {
    background: linear-gradient(135deg, rgba(245, 87, 108, 0.1) 0%, rgba(240, 147, 251, 0.1) 100%);
    border-left: 4px solid #f5576c;
    color: #c0392b;
}

.vendor-alert.warning {
    background: linear-gradient(135deg, rgba(254, 202, 87, 0.15) 0%, rgba(250, 112, 154, 0.1) 100%);
    border-left: 4px solid #feca57;
    color: #9a6700;
}

.vendor-alert i {
    font-size: 24px;
}

.vendor-alert .btn {
    margin-top: 10px;
    border-radius: 8px;
}

/* Animation */
@keyframes vendorFadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.vendor-stat-card {
    animation: vendorFadeInUp 0.5s ease forwards;
    opacity: 0;
}

.vendor-stat-card:nth-child(1) { animation-delay: 0.05s; }
.vendor-stat-card:nth-child(2) { animation-delay: 0.1s; }
.vendor-stat-card:nth-child(3) { animation-delay: 0.15s; }
.vendor-stat-card:nth-child(4) { animation-delay: 0.2s; }
.vendor-stat-card:nth-child(5) { animation-delay: 0.25s; }
.vendor-stat-card:nth-child(6) { animation-delay: 0.3s; }
.vendor-stat-card:nth-child(7) { animation-delay: 0.35s; }
.vendor-stat-card:nth-child(8) { animation-delay: 0.4s; }

/* Mobile Responsive */
@media (max-width: 768px) {
    .vendor-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .vendor-stat-card {
        padding: 15px;
    }

    .vendor-stat-value {
        font-size: 26px;
    }

    .vendor-stat-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .vendor-charts-row {
        grid-template-columns: 1fr;
    }

    .vendor-pie-wrapper {
        height: 200px;
    }

    .vendor-trends-wrapper {
        height: 250px;
    }

    .vendor-quick-start {
        padding: 20px;
    }

    .vendor-quick-start-list li {
        font-size: 14px;
    }

    .vendor-table {
        display: block;
        overflow-x: auto;
    }
}

@media (max-width: 480px) {
    .vendor-stats-grid {
        grid-template-columns: 1fr;
    }
}
</style>
@endpush

<div class="container-fluid vendor-dashboard-container">
    @if(hasCentralAccess())
    @php
    $currentActivePlanDetails = getVendorCurrentActiveSubscription($vendorInfo['id']);
    $planDetails = vendorPlanDetails(null, null, $vendorInfo['id']);
    @endphp
    <div class="col-xl-12 p-0">
        <nav aria-label="breadcrumb" class="lw-breadcrumb-container">
            <ol class="breadcrumb bg-transparent text-light p-0 m-0">
                <li class="breadcrumb-item mb-3">
                    <a class="text-decoration-none" href="{{ route('central.vendors') }}">{{ __tr('Manage Vendors') }}</a>
                </li>
                <li class="text-light breadcrumb-item" aria-current="page">{{ __tr('Dashboard') }}</li>
            </ol>
        </nav>
    </div>
    <br>
    @endif

    @if(hasVendorAccess() or $vendorViewBySuperAdmin)
    {{-- WhatsApp Setup Alerts - Keep as Original --}}
    @if (getVendorSettings('whatsapp_access_token_expired', null, null, $vendorIdOrUid))
    <!-- <div class="vendor-alert danger">
        <i class="fas fa-exclamation-triangle"></i>
        <div>
            <strong>{{ __tr('Token Expired') }}</strong>
            <p class="mb-0">{{ __tr('Your WhatsApp token seems to be expired. Generate a new token, preferably a permanent one.') }}</p>
            <a class="btn btn-sm btn-danger mt-2" href="{{ route('vendor.settings.read', ['pageType' => 'whatsapp-cloud-api-setup']) }}">
                <i class="fas fa-cog mr-1"></i>{{ __tr('Cloud API Setup') }}
            </a>
        </div>
    </div> -->
    @elseif (!isWhatsAppBusinessAccountReady($vendorIdOrUid))
    <!-- <div class="vendor-alert danger">
        <i class="fas fa-exclamation-circle"></i>
        <div>
            <strong>{{ __tr('Setup Incomplete') }}</strong>
            <p class="mb-0">{{ __tr('You are not ready to send messages, WhatsApp Setup is Incomplete') }}</p>
            <a class="btn btn-sm btn-danger mt-2" href="{{ route('vendor.settings.read', ['pageType' => 'whatsapp-cloud-api-setup']) }}">
                <i class="fas fa-cog mr-1"></i>{{ __tr('Complete WhatsApp Cloud API Setup') }}
            </a>
        </div>
    </div> -->
    @endif

    @if (getAppSettings('pusher_by_vendor') and !getVendorSettings('pusher_app_id', null, null, $vendorIdOrUid))
    <!-- <div class="vendor-alert warning">
        <i class="fas fa-bell"></i>
        <div>
            <strong>{{ __tr('Pusher Required') }}</strong>
            <p class="mb-0">{!! __tr('Pusher keys need to be set up for realtime communication. Get them from __pusherLink__.', ['__pusherLink__' => '<a target="blank" href="https://pusher.com">pusher.com</a>']) !!}</p>
            <a class="btn btn-sm btn-warning mt-2" href="{{ route('vendor.settings.read', ['pageType' => 'general']) }}#pusherKeysConfiguration">
                <i class="fas fa-cog mr-1"></i>{{ __tr('Pusher Configuration') }}
            </a>
        </div>
    </div> -->
    @endif

    {{-- Quick Start Section - Modernized but same content --}}
    @if(!$vendorViewBySuperAdmin)
    <!-- <div class="vendor-quick-start">
        <h3><i class="fas fa-rocket mr-2"></i>{{ __tr('Quick Start') }}</h3>
        <ol class="vendor-quick-start-list">
            <li>{{ __tr('Login to your Facebook Account') }}</li>
            <li>{!! __tr('Complete Setup as Shown in __cloudApiSetupLink__', [
                '__cloudApiSetupLink__' => '<a href="'. route('vendor.settings.read', ['pageType' => 'whatsapp-cloud-api-setup']) .'">'. __tr('WhatsApp Cloud API Setup').'</a>'
                ]) !!}</li>
            <li>{!! __tr('Manage and Sync WhatsApp templates at __manageContactsLink__',[
                '__manageContactsLink__' => '<a href="'. route('vendor.whatsapp_service.templates.read.list_view') .'">'. __tr('Manage WhatsApp Templates').'</a>'
                ]) !!}</li>
            <li>{!! __tr('Create your contact groups using __manageGroupsLink__', [
                '__manageGroupsLink__' => '<a href="'. route('vendor.contact.group.read.list_view') .'">'. __tr('Manage Groups').'</a>'
                ]) !!}</li>
            <li>{!! __tr('Create your Contacts or Upload excel file at __manageContactsLink__',[
                '__manageContactsLink__' => '<a href="'. route('vendor.contact.read.list_view') .'">'. __tr('Manage Contacts').'</a>'
                ]) !!}</li>
            <li>{!! __tr('Create & Schedule your Campaigns at __manageCampaignsLink__',[
                '__manageCampaignsLink__' => '<a href="'. route('vendor.campaign.read.list_view') .'">'. __tr('Manage Campaigns').'</a>'
                ]) !!}</li>
        </ol>
    </div> -->
    @endif

    {{-- Stats Cards Grid --}}
    <div class="vendor-stats-grid">
        @if (hasVendorAccess('manage_contacts'))
        <a href="{{ $vendorViewBySuperAdmin ? '#' : route('vendor.contact.read.list_view') }}" class="vendor-stat-card contacts">
            <div class="vendor-stat-icon"><i class="fas fa-user"></i></div>
            <div class="vendor-stat-label">{{ __tr('Total Contacts') }}</div>
            <div class="vendor-stat-value">{{ number_format($totalContacts) }}</div>
            @if(!$vendorViewBySuperAdmin)<span class="vendor-stat-link">{{ __tr('Manage Contacts') }} →</span>@endif
        </a>

        <a href="{{ $vendorViewBySuperAdmin ? '#' : route('vendor.contact.group.read.list_view') }}" class="vendor-stat-card groups">
            <div class="vendor-stat-icon"><i class="fas fa-users"></i></div>
            <div class="vendor-stat-label">{{ __tr('Total Groups') }}</div>
            <div class="vendor-stat-value">{{ number_format($totalGroups) }}</div>
            @if(!$vendorViewBySuperAdmin)<span class="vendor-stat-link">{{ __tr('Manage Groups') }} →</span>@endif
        </a>
        @endif

        @if (hasVendorAccess('manage_campaigns'))
        <a href="{{ $vendorViewBySuperAdmin ? '#' : route('vendor.campaign.read.list_view') }}" class="vendor-stat-card campaigns">
            <div class="vendor-stat-icon"><i class="fas fa-bullhorn"></i></div>
            <div class="vendor-stat-label">{{ __tr('Total Campaigns') }}</div>
            <div class="vendor-stat-value">{{ number_format($totalCampaigns) }}</div>
            @if(!$vendorViewBySuperAdmin)<span class="vendor-stat-link">{{ __tr('Manage Campaigns') }} →</span>@endif
        </a>
        @endif

        @if (hasVendorAccess('manage_campaigns'))
        <a href="{{ $vendorViewBySuperAdmin ? '#' : route('vendor.campaign.read.list_view') }}" class="vendor-stat-card campaigns">
            <div class="vendor-stat-icon"><i class="fas fa-bullhorn"></i></div>
            <div class="vendor-stat-label">{{ __tr('Total Campaigns') }}</div>
            <div class="vendor-stat-value">{{ number_format($totalCampaigns) }}</div>
            @if(!$vendorViewBySuperAdmin)<span class="vendor-stat-link">{{ __tr('Manage Campaigns') }} →</span>@endif
        </a>
        @endif

        @if (hasVendorAccess('manage_templates'))
        <a href="{{ $vendorViewBySuperAdmin ? '#' : route('vendor.whatsapp_service.templates.read.list_view') }}" class="vendor-stat-card templates">
            <div class="vendor-stat-icon"><i class="fas fa-layer-group"></i></div>
            <div class="vendor-stat-label">{{ __tr('Total Templates') }}</div>
            <div class="vendor-stat-value">{{ number_format($totalTemplates) }}</div>
            @if(!$vendorViewBySuperAdmin)<span class="vendor-stat-link">{{ __tr('Manage Templates') }} →</span>@endif
        </a>
        @endif

        @if (hasVendorAccess('manage_bot_replies'))
        <a href="{{ $vendorViewBySuperAdmin ? '#' : route('vendor.bot_reply.read.list_view') }}" class="vendor-stat-card bot-replies">
            <div class="vendor-stat-icon"><i class="fas fa-robot"></i></div>
            <div class="vendor-stat-label">{{ __tr('Bot Replies') }}</div>
            <div class="vendor-stat-value">{{ number_format($totalBotReplies) }}</div>
            @if(!$vendorViewBySuperAdmin)<span class="vendor-stat-link">{{ __tr('Manage Bot Replies') }} →</span>@endif
        </a>
        @endif

        @if (hasVendorAccess('administrative'))
        <a href="{{ $vendorViewBySuperAdmin ? '#' : route('vendor.user.read.list_view') }}" class="vendor-stat-card team">
            <div class="vendor-stat-icon"><i class="fas fa-user-tie"></i></div>
            <div class="vendor-stat-label">{{ __tr('Team Members') }}</div>
            <div class="vendor-stat-value">{{ number_format($activeTeamMembers) }}</div>
            @if(!$vendorViewBySuperAdmin)<span class="vendor-stat-link">{{ __tr('Manage Team') }} →</span>@endif
        </a>
        @endif

        @if (hasVendorAccess('manage_campaigns'))
        <div class="vendor-stat-card queue">
            <div class="vendor-stat-icon"><i class="fas fa-stream"></i></div>
            <div class="vendor-stat-label">{{ __tr('Messages in Queue') }}</div>
            <div class="vendor-stat-value">{{ number_format($messagesInQueue) }}</div>
        </div>
        @endif

        @if (hasVendorAccess('messaging'))
        <div class="vendor-stat-card processed">
            <div class="vendor-stat-icon"><i class="fas fa-check-double"></i></div>
            <div class="vendor-stat-label">{{ __tr('Messages Processed') }}</div>
            <div class="vendor-stat-value">{{ number_format($totalMessagesProcessed) }}</div>
        </div>
        @endif
    </div>

    {{-- Charts Row --}}
    <div class="vendor-charts-row">
        {{-- Message Direction --}}
        <div class="vendor-chart-card">
            <h4 class="vendor-chart-title"><i class="fas fa-exchange-alt"></i>{{ __tr('Message Direction') }}</h4>
            <div class="vendor-pie-wrapper">
                @if(array_sum(array_column($vendorMessageDirectionDistribution, 'count')) > 0)
                    <canvas id="vendorMessageDirectionChart"></canvas>
                @else
                    <div class="vendor-empty-state">
                        <i class="fas fa-comments"></i>
                        <span>{{ __tr('No messages yet') }}</span>
                    </div>
                @endif
            </div>
        </div>

        {{-- Message Status --}}
        <div class="vendor-chart-card">
            <h4 class="vendor-chart-title"><i class="fas fa-envelope"></i>{{ __tr('Message Status') }}</h4>
            <div class="vendor-pie-wrapper">
                @if(count($vendorMessageStatusDistribution) > 0)
                    <canvas id="vendorMessageStatusChart"></canvas>
                @else
                    <div class="vendor-empty-state">
                        <i class="fas fa-envelope-open"></i>
                        <span>{{ __tr('No messages yet') }}</span>
                    </div>
                @endif
            </div>
        </div>

        {{-- Campaign Status --}}
        <div class="vendor-chart-card">
            <h4 class="vendor-chart-title"><i class="fas fa-bullhorn"></i>{{ __tr('Campaign Status') }}</h4>
            <div class="vendor-pie-wrapper">
                @if(count($vendorCampaignStats) > 0)
                    <canvas id="vendorCampaignStatusChart"></canvas>
                @else
                    <div class="vendor-empty-state">
                        <i class="fas fa-bullhorn"></i>
                        <span>{{ __tr('No campaigns yet') }}</span>
                    </div>
                @endif
            </div>
        </div>
    </div>

    {{-- Message Trends - Enhanced Overlay Graph --}}
    @php
        $totalIncoming = collect($vendorMessageTrends)->sum('incoming');
        $totalOutgoing = collect($vendorMessageTrends)->sum('outgoing');
        $totalMessages = $totalIncoming + $totalOutgoing;
    @endphp
    <div class="vendor-trends-container">
        <!-- Header with Stats -->
        <div class="vendor-trends-header">
            <div class="vendor-trends-title-section">
                <h3 class="vendor-trends-title">
                    <i class="fas fa-chart-area"></i>
                    {{ __tr('Message Activity') }}
                </h3>
                <p class="vendor-trends-subtitle">{{ __tr('Incoming and outgoing messages over the last 30 days') }}</p>
            </div>
            <!-- Summary Stats -->
            <div class="vendor-trends-stats">
                <div class="vendor-trends-stat incoming">
                    <div class="vendor-trends-stat-value">{{ number_format($totalIncoming) }}</div>
                    <div class="vendor-trends-stat-label">{{ __tr('Incoming') }}</div>
                </div>
                <div class="vendor-trends-stat outgoing">
                    <div class="vendor-trends-stat-value">{{ number_format($totalOutgoing) }}</div>
                    <div class="vendor-trends-stat-label">{{ __tr('Outgoing') }}</div>
                </div>
                <div class="vendor-trends-stat total">
                    <div class="vendor-trends-stat-value">{{ number_format($totalMessages) }}</div>
                    <div class="vendor-trends-stat-label">{{ __tr('Total') }}</div>
                </div>
            </div>
        </div>
        <!-- Chart -->
        <div class="vendor-trends-chart-wrapper">
            <div class="vendor-trends-wrapper">
                <canvas id="vendorMessageTrendsChart"></canvas>
            </div>
            <!-- Custom Legend -->
            <div class="vendor-trends-legend">
                <div class="vendor-trends-legend-item">
                    <span class="vendor-trends-legend-dot incoming"></span>
                    <span>{{ __tr('Incoming Messages') }}</span>
                </div>
                <div class="vendor-trends-legend-item">
                    <span class="vendor-trends-legend-dot outgoing"></span>
                    <span>{{ __tr('Outgoing Messages') }}</span>
                </div>
            </div>
        </div>
    </div>

    {{-- Recent Contacts --}}
    <div class="vendor-recent-table">
        <div class="vendor-table-header">
            <h4 class="vendor-table-title"><i class="fas fa-user-plus mr-2"></i>{{ __tr('Recent Contacts') }}</h4>
            @if(!$vendorViewBySuperAdmin)
            <a href="{{ route('vendor.contact.read.list_view') }}" class="btn btn-sm btn-primary">
                {{ __tr('View All') }} <i class="fas fa-arrow-right ml-1"></i>
            </a>
            @endif
        </div>
        <table class="vendor-table">
            <thead>
                <tr>
                    <th>{{ __tr('Name') }}</th>
                    <th>{{ __tr('WhatsApp Number') }}</th>
                    <th>{{ __tr('Added On') }}</th>
                </tr>
            </thead>
            <tbody>
                @forelse($vendorRecentContacts as $contact)
                <tr>
                    <td><strong>{{ $contact->first_name }} {{ $contact->last_name }}</strong></td>
                    <td><i class="fab fa-whatsapp text-success mr-1"></i>{{ $contact->wa_id }}</td>
                    <td>{{ \Carbon\Carbon::parse($contact->created_at)->format('M d, Y') }}</td>
                </tr>
                @empty
                <tr>
                    <td colspan="3" class="text-center py-4">
                        <div class="vendor-empty-state" style="height: auto;">
                            <i class="fas fa-user-plus"></i>
                            <span>{{ __tr('No contacts added yet') }}</span>
                        </div>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @endif

    {{-- Central Admin View - Vendor Details --}}
    @if(hasCentralAccess())
    @include('vendors.partials.vendor-admin-details', [
        'vendorInfo' => $vendorInfo,
        'vendorUserData' => $vendorUserData,
        'vendorIdOrUid' => $vendorIdOrUid,
        'planDetails' => $planDetails,
        'currentActivePlanDetails' => $currentActivePlanDetails,
        'isExtendedLicence' => $isExtendedLicence
    ])
    @endif
</div>

@if(hasVendorAccess() or $vendorViewBySuperAdmin)
@include('vendors.partials.vendor-subscription-modal', [
    'vendorInfo' => $vendorInfo ?? null,
    'vendorIdOrUid' => $vendorIdOrUid,
    'isExtendedLicence' => $isExtendedLicence
])
@endif

<script type="text/template" id="lwLoginAs-template">
    <h2>{{ __tr('Are You Sure!') }}</h2>
    <p>{{ __tr('You want login to this vendor admin account?') }}</p>
</script>

@if(isThisDemoVendorAccountAccess())
<div class="container-fluid">
    <div class="row">
        <div class="col">
            <div class="alert alert-dark">
                <h2 class="text-white">{{ __tr('Demo Account') }}</h2>
                <p>{{ __tr('Contacts created here with your numbers will be deleted frequently.') }}</p>
                <a class="btn btn-xl btn-danger" href="#" data-toggle="modal" data-target="#lwRegisterDemoNumber">
                    <i class="fa fa-phone"></i> {{ __tr('Add Numbers for Test') }}
                </a>
            </div>
        </div>
    </div>
</div>
@include('vendors.demo-instructions')
@endif

@push('appScripts')
<script>
(function($) {
    'use strict';

    var chartColors = {
        message: {
            'Sent': '#4facfe',
            'Delivered': '#667eea',
            'Read': '#11998e',
            'Failed': '#f5576c',
            'Received': '#764ba2',
            'Unknown': '#6c757d'
        }
    };

    var doughnutOptions = {
        responsive: true,
        maintainAspectRatio: false,
        cutout: '60%',
        plugins: {
            legend: {
                position: 'bottom',
                labels: { padding: 15, usePointStyle: true, pointStyle: 'circle', font: { size: 11 } }
            },
            tooltip: {
                backgroundColor: 'rgba(26, 26, 46, 0.95)',
                padding: 10,
                cornerRadius: 8
            }
        }
    };

    // Message Direction Chart
    @if(array_sum(array_column($vendorMessageDirectionDistribution, 'count')) > 0)
    var directionData = @json($vendorMessageDirectionDistribution);
    new Chart(document.getElementById('vendorMessageDirectionChart'), {
        type: 'doughnut',
        data: {
            labels: directionData.map(function(i) { return i.direction; }),
            datasets: [{
                data: directionData.map(function(i) { return i.count; }),
                backgroundColor: ['#11998e', '#667eea'],
                borderWidth: 0,
                hoverOffset: 8
            }]
        },
        options: doughnutOptions
    });
    @endif

    // Message Status Chart
    @if(count($vendorMessageStatusDistribution) > 0)
    var statusData = @json($vendorMessageStatusDistribution);
    new Chart(document.getElementById('vendorMessageStatusChart'), {
        type: 'doughnut',
        data: {
            labels: statusData.map(function(i) { return i.status; }),
            datasets: [{
                data: statusData.map(function(i) { return i.count; }),
                backgroundColor: statusData.map(function(i) { return chartColors.message[i.status] || '#6c757d'; }),
                borderWidth: 0,
                hoverOffset: 8
            }]
        },
        options: doughnutOptions
    });
    @endif

    // Campaign Status Chart
    @if(count($vendorCampaignStats) > 0)
    var campaignData = @json($vendorCampaignStats);
    new Chart(document.getElementById('vendorCampaignStatusChart'), {
        type: 'doughnut',
        data: {
            labels: campaignData.map(function(i) { return i.status; }),
            datasets: [{
                data: campaignData.map(function(i) { return i.count; }),
                backgroundColor: ['#11998e', '#4facfe', '#667eea', '#fa709a', '#6c757d'],
                borderWidth: 0,
                hoverOffset: 8
            }]
        },
        options: doughnutOptions
    });
    @endif

    // Message Trends Chart - Enhanced Overlay Style
    var trendsData = @json($vendorMessageTrends);
    var ctx = document.getElementById('vendorMessageTrendsChart').getContext('2d');

    // Create beautiful gradients for overlay effect
    var inGradient = ctx.createLinearGradient(0, 0, 0, 280);
    inGradient.addColorStop(0, 'rgba(74, 222, 128, 0.6)');
    inGradient.addColorStop(0.5, 'rgba(74, 222, 128, 0.3)');
    inGradient.addColorStop(1, 'rgba(74, 222, 128, 0.05)');

    var outGradient = ctx.createLinearGradient(0, 0, 0, 280);
    outGradient.addColorStop(0, 'rgba(96, 165, 250, 0.6)');
    outGradient.addColorStop(0.5, 'rgba(96, 165, 250, 0.3)');
    outGradient.addColorStop(1, 'rgba(96, 165, 250, 0.05)');

    new Chart(ctx, {
        type: 'line',
        data: {
            labels: trendsData.map(function(i) { return i.label; }),
            datasets: [{
                label: '{{ __tr("Incoming") }}',
                data: trendsData.map(function(i) { return i.incoming; }),
                borderColor: '#4ade80',
                backgroundColor: inGradient,
                borderWidth: 3,
                tension: 0.4,
                fill: true,
                pointRadius: 0,
                pointHoverRadius: 6,
                pointBackgroundColor: '#4ade80',
                pointBorderColor: '#fff',
                pointBorderWidth: 2,
                pointHoverBackgroundColor: '#fff',
                pointHoverBorderColor: '#4ade80',
                pointHoverBorderWidth: 3
            }, {
                label: '{{ __tr("Outgoing") }}',
                data: trendsData.map(function(i) { return i.outgoing; }),
                borderColor: '#60a5fa',
                backgroundColor: outGradient,
                borderWidth: 3,
                tension: 0.4,
                fill: true,
                pointRadius: 0,
                pointHoverRadius: 6,
                pointBackgroundColor: '#60a5fa',
                pointBorderColor: '#fff',
                pointBorderWidth: 2,
                pointHoverBackgroundColor: '#fff',
                pointHoverBorderColor: '#60a5fa',
                pointHoverBorderWidth: 3
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            interaction: {
                mode: 'index',
                intersect: false
            },
            plugins: {
                legend: {
                    display: false // Using custom legend
                },
                tooltip: {
                    mode: 'index',
                    intersect: false,
                    backgroundColor: 'rgba(255, 255, 255, 0.95)',
                    titleColor: '#1e293b',
                    bodyColor: '#64748b',
                    borderColor: 'rgba(0,0,0,0.1)',
                    borderWidth: 1,
                    padding: 14,
                    cornerRadius: 12,
                    boxPadding: 6,
                    titleFont: { size: 13, weight: '700' },
                    bodyFont: { size: 12 },
                    callbacks: {
                        labelColor: function(context) {
                            return {
                                borderColor: context.dataset.borderColor,
                                backgroundColor: context.dataset.borderColor,
                                borderWidth: 2,
                                borderRadius: 6
                            };
                        }
                    }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    grid: {
                        color: 'rgba(255, 255, 255, 0.1)',
                        drawBorder: false
                    },
                    ticks: {
                        color: 'rgba(255, 255, 255, 0.7)',
                        font: { size: 11 },
                        padding: 10
                    }
                },
                x: {
                    grid: {
                        display: false
                    },
                    ticks: {
                        color: 'rgba(255, 255, 255, 0.7)',
                        maxRotation: 45,
                        font: { size: 10 },
                        padding: 5
                    }
                }
            },
            elements: {
                line: {
                    capBezierPoints: true
                }
            }
        }
    });

    // Plan selection handler
    $('#lwPlanIdField').on('lwSelectizeOnChange', function(event, value) {
        __DataRequest.post("{{ route('central.subscription.manual_subscription.read.selected_plan_details') }}", {
            'selected_plan' : value
        });
    });
})(jQuery);
</script>
@endpush

@push('head')
<?= __yesset(['dist/css/dashboard.css'],true) ?>
@endpush
@push('js')
<?= __yesset(['dist/js/dashboard.js'],true)?>
@endpush
@endsection