@extends('layouts.master')
@section('content')
<!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script> -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

<div class="main-panel" id="main-panel">
   <!-- Navbar -->
   <nav class="navbar navbar-expand-lg navbar-transparent  navbar-absolute">
      <div class="container-fluid">
         <div class="navbar-wrapper">
            <div class="navbar-toggle">
               <button type="button" class="navbar-toggler">
               <i class="fas fa-bars"></i>
               </button>
            </div>
         </div>
      </div>
   </nav>
   <!-- End Navbar -->
   <!-- <div class="chartdropdown">
      <select>
         @if(!empty($data['years']) && sizeof($data['years'])>0)
            @foreach($data['years'] as $years)
               <option value="{{$years}}">{{$years}}</option>
            @endforeach
         @endif
      </select>
   </div> -->
   <div class="row">
     <input type="text" name="daterange" id="daterangepicker" value="{{ $data['datepickerdate'] }}" class="form-control col-md-3 offset-7" />
     <button type="button" class="btn col-md-1" style="margin-left: 5px;background: #3e4150;color: white;" onclick="getusers();">Submit</button>
   </div>
  <div id="updateondatechange">
   <div class="chart">
      <canvas id="myChart"></canvas>
   </div>
    <div class="totalphp">
        <span class="phptext">Total: PHP 
          @if(isset($data['clients']->commission))
            {{ $data['clients']->commission }}
          @endif
        </span>
    </div>
     <div class="content">
             <div class="col-md-12">
                 <div class="card">
                     <div class="container" style="margin-top: 20px;">
                     <div class="card-body clienttable">
                         <div class="table-responsive">
                             <table class="table" id="datatable">
                                 <thead>
                                 <th>
                                     <i class="fas fa-user"></i>Client’s Name
                                 </th>
                                 <th>
                                     <i class="fas fa-list-ul"></i> Total # of orders made
                                 </th>
                                 <th>
                                     <i class="fas fa-money-check"></i> Total Commission generated so far
                                 </th>
                                 </thead>
                                 <tbody>
                                 @if(!empty($data['clients']->content) && sizeof($data['clients']->content)>0)
                                     @foreach($data['clients']->content as $data1)
                                         <tr>
                                             <td>
                                                 {{$data1->name}}
                                             </td>
                                             <td>
                                                 {{$data1->total_orders}}
                                             </td>
                                             <td>
                                                 {{$data1->revenue_generated}}
                                             </td>
                                         </tr>
                                     @endforeach
                                 @else
                                     <tr>
                                         <td colspan="3">
                                             {{ 'No Record Found' }}
                                         </td>
                                     </tr>
                                 @endif
                                 </tbody>
                             </table>
                         </div>
                     </div>
                 </div>
             </div>
         </div>

     </div>
  </div>
   
</div>
<script src="{{ asset('js/plugins/perfect-scrollbar.jquery.min.js') }}"></script>
<!--  Google Maps Plugin    -->
<!-- <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script> -->
<script src="{{ asset('js/now-ui-dashboard.js?v=1.5.0') }}" type="text/javascript"></script>
<script>
   // var clients = {!! json_encode($data['clientnames']) !!};
   // console.log(clients);
   $(document).ready(function() {
       var ctx = document.getElementById('myChart').getContext('2d');
       var chart = new Chart(ctx, {
   // The type of chart we want to create
   type: 'line', // also try bar or other graph types
   // The data for our dataset
   data: {
   labels: [ {!! $data['clientnames'] !!} ],
   // Information about the dataset
   datasets: [{
     label: "Commission",
     backgroundColor: 'transparent',
     borderColor: '#D52626',
     lineTension: 0,
     data: [ {!! $data['clientgeneratecommission'] !!} ],
     pointBackgroundColor: "black",
   }]
   },
   // Configuration options
   options: {
   responsive: true,
   maintainAspectRatio: false,
   layout: {
     padding: 10,
   },
   legend: {
   display: false
   },
   scales: {
   yAxes: [{
       ticks: {
           beginAtZero:true
       },
       gridLines: {
           display:false
       }
   }],
   xAxes: [{
    gridLines: {
       display:false
   }
   }],
   },
   }
   });
   });
</script>
<script type="text/javascript">
  $('input[name="daterange"]').daterangepicker();
</script>
<script type="text/javascript">
  function getusers()
  {
    var daterangepicker = $("#daterangepicker").val();
    // alert(daterangepicker);
    $.get( "{{ url('/getcommission') }}?date="+daterangepicker, function( data ) {
      // alert(data);
      $("#updateondatechange").html(data);
    });
  }
</script>
@endsection