@extends('layout.master')

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

@section('content')
<nav class="page-breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
    <li class="breadcrumb-item active" aria-current="page">Table Compare pppa.id</li>
  </ol>
</nav>
<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">Perbandingan donatur pppa.id <span id="tahun_lalu"></span> dengan <span id="tahun_ini"></span> ( <span id="presentasi"></span><span id="icon_pr_span"> <i id="icon_pr" class="fa fa-arrow-circle-up" aria-hidden="true"></i></span> )</h6>
        </div>
        <div id="pr_irisan" class="mx-auto"></div>
      </div>
    </div>
  </div>
  <div class="col-md-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-body">
        <h6 class="card-title">Data Table</h6>
        <div class="input-group input-daterange col-md-6 col-xs-auto" style="margin-bottom: 1%">
          <input type="text" class="form-control" id="min" autocomplete="off">
          <div class="input-group-addon">to</div>
          <input type="text" class="form-control" id="max" autocomplete="off">
          <span style="margin-left: 3%">
            <button class="form-control btn-primary" id="filter" value="filter">filter</button>
          </span>
          {{-- <span style="margin-left: 3%">
            <button class="form-control btn-primary" id="downloadexcomp" value="Excel">Export Excel</button>
          </span> --}}
        </div>
        <div class="table-responsive">
          <table id="dataTableExample" class="table">
            <thead>
              <tr>
                <th>No</th>
                <th>HP</th>
                <th>Email</th>
                <th>Action</th>
              </tr>
            </thead>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
@includeIf('modal.modalcompare')
@endsection

@push('plugin-scripts')
<script src="{{ asset('assets/plugins/datatables-net/jquery.dataTables.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables-net-bs4/dataTables.bootstrap4.js') }}"></script>
<script src="{{ asset('assets/plugins/bootstrap-datepicker/bootstrap-datepicker.min.js') }}"></script>
<script src="{{asset('assets/plugins/datatables-buttons/js/dataTables.buttons.min.js')}}"></script>
<script src="{{asset('assets/plugins/datatables-buttons/js/buttons.bootstrap4.min.js')}}"></script>
<script src="{{asset('assets/plugins/jszip/jszip.min.js')}}"></script>
<script src="{{asset('assets/plugins/pdfmake/pdfmake.min.js')}}"></script>
<script src="{{asset('assets/plugins/pdfmake/vfs_fonts.js')}}"></script>
<script src="{{asset('assets/plugins/datatables-buttons/js/buttons.html5.min.js')}}"></script>
<script src="{{asset('assets/plugins/datatables-buttons/js/buttons.print.min.js')}}"></script>
<script src="{{asset('assets/plugins/datatables-buttons/js/buttons.colVis.min.js')}}"></script>
<script src="{{ asset('assets/plugins/select2/select2.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>
  $('.input-daterange input').each(function() {
    $(this).datepicker('clearDates');
  });
  $('#min').val('{{date("m/d/Y")}}')
  $('#max').val('{{date("m/d/Y",strtotime("+1 days"))}}')
</script>
<script>
      $(function() {
  'use strict';

  $(function() {
    var table = $('#dataTableExample').DataTable({
      "aLengthMenu": [
        [10, 30, 50, -1],
        [10, 30, 50, "All"]
      ],
      "iDisplayLength": 10,
      "language": {
        search: ""
      },
      "dom": '<"html5buttons">lfrtip',
      "processing": true,
       "serverSide": true,
       "ajax": '{{route("compare.ajax")}}',
       "columns": [
          { data:'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false},
          { data: 'no_wa', name: 'no_wa',
          "render": function(data, type, row, meta){
            data = '<a href="tel:' + data + '">' + data + '</a>';
            return data;}},
          { data: 'email', name: 'email'},
          { data: 'action', name: 'action'},
       ],
    });
    $('#dataTableExample').each(function() {
      var datatable = $(this);
      // SEARCH - Add the placeholder for Search and Turn this into in-line form control
      var search_input = datatable.closest('.dataTables_wrapper').find('div[id$=_filter] input');
      search_input.attr('placeholder', 'Search');
      search_input.removeClass('form-control-sm');
      // LENGTH - Inline-Form control
      var length_sel = datatable.closest('.dataTables_wrapper').find('div[id$=_length] select');
      length_sel.removeClass('form-control-sm');
    });
    // $('#downloadexcomp').on('click', function(){
    // var url = "{{route('compare')}}";
    // window.open(url, '_blank').focus();
    // });
    $('#filter').on('click', function(){
    var min = encodeURI($('#min').val());
    var max = encodeURI($('#max').val());
    var date = '?mindate=' + min + '&maxdate=' + max;
    $.ajax({
        url: "{{route('compare.pppaid.custom')}}" + date,
        async: false,
        dataType: "json",
        success: function(obj) {
          perolehanBarChart2.updateOptions({
            series: [{
              name: 'tahun kemarin',
              data: [obj.data[0]]
            },
            {
              name: 'tahun ini',
              data: [obj.data[1]]
            },
            {
              name: 'tidak repeat donasi',
              data: [obj.data[2]]
            },
            {
              name: 'repeat donasi',
              data: [obj.data[3]]
            }],
            xaxis: {
              type: 'category',
              categories: [obj.month]
            },
          });
          $('#tahun_ini').text(obj.tahun_ini);
          $('#tahun_lalu').text(obj.tahun_lalu);
          $("#presentasi").attr('class', '');
          $('#presentasi').addClass(obj.class);
          $("#icon_pr_span").attr('class', '');
          $('#icon_pr_span').addClass(obj.class);
          $('#presentasi').text(obj.presentasi);
          $('#icon_pr').attr('class', '');     
          $('#icon_pr').addClass(obj.icon);
        }
      });
    table.ajax.url('{{route("compare.ajax")}}' + date).load();
    });
  });
  if ($(".js-example-basic-multiple").length) {
    $(".js-example-basic-multiple").select2();
  }
});
    function tampilProduk(e,hp) {
      if ( ! $.fn.DataTable.isDataTable( '.table-compare' ) ) {
        var table2 = $('.table-compare').DataTable({
        "aLengthMenu": [
          [10, 30, 50, -1],
          [10, 30, 50, "All"]
        ],
        "iDisplayLength": 10,
        "language": {
          search: ""
        },
        "dom": '<"html5buttons">lfrtip',
        "processing": true,
        "serverSide": true,
        "ajax": '{{route("pppaid.trxJson")}}' + '?email=' + e + '&hp=' + hp,
        "columns": [
            { data:'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false},
              { data: 'nominal', name: 'nominal', render: $.fn.dataTable.render.number(',', '.', 0, '')},
              { data: 'nama_program', name: 'nama_program'},
              { data: 'payment_type', name: 'payment_type'},
              { data: 'created', name: 'created'},
        ],
        });
        $.ajax({
          type:'GET',
          url:'{{route("pppaid.trxJson")}}' + '?email=' + e + '&hp=' + hp + '&total=1',
          success : function(response) {
            $('#total_donasi').text('Rp.' + response);
          }
        });
      }else{
        $('.table-compare').DataTable().ajax.url('{{route("pppaid.trxJson")}}' + '?email=' + e + '&hp=' + hp).load()
        $.ajax({
          type:'GET',
          url:'{{route("pppaid.trxJson")}}' + '?email=' + e + '&hp=' + hp + '&total=1',
          success : function(response) {
            $('#total_donasi').text('Rp.' + response);
          }
        });
      }
        $('#modal-compare').modal('show');
    }
    function hideProduk() {
        $('#modal-compare').modal('hide');
    }
     // 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: [],
    xaxis: {
      type: 'category',
      categories: []
    },
    plotOptions: {
  bar: {
    dataLabels: {
      position: 'top'
    }
  },
  },
  dataLabels: {
    style: {
      colors: ['#333']
    },
    offsetY: 20, // play with this value
  },
}
  
  var perolehanBarChart2 = new ApexCharts(document.querySelector("#pr_irisan"), optionsbar2);
  
  perolehanBarChart2.render();
  $(document).ready(function(){
      $.ajax({
        url: "{{route('compare.pppaid.custom')}}",
        async: false,
        dataType: "json",
        success: function(obj) {
          perolehanBarChart2.updateOptions({
            series: [{
              name: 'tahun kemarin',
              data: [obj.data[0]]
            },
            {
              name: 'tahun ini',
              data: [obj.data[1]]
            },
            {
              name: 'tidak repeat donasi',
              data: [obj.data[2]]
            },
            {
              name: 'repeat donasi',
              data: [obj.data[3]]
            }],
            xaxis: {
              type: 'category',
              categories: [obj.month]
            },
          });
          $('#tahun_ini').text(obj.tahun_ini);
          $('#tahun_lalu').text(obj.tahun_lalu);
          $('#presentasi').addClass(obj.class);
          $('#icon_pr_span').addClass(obj.class);  
          $('#presentasi').text(obj.presentasi);
          $('#icon_pr').attr('class', '');     
          $('#icon_pr').addClass(obj.icon);    
        }
      })
    });
  </script>
@endpush