@extends('admin.layouts.app')
@section('title', 'Dashboard')

@section('content')
<!-- Content Wrapper. Contains page content -->
    <!-- Content Header (Page header) -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0">{{__('Dashboard')}}</h1>
          </div><!-- /.col -->
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">{{__('Home')}}</a></li>
              <li class="breadcrumb-item active">{{__('Dashboard')}}</li>
            </ol>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <!-- Main content -->
      <div class="container-fluid">
        {!! Form::open(['route' => ['admin-home'], 'id' => 'filter_form']) !!}
            <div class="row filter-row">
              <div class="col-md-4 pull-left StartDate">
                <div class="form-group">
                    <label>Start Date</label>
                    <input type="date" class="form-control" name="start_date" value="{{ $start_date }}">
                </div>      
              </div>
              <div class="col-md-4 pull-left EndDate">
                <div class="form-group">
                  <label>End Date</label>
                  <input type="date" class="form-control" name="end_date" value="{{ $end_date }}">
                </div>
              </div>
              <div class="col-md-3 pull-left">
                <div class="form-group">
                    <input id="filter-btn" type="button" class="btn btn-success" name="submit" value="Filter">
                </div>
              </div>
            </div>
          {!! Form::close() !!}
        <!-- Small boxes (Stat box) -->
        <div class="row">  
          <div class="col-lg-3 col-6">
            <!-- small box -->
            <div class="small-box bg-warning">
              <div class="inner">
                <h4>{{ $totalUsers }}</h4>

                <p>{{__('Registered users')}}</p>
              </div>
              <div class="icon">
                <i class="ion ion-person-add"></i>
              </div>
              <a href="#" class="small-box-footer">{{__('More info ')}} <i class="fas fa-arrow-circle-right"></i></a>
            </div>
          </div>
          <!-- ./col -->        
          <div class="col-lg-3 col-6">
            <!-- small box -->
            <div class="small-box bg-success">
              <div class="inner">
                <h4>{{ $totalProducts }}</h4>

                <p>{{__('No of Products')}}</p>
              </div>
              <div class="icon">
                <i class="ion ion-stats-bars"></i>
              </div>
              <a href="#" class="small-box-footer">{{__('More info ')}} <i class="fas fa-arrow-circle-right"></i></a>
            </div>
          </div>
          <!-- ./col -->
          
          <div class="col-lg-3 col-6">
            <!-- small box -->
            <div class="small-box bg-info">
              <div class="inner">
                <h4>{{ $totalOrders }}</h4>

                <p>{{__('Total Orders')}}</p>
              </div>
              <div class="icon">
                <i class="ion ion-pie-graph"></i>
              </div>
              <a href="#" class="small-box-footer">{{__('More info ')}} <i class="fas fa-arrow-circle-right"></i></a>
            </div>
          </div>
          <!-- ./col -->
          <div class="col-lg-3 col-6">
            <!-- small box -->
            <div class="small-box bg-danger">
              <div class="inner">
                <h4>{{ $failedOrders }}</h4>

                <p>{{__('Failed Orders')}}</p>
              </div>
              <div class="icon">
                <i class="ion ion-bag"></i>
              </div>
              <a href="#" class="small-box-footer">{{__('More info ')}} <i class="fas fa-arrow-circle-right"></i></a>
            </div>
          </div>
          <!-- ./col -->
          <div class="col-lg-3 col-6">
            <!-- small box -->
            <div class="small-box bg-secondary">
              <div class="inner">
                @if($totalSale > 0)
                  <h4>KWD {{ number_format($totalSale,2) }}</h4>
                @else
                  <h4>KWD 0.00</h4>
                @endif

                <p>{{__('Total Sales')}}</p>
              </div>
              <div class="icon">
                <i class="ion ion-pie-graph"></i>
              </div>
              <a href="#" class="small-box-footer">{{__('More info ')}} <i class="fas fa-arrow-circle-right"></i></a>
            </div>
          </div>
          <!-- ./col -->
          <div class="col-lg-3 col-6">
            <!-- small box -->
            <div class="small-box bg-info">
              <div class="inner">
                @if($cancelledItems[0]->cancelamount == '')
                  <h4>{{ $cancelledItems[0]->cancelledcount }}(0.00)</h4>
                @else
                  <h4>{{ $cancelledItems[0]->cancelledcount }} (KWD {{ number_format($cancelledItems[0]->cancelamount,2) }} )</h4>
                @endif 
                <p>{{__('Cancelled Items')}}</p>
              </div>
              <div class="icon">
                <i class="ion ion-pie-graph"></i>
              </div>
              <a href="#" class="small-box-footer">{{__('More info ')}} <i class="fas fa-arrow-circle-right"></i></a>
            </div>
          </div>
          <!-- ./col -->
          <div class="col-lg-3 col-6">
            <!-- small box -->
            <div class="small-box bg-danger">
              <div class="inner">
                @if($todayRevenue[0]->todaycount == '')
                  <h4>0.00</h4>
                @else
                  <h4>KWD {{ number_format($todayRevenue[0]->todaycount,2) }}</h4>
                @endif 
                <p>{{__('Today\'s Revenue')}}</p>
              </div>
              <div class="icon">
                <i class="ion ion-pie-graph"></i>
              </div>
              <a href="#" class="small-box-footer">{{__('More info ')}} <i class="fas fa-arrow-circle-right"></i></a>
            </div>
          </div>
          <!-- ./col -->

          <div class="col-lg-3 col-6">
            <!-- small box -->
            <div class="small-box bg-success">
              <div class="inner">
                @if($totalRevenue[0]->totalcount == '')
                  <h4>0.00</h4>
                @else
                  <h4>KWD {{ number_format($totalRevenue[0]->totalcount,2) }}</h4>
                @endif 
                <p>{{__('Revenue Till Date')}}</p>
              </div>
              <div class="icon">
                <i class="ion ion-pie-graph"></i>
              </div>
              <a href="#" class="small-box-footer">{{__('More info ')}} <i class="fas fa-arrow-circle-right"></i></a>
            </div>
          </div>
          <!-- ./col -->
          

        </div>
        <!-- /.row -->
        <!-- Main row -->
        <!-- /.row (main row) -->
      </div><!-- /.container-fluid -->
    <!-- /.content -->
  <!-- /.content-wrapper -->
@endsection
@push('scripts') 
<script>
   $( document ).ready(function() {
      var sareaId =  $('#selct-sale').find(":selected").val();
      loadSaleData(sareaId);

      $("#selct-sale").on('change', function(){
            var sareaId = $(this).val(); 
            loadSaleData(sareaId);
      });
   });
   
  function loadSaleData(id){
      var sareaId = id;
      var start_date =  $("input[name='start_date']").val();
      var end_date =  $("input[name='end_date']").val();
        $.ajax({
            url: "{{ url('admin/filter_area_chart_data')}}",    //the page containing php script
            type: "post",    //request type,
            dataType: 'json',
            data: {sareaId: sareaId, start_date: start_date, end_date: end_date, _token: '{{ csrf_token() }}'},
            success:function(data){
              if(data != ''){             
                  $("#chartContainer").CanvasJSChart({ 
                      title: { 
                        text: "Top Selling Areas",
                        fontSize: 24
                      }, 
                      axisY: { 
                        title: "Orders" 
                      }, 
                      legend :{ 
                        verticalAlign: "center", 
                        horizontalAlign: "right" 
                      }, 
                      data: [ 
                      { 
                        type: "pie", 
                        showInLegend: true, 
                        toolTipContent: "{label} <br/> {y}", 
                        indexLabel: "{y}", 
                        dataPoints: data

                      } 
                      ] 
                      }); 
              }
              else{
                $('#chartContainer').html('<div class="nodata">No data Available</div>')
              }
            }
        });
  }
</script>
 @endpush