@extends('dlayout')

  

@section('content')

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.min.css" rel="stylesheet">
<link href="https://rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet">
 

<div class="container">

    <div class="row justify-content-center">

        <div class="col-md-12">
        <br><br>
            <div class="card">

                <div class="card-header"> Users </div>
     
                
                <div id="toolbar">
    <select class="form-control">
        <option value="">Export Basic</option>
        <option value="all">Export All</option>
        <option value="selected">Export Selected</option>
    </select>
</div>

                <button style="width:150px;" type="button" class="btn btn-success" id="btnExport" onclick="exportReportToExcel(this)">EXPORT REPORT</button>
<script>
function exportReportToExcel() {
  let table = document.getElementsByTagName("table"); // you can use document.getElementById('tableId') as well by providing id to the table tag
  TableToExcel.convert(table[0], { // html code may contain multiple tables so here we are refering to 1st table tag
    name: 'users.xlsx', // fileName you could use any name
    sheet: {
      name: 'Sheet 1' // sheetName
    }
  });
}
</script>






<table id="table" 
       data-toggle="table"
       data-search="true"
       data-filter-control="true" 
       data-show-export="true"
       data-click-to-select="true"
       data-toolbar="#toolbar"
       class="table-responsive">
  <thead>
    <tr>
      <th data-field="state" data-checkbox="true"></th>
      <th data-field="id" data-filter-control="input" data-sortable="true">id </th>
      <th data-field="Names" data-filter-control="input" data-sortable="true">Names</th>
      <th data-field="Telephone" data-filter-control="input" data-sortable="true">Telephone</th>
      <th data-field="Email" data-filter-control="input" data-sortable="true">Email</th>
      <th data-field="Current Balance" data-filter-control="input" data-sortable="true">Current Balance </th>
      <th data-field="Loan Limit" data-filter-control="input" data-sortable="true">Loan Limit</th>
      <th data-field="Account status" data-filter-control="input" data-sortable="true">Account status</th>
      <th data-field="User signup Date" data-filter-control="input" data-sortable="select">User signup Datet</th>
      <th >Details</th>
    </tr>
  </thead>
  <tbody>



    @foreach($users as $user)

<tr>
    <td class="bs-checkbox "><input data-index="0" name="btSelectItem" type="checkbox"></td>
    <th scope="row"> {{ $user->id }}</th> 
    <td>  {{ $user->names }}</td>
    <td>  {{ $user->telephone }}</td>
    <td>  {{ $user->email }}</td>
    <td>  {{ $user->balance }}</td>
    <td>  {{ $user->loanlimit }}</td>
    <td>  {{ $user->totalbalance }}</td>
    <td> {{ $user->created_at }} ,
    <a  href="{{ route('userdetails',['id'=> $user->id]) }}" > 
      <button type="button" class="btn btn-success"> details</button>
</a>
    </td>
  </tr>
@endforeach
 

   
  </tbody>
</table>






                </div>

            </div>

        </div>

    </div>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/editable/bootstrap-table-editable.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/export/bootstrap-table-export.js"></script>
<script src="https://rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/filter-control/bootstrap-table-filter-control.js"></script>
  

@endsection