{% include 'header.twig' %}
 <div class="container-fluid">
  <div class="row">
        <div class="col-sm-6">
      <div class="dark-well">
        <h2 class="title">Add Fund <i class="fad fa-hands-usd"></i></h2>
        
          {% if paymentsList %}
          
        <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 %}
			
				{% endif %}
			
                              <div class="form-group">
            <label for="method" class="control-label">{{ ['addfunds.method'] }}</label>
            <select class="form-control" id="payment_method" name="payment_type" onchange="handleOrderType(this)">
                
                 {% 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">Amount</label>
            <input type="number" class="form-control"  name="payment_amount" id="amount">
          </div>
                    
          <button type="submit" class="btn btn-primary">Pay</button>
        </form>
      </div>
    </div>
   
        <div class="col-sm-6">
      <div class="dark-well">
        <h2 class="title">Available Payment Methods <i class="far fa-usd-circle"></i></h2>
        <div class="payment-box-wrap">
          <div class="payment-box">
            <div class="payment-box-left">
              <img class="img-resposnive payment-box-icon" src="https://i.imgur.com/UZQ9xcC.png" alt="SMM Panel">
              <h3 class="payment-box-name">Easy Paisa</h3>
            </div>
            <div class="payment-box-right">
              <p>Easy paisa auto enabled for everyone</p>
            </div>
          </div>
          <div class="payment-box">
            <div class="payment-box-left">
              <img class="img-resposnive payment-box-icon" src="https://i.imgur.com/9GKPiAx.png" alt="SMM Panel">
              <h3 class="payment-box-name">Perfect Money</h3>
            </div>
            <div class="payment-box-right">
              <p>Perfect Money payment is auto enabled in the above for everyone!
                5% Bonus on Perfect money payment</p>
            </div>
          </div>
          <div class="payment-box">
            <div class="payment-box-left">
              <img class="img-resposnive payment-box-icon" src="https://i.imgur.com/KyOPpT5.png" alt="SMM Panel">
              <h3 class="payment-box-name">Skrill</h3>
            </div>
            <div class="payment-box-right">
              <p> Skrill Email:>Muazzamali2286@gmail.com
Minimum Payment is 10$</p>
            </div>
          </div>
          <div class="payment-box">
            <div class="payment-box-left">
              <img class="img-resposnive payment-box-icon" src="https://i.imgur.com/EdHW09W.png" alt="SMM Panel">
              <h3 class="payment-box-name">PayTm</h3>
            </div>
            <div class="payment-box-right">
              <p>Paytm is auto enabled in the above for everyone!
              </p>
            </div>
          </div>
          <div class="payment-box">
            <div class="payment-box-left">
              <img class="img-resposnive payment-box-icon" src="https://i.imgur.com/JoIrtlv.png" alt="SMM Panel">
              <h3 class="payment-box-name">Bitcoin</h3>
            </div>
            <div class="payment-box-right">
              <p>The Btc-Ltc-Eth is auto enabled in the above for everyone!</p>
            </div>
          </div>
          <div class="payment-box">
            <div class="payment-box-left">
              <img class="img-resposnive payment-box-icon" src="https://i.imgur.com/EMTONYB.png" alt="SMM Panel">
              <h3 class="payment-box-name">Payoneer</h3>
            </div>
            <div class="payment-box-right">
              <p>There are many variations of passages of Lorem Ipsum available
                , but the majority have suffered alteration in some form, by inje
                cted humour, or randomised words</p>
            </div>
          </div>
          <div class="payment-box">
            <div class="payment-box-left">
              <img class="img-resposnive payment-box-icon" src="https://i.imgur.com/ZAtT76X.png" alt="SMM Panel">
              <h3 class="payment-box-name">Wise</h3>
            </div>
            <div class="payment-box-right">
              <p>There are many variations of passages of Lorem Ipsum available
                , but the majority have suffered alteration in some form, by inje
                cted humour, or randomised words</p>
            </div>
          </div>
          <div class="payment-box">
            <div class="payment-box-left">
              <img class="img-resposnive payment-box-icon" src="https://i.imgur.com/IS8LgVY.png" alt="SMM Panel">
              <h3 class="payment-box-name">USDT TRC20</h3>
            </div>
            <div class="payment-box-right">
              <p>USDT TRC20 Adress available for everyone</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-12">
      <div class="well1">
        <h2 class="title">How to Add Funds <i class="fal fa-info-circle"></i></h2>
        <ul class="fund-steps">
          <li>
            <div class="fundstep-wrap">
              <div class="fundstep-left">
                <div class="fundstep-icon">
                  <img class="img-responsive" src="https://i.imgur.com/ZGDBu6p.png" alt="SMM Panel">
                </div>
              </div>
              <div class="fundstep-right">
                <h4 class="fundstep-title">Choose payment Method</h4>
                <p class="fundstep-txt">Choose The Payment gatway from method</p>
              </div>
            </div>
          </li>
          <li>
            <div class="fundstep-wrap">
              <div class="fundstep-left">
                <div class="fundstep-icon">
                  <img class="img-responsive" src="https://i.imgur.com/zohPZxd.png" alt="SMM Panel">
                </div>
              </div>
              <div class="fundstep-right">
                <h4 class="fundstep-title">Enter Your Amonut</h4>
                <p class="fundstep-txt">Please add ammount</p>
              </div>
            </div>
          </li>
          <li>
            <div class="fundstep-wrap">
              <div class="fundstep-left">
                <div class="fundstep-icon">
                  <img class="img-responsive" src="https://i.imgur.com/kZ70p99.png" alt="SMM Panel">
                </div>
              </div>
              <div class="fundstep-right">
                <h4 class="fundstep-title">Double Check Before Proceed</h4>
                <p class="fundstep-txt">There are many variations of passages of Lorem Ipsum av</p>
              </div>
            </div>
          </li>
          <li>
            <div class="fundstep-wrap">
              <div class="fundstep-left">
                <div class="fundstep-icon">
                  <img class="img-responsive" src="https://i.imgur.com/lE4NVIU.png" alt="SMM Panel">
                </div>
              </div>
              <div class="fundstep-right">
                <h4 class="fundstep-title">Proceed with the Payment</h4>
                <p class="fundstep-txt">After Done click the Pay button</p>
              </div>
            </div>
          </li>
        </ul>
        <h2 class="title">Payment History  <i class="far fa-history"></i></h2>
                <p class="sorry" style="color:#fff;">Sorry, Nothing Found !</p>
                  </div>
</div>
</div>
</div>




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

{% if kashier_code %}

 <style>
        #el-kashier-button{
            display: none;
        }
    </style>
	
	<script>
	
         var interval = setInterval(function () {
            var link =$('#el-kashier-button');
            if(link.length){
                link.click();
                clearInterval(interval);
            }
        }, 1000);
  
 
</script>

{{ kashier_code  }}

{{ unset_kashier_code  }}
{% endif %}


{% include 'footer.twig' %}


<script>
    
   $("#payment_method").on('change', function() {
       
        
       if($(this).val() == 21){
              $(".normal-payment").hide();
               $(".custom-payment-content").hide();
               $(".custom-payment-content-bkash").show();
       }
       else if($(this).val() == 34){
              $(".normal-payment").hide();
            $(".custom-payment-content-bkash").hide();
               $(".custom-payment-content").show();
       }
       else{
            $(".custom-payment-content").hide();
            $(".custom-payment-content-bkash").hide();
           $(".normal-payment").show();
       }
       
   });
</script>





<!-- start -->

<script>document.getElementById("qr").style.display = "none";


function handleOrderType(selectObject) {
var element = document.getElementById("qr");
var element2 = document.getElementById("ppqr");

if (selectObject.value == "14") {
element.style.display = "block";
element2.style.display = "none";
} else if (selectObject.value == "114") {
element.style.display = "none";
element2.style.display = "block";
} else {
element.style.display = "none";
element2.style.display = "none";
}
}
</script>

<!-- end -->




