@extends('layout.master')

@push('plugin-styles')
  <link href="{{ asset('assets/plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css') }}" rel="stylesheet" />
@endpush

@section('content')
<div class="d-flex justify-content-between align-items-center flex-wrap grid-margin">
  <div>
    <h4 class="mb-3 mb-md-0">Welcome to Dashboard {{$location}}</h4>
  </div>
  {{-- <div class="d-flex align-items-center flex-wrap text-nowrap">
    <div class="input-group date datepicker dashboard-date mr-2 mb-2 mb-md-0 d-md-none d-xl-flex" id="dashboardDate">
      <span class="input-group-addon bg-transparent"><i data-feather="calendar" class=" text-primary"></i></span>
      <input type="text" class="form-control">
    </div>
    <button type="button" class="btn btn-outline-info btn-icon-text mr-2 d-none d-md-block">
      <i class="btn-icon-prepend" data-feather="download"></i>
      Import
    </button>
    <button type="button" class="btn btn-outline-primary btn-icon-text mr-2 mb-2 mb-md-0">
      <i class="btn-icon-prepend" data-feather="printer"></i>
      Print
    </button>
    <button type="button" class="btn btn-primary btn-icon-text mb-2 mb-md-0">
      <i class="btn-icon-prepend" data-feather="download-cloud"></i>
      Download Report
    </button>
  </div> --}}
</div>
<div class="row">
  <div class="col-12 col-xl-12 stretch-card">
    <div class="row flex-grow">
      <div class="col-md-6 grid-margin stretch-card">
        <div class="card">
          <div class="card-body">
            <div class="d-flex justify-content-between align-items-baseline">
              <h6 class="card-title mb-0">Rata-Rata Donatur di Bulan ini</h6>
            </div>
            <br>
            <div class="row">
              <div class="col-6 col-md-12 col-xl-5">
                <h3 class="mb-2">{{noformat($ratauser)}}</h3>
              </div>
              <div class="col-6 col-md-12 col-xl-7">
                <div id="apexChart1" class="mt-md-3 mt-xl-0"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-6 grid-margin stretch-card">
        <div class="card">
          <div class="card-body">
            <div class="d-flex justify-content-between align-items-baseline">
              <h6 class="card-title mb-0">Rata-rata Jumlah Transaksi di Bulan ini</h6>
            </div>
            <br>
            <div class="row">
              <div class="col-6 col-md-12 col-xl-5">
                <h3 class="mb-2">{{noformat($ratatrx)}}</h3>
              </div>
              <div class="col-6 col-md-12 col-xl-7">
                <div id="apexChart2" class="mt-md-3 mt-xl-0"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-12 grid-margin stretch-card">
        <div class="card">
          <div class="card-body">
            <div class="d-flex justify-content-between align-items-baseline">
              <h6 class="card-title mb-0">Rata-rata total Nilai Transaksi di bulan ini</h6>
            </div>
            <br>
            <div class="row">
              <div class="col-6 col-md-12 col-xl-5">
                <h3 class="mb-2">RP. {{noformat($ratanilai)}}</h3>
              </div>
              <div class="col-6 col-md-12 col-xl-7">
                <div id="apexChart3" class="mt-md-3 mt-xl-0"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-12 col-xl-12 grid-margin stretch-card">
    <div class="card overflow-hidden">
      <div class="card-body">
        <div class="d-flex justify-content-between align-items-baseline mb-4 mb-md-3">
          <h6 class="card-title mb-0">Overview Nilai Transaksi All platform di bulan {{now()->isoFormat('MMMM')}}</h6>
        </div>
        <div class="row align-items-start mb-2">
          <div class="col-md-7">
            <p class="text-muted tx-13 mb-3 mb-md-0">Revenue is the income that a business has from its normal business activities, usually from the sale of goods and services to customers.</p>
          </div>
        </div>
        <div class="flot-wrapper">
          <div id="chartNilai"></div>
        </div>
      </div>
    </div>
  </div>
</div> <!-- row -->
<div class="row">
  <div class="col-12 col-xl-12 grid-margin stretch-card">
    <div class="card overflow-hidden">
      <div class="card-body">
        <div class="d-flex justify-content-between align-items-baseline mb-4 mb-md-3">
          <h6 class="card-title mb-0">Overview Nilai Transaksi All platform di bulan {{now()->subMonth()->isoFormat('MMMM')}}</h6>
        </div>
        <div class="row align-items-start mb-2">
          <div class="col-md-7">
            <p class="text-muted tx-13 mb-3 mb-md-0">Revenue is the income that a business has from its normal business activities, usually from the sale of goods and services to customers.</p>
          </div>
        </div>
        <div class="flot-wrapper">
          <div id="subchartNilai"></div>
        </div>
      </div>
    </div>
  </div>
</div> <!-- row -->
<div class="row">
  <div class="col-12 col-xl-12 grid-margin stretch-card">
    <div class="card overflow-hidden">
      <div class="card-body">
        <div class="d-flex justify-content-between align-items-baseline mb-4 mb-md-3">
          <h6 class="card-title mb-0">Sedekah Online Vs PPPA.ID</h6>
        </div>
        <div class="row align-items-start mb-2">
          <div class="col-md-7">
            <p class="text-muted tx-13 mb-3 mb-md-0">Revenue is the income that a business has from its normal business activities, usually from the sale of goods and services to customers.</p>
          </div>
          <div class="col-md-5 d-flex justify-content-md-end">
            <div class="btn-group mb-3 mb-md-0" role="group" aria-label="Basic example">
              <button type="button" id="td1" class="btn rvn btn-outline-primary">Today</button>
              <button type="button" id="wk1" class="btn rvn btn-primary">Week</button>
              <button type="button" id="mn1" class="btn rvn btn-outline-primary">Month</button>
            </div>
          </div>
        </div>
        <div class="flot-wrapper">
          <div id="apexLine1"></div>
        </div>
      </div>
    </div>
  </div>
</div> <!-- row -->

<div class="row">
  <div class="col-lg-11 col-xl-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-body">
        <h6 class="card-title">Perolehan Sedekah Online Vs PPPA.ID Minggu ini
        </h6>
        <div class="table-responsive">
            <table class="table table-bordered">
              <thead>
                <tr>
                  <th rowspan="2" style="vertical-align : middle;text-align:center;"><strong>Kategori Penghimpunan</strong></th>
                  <th colspan="2" style="vertical-align : middle;text-align:center;"><strong>Penghimpunan Sedekah Online (
                    @if ($perolehan['Total'][0]<$perolehan['Total'][1])
                    <span class="text-danger">{!! persenanBanding($perolehan['Total'][0],$perolehan['Total'][1]) !!}</span>
                    <span><i data-feather="arrow-down" class="icon-sm mb-1 text-danger" id="perolehan"></i></span>)      
                    @else
                    <span class="text-success">{!! persenanBanding($perolehan['Total'][0],$perolehan['Total'][1]) !!}</span>
                    <span><i data-feather="arrow-up" class="icon-sm mb-1 text-success" id="perolehan"></i></span>) 
                    @endif </strong></th>
                  <th colspan="2" style="vertical-align : middle;text-align:center;"><strong>Penghimpunan PPPA.ID (
                    @if ($perolehan['Total'][1]<$perolehan['Total'][0])
                    <span class="text-danger">{!! persenanBanding($perolehan['Total'][1],$perolehan['Total'][0]) !!}</span>
                    <span><i data-feather="arrow-down" class="icon-sm mb-1 text-danger" id="perolehan"></i></span>)      
                    @else
                    <span class="text-success">{!! persenanBanding($perolehan['Total'][1],$perolehan['Total'][0]) !!}</span>
                    <span><i data-feather="arrow-up" class="icon-sm mb-1 text-success" id="perolehan"></i></span>)
                    @endif</strong></th>
                </tr>
                <tr>
                  <th style="vertical-align : middle;text-align:center;"><strong>Jumlah Dana</strong></th>
                  <th style="vertical-align : middle;text-align:center;"><strong>%</strong></th>
                  <th style="vertical-align : middle;text-align:center;"><strong>Jumlah Dana</strong></th>
                  <th style="vertical-align : middle;text-align:center;"><strong>%</strong></th>
                </tr>

              </thead>
              <tbody>
                @foreach ($perolehan as $key => $item)    
                <tr>
                  @if ($key == 'Total')
                  <td><strong>{{$key}}</strong></td>
                  <td style="vertical-align : middle;text-align:center;"><strong>{{number_format($item[0])}}</strong></td>
                  <td style="vertical-align : middle;text-align:center;"><strong>{{number_format(($item[0]/$perolehan['Total'][0])*100,2)}}</strong></td>
                  <td style="vertical-align : middle;text-align:center;"><strong>{{number_format($item[1])}}</strong></td>
                  <td style="vertical-align : middle;text-align:center;"><strong>{!!persenan($item[1],$perolehan['Total'][1],false)!!}</strong></td>
                  @else
                  <td>{{$key}}</td>
                  <td style="vertical-align : middle;text-align:center;">{{number_format($item[0])}}</td>
                  <td style="vertical-align : middle;text-align:center;">{{number_format(($item[0]/$perolehan['Total'][0])*100,2)}}</td>
                  <td style="vertical-align : middle;text-align:center;">{{number_format($item[1])}}</td>
                  <td style="vertical-align : middle;text-align:center;">{!!persenan($item[1],$perolehan['Total'][1],false)!!}</td>
                  @endif
                </tr>
                @endforeach
              </tbody>
            </table>
        </div>
      </div>
    </div>
  </div>
  <div class="col-lg-11 col-xl-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-body">
        <div class="d-flex justify-content-between align-items-baseline mb-2">
          <h6 class="card-title mb-0">PEROLEHAN SedekahOnline VS pppa.id (dalam Juta Rupiah)</h6>
        </div>
        <div id="pr_srGraph1" class="mx-auto"></div>
      </div>
    </div>
  </div>
  <div class="col-lg-11 col-xl-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-body">
        <div class="d-flex justify-content-between align-items-baseline mb-2">
          <h6 class="card-title mb-0">Perbandingan donatur pppa.id {{$chartCompare['tahun_lalu']}} dengan {{$chartCompare['tahun_ini']}} (
            <span class="{{$chartCompare['data'][1]>$chartCompare['data'][0]?'text-success':'text-danger'}}">{!!persenanbanding($chartCompare['data'][1],$chartCompare['data'][0])!!}</span>
            <span><i data-feather="{{$chartCompare['data'][1]>$chartCompare['data'][0]?'arrow-up':'arrow-down'}}" class="icon-sm mb-1 {{$chartCompare['data'][1]>$chartCompare['data'][0]?'text-success':'text-danger'}}" id="perolehan"></i></span> )</h6>
          <button class="btn p-0" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="icon-lg text-muted pb-3px" data-feather="more-horizontal"></i>
          </button>
          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item d-flex align-items-center" href={{route('compare.table')}}><i data-feather="eye" class="icon-sm mr-2"></i> <span class="">View</span></a>
            <a class="dropdown-item d-flex align-items-center" href="{{route('dashboard.general.pppaid.download')}}"><i data-feather="download" class="icon-sm mr-2"></i> <span class="">Download</span></a>
          </div>
        </div>
        <div id="pr_irisan" class="mx-auto"></div>
      </div>
    </div>
  </div>
  <div class="col-lg-11 col-xl-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-body">
        <div class="d-flex justify-content-between align-items-baseline mb-2">
          <h6 class="card-title mb-0">Perbandingan donatur Layanan {{$chartCompare1['tahun_ini']}} dengan {{$chartCompare1['tahun_lalu']}} (
            <span class="{{$chartCompare1['data'][1]>$chartCompare1['data'][0]?'text-success':'text-danger'}}">{!!persenanbanding($chartCompare1['data'][1],$chartCompare1['data'][0])!!}</span>
            <span><i data-feather="{{$chartCompare1['data'][1]>$chartCompare1['data'][0]?'arrow-up':'arrow-down'}}" class="icon-sm mb-1 {{$chartCompare1['data'][1]>$chartCompare1['data'][0]?'text-success':'text-danger'}}" id="perolehan"></i></span> )</h6>
          <button class="btn p-0" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="icon-lg text-muted pb-3px" data-feather="more-horizontal"></i>
          </button>
          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item d-flex align-items-center" href={{route('compare.table.layanan')}}><i data-feather="eye" class="icon-sm mr-2"></i> <span class="">View</span></a>
            <a class="dropdown-item d-flex align-items-center" href="{{route('dashboard.general.layanan.download')}}"><i data-feather="download" class="icon-sm mr-2"></i> <span class="">Download</span></a>
          </div>
        </div>
        <div id="pr_irisan1" class="mx-auto"></div>
      </div>
    </div>
  </div>
  <div class="col-lg-11 col-xl-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-body">
        <div class="d-flex justify-content-between align-items-baseline mb-2">
          <h6 class="card-title mb-0">Perbandingan total transaksi  {{now()->subYear()->isoFormat('MMMM Y').' dan '.now()->isoFormat('MMMM Y')}}</h6>
          <button class="btn p-0" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="icon-lg text-muted pb-3px" data-feather="more-horizontal"></i>
          </button>
          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item d-flex align-items-center" href={{route('table.layanan30days')}}><i data-feather="eye" class="icon-sm mr-2"></i> <span class="">View</span></a>
          </div>
        </div>
        <div id="chart30Days" class="mx-auto"></div>
      </div>
    </div>
  </div>
  <div class="col-lg-11 col-xl-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-body">
        <div class="d-flex justify-content-between align-items-baseline mb-2">
          <h6 class="card-title mb-0">Perbandingan nilai transaksi {{now()->subYear()->isoFormat('MMMM Y').' dan '.now()->isoFormat('MMMM Y')}}</h6>
          <button class="btn p-0" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="icon-lg text-muted pb-3px" data-feather="more-horizontal"></i>
          </button>
          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item d-flex align-items-center" href={{route('table.layanan30daysnilai')}}><i data-feather="eye" class="icon-sm mr-2"></i> <span class="">View</span></a>
          </div>
        </div>
        <div id="chart30DaysNilai" class="mx-auto"></div>
      </div>
    </div>
  </div>
</div> <!-- row -->
</div> <!-- row -->
@endsection

@push('plugin-scripts')
  <script src="{{ asset('assets/plugins/chartjs/Chart.min.js') }}"></script>
  <script src="{{ asset('assets/plugins/jquery.flot/jquery.flot.js') }}"></script>
  <script src="{{ asset('assets/plugins/jquery.flot/jquery.flot.resize.js') }}"></script>
  <script src="{{ asset('assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js') }}"></script>
  <script src="{{ asset('assets/plugins/apexcharts/apexcharts.min.js') }}"></script>
  <script src="{{ asset('assets/plugins/progressbar-js/progressbar.min.js') }}"></script>
@endpush

@push('custom-scripts')
  <script>
    $(function() {
  'use strict'

  var gridLineColor = 'rgba(77, 138, 240, .1)';

  var colors = {
    primary:         "#727cf5",
    secondary:       "#7987a1",
    success:         "#42b72a",
    info:            "#68afff",
    warning:         "#fbbc06",
    danger:          "#ff3366",
    light:           "#ececec",
    dark:            "#282f3a",
    muted:           "#686868"
  }

  // Dashbaord date start
  if($('#dashboardDate').length) {
    var date = new Date();
    var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
    $('#dashboardDate').datepicker({
      format: "dd-MM-yyyy",
      todayHighlight: true,
      autoclose: true
    });
    $('#dashboardDate').datepicker('setDate', today);
  }
  // Dashbaord date end
// Apex Line chart start
var options1 = {
    chart: {
      height: 300,
      type: "line",
      parentHeightOffset: 0
    },
    colors: ["#f77eb9", "#7ee5e5","#4d8af0"],
    grid: {
      borderColor: "rgba(77, 138, 240, .1)",
      padding: {
        bottom: -5
      }
    },
    series: [],
    noData: {
    text: 'Loading...'
  },
    xaxis: {
      type: "category",
      categories: []
    },
    markers: {
      size: 0
    },
    stroke: {
      width: 3,
      curve: "smooth",
      lineCap: "round"
    },
    legend: {
      show: true,
      position: "top",
      horizontalAlign: 'left',
      containerMargin: {
        top: 30
      }
    },
    responsive: [
      {
        breakpoint: 500,
        options: {
          legend: {
            fontSize: "11px"
          }
        }
      }
    ]
  };
  var apexLineChart1 = new ApexCharts(document.querySelector("#apexLine1"), options1);
  apexLineChart1.render();
  // Apex Line chart start
  $.ajax({
        url: "{{route('chartWeekly')}}",
        async: false,
        dataType: "json",
        success: function(obj) {
          apexLineChart1.updateOptions({
            series: [
      {
        name: "SedekahOnline",
        data: obj.so,
        formatter: (value) => { return "$ " + value }
      },
      {
        name: "pppa.id",
        data: obj.pppa
      }
    ],
    xaxis: {
      type: "category",
      categories: obj.datetime
    },tooltip: {
        style: {
            fontSize: '12px'
        },
        y: {
            formatter: function (val) {
                return 'Rp. ' + val.toLocaleString('en-US') 
            }
        }
    },});
  }});
  $('#mn1').on('click', function() {
  $.ajax({
        url: "{{route('chartMontly')}}",
        async: false,
        dataType: "json",
        success: function(obj) {
          apexLineChart1.updateOptions({
            chart: {
      height: 300,
      type: "line",
      parentHeightOffset: 0
    },
            series: [
      {
        name: "SedekahOnline",
        data: obj.so
      },
      {
        name: "pppa.id",
        data: obj.pppa
      }
    ],
    xaxis: {
      type: "category",
      categories: obj.datetime
    }});
  }});
});
$('#td1').on('click', function() {
  $.ajax({
        url: "{{route('chartDaily')}}",
        async: false,
        dataType: "json",
        success: function(obj) {
          apexLineChart1.updateOptions({
            chart: {
      height: 300,
      type: "bar",
      parentHeightOffset: 0
    },
            series: [
      {
        name: "SedekahOnline",
        data: obj.so
      },
      {
        name: "pppa.id",
        data: obj.pppa
      }
    ],
    xaxis: {
      type: "category",
      categories: obj.datetime
    }});
  }});
});
$('#wk1').on('click', function() {
  $.ajax({
        url: "{{route('chartWeekly')}}",
        async: false,
        dataType: "json",
        success: function(obj) {
          apexLineChart1.updateOptions({
            chart: {
      height: 300,
      type: "line",
      parentHeightOffset: 0
    },
            series: [
      {
        name: "SedekahOnline",
        data: obj.so
      },
      {
        name: "pppa.id",
        data: obj.pppa
      },
    ],
    xaxis: {
      type: "category",
      categories: obj.datetime
    }});
  }});
});
  // Apex Line chart end
});
$('.rvn').on('click', function() {
    $('.rvn').removeClass('btn-primary');
    $('.rvn').addClass('btn-outline-primary');
    $(this).addClass('btn-primary');
});
$( document ).ready(function() {
  // Apex Bar chart start
  var optionsbar = {
    legend : {
      position : "top"
    },
    chart: {
      type: 'bar',
      height: 400,
      parentHeightOffset: 0
    },
    colors: ["#05fc47","#fc1a05"],    
    grid: {
      borderColor: "rgba(77, 138, 240, .1)",
    },
    series: [{
      name: 'SedekahOnline',
      data: [
        @foreach ($perolehan as $key => $item)
        @if ($key == 'Total')
        @break
        @else
            '{{number_format($item[0]/1000000,2)}}',
        @endif
        @endforeach
      ]
    },
    {
      name: 'pppa.id',
      data: [
        @foreach ($perolehan as $key => $item)
        @if ($key == 'Total')
        @break
        @else
            '{{number_format($item[1]/1000000,2)}}',
        @endif
        @endforeach
      ]
    }],
    xaxis: {
      type: 'category',
      categories: ['Sedekah', 'Zakat', 'Wakaf']
    },
    plotOptions: {
  bar: {
    dataLabels: {
      position: 'top'
    }
  },
  },
  dataLabels: {
    style: {
      colors: ['#333']
    },
    offsetY: 20, // play with this value
  },
}
  
  var perolehanBarChart = new ApexCharts(document.querySelector("#pr_srGraph1"), optionsbar);
  
  perolehanBarChart.render();
  // Apex Bar chart end
  // Apex Bar chart start
  var optionsbar1 = {
    legend : {
      position : "top"
    },
    chart: {
      type: 'bar',
      height: 400,
      parentHeightOffset: 0
    },
    colors: ["#05fc47","#fc1a05"],    
    grid: {
      borderColor: "rgba(77, 138, 240, .1)",
    },
    series: [{
      name: 'tahun kemarin',
      data: [{{$chartCompare['data'][0]}}]
    },
    {
      name: 'tahun ini',
      data: [{{$chartCompare['data'][1]}}]
    },
    {
      name: 'tidak repeat donasi',
      data: [{{$chartCompare['data'][2]}}]
    },
    {
      name: 'repeat donasi',
      data: [{{$chartCompare['data'][3]}}]
    }],
    xaxis: {
      type: 'category',
      categories: ['{{$chartCompare['month']}}']
    },
    plotOptions: {
  bar: {
    dataLabels: {
      position: 'top'
    }
  },
  },
  dataLabels: {
    style: {
      colors: ['#333']
    },
    offsetY: 20, // play with this value
  },
}
  
  var perolehanBarChart1 = new ApexCharts(document.querySelector("#pr_irisan"), optionsbar1);
  
  perolehanBarChart1.render();
  // Apex Bar chart end
  // Apex Bar chart start
  var optionsbar2 = {
    legend : {
      position : "top"
    },
    chart: {
      type: 'bar',
      height: 400,
      parentHeightOffset: 0
    },
    colors: ["#05fc47","#fc1a05"],    
    grid: {
      borderColor: "rgba(77, 138, 240, .1)",
    },
    series: [{
      name: 'tahun kemarin',
      data: [{{$chartCompare1['data'][0]}}]
    },
    {
      name: 'tahun ini',
      data: [{{$chartCompare1['data'][1]}}]
    },
    {
      name: 'tidak repeat donasi',
      data: [{{$chartCompare1['data'][2]}}]
    },
    {
      name: 'repeat donasi',
      data: [{{$chartCompare1['data'][3]}}]
    }],
    xaxis: {
      type: 'category',
      categories: ['{{$chartCompare1['month']}}']
    },
    plotOptions: {
  bar: {
    dataLabels: {
      position: 'top'
    }
  },
  },
  dataLabels: {
    style: {
      colors: ['#333']
    },
    offsetY: 20, // play with this value
  },
}
  
  var perolehanBarChart2 = new ApexCharts(document.querySelector("#pr_irisan1"), optionsbar2);
  
  perolehanBarChart2.render();
  // Apex Bar chart end
  // Apex Bar chart start
  var optionsbar3 = {
    legend : {
      position : "top"
    },
    chart: {
      type: 'bar',
      height: 400,
      parentHeightOffset: 0
    },
    colors: ["#05fc47","#fc1a05"],    
    grid: {
      borderColor: "rgba(77, 138, 240, .1)",
    },
    series: [{
      name: 'pppa.id',
      data: [{{$nilaiChart[0]}}]
    },
    {
      name: 'sedekahOnline',
      data: [{{$nilaiChart[1]}}]
    },
    {
      name: 'Layanan',
      data: [{{$nilaiChart[2]}}]
    },
    {
      name: 'paytren',
      data: [{{$nilaiChart[3]}}]
    }],
    xaxis: {
      type: 'category',
      categories: ['{{$chartCompare1['month']}}']
    },
    tooltip: {
        style: {
            fontSize: '12px'
        },
        y: {
            formatter: function (val) {
                return 'Rp. ' + val.toLocaleString('en-US') 
            }
        }
    },
    plotOptions: {
  bar: {
    dataLabels: {
      position: 'top',
    }
  },
  },
  dataLabels: {
    style: {
      colors: ['#333']
    },
    offsetY: 20, // play with this value
    formatter: function (val) {
      if($(window).width() < 800) {
        return (val/1000000).toFixed(1) + ' Juta'
      }else{
        return 'Rp. ' + val.toLocaleString('en-US') 
      } 
    }
  },
}
  
  var perolehanBarChart3 = new ApexCharts(document.querySelector("#chartNilai"), optionsbar3);
  
  perolehanBarChart3.render();
  // Apex Bar chart end
  // Apex Bar chart start
  var optionsbar4 = {
    legend : {
      position : "top"
    },
    chart: {
      type: 'bar',
      height: 400,
      parentHeightOffset: 0
    },
    colors: ["#05fc47","#fc1a05"],    
    grid: {
      borderColor: "rgba(77, 138, 240, .1)",
    },
    series: [{
      name: 'pppa.id',
      data: [{{$subnilaiChart[0]}}]
    },
    {
      name: 'sedekahOnline',
      data: [{{$subnilaiChart[1]}}]
    },
    {
      name: 'Layanan',
      data: [{{$subnilaiChart[2]}}]
    },
    {
      name: 'paytren',
      data: [{{$subnilaiChart[3]}}]
    }],
    xaxis: {
      type: 'category',
      categories: ['{{now()->subMonth()->isoFormat("MMMM")}}']
    },
    tooltip: {
        style: {
            fontSize: '12px'
        },
        y: {
            formatter: function (val) {
                return 'Rp. ' + val.toLocaleString('en-US') 
            }
        }
    },
    plotOptions: {
  bar: {
    dataLabels: {
      position: 'top',
    }
  },
  },
  dataLabels: {
    style: {
      colors: ['#333']
    },
    offsetY: 20, // play with this value
    formatter: function (val) {
      if($(window).width() < 800) {
        if(val/1000000 > 1){
          return (val/1000000).toFixed(1) + ' Juta'
        }else{
          return (val/100000).toFixed(1) + ' Ribu'
        }
      }else{
        return 'Rp. ' + val.toLocaleString('en-US') 
      }  
    }
  },
}
  
  var perolehanBarChart4 = new ApexCharts(document.querySelector("#subchartNilai"), optionsbar4);
  
  perolehanBarChart4.render();
  // Apex Bar chart end
  // Apex Bar chart start
  var optionsbar5 = {
    
    legend : {
      position : "top"
    },
    chart: {
      type: 'bar',
      height: 400,
      parentHeightOffset: 0
    },
    colors: ["#05fc47","#fc1a05"],    
    grid: {
      borderColor: "rgba(77, 138, 240, .1)",
    },
    series: [{
      name: 'tahun lalu',
      data: {!! json_encode($chart30Days['tahun_lalu']) !!}
    },
    {
      name: 'tahun ini',
      data: {!! json_encode($chart30Days['tahun_ini']) !!}
    }],
    xaxis: {
      type: 'category',
      categories: {!! json_encode($chart30Days['label']) !!}
    },
    tooltip: {
        style: {
            fontSize: '12px'
        },
    },
    plotOptions: {
  bar: {
    dataLabels: {
      position: 'top',
    }
  },
  },
  dataLabels: {
    style: {
      colors: ['#333']
    },
    offsetY: 20, // play with this value
  },
}
  
  var perolehanBarChart5 = new ApexCharts(document.querySelector("#chart30Days"), optionsbar5);
  
  perolehanBarChart5.render();
  // Apex Bar chart end
  // Apex Bar chart start
  var optionsbar6 = {
    
    legend : {
      position : "top"
    },
    chart: {
      type: 'bar',
      height: 400,
      parentHeightOffset: 0
    },
    colors: ["#05fc47","#fc1a05"],    
    grid: {
      borderColor: "rgba(77, 138, 240, .1)",
    },
    series: [{
      name: 'tahun lalu',
      data: {!! json_encode($chart30DaysNilai['tahun_lalu']) !!}
    },
    {
      name: 'tahun ini',
      data: {!! json_encode($chart30DaysNilai['tahun_ini']) !!}
    }],
    xaxis: {
      type: 'category',
      categories: {!! json_encode($chart30DaysNilai['label']) !!}
    },
    tooltip: {
        style: {
            fontSize: '12px'
        }, 
        y: {
            formatter: function (val) {
                return 'Rp. ' + val.toLocaleString('en-US') 
            }
        }
    },
    plotOptions: {
  bar: {
    dataLabels: {
      position: 'top',
    }
  },
  },
  dataLabels: {
    style: {
      colors: ['#333']
    },
    offsetY: 20, // play with this value
    formatter: function (val) {
      return (val/1000000).toFixed(0)
    }
  },
}
  
  var perolehanBarChart6 = new ApexCharts(document.querySelector("#chart30DaysNilai"), optionsbar6);
  
  perolehanBarChart6.render();
  // Apex Bar chart end
});
  </script>
  <script src="{{ asset('assets/js/datepicker.js') }}"></script>
@endpush