@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('yatimhebat.index')}}">Dashboard YH</a></li>
    <li class="breadcrumb-item active" aria-current="page">Table Transaksi</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="row">
          <div class="col-md-12 col-xs-12">
            Paid : <span class="text-left font-weight-bold" id="paid">{{'Rp. '.$nominal}}</span>
          </div>
          <div class="col-md-12 col-xs-12">
            Unpaid : <span class="text-left font-weight-bold" id="unpaid">{{'Rp. '.$unpaid}}</span>
          </div>
        </div>
        <div class="row">
          <div class="input-group input-daterange col-md-4 col-xs-auto" 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="input-group col-md-6">
            <select name="jenis" id="jenis" style="margin-left: 3%" class="js-example-basic-multiple">
            <option value="all">All Kategori</option>
            <option value="donasi">Donasi</option>
            <option value="topup">Topup</option>
            </select>
            <select class="js-example-basic-multiple" name="program" id="program" style="margin-left: 3%" multiple  >
            @foreach ($program as $pr)
            <option value="{{$pr->judul}}">{{$pr->judul}}</option>
            @endforeach
            </select>
            <select name="jenis1" id="jenis1" style="margin-left: 3%" class="js-example-basic-multiple">
              <option value="all">All Status</option>
              <option value="paid">Paid</option>
              <option value="unpaid">Unpaid</option>
              </select>
          </div>
          <div class="input-group col-xs-12 col-md-2 float-right">
             <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 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>Jenis</th>
                <th>Campaign</th>
                <th>Status</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("yatimhebat.trxJson")}}',
       "columns": [
          { data:'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false},
          { data: 'kode_id', name: 'kode_id'},
          { data: 'nama_donatur', name: 'nama_donatur'},
          { data: 'hp', name: 'hp',
          "render": function(data, type, row, meta){
            data = '<a href="tel:' + data + '">' + data + '</a>';
            return data;}},
          { data: 'email', name: 'email'},
          { data: 'jumlah', name: 'jumlah'},
          { data: 'kategori', name: 'kategori'},
          { data: 'judul', name: 'judul'},
          { data: 'trx_status', name: 'trx_status'},
          { data: 'modified', name: 'modified'},
       ],
       "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());
    var kategori = encodeURI($('#jenis').val());
    var program = '?mindate=' + min + '&maxdate=' + max + '&kategori=' + kategori;
    var programArr = $('#program').val();
    for (var i=0; i<programArr.length; ++i) {
    if (program.indexOf('?') === -1) {
        program = program + '?program[]=' + encodeURI(programArr[i]);  
    }else {
        program = program + '&program[]=' + encodeURI(programArr[i]);
    }
    }
    $.ajax({
      url : "{{route('so.updateNominal')}}" + program,
      async : false,
      dataType : "json",
      success : function (obj){
        $('#nominal').text('Rp. ' + obj.nominal);
      }
    });
    table.ajax.url('{{route("so.trxJson")}}' + program).load();
    });
    $('#downloadex').on('click', function(){
    var min = encodeURI($('#min').val());
    var max = encodeURI($('#max').val());
    var kategori = encodeURI($('#jenis').val());
    var program = '?mindate=' + min + '&maxdate=' + max + '&kategori=' + kategori;
    var programArr = $('#program').val();
    for (var i=0; i<programArr.length; ++i) {
    if (program.indexOf('?') === -1) {
        program = program + '?program[]=' + encodeURI(programArr[i]);  
    }else {
        program = program + '&program[]=' + encodeURI(programArr[i]);
    }
    }
    var url = "{{route('paytren.excel')}}" + program;
    window.open(url, '_blank').focus();
    });
  });
  if ($(".js-example-basic-multiple").length) {
    $(".js-example-basic-multiple").select2({
      placeholder: "Pilih Program"
    });
  }
  $('#jenis').on('change', function(){
    $.ajax({
      url : "{{route('so.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].camp_title + '" >' + obj[i].camp_title + '</option>');
            }
            //manually trigger a change event for the contry so that the change handler will get triggered
            $country.change();
      }
    });
  });
});
  </script>
@endpush