@extends('layouts.app', ['title' => __tr('Dashboard')])

@php
$vendorIdOrUid = $vendorIdOrUid ?? getVendorUid();
if(!isset($vendorViewBySuperAdmin)) {
$vendorViewBySuperAdmin = null;
}
@endphp

@section('content')

{{-- Use a more modern header section with a gradient background --}}
@if(hasCentralAccess())
@include('users.partials.header', [
'title' => __tr('', ['__vendorTitle__' => $vendorInfo['title'] ?? getVendorSettings('title')]),
'description' => ''
])
@else
@include('users.partials.header', [
'title' => __tr('Hi __userFullName__,', ['__userFullName__' => getUserAuthInfo('profile.first_name')]),
'description' => 'Welcome back! Here\'s a quick overview of your dashboard.'
])
@endif
@php
$isExtendedLicence = (getAppSettings('product_registration', 'licence') === 'dee257a8c3a2656b7d7fbe9a91dd8c7c41d90dc9');
$UserVendorInfo = getUserAuthInfo();
@endphp
<div class="container-fluid container-fluid-padding p-4"> {{-- Added mt--7 for overlap effect --}}

    {{-- Breadcrumb for Central Access --}}
    @if(hasCentralAccess())
    @php
    $currentActivePlanDetails = getVendorCurrentActiveSubscription($vendorInfo['id']);
    $planDetails = vendorPlanDetails(null, null, $vendorInfo['id']);
    @endphp
    <div class="row">
        <div class="col-12">
           <h2 class="fw-bold mb-4"><span class="text-primary">{{__tr('__vendorTitle__', ['__vendorTitle__' => $vendorInfo['title'] ?? getVendorSettings('title')])}}</span> Dashboard</h2>
        </div>
    </div>
    @endif

    {{-- Header Cards --}}
    @include('layouts.headers.cards')

    {{-- Alerts Section with a unified, cleaner look --}}
    @if(hasVendorAccess() || $vendorViewBySuperAdmin)
    <div class="row">
        <div class="col-12">
            {{-- WhatsApp Token Expired --}}
            @if (getVendorSettings('whatsapp_access_token_expired', null, null, $vendorIdOrUid))
            <div class="alert alert-danger d-flex align-items-center gap-3 shadow-sm rounded-3 p-4">
                <i class="mdi mdi-alert-circle-outline fs-25"></i>
                <div>
                    <h5 class="alert-heading fw-bold mb-1">{{ __tr('WhatsApp Token Expired') }}</h5>
                    <p class="mb-2">
                        {{ __tr('Your WhatsApp token seems to be expired. Please generate a new, permanent token and save it to continue sending messages.') }}
                    </p>
                    <a class="btn btn-sm btn-danger mt-2" href="{{ route('vendor.settings.read', ['pageType' => 'whatsapp-cloud-api-setup']) }}">{{ __tr('Cloud API setup') }}</a>
                </div>
            </div>
            @elseif(!isWhatsAppBusinessAccountReady($vendorIdOrUid))
            <div class="alert alert-danger d-flex align-items-center gap-3 shadow-sm rounded-3 p-4">
                <i class="mdi mdi-alert-circle-outline fs-25"></i>
                <div>
                    <h5 class="alert-heading fw-bold mb-1">{{ __tr('WhatsApp Setup is Incomplete') }}</h5>
                    <p class="mb-2">
                        {{ __tr('You are not ready to send messages. Please complete the WhatsApp setup process to get started.') }}
                    </p>
                    <a class="btn btn-sm btn-danger mt-2" href="{{ route('vendor.settings.read', ['pageType' => 'whatsapp-cloud-api-setup']) }}">{{ __tr('Complete your WhatsApp Cloud API setup') }}</a>
                </div>
            </div>
            @endif

            {{-- Pusher Setup Warning --}}
            @if (getAppSettings('pusher_by_vendor') && !getVendorSettings('pusher_app_id', null, null, $vendorIdOrUid))
            <div class="alert alert-warning d-flex align-items-center gap-3 shadow-sm rounded-3 p-4 mt-3">
                <i class="mdi mdi-bell-alert-outline fs-25"></i>
                <div>
                    <h5 class="alert-heading fw-bold mb-1">{{ __tr('Realtime Communication Not Configured') }}</h5>
                    <p class="mb-2">
                        {!! __tr('Pusher keys need to be set for realtime features like Chat. You can get them from __pusherLink__.', [
                        '__pusherLink__' => '<a target="_blank" href="https://pusher.com" class="text-dark fw-bold">pusher.com</a>'
                        ]) !!}
                    </p>
                    <a class="btn btn-sm btn-warning mt-2" href="{{ route('vendor.settings.read', ['pageType' => 'general']) }}#pusherKeysConfiguration">{{ __tr('Pusher Configuration') }}</a>
                </div>
            </div>
            @endif
        </div>
    </div>

    {{-- Quick Start Section with a more visual, step-by-step approach --}}
    @if(!$vendorViewBySuperAdmin)
    <div class="row mb-4">
        <div class="col-12">
            <div class="card p-4 shadow-sm rounded-3">
                <div class="card-body">
                    <h2 class="card-title text-primary fw-bold mb-4">{{ __tr('Quick Start Guide') }}</h2>
                    <div class="row g-4 lw-quick-start-grid">
                        <div class="col-12 col-md-6 col-lg-4">
                            <div class="lw-quick-step d-flex align-items-start gap-3 p-3 border rounded-3 bg-light h-100">
                                <div class="lw-step-number flex-shrink-0">1</div>
                                <div class="lw-step-content">
                                    <h5 class="fw-bold">{{ __tr('Login to Facebook') }}</h5>
                                    <p class="mb-0">{{ __tr('Start by logging into your Facebook account to link it with your business setup.') }}</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-md-6 col-lg-4">
                            <div class="lw-quick-step d-flex align-items-start gap-3 p-3 border rounded-3 bg-light h-100">
                                <div class="lw-step-number flex-shrink-0">2</div>
                                <div class="lw-step-content">
                                    <h5 class="fw-bold">{{ __tr('Complete WhatsApp Cloud API Setup') }}</h5>
                                    <p class="mb-0">{!! __tr('Follow the steps in the __cloudApiSetupLink__ to connect your WhatsApp Business Account.', [
                                        '__cloudApiSetupLink__' => '<a href="'. route('vendor.settings.read', ['pageType' => 'whatsapp-cloud-api-setup']) .'" class="text-primary fw-bold">'. __tr('WhatsApp Cloud API Setup').'</a>'
                                        ]) !!}</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-md-6 col-lg-4">
                            <div class="lw-quick-step d-flex align-items-start gap-3 p-3 border rounded-3 bg-light h-100">
                                <div class="lw-step-number flex-shrink-0">3</div>
                                <div class="lw-step-content">
                                    <h5 class="fw-bold">{{ __tr('Sync WhatsApp Templates') }}</h5>
                                    <p class="mb-0">{!! __tr('Manage and sync your official WhatsApp templates at __manageTemplatesLink__.', [
                                        '__manageTemplatesLink__' => '<a href="'. route('vendor.whatsapp_service.templates.read.list_view') .'" class="text-primary fw-bold">'. __tr('Manage WhatsApp Templates').'</a>'
                                        ]) !!}</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-md-6 col-lg-4">
                            <div class="lw-quick-step d-flex align-items-start gap-3 p-3 border rounded-3 bg-light h-100">
                                <div class="lw-step-number flex-shrink-0">4</div>
                                <div class="lw-step-content">
                                    <h5 class="fw-bold">{{ __tr('Create Contact Groups') }}</h5>
                                    <p class="mb-0">{!! __tr('Organize your contacts efficiently by creating groups using __manageGroupsLink__.', [
                                        '__manageGroupsLink__' => '<a href="'. route('vendor.contact.group.read.list_view') .'" class="text-primary fw-bold">'. __tr('Manage Groups').'</a>'
                                        ]) !!}</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-md-6 col-lg-4">
                            <div class="lw-quick-step d-flex align-items-start gap-3 p-3 border rounded-3 bg-light h-100">
                                <div class="lw-step-number flex-shrink-0">5</div>
                                <div class="lw-step-content">
                                    <h5 class="fw-bold">{{ __tr('Add & Upload Contacts') }}</h5>
                                    <p class="mb-0">{!! __tr('Create individual contacts or upload an Excel file at __manageContactsLink__.', [
                                        '__manageContactsLink__' => '<a href="'. route('vendor.contact.read.list_view') .'" class="text-primary fw-bold">'. __tr('Manage Contacts').'</a>'
                                        ]) !!}</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-md-6 col-lg-4">
                            <div class="lw-quick-step d-flex align-items-start gap-3 p-3 border rounded-3 bg-light h-100">
                                <div class="lw-step-number flex-shrink-0">6</div>
                                <div class="lw-step-content">
                                    <h5 class="fw-bold">{{ __tr('Create & Schedule Campaigns') }}</h5>
                                    <p class="mb-0">{!! __tr('Build and schedule your messaging campaigns to reach your audience at __manageCampaignsLink__.', [
                                        '__manageCampaignsLink__' => '<a href="'. route('vendor.campaign.read.list_view') .'" class="text-primary fw-bold">'. __tr('Manage Campaigns').'</a>'
                                        ]) !!}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif
    @endif

    {{-- Vendor Details & Plan section with a two-column, card-based layout --}}
    @if(hasCentralAccess())
    <div class="row">
        <div class="col-12" x-cloak x-data="{totalVendors:{{ $CountData['totalVendors'] }},totalActiveVendors:{{ $CountData['totalActiveVendors'] }},totalCampaigns:{{ $CountData['totalCampaigns'] }},messagesInQueue:{{ $CountData['messagesInQueue'] }},totalContacts:{{ $CountData['totalContacts'] }},totalMessagesProcessed:{{ $CountData['totalMessagesProcessed'] }}, totalTemplates:{{ $CountData['totalTemplates'] }}, totalGroups:{{ $CountData['totalGroups'] }}, totalTeamMember:{{ $CountData['totalTeamMember'] }}, totalBotReply:{{ $CountData['totalBotReply'] }} }">
            <div class="row mb-2">
                {{-- total groups --}}
                <div class="col-xl-3 col-lg-4 col-md-6 mb-md-4 mb-2">
                    <div class="card today-orders-card bgd-black">
                        <span class="circle-decoration ring-b-box bg-black-ring"></span>
                        <div class="black-icon-wrapper">
                            <span class="black-icon-inner text-white">
                                <i class="mdi mdi-account-group-outline fs-15 "></i>
                            </span>
                        </div>

                        <span class="title">{{ __tr('Total Groups') }}</span>

                        <div class="value-row">
                            <span x-text="__Utils.formatAsLocaleNumber(totalGroups)"></span>

                        </div>
                    </div>
                </div>
                {{-- total contacts --}}
                <div class="col-xl-3 col-lg-4 col-md-6 mb-md-4 mb-2">
                    <div class="card today-orders-card bg-orange-50">
                        <span class="circle-decoration ring-og-box bg-orange-ring"></span>
                        <div class="warning-icon-wrapper">
                            <span class="warning-icon-inner text-white">
                                <i class="mdi mdi-account fs-15 "></i>
                            </span>
                        </div>

                        <span class="title">{{ __tr('Total Contacts') }}</span>

                        <div class="value-row">
                            <span x-text="__Utils.formatAsLocaleNumber(totalContacts)"></span>

                        </div>
                    </div>
                </div>
                {{-- /total contacts --}}
                {{-- total totalCampaigns --}}
                <div class="col-xl-3 col-lg-4 col-md-6 mb-md-4 mb-2">
                    <div class="card today-orders-card bg-green-50">
                        <span class="circle-decoration ring-gr-box bg-green-ring"></span>
                        <div class="green-icon-wrapper">
                            <span class="green-icon-inner text-white">
                                <i class="mdi mdi-bullhorn fs-15"></i>
                            </span>
                        </div>

                        <span class="title">{{ __tr('Total Campaigns') }}</span>

                        <div class="value-row">
                            <span x-text="__Utils.formatAsLocaleNumber(totalCampaigns)"></span>

                        </div>
                    </div>
                </div>
                {{-- /total totalCampaigns --}}
                {{-- total totalTemplates --}}
                <div class="col-xl-3 col-lg-4 col-md-6 mb-md-4 mb-2">
                    <div class="card today-orders-card bg-red-50">
                        <span class="circle-decoration ring-re-box bg-red-ring"></span>
                        <div class="red-icon-wrapper">
                            <span class="red-icon-inner text-white">
                                <i class="mdi mdi-layers fs-15 "></i>
                            </span>
                        </div>

                        <span class="title">{{ __tr('Total Templates') }}</span>

                        <div class="value-row">
                            <span x-text="__Utils.formatAsLocaleNumber(totalTemplates)"></span>

                        </div>
                    </div>
                </div>
                {{-- /total totalTemplates --}}
                {{-- total totalBotReplies --}}
                <div class="col-xl-3 col-lg-4 col-md-6 mb-md-4 mb-2">
                    <div class="card today-orders-card bgd-black">
                        <span class="circle-decoration ring-b-box bg-black-ring"></span>
                        <div class="black-icon-wrapper">
                            <span class="black-icon-inner text-white">
                                <i class="mdi mdi-robot fs-15 "></i>
                            </span>
                        </div>

                        <span class="title">{{ __tr('Total Bot Replies') }}</span>

                        <div class="value-row">
                            <span x-text="__Utils.formatAsLocaleNumber(totalBotReply)"></span>
                        </div>

                    </div>
                </div>
                {{-- /total totalBotReplies --}}
                {{-- total active team member --}}
                <div class="col-xl-3 col-lg-4 col-md-6 mb-md-4 mb-2">
                    <div class="card today-orders-card bg-orange-50">
                        <span class="circle-decoration ring-og-box bg-orange-ring"></span>
                        <div class="warning-icon-wrapper">
                            <span class="warning-icon-inner text-white">
                                <i class="mdi mdi-account-tie fs-15 "></i>
                            </span>
                        </div>

                        <span class="title">{{ __tr('Active Team Members') }}</span>

                        <div class="value-row">
                            <span x-text="__Utils.formatAsLocaleNumber(totalTeamMember)"></span>

                        </div>
                    </div>
                </div>
                {{-- /total active team member --}}
                {{-- manage campaigns --}}
                <div class="col-xl-3 col-lg-4 col-md-6 mb-md-4 mb-2">
                    <div class="card today-orders-card bg-green-50">
                        <span class="circle-decoration ring-gr-box bg-green-ring"></span>
                        <div class="green-icon-wrapper">
                            <span class="green-icon-inner text-white">
                                <i class="mdi mdi-view-stream fs-15 "></i>
                            </span>
                        </div>

                        <span class="title">{{ __tr('Messages in Queue') }}</span>

                        <div class="value-row">
                            <span x-text="__Utils.formatAsLocaleNumber(messagesInQueue)"></span>

                        </div>
                    </div>
                </div>
                {{-- /manage campaigns --}}
                {{-- Messaging Processed--}}
                <div class="col-xl-3 col-lg-4 col-md-6 mb-md-4 mb-2">
                    <div class="card today-orders-card bg-red-50">
                        <span class="circle-decoration ring-re-box bg-red-ring"></span>
                        <div class="red-icon-wrapper">
                            <span class="red-icon-inner text-white">
                                <i class="mdi mdi-format-list-checks fs-15 "></i>
                            </span>
                        </div>

                        <span class="title">{{ __tr('Messages Processed') }}</span>

                        <div class="value-row">
                            <span x-text="__Utils.formatAsLocaleNumber(totalMessagesProcessed)"></span>
                        </div>
                    </div>
                </div>
                {{-- /Messaging Processed --}}
            </div>
        </div>
    </div>
    {{-- Put this where your existing block is (Blade) --}}
    <style>
        :root {
            --card-bg: #ffffff;
            --muted: #6c757d;
            --accent: #0d6efd;
            --radius: 14px;
            --shadow-1: 0 6px 18px rgba(17, 24, 39, 0.06);
            --shadow-2: 0 20px 40px rgba(17, 24, 39, 0.06);
            --small-gap: .5rem;
        }

        .card--clean {
            background: var(--card-bg);
            border: none;
            border-radius: var(--radius);
            box-shadow: var(--shadow-1), var(--shadow-2);
            transition: transform .18s ease, box-shadow .18s ease;
        }

        .card--clean:hover {
            transform: translateY(-4px);
            box-shadow: 0 18px 50px rgba(17, 24, 39, .08);
        }

        .card__head {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: .75rem;
            padding: 1rem 1.25rem;
            border-bottom: 1px solid rgba(0, 0, 0, .04);
        }

        .card__title {
            margin: 0;
            font-weight: 600;
            color: var(--accent);
            font-size: 1rem;
            display: flex;
            align-items: center;
            gap: .6rem;
        }

        .meta-list {
            padding: .75rem 1.25rem;
        }

        .meta-list .list-group-item {
            border: none;
            padding: .45rem 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .meta-list .label {
            color: var(--muted);
            font-size: .88rem;
        }

        .meta-list .value {
            font-weight: 600;
            font-size: .95rem;
        }

        .badge-soft {
            background: rgba(13, 110, 253, .08);
            color: var(--accent);
            padding: .28rem .6rem;
            border-radius: 999px;
            font-weight: 600;
            font-size: .82rem;
        }

        /* Compact features */
        .features {
            padding: .75rem 1.25rem 1.25rem;
        }

        .features li {
            font-size: .9rem;
            margin-bottom: .45rem;
            display: flex;
            gap: .6rem;
            align-items: center;
            color: #333;
        }

        /* Responsive tweaks */
    </style>

    <div class="row admin-row">
        {{-- Vendor details --}}
        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-4">
            <div class="card card--clean h-100">
                <div class="card__head">
                    <h3 class="mb-0"><i class="mdi mdi-account-c text-primary fs-5"></i> {{ __tr('Vendor Details') }}</h3>
                    <a data-method="post" class="btn btn-sm btn-primary mb-0 lw-ajax-link-action"
                        href="{{ route('central.vendors.user.write.login_as',['vendorUid'=>$vendorIdOrUid])}}"
                        data-confirm="#lwLoginAs-template">
                        <i class="mdi mdi-login me-1"></i> {{ __tr('Login') }}
                    </a>
                </div>

                <ul class="meta-list list-group list-group-flush">
                    <li class="list-group-item"><span class="label">{{ __tr('Vendor Title:') }}</span>
                        <span class="value">{{ $vendorInfo['title'] ?? getVendorSettings('title') }}</span>
                    </li>
                    <li class="list-group-item"><span class="label">{{ __tr('Account Status:') }}</span>
                        <span class="badge-soft">{{ $vendorInfo['status']==0 ? __tr('Inactive') : configItem('status_codes',$vendorInfo['status']) }}</span>
                    </li>
                    <li class="list-group-item"><span class="label">{{ __tr('Created On:') }}</span>
                        <span class="value">{{ formatDate($vendorUserData['created_at']) }}</span>
                    </li>
                </ul>
            </div>
        </div>

        {{-- Admin User --}}
        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-4">
            <div class="card card--clean h-100">
                <div class="card__head">
                    <h3 class="mb-0"><i class="mdi mdi-account-tie text-primary fs-5"></i> {{ __tr('Admin User') }}</h3>
                </div>
                <ul class="meta-list list-group list-group-flush">
                    <li class="list-group-item"><span class="label">{{ __tr('Name:') }}</span>
                        <span class="value">{{ maskForDemo($vendorUserData['first_name'].' '.$vendorUserData['last_name']) }}</span>
                    </li>
                    <li class="list-group-item"><span class="label">{{ __tr('Username:') }}</span>
                        <span class="value">{{ maskForDemo($vendorUserData['username']) }}</span>
                    </li>
                    @if($vendorUserData['mobile_number'])
                    <li class="list-group-item"><span class="label">{{ __tr('Phone:') }}</span>
                        <span class="value">{{ maskForDemo($vendorUserData['mobile_number']) }}</span>
                    </li>
                    @endif
                    <li class="list-group-item"><span class="label">{{ __tr('Email:') }}</span>
                        <span class="value">{{ maskForDemo($vendorUserData['email']) }}</span>
                    </li>
                    <li class="list-group-item"><span class="label">{{ __tr('Status:') }}</span>
                        <span class="badge-soft">{{ $vendorUserData['status']==0 ? __tr('Inactive') : configItem('status_codes', $vendorUserData['status']) }}</span>
                    </li>
                </ul>
            </div>
        </div>

        {{-- Current Subscribed Plan --}}
        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-4">
            @php
            $planStructure = $planDetails->plan_id ? getPaidPlans($planDetails->plan_id) : getFreePlan();
            $planCharges = $planStructure['charges'][$planDetails->frequency] ?? null;
            @endphp

            <div class="card card--clean h-100 d-flex flex-column">
                <div class="card__head">
                    <h3 class="mb-0">
                        <i class="mdi mdi-certificate text-primary fs-5"></i> {{ __tr('Subscribed Plan') }}
                    </h3>
                </div>

                <div class="card-body flex-grow-1">
                    @if ($planDetails->hasActivePlan())
                    <ul class="meta-list list-group list-group-flush">
                        <li class="list-group-item">
                            <span class="label">{{ __tr('Plan Title:') }}</span>
                            <span class="value">{{ $planDetails->planTitle() }}</span>
                        </li>

                        @if($planCharges)
                        <li class="list-group-item">
                            <span class="label">{{ __tr('Current Plan Charges:') }}</span>
                            <span class="value">{{ $planCharges['title'] ?? '' }} {{ formatAmount($planCharges['charge'], true) }}</span>
                        </li>
                        @endif

                        <li class="list-group-item">
                            <span class="label">{{ __tr('Status:') }}</span>
                            <span class="value">
                                {{ $planDetails['subscription_type']=='manual' 
                                ? configItem('subscription_status',$currentActivePlanDetails['status']) 
                                : ($planDetails['subscription_type']=='auto' 
                                    ? configItem('subscription_status',$currentActivePlanDetails['stripe_status']) 
                                    : __tr('Active')) }}
                            </span>
                        </li>

                        <li class="list-group-item">
                            <span class="label">{{ __tr('Subscription Type:') }}</span>
                            <span class="value">{{ configItem('subscription_methods',$planDetails['subscription_type'])}}</span>
                        </li>

                        <li class="list-group-item">
                            <span class="label">{{ __tr('Expire On:') }}</span>
                            <span class="value">{{ $planDetails['ends_at'] ? formatDate($planDetails['ends_at']) : 'NA' }}</span>
                        </li>
                    </ul>
                    @else
                    <div class="alert alert-warning mb-0 small">
                        {{ __tr('Vendor does not have any active plan.') }}
                    </div>
                    @endif
                </div>

                {{-- Button at the bottom --}}
                @if ($isExtendedLicence)
                <div class="card-footer mt-auto">
                    <button type="button" class="btn btn-primary w-100 text-nowrap" data-toggle="modal" data-target="#lwAddNewManualSubscription">
                        {{ __tr('Create New Subscription') }}
                    </button>
                </div>
                @endif
            </div>
        </div>


        {{-- Plan Features --}}
        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-4">
            <div class="card card--clean h-100">
                <div class="card__head">
                    <h3 class="mb-0"><i class="mdi mdi-star-circle text-primary fs-5"></i> {{ __tr('Plan Features') }}</h3>
                </div>

                @if(!empty($planStructure['features']))
                <ul class="meta-list list-group list-group-flush">
                    @foreach ($planStructure['features'] as $feature)
                    <li class="list-group-item">
                        <span class="label">
                            <i class="fa {{ isset($feature['limit']) && $feature['limit'] ? 'fa-check-circle text-success' : 'fa-times-circle text-danger' }}"></i>
                            {{ $feature['description'] }}
                        </span>
                        <span class="value">
                            @if (isset($feature['limit']) && $feature['limit'] >= 0)
                            {{ $feature['limit'] }} {{ $feature['limit_duration_title'] ?? '' }}
                            @elseif (isset($feature['limit']) && $feature['limit'] < 0)
                                {{ __tr('Unlimited') }}
                                @endif
                                </span>
                    </li>
                    @endforeach
                </ul>
                @else
                <div class="alert alert-info mb-0 small">{{ __tr('No features available.') }}</div>
                @endif
            </div>

        </div>
    </div>


    <!-- <div class="col-xl-4 col-lg-4 mb-2">
        <div class="card shadow-lg border-2 h-100 rounded-4">
            <div class="card-body p-4" x-cloak x-data="{totalVendors:{{ $CountData['totalVendors'] }},totalActiveVendors:{{ $CountData['totalActiveVendors'] }},totalCampaigns:{{ $CountData['totalCampaigns'] }},messagesInQueue:{{ $CountData['messagesInQueue'] }},totalContacts:{{ $CountData['totalContacts'] }},totalMessagesProcessed:{{ $CountData['totalMessagesProcessed'] }}, totalTemplates:{{ $CountData['totalTemplates'] }}, totalGroups:{{ $CountData['totalGroups'] }}, totalTeamMember:{{ $CountData['totalTeamMember'] }}, totalBotReply:{{ $CountData['totalBotReply'] }} }">
                <h2 class="card-title text-primary fw-bold mb-0">
                    <i class="mdi mdi-account-card-details fs-15 me-2"></i> {{ __tr('Vendor Besic Count') }}
                </h2>
                <ul class="list-group list-group-flush mb-0">
                    <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                        <span class="text-muted">{{ __tr('Groups') }}</span>
                        <span class="fw-bold" onclick="showVendorDetailsTable('totalGroups')" x-text="__Utils.formatAsLocaleNumber(totalGroups)"></span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                        <span class="text-muted">{{ __tr('Contacts') }}</span>
                        <span class="fw-bold" onclick="showVendorDetailsTable('totalContacts')" x-text="__Utils.formatAsLocaleNumber(totalContacts)"></span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                        <span class="text-muted">{{ __tr('campigns') }}</span>
                        <span class="fw-bold" onclick="showVendorDetailsTable('totalCampaigns')" x-text="__Utils.formatAsLocaleNumber(totalCampaigns)"></span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                        <span class="text-muted">{{ __tr('Team Member') }}</span>
                        <span class="fw-bold" onclick="showVendorDetailsTable('totalTeamMember')" x-text="__Utils.formatAsLocaleNumber(totalTeamMember)"></span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                        <span class="text-muted">{{ __tr('Bot Replies') }}</span>
                        <span class="fw-bold" onclick="showVendorDetailsTable('totalBotReply')" x-text="__Utils.formatAsLocaleNumber(totalBotReply)"></span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                        <span class="text-muted">{{ __tr('Messages Processed') }}</span>
                        <span class="fw-bold" onclick="showVendorDetailsTable('totalMessagesProcessed')" x-text="__Utils.formatAsLocaleNumber(totalMessagesProcessed)"></span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                        <span class="text-muted">{{ __tr('Templates') }}</span>
                        <span class="fw-bold" onclick="showVendorDetailsTable('totalTemplates')" x-text="__Utils.formatAsLocaleNumber(totalTemplates)"></span>
                    </li>
            </div>
        </div>
    </div> -->
    <div id="lwManualSubscriptionList_table" is_btn="true" is_filter="true"
        is_column="plan_id,created_at,ends_at,charges,charges_frequency,status"
        is_column_name="Plan,Created At, Expiry At, Plan Charges, Frequency, Status"
        data-url="{{ route('central.subscription.manual_subscription.read.list', ['vendorUid' => $vendorIdOrUid]) }}">
    </div>
    @endif
</div>
<!-- <div class="row">
    <div class="col-xl-12">
        <div id="dashboard_vendors_comman_table"
            is_btn="false"
            is_filter="true"
            is_column="title,description"
            is_column_name="Group Name,Description"
            data-url="{{ route('vendor.contact.group.read.list', ['status' => 'active']) }}"
            >
        </div>

    </div>
</div> -->

<script type="text/template" id="lwLoginAs-template">
    <h2 class="fw-bold text-primary">{{ __tr('Are You Sure?') }}</h2>
    <p>{{ __tr('You want to login to this vendor admin account?') }}</p>
</script>
<x-lw.modal id="lwAddNewManualSubscription" :header="__tr('Create New Subscription')" :hasForm="true">
    <x-lw.form x-data="{calculated_ends_at:null}" id="lwAddNewManualSubscriptionForm"
        :action="route('central.subscription.manual_subscription.write.create')"
        :data-callback-params="['modalId' => '#lwAddNewManualSubscription', 'datatableId' => '#lwManualSubscriptionList']"
        data-callback="appFuncs.modelSuccessCallback">
        <div class="lw-form-modal-body">
            @if ($isExtendedLicence)
            <div class="alert alert-danger mb-3">
                {{ __tr('It will cancel all the existing active subscriptions and create a new subscription') }}
            </div>
            <input type="hidden" name="vendor_uid" value="{{ $vendorInfo['uid'] }}">
            <div class="row g-3">
                <div class="col-6">
                    <x-lw.input-field type="selectize" data-lw-plugin="lwSelectize" id="lwPlanIdField"
                        :label="__tr('Plan')" name="plan" required="true">
                        <x-slot name="selectOptions">
                            <option value="">{{ __tr('Select Plan') }}</option>
                            @foreach (getPaidPlans() as $paidPlanKey => $paidPlan)
                            <optgroup label="{{ $paidPlan['title'] }} @if(!$paidPlan['enabled']) ({{ __tr('Disabled') }}) @endif">
                                @foreach ($paidPlan['charges'] as $planChargeKey => $planCharge)
                                <option value="{{ $paidPlanKey }}___{{ $planChargeKey }}">{{ $paidPlan['title'] }} - {{ formatAmount($planCharge['charge'], true) }} {{ $planCharge['title'] }}</option>
                                @endforeach
                            </optgroup>
                            @endforeach
                        </x-slot>
                    </x-lw.input-field>
                </div>
                <div class="col-6">
                    <label for="lwEndsAtField">Expiry on</label>
                    <input type="date" data-jsx-set="datepicker" required name="ends_at">
                </div>
                <div class="col-6">
                    <div class="form-group">
                        <label for="lwRemarks">{{ __tr('Remarks if any') }}</label>
                        <textarea class="form-control" name="remarks" id="lwRemarks" rows="2"></textarea>
                    </div>
                </div>
            </div>
            @else
            <div class="alert alert-danger">
                {{ __tr('Extended licence required to enable manage subscription') }}
            </div>
            @endif
        </div>
        <div class="modal-footer">
            <button type="submit" class="btn btn-primary">{{ __tr('Submit') }}</button>
            <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ __tr('Close') }}</button>
        </div>
    </x-lw.form>
</x-lw.modal>
{{-- Demo Vendor Alerts --}}
@if(isThisDemoVendorAccountAccess())
<div class="container-fluid mb-4 mt-4">
    <div class="alert alert-dark shadow-sm rounded-3">
        <h2 class="text-white fw-bold">{{ __tr('Demo Account') }}</h2>
        <p>{{ __tr('Contacts created here with your numbers will be deleted frequently. Add your number to allow for test.') }}</p>
        <p>{{ __tr('You can use Facebook Test Number to test system easily.') }}</p>
        <a title="{{ __tr('Add Test Numbers') }}" class="btn btn-xl btn-danger mt-2" href="#" data-toggle="modal" data-target="#lwRegisterDemoNumber">
            <i class="mdi mdi-phone fs-15 me-1"></i> {{ __tr('Add Numbers for Test') }}
        </a>
    </div>
</div>
@include('vendors.demo-instructions')
@endif

@push('head')