@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">Donatur</h6>
              <div class="dropdown mb-2">
                <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('so.userindex')}}><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('so.download.donatur')}}"><i data-feather="download" class="icon-sm mr-2"></i> <span class="">Download</span></a>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-6 col-md-12 col-xl-5">
                <h3 class="mb-2">{{number_format($user)}}</h3>
                <div class="d-flex align-items-baseline">
                  <p class="text-success" id="rate_user">
                    <span id="rate_user_value"></span>
                    <i data-feather="arrow-up" class="icon-sm mb-1" id="icon_usr"></i>
                  </p>
                </div>
              </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">Jumlah Transaksi</h6>
              <div class="dropdown mb-2">
                <button class="btn p-0" type="button" id="dropdownMenuButton1" 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="dropdownMenuButton1">
                  <a class="dropdown-item d-flex align-items-center" href="{{route('so.trxindex')}}"><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('so.trxExcel')}}"><i data-feather="download" class="icon-sm mr-2"></i> <span class="">Download</span></a>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-6 col-md-12 col-xl-5">
                <h3 class="mb-2">{{$total_transaksi}}</h3>
                <div class="d-flex align-items-baseline">
                  <p id="rate_trx" class="text-success">
                    <span id="rate_trx_value"></span>
                    <i data-feather="arrow-up" class="icon-sm mb-1" id="icon_trx"></i>
                  </p>
                </div>
              </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">Nilai Transaksi</h6>
              <div class="dropdown mb-2">
                <button class="btn p-0" type="button" id="dropdownMenuButton2" 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="dropdownMenuButton2">
                  <a class="dropdown-item d-flex align-items-center" href="{{route('so.trxindex')}}"><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('so.trxExcel')}}"><i data-feather="download" class="icon-sm mr-2"></i> <span class="">Download</span></a>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-6 col-md-12 col-xl-5">
                <h3 class="mb-2">RP. {{$total_donasi}}</h3>
                <div class="d-flex align-items-baseline">
                  <p id="rate_nmn" class="text-success">
                    <span id="rate_nmn_value"></span>
                    <i data-feather="arrow-up" class="icon-sm mb-1" id="icon_nmn"></i>
                  </p>
                </div>
              </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> <!-- 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">Revenue</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="td" class="btn rvn btn-outline-primary">Today</button>
              <button type="button" id="wk" class="btn rvn btn-primary">Week</button>
              <button type="button" id="mn" class="btn rvn btn-outline-primary">Month</button>
            </div>
          </div>
        </div>
        <div class="flot-wrapper">
          <div id="apexLine"></div>
        </div>
      </div>
    </div>
  </div>
  <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">Success Vs Requsted</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 Minggu ini Vs Minggu Lalu (
          @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
        </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 Minggu Ini</strong></th>
                  <th colspan="2" style="vertical-align : middle;text-align:center;"><strong>Penghimpunan Minggu Lalu</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 MINGGU INI VS MINGGU LALU (dalam Juta Rupiah)</h6>
        </div>
        <div id="pr_srGraph1" class="mx-auto"></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">
        <div class="d-flex justify-content-between align-items-baseline mb-2">
          <h6 class="card-title mb-0">Persentasi Donasi By Nominal</h6>
        </div>
        <div id="apexPie" class="mx-auto"></div>
      </div>
    </div>
  </div>
  <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">Persentasi Success Vs Requsted</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-12 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="pr_td" class="btn rvn btn-outline-primary">Today</button>
              <button type="button" id="pr_wk" class="btn rvn btn-primary">Week</button>
              <button type="button" id="pr_mn" class="btn rvn btn-outline-primary">Month</button>
            </div>
          </div>
        </div>
        <div class="flot-wrapper">
          <div id="pr_srGraph"></div>
        </div>
      </div>
    </div>
  </div>
</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 options = {
    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 apexLineChart = new ApexCharts(document.querySelector("#apexLine"), options);
  apexLineChart.render();
  // Apex Line chart start
  $.ajax({
        url: "{{route('so.chartwk')}}",
        async: false,
        dataType: "json",
        success: function(obj) {
          apexLineChart.updateOptions({
            series: [
      {
        name: "Sedekah",
        data: obj.sedekah,
        formatter: (value) => { return "$ " + value }
      },
      {
        name: "Zakat",
        data: obj.zakat
      },
      {
        name:
          "Wakaf",
        data: obj.wakaf
      }
    ],
    xaxis: {
      type: "category",
      categories: obj.datetime
    },tooltip: {
        style: {
            fontSize: '12px'
        },
        y: {
            formatter: function (val) {
                return 'Rp. ' + val.toLocaleString('en-US') 
            }
        }
    },});
  }});
  $('#mn').on('click', function() {
  $.ajax({
        url: "{{route('so.chartmn')}}",
        async: false,
        dataType: "json",
        success: function(obj) {
          apexLineChart.updateOptions({
            chart: {
      height: 300,
      type: "line",
      parentHeightOffset: 0
    },
            series: [
      {
        name: "Sedekah",
        data: obj.sedekah
      },
      {
        name: "Zakat",
        data: obj.zakat
      },
      {
        name:
          "Wakaf",
        data: obj.wakaf
      }
    ],
    xaxis: {
      type: "category",
      categories: obj.datetime
    }});
  }});
});
$('#td').on('click', function() {
  $.ajax({
        url: "{{route('so.charttd')}}",
        async: false,
        dataType: "json",
        success: function(obj) {
          apexLineChart.updateOptions({
            chart: {
      height: 300,
      type: "bar",
      parentHeightOffset: 0
    },
            series: [
      {
        name: "Sedekah",
        data: obj.sedekah
      },
      {
        name: "Zakat",
        data: obj.zakat
      },
      {
        name:
          "Wakaf",
        data: obj.wakaf
      }
    ],
    xaxis: {
      type: "category",
      categories: obj.datetime
    }});
  }});
});
$('#wk').on('click', function() {
  $.ajax({
        url: "{{route('so.chartwk')}}",
        async: false,
        dataType: "json",
        success: function(obj) {
          apexLineChart.updateOptions({
            chart: {
      height: 300,
      type: "line",
      parentHeightOffset: 0
    },
            series: [
      {
        name: "Sedekah",
        data: obj.sedekah
      },
      {
        name: "Zakat",
        data: obj.zakat
      },
      {
        name:
          "Wakaf",
        data: obj.wakaf
      }
    ],
    xaxis: {
      type: "category",
      categories: obj.datetime
    }});
  }});
});
  // Apex Line chart 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('so.chartwkrs')}}",
        async: false,
        dataType: "json",
        success: function(obj) {
          apexLineChart1.updateOptions({
            series: [
      {
        name: "Success",
        data: obj.success,
        formatter: (value) => { return "$ " + value }
      },
      {
        name: "Requested",
        data: obj.requested
      }
    ],
    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('so.charnmnrs')}}",
        async: false,
        dataType: "json",
        success: function(obj) {
          apexLineChart1.updateOptions({
            chart: {
      height: 300,
      type: "line",
      parentHeightOffset: 0
    },
            series: [
      {
        name: "Success",
        data: obj.success
      },
      {
        name: "Requested",
        data: obj.requested
      }
    ],
    xaxis: {
      type: "category",
      categories: obj.datetime
    }});
  }});
});
$('#td1').on('click', function() {
  $.ajax({
        url: "{{route('so.charttdrs')}}",
        async: false,
        dataType: "json",
        success: function(obj) {
          apexLineChart1.updateOptions({
            chart: {
      height: 300,
      type: "bar",
      parentHeightOffset: 0
    },
            series: [
      {
        name: "Success",
        data: obj.success
      },
      {
        name: "Requested",
        data: obj.requested
      }
    ],
    xaxis: {
      type: "category",
      categories: obj.datetime
    }});
  }});
});
$('#wk1').on('click', function() {
  $.ajax({
        url: "{{route('so.chartwkrs')}}",
        async: false,
        dataType: "json",
        success: function(obj) {
          apexLineChart1.updateOptions({
            chart: {
      height: 300,
      type: "line",
      parentHeightOffset: 0
    },
            series: [
      {
        name: "Success",
        data: obj.success
      },
      {
        name: "Requested",
        data: obj.requested
      },
    ],
    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 chart1 start
   if($('#apexChart1').length) {
    var options1 = {
      chart: {
        type: "line",
        height: 60,
        sparkline: {
          enabled: !0
        }
      },
      series: [],
      stroke: {
        width: 2,
        curve: "smooth"
      },
      markers: {
        size: 0
      },
      colors: ["#727cf5"],
      tooltip: {
        fixed: {
          enabled: !1
        },
        x: {
          show: !1
        },
        y: {
          title: {
            formatter: function(e) {
              return ""
            }
          }
        },
        marker: {
          show: !1
        }
      }
    };
  }
  var apexNewUsr = new ApexCharts(document.querySelector("#apexChart1"),options1);
  apexNewUsr.render();
  // Apex chart1 end
  $.ajax({
        url: "{{route('so.chartUsr')}}" + "?user={{$user}}",
        async: false,
        dataType: "json",
        success: function(obj) {
          apexNewUsr.updateOptions({
            chart: {
        type: "line",
        height: 60,
        sparkline: {
          enabled: !0
        }
      },
      series: [{
              data: obj.nw
            }]
          });
      var powerOn = $('#icon_usr');
      if(obj.rt < 0){
      $('#rate_user_value').text(obj.rt + ' %');
      $("#rate_user").attr('class', '');
      $('#rate_user').addClass('text-danger');
      powerOn.replaceWith( feather.icons['arrow-down'].toSvg({class: 'icon-sm mb-1'}));  
      }else{
      $('#rate_user_value').text('+' + obj.rt + ' %');
      powerOn.replaceWith( feather.icons['arrow-up'].toSvg({class: 'icon-sm mb-1'}));  
      }
  }});
  // Apex chart2 start
  if($('#apexChart2').length) {
    var options2 = {
      chart: {
        type: "line",
        height: 60,
        sparkline: {
          enabled: !0
        }
      },
      series: [],
      stroke: {
        width: 2,
        curve: "smooth"
      },
      markers: {
        size: 0
      },
      colors: ["#727cf5"],
      tooltip: {
        fixed: {
          enabled: !1
        },
        x: {
          show: !1
        },
        y: {
          title: {
            formatter: function(e) {
              return ""
            }
          }
        },
        marker: {
          show: !1
        }
      }
    };
  }
  var apexTrxChart = new ApexCharts(document.querySelector("#apexChart2"),options2);
  apexTrxChart.render();
  // Apex chart2 end
  $.ajax({
        url: "{{route('so.chartrx')}}",
        async: false,
        dataType: "json",
        success: function(obj) {
          apexTrxChart.updateOptions({
            chart: {
        type: "line",
        height: 60,
        sparkline: {
          enabled: !0
        }
      },
      series: [{
              data: obj.data
            }]
          });
      var icontrx = $('#icon_trx');
      if(obj.rate < 0){
      $('#rate_trx_value').text(obj.rate + ' %');
      $("#rate_trx").attr('class', '');
      $('#rate_trx').addClass('text-danger');
      icontrx.replaceWith( feather.icons['arrow-down'].toSvg({class: 'icon-sm mb-1'}));  
      }else{
      $('#rate_trx_value').text('+' + obj.rate + ' %');
      icontrx.replaceWith( feather.icons['arrow-up'].toSvg({class: 'icon-sm mb-1'}));  
      }
  }});
  // Apex chart3 start
  if($('#apexChart3').length) {
    var options3 = {
      chart: {
        type: "line",
        height: 60,
        sparkline: {
          enabled: !0
        }
      },
      series: [],
      stroke: {
        width: 2,
        curve: "smooth"
      },
      markers: {
        size: 0
      },
      colors: ["#727cf5"],
      tooltip: {
        fixed: {
          enabled: !1
        },
        x: {
          show: !1
        },
        y: {
          title: {
            formatter: function(e) {
              return ""
            }
          }
        },
        marker: {
          show: !1
        }
      }
    };
    var apexNmnChart = new ApexCharts(document.querySelector("#apexChart3"),options3);
    apexNmnChart.render();
  }
  // Apex chart3 end
  $.ajax({
        url: "{{route('so.charnmn')}}",
        async: false,
        dataType: "json",
        success: function(obj) {
          apexNmnChart.updateOptions({
            chart: {
        type: "line",
        height: 60,
        sparkline: {
          enabled: !0
        }
      },
      series: [{
              data: obj.data
            }],tooltip: {
        style: {
            fontSize: '12px'
        },
        y: {
            formatter: function (val) {
                return 'Rp. ' + val.toLocaleString('en-US') 
            }
        }
    }
          });
      var iconnmn = $('#icon_nmn');   
      if(obj.rate < 0){
      $('#rate_nmn_value').text(obj.rate + ' %');
      $("#rate_nmn").attr('class', '');
      $('#rate_nmn').addClass('text-danger');
      iconnmn.replaceWith( feather.icons['arrow-down'].toSvg({class: 'icon-sm mb-1'}));     
      }else{
      $('#rate_nmn_value').text('+' + obj.rate + ' %');
      iconnmn.replaceWith( feather.icons['arrow-up'].toSvg({class: 'icon-sm mb-1'}));     
      }
  }});
    // Apex Pie chart end
  var options = {
    chart: {
      height: 400,
      type: "pie"
    },
    colors: ["#00fff7", "#f700ff","#006aff","#ff007b","#11ff00"],
    legend: {
      position: 'top',
      horizontalAlign: 'center'
    },
    stroke: {
      colors: ['rgba(0,0,0,0)']
    },
    labels: ['0-1.000', '1.001-10.000', '10.001-50.000', '50.001-100.000', '>100.000'],
    dataLabels: {
      enabled: true
    },
    series: []
  };
  var chartpie = new ApexCharts(document.querySelector("#apexPie"), options);
  chartpie.render();  
  // Apex Pie chart end
  $.ajax({
        url: "{{route('so.chartpie')}}",
        async: false,
        dataType: "json",
        success: function(obj) {
          chartpie.updateOptions({
            series: obj,
  });
  }});
    // Apex Pie chart end
  var options1 = {
    chart: {
      height: 400,
      type: "pie"
    },
    colors: ["#00f539", "#f50010"],
    legend: {
      position: 'top',
      horizontalAlign: 'center'
    },
    stroke: {
      colors: ['rgba(0,0,0,0)']
    },
    labels: ['Success', 'Requested'],
    dataLabels: {
      enabled: true
    },
    series: []
  };
  var chartpie1 = new ApexCharts(document.querySelector("#pr_srGraph"), options1);
  chartpie1.render();  
  // Apex Pie chart end
  $.ajax({
        url: "{{route('so.pr_srGraph')}}",
        async: false,
        dataType: "json",
        success: function(obj) {
          chartpie1.updateOptions({
            series: obj,
  });
  }});

  // 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: 'Minggu ini',
      data: [
        @foreach ($perolehan as $key => $item)
        @if ($key == 'Total')
        @break
        @else
            '{{number_format($item[0]/1000000,2)}}',
        @endif
        @endforeach
      ]
    },
    {
      name: 'Minggu lalu',
      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

  $('#pr_wk').on('click', function() {
    $.ajax({
        url: "{{route('so.pr_srGraph')}}",
        async: false,
        dataType: "json",
        success: function(obj) {
          chartpie1.updateOptions({
            series: obj,
        });
      }});
  });
  $('#pr_td').on('click', function() {
    $.ajax({
        url: "{{route('so.pr_srGraph')}}" + "?select=day",
        async: false,
        dataType: "json",
        success: function(obj) {
          chartpie1.updateOptions({
            series: obj,
        });
      }});
  });
  $('#pr_mn').on('click', function() {
    $.ajax({
        url: "{{route('so.pr_srGraph')}}" + "?select=month",
        async: false,
        dataType: "json",
        success: function(obj) {
          chartpie1.updateOptions({
            series: obj,
        });
      }});
  });
});
  </script>
  <script src="{{ asset('assets/js/datepicker.js') }}"></script>
@endpush