@extends('layouts/contentLayoutMaster')

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

@section('vendor-style')
  {{-- vendor css files --}}
  <link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/dataTables.bootstrap5.min.css')) }}">
  <link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/responsive.bootstrap5.min.css')) }}">
  <link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/buttons.bootstrap5.min.css')) }}">
  <link rel="stylesheet" href="{{ asset(mix('vendors/css/extensions/sweetalert2.min.css')) }}">
  <link rel="stylesheet" href="{{ asset(mix('vendors/css/charts/apexcharts.css')) }}">
@endsection

@section('page-style')
<style>
  .card-datatable {
    overflow: visible !important;
  }
  .dataTables_wrapper {
    overflow: visible !important;
  }
  table.datatables-basic td:last-child,
  table.datatables-basic th:last-child {
    width: 48px;
    min-width: 48px;
    max-width: 48px;
    white-space: nowrap;
  }
</style>
@endsection

@section('content')
  @php
    $s = $subscriptions_stats ?? (object) [];
    $mrr = (float) ($s->mrr ?? 0);
    $activeCount = max(1, (int) ($s->active ?? 0));
    $autoRenewing = (int) ($s->auto_renewing ?? 0);
    $autoPct = round(($autoRenewing / $activeCount) * 100, 1);
  @endphp

  <div class="row match-height mb-1 g-1">
    <div class="col-xl col-lg-4 col-sm-6 col-12">
      <div class="card border-start border-success border-3 h-100">
        <div class="card-body d-flex justify-content-between align-items-center py-1">
          <div>
            <p class="card-text text-muted mb-25 small text-uppercase">{{ __('locale.subscription.kpi_mrr_recurring') }}</p>
            <h3 class="fw-bolder mb-0" id="kpi-mrr">${{ number_format($mrr) }}{{ __('locale.subscription.mrr_per_month_suffix') }}</h3>
            <p class="mb-0 small text-muted" id="kpi-mrr-currency">{{ __('locale.subscription.kpi_mrr_sub', ['count' => (int) ($s->mrr_new_30d ?? 0)]) }}</p>
            <p class="mb-0 small text-success" id="kpi-mrr-trend">+{{ number_format((float) ($s->mrr_change_pct ?? 0), 1) }}%</p>
          </div>
          <div class="avatar bg-light-success p-50 m-0">
            <div class="avatar-content"><i data-feather="dollar-sign" class="font-medium-5 text-success"></i></div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-xl col-lg-4 col-sm-6 col-12">
      <div class="card h-100">
        <div class="card-body d-flex justify-content-between align-items-center py-1">
          <div>
            <p class="card-text text-muted mb-25 small text-uppercase">{{ __('locale.subscription.kpi_active_subscribers') }}</p>
            <h3 class="fw-bolder mb-0" id="kpi-active">{{ (int) ($s->active_subscribers ?? $s->active ?? 0) }}</h3>
            <p class="mb-0 small text-muted">{{ __('locale.subscription.kpi_active_sub') }}</p>
          </div>
          <div class="avatar bg-light-primary p-50 m-0">
            <div class="avatar-content"><i data-feather="users" class="font-medium-5 text-primary"></i></div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-xl col-lg-4 col-sm-6 col-12">
      <div class="card h-100">
        <div class="card-body d-flex justify-content-between align-items-center py-1">
          <div>
            <p class="card-text text-muted mb-25 small text-uppercase">{{ __('locale.subscription.kpi_auto_renewing') }}</p>
            <h3 class="fw-bolder mb-0" id="kpi-autorenew">{{ $autoRenewing }}</h3>
            <p class="mb-0 small text-muted" id="kpi-autorenew-pct">{{ __('locale.subscription.auto_renew_pct_active', ['pct' => $autoPct]) }}</p>
          </div>
          <div class="avatar bg-light-info p-50 m-0">
            <div class="avatar-content"><i data-feather="refresh-cw" class="font-medium-5 text-info"></i></div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-xl col-lg-4 col-sm-6 col-12">
      <div class="card h-100">
        <div class="card-body d-flex justify-content-between align-items-center py-1">
          <div>
            <p class="card-text text-muted mb-25 small text-uppercase">{{ __('locale.subscription.kpi_ending_7d') }}</p>
            <h3 class="fw-bolder mb-0" id="kpi-ending">{{ (int) ($s->ending_7d ?? 0) }}</h3>
            <p class="mb-0 small text-muted">{{ __('locale.subscription.kpi_ending_sub') }}</p>
          </div>
          <div class="avatar bg-light-warning p-50 m-0">
            <div class="avatar-content"><i data-feather="clock" class="font-medium-5 text-warning"></i></div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-xl col-lg-4 col-sm-6 col-12">
      <div class="card h-100">
        <div class="card-body d-flex justify-content-between align-items-center py-1">
          <div>
            <p class="card-text text-muted mb-25 small text-uppercase">{{ __('locale.subscription.kpi_pending_approval') }}</p>
            <h3 class="fw-bolder mb-0" id="kpi-pending">{{ (int) ($s->pending_approval ?? 0) }}</h3>
            <p class="mb-0 small text-muted">{{ __('locale.subscription.kpi_pending_sub') }}</p>
          </div>
          <div class="avatar bg-light-secondary p-50 m-0">
            <div class="avatar-content"><i data-feather="clock" class="font-medium-5 text-secondary"></i></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-12 col-xl-9">
      <div class="d-flex flex-wrap justify-content-between align-items-start gap-1 mb-1">
        <div>
          <h4 class="mb-25 fw-bold">{{ __('locale.subscription.page_heading') }}</h4>
          <p class="text-muted mb-0 small">{{ __('locale.subscription.page_subheading') }}</p>
        </div>
        <div class="d-flex flex-wrap gap-50 align-items-center">
          <button type="button" class="btn btn-sm btn-outline-secondary" id="btn-sub-export"><i data-feather="download" class="font-small-4"></i> {{ __('locale.subscription.export_csv') }}</button>
          @can('new subscription')
            <a href="{{ route('admin.subscriptions.create') }}" class="btn btn-sm btn-success fw-bold">{{ __('locale.buttons.new_subscription') }} <i data-feather="plus-circle" class="font-small-4"></i></a>
          @endcan
        </div>
      </div>

      <div class="mb-1 d-flex flex-wrap align-items-center gap-50 border-bottom pb-50" id="subscription-status-tabs">
        <button type="button" class="btn btn-sm btn-link text-body subscription-tab active px-50 py-25 border-bottom border-2 border-success rounded-0" data-tab="all">{{ __('locale.subscription.tab_all') }} <span class="tab-count-all">{{ (int) ($s->total ?? 0) }}</span></button>
        <button type="button" class="btn btn-sm btn-link text-muted subscription-tab px-50 py-25 rounded-0" data-tab="active">{{ __('locale.subscription.tab_active') }} <span class="tab-count-active">{{ (int) ($s->active ?? 0) }}</span></button>
        <button type="button" class="btn btn-sm btn-link text-muted subscription-tab px-50 py-25 rounded-0" data-tab="pending">{{ __('locale.subscription.tab_pending') }} <span class="tab-count-pending">{{ (int) ($s->tab_pending ?? 0) }}</span></button>
        <button type="button" class="btn btn-sm btn-link text-muted subscription-tab px-50 py-25 rounded-0" data-tab="cancelled">{{ __('locale.subscription.tab_cancelled') }} <span class="tab-count-cancelled">{{ (int) ($s->tab_cancelled ?? 0) }}</span></button>
        <button type="button" class="btn btn-sm btn-link text-muted subscription-tab px-50 py-25 rounded-0" data-tab="expired">{{ __('locale.subscription.tab_expired') }} <span class="tab-count-expired">{{ (int) ($s->tab_expired ?? $s->tab_ended ?? 0) }}</span></button>
        <button type="button" class="btn btn-sm btn-link text-muted subscription-tab px-50 py-25 rounded-0" data-tab="suspended">{{ __('locale.subscription.tab_suspended') }} <span class="tab-count-suspended">{{ (int) ($s->tab_suspended ?? 0) }}</span></button>
      </div>

      <div class="mb-1 row g-50 align-items-end">
        <div class="col-12 col-lg-6">
          <div class="input-group input-group-merge input-group-sm">
            <span class="input-group-text"><i data-feather="search" class="font-small-4"></i></span>
            <input type="search" class="form-control" id="subscription-search-input" placeholder="{{ __('locale.subscription.search_placeholder_wide') }}">
          </div>
        </div>
        <div class="col-6 col-md-4 col-lg-2">
          <select class="form-select form-select-sm" id="filter-plan">
            <option value="">{{ __('locale.subscription.filter_all_plans') }}</option>
            @foreach ($plans as $plan)
              <option value="{{ $plan->id }}">{{ $plan->name }}</option>
            @endforeach
          </select>
        </div>
        <div class="col-6 col-md-4 col-lg-2">
          <select class="form-select form-select-sm" id="filter-recurring">
            <option value="all">{{ __('locale.subscription.filter_recurring_all') }}</option>
            <option value="auto">{{ __('locale.subscription.filter_recurring_auto') }}</option>
            <option value="one_time">{{ __('locale.subscription.filter_recurring_one_time') }}</option>
          </select>
        </div>
        <div class="col-6 col-md-4 col-lg-2">
          <select class="form-select form-select-sm" id="filter-reconcile">
            <option value="all">{{ __('locale.subscription.filter_reconcile_all') }}</option>
            <option value="none">none</option>
            <option value="synced">synced</option>
            <option value="mismatched">mismatched</option>
            <option value="failed">failed</option>
            <option value="pending">pending</option>
          </select>
        </div>
        <div class="col-6 col-md-4 col-lg-2">
          <input type="date" class="form-control form-control-sm" id="filter-date-from" value="">
        </div>
        <div class="col-6 col-md-4 col-lg-2">
          <input type="date" class="form-control form-control-sm" id="filter-date-to" value="">
        </div>
        <div class="col-6 col-md-4 col-lg-2">
          <select class="form-select form-select-sm" id="filter-status">
            <option value="">{{ __('locale.subscription.filter_all_statuses') }}</option>
            <option value="active">{{ __('locale.subscription.tab_active') }}</option>
            <option value="pending">{{ __('locale.labels.pending') }}</option>
            <option value="new">{{ __('locale.labels.new') }}</option>
            <option value="ended">{{ __('locale.subscription.tab_expired') }}</option>
            <option value="renew">{{ __('locale.labels.renew') }}</option>
          </select>
        </div>
        <div class="col-6 col-md-4 col-lg-2">
          <select class="form-select form-select-sm" id="filter-gateway">
            <option value="">{{ __('locale.subscription.filter_all_gateways') }}</option>
            @foreach ($gateways as $gw)
              <option value="{{ $gw->id }}">{{ $gw->name }}</option>
            @endforeach
          </select>
        </div>
        <div class="col-6 col-md-4 col-lg-2">
          <select class="form-select form-select-sm" id="filter-sort">
            <option value="created">{{ __('locale.subscription.filter_sort_created_newest') }}</option>
            <option value="latest">{{ __('locale.subscription.filter_sort_latest') }}</option>
            <option value="renewal">{{ __('locale.subscription.filter_sort_renewal') }}</option>
            <option value="next_billing">{{ __('locale.subscription.filter_sort_next_billing') }}</option>
            <option value="end_date">{{ __('locale.subscription.filter_sort_end') }}</option>
            <option value="gateway">{{ __('locale.subscription.filter_sort_gateway') }}</option>
          </select>
        </div>
        <div class="col-12 col-md-auto">
          <button type="button" class="btn btn-sm btn-outline-secondary" id="btn-filter-reset">{{ __('locale.subscription.reset_filters') }}</button>
        </div>
      </div>

      <div class="mb-1 d-flex flex-wrap align-items-center gap-50">
        @can('manage subscription')
          <div class="btn-group">
            <button class="btn btn-primary btn-sm fw-bold dropdown-toggle" type="button" id="bulk_actions" data-bs-toggle="dropdown" aria-expanded="false">{{ __('locale.labels.actions') }}</button>
            <div class="dropdown-menu" aria-labelledby="bulk_actions">
              <a class="dropdown-item bulk-cancel" href="#"><i data-feather="stop-circle"></i> {{ __('locale.datatables.bulk_cancel') }}</a>
              <a class="dropdown-item bulk-delete" href="#"><i data-feather="trash"></i> {{ __('locale.datatables.bulk_delete') }}</a>
            </div>
          </div>
        @endcan
      </div>

      <div class="card">
        <div class="card-datatable pt-0">
          <table class="table datatables-basic">
            <thead>
              <tr>
                <th></th>
                <th></th>
                <th>{{ __('locale.labels.id') }}</th>
                <th></th>
                <th>Plan &amp; Customer</th>
                <th>Billing</th>
                <th>Credits</th>
                <th>{{ __('locale.labels.status') }}</th>
                <th>{{ __('locale.subscription.gateway_col') }}</th>
                <th class="text-end">{{ __('locale.labels.actions') }}</th>
              </tr>
            </thead>
          </table>
        </div>
      </div>
    </div>

    <div class="col-12 col-xl-3 mt-2 mt-xl-0">
      <div class="card mb-1">
        <div class="card-header py-50"><span class="fw-bold text-uppercase small">{{ __('locale.subscription.widget_summary') }}</span></div>
        <div class="card-body py-50">
          @php
            $sumLabels = [
              'sum-total' => __('locale.subscription.sum_total'),
              'sum-active' => __('locale.subscription.sum_active'),
              'sum-expired' => __('locale.subscription.sum_expired'),
              'sum-cancelled' => __('locale.subscription.sum_cancelled'),
              'sum-rec-on' => __('locale.subscription.sum_recurring_on'),
              'sum-rec-off' => __('locale.subscription.sum_recurring_off'),
              'sum-mrr' => __('locale.subscription.sum_mrr'),
              'sum-yr' => __('locale.subscription.sum_yearly'),
              'sum-renewed-today' => __('locale.subscription.sum_renewed_today'),
              'sum-failed' => __('locale.subscription.sum_failed_renewals'),
            ];
            $summaryRows = $s->summary ?? [];
          @endphp
          <div class="row g-50" id="widget-summary-grid">
            @foreach ($summaryRows as $row)
              @php
                $sid = $row['id'] ?? '';
                $ser = $row['series'] ?? [10, 20, 15, 30, 25, 40];
                $mx = max($ser) ?: 1;
                $nS = max(count($ser) - 1, 1);
                $sparkPts = [];
                foreach ($ser as $i => $v) {
                    $sparkPts[] = ($i * 60 / $nS) . ',' . (18 - ($v / $mx) * 14);
                }
              @endphp
              <div class="col-6">
                <div class="border rounded p-50 h-100" data-summary-id="{{ $sid }}">
                  <div class="text-muted font-monospace" style="font-size: 0.65rem;">{{ strtoupper($sumLabels[$sid] ?? '') }}</div>
                  <div class="fw-bolder fs-5 summary-val">{{ $row['value'] ?? 0 }}</div>
                  <svg viewBox="0 0 60 20" class="w-100 mt-25" style="height:22px" preserveAspectRatio="none">
                    <polyline fill="none" stroke="#28c76f" stroke-width="1.2" points="{{ implode(' ', $sparkPts) }}" />
                  </svg>
                </div>
              </div>
            @endforeach
          </div>
        </div>
      </div>

      <div class="card mb-1">
        <div class="card-header py-50 d-flex justify-content-between align-items-center"><span class="fw-bold text-uppercase small">{{ __('locale.subscription.widget_plan_mix') }}</span></div>
        <div class="card-body py-50">
          <div id="plan-mix-chart" style="min-height:220px"></div>
          <div class="mt-1 small" id="plan-mix-legend">
            @foreach ($s->plan_mix_donut ?? [] as $mix)
              <div class="d-flex justify-content-between py-25"><span><span class="d-inline-block rounded-circle me-50" style="width:8px;height:8px;background:{{ $mix['color'] ?? '#28c76f' }}"></span>{{ $mix['name'] }}</span><span>{{ $mix['count'] }} ({{ $mix['pct'] }}%)</span></div>
            @endforeach
            @if (empty($s->plan_mix_donut))
              @foreach ($s->plan_mix ?? [] as $mix)
                <div class="d-flex justify-content-between py-25"><span>{{ $mix['name'] }}</span><span>{{ $mix['count'] }} ({{ $mix['pct'] }}%)</span></div>
              @endforeach
            @endif
          </div>
        </div>
      </div>

      <div class="card mb-1">
        <div class="card-header py-50"><span class="fw-bold text-uppercase small">{{ __('locale.subscription.widget_pending_title') }}</span></div>
        <div class="card-body py-1" id="widget-pending-body">
          @php $plist = $s->pending_list ?? []; @endphp
          @if (count($plist))
            <ul class="list-unstyled mb-0">
              @foreach ($plist as $p)
                <li class="d-flex justify-content-between align-items-center py-50 border-bottom">
                  <div>
                    <div class="fw-bold">{{ $p['name'] }}</div>
                    <small class="text-muted">{{ $p['email'] }}</small>
                  </div>
                  @can('manage subscription')
                    <button type="button" class="btn btn-sm btn-outline-success btn-approve-inline" data-url="{{ $p['approve_url'] }}">{{ __('locale.labels.approve') }}</button>
                  @endcan
                </li>
              @endforeach
            </ul>
          @else
            <p class="text-muted mb-0 small">{{ __('locale.subscription.widget_pending_empty') }}</p>
          @endif
        </div>
      </div>

      <div class="card mb-1">
        <div class="card-header py-50"><span class="fw-bold text-uppercase small">{{ __('locale.subscription.widget_reconcile_health') }}</span></div>
        <div class="card-body py-1 small" id="widget-reconcile-body">
          @if (($s->reconcile_with_gateway ?? 0) > 0)
            <div>{{ __('locale.subscription.reconcile_summary_line', [
              'synced' => (int) ($s->reconcile_synced ?? 0),
              'mismatch' => (int) ($s->reconcile_mismatched ?? 0),
              'issues' => (int) ($s->reconcile_failed_or_pending ?? 0),
            ]) }}</div>
          @else
            <p class="text-muted mb-0">{{ __('locale.subscription.widget_reconcile_empty') }}</p>
          @endif
        </div>
      </div>

      <div class="card mb-1">
        <div class="card-header py-50"><span class="fw-bold text-uppercase small">{{ __('locale.subscription.widget_recent_activity') }}</span></div>
        <div class="card-body py-1 small" id="widget-activity-body">
          @forelse ($s->recent_activity ?? [] as $act)
            <div class="border-bottom py-50"><span class="fw-bold">{{ $act['user'] }}</span> · <span class="text-muted">{{ $act['label'] }}</span><br><small class="text-muted">{{ $act['created'] }}</small></div>
          @empty
            <p class="text-muted mb-0">{{ __('locale.subscription.widget_recent_empty') }}</p>
          @endforelse
        </div>
      </div>
    </div>
  </div>

@endsection


@section('vendor-script')
  {{-- vendor files --}}
  <script src="{{ asset(mix('vendors/js/tables/datatable/jquery.dataTables.min.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/tables/datatable/dataTables.bootstrap5.min.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/tables/datatable/dataTables.responsive.min.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/tables/datatable/responsive.bootstrap5.min.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/tables/datatable/datatables.checkboxes.min.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/tables/datatable/datatables.buttons.min.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/tables/datatable/buttons.html5.min.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/tables/datatable/dataTables.rowGroup.min.js')) }}"></script>

  <script src="{{ asset(mix('vendors/js/extensions/sweetalert2.all.min.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/extensions/polyfill.min.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/charts/apexcharts.min.js')) }}"></script>

@endsection
@section('page-script')
  {{-- Page js files --}}
  <script>
    $(document).ready(function () {
      "use strict"

      let subscriptionTab = 'all';

      function refreshSubscriptionStats() {
        $.ajax({
          url: "{{ route('admin.subscriptions.stats') }}",
          type: "GET",
          success: function (res) {
            if (!res || res.status !== 'success' || !res.stats) return;
            const st = res.stats;
            const mrr = Math.round(parseFloat(st.mrr) || 0);
            $('#kpi-mrr').text('$' + mrr.toLocaleString() + "{{ __('locale.subscription.mrr_per_month_suffix') }}");
            $('#kpi-mrr-trend').text('+' + parseFloat(st.mrr_change_pct || 0).toFixed(1) + '% · ' + (parseInt(st.mrr_new_30d, 10) || 0) + ' new (30d)');
            const active = parseInt(st.active_subscribers != null ? st.active_subscribers : st.active, 10) || 0;
            $('#kpi-active').text(active);
            const ar = parseInt(st.auto_renewing, 10) || 0;
            $('#kpi-autorenew').text(ar);
            const denom = Math.max(1, active);
            $('#kpi-autorenew-pct').text((Math.round((ar / denom) * 1000) / 10) + '% active');
            $('#kpi-ending').text(parseInt(st.ending_7d, 10) || 0);
            $('#kpi-pending').text(parseInt(st.pending_approval, 10) || 0);
            $('#kpi-mrr-currency').text('USD · ' + (parseInt(st.mrr_new_30d, 10) || 0) + ' new (30d)');
            $('.tab-count-all').text(parseInt(st.total, 10) || 0);
            $('.tab-count-active').text(parseInt(st.active, 10) || 0);
            $('.tab-count-pending').text(parseInt(st.tab_pending, 10) || 0);
            $('.tab-count-cancelled').text(parseInt(st.tab_cancelled, 10) || 0);
            $('.tab-count-expired').text(parseInt(st.tab_expired, 10) || 0);
            $('.tab-count-suspended').text(parseInt(st.tab_suspended, 10) || 0);
            if (st.summary && Array.isArray(st.summary)) {
              st.summary.forEach(function (row) {
                const el = document.querySelector('[data-summary-id="' + row.id + '"] .summary-val');
                if (el) el.textContent = row.value;
              });
            }
          }
        });
      }

      function showResponseMessage(data) {
        if (data.status === 'success') {
          toastr['success'](data.message, '{{ __('locale.labels.success') }}!!', {
            closeButton: true,
            positionClass: 'toast-top-right',
            progressBar: true,
            newestOnTop: true,
            rtl: isRtl
          });
          dataListView.draw(false);
          refreshSubscriptionStats();
        } else if (data.status === 'error') {
          toastr['error'](data.message, '{{ __('locale.labels.opps') }}!', {
            closeButton: true,
            positionClass: 'toast-top-right',
            progressBar: true,
            newestOnTop: true,
            rtl: isRtl
          });
          dataListView.draw(false);
        } else {
          toastr['warning']("{{ __('locale.exceptions.something_went_wrong') }}", '{{ __('locale.labels.warning') }}!', {
            closeButton: true,
            positionClass: 'toast-top-right',
            progressBar: true,
            newestOnTop: true,
            rtl: isRtl
          });
        }
        setTimeout(function () { feather.replace(); }, 100);
      }

      let Table = $("table");

      let dataListView = $('.datatables-basic').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
          url: "{{ route('admin.subscriptions.search') }}",
          dataType: "json",
          type: "POST",
          data: function (d) {
            d._token = "{{ csrf_token() }}";
            d.subscription_tab = subscriptionTab;
            d.plan_id = $('#filter-plan').val();
            d.recurring_filter = $('#filter-recurring').val();
            d.reconcile_filter = $('#filter-reconcile').val();
            d.subscription_sort = $('#filter-sort').val();
            d.date_from = $('#filter-date-from').val();
            d.date_to = $('#filter-date-to').val();
            d.gateway_id = $('#filter-gateway').val();
            d.status_filter = $('#filter-status').val();
          }
        },
        columns: [
          { data: 'responsive_id', orderable: false, searchable: false },
          { data: 'uid', name: 'subscriptions.uid' },
          { data: 'uid', name: 'subscriptions.uid' },
          { data: 'created_at', name: 'created_at' },
          { data: 'name', name: 'plan_name' },
          { data: 'billing', name: 'next_billing' },
          { data: 'credits', orderable: false, searchable: false },
          { data: 'status', name: 'status' },
          { data: 'gateway', name: 'gateway', orderable: true, searchable: false },
          { data: 'action', orderable: false, searchable: false }
        ],
        searchDelay: 1000,
        columnDefs: [
          {
            className: 'control',
            orderable: false,
            responsivePriority: 2,
            targets: 0
          },
          {
            targets: 1,
            orderable: false,
            responsivePriority: 3,
            render: function (data) {
              return '<div class="form-check"> <input class="form-check-input dt-checkboxes" type="checkbox" value="" id="' + data + '" /><label class="form-check-label" for="' + data + '"></label></div>';
            },
            checkboxes: {
              selectAllRender: '<div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="checkboxSelectAll" /><label class="form-check-label" for="checkboxSelectAll"></label></div>',
              selectRow: true
            }
          },
          { targets: 2, visible: false },
          { targets: 3, visible: false, searchable: false },
          {
            targets: -1,
            title: '',
            orderable: false,
            width: '48px',
            responsivePriority: 1,
            className: 'text-end dt-actions-cell',
            render: function (data, type, full) {
              let menuId = 'subMenu' + full['uid'];
              let html = '<div class="dropdown text-end">' +
                '<a class="text-muted" href="#" role="button" id="' + menuId + '" data-bs-toggle="dropdown" aria-expanded="false">' +
                feather.icons['more-vertical'].toSvg({ class: 'font-medium-4' }) + '</a>' +
                '<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="' + menuId + '">';
              html += '<li class="dropdown-header text-uppercase small">' + full['label_login_as'] + '</li>' +
                '<li class="px-2 pb-1 d-flex align-items-center gap-1">' +
                '<div class="avatar"><img src="' + full['avatar'] + '" width="32" height="32" class="rounded-circle" alt="" /></div>' +
                '<div class="d-flex flex-column"><span class="fw-bold">' + (full['customer_display'] || '') + '</span><small class="text-muted">' + full['email'] + '</small></div></li>';
              if (full['show_login_as']) {
                html += '<li><a class="dropdown-item" target="_blank" rel="noopener" href="' + full['login_as_url'] + '">' + feather.icons['user'].toSvg({ class: 'font-small-4 me-50' }) + full['label_login_as_customer'] + '</a></li>';
              }
              html += '<li><hr class="dropdown-divider"></li>';
              if (full['can_view_invoices']) {
                html += '<li><a class="dropdown-item" href="' + full['invoices_url'] + '">' + feather.icons['file-text'].toSvg({ class: 'font-small-4 me-50' }) + full['label_invoices_logs'] + '</a></li>';
              } else {
                html += '<li><span class="dropdown-item text-muted">' + full['label_invoices_logs'] + '</span></li>';
              }
              html += '<li><a class="dropdown-item" href="' + full['logs'] + '">' + feather.icons['list'].toSvg({ class: 'font-small-4 me-50' }) + full['logs_label'] + '</a></li>';
              if (full['show_start_subscription']) {
                html += '<li><a class="dropdown-item action-start-subscription" href="#" data-id="' + full['uid'] + '">' + feather.icons['play-circle'].toSvg({ class: 'font-small-4 me-50' }) + full['label_start_subscription'] + '</a></li>';
              }
              if (full['show_enable_recurring']) {
                html += '<li><a class="dropdown-item action-enable-recurring" href="#" data-id="' + full['uid'] + '">' + feather.icons['check-circle'].toSvg({ class: 'font-small-4 me-50' }) + full['label_enable_recurring'] + '</a></li>';
              }
              if (full['show_disable_recurring']) {
                html += '<li><a class="dropdown-item action-disable-recurring" href="#" data-id="' + full['uid'] + '">' + feather.icons['x-circle'].toSvg({ class: 'font-small-4 me-50' }) + full['label_disable_recurring'] + '</a></li>';
              }
              if (full['show_retry_renewal']) {
                html += '<li><a class="dropdown-item action-retry-renewal" href="#" data-id="' + full['uid'] + '">' + feather.icons['refresh-cw'].toSvg({ class: 'font-small-4 me-50' }) + (full['label_retry_renewal'] || 'Retry renewal') + '</a></li>';
              }
              if (full['show_reconcile']) {
                html += '<li><a class="dropdown-item action-reconcile" href="#" data-id="' + full['uid'] + '">' + feather.icons['repeat'].toSvg({ class: 'font-small-4 me-50' }) + full['label_reconcile'] + '</a></li>';
              }
              if (full['show_view_details']) {
                html += '<li><a class="dropdown-item" href="' + full['details_url'] + '">' + feather.icons['eye'].toSvg({ class: 'font-small-4 me-50' }) + full['label_view_details'] + '</a></li>';
              }
              if (full['show_terminate']) {
                html += '<li><a class="dropdown-item text-danger action-terminate" href="#" data-id="' + full['uid'] + '">' + feather.icons['slash'].toSvg({ class: 'font-small-4 me-50' }) + full['label_terminate'] + '</a></li>';
              }
              if (full['show_remove']) {
                html += '<li><a class="dropdown-item text-danger action-delete" href="#" data-id="' + full['uid'] + '">' + feather.icons['trash'].toSvg({ class: 'font-small-4 me-50' }) + full['label_remove'] + '</a></li>';
              }
              html += '</ul></div>';
              return html;
            }
          }
        ],
        dom: '<"d-flex justify-content-between align-items-center mx-0 row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6">>rt<"d-flex justify-content-between mx-2 row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
        language: {
          paginate: { previous: '&nbsp;', next: '&nbsp;' },
          sLengthMenu: "_MENU_",
          sZeroRecords: "{{ __('locale.datatables.no_results') }}",
          sProcessing: "{{ __('locale.datatables.processing') }}",
          sInfo: "{{ __('locale.datatables.showing_entries', ['start' => '_START_', 'end' => '_END_', 'total' => '_TOTAL_']) }}"
        },
        responsive: {
          details: {
            type: 'column',
            target: 0,
            display: $.fn.dataTable.Responsive.display.childRow,
            renderer: function (api, rowIdx, columns) {
              let rows = $.map(columns, function (col) {
                return col.title !== '' && col.hidden
                  ? '<li class="d-flex flex-wrap py-25 border-bottom">' +
                      '<span class="dtr-title fw-bold me-1">' + col.title + ':</span>' +
                      '<span class="dtr-data text-end flex-grow-1">' + col.data + '</span>' +
                    '</li>'
                  : '';
              }).join('');
              return rows ? $('<ul class="dtr-details list-unstyled mb-0">' + rows + '</ul>') : false;
            }
          }
        },
        aLengthMenu: [[10, 20, 50, 100], [10, 20, 50, 100]],
        select: { style: "multi" },
        order: [[3, "desc"]],
        displayLength: 10,
        drawCallback: function () {
          feather.replace();
          if (typeof bootstrap !== 'undefined') {
            if (bootstrap.Tooltip) {
              document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(function (el) {
                if (!bootstrap.Tooltip.getInstance(el)) {
                  new bootstrap.Tooltip(el, { trigger: 'hover' });
                }
              });
            }
            if (bootstrap.Dropdown) {
              document.querySelectorAll('[data-bs-toggle="dropdown"]').forEach(function (el) {
                if (!bootstrap.Dropdown.getInstance(el)) {
                  new bootstrap.Dropdown(el, {
                    popperConfig: function (defaultConfig) {
                      defaultConfig.strategy = 'fixed';
                      return defaultConfig;
                    }
                  });
                }
              });
            }
          }
        }
      });

      let subscriptionSearchTimer = null;
      $('#subscription-search-input').on('keyup', function () {
        const val = this.value;
        if (subscriptionSearchTimer) clearTimeout(subscriptionSearchTimer);
        subscriptionSearchTimer = setTimeout(function () {
          dataListView.search(val).draw();
        }, 800);
      });

      $('#subscription-status-tabs .subscription-tab').on('click', function () {
        $('#subscription-status-tabs .subscription-tab').removeClass('active border-bottom border-2 border-success text-body').addClass('text-muted');
        $(this).addClass('active border-bottom border-2 border-success text-body').removeClass('text-muted');
        subscriptionTab = $(this).data('tab');
        dataListView.ajax.reload();
      });

      $('#filter-plan, #filter-recurring, #filter-reconcile, #filter-sort, #filter-gateway, #filter-status').on('change', function () {
        dataListView.ajax.reload();
      });
      $('#filter-date-from, #filter-date-to').on('change', function () {
        dataListView.ajax.reload();
      });

      $('#btn-filter-reset').on('click', function () {
        $('#subscription-search-input').val('');
        $('#filter-plan, #filter-recurring, #filter-reconcile, #filter-gateway, #filter-status').val('');
        $('#filter-date-from, #filter-date-to').val('');
        $('#filter-sort').val('created');
        dataListView.search('').ajax.reload();
      });

      $('#btn-sub-export').on('click', function () {
        const rows = dataListView.rows({ search: 'applied' }).data().toArray();
        if (!rows.length) return;
        const esc = (s) => '"' + String(s || '').replace(/"/g, '""') + '"';
        let csv = ['Plan', 'Customer email', 'Billing', 'Credits', 'Status', 'Gateway', 'Created'].join(',') + '\n';
        rows.forEach(function (r) {
          const plan = $('<div>' + r.name + '</div>').text().trim().split(/\s+/)[0] || '';
          csv += [esc(plan), esc(r.email), esc($('<div>' + r.billing + '</div>').text()), esc($('<div>' + r.credits + '</div>').text()), esc($('<div>' + r.status + '</div>').text()), esc($('<div>' + r.gateway + '</div>').text()), esc(r.created_display)].join(',') + '\n';
        });
        const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'subscriptions.csv';
        a.click();
        URL.revokeObjectURL(url);
      });

      const planMixData = {!! json_encode($subscriptions_stats->plan_mix_donut ?? []) !!};
      if (typeof ApexCharts !== 'undefined' && planMixData.length) {
        const el = document.querySelector('#plan-mix-chart');
        if (el) {
          new ApexCharts(el, {
            chart: { type: 'donut', height: 220, toolbar: { show: false } },
            labels: planMixData.map(function (m) { return m.name; }),
            series: planMixData.map(function (m) { return m.count; }),
            colors: planMixData.map(function (m) { return m.color || '#28c76f'; }),
            legend: { show: false },
            dataLabels: { enabled: false },
            plotOptions: { pie: { donut: { size: '65%' } } }
          }).render();
        }
      }

      $(document).on('click', '.btn-approve-inline', function (e) {
        e.preventDefault();
        const url = $(this).data('url');
        if (!url) return;
        Swal.fire({
          title: "{{ __('locale.labels.are_you_sure') }}",
          text: "{{ __('locale.subscription.confirm_start_subscription') }}",
          icon: 'warning',
          showCancelButton: true,
          confirmButtonText: "{{ __('locale.labels.approve') }}",
          customClass: { confirmButton: 'btn btn-primary', cancelButton: 'btn btn-outline-danger ms-1' },
          buttonsStyling: false
        }).then(function (result) {
          if (!result.value) return;
          $.ajax({
            url: url,
            type: "POST",
            data: { _token: "{{ csrf_token() }}" },
            success: showResponseMessage,
            error: function (reject) {
              const msg = (reject.responseJSON && reject.responseJSON.message) ? reject.responseJSON.message : "{{ __('locale.exceptions.something_went_wrong') }}";
              toastr['error'](msg, '{{ __('locale.labels.opps') }}!', { closeButton: true, positionClass: 'toast-top-right' });
            }
          });
        });
      });

      const subPostBase = "{{ url(config('app.admin_path')) }}/subscriptions";

      function postSubscriptionUrl(url) {
        return $.ajax({
          url: url,
          type: "POST",
          data: { _token: "{{ csrf_token() }}" }
        });
      }

      Table.delegate(".action-disable-recurring", 'click', function (e) {
        e.preventDefault();
        e.stopPropagation();
        let id = $(this).data('id');
        Swal.fire({
          title: "{{ __('locale.labels.are_you_sure') }}",
          text: "{{ __('locale.subscription.confirm_disable_recurring') }}",
          icon: 'warning',
          showCancelButton: true,
          confirmButtonText: "{{ __('locale.labels.yes') }}",
          customClass: { confirmButton: 'btn btn-primary', cancelButton: 'btn btn-outline-danger ms-1' },
          buttonsStyling: false
        }).then(function (result) {
          if (!result.value) return;
          postSubscriptionUrl(subPostBase + '/' + id + '/disable-recurring').done(showResponseMessage).fail(function (reject) {
            const msg = (reject.responseJSON && reject.responseJSON.message) ? reject.responseJSON.message : "{{ __('locale.exceptions.something_went_wrong') }}";
            toastr['error'](msg, '{{ __('locale.labels.opps') }}!', { closeButton: true, positionClass: 'toast-top-right' });
          });
        });
      });

      Table.delegate(".action-enable-recurring", 'click', function (e) {
        e.preventDefault();
        e.stopPropagation();
        let id = $(this).data('id');
        Swal.fire({
          title: "{{ __('locale.labels.are_you_sure') }}",
          text: "{{ __('locale.subscription.confirm_enable_recurring') }}",
          icon: 'question',
          showCancelButton: true,
          confirmButtonText: "{{ __('locale.labels.yes') }}",
          customClass: { confirmButton: 'btn btn-primary', cancelButton: 'btn btn-outline-danger ms-1' },
          buttonsStyling: false
        }).then(function (result) {
          if (!result.value) return;
          postSubscriptionUrl(subPostBase + '/' + id + '/enable-recurring').done(showResponseMessage).fail(function (reject) {
            const msg = (reject.responseJSON && reject.responseJSON.message) ? reject.responseJSON.message : "{{ __('locale.exceptions.something_went_wrong') }}";
            toastr['error'](msg, '{{ __('locale.labels.opps') }}!', { closeButton: true, positionClass: 'toast-top-right' });
          });
        });
      });

      Table.delegate(".action-terminate", 'click', function (e) {
        e.preventDefault();
        e.stopPropagation();
        let id = $(this).data('id');
        Swal.fire({
          title: "{{ __('locale.labels.are_you_sure') }}",
          text: "{{ __('locale.subscription.confirm_terminate') }}",
          icon: 'warning',
          showCancelButton: true,
          confirmButtonText: "{{ __('locale.labels.yes') }}",
          customClass: { confirmButton: 'btn btn-danger', cancelButton: 'btn btn-outline-secondary ms-1' },
          buttonsStyling: false
        }).then(function (result) {
          if (!result.value) return;
          postSubscriptionUrl(subPostBase + '/' + id + '/cancel').done(showResponseMessage).fail(function (reject) {
            const msg = (reject.responseJSON && reject.responseJSON.message) ? reject.responseJSON.message : "{{ __('locale.exceptions.something_went_wrong') }}";
            toastr['error'](msg, '{{ __('locale.labels.opps') }}!', { closeButton: true, positionClass: 'toast-top-right' });
          });
        });
      });

      Table.delegate(".action-start-subscription", 'click', function (e) {
        e.preventDefault();
        e.stopPropagation();
        let id = $(this).data('id');
        Swal.fire({
          title: "{{ __('locale.labels.are_you_sure') }}",
          text: "{{ __('locale.subscription.confirm_start_subscription') }}",
          icon: 'warning',
          showCancelButton: true,
          confirmButtonText: "{{ __('locale.labels.approve') }}",
          customClass: { confirmButton: 'btn btn-primary', cancelButton: 'btn btn-outline-danger ms-1' },
          buttonsStyling: false
        }).then(function (result) {
          if (!result.value) return;
          postSubscriptionUrl(subPostBase + '/' + id + '/approve-pending').done(showResponseMessage).fail(function (reject) {
            const msg = (reject.responseJSON && reject.responseJSON.message) ? reject.responseJSON.message : "{{ __('locale.exceptions.something_went_wrong') }}";
            toastr['error'](msg, '{{ __('locale.labels.opps') }}!', { closeButton: true, positionClass: 'toast-top-right' });
          });
        });
      });

      Table.delegate(".action-reconcile", 'click', function (e) {
        e.preventDefault();
        e.stopPropagation();
        let id = $(this).data('id');
        postSubscriptionUrl(subPostBase + '/' + id + '/reconcile').done(showResponseMessage).fail(function (reject) {
          const msg = (reject.responseJSON && reject.responseJSON.message) ? reject.responseJSON.message : "{{ __('locale.exceptions.something_went_wrong') }}";
          toastr['error'](msg, '{{ __('locale.labels.opps') }}!', { closeButton: true, positionClass: 'toast-top-right' });
        });
      });

      Table.delegate(".action-retry-renewal", 'click', function (e) {
        e.preventDefault();
        e.stopPropagation();
        let id = $(this).data('id');
        postSubscriptionUrl(subPostBase + '/' + id + '/retry-renewal').done(showResponseMessage).fail(function (reject) {
          const msg = (reject.responseJSON && reject.responseJSON.message) ? reject.responseJSON.message : "{{ __('locale.exceptions.something_went_wrong') }}";
          toastr['error'](msg, '{{ __('locale.labels.opps') }}!', { closeButton: true, positionClass: 'toast-top-right' });
        });
      });

      // On Delete
      Table.delegate(".action-delete", "click", function (e) {
        e.preventDefault();
        e.stopPropagation();
        let id = $(this).data('id');
        Swal.fire({
          title: "{{ __('locale.labels.are_you_sure') }}",
          text: "{{ __('locale.subscription.confirm_remove_subscription') }}",
          icon: 'warning',
          showCancelButton: true,
          confirmButtonText: "{{ __('locale.labels.remove') }}",
          customClass: {
            confirmButton: 'btn btn-danger',
            cancelButton: 'btn btn-outline-secondary ms-1'
          },
          buttonsStyling: false,
        }).then(function (result) {
          if (result.value) {
            $.ajax({
              url: "{{ url(config('app.admin_path') . '/subscriptions')}}" + '/' + id,
              type: "POST",
              data: {
                _method: 'DELETE',
                _token: "{{csrf_token()}}"
              },
              success: function (data) {
                showResponseMessage(data);
              },
              error: function (reject) {
                if (reject.status === 422) {
                  let errors = reject.responseJSON.errors;
                  $.each(errors, function (key, value) {
                    toastr['warning'](value[0], "{{__('locale.labels.attention')}}", {
                      closeButton: true,
                      positionClass: 'toast-top-right',
                      progressBar: true,
                      newestOnTop: true,
                      rtl: isRtl
                    });
                  });
                } else {
                  toastr['warning'](reject.responseJSON.message, "{{__('locale.labels.attention')}}", {
                    positionClass: 'toast-top-right',
                    containerId: 'toast-top-right',
                    progressBar: true,
                    closeButton: true,
                    newestOnTop: true
                  });
                }
              }
            })
          }
        })
      });


      //Bulk cancel
      $(".bulk-cancel").on('click', function (e) {

        e.preventDefault();

        Swal.fire({
          title: "{{__('locale.labels.are_you_sure')}}",
          text: "{{__('locale.subscription.cancel_subscriptions')}}",
          icon: 'warning',
          showCancelButton: true,
          confirmButtonText: "{{__('locale.labels.cancel_selected')}}",
          customClass: {
            confirmButton: 'btn btn-primary',
            cancelButton: 'btn btn-outline-danger ms-1'
          },
          buttonsStyling: false,
        }).then(function (result) {
          if (result.value) {
            let subscription_ids = [];
            let rows_selected = dataListView.column(1).checkboxes.selected();

            $.each(rows_selected, function (index, rowId) {
              subscription_ids.push(rowId)
            });

            if (subscription_ids.length > 1) {

              $.ajax({
                url: "{{ route('admin.subscriptions.batch_action') }}",
                type: "POST",
                data: {
                  _token: "{{csrf_token()}}",
                  action: 'cancel',
                  ids: subscription_ids
                },
                success: function (data) {
                  showResponseMessage(data);
                },
                error: function (reject) {
                  if (reject.status === 422) {
                    let errors = reject.responseJSON.errors;
                    $.each(errors, function (key, value) {
                      toastr['warning'](value[0], "{{__('locale.labels.attention')}}", {
                        closeButton: true,
                        positionClass: 'toast-top-right',
                        progressBar: true,
                        newestOnTop: true,
                        rtl: isRtl
                      });
                    });
                  } else {
                    toastr['warning'](reject.responseJSON.message, "{{__('locale.labels.attention')}}", {
                      positionClass: 'toast-top-right',
                      containerId: 'toast-top-right',
                      progressBar: true,
                      closeButton: true,
                      newestOnTop: true
                    });
                  }
                }
              })
            } else {
              toastr['warning']("{{ __('locale.labels.at_least_one_data') }}", "{{ __('locale.labels.attention') }}", {
                closeButton: true,
                positionClass: 'toast-top-right',
                progressBar: true,
                newestOnTop: true,
                rtl: isRtl
              });
            }

          }
        })
      });

      //Bulk cancel
      $(".bulk-delete").on('click', function (e) {

        e.preventDefault();

        Swal.fire({
          title: "{{__('locale.labels.are_you_sure')}}",
          text: "{{__('locale.subscription.cancel_subscriptions')}}",
          icon: 'warning',
          showCancelButton: true,
          confirmButtonText: "{{__('locale.labels.cancel_selected')}}",
          customClass: {
            confirmButton: 'btn btn-primary',
            cancelButton: 'btn btn-outline-danger ms-1'
          },
          buttonsStyling: false,
        }).then(function (result) {
          if (result.value) {
            let subscription_ids = [];
            let rows_selected = dataListView.column(1).checkboxes.selected();

            $.each(rows_selected, function (index, rowId) {
              subscription_ids.push(rowId)
            });

            if (subscription_ids.length > 1) {

              $.ajax({
                url: "{{ route('admin.subscriptions.batch_action') }}",
                type: "POST",
                data: {
                  _token: "{{csrf_token()}}",
                  action: 'delete',
                  ids: subscription_ids
                },
                success: function (data) {
                  showResponseMessage(data);
                },
                error: function (reject) {
                  if (reject.status === 422) {
                    let errors = reject.responseJSON.errors;
                    $.each(errors, function (key, value) {
                      toastr['warning'](value[0], "{{__('locale.labels.attention')}}", {
                        closeButton: true,
                        positionClass: 'toast-top-right',
                        progressBar: true,
                        newestOnTop: true,
                        rtl: isRtl
                      });
                    });
                  } else {
                    toastr['warning'](reject.responseJSON.message, "{{__('locale.labels.attention')}}", {
                      positionClass: 'toast-top-right',
                      containerId: 'toast-top-right',
                      progressBar: true,
                      closeButton: true,
                      newestOnTop: true
                    });
                  }
                }
              })
            } else {
              toastr['warning']("{{ __('locale.labels.at_least_one_data') }}", "{{ __('locale.labels.attention') }}", {
                closeButton: true,
                positionClass: 'toast-top-right',
                progressBar: true,
                newestOnTop: true,
                rtl: isRtl
              });
            }

          }
        })
      });

    });

  </script>
@endsection