@extends('crudbooster::admin_template')
@section('content')

<div class="row">
  <div class="col-lg-6">
    <div class="panel panel-default">
      <div class="panel-body" style="padding: 4px;">
        <table class="table table-striped" style="margin-bottom: 0px;">
          <thead>
            <tr>
              <th></th>
              <th class="text-center">Total</th>
              {{-- <th class="text-center">Outstanding</th>
              <th class="text-center">Disetujui</th>
              <th class="text-center">Tidak Disetujui</th> --}}
            </tr>
          </thead>
          <tbody>
            {{-- <tr>
              <th>Training</th>
              <td class="text-center">{{ App\PengajuanTraining::where('deleted_at',NULL)->count() }}</td>
              <td class="text-center"></td>
              <td class="text-center"></td>
              <td class="text-center"></td>
            </tr> --}}
            <tr>
              <th>Improvement</th>
              <td class="text-center">{{ App\PengajuanImprovement::where('deleted_at',NULL)->count() }}</td>
              {{-- <td class="text-center">{{ App\PengajuanImprovement::where('deleted_at',NULL)->where(function($query){
                $query->where('status_action','=','diajukan')->orWhereNull('status_action');
              })->count() }}</td>
              <td class="text-center">{{ App\PengajuanImprovement::where('deleted_at',NULL)->where('status_action', 'disetujui')->count() }}</td>
              <td class="text-center">{{ App\PengajuanImprovement::where('deleted_at',NULL)->where('status_action', 'tidak_disetujui')->count() }}</td> --}}
            </tr>
            <tr>
              <th>Month {{ date('F') }}</th>
              <td class="text-center">{{ App\PengajuanImprovement::where('deleted_at',NULL)->whereMonth('created_at', date('m'))->whereYear('created_at', date('Y'))->count() }}</td>
              {{-- <td class="text-center">{{ App\PengajuanImprovement::where('deleted_at',NULL)->where(function($query){
                $query->where('status_action','=','diajukan')->orWhereNull('status_action');
              })->count() }}</td>
              <td class="text-center">{{ App\PengajuanImprovement::where('deleted_at',NULL)->where('status_action', 'disetujui')->count() }}</td>
              <td class="text-center">{{ App\PengajuanImprovement::where('deleted_at',NULL)->where('status_action', 'tidak_disetujui')->count() }}</td> --}}
            </tr>
            <tr>
              <th>Year {{ date('Y') }}</th>
              <td class="text-center">{{ App\PengajuanImprovement::where('deleted_at',NULL)->whereYear('created_at', date('Y'))->count() }}</td>
              {{-- <td class="text-center">{{ App\PengajuanImprovement::where('deleted_at',NULL)->where(function($query){
                $query->where('status_action','=','diajukan')->orWhereNull('status_action');
              })->count() }}</td>
              <td class="text-center">{{ App\PengajuanImprovement::where('deleted_at',NULL)->where('status_action', 'disetujui')->count() }}</td>
              <td class="text-center">{{ App\PengajuanImprovement::where('deleted_at',NULL)->where('status_action', 'tidak_disetujui')->count() }}</td> --}}
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <div class="col-lg-6">
    <div class="panel panel-default">
      <div class="panel-body" style="padding: 4px;">
          <form action="{{ route('admin.achievement_setting') }}" method="POST">
            {{ csrf_field() }}
            @php
              $aktualPengajuan = App\PengajuanImprovement::where('deleted_at',NULL)->count();
              $targetAngka = $achievement_setting ? $achievement_setting->target_number_count : 0;
              $prosentasePengajuan = ((int) $aktualPengajuan / (int) $targetAngka) * 100;
            @endphp
            <div class="row">
              {{-- <div class="col-md-4">
                <div class="form-group">
                  <label for="">Jumlah Karyawan</label>
                  <input type="textz" name="employee_count" class="form-control" value="{{ $achievement_setting ? $achievement_setting->employee_count : '' }}">
                </div>
              </div>
              <div class="col-md-4">
                <div class="form-group">
                  <label for="">Target (%)</label>
                  <input type="text" name="target_percentage_count" class="form-control" value="{{ $achievement_setting ? $achievement_setting->target_percentage_count : 0 }}">
                </div>
              </div> --}}
              <div class="col-md-4">
                <div class="form-group">
                  <label for="">Aktual Pengajuan</label>
                  <input type="number" disabled class="form-control" value="{{ $aktualPengajuan }}">
                </div>
              </div>
              <div class="col-md-4">
                <div class="form-group">
                  <label for="">Target (Angka)</label>
                  <input type="text" name="target_number_count" class="form-control" value="{{ $achievement_setting ? $achievement_setting->target_number_count : 0 }}">
                </div>
              </div>
              <div class="col-md-4">
                <div class="form-group">
                  <label for="">Prosesntase</label>
                  <input type="number" disabled class="form-control" value="{{ $prosentasePengajuan }}">
                </div>
              </div>
              <div class="col-md-12">
                <div class="form-group">
                  <button type="submit" class="btn btn-primary btn-block">Save Target</button>
                </div>
              </div>
            </div>
          </form>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-lg-12">
    <div class="panel panel-default">
      <div class="panel-heading">
        Achievement 
      </div>
      <div class="panel-body">
        <div id="chart-presentase"></div>
      </div>
    </div>
  </div>
	<div class="col-lg-12">
    <div class="panel panel-default">
      <div class="panel-heading">Total Keseluruhan</div>
      <div class="panel-body">
        <div id="chart1"></div>
      </div>
    </div>
  </div>
  <div class="col-lg-12">
    <div class="panel panel-default">
      <div class="panel-heading">Total Improvement
        <form action="" method="get" id="form_year_improvement">
          <div class="row">
            <div class="col-md-3">
              <div class="form-group">
                <label for="Year">Year</label>
                @php
                  $yearNow = date('Y');

                  if(request()->year_improvement) {
                    $yearNow = request()->year_improvement;
                  }
                @endphp
                <select class="form-control" name="year_improvement" id="year_improvement">
                  @foreach (range(2020, (int) date('Y')) as $years)
                    <option {{ ($years == (int) $yearNow) ? 'selected' : '' }} value="{{ $years }}">{{ $years }}</option>
                  @endforeach
                </select>
              </div>
            </div>
            <div class="col-md-3">
              <label for="">Month</label>
              <div class="form-group">
                @php
                  $monthSelected = 'all';

                  if(request()->month_improvement) {
                    $monthSelected = request()->month_improvement;
                  }
                @endphp
                <select class="form-control" name="month_improvement" id="month_improvement">
                  <option {{ ('all' == $monthSelected) ? 'selected' : '' }} value="all">All</option>
                  @foreach (range(1, 12) as $month)
                    <option {{ ($month == $monthSelected) ? 'selected' : '' }} value="{{ $month }}">{{ $month }}</option>
                  @endforeach
                </select>
              </div>
            </div>
            <div class="col-md-3">
              <label for="">Branch</label>
              <div class="form-group">
                @php
                  $branchSelected = 'all';

                  if(request()->branch_improvement) {
                    $branchSelected = request()->branch_improvement;
                  }
                @endphp
                <select class="form-control" name="branch_improvement" id="branch_improvement">
                  <option {{ ('all' == $branchSelected) ? 'selected' : '' }} value="all">All</option>
                  <option {{ ('headoffice' == $branchSelected) ? 'selected' : '' }} value="headoffice">Head Office</option>
                  <option {{ ('branch' == $branchSelected) ? 'selected' : '' }} value="branch">Cabang</option>
                </select>
              </div>
            </div>
          </div>
        </form>
      </div>
      <div class="panel-body">
        <div id="chart-branch"></div>
      </div>
    </div>
  </div>
  <div class="col-lg-12">
    <div class="panel panel-default">
      <div class="panel-heading">
        Total Improvement Per Category 
        
      </div>
      <div class="panel-body">
        <div id="chart-category"></div>
      </div>
    </div>
  </div>
</div>

<style>
#chart {
  max-width: 100%;
}
</style>
<script src="{{asset('js')}}/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
  $(function () {
    $("#year_improvement").on('change', function() {
      $("#form_year_improvement").submit()
    })
    $("#month_improvement").on('change', function() {
      $("#form_year_improvement").submit()
    })
    $("#branch_improvement").on('change', function() {
      $("#form_year_improvement").submit()
    })
  })
  
// Shared Colors Definzition
const primary = '#001561';
const success = '#F64E60';
const info = '#F64E60';
const warning = '#001561';
const danger = '#F64E60';

var datenow = new Date();
var year = datenow.getFullYear();


var data_categories = ['SS', 'QCP', 'QCC', 'PPS'];
var branchs = []
var data_branchs = JSON.parse('{!! $branch !!}');
data_branchs.forEach(d => {
  branchs.push(d.name)
})
// CHART 1

// Training
var training_values = [];
for (let index = 1; index <= 12; index++) {
  training_values.push(0);
}
var claim_year = JSON.parse('{!! $training !!}');
claim_year.forEach(item => {
  training_values[parseInt(item.BULAN) - 1] = parseInt(item.TOTAL)
});

// Improvement
var improvement_values = [];
for (let index = 1; index <= 12; index++) {
  improvement_values.push(0);
}
var complaint_year = JSON.parse('{!! $improvement !!}');
complaint_year.forEach(item => {
  improvement_values[parseInt(item.BULAN) - 1] = parseInt(item.TOTAL)
});

var options1 = {
  series: [
    // {
    //   name: 'Jumlah Training',
    //   data: training_values
    // },
    {
      name: 'jumlah Improvement',
      data: improvement_values
    }
  ],
  chart: {
    height: 250,
    type: 'area'
  },
  dataLabels: {
    enabled: true
  },
  stroke: {
    curve: 'smooth'
  },
  xaxis: {
    categories: ['Januari '+year, 'Februari '+year, 'Maret '+year, 'April '+year, 'Mei '+year, 'Juni '+year, 'Juli '+year, 'Agustus '+year, 'September '+year, 'Oktober '+year, 'November '+year, 'Desember '+year],
  },
  yaxis: {
    labels: {
      formatter: function(val, index) {
        return val.toFixed();
      }
    }
  },
  colors: [primary, primary]
}
var chart1 = new ApexCharts(document.querySelector("#chart1"), options1);
chart1.render();


renderBranchChart()
renderCategoryChart()

function renderBranchChart() {
  var branch = [];
  var branch_improvement_values = [];
  var branch_training_values = [];
  var branch_improvement = JSON.parse('{!! $improvement_branch !!}');
  var branch_training = JSON.parse('{!! $training_branch !!}');

  data_branchs.forEach(d => {
    var total = 0;
    branch_improvement.forEach(value => {
      if(d.name == value.branch) {
        total = value.total;
        branch.push(value.branch)
      }
    });

    branch_improvement_values.push(total);
    // branch.push(value.branch)
  })

  data_branchs.forEach(d => {
    var total = 0;
    branch_training.forEach(value => {
      if(d.name == value.branch) {
        total = value.total;
        branch.push(value.branch)
      }
    });

    branch_training_values.push(total);
    // branch.push(value.branch)
  })

  console.log(branch_improvement_values)

  var options2 = {
    series: [
      // {
      //   name: 'Training',
      //   data: branch_training_values
      // },
      {
        name: 'Improvement',
        data: branch_improvement_values
      }
    ],
    chart: {
      height: 250,
      type: 'bar'
    },
    dataLabels: {
      enabled: true
    },
    tooltip: {
      enabled: true,
      enabledOnSeries: undefined,
      y: {
        formatter: function(value, { series, seriesIndex, dataPointIndex, w }) {
          return value
        }
      }
    },
    stroke: {
      curve: 'smooth'
    },
    xaxis: {
      categories: branchs,
    },
    yaxis: {
      labels: {
        formatter: function(val, index) {
          return val.toFixed();
        }
      }
    },
    colors: [warning, warning]
  }
  var chart2 = new ApexCharts(document.querySelector("#chart-branch"), options2);
  chart2.render();
}

function renderCategoryChart() {
  var category = [];
  var category_improvement_values = [];
  var category_improvement = JSON.parse('{!! $improvement_category !!}');

  data_categories.forEach(d => {
    var total = 0
    category_improvement.forEach(value => {
      if(d == value.name) {
        total = value.total
      }
    });

    category_improvement_values.push(total);
  })


  var options2 = {
    series: [{
      name: 'Improvement',
      data: category_improvement_values
    }],
    chart: {
      height: 250,
      type: 'bar'
    },
    dataLabels: {
      enabled: true
    },
    tooltip: {
      enabled: true,
      enabledOnSeries: undefined,
      y: {
        formatter: function(value, { series, seriesIndex, dataPointIndex, w }) {
          return value
        }
      }
    },
    stroke: {
      curve: 'smooth'
    },
    xaxis: {
      categories: data_categories,
    },
    yaxis: {
      labels: {
        formatter: function(val, index) {
          return val.toFixed();
        }
      }
    },
    colors: [warning,info]
  }
  var chart3 = new ApexCharts(document.querySelector("#chart-category"), options2);
  chart3.render();
}

renderPresentaseChart()
function renderPresentaseChart() {
  var category = [];
  var category_improvement_values = [];
  var category_improvement = JSON.parse('{!! $improvement_category !!}');

  data_categories.forEach(d => {
    var total = 0
    category_improvement.forEach(value => {
      if(d == value.name) {
        total = value.total
      }
    });

    category_improvement_values.push(total);
  })


  var options2 = {
    series: [
      {
      name: 'Aktual Pengajuan',
      data: [
        {{ $aktualPengajuan }},
        ]
      },
      {
        name: 'Target Angka',
        data: [
          {{ $targetAngka }}
        ]
      }
    ],
    chart: {
      height: 250,
      type: 'bar'
    },
    dataLabels: {
      enabled: true
    },
    tooltip: {
      enabled: true,
      enabledOnSeries: undefined,
      y: {
        formatter: function(value, { series, seriesIndex, dataPointIndex, w }) {
          return value
        }
      }
    },
    stroke: {
      curve: 'smooth'
    },
    xaxis: {
      categories: [
        'Total',
        'Target'
      ],
    },
    yaxis: {
      labels: {
        formatter: function(val, index) {
          return val.toFixed();
        }
      }
    },
    colors: [warning,info]
  }
  var chart4 = new ApexCharts(document.querySelector("#chart-presentase"), options2);
  chart4.render();
}

</script>
@endsection