@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="paymentAprovalList">
          <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>Amount</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>

{{-- End Delete Modal --}}

{{-- 
  @include('dataTableScript') --}}
  @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 src="{{asset('js/jquery-1.11.1.min.js')}}"></script> --}}
  <script type="text/javascript">
    $( document ).ready(function() {

     var paymentAprovalList = $('#paymentAprovalList').DataTable({
       processing: true,
       serverSide: true,
       ajax: '{{ url('ums/paymentAprovalList/') }}',
       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: 'amount', name: 'amount' },
      {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: 'approved', name: 'approved' ,render: function (data, type, row, meta) {
      //   if(data == 1){
      //     return ' <a disabled="disabled" href="" class="btn btn-xs btn-success confirm-link" title="Approved" style="background-color: green;"><i class="fa fa-check-circle"></i></a>';
      //   }
      //   else{
      //     return'<a  class="btn btn-xs btn-success confirm-link" title="Approved" approveId ="'+data.val_id+'" style="background-color: green;"><i class="fa fa-check-circle"></i></a>';
      //   }
      // }},

    // {data: 'mergeColumn', name: 'mergeColumn', searchable: false, sortable : false, visible:true},
    {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: './finalStudentPaymentApprove', 
      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>