@php
$configData = Helper::appClasses();
@endphp

@extends('layouts/layoutMaster')

@section('title', 'Dashboard')

@section('vendor-style')
<link rel="stylesheet" href="{{asset('assets/vendor/libs/fullcalendar/fullcalendar.css')}}" />
<link rel="stylesheet" href="{{asset('assets/vendor/libs/apex-charts/apex-charts.css')}}" />
<link rel="stylesheet" href="{{asset('assets/vendor/libs/flatpickr/flatpickr.css')}}" />
<link rel="stylesheet" href="{{asset('assets/vendor/libs/select2/select2.css')}}" />
<link rel="stylesheet" href="{{asset('assets/vendor/libs/quill/editor.css')}}" />
<link rel="stylesheet" href="{{asset('assets/vendor/libs/formvalidation/dist/css/formValidation.min.css')}}" />

@endsection

@section('page-style')
<link rel="stylesheet" href="{{asset('assets/vendor/css/pages/app-calendar.css')}}" />
@endsection

@section('vendor-script')
<script src="{{asset('assets/vendor/libs/fullcalendar/fullcalendar.js')}}"></script>
<script src="{{asset('assets/vendor/libs/apex-charts/apexcharts.js')}}"></script>
<script src="{{asset('assets/vendor/libs/formvalidation/dist/js/FormValidation.min.js')}}"></script>
<script src="{{asset('assets/vendor/libs/formvalidation/dist/js/plugins/Bootstrap5.min.js')}}"></script>
<script src="{{asset('assets/vendor/libs/formvalidation/dist/js/plugins/AutoFocus.min.js')}}"></script>
<script src="{{asset('assets/vendor/libs/select2/select2.js')}}"></script>
<script src="{{asset('assets/vendor/libs/flatpickr/flatpickr.js')}}"></script>
<script src="{{asset('assets/vendor/libs/moment/moment.js')}}"></script>

@endsection

@section('page-script')
<script src="{{asset('assets/js/dashboards-ecommerce.js')}}"></script>
<script src="{{asset('assets/js/app-calendar-events.js')}}"></script>
<script src="{{asset('assets/js/app-calendar.js')}}"></script>
@endsection
 

@section('content')
<div class="row">
  <!-- Statistics Cards -->
  <div class="col-2 col-md-4 col-sm-4 mb-4">
    <div class="card h-80">
      <div class="card-body text-center">
        <h4>{{ __('Total Members') }}</h4>
        <h2 class="mb-0">{{$members}}</h2>
      </div>
    </div>
  </div>
  <div class="col-2 col-md-4  col-sm-4 mb-4">
    <div class="card h-80">
      <div class="card-body text-center">
        <h4>{{ __('Active Members') }}</h4>
        <h2 class="mb-0">{{$activeMembers}}</h2>
      </div>
    </div>
  </div>
  <div class="col-2 col-md-4  col-sm-4 mb-4">
    <div class="card h-80">
      <div class="card-body text-center">
        <h4>{{ __('Inactive Members') }}</h4>
        <h2 class="mb-0">{{$inactiveMembers}}</h2>
      </div>
    </div>
  </div>
  @foreach($membersCountBySubscription as $row)
  <div class="col-2 col-md-4  col-sm-4 mb-4">
    <div class="card h-80">
      <div class="card-body text-center">
        <h6>{{ $row->subscription }} Members</h6>
        <h2 class="mb-0">{{$row->count}}</h2>
      </div>
    </div>
  </div>
  @endforeach
  <div class="col-2 col-md-6  col-sm-4 mb-4">
    <div class="card h-80">
      <div class="card-body text-center">
         <h4> {{ __('Total Invoices') }}</h4> 
        
        <h2 class="mb-0">{{$totalInvoices}}</h2>
      </div>
    </div>
  </div>
  <div class="col-2 col-md-6  col-sm-4 mb-4">
    <div class="card h-80">
      <div class="card-body text-center">
        <h4>{{ __('Month Invoices') }}</h4>
        <h2 class="mb-0">{{$monthInvoices}}</h2>
      </div>
    </div>
  </div>
  <div class="col-2 col-md-4  col-sm-4 mb-4">
    <div class="card h-80">
      <div class="card-body text-center">
        <h4>{{ __('Total Payments') }}</h4>
        <h2 class="mb-0">{{$totalPayments}}</h2>
      </div>
    </div>
  </div>
  <div class="col-2 col-md-4  col-sm-4 mb-4">
    <div class="card h-80">
      <div class="card-body text-center">
        <h4>{{ __('Month Payments') }}</h4>
        <h2 class="mb-0">{{$monthPayments}}</h2>
      </div>
    </div>
  </div>
  <div class="col-2 col-md-4  col-sm-4 mb-4">
    <div class="card h-80">
      <div class="card-body text-center">
        <h4>{{ __('Due Payments') }}</h4>
        <h2 class="mb-0">{{$due}}</h2>
      </div>
    </div>
  </div>
  
  

  
  
</div>

 
 
@endsection