@extends('admin/layouts/contentLayoutMaster')

@section('title', 'Student Wallet Report')

@section('content')
@section('page-style')
<link rel="stylesheet" href="{{ asset('css/jquery.dataTables.min.css') }}">
<link rel="stylesheet" href="{{ asset('css/buttons.dataTables.min.css') }}">
@endsection
<!-- Basic Tables start -->
<div class="row" id="basic-table">
  <div class="col-12">
      <div class="card">
          <div class="card-header">
              <h4 class="card-title">Student Wallet Report</h4>
          </div>
          <div class="card-content">
              <div class="card-body">
                   @if (count($errors) > 0)
                          @if($errors->any())
                            <div class="alert alert-success alert-dismissible" role="alert">
                              <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                              {{$errors->first()}}
                            </div>
                          @endif
                      @endif
                  <!-- Table with outer spacing -->
                  <div class="table-responsive1">
  <form method="get">
  <div class="row">
  <div class="col-md-3">
  <div class="form-group">
    <label for="exampleInputEmail1">Student Name</label>
     <select class="form-control" name="student" id="student" required>
    <option value="">Choose Student Name</option>      
    @if(count($student)>0)
    @foreach ($student as $key=>$student1)    
    <option value="{{$student1->id}}" selected>{{$student1->name}}</option>  
    @endforeach
    @endif      
   </select>
  </div>
  </div>
   <div class="col-md-3">
  <div class="form-group">
    <label for="type">Type</label>
     <select class="form-control" name="type" id="type">
    <option value="">Choose Type</option>      
    <option value="recharge" >Recharge</option>  
    <option value="chat" >Chat</option>  
    <option value="phone" >Phone</option>  
   </select>
  </div>
  </div>
   <div class="col-md-2">
  <div class="form-group">
    <label for="from">From Date</label>
    <input type="text" class="form-control datepicker" id="from" name="from" placeholder="From Date" value="" readonly>
  </div>
  </div>
  <div class="col-md-2">
  <div class="form-group">
    <label for="to">To Date</label>
    <input type="text" class="form-control datepicker" id="to" name="to" placeholder="To Date" value="" readonly>
  </div>
  </div>
  <div class="col-md-2">
  <button type="submit" class="btn btn-primary" style="margin-top: 15px;">Search</button>
  </div>
</div>
</form>
                      <table class="table" id="example">
                          <thead>
                              <tr>
                                  <th>S.NO</th>
                                  <th>Date</th>
                                  <th>Student</th>
                                  <th>Advisor</th>
                                  <th>Interaction Type</th>
                                  <th>Duration</th>
                                  <th>Usage</th>
                                  <th>Description</th>
                                  <th>Credit Balance</th>
                              </tr>
                          </thead>
                          <tbody>
                                        @if(count($wallet)>0)
                    @foreach ($wallet as $key=>$wallet1)
                              <tr>
                                  <th scope="row">{{ $s }}</th>
                                  <td>01-01-1970</td>
                                  <td>{{ $wallet1->name }}</td>
                                  <td>{{ $wallet1->advisor_name }}</td>
                                  <td>{{ $wallet1->type }}</td>
                                  <td>  </td>
                                   <td>
                                                                       </td>
                                     <td>{{ $wallet1->description }}</td>
                                    <td>
                                   0                                    </td>
                              </tr>
                                                             @endforeach
                    @else
                       <tr>
                            <td colspan="9">No record found!</td>
                       </tr>
                    @endif
                          </tbody>
                          <tfoot>
            <tr>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th style="text-align:right">Total:</th>
                <th></th>
                <th>Credit Balance :</th>
                <th>0</th>
            </tr>
        </tfoot>
                      </table>
                  </div>
              </div>
        
          </div>
      </div>
  </div>
</div>
<!-- Basic Tables end -->
<!-- Responsive tables end -->
@endsection
@section('page-script')
        <!-- Page js files -->
<script src="{{ asset('js/scripts/jquery-ui.js') }}"></script>
<script>
  $( function() {
    $( ".datepicker" ).datepicker({
      changeMonth: true,
      changeYear: true,
      dateFormat: 'yy-mm-dd',
      yearRange: "-150:+0",
      showButtonPanel: true,
    closeText: 'Clear',
         onClose: function (dateText, inst) {
        if ($(window.event.srcElement).hasClass('ui-datepicker-close'))
        {
            document.getElementById(this.id).value = '';
        }
    }
    });
  });
</script>
<script src="{{ asset('js/scripts/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('js/scripts/datatables/dataTables.buttons.min.js') }}"></script>
<script src="{{ asset('js/scripts/datatables/jszip.min.js') }}"></script>
<script src="{{ asset('js/scripts/datatables/pdfmake.min.js') }}"></script>
<script src="{{ asset('js/scripts/datatables/vfs_fonts.js') }}"></script>
<script src="{{ asset('js/scripts/datatables/buttons.html5.min.js') }}"></script>
<script>
$(document).ready(function() {
    $('#example').DataTable({
        dom: 'Bfrtip',
        "bSort":false,
        "searching": false,
        "footerCallback": function ( row, data, start, end, display ) {
            var api = this.api(), data;
 
            // converting to interger to find total
            var intVal = function ( i ) {
                return typeof i === 'string' ?
                    i.replace(/[\$,]/g, '')*1 :
                    typeof i === 'number' ?
                        i : 0;
            };
 
           // Total over all pages
            total = api
                .column( 6 )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );
 
            // Total over this page
            pageTotal = api
                .column( 6, { page: 'current'} )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );
				
            // Update footer by showing the total with the reference of the column index 
            $( api.column( 6 ).footer() ).html(total.toFixed(2));
        },
        buttons: [{
  extend: 'collection',
  className: 'exportButton',
  text: 'Data Export',
buttons: [{ extend:'csv',
              exportOptions: {
                modifier: {
                  page: 'all',
                  search: 'none'   
                }
             },
             //the remaining buttons here 
    }]
}]
});
});    
</script>
@endsection