@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="javascript:void(0)"><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="javascript:void(0)"><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="javascript:void(0)"><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="javascript:void(0)"><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="javascript:void(0)"><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="javascript:void(0)"><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> <!-- 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 Bulan ini</h6>
        <div class="table-responsive">
            <table class="table">
              <thead>
                <tr>
                  <th>#</th>
                  <th>Nama Cabang</th>
                  <th>Sedekah</th>
                  <th>Zakat</th>
                  <th>Wakaf</th>
                  <th>Total Perolehan</th>
                  <th>Target</th>
                  <th>Peresentasi Target</th>
                </tr>
              </thead>
              <tbody>
                @foreach ($cabangs as $key => $item)   
                <tr>
                  <th>{{++$key}}</th>
                  <td>{{$item->cabang}}</td>
                  <td>{{'Rp. '.number_format($sedekah[$item->id_cabang]??0)}}</td>
                  <td>{{'Rp. '.number_format($zakat[$item->id_cabang]??0)}}</td>
                  <td>{{'Rp. '.number_format($wakaf[$item->id_cabang]??0)}}</td>
                  <td>{{'Rp. '.number_format($total[$item->id_cabang]??0)}}</td>
                  <td>{{'Rp. '.number_format($target[$item->id_cabang]??0)}}</td>
                  @if (!isset($total[$item->id_cabang]) || !isset($target[$item->id_cabang]))       
                  <td class="text-danger">0 %</td>
                  @else
                  <td class="{{$total[$item->id_cabang]-$target[$item->id_cabang] < 0 ? "text-danger" : "text-success"}}">{{(float)number_format(($total[$item->id_cabang]/$target[$item->id_cabang])*100,2).' %'}}</td>                    
                  @endif
                </tr>
                @endforeach
                <tr>
                  <td colspan="2" class="text-center font-weight-bold">Total</td>
                  <td class="font-weight-bold">{{'Rp. '.number_format($sedekah[13]??0)}}</td>
                  <td class="font-weight-bold">{{'Rp. '.number_format($zakat[13]??0)}}</td>
                  <td class="font-weight-bold">{{'Rp. '.number_format($wakaf[13]??0)}}</td>
                  <td class="font-weight-bold">{{'Rp. '.number_format($total[13]??0)}}</td>
                  <td class="font-weight-bold">{{'Rp. '.number_format($target[13]??0)}}</td>
                  @if (empty($target[13]))  
                  <td class="{{$total[13]-$target[13] < 0 ? "text-danger" : "text-success"}}">{{'0 %'}}</td>
                  @else        
                  <td class="{{$total[13]-$target[13] < 0 ? "text-danger" : "text-success"}}">{{(float)number_format(($total[13]/$target[13])*100,2).' %'}}</td>
                  @endif  
                </tr>
              </tbody>
            </table>
        </div>
      </div>
  </div>
</div>
</div>

<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> <!-- 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 Nilai Donasi By Kategori</h6>
        </div>
        <div id="chartBykategori1" 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 Jumlah Transaksi Donasi By Kategori</h6>
        </div>
        <div id="chartBykategori2" class="mx-auto"></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('layanan.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('layanan.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('layanan.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('layanan.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

});
$('.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('layanan.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('layanan.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('layanan.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
    // Apex Pie chart end
  var options1 = {
    chart: {
      height: 400,
      type: "pie"
    },
    colors: ["#00fff7", "#f700ff","#006aff","#ff007b","#11ff00"],
    legend: {
      position: 'top',
      horizontalAlign: 'center'
    },
    stroke: {
      colors: ['rgba(0,0,0,0)']
    },
    labels: ['rekening koran', 'non-tunai(rekening)', 'tunai'],
    dataLabels: {
      enabled: true,
      formatter: function(value, { seriesIndex, dataPointIndex, w }) {
      return [(w.config.series[seriesIndex]/1000000000).toLocaleString('en-US') + " M", value.toFixed(2) + '%'];
      }
    },
    series: {!! json_encode($sumChart) !!},
    tooltip: {
        style: {
            fontSize: '12px'
        },
        y: {
            formatter: function (val) {
                return 'Rp. ' + val.toLocaleString('en-US') 
            }
        }
    },
  };
  var chartpie1 = new ApexCharts(document.querySelector("#chartBykategori1"), options1);
  chartpie1.render();  
  // Apex Pie chart end
    // Apex Pie chart end
  var options2 = {
    chart: {
      height: 400,
      type: "pie"
    },
    colors: ["#00fff7", "#f700ff","#006aff","#ff007b","#11ff00"],
    legend: {
      position: 'top',
      horizontalAlign: 'center'
    },
    stroke: {
      colors: ['rgba(0,0,0,0)']
    },
    labels: ['rekening koran', 'non-tunai(rekening)', 'tunai'],
    dataLabels: {
      enabled: true,
      formatter: function(value, { seriesIndex, dataPointIndex, w }) {
      return [w.config.series[seriesIndex].toLocaleString('en-US'), value.toFixed(2) + '%'];
  }
    },
    series: {!! json_encode($countChart) !!},
    tooltip: {
        style: {
            fontSize: '12px'
        },
        y: {
            formatter: function (val) {
                return val.toLocaleString('en-US') 
            }
        }
    },
  };
  var chartpie2 = new ApexCharts(document.querySelector("#chartBykategori2"), options2);
  chartpie2.render();  
  // Apex Pie chart end
  $.ajax({
        url: "{{route('layanan.chartpie')}}",
        async: false,
        dataType: "json",
        success: function(obj) {
          chartpie.updateOptions({
            series: obj,
  });
  }});
});
  </script>
  <script src="{{ asset('assets/js/datepicker.js') }}"></script>
@endpush