@extends('layouts.admin.app')

@section('css')

@endsection

@section('content')
<!-- BEGIN: Content-->
  <div class="app-content content">
    <div class="content-overlay"></div>
    <div class="header-navbar-shadow"></div>
    <div class="content-wrapper">
        <div class="content-header row">
        </div>
        <div class="content-body">
          <section id="dashboard-analytics">
              <div class="content-header row">
                <div class="content-header-left col-md-9 col-12 mb-2">
                    <div class="row breadcrumbs-top">
                        <div class="col-12">
                          <h2 class="content-header-title float-left mb-0">{{trans('dashboard.dashboard')}} </h2>
                        </div>
                    </div>
                </div>
              </div>
              
                
              
              <div class="row match-height">
                
                 <form action="" id="customer_form" method="post">@csrf
                 <input type="hidden" id="search" name="search" value=""> </form>
                  <div class="col-lg-3 col-md-6 col-12">
                    <a class="dash_statistics_link customer_redirect" href="{{route('recommender.index')}}">

                      <div class="card bg-primary text-white text-center">
                          <div class="card-body">
                              <div class="avatar bg-rgba-info p-50 m-0 mb-1">
                                  <div class="avatar-content">
                                      <i class="feather icon-award text-white font-medium-5"></i>
                                  </div>
                              </div>
                              <h2 class="text-white text-bold-700">{{$active_recommenders}}</h2>
                              <p class="mb-0">{{trans('dashboard.active_recommenders')}}</p>
                          </div>
                      </div>
                    </a>
                  </div>
              
                  <div class="col-lg-3 col-md-6 col-12">
                      <a class="dash_statistics_link customer_redirect" href="{{route('recommender.index')}}">

                      <div class="card bg-success text-white text-center">
                          <div class="card-body">
                              <div class="avatar bg-rgba-info p-50 m-0 mb-1">
                                  <div class="avatar-content">
                                      <i class="feather icon-award text-white font-medium-5"></i>
                                  </div>
                              </div>
                              <h2 class="text-white text-bold-700">{{$total_recommenders}}</h2>
                              <p class="mb-0">{{trans('dashboard.total_recommenders')}}</p>
                          </div>
                      </div>
                      </a>
                  </div>

                  <div class="col-lg-3 col-md-6 col-12">
                    <a class="dash_statistics_link customer_redirect" href="{{route('trader.index')}}">
                      <div class="card bg-warning text-white text-center"> 
                          <div class="card-body">
                              <div class="avatar bg-rgba-info p-50 m-0 mb-1">
                                  <div class="avatar-content">
                                      <i class="feather icon-users text-white font-medium-5"></i>
                                  </div>
                              </div>
                              <h2 class="text-white text-bold-700">{{$active_traders}}</h2>
                              <p class="mb-0">{{trans('dashboard.active_traders')}}</p>
                          </div>
                        
                      </div>
                    </a>
                  </div>

                  <div class="col-lg-3 col-md-6 col-12">
                    <a class="dash_statistics_link customer_redirect" href="{{route('trader.index')}}">
                      <div class="card bg-danger text-white text-center"> 
                          <div class="card-body">
                              <div class="avatar bg-rgba-info p-50 m-0 mb-1">
                                  <div class="avatar-content">
                                      <i class="feather icon-users text-white font-medium-5"></i>
                                  </div>
                              </div>
                              <h2 class="text-white text-bold-700">{{$total_traders}}</h2>
                              <p class="mb-0">{{trans('dashboard.total_traders')}}</p>
                          </div>
                        
                      </div>
                    </a>
                  </div>
               <div class="col-lg-12 col-md-12 col-12">
                  <div class="card">
                      <div class="card-header d-flex justify-content-between align-items-end">
                          <h4 class="card-title">Profit</h4>
                          <!-- <p class="font-medium-5 mb-0"><i class="feather icon-settings text-muted cursor-pointer"></i></p> -->
                      </div>
                      <div class="card-content">
                          <div class="card-body pb-0">
                              <div class="row">
                                  <div class="col-lg-3 col-md-4 col-sm-5 col-6">
                                      <fieldset class="form-group">
                                      <label for="">Year</label>
                                      <select class="form-control" id="profit_year">
                                          @foreach($years as $year)
                                          <option value="{{$year}}" @if($current_year == $year) selected @endif>{{$year}}</option>
                                          @endforeach
                                      </select>
                                      </fieldset>
                                  </div>
                                   <div class="col-lg-3 col-md-4 col-sm-5 col-6">
                                      <fieldset class="form-group">
                                      <label for="">Months</label>
                                      <select class="form-control" id="profit_month">
                                          <option value="01" @if($current_month == '01') selected @endif>{{trans('dashboard.01')}}</option>
                                          <option value="02" @if($current_month == '02') selected @endif>{{trans('dashboard.02')}}</option>
                                          <option value="03" @if($current_month == '03') selected @endif>{{trans('dashboard.03')}}</option>
                                          <option value="04" @if($current_month == '04') selected @endif>{{trans('dashboard.04')}}</option>
                                          <option value="05" @if($current_month == '05') selected @endif>{{trans('dashboard.05')}}</option>
                                          <option value="06" @if($current_month == '06') selected @endif>{{trans('dashboard.06')}}</option>
                                          <option value="07" @if($current_month == '07') selected @endif>{{trans('dashboard.07')}}</option>
                                          <option value="08" @if($current_month == '08') selected @endif>{{trans('dashboard.08')}}</option>
                                          <option value="09" @if($current_month == '09') selected @endif>{{trans('dashboard.09')}}</option>
                                          <option value="10" @if($current_month == '10') selected @endif>{{trans('dashboard.10')}}</option>
                                          <option value="11" @if($current_month == '11') selected @endif>{{trans('dashboard.11')}}</option>
                                          <option value="12" @if($current_month == '12') selected @endif>{{trans('dashboard.12')}}</option>
                                      </select>
                                     </fieldset>
                                  </div>
                              </div>
                            
                              <div id="profit-chart"></div>
                          </div>
                      </div>
                  </div>
                </div>  
          </section>
      
    </div>
  </div>
<!-- END: Content-->
@endsection


@section('js')
<script type="text/javascript">
    var customerChartoptions;
    var customerChart;
    var profitChartoptions;
    var profitChart;
 
    //Chart Options
    var $primary = '#31B2FF';
    var $danger = '#EA5455';
    var $warning = '#FF802F';
    var $info = '#00cfe8';
    var $success = '#00db89';
    var $primary_light = '#9c8cfc';
    var $warning_light = '#FFC085';
    var $danger_light = '#f29292';
    var $info_light = '#1edec5';
    var $strok_color = '#b9c3cd';
    var $label_color = '#e7eef7';
    var $purple = '#df87f2';
    var $white = '#fff';

    

    $(window).on("load", function(){

      // Customer Chart(Pie Chart)
      // -----------------------------
      
        render_profit_chart(['0'],['0']);
   
        var month = $('#profit_month').val();
        var year = $('#profit_year').val();
        load_profit_chart(month,year);


    });

    $('#profit_month,#profit_year').on('change',function(){

        var month = $('#profit_month').val();
        var year = $('#profit_year').val();
        load_profit_chart(month,year);
    })


    function load_profit_chart(month,year){
        
        $.ajax({

            type : 'post',
            url : "{{route('update_profit_chart')}}",
            data : {
                '_token' : "{{csrf_token()}}",
                'month' : month,
                'year' : year,
            },
           
            success: (response) => {
              if (response.type == 'error') {
               
                // toastr.error(response.message);
              }else{
                profitChart.destroy();   
                render_profit_chart(response.days,response.amount);
              }
            },
            error: function(response){
              toastr.error(response.message);
                
            }

        });
    }

 
    function render_profit_chart(days,amount){
        @if(config("app.locale") == 'ar')
          days= days.reverse();
          amount = amount.reverse();
          inverse = true;
        @else
          inverse = false;
        @endif
        profitChartoptions = {
          chart: {
            height: 260,
            toolbar: { show: false },
            type: 'line',
             offsetX: 20,
            
          },
          stroke: {
              curve: 'smooth',
              dashArray: [0, 8],
              width: [4, 2],
          },
          grid: {
              borderColor: $label_color,
          },
          legend: {
              show: false,
          },
          colors: [$danger_light, $strok_color],

          fill: {
              type: 'gradient',
              gradient: {
                  shade: 'dark',
                  inverseColors: inverse,
                  gradientToColors: [$primary, $strok_color],
                  shadeIntensity: 1,
                  type: 'horizontal',
                  opacityFrom: 1,
                  opacityTo: 1,
                  stops: [0, 100, 100, 100]
              },
          },
          markers: {
              size: 0,
              hover: {
                  size: 5
              }
          },
          xaxis: {
              labels: {
                  style: {
                      colors: $strok_color,
                  }
              },
              axisTicks: {
                  show: false,
              },
              categories: days,
              axisBorder: {
                  show: false,
              },
              tickPlacement: 'on',
            
              categories: days,
             
          },
          yaxis: {
              tickAmount: 5,
              labels: {
                  style: {
                      color: $strok_color,
                  },
                  formatter: function(val) {
                      return val > 999 ? (val / 1000).toFixed(1) + 'k' : val.toFixed(1);
                  },
                  align:'center',
              },
              @if(config("app.locale") == 'ar')
                opposite: true,

              
              @endif
              
          },
          tooltip: {
              x: { show: false }
          },
          series: [{
                  name: "{{trans('dashboard.this_day')}}",
                  data: amount
              },
              
          ],

        }

        profitChart = new ApexCharts(
            document.querySelector("#profit-chart"),
            profitChartoptions
        );

        profitChart.render();   
    }

 </script>


@endsection