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

<div class="row">
	<div class="col-lg-5">
    <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>Klaim</th>
              <td class="text-center">{{ App\Claim::where('deleted_at',NULL)->count() }}</td>
              <td class="text-center">{{ App\Claim::where('deleted_at',NULL)->where(function($query){
                $query->Where('status','=','Proses Penanganan');
              })->count() }}</td>
              <td class="text-center">{{ App\Claim::where('deleted_at',NULL)->where('status', 'Disetujui')->count() }}</td>
              <td class="text-center">{{ App\Claim::where('deleted_at',NULL)->where('status', 'Tidak Disetujui')->count() }}</td>
            </tr>
            <tr>
              <th>Komplain</th>
              <td class="text-center">{{ App\Complaint::where('deleted_at',NULL)->count() }}</td>
              <td class="text-center">{{ App\Complaint::where('deleted_at',NULL)->where(function($query){
                $query->Where('status','=','Proses Penanganan');
              })->count() }}</td>
              <td class="text-center">{{ App\Complaint::where('deleted_at',NULL)->where('status', 'Disetujui')->count() }}</td>
              <td class="text-center">{{ App\Complaint::where('deleted_at',NULL)->where('status', 'Tidak Disetujui')->count() }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
	<div class="col-lg-7">
    <div class="panel panel-default">
      <div class="panel-body" style="padding: 4px;">
        <table class="table table-striped" style="margin-bottom: 0px;">
          <thead>
            <tr>
              <th class="text-center">Klaim Bulan Ini</th>
              <th class="text-center">Klaim Outstanding Bulan Ini</th>
              <th class="text-center">Klaim Disetujui</th>
              <th class="text-center">Klaim Tidak Disetujui</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="text-center">{{ App\Claim::whereMonth('claim_date', '=', date('m'))->where('deleted_at',NULL)->count() }}</td>
              <td class="text-center">{{ App\Claim::whereMonth('claim_date', '=', date('m'))->where('deleted_at',NULL)->where(function($query){
                $query->Where('status','=','Proses Penanganan')->orWhere('status', 'Diproses');
              })->whereMonth('claim_date', '=', date('m'))->count() }}</td>
              <td class="text-center">{{ App\Claim::whereMonth('claim_date', '=', date('m'))->where('deleted_at',NULL)->where('status', 'Disetujui')->count() }}</td>
              <td class="text-center">{{ App\Claim::whereMonth('claim_date', '=', date('m'))->where('deleted_at',NULL)->where('status', 'Tidak Disetujui')->count() }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-body" style="padding: 4px;">
        <table class="table table-striped" style="margin-bottom: 0px;">
          <thead>
            <tr>
              <th class="text-center">Komplain Bulan Ini</th>
              <th class="text-center">Komplain Outstanding Bulan Ini</th>
              <th class="text-center">Komplain Disetujui</th>
              <th class="text-center">Komplain Tidak Disetujui</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="text-center">{{ App\Complaint::whereMonth('complaint_date', '=', date('m'))->where('deleted_at',NULL)->count() }}</td>
              <td class="text-center">{{ App\Complaint::whereMonth('complaint_date', '=', date('m'))->where('deleted_at',NULL)->where(function($query){
                $query->Where('status','=','Proses Penanganan')->orWhere('status', 'Diproses');
              })->whereMonth('complaint_date', '=', date('m'))->count() }}</td>
              <td class="text-center">{{ App\Complaint::whereMonth('complaint_date', '=', date('m'))->where('deleted_at',NULL)->where('status', 'Disetujui')->count() }}</td>
              <td class="text-center">{{ App\Complaint::whereMonth('complaint_date', '=', date('m'))->where('deleted_at',NULL)->where('status', 'Tidak Disetujui')->count() }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
	</div>
</div>

<div class="row">
	<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 Outstanding</div>
      <div class="panel-body">
        <div id="chart2"></div>
      </div>
    </div>
  </div>
	<div class="col-lg-12">
    <div class="panel panel-default">
      <div class="panel-heading">Total Disetujui</div>
      <div class="panel-body">
        <div id="chart3"></div>
      </div>
    </div>
  </div>
	<div class="col-lg-12">
    <div class="panel panel-default">
      <div class="panel-heading">Total Tidak Disetujui</div>
      <div class="panel-body">
        <div id="chart4"></div>
      </div>
    </div>
  </div>
</div>

<div class="row">
	<div class="col-lg-12">
    <div class="panel panel-default">
      <div class="panel-heading">Grafik Lead Time Pelaporan - Tahun {{date('Y')}}</div>
      <div class="panel-body">
        <div id="chart6"></div>
      </div>
    </div>
  </div>
	<div class="col-lg-12">
    <div class="panel panel-default">
      <div class="panel-heading">Grafik Lead Time Penanganan - Tahun {{date('Y')}}</div>
      <div class="panel-body">
        <div id="chart7"></div>
      </div>
    </div>
  </div>
</div>

<style>
#chart {
  max-width: 100%;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
// Shared Colors Definition
const primary = '#001561';
const success = '#F64E60';
const info = '#F64E60';
const warning = '#001561';
const danger = '#F64E60';

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

// CHART 1

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

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

var options1 = {
  series: [{
    name: 'Jumlah Klaim',
    data: claim_values
  }, {
    name: 'jumlah Komplain',
    data: complaint_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: [info, primary]
}
var chart1 = new ApexCharts(document.querySelector("#chart1"), options1);
chart1.render();

// CHART 2

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

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

var options2 = {
  series: [{
    name: 'Jumlah Klaim',
    data: claim_outstanding_values
  }, {
    name: 'jumlah Komplain',
    data: complaint_outstanding_values
  }],
  chart: {
    height: 250,
    type: 'area'
  },
  dataLabels: {
    enabled: false
  },
  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: [success, primary]
}
var chart2 = new ApexCharts(document.querySelector("#chart2"), options2);
chart2.render();

// CHART 3

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

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

var options3 = {
  series: [{
    name: 'Jumlah Klaim',
    data: claim_done_values
  }, {
    name: 'jumlah Komplain',
    data: complaint_done_values
  }],
  chart: {
    height: 250,
    type: 'area'
  },
  dataLabels: {
    enabled: false
  },
  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: [success, primary]
}
var chart3 = new ApexCharts(document.querySelector("#chart3"), options3);
chart3.render();

// CHART 4

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

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

var options4 = {
  series: [{
    name: 'Jumlah Klaim',
    data: claim_ditolak_values
  }, {
    name: 'jumlah Komplain',
    data: complaint_ditolak_values
  }],
  chart: {
    height: 250,
    type: 'area'
  },
  dataLabels: {
    enabled: false
  },
  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: [success, primary]
}
var chart4 = new ApexCharts(document.querySelector("#chart4"), options4);
chart4.render();

// BRANCH
var branch = []
var getbranch = JSON.parse('{!! $branch !!}');
getbranch.forEach(async (item) => {
  branch.push(item.name);
});

// CHART 6

// CLAIM
var claim_pelaporan_values = [];
var claim_pelaporan_year = JSON.parse('{!! $claim_pelaporan_year !!}');
getbranch.forEach(async (item) => {
  let val = 0
  await claim_pelaporan_year.forEach(value => {
    if(value.CABANG == item.name){
      val = value.TOTAL
    }
  });
  claim_pelaporan_values.push(val);
});

// COMPLAINT
var complaint_pelaporan_values = [];
var complaint_pelaporan_year = JSON.parse('{!! $complaint_pelaporan_year !!}');
getbranch.forEach(item => {
  let val = 0
  complaint_pelaporan_year.forEach(value => {
    if(value.CABANG == item.name){
      val = value.TOTAL
    }
  });
  complaint_pelaporan_values.push(val);
});

var options6 = {
  series: [{
    name: 'Klaim',
    data: claim_pelaporan_values
  }, {
    name: 'Komplain',
    data: complaint_pelaporan_values
  }],
  chart: {
    height: 250,
    type: 'bar'
  },
  dataLabels: {
    enabled: false
  },
  tooltip: {
    enabled: true,
    enabledOnSeries: undefined,
    y: {
      formatter: function(value, { series, seriesIndex, dataPointIndex, w }) {
        return value + ' Hari'
      }
    }
  },
  stroke: {
    curve: 'smooth'
  },
  xaxis: {
    categories: branch,
  },
  yaxis: {
    labels: {
      formatter: function(val, index) {
        return val.toFixed();
      }
    }
  },
  colors: [info, warning]
}
var chart6 = new ApexCharts(document.querySelector("#chart6"), options6);
chart6.render();

var claim_penanganan_values = [];
var claim_penanganan_year = JSON.parse('{!! $claim_penanganan_year !!}');
getbranch.forEach(async (item) => {
  let val = 0
  await claim_penanganan_year.forEach(value => {
    if(value.CABANG == item.name){
      val = value.TOTAL
    }
  });
  claim_penanganan_values.push(parseFloat(val));
});

var complaint_penanganan_values = [];
var complaint_penanganan_year = JSON.parse('{!! $complaint_penanganan_year !!}');
getbranch.forEach(async (item) => {
  let val = 0
  await complaint_penanganan_year.forEach(value => {
    if(value.CABANG == item.name){
      val = value.TOTAL
    }
  });
  complaint_penanganan_values.push(parseFloat(val));
});

// CHART 7
var options7 = {
  series: [{
    name: 'Klaim',
    data: claim_penanganan_values
  }, {
    name: 'Komplain',
    data: complaint_penanganan_values
  }],
  chart: {
    height: 250,
    type: 'bar'
  },
  dataLabels: {
    enabled: false
  },
  tooltip: {
    enabled: true,
    enabledOnSeries: undefined,
    y: {
      formatter: function(value, { series, seriesIndex, dataPointIndex, w }) {
        return value + ' Hari'
      }
    }
  },
  stroke: {
    curve: 'smooth'
  },
  xaxis: {
    categories: branch,
  },
  yaxis: {
    labels: {
      formatter: function(val, index) {
        return val;
      }
    }
  },
  colors: [danger, primary]
}
var chart7 = new ApexCharts(document.querySelector("#chart7"), options7);
chart7.render();
</script>
@endsection