@extends('layouts.app')

@section('content')
{{ App::setLocale(Cookie::get('my_locale')) }}
 <!--  BEGIN CONTENT AREA  -->
    <div class="content-header" style="margin-top:-30px;">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0 text-dark">{{__('messages.mgmtsreports')}}</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">Transactions</li> -->
            </ol>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
  

    <section class="content">
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-6">
           
          <div class="card ">
              <div class="card-header">
                <h3 class="card-title">{{__('messages.managements')}}</h3>

                <div class="card-tools">
                  <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                  </button>
                  <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button>
                </div>
              </div>
              <div class="card-body">
                <div class="chart">
                  <canvas id="barChart" style="height:230px; min-height:230px"></canvas>
                </div>
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->
           

          </div>
          <!-- /.col (LEFT) -->
          <div class="col-md-6">
            <!-- LINE CHART -->
            

            <!-- BAR CHART -->
            

            <!-- STACKED BAR CHART -->
            <div class="card ">
              <div class="card-header">
                <h3 class="card-title">{{__('messages.departments')}}</h3>

                <div class="card-tools">
                  <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                  </button>
                  <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button>
                </div>
              </div>
              <div class="card-body">
                <div class="chart">
                <canvas id="barChart2" style="height:230px; min-height:230px"></canvas>
                </div>
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->

          </div>
          <!-- /.col (RIGHT) -->
        </div>
        <!-- /.row -->
      </div><!-- /.container-fluid -->
      <input id="managements" value="{{$managements}}" hidden></input>
      <input id="departments" value="{{$departments}}" hidden></input>
    </section>
  
    <script src="{{ asset('plugins/chart.js/Chart.min.js') }}"></script>
    <script src="{{ asset('dist/js/pages/dashboard2.js') }}"></script>

    <script src="{{ asset('plugins/moment/moment-with-locales.min.js') }}"></script>
    <script src="{{ asset('plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js') }}"></script>
    <!-- <script src="{{ asset('dist/js/pages/dashboard.js') }}"></script> -->

    <script src="{{ asset('plugins/chart.js/Chart.min.js') }}"></script>

<script>
  function getDarkColor() {
      var color = '#';
      for (var i = 0; i < 6; i++) {
          color += Math.floor(Math.random() * 10);
      }
      return color;
  }

  var managements = JSON.parse($('#managements').val());
  var managements1 = [];
  for(let i=0; i<managements.length; i++){
    var color1 = getDarkColor();
    var color2 = getDarkColor();
    var color3 = getDarkColor();
    var color4 = getDarkColor();
    managements1[i] = [];
    managements1[i]['label'] = managements[i]['name'];
    managements1[i]['backgroundColor'] = color1;
    managements1[i]['borderColor'] = color1;
    managements1[i]['pointRadius'] = false;
    managements1[i]['pointColor'] = color2;
    managements1[i]['pointStrokeColor'] = color3;
    managements1[i]['pointHighlightFill'] = '#fff';
    managements1[i]['pointHighlightStroke'] = color4;
    managements1[i]['data'] = [managements[i]['count']];
  }
  
  console.log(managements1);
  //--------------
    //- AREA CHART -
    //--------------

    // Get context with jQuery - using jQuery's .get() method.
    // var areaChartCanvas = $('#areaChart').get(0).getContext('2d')
    var areaChartData = {
      labels  : [''],
      datasets: managements1,
    }

    // var areaChartData = {
    //   labels  : [''],
    //   datasets: [
    //     {
    //       label               : 'ادارة المستودعات',
    //       backgroundColor     : 'rgba(60,141,188,0.9)',
    //       borderColor         : 'rgba(60,141,188,0.8)',
    //       pointRadius          : false,
    //       pointColor          : '#3b8bba',
    //       pointStrokeColor    : 'rgba(60,141,188,1)',
    //       pointHighlightFill  : '#fff',
    //       pointHighlightStroke: 'rgba(60,141,188,1)',
    //       data                : [28, 48, 40, 19, 86, 27, 90]
    //     },
    //     {
    //       label               : 'الادارة المركزية',
    //       backgroundColor     : 'rgba(210, 214, 222, 1)',
    //       borderColor         : 'rgba(210, 214, 222, 1)',
    //       pointRadius         : false,
    //       pointColor          : 'rgba(210, 214, 222, 1)',
    //       pointStrokeColor    : '#c1c7d1',
    //       pointHighlightFill  : '#fff',
    //       pointHighlightStroke: 'rgba(220,220,220,1)',
    //       data                : [65, 59, 80, 81, 56, 55, 40]
    //     },
    //   ]
    // }

    var areaChartOptions = {
      maintainAspectRatio : false,
      responsive : true,
      legend: {
        display: false
      },
      scales: {
        xAxes: [{
          gridLines : {
            display : false,
          }
        }],
        yAxes: [{
          gridLines : {
            display : false,
          }
        }]
      }
    }

   //-------------
    //- BAR CHART -
    //-------------
    var barChartCanvas = $('#barChart').get(0).getContext('2d')
    var barChartData = jQuery.extend(true, {}, areaChartData)
    var temp0 = areaChartData.datasets[0]
    var temp1 = areaChartData.datasets[1]
    barChartData.datasets[0] = temp1
    barChartData.datasets[1] = temp0

    var barChartOptions = {
      responsive              : true,
      maintainAspectRatio     : false,
      datasetFill             : false
    }

    var barChart = new Chart(barChartCanvas, {
      type: 'bar', 
      data: barChartData,
      options: barChartOptions
    })

    //---------------------
    //- STACKED BAR CHART -
    //---------------------
  var departments = JSON.parse($('#departments').val());
  var departments1 = [];
  for(let i=0; i<departments.length; i++){
    var color1 = getDarkColor();
    var color2 = getDarkColor();
    var color3 = getDarkColor();
    var color4 = getDarkColor();
    departments1[i] = [];
    departments1[i]['label'] = departments[i]['name'];
    departments1[i]['backgroundColor'] = color1;
    departments1[i]['borderColor'] = color1;
    departments1[i]['pointRadius'] = false;
    departments1[i]['pointColor'] = color2;
    departments1[i]['pointStrokeColor'] = color3;
    departments1[i]['pointHighlightFill'] = '#fff';
    departments1[i]['pointHighlightStroke'] = color4;
    departments1[i]['data'] = [departments[i]['count']];
  }
  // alert(departments1[0]['label']);
    var areaChartData = {
      labels  : [''],
      datasets: departments1,
    }
    var areaChartOptions = {
      maintainAspectRatio : false,
      responsive : true,
      legend: {
        display: false
      },
      scales: {
        xAxes: [{
          gridLines : {
            display : false,
          }
        }],
        yAxes: [{
          gridLines : {
            display : false,
          }
        }]
      }
    }
    
    var barChartCanvas = $('#barChart2').get(0).getContext('2d')
    
    var barChartData = jQuery.extend(true, {}, areaChartData)
    
    var temp0 = areaChartData.datasets[0]
    var temp1 = areaChartData.datasets[1]
    // alert(areaChartData);
    barChartData.datasets[0] = temp1
    barChartData.datasets[1] = temp0

    var barChartOptions = {
      responsive              : true,
      maintainAspectRatio     : false,
      datasetFill             : false
    }

    var barChart = new Chart(barChartCanvas, {
      type: 'bar', 
      data: barChartData,
      options: barChartOptions
    })


    // var stackedBarChartCanvas = $('#stackedBarChart').get(0).getContext('2d')
    // var stackedBarChartData = jQuery.extend(true, {}, barChartData)

    // var stackedBarChartOptions = {
    //   responsive              : true,
    //   maintainAspectRatio     : false,
    //   scales: {
    //     xAxes: [{
    //       stacked: true,
    //     }],
    //     yAxes: [{
    //       stacked: true
    //     }]
    //   }
    // }

    // var stackedBarChart = new Chart(stackedBarChartCanvas, {
    //   type: 'bar', 
    //   data: stackedBarChartData,
    //   options: stackedBarChartOptions
    // })

    $('#calendar').datetimepicker({
      format: 'L',
      locale: '{{ Lang::locale() }}',
      inline: true
    })  
    // var startDate = moment($("#startDate").val()).toDate();
    // var endDate = moment($("#endDate").val()).toDate();
    $('#showhidechat').trigger("click");
</script>
@endsection