@extends('layouts/ums_layout')
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
@section('title', '| Trimester')
@section('content')
@include('successMsg')

<div class="row" id="tableData">                        
  <div class="col-md-12">
    <div class="panel panel-default" style="background-color:#708090;">

      <div class="panel-body panelBodyView"> 
        <div>

        </div>
        <table class="table table-striped table-bordered" id="studentPaymentAprovalList">
          <thead>
            <tr>
              <th>SL#</th>
              <th>Name</th>
              <th>Trimester</th>
              <th>Program</th>
              <th>Tran ID</th>
              <th>Val ID</th>
              <th>Bank Transaction ID</th>
              <th>card Type</th>
              <th>card No</th>
              <th>card Issuer</th>
              <th>Tran Date</th>
              <th>Validated Date</th>
              <th>Status</th>
              <th>Actions</th>
            </tr>

          </thead>
          <tbody>

          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>





{{-- Delete Modal --}}
<div id="approveModal" class="modal fade" style="margin-top:3%">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" style="clear:both;background-color:black;color:white; padding:10px">Approve</h4>
      </div>
      <div class="modal-body">
        <h2>Are You Confirm to approve</h2>

        <div class="modal-footer">
          {!! Form::hidden('DMApprove',null,['id'=>'DMApproveId']) !!}

          <button id="DMconfirmButton"  class="btn btn-success" type="submit" onclick="confimApproval();"> <span>Confirm</span></button>
          <button  class="btn btn-warning glyphicon glyphicon-remove" data-dismiss="modal" type="button"> Close</button>
          {!! Form::close() !!}

        </div>

      </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 studentPaymentAprovalList = $('#studentPaymentAprovalList').DataTable({
     processing: true,
     serverSide: true,
     ajax: '{{ url('ums/studentPaymentAprovalList/') }}',
     columns: [
     {data: null, "sortable": false,
     render: function (data, type, row, meta) {
      return meta.row + meta.settings._iDisplayStart + 1;
    }},
    {data: 'studentname', name: 'studentname' },
    {data: 'trimesterName', name: 'trimesterName' },
    {data: 'programName', name: 'programName' },
    {data: 'tran_id', name: 'tran_id' },
    {data: 'val_id', name: 'val_id' },
    {data: 'bank_tran_id', name: 'bank_tran_id' },
    {data: 'card_type', name: 'card_type' },
    {data: 'card_no', name: 'card_no' },
    {data: 'card_issuer', name: 'card_issuer' },
    {data: 'tran_date', name: 'tran_date' },
    {data: 'validated_on', name: 'validated_on' },
    {data: 'approved', name: 'approved' ,render: function (data, type, row, meta) {
      if(data == 1){
        return '<span class="label label-success">Approved</span> ';
      }
      else{
        return'<span class="label label-danger">Unaprroved</span>';

      }
    }},
    {data: 'action', name: 'action', orderable: false, searchable: false}
    ]
  });
   $(document).on('click', '.confirm-link', function() {
    $("#approveModal").modal('show'); 
    var approveId = $(this).attr('approveId'); 
    $("#DMApproveId").val(approveId);
  });      
 });

  function confimApproval()
  { var approveId =  $("#DMApproveId").val();
  $.ajax({
    type: 'POST',
    url: './studentPaymentApprove', 
    data :{approveId:approveId},          
    dataType: 'json',
    success: function( data ){
      swal({
        title: "Payment Approval is completed successfully",
        text: "Success",
        icon: "success",
      });
      setTimeout(function(){
        location.reload();
      }, 500);
    },
    error: function( data ){
                    // Handle error
                    //alert(data);
                    console.log(data);
                  }
                });
}



</script>