@extends('layouts.admin.master')

@section('title')Sample Page
 {{ $title }}
@endsection

@push('css')
<style>
    .card{      
        margin-bottom:1rem !important
    }
    /* .card .card-body{
        padding:20px !important;
    }
    */
    .graphWidth{
        width:40vw
    }
    @media (max-width: 300px) {
        .graphWidth{
            width:100vw
        }
    }
</style>
@endpush

@section('content')
 
  <div class="container-fluid">
    <div class="page-header">
      <div class="row">
        <div class="col-lg-6">
          <h3>Dashboard</h3>
          <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
            <li class="breadcrumb-item"><a href="javascript:void(0)">Dashboard</a></li>    
          </ol>
        </div>       
      </div>
    </div>   
       <!-- Card being  -->
      <div class="row">
        <div class="col-lg-6 col-12" style="padding:0.1em;">
            <div class="col-lg-12">
              <div class="d-flex justify-content-between">
                <button class="btn btn-icon btn-icon-end btn-xs btn-background-alternate p-0 text-small" type="button">
                  <i data-cs-icon="chevron-right" class="align-middle" data-cs-size="12"></i>
                </button>
              </div>
              <div class="row g-2">
                <div class="col-12 col-xl-4 sh-19" data-title="More Cards" data-intro="Category card with an icon!" data-step="3">
                  <div class="card h-100 hover-scale-up">
                    <a class="card-body text-center" href="#">
                    <i class="icofont icofont-architecture-alt" style="font-size:2rem" ></i>
                    <div class="text-extra-small fw-medium text-muted mt-2">Total Student</div>
                      <p class="heading mt-1 text-body">500</p>
                    </a>
                  </div>
                </div>
                <div class="col-12 col-xl-4 sh-19">
                  <div class="card h-100 hover-scale-up">
                    <a class="card-body text-center" href="#">
                    <i class="icofont icofont-files" style="font-size:2rem"></i>
                      <div class="text-extra-small fw-medium text-muted mt-2">Total Enquire</div>
                      <p class="heading mt-1 text-body">Total</p>
                    </a>
                  </div>
                </div>
                <div class="col-12 col-xl-4 sh-19">
                  <div class="card h-100 hover-scale-up">
                    <a class="card-body text-center" href="#">
                      <i class="icofont icofont-chart-histogram-alt" style="font-size:2rem"></i>
                      <div class="text-extra-small fw-medium text-muted mt-2">Total Admission</div>
                      <p class="heading mt-1 text-body">409</p>
                    </a>
                  </div>
                </div>   
                <div class="col-12 col-xl-4 sh-19" data-title="More Cards" data-intro="Category card with an icon!" data-step="3">
                  <div class="card h-100 hover-scale-up">
                    <a class="card-body text-center" href="#">
                    <i data-feather="book-open" style="font-size:2.3rem" ></i>
                    <div class="text-extra-small fw-medium text-muted mt-2">Course</div>
                      <p class="heading mt-1 text-body">500</p>
                    </a>
                  </div>
                </div>          
                <div class="col-12 col-xl-4 sh-19" data-title="More Cards" data-intro="Category card with an icon!" data-step="3">
                  <div class="card h-100 hover-scale-up">
                    <a class="card-body text-center" href="#">
                    <i data-feather="award" style="font-size:2.3rem" ></i>
                    <div class="text-extra-small fw-medium text-muted mt-2">Batch</div>
                      <p class="heading mt-1 text-body">500</p>
                    </a>
                  </div>
                </div>
                <div class="col-12 col-xl-4 sh-19" data-title="More Cards" data-intro="Category card with an icon!" data-step="3">
                  <div class="card h-100 hover-scale-up">
                    <a class="card-body text-center" href="#">
                    <i data-feather="users" style="font-size:2.3rem" ></i>
                    <div class="text-extra-small fw-medium text-muted mt-2">User</div>
                      <p class="heading mt-1 text-body">500</p>
                    </a>
                  </div>
                </div>
                <div class="col-12 col-sm-6 col-lg-6">
                    <div class="card sh-11 hover-scale-up cursor-pointer" style="padding:20px">
                        <div class="h-100 row g-0 card-body align-items-center py-3">
                        <div class="col-auto pe-3">
                            <div class="bg-gradient-2 sh-5 sw-5 rounded-xl d-flex justify-content-center align-items-center">
                            <i data-feather="users" style="font-size:2.3rem" ></i>
                            </div>
                        </div>
                        <div class="col">
                            <div class="row gx-2 d-flex align-content-center">
                            <div class="col-12 col-xl d-flex">
                                <div class="p mb-0 d-flex align-items-center lh-1-25">Total Amount</div>
                            </div>
                            <div class="col-12 col-xl-auto">
                                <div class="cta-2 text-primary">22</div>
                            </div>
                            </div>
                        </div>
                        </div>
                    </div>
                </div>
                  <div class="col-12 col-sm-6 col-lg-6">
                    <div class="card sh-11 hover-scale-up cursor-pointer" style="padding:20px">
                      <div class="h-100 row g-0 card-body align-items-center py-3">
                        <div class="col-auto pe-3">
                          <div class="bg-gradient-2 sh-5 sw-5 rounded-xl d-flex justify-content-center align-items-center">
                          <i data-feather="users" style="font-size:2.3rem" ></i>
                          </div>
                        </div>
                        <div class="col">
                          <div class="row gx-2 d-flex align-content-center">
                            <div class="col-12 col-xl d-flex">
                              <div class="p mb-0 d-flex align-items-center lh-1-25">Upcoming Dues</div>
                            </div>
                            <div class="col-12 col-xl-auto">
                              <div class="cta-2 text-primary">35</div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
              </div>
            </div>
        </div>
        <div class="col-lg-6 col-12">
            <div class="row g-2">
               <div class="col-12 col-xl-12 graphWidth"  style="max-width:600px;" style="padding:9px;">
                    <div class="card" >
                        <div class="card-header pb-0">
                            <h5>Income</h5>
                        </div>
                        <div class="card-body" style="padding:10px;">
                            <div id="line-chart"></div>
                        </div>
                    </div>
			    </div>
            </div>            
        </div>
      </div>
      
      <div class="row">
          <div class="col-12" style="padding:0.1em;">
          <div class="card" style="max-width:100vw">
                        <div class="card-header pb-0">
                            <h5>Admission vs Enquire</h5>
                        </div>
                        <div class="card-body" style="padding:10px;">
                            <div id="lines-chart"></div>
                        </div>
                    </div>
          </div>
      </div>

    
      

      <!-- card ends -->


    


  </div>

  
  @push('scripts')
    <script src="{{ asset('assets/js/chart/apex-chart/apex-chart.js') }}"></script>
    <script src="{{ asset('assets/js/chart/chartjs/chart.min.js') }}"></script>
    <script src="{{ asset('assets/functions/dashboard.js') }}"></script>


  @endpush

@endsection