@extends('layouts/ums_layout')
@section('title', '| Course Entry')
@section('content')
@include('successMsg')


<style type="text/css">
.searchRow td{padding: 5px;}
.table tr:nth-child(odd) {
 background-color: white !important; 
 border: 1.5px solid #eee;
}
.table-hover tr:hover td {
  background: #d7dce1;
}
</style>

<div class="row" id="tableData">                        
  <div class="col-md-12">
    <div class="panel panel-default" style="background-color:#708090;">
     <!--  <div class="panel-heading" style="padding-bottom:0px">
        <a href="#" id="addViewBtn" class="btn btn-info pull-right addViewBtn"><i class="glyphicon glyphicon-th-list viewIcon">
        </i> Add Course Registration</a>
        <h3  style=" text-align: center; font-family: Antiqua; letter-spacing: 2px; color: white;">Course Registration List</h3>
      </div> -->
      <div class="panel-body panelBodyView"> 
        <div>

        </div>
        <table class="table table-striped table-bordered" id="courseLateRegistrationList">
          <thead>
           <tr>
            <th>SL#</th>
            <th>Student Name</th>
            <th>Program Name</th>
            <th>Trimester Name</th>
            <th>Total Course</th>
            <th>Credit Hour</th>
            <th>Course Fee</th>
            <th>Other Fee</th>
            <th>Total Fee</th>
            <th>Paid Amount</th>
            <th>Due Amount</th>
            <th>Status</th>
            <th>Action</th>
          </tr>
        </thead>
      </table>
    </div>
  </div>
</div>
</div>

@endsection
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js" defer></script>


<script type="text/javascript">
  $(document ).ready( function() {
   var courseLateRegistrationList = $('#courseLateRegistrationList').DataTable({
     processing: true,
     serverSide: true,
     ajax: '{{ url('ums/courseLateRegistrationList/') }}',
     columns: [
     {data: 'id', name: 'id' },
     {data: 'fullName', name: 'fullName' },
     {data: 'programName', name: 'programName' },
     {data: 'trimesterName', name: 'trimesterName' },
     {data: 'courseNumber', name: 'courseNumber' },
     {data: 'creditHour', name: 'creditHour' },
     {data: 'courseFee', name: 'courseFee' },
     {data: 'otherFee', name: 'otherFee' },
     {data: 'amount', name: 'amount' },
     {data: 'paidAmount', name: 'paidAmount' },
     {data: 'dueAmount', name: 'dueAmount' },

     {data: 'status', name: 'status' ,render: function (data, type, row, meta) {
      if(data == 'approved'){
       return '<span class="label label-success">Approved</span> ';
     }
     else{
       return'<span class="label label-danger">Late</span>';

     }
   }},
   {data: 'action', name: 'action', orderable: false, searchable: false}
   ]
 });

   $("#startDate").datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat: 'yy-mm-dd'
  }); 


});//ready function end
</script>