@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')}}">
@endpush

@section('content')
<nav class="page-breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="{{route('paytren.index')}}">Dashboard Paytren</a></li>
    <li class="breadcrumb-item active" aria-current="page">Table User</li>
  </ol>
</nav>
<div class="row">
  <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-4" style="margin-bottom: 1%">
          <input type="text" class="form-control" id="min">
          <div class="input-group-addon">to</div>
          <input type="text" class="form-control" id="max">
          <span style="margin-left: 3%">
            <button class="form-control btn-primary" id="filter" value="filter">filter</button>
          </span>
        </div>
        <div class="table-responsive">
          <table id="dataTableExample" class="table">
            <thead>
              <tr>
                <th>No</th>
                <th>Nama</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>


@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">Blfrtip',
      "processing": true,
       "serverSide": true,
       "ajax": '{{route("usercount.get")}}',
       "columns": [
          { data:'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false},
          { data: 'name', name: 'name'},
          { data: 'hp', name: 'hp',
          "render": function(data, type, row, meta){
            data = '<a href="tel:' + data + '">' + data + '</a>';
            return data;}},
          { data: 'email', name: 'email'},
          { data: 'action', name: 'action'},
       ],
       "buttons" : [
         {extend: 'excel', title: 'Data User'}
       ],
    });
    $('#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');
    });
    $('#filter').on('click', function(){
    var min = encodeURI($('#min').val());
    var max = encodeURI($('#max').val());
    table.ajax.url('{{route("usercount.get")}}' + '?mindate=' + min + '&maxdate=' + max).load();
    });
  });

});
function tampilProduk(e) {
      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("usercount.getHistory")}}' + '?user_paytren=' + e,
        "columns": [
            { data:'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false},
              { data: 'amount', name: 'amount', render: $.fn.dataTable.render.number(',', '.', 0, '')},
              { data: 'productName', name: 'productName'},
              { data: 'payment', name: 'payment'},
              { data: 'createdAt', name: 'createdAt'},
        ],
        });
        $.ajax({
          type:'GET',
          url:'{{route("usercount.getHistory")}}' + '?user_paytren=' + e + '&total=1',
          success : function(response) {
            $('#total_donasi').text('Rp.' + response);
          }
        });
      }else{
        $('.table-compare').DataTable().ajax.url('{{route("usercount.getHistory")}}' + '?user_paytren=' + e).load()
        $.ajax({
          type:'GET',
          url:'{{route("usercount.getHistory")}}' + '?user_paytren=' + e + '&total=1',
          success : function(response) {
            $('#total_donasi').text('Rp.' + response);
          }
        });
      }
        $('#modal-compare').modal('show');
    }
    function hideProduk() {
        $('#modal-compare').modal('hide');
    }
  </script>
@endpush