@extends('layout.backend.app',[
    'title' => 'Manage Wallet',
    'pageTitle' =>'Manage Wallet',
])

@push('css')
<link href="{{ asset('template/backend/sb-admin-2') }}/vendor/datatables/dataTables.bootstrap4.min.css" rel="stylesheet">
@endpush

@section('content')
<div class="notify"></div>

<div class="card">
    <div class="card-header">
    </div>
        <div class="card-body">
            <div class="table-responsive">    
                <table class="table table-bordered data-table">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Name</th>
                            <th>Mobile</th>
                           <th>Amount</th>
                           <th>Date</th>
                           <th>Status</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
</div>

<!-- Modal View -->
<div class="modal fade" id="view-modal" tabindex="-1" role="dialog" aria-labelledby="view-modalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document" style="max-width: 800px;">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="edit-modalLabel">View Data</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="form-group">
            <table  class="table">
              <tr>
                 <td>Amount: </td>
                 <td><b><div id="request-amount"></div></b></td>
              </tr>
              <tr>
                 <td>Payment Status: </td>
                 <td><b><div id="paymentStatus"></div></b></td>
              </tr>
               <tr>
                 <td>Name: </td>
                 <td><div id="name-view"></div></td>
              </tr>
              <tr>
                 <td>Mobile: </td>
                 <td><div id="mobile-view"></div></td>
              </tr>
              <tr>
                 <td>Status: </td>
                 <td><div id="status-view"></div></td>
              </tr>
              <tr>
                 <td>Mobile Verify Status: </td>
                 <td><div id="is-mobile-verify"></div></td>
              </tr>
              <tr>
                 <td>Bank Name: </td>
                 <td><div id="bank_name"></div></td>
              </tr>
              <tr>
                 <td>Account Number: </td>
                 <td><div id="account_holder_name"></div></td>
              </tr>
              <tr>
                 <td>Bank IFSC Code: </td>
                 <td><div id="ifsc_code"></div></td>
              </tr>
              <tr>
                 <td>Account Number: </td>
                 <td><div id="account_number"></div></td>
              </tr>
            </table>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<!-- Modal View -->



<!-- Change status Modal -->
<div class="modal fade" id="destroy-modal" tabindex="-1" role="dialog" aria-labelledby="destroy-modalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="destroy-modalLabel">Are you sure ?</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
        <button type="button" class="btn btn-danger btn-destroy">Yes</button>
      </div>
    </div>
  </div>
</div>
<!--  Change status Modal -->

@stop

@push('js')
<script src="{{ asset('template/backend/sb-admin-2') }}/vendor/datatables/jquery.dataTables.min.js"></script>
<script src="{{ asset('template/backend/sb-admin-2') }}/vendor/datatables/dataTables.bootstrap4.min.js"></script>
<script src="{{ asset('template/backend/sb-admin-2') }}/js/demo/datatables-demo.js"></script>

<script type="text/javascript">

  $(function () {
    
    var table = $('.data-table').DataTable({
        processing: true,
        serverSide: true,
        "ajax": {
        'type': 'GET',
        'url': '/user/user-wallet',
        'data': {
          userid: 0,
         },
       },
        columns: [
            {data: 'DT_RowIndex' , name: 'id'},
             {data: 'user_detail', name: 'user_detail', orderable: false},
             {data: 'user.mobile', name: 'user.mobile'},
             {data: 'amount', name: 'amount'},
             {data: 'date', name: 'date'},
             {data: 'payment_type', name: 'payment_type',orderable: false, searchable: true},
            {data: 'action', name: 'action', orderable: false, searchable: true},
        ]
    });
  });

  // View
  $('body').on("click",".btn-view",function(){
        var id = $(this).attr("id")
        
        $.ajax({
            url: "/user/wallet-detail/"+id,
            method: "GET",
            success:function(response){
              response = response.data;
              console.log(response)
                var statusName = 'Inactive';
                var isMobileVerify = 'Unverify'
                if(response.user.status == 1){
                  statusName = 'Active';
                }
                if(response.user.is_mobile_verify == 1){
                  isMobileVerify = 'Verify';
                }
                $("#view-modal").modal("show")
                $("#name-view").html(response.user.name)
                $("#paymentStatus").html(response.payment_type_name)
                $("#request-amount").html(response.amount)
                $("#mobile-view").html(response.user.mobile)
                $("#status-view").html(statusName)
                $("#is-mobile-verify").html(isMobileVerify)
                $("#bank_name").html(response.user.bank_name)
                $("#account_holder_name").html(response.user.account_holder_name)
                $("#ifsc_code").html(response.user.ifsc_code)
                $("#account_number").html(response.user.account_number)
            }
        })
    });


    $('body').on("click",".btn-payment-type",function(){
        var id = $(this).attr("id");
        var column = $(this).attr("column");
        var value = $(this).attr("value");
        $(".btn-destroy").attr("id",id)
        $(".btn-destroy").attr("column",column)
        $(".btn-destroy").attr("typevalue",value)
        $("#destroy-modal").modal("show")
        
    });

    $(".btn-destroy").on("click",function(){
        var id = $(this).attr("id");
        var column = $(this).attr("column");
        var value = $(this).attr("typevalue");
        $.ajax({
            url: "/user/update-wallet-status/"+id+"/"+column+"/"+value,
            method: "GET",
            success:function(response){
              if(response.payment_type){
                if(column == 'payment_type'){
                  $("#payment-type-"+id).html(response.status_label);
                }
                $("#destroy-modal").modal("hide");
                flash('success',response.msg);
              } else {
                flash('error',response.msg);
              }
            }
        });
        // $.ajax({
        //     url: "/admin/user/"+id,
        //     method: "DELETE",
        //     success:function(){
        //         $("#destroy-modal").modal("hide")
        //         $('.data-table').DataTable().ajax.reload();
        //         flash('success','Deleted successfully')
        //     }
        // });
    })

    function flash(type,message){
        $(".notify").html(`<div class="alert alert-`+type+` alert-dismissible fade show" role="alert">
                              `+message+`
                              <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                              </button>
                            </div>`)
    }

</script>
@endpush