@php
    $hourlyLimit = '—';
    $hourlyLimitClass = 'is-limited';
    $hourlyLimitIcon = 'bi bi-speedometer2';
    if (!empty($schedule_stat->sending_speed)) {
        $speed = json_decode($schedule_stat->sending_speed);
        if (is_object($speed) && isset($speed->speed)) {
            if ($speed->speed === 'unlimited') {
                $hourlyLimit = __('app.maximum');
                $hourlyLimitClass = 'is-maximum';
                $hourlyLimitIcon = 'bi bi-lightning-charge-fill';
            } else {
                $limitValue = $speed->limit ?? '—';
                $hourlyLimit = __('app.limited') . ' (' . $limitValue . '/' . __('app.hourly') . ')';
            }
        }
    }
@endphp
<link rel="stylesheet" href="{{ asset('components/jvectormap/jquery-jvectormap-2.0.3.css') }}">
<style>
  .campaign-analytics-summary,
  .campaign-analytics-summary .contact-detail-dl dt,
  .campaign-analytics-summary .contact-detail-dl dd,
  .campaign-analytics-summary .contact-detail-dl dd *,
  .campaign-analytics-summary .campaign-analytics-async {
    font-size: 0.8125rem !important;
    line-height: 1.2 !important;
  }
  .campaign-analytics-summary .contact-detail-status-bar .fw-semibold,
  .campaign-analytics-summary .contact-detail-status-bar .fw-semibold * {
    font-size: 0.8125rem !important;
    line-height: 1.2 !important;
  }
  .campaign-analytics-summary .pkg-limit-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.26rem 0.6rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
  }
  .campaign-analytics-summary .pkg-limit-pill i {
    font-size: 0.8rem;
    line-height: 1;
  }
  .campaign-analytics-summary .pkg-limit-pill.is-maximum {
    color: #075985;
    background: rgba(14, 165, 233, 0.14);
    border-color: rgba(2, 132, 199, 0.32);
  }
  .campaign-analytics-summary .pkg-limit-pill.is-limited {
    color: #0d6efd;
    background: rgba(13, 110, 253, 0.12);
    border-color: rgba(13, 110, 253, 0.24);
  }
  [data-theme-mode="dark"] .campaign-analytics-summary .pkg-limit-pill.is-maximum {
    color: #bae6fd;
    background: rgba(14, 165, 233, 0.2);
    border-color: rgba(125, 211, 252, 0.36);
  }
  [data-theme-mode="dark"] .campaign-analytics-summary .pkg-limit-pill.is-limited {
    color: #8ab8ff;
    background: rgba(13, 110, 253, 0.22);
    border-color: rgba(138, 184, 255, 0.4);
  }
</style>
<script src="{{ asset('components/Chart.js/dist/Chart.min.js') }}"></script>
<script src="{{ asset('components/jvectormap/jquery-jvectormap-2.0.3.min.js') }}"></script>
<script src="{{ asset('components/jvectormap/jquery-jvectormap-world-mill-en.js') }}"></script>
<script>
$(function () {
  'use strict';
  var sid = {{ (int) $schedule_stat->id }};
  var base = '/detail/stat/campaign/' + sid + '/';
  var spin = '<div class="spinner-border spinner-border-sm text-primary" role="status"><span class="visually-hidden">{{ __('app.dt_loadingRecords') }}</span></div>';

  $.ajax({
    url: base + 'summary_sent_lists',
    beforeSend: function () { $('#div-sent-lists').html(spin); }
  }).done(function (data) { $('#div-sent-lists').html(data); });

  $.ajax({
    url: base + 'summary_sent_sending_servers',
    beforeSend: function () { $('#div-sent-sending-servers').html(spin); }
  }).done(function (data) { $('#div-sent-sending-servers').html(data); });

  $.ajax({
    url: base + 'summary_opens',
    beforeSend: function () { $('#div-opens').html(spin); }
  }).done(function (data) { $('#div-opens').html(data); });

  $.ajax({
    url: base + 'summary_clicks',
    beforeSend: function () { $('#div-clicks').html(spin); }
  }).done(function (data) { $('#div-clicks').html(data); });

  $.ajax({
    url: base + 'summary_replies',
    beforeSend: function () { $('#div-replies').html(spin); }
  }).done(function (data) { $('#div-replies').html(data); });

  $.ajax({
    url: base + 'summary_unsubscribed',
    beforeSend: function () { $('#div-unsubscribed').html(spin); }
  }).done(function (data) { $('#div-unsubscribed').html(data); });

  $.ajax({
    url: base + 'summary_bounces',
    beforeSend: function () { $('#div-bounces').html(spin); }
  }).done(function (data) { $('#div-bounces').html(data); });

  $.ajax({
    url: base + 'summary_spam',
    beforeSend: function () { $('#div-spam').html(spin); }
  }).done(function (data) { $('#div-spam').html(data); });

  $.ajax({
    url: "{{ route('campaign.sent.data', ['id' => $schedule_stat->id]) }}",
    beforeSend: function () { $('#div-chart-pie').html('<div class="spinner-border text-primary" role="status"><span class="visually-hidden">{{ __('app.dt_loadingRecords') }}</span></div>'); }
  }).done(function (data) {
    $('#div-chart-pie').html('<canvas id="canvas-chart-sent" class="campaign-analytics-pie-canvas"></canvas>');
    var canvas_chart_sent = $('#canvas-chart-sent').get(0).getContext('2d');
    var chart = new Chart(canvas_chart_sent);
    var parsed = JSON.parse(data);
    var options = {
      legend: {
        position: 'right',
        labels: { boxWidth: 20 }
      }
    };
    new Chart(chart, {
      type: 'pie',
      data: parsed,
      options: options
    });
  });

  $.ajax({
    url: "{{ route('campaign.sent.data', ['id' => $schedule_stat->id, 'type' => 'country']) }}",
    beforeSend: function () { $('#world-map').html('<div class="d-flex align-items-center justify-content-center campaign-analytics-map-loading"><div class="spinner-border text-primary" role="status"><span class="visually-hidden">{{ __('app.dt_loadingRecords') }}</span></div></div>'); }
  }).done(function (data) {
    var mapData = JSON.parse(data);
    $('#world-map').empty();
    $('#world-map').vectorMap({
      map: 'world_mill_en',
      backgroundColor: 'transparent',
      regionStyle: {
        initial: {
          fill: '#e4e4e4',
          'fill-opacity': 1,
          stroke: 'none',
          'stroke-width': 0,
          'stroke-opacity': 1
        },
        hover: {
          stroke: '#3D5A6B',
          'stroke-width': 2,
          cursor: 'pointer'
        }
      },
      series: {
        regions: [{
          values: mapData,
          scale: ['#deeef7', '#096da5'],
          normalizeFunction: 'polynomial'
        }]
      },
      onRegionTipShow: function (e, el, code) {
        if (typeof mapData[code] !== 'undefined') {
          el.html(el.html() + ' ({{ __('app.opens') }}: ' + mapData[code] + ')');
        }
      }
    });
  });
});
</script>

<div class="campaign-analytics-summary">
    <div class="row g-4">
        <div class="col-xl-6">
            <div class="contact-detail-status-bar rounded-3 border bg-light p-3 mb-4">
                <div class="row g-3 small text-center text-md-start">
                    <div class="col-4">
                        <div class="text-secondary text-uppercase fw-semibold mb-1" style="font-size: 0.65rem; letter-spacing: 0.04em;">{{ __('app.total') }}</div>
                        <div class="fw-semibold mb-0">{{ $schedule_stat->total }}</div>
                    </div>
                    <div class="col-4">
                        <div class="text-secondary text-uppercase fw-semibold mb-1" style="font-size: 0.65rem; letter-spacing: 0.04em;">{{ __('app.sent') }}</div>
                        <div class="fw-semibold mb-0">{{ $schedule_stat->sent }}</div>
                    </div>
                    <div class="col-4">
                        <div class="text-secondary text-uppercase fw-semibold mb-1" style="font-size: 0.65rem; letter-spacing: 0.04em;">{{ __('app.scheduled') }}</div>
                        <div class="fw-semibold mb-0">
                            <a href="javascript:;" class="text-decoration-none campaign-analytics-scheduled-link" onclick="viewModal('modal', '{{ route('scheduled.detail.campaign', ['id' => $schedule_stat->schedule_campaign_id]) }}')">{{ $schedule_stat->scheduled }}</a>
                        </div>
                    </div>
                </div>
            </div>

            <h6 class="text-secondary text-uppercase fw-semibold mb-3" style="font-size: 0.7rem; letter-spacing: 0.06em;">{{ __('app.campaign') }}</h6>
            <dl class="row mb-0 contact-detail-dl">
                <dt class="col-sm-4">{{ __('app.name') }}</dt>
                <dd class="col-sm-8 text-break">{{ $schedule_stat->schedule_campaign_name }}</dd>
                <dt class="col-sm-4">{{ __('app.scheduled_by') }}</dt>
                <dd class="col-sm-8 text-break">{{ $schedule_stat->schedule_by }}</dd>
                <dt class="col-sm-4">{{ __('app.created') }}</dt>
                <dd class="col-sm-8">{{ !empty($schedule_stat->created_at) ? \App\Http\Helper\Helper::datetimeDisplay($schedule_stat->created_at) : '—' }}</dd>
                <dt class="col-sm-4">{{ __('app.started_at') }}</dt>
                <dd class="col-sm-8">{{ !empty($schedule_stat->start_datetime) ? \App\Http\Helper\Helper::datetimeDisplay($schedule_stat->start_datetime) : '—' }}</dd>
                <dt class="col-sm-4">{{ __('app.ended_at') }}</dt>
                <dd class="col-sm-8">{{ !empty($schedule_stat->end_datetime) ? \App\Http\Helper\Helper::datetimeDisplay($schedule_stat->end_datetime) : '—' }}</dd>
                <dt class="col-sm-4">{{ __('app.subject') }}</dt>
                <dd class="col-sm-8 text-break">{{ $schedule_stat->email_subject ?? '—' }}</dd>
                <dt class="col-sm-4">{{ __('app.content') }}</dt>
                <dd class="col-sm-8">
                    <a class="link-info text-decoration-none" target="_blank" rel="noopener" href="{{ route('get.schedule_campaign.content', [$schedule_stat->schedule_campaign_id]) }}">
                        <i class="bi bi-box-arrow-up-right me-1"></i>{{ __('app.view') }}
                    </a>
                </dd>
            </dl>

            <div class="border-top my-4"></div>

            <h6 class="text-secondary text-uppercase fw-semibold mb-3" style="font-size: 0.7rem; letter-spacing: 0.06em;">{{ __('app.delivery_settings') }}</h6>
            <dl class="row mb-0 contact-detail-dl">
                <dt class="col-sm-4">{{ __('app.lists') }}</dt>
                <dd class="col-sm-8 text-break"><div id="div-sent-lists" class="campaign-analytics-async"></div></dd>
                <dt class="col-sm-4">{{ __('app.delivery_servers') }}</dt>
                <dd class="col-sm-8 text-break"><div id="div-sent-sending-servers" class="campaign-analytics-async"></div></dd>
                <dt class="col-sm-4">{{ __('app.limit') }} ({{ __('app.hourly') }})</dt>
                <dd class="col-sm-8">
                    <span class="pkg-limit-pill {{ $hourlyLimitClass }}">
                        <i class="{{ $hourlyLimitIcon }}" aria-hidden="true"></i>
                        <span>{{ $hourlyLimit }}</span>
                    </span>
                </dd>
            </dl>

            <div class="border-top my-4"></div>

            <h6 class="text-secondary text-uppercase fw-semibold mb-3" style="font-size: 0.7rem; letter-spacing: 0.06em;">{{ __('app.stats') }}</h6>
            <dl class="row mb-0 contact-detail-dl">
                <dt class="col-sm-4">{{ __('app.opens') }}</dt>
                <dd class="col-sm-8 text-break"><div id="div-opens" class="campaign-analytics-async"></div></dd>
                <dt class="col-sm-4">{{ __('app.clicks') }}</dt>
                <dd class="col-sm-8 text-break"><div id="div-clicks" class="campaign-analytics-async"></div></dd>
                <dt class="col-sm-4">{{ __('app.replies') }}</dt>
                <dd class="col-sm-8 text-break"><div id="div-replies" class="campaign-analytics-async"></div></dd>
                <dt class="col-sm-4">{{ __('app.unsubscribed') }}</dt>
                <dd class="col-sm-8 text-break"><div id="div-unsubscribed" class="campaign-analytics-async"></div></dd>
                <dt class="col-sm-4">{{ __('app.bounces') }}</dt>
                <dd class="col-sm-8 text-break"><div id="div-bounces" class="campaign-analytics-async"></div></dd>
                <dt class="col-sm-4">{{ __('app.spams') }}</dt>
                <dd class="col-sm-8 text-break"><div id="div-spam" class="campaign-analytics-async"></div></dd>
            </dl>
        </div>

        <div class="col-xl-6">
            <div class="card border rounded-3 shadow-none mb-4">
                <div class="card-body p-3 p-md-4">
                    <h6 class="text-secondary text-uppercase fw-semibold mb-3" style="font-size: 0.7rem; letter-spacing: 0.06em;">{{ __('app.sent') }}</h6>
                    <div id="div-chart-pie" class="campaign-analytics-chart-pie d-flex align-items-center justify-content-center"></div>
                </div>
            </div>
            <div class="card border rounded-3 shadow-none">
                <div class="card-body p-3 p-md-4">
                    <h6 class="text-secondary text-uppercase fw-semibold mb-3" style="font-size: 0.7rem; letter-spacing: 0.06em;">{{ __('app.opens') }} — {{ __('app.country') }}</h6>
                    <div id="world-map" class="campaign-analytics-world-map rounded-2 overflow-hidden border"></div>
                </div>
            </div>
        </div>
    </div>
</div>