@extends('layouts.app1')

@section('content')
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<meta name="csrf-token" content="{{ csrf_token() }}" />
<!-- page content -->
<div class="right_col" role="main">
	@include('flashmessage')
          <div class="">
            <div class="page-title">
              <div class="title_left">
                <h3>Payout</h3>
              </div>

              
            </div>
            
            <div class="clearfix"></div>

            <div class="panel-body">
            
            </div>
				         
                   <div class="card-box table-responsive">                          
                   <table id="datatable-responsive1" class="table table-bordered table-striped dataTable bg-white" cellspacing="0" width="100%" style="white-space: nowrap">
                        <thead>
                        </thead>
                        <thead>
                            <tr>

                                <th> <i class="fa fa-lock"></i> Member ID </th>
                                <th>Mobile</th>
                                <th><i class="fa fa-user"></i> Member Name </th>
                                <th>Credit Balance</th>
                                <th>Debit Balance</th>
                                <th colspan="2">Total Balance</th>

                            </tr>
                        </thead>
                        <tbody>
                            @php
                            $debit=0.00;
                            $credit=0.00;
                            @endphp
                            @foreach ($users[0]->wallet as $key=> $user)
                            @if ($user->type==0)
                            @php
                            $credit=$credit+$user->amount;
                            @endphp
                            @else
                            @php
                            $debit=$debit+$user->amount;
                            @endphp
                            @endif


                            @endforeach
                            <tr>

                                <td>{{$users[0]->loginId}}</td>
                                <td>{{$users[0]->contact}}</td>
                                <td>{{$users[0]->name}} {{$users[0]->last_name}}</td>
                                <td class="text-success"> {{$credit}} <i class="fa fa-inr"></i></td>
                                <td class="text-danger">{{$debit}} <i class="fa fa-inr"></i></td>
                                <td class="text-info" colspan="2">{{round($credit-$debit)}} <i class="fa fa-inr"></i></td>

                            </tr>
                        </tbody>

                        <tfoot>
							<tr>
								<td colspan="8" class="text-center">
									<div class="col-md-12">
									<form >
                                        @csrf
										<label for="" class="text-success"> <i class="fa fa-inr"></i> (Amount Should
                                            Be Less Than Total
                                            Balance Which Is {{round($credit-$debit)}}</label><br>
																				<div class="row" id="payOptionDiv" style="display:none;">
											<div class="field item form-group col-md-6">
												<label class="col-form-label col-md-4 col-sm-4  label-align"><b>Amount</b><span style="color:red;">*</span></label>
												<div class="col-md-4 col-sm-4">
													<input onkeyup="payOutCharge(this)" onblur="payOutCharge(this)" data-id="{{Auth::user()->id}}" type="text"
													required name="amount" value="" {{$credit-$debit<=0?"readonly":""}}
													placeholder="Enter Amount" class="form-control" id="payoutAmount" onkeypress="return event.charCode >= 48 && event.charCode <= 57" autocomplete="new-amount"/>
												</div>
												<div class="col-form-label col-md-4 col-sm-4">
													<select name="payment_type" class="form-control amountType" data-id="{{Auth::user()->id}}" id="payment_type">
														<option value="IMPS"> IMPS</option>
														<option value="NEFT"> NEFT</option>												
													</select>
												</div>
											</div>
											<div class="field item form-group col-md-6">
												<label class="col-form-label col-md-4 col-sm-4  label-align"><b>TPIN</b><span style="color:red;">*</span></label>
												<div class="col-md-5 col-sm-5">
													<input type="password" name="tpin" id="tpin" class="form-control" required>   
												</div>
												<div class="col-form-label col-md-3 col-sm-3" id="btnBlock">
													<a class="form-control btn btn-success btn-xs" href="javascript:void(0)" id="payoutSub" style="color: #fff;">Submit</a> 
												</div>
											</div>
										</div>
									</form>
                                    <!-- /page content -->
                                    <!--<button type="button" class="btn btn-info btn-lg" id="openOtpModel" data-toggle="modal" data-target="#myModal" >Open</button>-->

                                    <!-- Modal -->
                                    <div id="myModal" class="modal fade" role="dialog">
                                      <div class="modal-dialog">

                                        <!-- Modal content-->
                                        <div class="modal-content">
                                          <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                                            <h4 class="modal-title text-center">
                                              <img src="{{asset('images/logo.png')}}" width="150" alt="">
                                            </h4>
                                          </div>
                                          <div id="otpBox">
                                          <div class="modal-body">
                                            <input type="number" name="otp" id="otp" class="form-control" placeholder="Enter OTP">
                                          </div>
                                          <div class="modal-footer">
                                            <button type="button" class="btn btn-danger text-left" id="resendOtp">Resend OTP</button>
                                            <button type="button" class="btn btn-primary" id="verifyOtp">Verify</button>
                                          </div>
										  </div>
                                        </div>

                                      </div>
                                    </div>
                                </div>
                                <p id="msg"></p>
                                </td>
                            </tr> 
                            <tr>
                                <td id="message" colspan="8" class="text-center">

                                </td>
                            </tr>

                        </tfoot>
                    </table> 
                </div>
                
         
           
            
                </div>
              </div>
            </div>
          </div>
        </div>

<script>
	$("#accountNOPayout").change(function(event){
		var payOutIfsc = $(this).find(':selected').data('ifsc');
		if($(this).val()!=''){
			$(".ifscHtml").html(payOutIfsc);
			$("#payoutIFSCCODE").val(payOutIfsc);
			$("#payOptionDiv").show();
		}
		else
		{
			$("#payOptionDiv").hide();
		}
	});
	

	function submitTrans(otpVer){
		var html = '<div class="modal-body"><h3>Please wait while we are processing your request...</h3></div>';
		$('#otpBox').html(html);
		$('#btnBlock').html('<a class="form-control btn btn-danger btn-xs" href="/payout/settle" >Reset Now</a>');
		let payoutIFSCCODE = $("#payoutIFSCCODE").val();     
		let payoutAmount = $("#payoutAmount").val();     
		let tpin = $("#tpin").val();     
		let paymentType = $("#payment_type").find('option:selected').val();
		let accountNOPayout = $("#accountNOPayout").find('option:selected').val();
		let otp = otpVer;
		
		if(payoutAmount < 0 || payoutAmount == '' || payoutIFSCCODE == "" || accountNOPayout == "" || paymentType == "" || tpin == ""){
			alert("All fields are required!");
			return false;
		}
		
		
		$.ajax({
			type: "POST",
			url: "/payout/transfer",
			data: {
			  tpin: tpin,
			  ifsc_code: payoutIFSCCODE,
			  account_no: accountNOPayout,
			  payment_type: paymentType,
			  amount: payoutAmount,
			  otp: otp,
			},
			headers: {
			  'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
			},
			success: function success(response) {
			  if (response != undefined) {
				if (response.error == 200) {
					var html2 = '<div class="modal-body"><h3>' + response.message + '</h3></div>';
					$('#otpBox').html(html2);				 
				  window.location = "/payout/view";
				} else {
				  alert(response.message);
				  window.location = "/payout";
				}
			  }
			}
		  });
		
	}
 
function payOutCharge(e) {
  var amount = $(e).val();
  var id = $(e).data("id"); 
	if (amount == parseInt(amount)){} else {
		$(e).val('');
		return false;
	}
  $.ajax({
    type: "POST",
    url: "/payout/Calculate",
    data: {
      amount: amount,
      id: id
    },
    headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    success: function success(response) {
      if (response != undefined) {
        $('#message').html("<span class='text-danger'><b>Surcharge ".concat(response.surcharge, "</b>, <b>Total Amount Deducted ").concat(response.amount, "</b>, <b>Remaining Amount: ").concat(response.remaining, "</b></span>"));

        if (response.remaining < 0) {
          //alert('Your wallet amount should be remain greater or equal to zero');
          $('button:submit').attr('disabled', true);
          $('select[name=payment_type]').attr('disabled', true);
          return false;
        } else {
          $('button:submit').attr('disabled', false);
          $('select[name=payment_type]').attr('disabled', false);
        }
      }
    }
  });
};
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        // Get value on button click and show alert
        $("#payoutSub").click(function(){
			let payoutIFSCCODE = $("#payoutIFSCCODE").val();     
			let payoutAmount = $("#payoutAmount").val();     
			let tpin1 = $("#tpin").val();     
			let paymentType = $("#payment_type").find('option:selected').val();
			let accountNOPayout = $("#accountNOPayout").find('option:selected').val();
			
			if(payoutAmount < 0 || payoutAmount == '' || payoutIFSCCODE == "" || accountNOPayout == "" || paymentType == "" || tpin1 == ""){
				alert("All fields are required!");
				return false;
			}
			
		  $('#btnBlock').html('');
            var memberId = '