@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="{{route('pppaid.index')}}">Dashboard pppa.id</a></li>
    <li class="breadcrumb-item active" aria-current="page">Table Donasi</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">Filter</h6>
        <div class="row">
          <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">
          </div>
          <div class="col-md-6">
            <div class="row">
              <div class="col">
                <select name="jenis" id="jenis" class="form-control select2">
                <option value="all">All Kategori</option>
                <option value="Sedekah">Sedekah</option>
                <option value="Wakaf">Wakaf</option>
                <option value="Zakat">Zakat</option>
                </select>
              </div>
              <div class="col">
                <select class="form-control select2" name="program" id="program" multiple  >
                @foreach ($program as $pr)
                <option value="{{$pr->nama_program}}">{{$pr->nama_program}}</option>
                @endforeach
                </select>
              </div>
            </div>
          </div>
          <div class="input-group col-md-2">
            <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="downloadex" value="Excel">Excel</button>
            </span>
          </div>
        </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="row">
          <div class="col-md-6 col-xs-6 mb-3">
            <span class="text-left font-weight-bold" id="nominal">Total Donasi : {{'Rp. '. noformat($nominal)}}</span>
          </div> 
        </div>
        <div class="table-responsive">
          <table id="dataTableExample" class="table">
            <thead>
              <tr>
                <th>No</th>
                <th>No Invoice</th>
                <th>Nama</th>
                <th>HP</th>
                <th>Email</th>
                <th>Nilai</th>
                <th>Nama Program</th>
                <th>Payment Type</th>
                <th>Kategori</th>
                <th>Created</th>
              </tr>
            </thead>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
@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>
@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("pppaid.trxJson")}}',
       "columns": [
          { data:'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false},
          { data: 'kode_id', name: 'kode_id'},
          { data: 'name', name: 'name'},
          { 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: 'nominal', name: 'nominal'},
          { data: 'nama_program', name: 'nama_program'},
          { data: 'payment_type', name: 'payment_type'},
          { data: 'table', name: 'table'},
          { data: 'finishtime', name: 'finishtime'},
       ],
    });
    $('#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());
    var kategori = encodeURI($('#jenis').val());
    var query = '?mindate=' + min + '&maxdate=' + max + '&kategori=' + kategori;
    var program = $('#program').val();
    for (var i=0; i<program.length; ++i) {
      if (query.indexOf('?') === -1) {
          query = query + '?program[]=' + encodeURI(program[i]);  
      }else {
          query = query + '&program[]=' + encodeURI(program[i]);
      }
    }
    table.ajax.url('{{route("pppaid.trxJson")}}' + query).load();
    $.ajax({
    type: "get",
    url: "{{route('pppaid.updateNominal')}}" + query,
    success: function (response) {
        $('#nominal').html(response);
    }
    });
    });
    $('#downloadex').on('click', function(){
    var min = encodeURI($('#min').val());
    var max = encodeURI($('#max').val());
    var kategori = encodeURI($('#jenis').val());
    var query = '?mindate=' + min + '&maxdate=' + max + '&kategori=' + kategori;
    var program = $('#program').val();
    for (var i=0; i<program.length; ++i) {
      if (query.indexOf('?') === -1) {
          query = query + '?program[]=' + encodeURI(program[i]);  
      }else {
          query = query + '&program[]=' + encodeURI(program[i]);
      }
    }
    var url = "{{route('pppaid.trxExcel')}}" + query;
    window.open(url, '_blank').focus();
    });
  });
  $('#jenis').on('change', function(){
    $.ajax({
      url : "{{route('pppaid.updateProgram')}}" + '?jenis=' + $(this).val(),
      async : false,
      dataType : 'json',
      success : function(obj){
        var $country = $('#program');
            $country.empty();
            $('#program').empty();
            for (var i = 0; i < obj.length; i++) {
                $country.append('<option value="' + obj[i].nama_program + '" >' + obj[i].nama_program + '</option>');
            }
            //manually trigger a change event for the program so that the change handler will get triggered
            $country.change();
      }
    });
  });
  if ($(".select2").length) {
    $(".select2").select2({
      placeholder: "Semua Program"
    });
  }
});
  </script>
@endpush