{% include 'header.twig' %}

{% if paymentsList %}
 <!-- app-header -->
         <div class="app-content">
            <!-- page-content -->
            <div class="container-fluid">
               <div class="row mt-4">
                  <div class="col-lg-12">
               <section class="order-side">
                  <div class="row">
                     <div class="col-lg-7 col-12 mb-5 mb-lg-0">
                        <div class="d-card dc-dblue">
                           <div class="d-card-body" id="dc-body">
							  <form method="post" action="addfunds">
								{% if error %}
								  <div class="alert alert-dismissible alert-danger">
									<button type="button" class="close" data-dismiss="alert">×</button>
									{{ errorText }}
								  </div>
								{% endif %}
								{% if success %}
								  <div class="alert alert-dismissible alert-success">
									<button type="button" class="close" data-dismiss="alert">×</button>
									{{ successText }}
								  </div>
								{% endif %}
                              <div class="form-group">
                                 <label for="method" class="control-label">{{ lang['addfunds.method'] }}</label>
								  <select class="form-control" id="payment_method" name="payment_type">
								   {% for payment in paymentsList %}
									  <option value="{{ payment['id'] }}" {% if data['payment_type'] == payment['id'] %} selected {% endif %} >{{ payment['method_name'] }}</option>
									{% endfor %}
								  </select>
                              </div>
                              <div class="form-group">
							     <label for="amount" class="control-label">{{ lang['addfunds.amount'] }}</label>
                                 <input class="form-control" name="payment_amount" value="{{ data['payment_amount'] }}">
                              </div>

                              <button type="submit" class="btn btn-primary btn-lg btn-block mb-4">Add Funds</button>
                              <br>
                              
                              <button type="button" class="btn btn-primary btn-lg btn-block" data-toggle="modal" data-target="#papara-modal">Pay With PayTm QR</button>
                              </form>
                           </div>
                        </div>
                        <!-- d-card end -->
                     </div>
                     <!-- col item end-->
                     <div class="col-lg-5 col-12 mb-5 mb-lg-0">				 
                        <div class="d-card dc-dblue">
                           <ul class="nav nav-pills fastside">
                              <li class="nav-item col-6 mb-2" style="padding:0">
                                 <a class="nav-link active" data-toggle="pill" href="#payInfo" role="tab" aria-controls="pills-payInfo" aria-selected="true">Payment information</a>
                              </li>
                              <li class="nav-item col-6 mb-2" style="padding:0">
                                 <a class="nav-link second" data-toggle="pill" href="#payAll" role="tab" aria-controls="pills-payAll" aria-selected="false">Bank Accounts</a>
                              </li>
                           </ul>
                           
                           
                           
                           
                           
                           
                           <div class="d-card-body" id="dc2-body" style="overflow-y: auto; max-height: 500px">
                              <div class="tab-content mt-3">
                                 <div class="tab-pane fade active show" id="payInfo" role="tabpanel" aria-labelledby="payInfo">
									<!--<img src="../img/paytm.png" style="display: inline-block; width: 128px; max-width: 100%;" class="img-responsive">--->
									<p class="my-3">Hello! <strong>{{ user['username'] }}</strong>,<br /> First of all, we want you to know that we take a 0% commission on all our payment methods. You can start your transactions by loading a minimum balance of 10 INR.</p>

								<br />
                                 </div>
                                 
                                 
                                 
                                 
                                 <div class="tab-pane fade" id="payAll" role="tabpanel" aria-labelledby="payAll-tab">
									  <div class="table-responsive">
										<table class="table table-striped table-bordered table-checkable ">
										    
										    
										    
										  
										  
										  
										  
										</div>

									  <div class="table-responsive">
										<table class="table table-striped table-bordered table-checkable ">
										  <tbody>
											<tr>
											  <td>
												<b>TO INFORM: </b> Transfer/EFT fees deducted while making the payment will not be covered by us.</b>.
											  </td>
											</tr>
										  </tbody>
										</table>
									  </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </section>
            </div>
            <!-- page-content end -->
         </div>
         <!-- app-content -->
			</div>
		</div>
		{% endif %}
		

		
      </div>


<!-- Papara -->
<div class="modal fade" id="papara-modal">
   <div class="modal-dialog">
      <div class="modal-content">
         <!-- Modal Header -->
         <div class="modal-header">
            <h4 class="modal-title">Load Balance with Paytm/PhonePe [QR]</h4>
            <button type="button" class="close" data-dismiss="modal">×</button>
         </div>
         <!-- Modal body -->
         <div class="modal-body">
             
             
         <form method="post" action="addfunds">
                                <center>
                                
                                <img width="150" height="300" src="/paytmqr.png" >
                              </center>
                              </br>
                    
                    <div class="table-responsive">
					<table class="table table-striped table-bordered table-checkable ">
						<tbody>
						<tr>
						<td>
					<center>
                         
                     <font color="#000000">
                     <h5>Examples:</h5>
                     
                    <img width="30" height="30" src="https://i.imgur.com/EKHDH9I.png" > PayTm  </br>[ 202109062210100058 ]
                    </br>
                    
                     </br>
                     
                     <img width="30" height="30" src="https://i.imgur.com/KxozatP.png" > PhonePe </br>[ T2106152305460137712836 ]
                     
                     </font>
                     </b>
                     </label>
                     
                     </center>
                      </td>
						</tr>
						</tbody>
							</table>
								</div>
									  
									  
                    <div class="form-group col-md-12">
                    
                        <label for="method" class="control-label"><font color="#000000">ENTER YOUR PAID AMOUNT:</font></label>
                        <input class="form-control" name="payment_amount" value="{{ data['payment_amount'] }}">
                    </div>
                   
                        <div class="form-group col-md-12">
                        <label for="method" class="control-label"><font color="#000000">ENTER TRANSACTION/ORDER ID:</font></label>
                        <input class="form-control" name="paytmqr_orderid" value="{{ data['paytmqr_orderid'] }}">
                    </div>
                    <input type="hidden" class="form-control" name="payment_type" value="14">
                    <div class="col-md-12"></br>
                      <button type="submit" class="btn btn-primary btn-lg btn-block mb-4">Submit</button>
                    </div>
                </form>  
            
            
         </div>
      </div>
   </div>
</div>

{% include 'footer.twig' %}