@extends('layouts/layoutMaster')

@section('title', 'Analytics')

@section('vendor-style')
<link rel="stylesheet" href="{{asset('assets/vendor/libs/apex-charts/apex-charts.css')}}" />
<link rel="stylesheet" href="{{asset('assets/vendor/libs/swiper/swiper.css')}}" />
<link rel="stylesheet" href="{{asset('assets/vendor/libs/datatables-bs5/datatables.bootstrap5.css')}}" />
<link rel="stylesheet" href="{{asset('assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css')}}" />
<link rel="stylesheet" href="{{asset('assets/vendor/libs/datatables-checkboxes-jquery/datatables.checkboxes.css')}}" />
@endsection

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

@section('vendor-script')
<script src="{{asset('assets/vendor/libs/swiper/swiper.js')}}">
</script>
<script src="{{asset('assets/vendor/libs/apex-charts/apexcharts.js')}}"></script>
<script src="{{asset('assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js')}}"></script>
@endsection

@section('page-script')
<script src="{{asset('js/dashboards-analytics.js')}}"></script>
@endsection

@section('content')
@include('notifications')

<div class="row">
  <!-- Statistics -->
  <div class="col-xl-12 mb-4 col-lg-7 col-12">
    <div class="card h-100">
      <div class="card-header">
        <div class="d-flex justify-content-between mb-3">
          <h5 class="card-title mb-0">Total Statistics Today</h5>
          <small class="text-muted">Updated at {{ date('H:i:s') }}</small>
        </div>
      </div>
      <div class="card-body">
        <div class="row gy-3">
        <div class="col-md-2 col-64">
            <div class="d-flex align-items-center">
              <div class="badge rounded-pill bg-label-info me-3 p-2">{{isset($statistics["total_tickets_today"])?$statistics["total_tickets_today"]->count():0}}</div>
              <div class="card-info">
                <h5 class="mb-0">K{{ isset($statistics["total_tickets_today"]) ? number_format($statistics["total_tickets_today"]->sum('game_amount'),2) : 0 }}</h5>
                <small>Total Tickets Played</small>
              </div>
            </div>
          </div>
          <div class="col-md-2 col-6">
            <div class="d-flex align-items-center">
              <div class="badge rounded-pill bg-label-success me-3 p-2">{{isset($statistics["total_tickets_today"])?$statistics["total_tickets_today"]->where('status','WIN')->count():0}}</div>
              <div class="card-info">
                <h5 class="mb-0">K{{ isset($statistics["total_tickets_today"]) ? number_format($statistics["total_tickets_today"]->where('status','WIN')->sum('won_amount'),2) : 0 }}</h5>
                <small>Won Tickets</small>
              </div>
            </div>
          </div>
          <div class="col-md-2 col-6">
            <div class="d-flex align-items-center">
              <div class="badge rounded-pill bg-label-primary me-3 p-2"></div>
              <div class="card-info">
                <h5 class="mb-0">{{ isset($statistics["total_tickets_today"]) ? $statistics["total_tickets_today"]->where('status','SUBMITTED')->count() : 0 }}</h5>
                <small>Pending Tickets</small>
              </div>
            </div>
          </div>
          <div class="col-md-2 col-6">
            <div class="d-flex align-items-center">
              <div class="badge rounded-pill bg-label-danger me-3 p-2"></div>
              <div class="card-info">
                <h5 class="mb-0">ZMW{{ isset($statistics["total_recharges_today"]) ? number_format($statistics["total_recharges_today"]->sum('amount'),2) : 0 }}</h5>
                <small>Total Recharges</small>
              </div>
            </div>
          </div>
          <div class="col-md-2 col-6">
            <div class="d-flex align-items-center">
              <div class="badge rounded-pill bg-label-success me-3 p-2"><i class="ti ti-chart-pie-2 ti-sm"></i></div>
              <div class="card-info">
                <h5 class="mb-0">{{isset($statistics["total_new_games_today"])?$statistics["total_new_games_today"]->count():0}}</h5>
                <small>New Games</small>
              </div>
            </div>
          </div>
          <div class="col-md-2 col-6">
            <div class="d-flex align-items-center">
              <div class="badge rounded-pill bg-label-success me-3 p-2"><i class="ti ti-users  ti-sm"></i></div>
              <div class="card-info">
                <h5 class="mb-0">{{isset($statistics["total_new_customers_today"])?$statistics["total_new_customers_today"]->count():0}}</h5>
                <small>New Customers</small>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--/ Statistics -->
  <!-- Earning Reports -->
  <div class="col-lg-6 mb-4">
    <div class="card h-100">
      <div class="card-header pb-0 d-flex justify-content-between mb-lg-n4">
        <div class="card-title mb-0">
          <h5 class="mb-0">Weekly Overview</h5>
        </div>
        <div class="dropdown">
          <button class="btn p-0" type="button" id="earningReportsId" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="ti ti-dots-vertical ti-sm text-muted"></i>
          </button>
          <div class="dropdown-menu dropdown-menu-end" aria-labelledby="earningReportsId">
            <a class="dropdown-item" href="javascript:void(0);">View More</a>
            <a class="dropdown-item" href="javascript:void(0);">Delete</a>
          </div>
        </div>
        <!-- </div> -->
      </div>
      <div class="card-body">
        <div class="row">
          
          <div class="col-12 col-md-12">
            <div id="weeklyEarningReports"></div>
          </div>
        </div>
        <div class="border rounded p-3 mt-2">
          <div class="row gap-4 gap-sm-0">
            <div class="col-12 col-sm-4">
              <div class="d-flex gap-2 align-items-center">
                <div class="badge rounded bg-label-primary p-1">{{isset($statistics["total_weekly_tickets"])?$statistics["total_weekly_tickets"]->count():0}}</div>
                <h6 class="mb-0">Total Tickets</h6>
              </div>
              <h4 class="my-2 pt-1">K {{isset($statistics["total_weekly_tickets"])?$statistics["total_weekly_tickets"]->sum('loan_amount'):0}}</h4>
              <div class="progress w-75" style="height:4px">
                <div class="progress-bar" role="progressbar" style="width: {{$statistics['weeklyTotalRate']}}%" aria-valuenow="{{$statistics['weeklyTotalRate']}}" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
            </div>
            <div class="col-12 col-sm-4">
              <div class="d-flex gap-2 align-items-center">
                <div class="badge rounded bg-label-info p-1">{{isset($statistics["total_weekly_tickets"])?$statistics["total_weekly_tickets"]->where('status','WIN')->count():0}}</div>
                <h6 class="mb-0">Won Tickets</h6>
              </div>
              <h4 class="my-2 pt-1">K {{isset($statistics["total_weekly_tickets"])?$statistics["total_weekly_tickets"]->where('status','WIN')->sum('game_amount'):0}}</h4>
              <div class="progress w-75" style="height:4px">


                <div class="progress-bar bg-info" role="progressbar" style="width: {{$statistics['weekly_success_rate']}}%" aria-valuenow="{{$statistics['weekly_success_rate']}}" aria-valuemin="0" aria-valuemax="100"></div>

              </div>
            </div>
            <div class="col-12 col-sm-4">
              <div class="d-flex gap-2 align-items-center">
                <div class="badge rounded bg-label-danger p-1">{{isset($statistics["total_weekly_tickets"])?$statistics["total_weekly_tickets"]->where('status','!=','WIN')->count():0}}</div>
                <h6 class="mb-0">Others</h6>
              </div>
              <h4 class="my-2 pt-1">K {{isset($statistics["total_weekly_tickets"])?$statistics["total_weekly_tickets"]->where('status','!=','WIN')->sum('game_amount'):0}}</h4>
              <div class="progress w-75" style="height:4px">
                <div class="progress-bar bg-danger" role="progressbar" style="width: {{$statistics['weekly_others_rate']}}%" aria-valuenow="{{$statistics['weekly_others_rate']}}" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--/ Earning Reports -->

  <!-- Support Tracker -->
  <div class="col-md-6 mb-4">
    <div class="card">
      <div class="card-header d-flex justify-content-between pb-0">
        <div class="card-title mb-0">
          <h5 class="mb-0">Customer Tracker</h5>
        </div>
        <div class="dropdown">
          <button class="btn p-0" type="button" id="supportTrackerMenu" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="ti ti-dots-vertical ti-sm text-muted"></i>
          </button>
          <div class="dropdown-menu dropdown-menu-end" aria-labelledby="supportTrackerMenu">
            <a class="dropdown-item" href="javascript:void(0);">View More</a>
            <a class="dropdown-item" href="javascript:void(0);">Delete</a>
          </div>
        </div>
      </div>

      <div class="card-body">

        <div class="row">

          <div class="col-12 col-sm-4 col-md-12 col-lg-4">
            <div class="mt-lg-4 mt-lg-2 mb-lg-4 mb-2 pt-1">
              <h3 class="mb-0">{{isset($statistics["total_customers"])?$statistics["total_customers"]:0}}</h3>
              <p class="mb-0">Total Customers</p>
            </div>
            <ul class="p-0 m-0">
            <small class="text-muted">Last 7 Days</small>

              <li class="d-flex gap-3 align-items-center mb-lg-3 pt-2 pb-1">
                <div class="badge rounded bg-label-primary p-1"><i class="ti ti-ticket ti-sm"></i></div>
                <div>
                  <h6 class="mb-0 text-nowrap">New Customers</h6>
                  <small class="text-muted">{{isset($statistics["total_weekly_customers"])?$statistics["total_weekly_customers"]->count():0}}</small>
                </div>
              </li>
              <li class="d-flex gap-3 align-items-center mb-lg-3 pb-1">
                <div class="badge rounded bg-label-info p-1"><i class="ti ti-circle-check ti-sm"></i></div>
                <div>
                  <h6 class="mb-0 text-nowrap">Pending Activation</h6>
                  <small class="text-muted">{{isset($statistics["total_pending_activation_customers"])?$statistics["total_pending_activation_customers"]:0}}</small>
                </div>
              </li>
              <li class="d-flex gap-3 align-items-center pb-1">
                <div class="badge rounded bg-label-warning p-1"><i class="ti ti-clock ti-sm"></i></div>
                <div>
                  <h6 class="mb-0 text-nowrap">Suspended Customers</h6>
                  <small class="text-muted">{{isset($statistics["total_suspended_customers"])?$statistics["total_suspended_customers"]:0}}</small>
                </div>
              </li>
            </ul>
          </div>
          <div class="col-12 col-sm-8 col-md-12 col-lg-8">
          <input type="hidden" id="percentageInput" value="{{isset($statistics['new_customer_percetage'])?$statistics['new_customer_percetage']:0}}">

            <div id="supportTracker"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--/ Support Tracker -->
</div>

<script>
    const seriesData = {!! json_encode($statistics["seriesData"]) !!};
    const daysOfWeek = {!! json_encode($statistics["daysOfWeek"]) !!};
</script>


@endsection