@extends('layouts.app')

@section('title', 'Dashboard')

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

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

@section('content')

<div class="row">

  <!-- Total Leads -->
  <div class="col-xl-3 col-md-3 col-6 mb-4">
    <div class="card">
      <div class="card-body text-center">
        <div class="badge p-2 bg-label-danger mb-2 rounded"><i class="ti ti-file  ti-lg"></i></div>
        <h5 class="card-title mb-1 pt-2">Total Leads</h5>
        <!-- <small class="text-muted">Last Year</small> -->
        <h4 class="mb-0">{{$leads->count()}}</h4>
        <!-- <div class="pt-1">
          <span class="badge bg-label-secondary">-12.2%</span>
        </div> -->
      </div>
    </div>
  </div>

  <!-- Total Queries -->
  <div class="col-xl-3 col-md-3 col-6 mb-4">
    <div class="card">
      <div class="card-body text-center">
        <div class="badge p-2 bg-label-warning mb-2 rounded"><i class="ti ti-file-check ti-lg"></i></div>
        <h5 class="card-title mb-1 pt-2">Total Queries</h5>
        <!-- <small class="text-muted">Last Year</small> -->
        <h4 class="mb-0">{{$query->count()}}</h4>
        <!-- <div class="pt-1">
          <span class="badge bg-label-secondary">+25.2%</span>
        </div> -->
      </div>
    </div>
  </div>

  <!-- Total Tickets -->
  <div class="col-xl-3 col-md-3 col-6 mb-4">
    <div class="card">
      <div class="card-body text-center">
        <div class="badge p-2 bg-label-info mb-2 rounded"><i class="ti ti-file-stack ti-lg"></i></div>
        <h5 class="card-title mb-1 pt-2">Total Tickets</h5>
        <!-- <small class="text-muted">Last Year</small> -->
        <h4 class="mb-0">{{$tickets->count()}}</h4>
        <!-- <div class="pt-1">
          <span class="badge bg-label-secondary">+25.2%</span>
        </div> -->
      </div>
    </div>
  </div>

  <!-- Total Tickets -->
  <div class="col-xl-3 col-md-3 col-6 mb-4">
    <div class="card">
      <div class="card-body text-center">
        <div class="badge p-2 bg-label-success mb-2 rounded"><i class="ti ti-growth ti-lg"></i></div>
        <h5 class="card-title mb-1 pt-2">Growth</h5>
        <!-- <small class="text-muted">Last Year</small> -->
        <div class="pt-1">
          <span class="badge bg-label-secondary">{{$leads->count()}} Leads</span>
          <span class="badge bg-label-secondary">{{$query->count()}} Queries</span>
          <span class="badge bg-label-secondary">{{$tickets->count()}} Tickets</span>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection