@php use App\Library\Tool;use Carbon\Carbon; @endphp
@extends('layouts/contentLayoutMaster')

@section('title', __('locale.menu.Dashboard'))

@section('vendor-style')
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/charts/apexcharts.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/extensions/tether-theme-arrows.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/extensions/tether.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/extensions/shepherd.min.css')) }}">
@endsection

@section('page-style')
    <link rel="stylesheet" href="{{ asset(mix('css/base/plugins/charts/chart-apex.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('css/base/pages/analytics-reports.css')) }}">
@endsection


@section('content')

  <section>

      @if(!$cronJobAvailable)
          <div class="alert alert-warning" role="alert">
              <h4 class="alert-heading text-uppercase">Cron Job or Schedule task not available</h4>
              <div class="alert-body">
                  <p>Kindly ensure that the cron job or schedule task is enabled to facilitate the importing of
                      contacts, sending campaigns, and all other background-related tasks. Please navigate to <a
                              class="text-decoration-underline" href="{{ route('admin.settings.general') }}"><i>Settings
                              > All Settings > Cron jobs</i></a> for more details.</p>
              </div>
          </div>
      @endif


      @if($serverCounts->active == 0 || $planCounts->active == 0 || $customerCounts->active == 0 || $subscriptionCounts->active == 0)
          <div class="row match-height">
              <div class="col-12">
                  <div class="card card-user-timeline">
                      <div class="card-header">
                          <div class="d-flex align-items-center">
                              <i data-feather="list" class="user-timeline-title-icon"></i>
                              <h4 class="card-title text-uppercase text-success">{{ __('locale.labels.getting_started') }}</h4>
                          </div>
                      </div>
                      <div class="card-content">
                          <div class="card-body">
                              <ul class="timeline">

                                  @php
                                      $steps = [
                                          [
                                              'done'  => $serverCounts->active != 0,
                                              'title' => 'Add Sending Server or SMS Gateway',
                                              'body'  => '<a class="text-uppercase" href="' . route('admin.sending-servers.index') . '">Sending servers</a> are needed in order to send out all the sms from the application. ' . config('app.name') . ' comes with support more than 200+ sending servers or gateways. You can use either of them, or Create your <a href="' . route('admin.sending-servers.create', ['type' => 'custom']) . '">own one</a>',
                                          ],
                                          [
                                              'done'  => $planCounts->active != 0,
                                              'title' => 'Create Plan for your Customers',
                                              'body'  => '<a class="text-uppercase" href="' . route('admin.plans.index') . '">Plans</a> are essential for configuring SMS pricing, coverage, sending limits, plan features, etc. ' . config('app.name') . ' allows you to create various types of price plans for your customers. Additionally, you can assign different types of sending servers or SMS gateways and allocate SMS units based on countries.',
                                          ],
                                          [
                                              'done'  => $customerCounts->active != 0,
                                              'title' => 'Your Customer Account',
                                              'body'  => 'When you first installed the application, you were asked to create a customer account. In case you haven\'t done so, please go ahead and <a href="' . route('admin.customers.create') . '">create one.</a> When using ' . config('app.name') . ', the customers are the ones that manage the contact lists, campaigns, templates and so on. You can also assign different types of pricing, sending servers or SMS gateways, permissions, etc to your customers.',
                                          ],
                                          [
                                              'done'  => $subscriptionCounts->active != 0,
                                              'title' => 'Assign Plan to your Customer',
                                              'body'  => 'After creating a <a class="text-uppercase" href="' . route('admin.plans.index') . '">Plan</a> and <a href="' . route('admin.customers.create') . '">Customer</a>, now it\'s time to assign your plan to your customer. To assign a plan to your customer, go ahead and click on the <a href="' . route('admin.subscriptions.create') . '"> Assign Plan</a> button.',
                                          ],
                                      ];
                                      $infoSteps = [
                                          ['title' => 'Assign Sender ID or Phone Numbers to your customer',
                                           'body'  => 'You have the option to assign sender IDs or phone numbers to your customers. This step is optional if your sending servers or SMS gateway do not support sender IDs or phone numbers as originators.'],
                                          ['title' => 'Application Branding Setup',
                                           'body'  => 'You have the option to configure your Application/Brand Name, Application Title, Logo, Favicon, Default Language, and many more. Navigate to <a href="' . route('admin.settings.general') . '">Settings -> All Settings -> General</a> to configure your application.'],
                                      ];
                                  @endphp

                                  @foreach($steps as $step)
                                      <li class="timeline-item">
                                          <span class="timeline-point {{ $step['done'] ? 'timeline-point-success' : 'timeline-point-danger' }}">
                                              <i data-feather="{{ $step['done'] ? 'check-circle' : 'x-circle' }}"></i>
                                          </span>
                                          <div class="timeline-event">
                                              <div class="d-flex justify-content-between flex-sm-row flex-column mb-sm-0 mb-1">
                                                  <h6 class="text-uppercase {{ $step['done'] ? 'text-decoration-line-through text-success' : 'text-danger' }}">
                                                      {{ $step['title'] }}
                                                  </h6>
                                              </div>
                                              <p>{!! $step['body'] !!}</p>
                                          </div>
                                      </li>
                                  @endforeach

                                  @foreach($infoSteps as $step)
                                      <li class="timeline-item">
                                          <span class="timeline-point timeline-point-info">
                                              <i data-feather="check-circle"></i>
                                          </span>
                                          <div class="timeline-event">
                                              <div class="d-flex justify-content-between flex-sm-row flex-column mb-sm-0 mb-1">
                                                  <h6 class="text-uppercase text-info">{{ $step['title'] }}</h6>
                                              </div>
                                              <p>{!! $step['body'] !!}</p>
                                          </div>
                                      </li>
                                  @endforeach

                              </ul>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      @endif


      {{-- Quick shortcuts --}}
      <div class="row match-height">
          @foreach([
              [
                  'route' => route('admin.customers.create'),
                  'label' => __('locale.buttons.create').' '.__('locale.menu.Customer'),
                  'sub' => __('locale.labels.add_a_new_customer_account'),
                  'icon' => 'user-plus',
                  'avatar' => 'bg-light-primary',
                  'permission' => 'create customer'
              ],
              [
                  'route' => route('admin.plans.create'),
                  'label' => __('locale.buttons.create').' '.__('locale.menu.Plan'),
                  'sub' => __('locale.labels.set_up_a_subscription_plan'),
                  'icon' => 'credit-card',
                  'avatar' => 'bg-light-success',
                  'permission' => 'create plans'
              ],
              [
                  'route' => route('admin.sending-servers.select'),
                   'label' => __('locale.sending_servers.add_sending_server'),
                   'sub' => __('locale.labels.configure_sms_gateway'),
                   'icon' => 'send',
                   'avatar' => 'bg-light-info',
                  'permission' => 'create sending_servers'
              ],
              [
                  'route' => route('admin.settings.general'),
                  'label' => __('locale.labels.system_settings'),
                  'sub' => __('locale.labels.configure_your_platform'),
                  'icon' => 'settings',
                  'avatar' => 'bg-light-secondary',
                  'permission' => 'general settings'
              ],
          ] as $qa)

              @can($qa['permission'])
                  <div class="col-lg-3 col-sm-6 col-12">
                      <div class="card text-center">
                          <div class="card-body">
                              <a href="{{ $qa['route'] }}" class="stretched-link" aria-hidden="true"></a>
                              <div class="{{ $qa['avatar'] }} avatar p-50 mb-1">
                                  <div class="avatar-content">
                                      <i data-feather="{{ $qa['icon'] }}" class="font-medium-5"></i>
                                  </div>
                              </div>
                              <h2 class="font-medium-5">{{ $qa['label'] }}</h2>
                              <p class="card-text">{{ $qa['sub'] }}</p>
                          </div>
                      </div>
                  </div>
              @endcan
          @endforeach
      </div>

      {{-- Stat cards row 1 --}}
      <div class="row match-height">
          @foreach([
              ['value' => $customerCounts->active,   'total' => $customerCounts->total,   'label' => __('locale.menu.Customers'),      'route' => route('admin.customers.index'),       'icon' => 'users',         'color' => 'bg-light-primary'],
              ['value' => $planCounts->active,        'total' => $planCounts->total,       'label' => __('locale.menu.Plan'),           'route' => route('admin.plans.index'),           'icon' => 'credit-card',   'color' => 'bg-light-success'],
              ['value' => $adminDashboardQuickCounts['reports_total'],   'total' => null, 'label' => __('locale.labels.sms_send'),     'route' => route('admin.reports.all'),           'icon' => 'message-square','color' => 'bg-light-danger'],
              ['value' => $adminDashboardQuickCounts['campaigns_total'], 'total' => null, 'label' => __('locale.labels.campaigns_send'),'route' => route('admin.reports.campaigns'),    'icon' => 'send',          'color' => 'bg-light-info'],
          ] as $card)
              <div class="col-lg-3 col-sm-6 col-12">
                  <div class="card">
                      <div class="card-header">
                          <div>
                              <h2 class="fw-bolder mb-0">
                                  @if($card['total'] !== null)
                                      <sup>{{ $card['value'] }}</sup> / {{ $card['total'] }}
                                  @else
                                      {{ $card['value'] }}
                                  @endif
                              </h2>
                              <p class="card-text">{{ $card['label'] }}</p>
                          </div>
                          <a href="{{ $card['route'] }}">
                              <div class="avatar {{ $card['color'] }} p-50 m-0">
                                  <div class="avatar-content">
                                      <i data-feather="{{ $card['icon'] }}" class="font-medium-5"></i>
                                  </div>
                              </div>
                          </a>
                      </div>
                  </div>
              </div>
          @endforeach
      </div>

      {{-- Stat cards row 2 --}}
      <div class="row match-height">
          @foreach([
              ['value' => $subscriptionCounts->active,                         'total' => $subscriptionCounts->total,                   'label' => __('locale.menu.Subscriptions'),  'route' => route('admin.subscriptions.index'),'icon' => 'credit-card',  'color' => 'bg-light-success'],
              ['value' => $adminDashboardQuickCounts['announcements_total'],    'total' => null,                                         'label' => __('locale.menu.Announcements'),  'route' => route('admin.announcements.index'),'icon' => 'tv',           'color' => 'bg-light-warning'],
              ['value' => $adminDashboardQuickCounts['invoices_not_paid'],      'total' => $adminDashboardQuickCounts['invoices_paid'],   'label' => __('locale.menu.Invoices'),       'route' => route('admin.invoices.index'),     'icon' => 'shopping-cart','color' => 'bg-light-primary'],
              ['value' => $serverCounts->active,                                'total' => $serverCounts->total,                         'label' => __('locale.menu.Sending Servers'),'route' => route('admin.sending-servers.index'),'icon' => 'send',       'color' => 'bg-light-primary'],
          ] as $card)
              <div class="col-lg-3 col-sm-6 col-12">
                  <div class="card">
                      <div class="card-header">
                          <div>
                              <h2 class="fw-bolder mb-0">
                                  @if($card['total'] !== null)
                                      <sup>{{ $card['value'] }}</sup> / {{ $card['total'] }}
                                  @else
                                      {{ $card['value'] }}
                                  @endif
                              </h2>
                              <p class="card-text">{{ $card['label'] }}</p>
                          </div>
                          <a href="{{ $card['route'] }}">
                              <div class="avatar {{ $card['color'] }} p-50 m-0">
                                  <div class="avatar-content">
                                      <i data-feather="{{ $card['icon'] }}" class="font-medium-5"></i>
                                  </div>
                              </div>
                          </a>
                      </div>
                  </div>
              </div>
          @endforeach
      </div>

      {{-- KPI sparklines --}}
      <div class="row match-height">
          @foreach([
              ['id' => 'dash-spark-sms',          'label' => __('locale.labels.sms_send'),          'value' => Tool::format_number($adminDashboardQuickCounts['reports_total'])],
              ['id' => 'dash-spark-delivery',     'label' => __('locale.labels.delivered').' %',    'value' => $dashboardDeliveryRatePct.'%'],
              ['id' => 'dash-spark-customers-reg','label' => __('locale.menu.Customers'),
               'value' => '<span class="text-success">'.$customerCounts->active.'</span> / '.$customerCounts->total],
              ['id' => 'dash-spark-campaigns',    'label' => __('locale.labels.campaigns_send'),    'value' => Tool::format_number($adminDashboardQuickCounts['campaigns_total'])],
          ] as $spark)
              <div class="col-lg-3 col-md-6 col-12">
                  <div class="card">
                      <div class="card-header pb-50">
                          <div>
                              <p class="card-text mb-25 text-uppercase small">{{ $spark['label'] }}</p>
                              <h3 class="fw-bolder mb-0">{!! $spark['value'] !!}</h3>
                          </div>
                      </div>
                      <div class="card-body pt-0">
                          <div id="{{ $spark['id'] }}" style="min-height: 52px;"></div>
                      </div>
                  </div>
              </div>
          @endforeach
      </div>

      <div class="row match-height">
          <div class="col-lg-8 col-12">
              <div class="card">
                  <div class="card-header d-flex flex-wrap justify-content-between align-items-center">
                      <h4 class="card-title text-uppercase mb-sm-0">{{ __('locale.labels.sms_send') }}
                          — {{ __('locale.labels.sms_reports') }}</h4>
                      <div class="btn-group btn-group-sm" role="group">
                          <button type="button" class="btn btn-primary dash-sms-range" data-range="7">7d</button>
                          <button type="button" class="btn btn-outline-primary dash-sms-range" data-range="30">30d
                          </button>
                          <button type="button" class="btn btn-outline-primary dash-sms-range" data-range="90">90d
                          </button>
                      </div>
                  </div>
                  <div class="card-content">
                      <div class="card-body pb-0">
                          <div id="sms-volume-trend-chart" style="min-height: 280px;"></div>
                      </div>
                  </div>
              </div>
          </div>
          <div class="col-lg-4 col-12">
              <div class="card">
                  <div class="card-header">
                      <h4 class="card-title text-uppercase">{{ __('locale.menu.Subscriptions') }}
                          / {{ __('locale.menu.Plan') }}</h4>
                  </div>
                  <div class="card-content">
                      <div class="card-body pb-0">
                          <div id="plan-distribution-chart" style="min-height: 290px;"></div>
                      </div>
                  </div>
              </div>
          </div>
      </div>

      <div class="row match-height">
          <div class="col-lg-6 col-12">
              <div class="card">
                  <div class="card-header d-flex justify-content-between align-items-end">
                      <h4 class="card-title text-uppercase">{{ __('locale.labels.customers_growth') }}</h4>
                  </div>
                  <div class="card-content">
                      <div class="card-body pb-0">
                          <div id="customer-growth"></div>
                      </div>
                  </div>
              </div>
          </div>
          <div class="col-lg-6 col-12">
              <div class="card">
                  <div class="card-header d-flex justify-content-between align-items-end">
                      <h4 class="card-title text-uppercase">{{ __('locale.labels.sms_reports') }}</h4>
                  </div>
                  <div class="card-content">
                      <div class="card-body pb-0">
                          <div id="sms-reports"></div>
                      </div>
                  </div>
              </div>
          </div>
      </div>

      <div class="row match-height">
          <div class="col-lg-6 col-12">
              <div class="card">
                  <div class="card-header d-flex justify-content-between align-items-center">
                      <h4 class="card-title mb-0">{{ __('locale.menu.Subscriptions') }}</h4>
                      <a href="{{ route('admin.subscriptions.index') }}"
                         class="btn btn-sm btn-outline-primary">{{ __('locale.buttons.view') }}</a>
                  </div>
                  <div class="card-content">
                      <div class="card-body pt-50" style="max-height: 320px; overflow-y: auto;">
                          @forelse($dashboardHub['recent_subscriptions'] as $sub)
                              <div class="d-flex justify-content-between align-items-start border-bottom py-1">
                                  <div>
                                      <h6 class="mb-25">{{ $sub->plan->name ?? __('locale.menu.Plan') }}</h6>
                                      <small class="text-muted">{{ $sub->user?->displayName() }}</small>
                                  </div>
                                  <div class="text-end">
                                      @if($sub->plan && $sub->plan->currency)
                                          <div class="small fw-bold">{{ Tool::format_price($sub->plan->price, $sub->plan->currency->format) }}</div>
                                      @endif
                                      <span class="badge rounded-pill badge-light-success text-capitalize">{{ $sub->status }}</span>
                                  </div>
                              </div>
                          @empty
                            <p class="text-muted mb-0 small">{{ __('locale.datatables.no_results') }}</p>
                          @endforelse
                      </div>
                  </div>
              </div>
          </div>
          <div class="col-lg-6 col-12">
              <div class="card">
                  <div class="card-header">
                      <h4 class="card-title mb-0">{{ __('locale.labels.recents') }}</h4>
                  </div>
                  <div class="card-content">
                      <div class="card-body pt-50" style="max-height: 320px; overflow-y: auto;">
                          @forelse($dashboardHub['activity_feed'] as $item)
                              <div class="d-flex border-bottom py-75">
                                  <div class="me-75"><i data-feather="{{ $item['icon'] }}" class="font-small-3"></i>
                                  </div>
                                  <div class="flex-grow-1">
                                      <h6 class="mb-25">{{ $item['title'] }}</h6>
                                      <p class="mb-50 small">{{ $item['body'] }}</p>
                                      <small class="text-muted">{{ isset($item['happened_at']) ? Carbon::parse($item['happened_at'])->diffForHumans() : '' }}</small>
                                  </div>
                              </div>
                          @empty
                            <p class="text-muted mb-0 small">{{ __('locale.datatables.no_results') }}</p>
                          @endforelse
                      </div>
                  </div>
              </div>
          </div>
      </div>

      <div class="row match-height">
          @foreach([
                ['title' => __('locale.menu.Campaigns'), 'items' => $dashboardHub['top_campaigns'],     'color' => 'bg-primary', 'nameKey' => 'name', 'uid' => true],
                ['title' => __('locale.labels.sms_reports').' — '.__('locale.menu.Customers'), 'items' => $dashboardHub['top_customers_sms'], 'color' => 'bg-info',    'nameKey' => 'name', 'uid' => false],
            ] as $panel)
                <div class="col-lg-6 col-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title text-uppercase">{{ $panel['title'] }}</h4>
                        </div>
                        <div class="card-content">
                            <div class="card-body">
                                @forelse($panel['items'] as $row)
                                    @php $pct = min(100, $row['delivery_rate']); @endphp
                                    <div class="mb-2">
                                        <div class="d-flex justify-content-between small mb-50">
                                            <span class="fw-bold">
                                                @if($panel['uid'] && !empty($row['uid']))
                                                    <a href="{{ route('admin.reports.campaign.overview', $row['uid']) }}">{{ \Illuminate\Support\Str::limit($row[$panel['nameKey']], 40) }}</a>
                                                @else
                                                    {{ \Illuminate\Support\Str::limit($row[$panel['nameKey']], 40) }}
                                                @endif
                                            </span>
                                            <span class="text-muted">{{ Tool::format_number($row['volume']) }} · {{ $row['delivery_rate'] }}%</span>
                                        </div>
                                        <div class="progress" style="height: 8px;">
                                            <div class="progress-bar {{ $panel['color'] }}" role="progressbar"
                                                 style="width: {{ $pct }}%;" aria-valuenow="{{ $pct }}"
                                                 aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </div>
                                @empty
                                  <p class="text-muted small mb-0">{{ __('locale.datatables.no_results') }}</p>
                                @endforelse
                            </div>
                        </div>
                    </div>
                </div>
          @endforeach
      </div>

      <div class="row match-height">
          <div class="col-12">
              <div class="card">
                  <div class="card-header d-flex justify-content-between align-items-center">
                      <h4 class="mb-0">{{ __('locale.menu.Customers') }}</h4>
                      <a href="{{ route('admin.customers.index') }}"
                         class="btn btn-sm btn-outline-primary">{{ __('locale.buttons.view') }}</a>
                  </div>
                  <div class="card-content">
                      <div class="table-responsive mt-1">
                          <table class="table table-hover-animation mb-0">
                              <thead>
                              <tr>
                                  <th>{{ __('locale.menu.Customer') }}</th>
                                  <th>{{ __('locale.menu.Plan') }}</th>
                                  <th>{{ __('locale.labels.status') }}</th>
                                  <th>{{ __('locale.menu.Subscriptions') }}</th>
                                  <th>{{ __('locale.labels.created_at') }}</th>
                              </tr>
                              </thead>
                              <tbody>
                              @forelse($dashboardHub['recent_customers'] as $cust)
                                  <tr>
                                      <td>
                                          <div class="fw-bold"><a
                                                      href="{{ route('admin.customers.show', $cust->uid) }}">{{ $cust->user?->displayName() }}</a>
                                          </div>
                                          <small class="text-muted">{{ $cust->user?->email }}</small>
                                      </td>
                                      <td>{{ $cust->subscription?->plan?->name ?? '—' }}</td>
                                      <td>
                                          @if($cust->user && $cust->user->status)
                                              <span class="badge rounded-pill badge-light-success">{{ __('locale.labels.active') }}</span>
                                          @else
                                              <span class="badge rounded-pill badge-light-secondary">{{ __('locale.labels.inactive') }}</span>
                                          @endif
                                      </td>
                                      <td><small>{{ $cust->subscription?->status ?? '—' }}</small></td>
                                      <td><small>{{ $cust->created_at?->diffForHumans() }}</small></td>
                                  </tr>
                              @empty
                                <tr>
                                    <td colspan="5"
                                        class="text-muted small">{{ __('locale.datatables.no_results') }}</td>
                                </tr>
                              @endforelse
                              </tbody>
                          </table>
                      </div>
                  </div>
              </div>
          </div>
      </div>

      <div class="row match-height">
          <div class="col-12">
              <div class="card">
                  <div class="card-header d-flex justify-content-between align-items-end">
                      <h4 class="card-title text-uppercase">{{ __('locale.labels.revenue_this_month') }}</h4>
                      <small class="text-muted">{{ __('locale.labels.revenue') }}
                          : {{ Tool::format_price($paidRevenueTotal, $paidRevenueFormat) }}</small>
                  </div>
                  <div class="card-content">
                      <div class="card-body pb-0">
                          <div id="revenue-chart"></div>
                      </div>
                  </div>
              </div>
          </div>
      </div>

      <div class="row match-height">
          <div class="col-12">
              <div class="card">
                  <div class="card-header">
                      <h4 class="mb-0">{{ __('locale.labels.recent_sender_id_requests') }}</h4>
                  </div>
                  <div class="card-content">
                      <div class="table-responsive mt-1">
                          <table class="table table-hover-animation mb-0">
                              <thead>
                              <tr>
                                  <th style="width: 15%">{{ __('locale.labels.sender_id') }}</th>
                                  <th>{{ __('locale.labels.name') }}</th>
                                  <th>{{ __('locale.menu.Customer') }}</th>
                                  <th>{{ __('locale.plans.price') }}</th>
                                  <th>{{ __('locale.plans.validity') }}</th>
                              </tr>
                              </thead>
                              <tbody>
                              @foreach($sender_ids as $senderid)
                                  <tr>
                                      <td>
                                          <a href="{{ route('admin.senderid.show', $senderid->uid) }}">{{ $senderid->uid }}</a>
                                      </td>
                                      <td>{{ $senderid->sender_id }}</td>
                                      <td>
                                          <a href="{{ route('admin.customers.show', $senderid->user->uid) }}">{{ $senderid->user->displayName() }}</a>
                                      </td>
                                      <td>{{ Tool::format_price($senderid->price, $senderid->currency->format) }}</td>
                                      <td>{{ $senderid->displayFrequencyTime() }}</td>
                                  </tr>
                              @endforeach
                              </tbody>
                          </table>
                      </div>
                  </div>
              </div>
          </div>
      </div>

      @foreach($smsTypes as $type)
          <div class="row match-height">
              <div class="col-12">
                  <div class="card">
                      <div class="card-header d-flex justify-content-between align-items-center">
                          <h4 class="card-title text-uppercase">{{ __('locale.labels.sms_statistics', ['sms_type' => __('locale.labels.' . $type . '_sms')]) }}</h4>
                      </div>
                      <div class="card-body">
                          <div id="{{ $type }}_sms_data"></div>
                      </div>
                  </div>
              </div>
          </div>
      @endforeach

  </section>
@endsection

@section('vendor-script')
    <script src="{{ asset(mix('vendors/js/charts/apexcharts.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/extensions/tether.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/extensions/shepherd.min.js')) }}"></script>
@endsection


@section('page-script')
    <script src="{{ asset(mix('js/scripts/analytics/dashboard-widgets.js')) }}"></script>
    <script>
      $(window).on("load", function() {

        let $primary = "#7367F0";
        let $strok_color = "#b9c3cd";
        let $label_color = "#e7eef7";
        let $purple = "#df87f2";
        let $textMutedColor = "#b9b9c3";
        let $stroke_color_2 = "#d0ccff";

        let smsCharts = {
            @foreach($smsTypes as $type)
            "{{ $type }}": { xAxis: {!! $charts[$type]->xAxis() !!}, dataSet: {!! $charts[$type]->dataSet() !!} },
            @endforeach
        };

        function createChartOptions(height, xAxis, dataSet) {
          return {
            chart: { height: height, toolbar: { show: false }, zoom: { enabled: false }, type: "line", offsetX: -10 },
            stroke: { curve: "smooth", dashArray: [0, 5, 12], width: [5, 7, 5] },
            grid: { borderColor: $label_color, padding: { top: -20, bottom: -10, left: 20 } },
            legend: { show: false },
            colors: [$stroke_color_2, $strok_color, $purple],
            fill: {
              type: "gradient",
              gradient: {
                shade: "dark", inverseColors: false,
                gradientToColors: [window.colors.solid.primary, $strok_color, $stroke_color_2],
                shadeIntensity: 1, type: "horizontal", opacityFrom: 1, opacityTo: 1, stops: [0, 100, 100, 100]
              }
            },
            markers: { size: 0, hover: { size: 5 } },
            xaxis: {
              labels: { style: { colors: $textMutedColor, fontSize: "1rem" } },
              axisTicks: { show: false },
              categories: xAxis,
              axisBorder: { show: false },
              tickPlacement: "on"
            },
            yaxis: {
              tickAmount: 5,
              labels: {
                style: { colors: $textMutedColor, fontSize: "1rem" },
                formatter: function(val) {
                  return val > 999 ? (val / 1000).toFixed(0) + "k" : val;
                }
              }
            },
            tooltip: { x: { show: false } },
            series: dataSet
          };
        }

        // Render each SMS-type chart in one loop
        Object.keys(smsCharts).forEach(function(type) {
          let el = document.querySelector("#" + type + "_sms_data");
          if (el) new ApexCharts(el, createChartOptions(240, smsCharts[type].xAxis, smsCharts[type].dataSet)).render();
        });

        // ── Dashboard volume / sparkline data ──
        let DASH_VOLUME = {
          labels:      @json($dashboardHub['sms_volume_labels']),
          series:      @json($dashboardHub['sms_volume_series']),
          sparkSms:    @json($dashboardHub['sparkline_sms']),
          sparkDel:    @json($dashboardHub['sparkline_delivery_pct']),
          sparkCamp:   @json($dashboardHub['sparkline_campaigns']),
          sparkCust:   @json($dashboardHub['sparkline_customers']),
          planLabels:  @json($dashboardHub['plan_distribution']['labels']),
          planSeries:  @json($dashboardHub['plan_distribution']['series']),
        };

        // ── Sparkline helper ──
        function sparkOpts(data, color) {
          return {
            chart: { type: "area", sparkline: { enabled: true }, toolbar: { show: false } },
            stroke: { curve: "smooth", width: 2 },
            fill: {
              type: "gradient",
              gradient: { shadeIntensity: 1, opacityFrom: 0.35, opacityTo: 0.05, stops: [0, 90] }
            },
            colors: [color],
            series: [{ data: data }]
          };
        }

        // Render all four sparklines in one loop
        [
          ["#dash-spark-sms", DASH_VOLUME.sparkSms, $primary],
          ["#dash-spark-delivery", DASH_VOLUME.sparkDel, $purple],
          ["#dash-spark-customers-reg", DASH_VOLUME.sparkCust, "#ff9f43"],
          ["#dash-spark-campaigns", DASH_VOLUME.sparkCamp, "#00cfe8"]
        ].forEach(function(row) {
          let el = document.querySelector(row[0]);
          if (el) new ApexCharts(el, sparkOpts(row[1], row[2])).render();
        });

        // ── SMS volume trend chart ──
        function sliceVolume(n) {
          let len = DASH_VOLUME.labels.length;
          let start = Math.max(0, len - n);
          return { categories: DASH_VOLUME.labels.slice(start), data: DASH_VOLUME.series.slice(start) };
        }

        let volumeTrendChart;

        function renderVolumeTrend(range) {
          let s = sliceVolume(range);
          let opt = {
            chart: { type: "area", height: 280, toolbar: { show: false } },
            dataLabels: { enabled: false },
            stroke: { curve: "smooth", width: 2 },
            fill: {
              type: "gradient",
              gradient: {
                shade: "dark", type: "vertical", shadeIntensity: 0.5,
                opacityFrom: 0.55, opacityTo: 0.05, stops: [0, 100],
                colorStops: [{ offset: 0, color: $primary, opacity: 0.95 }, {
                  offset: 100,
                  color: $primary,
                  opacity: 0
                }]
              }
            },
            colors: [$primary],
            grid: { borderColor: $label_color, strokeDashArray: 4 },
            xaxis: { categories: s.categories, labels: { rotate: -45, style: { colors: $strok_color } } },
            yaxis: {
              labels: {
                style: { colors: $strok_color }, formatter: function(v) {
                  return v >= 1000 ? (v / 1000).toFixed(1) + "k" : v;
                }
              }
            },
            series: [{ name: {!! json_encode(__('locale.labels.sms_send')) !!}, data: s.data }]
          };
          let node = document.querySelector("#sms-volume-trend-chart");
          if (!node) return;
          if (volumeTrendChart) {
            volumeTrendChart.updateOptions({ xaxis: { categories: s.categories } });
            volumeTrendChart.updateSeries([{ data: s.data }]);
          } else {
            volumeTrendChart = new ApexCharts(node, opt);
            volumeTrendChart.render();
          }
        }

        document.querySelectorAll(".dash-sms-range").forEach(function(btn) {
          btn.addEventListener("click", function() {
            document.querySelectorAll(".dash-sms-range").forEach(function(b) {
              b.classList.remove("btn-primary");
              b.classList.add("btn-outline-primary");
            });
            this.classList.add("btn-primary");
            this.classList.remove("btn-outline-primary");
            renderVolumeTrend(parseInt(this.dataset.range, 10));
          });
        });

        renderVolumeTrend(7);

        // ── Plan distribution donut ──
        let planEl = document.querySelector("#plan-distribution-chart");
        if (planEl && DASH_VOLUME.planSeries.length) {
          new ApexCharts(planEl, {
            chart: { type: "donut", height: 290, toolbar: { show: false } },
            labels: DASH_VOLUME.planLabels,
            series: DASH_VOLUME.planSeries,
            legend: { position: "bottom" },
            plotOptions: { pie: { donut: { size: "68%" } } },
            colors: ["#7367F0", "#EA5455", "#00cfe8", "#ff9f43", "#28c76f", "#82868b", "#f081e6", "#ffc107"],
            stroke: { width: 0 },
            dataLabels: { enabled: false }
          }).render();
        } else if (planEl) {
          planEl.innerHTML = "<p class=\"text-muted small p-2 mb-0\">" + {!! json_encode(__('locale.datatables.no_data_available')) !!} + "</p>";
        }

        // ── Revenue line chart ──
        new ApexCharts(document.querySelector("#revenue-chart"), {
          chart: {
            height: 270, toolbar: { show: false }, type: "line",
            dropShadow: { enabled: true, top: 20, left: 2, blur: 6, opacity: 0.20 }
          },
          stroke: { curve: "smooth", width: 4 },
          grid: { borderColor: $label_color },
          legend: { show: false },
          colors: [$purple],
          fill: {
            type: "gradient",
            gradient: {
              shade: "dark", inverseColors: false, gradientToColors: [$primary],
              shadeIntensity: 1, type: "horizontal", opacityFrom: 1, opacityTo: 1, stops: [0, 100, 100, 100]
            }
          },
          markers: { size: 0, hover: { size: 5 } },
          xaxis: {
            labels: { style: { colors: $strok_color } },
            axisTicks: { show: false },
            categories: {!! $charts['plain']->xAxis() !!},
            axisBorder: { show: false },
            tickPlacement: "on",
            type: "string"
          },
          yaxis: {
            tickAmount: 5,
            labels: {
              style: { color: $strok_color },
              formatter: function(val) {
                return val > 999 ? (val / 1000).toFixed(1) + "k" : val.toFixed(1);
              }
            }
          },
          tooltip: { x: { show: false } },
          series: {!! $revenue_chart->dataSet() !!}
        }).render();

        // ── Customer growth bar chart ──
        new ApexCharts(document.querySelector("#customer-growth"), {
          chart: { stacked: true, type: "bar", toolbar: { show: false }, height: 290 },
          plotOptions: { bar: { columnWidth: "70%" } },
          colors: ["#7367F0"],
          series: {!! $customer_growth->dataSet() !!},
          grid: { borderColor: "#e7eef7", padding: { left: 0, right: 0 } },
          legend: {
            show: true,
            position: "top",
            horizontalAlign: "left",
            offsetX: 0,
            fontSize: "14px",
            markers: { radius: 50, width: 10, height: 10 }
          },
          dataLabels: { enabled: false },
          xaxis: {
            labels: { style: { colors: "#b9c3cd" } },
            axisTicks: { show: false },
            categories: {!! $customer_growth->xAxis() !!},
            axisBorder: { show: false }
          },
          yaxis: {
            tickAmount: 5, labels: {
              style: { color: "#b9c3cd" }, formatter: function(val) {
                return val.toFixed(1);
              }
            }
          },
          tooltip: { x: { show: false } }
        }).render();

        // ── SMS history pie chart ──
        new ApexCharts(document.querySelector("#sms-reports"), {
          chart: {
            type: "pie",
            height: 325,
            dropShadow: { enabled: false, blur: 5, left: 1, top: 1, opacity: 0.2 },
            toolbar: { show: false }
          },
          labels: ["{{ __('locale.labels.delivered') }}", "{{ __('locale.labels.failed') }}"],
          series: {!! $sms_history->dataSet() !!},
          dataLabels: { enabled: false },
          legend: { show: false },
          stroke: { width: 5 },
          colors: ["#7367F0", "#EA5455"],
          fill: { type: "gradient", gradient: { gradientToColors: ["#9c8cfc", "#f29292"] } }
        }).render();

      });
    </script>
@endsection