@extends('layouts.app')

@section('content')
<div class="card">
    <div class="card-body">
        <h4 class="card-title">Payment Report</h4>
        <div class="table-responsive">
            <table class="table table-bordered" id="customers-table">
                    <thead>
                        <tr>
                            <th>Id</th>
                            <th>Amount</th>
                            <th>Name</th>
                            <th>Username</th>
                            <th>Customer Name</th>
                            <th>Customer Username</th>
                            <th>Plot/Block/Sector/Project</th>
                            <th>Created At</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                </table>
        </div>
    </div>
</div>
<!-- The Modal -->
<div class="modal fade" id="loadModalAjax" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display: none;" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Deals</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        Modal body..
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>

@stop

@section('javascript')
    <script>
        $('#customers-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: '{!! url('/') !!}/payments/anydata',
                dom: 'lfrtip',
                'pageLength': 30,
                'lengthMenu': [ [10, 30, 50, -1], [10, 30, 50, "All"] ],
                'columns': [
                    { data: 'id', name: 'id' },
                    { data: 'amount', name: 'amount' },
                    { data: 'full_name', name: 'full_name' },
                    { data: 'username', name: 'username' },
                    { data: 'c_full_name', name: 'c_full_name' },
                    { data: 'c_username', name: 'c_username' },
                    { data: 'name', name: 'name' },
                    { data: 'created_at', name: 'created_at' },
                    { data: 'status_action', name: 'status_action' }
                ],
                'order': [[1, 'asc']],
                drawCallback: function( settings ) {
                    openModal();
                  },
                initComplete: function() {
                    
                }
            });

            function openModal(){
                $('.openModal').click(function(){
              	 $('#loadModalAjax .modal-body').load('{{ url('/') }}/admin/deals/' + $(this).attr('data-id') + '/edit',function(result){
            	    $('#loadModalAjax').modal({show:true});
                  //init_validation('#updateStudentForm', rules, messages);
            	   });
                });
                
                $('.activate').click(function(){
                    var ele = $(this);
                    $.ajax({
                       url: '{{ url('/') }}/admin/deals/ajax_update/' + $(this).attr('data-id'),
                       type: 'PUT',
                       data: { "_token": "{{ csrf_token() }}", id : $(this).attr('data-id'), active : $(this).attr('data-active') },
                       success: function(response) {
                         if(response == true){
                            if(ele.attr('data-active') == 1){
                                ele.removeClass('btn-warning').addClass('btn-danger').attr('data-active','0').find('span.ladda-label').text('Deactivate');
                            }else{
                                ele.removeClass('btn-danger').addClass('btn-warning').attr('data-active','1').find('span.ladda-label').text('Activate');
                            }
                         }else{
                            alert('error'+ response);
                         }
                       }
                    });
                });              
            }

    </script>
@endsection
