@extends('coaching.layout.master')

@section('title')
	Admisure Coaching | Dashboard
@endsection

@section('content')

<link rel="stylesheet" href="{{ asset('admin/plugins/morris/morris.css') }}">
 <div class="app-content my-3 my-md-5">
          <div class="side-app">
            <!-- MAIN BODY CONTENT -->
             <div class="top-header mb-5">
             <h1 class="m-0">Dashboard</h1>
             <div class="filter-group">
                <select class="form-control input-sm day_wise" name="day_wise">
                  <option value="1" selected="">Today</option>
                  <option value="2" >Yesterday</option>
                  <option value="3" >Last Week</option>
                  <option value="4" >Last Month</option>
                </select>
              </div>
           </div>
            <div class="row">
              <div class="col-xl-3 col-lg-3 col-md-6">
                <div class="card">
                  <div class="card-body small-card">
                    <h5 class="font-medium">Today's Sales</h5>
                    <div class="counter list-group">
                      <p class="list-item test_series_sale">
                        Test Series: <span> {{$test_series_sale}} (units)</span>
                      </p>
                      <p class="list-item pass_sale">
                        Pass: <span> {{$pass_sale}} (units)</span>
                      </p>
                      <p class="list-item total_sale">
                        Total Sales: <span> {{$test_series_sale + $pass_sale}} (units)</span>
                      </p>
                    </div>
                    <svg id="small-card-bg-icon" class="red" xmlns="http://www.w3.org/2000/svg" width="70.91" height="100.621" viewBox="0 0 70.91 100.621">
                      <g>
                        <g transform="translate(0 0)">
                          <g transform="translate(0 0.026)">
                            <path d="M250.3,155.693c-1.364-1.27-2.739-2.541-4.1-3.812q-4.937-4.57-9.863-9.152-5.952-5.515-11.892-11.03-5.157-4.79-10.314-9.568c-1.668-1.552-3.314-3.137-5.016-4.655l-.068-.068c.552,1.327,1.1,2.653,1.646,3.98v-3.216l-5.636,5.622h6.572c2.254,0,4.531.079,6.786-.023a29.7,29.7,0,0,0,14.834-4.643,30.109,30.109,0,0,0,10.212-11.03,29.331,29.331,0,0,0-1.206-29.75A29.678,29.678,0,0,0,217.216,64.7H202.2a5.875,5.875,0,0,0-3.991,1.642,5.636,5.636,0,0,0,0,7.96,5.853,5.853,0,0,0,3.991,1.642H216.45a31.341,31.341,0,0,1,3.979.2l-1.5-.2a24.322,24.322,0,0,1,6.154,1.664c-.451-.191-.9-.382-1.341-.562a24.834,24.834,0,0,1,5.388,3.148c-.383-.292-.755-.585-1.138-.877a24.82,24.82,0,0,1,4.283,4.273c-.293-.382-.586-.753-.879-1.136a24.764,24.764,0,0,1,3.156,5.374c-.192-.45-.383-.9-.564-1.338a24.164,24.164,0,0,1,1.668,6.139c-.067-.495-.135-1-.2-1.5a24.06,24.06,0,0,1,0,6.24c.068-.495.136-1,.2-1.5a24.166,24.166,0,0,1-1.668,6.139c.192-.45.383-.9.564-1.338a24.759,24.759,0,0,1-3.156,5.374c.293-.382.586-.753.879-1.136a24.815,24.815,0,0,1-4.283,4.273c.383-.292.755-.585,1.138-.877a24.842,24.842,0,0,1-5.388,3.148c.451-.191.9-.382,1.341-.562a24.322,24.322,0,0,1-6.154,1.664l1.5-.2a47.1,47.1,0,0,1-6.042.2h-9.333a5.712,5.712,0,0,0-5.636,5.622c0,1.046-.011,2.091,0,3.137a5.921,5.921,0,0,0,1.872,4.261c.721.664,1.443,1.338,2.164,2q4.717,4.368,9.434,8.747,6.256,5.8,12.512,11.615,5.63,5.228,11.272,10.456c1.859,1.732,3.708,3.474,5.579,5.183.023.022.057.045.079.067a5.928,5.928,0,0,0,3.99,1.642,5.752,5.752,0,0,0,3.99-1.642,5.654,5.654,0,0,0,1.646-3.98,5.716,5.716,0,0,0-1.657-3.98Z" transform="translate(-196.562 -64.7)" fill=""></path>
                          </g>
                          <g transform="translate(0.011 0)">
                            <path d="M202.288,75.624h52.3c2.417,0,4.835.033,7.241,0h.1A5.881,5.881,0,0,0,265.914,74a5.56,5.56,0,0,0,0-7.889,5.861,5.861,0,0,0-3.981-1.627h-52.3c-2.418,0-4.835-.034-7.241,0h-.1a5.88,5.88,0,0,0-3.98,1.627,5.561,5.561,0,0,0,0,7.889,5.881,5.881,0,0,0,3.98,1.627Z" transform="translate(-196.662 -64.467)" fill=""></path>
                          </g>
                          <g transform="translate(0.011 23.964)">
                            <path d="M202.288,288.524h52.3c2.417,0,4.835.034,7.241,0h.1a5.88,5.88,0,0,0,3.981-1.627,5.561,5.561,0,0,0,0-7.889,5.859,5.859,0,0,0-3.981-1.627h-52.3c-2.418,0-4.835-.034-7.241,0h-.1a5.878,5.878,0,0,0-3.98,1.627,5.561,5.561,0,0,0,0,7.889,5.934,5.934,0,0,0,3.98,1.627Z" transform="translate(-196.662 -277.367)" fill=""></path>
                          </g>
                        </g>
                      </g>
                    </svg>
                  </div>
                </div>
              </div>
              <div class="col-xl-3 col-lg-3 col-md-6">
                <div class="card">
                  <div class="card-body small-card">
                    <h5 class="font-medium">Test Series</h5>
                    <div class="counter list-group">
                      <p class="list-item total_test_sers">
                      Test Series Package: <span> {{$total_test_sers}}</span>
                      </p>
                      <p class="list-item total_test">
                        T.No.Test: <span> {{$total_test}}</span>
                      </p>
                      <p class="list-item total_test_enroll">
                        T.Enrolled Students: <span> {{$total_test_enroll}}</span>
                      </p>
                    </div>
                    <svg id="small-card-bg-icon" class="blue" xmlns="http://www.w3.org/2000/svg" width="90.074" height="47.541" viewBox="0 0 90.074 47.541">
                      <path d="M87.872,113.18l2.2-.312V96H65.444v8.1H60.166V96H0v16.868l2.2.312c3.821.542,6.594,3.313,6.594,6.591S6.023,125.82,2.2,126.362l-2.2.312v16.868H60.166v-8.1h5.278v8.1h24.63V126.674l-2.2-.312c-3.821-.542-6.594-3.313-6.594-6.591S84.051,113.722,87.872,113.18ZM65.444,130.988H60.166v-8.914h5.278Zm0-13.52H60.166v-8.914h5.278Z" transform="translate(0 -96)" fill=""></path>
                    </svg>
                  </div>
                </div>
              </div>
              <div class="col-xl-3 col-lg-3 col-md-6">
                <div class="card">
                  <div class="card-body small-card">
                    <h5 class="font-medium">Practice</h5>
                    <div class="counter list-group">
                      <p class="list-item total_practice_set">
                      T.Practice Sets: <span> {{$total_practice_set}}</span>
                      </p>
                      <p class="list-item total_chapter">
                        Total Chapter: <span> {{$total_chapter}}</span>
                      </p>
                      <p class="list-item total_practice_enroll">
                        T.Enrolled Students: <span> {{$total_practice_enroll}}</span>
                      </p>
                    </div>
                    <svg id="small-card-bg-icon" class="red" xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28">
                      <g transform="translate(-474 -1481.625)">
                        <rect width="28" height="28" transform="translate(474 1481.625)" fill="rgba(0,0,0,0)"></rect>
                        <path d="M19.684,25H6.935a2.291,2.291,0,0,1-2.3-2.272L4.643,6.818a2.291,2.291,0,0,1,2.3-2.272h7.145a2.333,2.333,0,0,1,1.644.67L21.328,10.7a2.255,2.255,0,0,1,.672,1.6v10.42A2.3,2.3,0,0,1,19.684,25ZM13.894,6.251h0v5.114A1.148,1.148,0,0,0,15.052,12.5h5.211ZM1.158,18.182A1.148,1.148,0,0,1,0,17.045V2.273A2.3,2.3,0,0,1,2.316,0H15.052A1.149,1.149,0,0,1,16.21,1.137a1.148,1.148,0,0,1-1.158,1.136H3.473A1.148,1.148,0,0,0,2.316,3.41V17.045A1.148,1.148,0,0,1,1.158,18.182Z" transform="translate(476 1483.625)" fill=""></path>
                      </g>
                    </svg>
                  </div>
                </div>
              </div>
              <div class="col-xl-3 col-lg-3 col-md-6">
                <div class="card">
                  <div class="card-body small-card">
                    <h5 class="font-medium">Quizzes</h5>
                    <div class="counter list-group">
                      <p class="list-item total_quiz">
                      Total No. Of Quiz: <span> {{$total_quiz}}</span>
                      </p>
                      <p class="list-item total_quiz_question">
                        Total No. Of Question: <span> {{$total_quiz_question}}</span>
                      </p>
                      <p class="list-item total_quiz_enroll">
                      T.Enrolled Students: <span> {{$total_quiz_enroll}}</span>
                      </p>
                    </div>
                    <svg id="small-card-bg-icon" class="blue" xmlns="http://www.w3.org/2000/svg" width="90.074" height="47.541" viewBox="0 0 90.074 47.541">
                      <path d="M87.872,113.18l2.2-.312V96H65.444v8.1H60.166V96H0v16.868l2.2.312c3.821.542,6.594,3.313,6.594,6.591S6.023,125.82,2.2,126.362l-2.2.312v16.868H60.166v-8.1h5.278v8.1h24.63V126.674l-2.2-.312c-3.821-.542-6.594-3.313-6.594-6.591S84.051,113.722,87.872,113.18ZM65.444,130.988H60.166v-8.914h5.278Zm0-13.52H60.166v-8.914h5.278Z" transform="translate(0 -96)" fill=""></path>
                    </svg>
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-lg-8 col-md-12">
                <div class="card">
                  <div class="card-header border-bottom">
                    <h2>Engagement</h2>
                    <div class="filter-group">
                      <div class="dropdown custom-date">
                        <button class="btn btn-custom-toggle dropdown-toggle btn-block" type="button" id="dropdownMenuButton"
                          data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                          Custom Date
                        </button>
                        <div class="dropdown-menu custom-dropdown-menu right-move" aria-labelledby="dropdownMenuButton"
                          x-placement="bottom-start"
                          style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 44px, 0px);">
                          <div class="custom-date-content">
                            <h6>Filter by engage date</h6>
                            <ul>
                              <li data-id="1" style="cursor: pointer;" class="date_selector">Today</li>
                              <li data-id="2" style="cursor: pointer;" class="date_selector seven_day">Last 7 Days</li>
                              <li data-id="3" style="cursor: pointer;" class="date_selector">This Month</li>
                              <li data-id="4" style="cursor: pointer;" class="date_selector">This Year: {{date('Y')}}</li>
                              <li data-id="5" style="cursor: pointer;" class="date_selector">Last Year: {{date('Y')-1}}</li>
                              <li data-id="6" style="cursor: pointer;" class="date_selector">All Time</li>
                            </ul>
                            <h6>Filter by engage date range</h6>
                            <div class="date-group">
                              <div class="input-group">
                                <div class="input-group-prepend">
                                  <div class="input-group-text">
                                    <i class="fa fa-calendar tx-16 lh-0 op-6"></i>
                                  </div>
                                </div>
                                <input class="form-control input-sm all_from_date" placeholder="MM/DD/YYYY"
                                  type="text" id="dp1588836251070">
                              </div>
                              <span>To</span>
                              <div class="input-group">
                                <div class="input-group-prepend">
                                  <div class="input-group-text">
                                    <i class="fa fa-calendar tx-16 lh-0 op-6"></i>
                                  </div>
                                </div>
                                <input class="form-control input-sm all_to_date" placeholder="MM/DD/YYYY"
                                  type="text" id="dp1588836251072">
                              </div>
                            </div>
                            <div class="btn-content">
                              <button class="btn btn-outline-primary btn-pill add-btn-sm btn-streach-md cancel_date">Cancel</button>
                              <button class="btn btn-primary add-btn-sm btn-streach-md apply">Apply</button>
                            </div>
                          </div>

                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="card-body">
                    <h4 class="text-verticle eng-stdnt">Engaged Students</h4>
                    <div id="echart8" class="chartsh"></div>
                    <h4 class="text-center chart-footer">Last 7 Day</h4>
                  </div>
                </div>
              </div>
              <div class="col-lg-4 col-md-12">
                <div class="card">
                  <div class="card-header border-bottom">
                    <h2>Payout</h2>
                  </div>
                  <div class="card-body">
                    <h4 class="text-verticle eng-stdnt">Total Rvenue</h4>
                    <canvas id="canvas_payout"></canvas>
                    <h4 class="text-center payout-chart-footer">Last Six Month</h4>
                  </div>
                </div>
              </div>
              <div class="col-lg-12" id="data_div"></div>  
              <div class="col-lg-12" id="review_data_div"></div>  
              <div class="col-lg-12">
                <div class="card">
                  <div class="card-header center-header pt-5">
                    <h2>Result</h2>
                  </div>
                  <div class="card-body pt-0">
                    <div class="table-responsive">
                      <table
                        id="coaching-daschboard-result"
                        class="table card-table dataTable table-hover table-vcenter text-nowrap"
                      >
                        <thead>
                          <tr>
                            <th width="25">Test Name</th>
                            <th>Test Type</th>
                            <th>Subject</th>
                            <th>T.Question</th>
                            <th>Max Marks</th>
                            <th>Time</th>
                            <th>Faculty</th>
                            <th>Attempted By</th>
                            <th>Action</th>
                          </tr>
                        </thead>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!--// MAIN BODY CONTENT -->
          </div>
        </div>
@endsection
@section('scripts')
<!--Morris.js Charts Plugin -->
<script type="text/javascript">
  /*var MONTHS = [];
  var labels = [];
  var data_amount = [];
  var color = Chart.helpers.color;
  var barChartData = {
    labels: labels,
    datasets: [{
      label: '',
      backgroundColor: '#000080',
      borderColor: '#000080',
      borderWidth: 1,
      data: data_amount
    }]
  };

  window.onload = function() {
  var ctx = document.getElementById('canvas_payout').getContext('2d');
    window.myBar = new Chart(ctx, {
      type: 'bar',
      data: barChartData,
      options: {
        responsive: true,
        legend: {
          position: 'top',
        },
        title: {
          display: true,
          text: ''
        }
      }
    });
  };*/

</script>
<script src="{{asset('admin/plugins/morris/raphael-min.js')}}"></script>
<script src="{{asset('admin/plugins/morris/morris.js')}}"></script>
<script src="{{asset('admin/js/morris.js')}}"></script>
<!-- ECharts Plugin -->
<script src="{{asset('admin/plugins/bar-chart/chart.js')}}"></script>
<script src="{{asset('admin/plugins/echart/echarts.js')}}"></script>
<script src="{{asset('js/coaching/dashboard_chart.js')}}"></script>
<script type="text/javascript" src="{{asset('js/coaching/coaching_dashboard.js?v='.time())}}"></script>
<script type="text/javascript">
  $(function(){
    var data_type=1;
    var review_data_type=1;
    show_data(data_type);
    show_review_data(review_data_type);
    $('body').on('change', '#data_type', function(){
      var data_type=$('#data_type').val();
      show_data(data_type);
    })
    $('body').on('change', '#review_data_type', function(){
      var review_data_type=$('#review_data_type').val();
      show_review_data(review_data_type);
    })

    function show_data(data_type){
        var link  = "{{ url('/coaching-master/get-dashboard-data') }}";
        $.ajax({
          url : link,
          type : "POST",
          data : {
              "_token" : "{{ csrf_token() }}",
              "data_type" : data_type
          },
          success: function(data) {
            //console.log('package_data',data);
            $("#data_div").html(data);
          }
        });
    }

    function show_review_data(review_data_type){
        var link  = "{{ url('/coaching-master/get-dashboard-review-data') }}";
        $.ajax({
          url : link,
          type : "POST",
          data : {
              "_token" : "{{ csrf_token() }}",
              "data_type" : review_data_type
          },
          success: function(data) {
            //console.log('package_data',data);
            $("#review_data_div").html(data);
          }
        });
    }

  });
  </script>
@endsection