@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('yatimhebat.index')}}">Dashboard YH</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-6" 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>
          <span style="margin-left: 3%">
            <button class="form-control btn-primary" id="downloadex" value="Excel">Excel</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>
              </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>


@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.userJson")}}',
       "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'}
       ],
    });
    $('#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("yatimhebat.userJson")}}' + '?mindate=' + min + '&maxdate=' + max).load();
    });
    $('#downloadex').on('click', function(){
    var min = encodeURI($('#min').val());
    var max = encodeURI($('#max').val());
    var url = "{{route('pppaid.userExcel')}}" + '?min=' + min + '&max=' + max;
    window.open(url, '_blank').focus();
    });
  });

});
  </script>
@endpush