<%- include('includes/header',  {username: admin[0].name,email: admin[0].email } ) %>

  <div class="body-wrapper">
    <div class="container-fluid">
      <div class="card bg-info-subtle shadow-none position-relative overflow-hidden mb-4">
        <div class="card-body px-4 py-3">
          <div class="row align-items-center">
            <div class="col-md-8 col-sm-7">
              <h4 class="fw-semibold mb-1">Subscription History</h4>

            </div>


          </div>

        </div>
      </div>


<div class="d-flex align-items-center justify-content-between mt-4 mb-4">

    <!-- Total Subscriptions -->
    <a class="card shadow-sm rounded-3 p-3 flex-fill me-3 text-decoration-none text-dark">
        <div class="d-flex align-items-center justify-content-between">
            <div class="bg-info-subtle p-3 rounded me-3">
                <i class="fas fa-layer-group fa-lg text-info"></i>
            </div>
            <div class="flex-grow-1">
                <div class="fw-bold"><%= totalSubscriptions %></div>
                <div class="small text-muted">Total Subscriptions</div>
            </div>
        </div>
    </a>

        <!-- Top Plan -->
    <a class="card shadow-sm rounded-3 p-3 flex-fill me-3 text-decoration-none text-dark">
        <div class="d-flex align-items-center justify-content-between">
            <div class="bg-primary-subtle p-3 rounded me-3">
<i class="fa-solid fa-diamond text-primary"></i>            </div>
            <div class="flex-grow-1">
                <div class="fw-bold">
                    <%= topPlans && topPlans.length ? topPlans[0].planName : "N/A" %>
                </div>
                <div class="small text-muted">Top Plan</div>
            </div>
        </div>
    </a>
    <!-- Active Subscriptions -->
    <a  class="card shadow-sm rounded-3 p-3 flex-fill me-3 text-decoration-none text-dark">
        <div class="d-flex align-items-center justify-content-between">
            <div class="bg-success-subtle p-3 rounded me-3">
           <i class="fa-solid fa-users text-success"></i>
            </div>
            <div class="flex-grow-1">
                <div class="fw-bold"><%= activeSubscriptions %></div>
                <div class="small text-muted">Active Subscriptions</div>
            </div>
        </div>
    </a>

    <!-- Monthly + Yearly Subscriptions (MERGED) -->
    <a  class="card shadow-sm rounded-3 p-3 flex-fill  text-decoration-none text-dark">
        <div class="d-flex align-items-center justify-content-between">
            <div class="bg-warning-subtle p-3 rounded me-3">
                <i class="fas fa-calendar-alt fa-lg text-warning"></i>
            </div>
            <div class="flex-grow-1">
                <div class="fw-bold">
                    <%= monthlySubscriptions %> / <%= yearlySubscriptions %>
                </div>
                <div class="small text-muted">Monthly / Yearly Plans</div>
            </div>
        </div>
    </a>



</div>

      <div class="datatables">


        <div class="card">
          <div class="card-body">
            <div class="table-responsive">
             <table id="zero_config" class="table table-bordered table-striped">
  <thead>
    <tr>
<th>Plan</th>
<th>User</th>
<th>Billing</th>
<th>Expiry Date</th>
<th>Status</th>
<th>Purchased At</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

            </div>
          </div>
        </div>


      </div>



    </div>
  </div>
  </div>

  <%- include('includes/allscripts') %>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>

<script src="/js/view/subscriptionhistory.js"></script>