{% include 'header.twig' %}
    <div class="marginforfixed userbody">
      <!-- Main variables *content* -->
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!-- The Modal -->
<div class="modal servmodal updtmodal" id="fndModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <img src="https://cdn4.mypanel.link/fcm9r8/px4as35l14pyhpjw.png">
      </div>
      <div class="modal-body">
        <p>
        
        <center><img class="paraimg" src=""></center>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Great</button>
      </div>
    </div>
  </div>
</div>
<!-- /modal -->

<script>
  $(document).ready(function(){
    if (document.cookie.indexOf('fndpopupShown=true') == -1) {
      // Show the popup
      $('#fndModal').modal('show');
      // Set a cookie to indicate that the popup has been shown
      document.cookie = 'fndpopupShown=true';
    }
  });
</script>

<!--<div class="fixed-top-currencybar">
  <div class="tradingview-widget-container">
    <div class="tradingview-widget-container__widget"></div>
    <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/" rel="noopener nofollow" target="_blank"></a></div>
    <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-ticker-tape.js" async>
      {
        "symbols": [
          {
            "description": "",
            "proName": "FX_IDC:USDINR"
          },
          {
            "description": "",
            "proName": "FX_IDC:USDRUB"
          },
          {
            "description": "",
            "proName": "FX:USDTRY"
          },
          {
            "description": "",
            "proName": "FX_IDC:USDIRR"
          },
          {
            "description": "",
            "proName": "FX_IDC:USDBRL"
          },
          {
            "description": "",
            "proName": "FX:USDJPY"
          }
        ],
          "showSymbolLogo": true,
            "isTransparent": true,
              "displayMode": "regular",
                "colorTheme": "dark",
                  "locale": "en"
      }
    </script>
  </div>
</div>-->

<style>
  div#imageModal .modal-content {
    background: transparent;
  }
  div#imageModal .modal-header h4 {
    margin-right: auto;
  }
  div#imageModal .modal-header {
    border: 0;
    background: rgb(30 29 28);
    border-radius: 12px;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
  }
  div#imageModal .modal-footer {
    display: none;
  }
  div#imageModal .modal-body {
    padding: 0;
    margin-top: 10px;
    border-radius: 10px;
    overflow: hidden;
  }
  .notered {
    background: linear-gradient(45deg, #9dee9d, #9cff9c);
    padding: 10px;
    border-radius: 12px;
    margin: 5px;
  }
  .notered p {
    margin: 0;
    color: green;
    text-align: center;
    font-weight: 700;
  }
</style>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<style>
  p.paymethhead img {
    width: 25px;
    border-radius: 20px;
    margin-right: 5px;
    border: 2px solid #fff;
  }
  .open > .dropdown-menu.paymentdropdown::-webkit-scrollbar {
    width: 5px;
  }

  /* Track */
  .open > .dropdown-menu.paymentdropdown::-webkit-scrollbar-track {
    background: #f1f1f1; 
  }

  /* Handle */
  .open > .dropdown-menu.paymentdropdown::-webkit-scrollbar-thumb {
    background: #888; 
  }

  /* Handle on hover */
  .open > .dropdown-menu.paymentdropdown::-webkit-scrollbar-thumb:hover {
    background: #555; 
  }

  .dropdown.paymentdropdown.open button {
    border-radius: 20px 20px 0 0;
  }
  .dropdown-menu.paymentdropdown {
    border-radius: 0px 0px 15px 15px !important;
    max-height: 315px;
    margin-top: 0 !important;
    display: block;
    width: 100%;
    visibility: collapse;
  }

  .dropdown-menu.paymentdropdown {
    transition: all 0.3s ease;
    height: 0px;
  }

  .dropdown.paymentdropdown.open .dropdown-menu.paymentdropdown{
    height: 350px;
    visibility: visible;
  }

  nav.usernav {
    z-index: 1031;
  }
  .fixed-top-currencybar {
    background: #00000020;
    border: 1px solid #ffffff20;
    height: 48px;
    position: relative;
    z-index: 1030;
    margin-bottom: 20px;
  }
  .currencyconvs {
    margin-bottom: 20px;
  }
  .exchrate {
    background: #ffffff10;
    backdrop-filter: blur(2px);
    border: 1px solid #ffffff20;
    border-radius: 20px;
    padding: 5px;
    margin: 10px 0;
    height: 110px;
  }
  .headrpsc .stephd i {
    background: #fff;
    height: 40px;
    width: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #000;
    border-radius: 20px;
    border: 2px solid #ffb827;
    margin-right: 5px;
  }
  ul.nav.nav-pills.paymethpills {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  ul.nav.nav-pills.paymethpills li a {
    padding: 4px;
    padding-right: 15px;
  }
  ul.nav.nav-pills.paymethpills li a img {
    max-width: 25px;
    border-radius: 22px;
    border: 1px solid #000000;
  }
  .paystepcard .stepdetl {
    color: #fff;
    font-weight: 600;
    font-size: 12px;
    background: radial-gradient(#312511, black);
    display: block;
    width: 86%;
    padding: 14px;
    border-radius: 15px;
    border: 1px solid #ffffff30;
    box-shadow: inset 2px 2px 13px 0px #000;
    padding-left: 30px;
  }
  .paystepcard:last-child:after {
    display: none;
  }
  .paystepcard:after {
    content: '';
    position: absolute;
    display: block;
    height: 50px;
    width: 2px;
    background: transparent;
    bottom: -30px;
    left: 32px;
    z-index: -1;
    border: 1px dashed #fff;
  }
  .paystepcard .stepno {
    background: #000;
    min-height: 45px;
    min-width: 45px;
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 32px;
    margin-left: 10px;
    border: 2px solid #ffb827;
    position: relative;
    z-index: 2;
  }
  .paystepcard {
    padding: 10px;
    margin-bottom: 10px;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: flex-start;
  }
  .paystepcard .stepdetl:after {
    content: '';
    display: block;
    height: 15px;
    width: 15px;
    background: #373127;
    position: absolute;
    top: 27px;
    left: 70px;
    border-radius: 23px;
    z-index: 0;
    box-shadow: inset 2px 2px 5px -2px #b38f52;
  }
  .paystepcard .stepdetl:before {
    content: '';
    display: block;
    width: 30px;
    height: 2px;
    background: #fff;
    position: absolute;
    left: 46px;
    top: 34px;
    z-index: 1;
  }
</style>
<style>
  .paystepcard {
    display: block;
    background: radial-gradient(#2a221545, #00000033, #0000008a);
    border-radius: 20px;
    border: 1px solid #ffffff20;
    box-shadow: 2px 2px 40px -20px #000;
  }
  .headrpsc {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    border-bottom: 1px solid #ffffff20;
    padding: 10px;
    flex-direction: row-reverse;
  }
  .headrpsc .stephd {
    color: #ffb800;
    font-size: 18px;
    font-weight: 700;
  }
  .bodypsc {
    color: #fff;
    padding: 10px;
  }
  .paystepcard:after{
    display: none;
  }
</style>

<!-- The Modal -->
<!--<div class="modal servmodal updtmodal" id="tcktModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <img src="https://cdn4.mypanel.link/fcm9r8/px4as35l14pyhpjw.png">
      </div>
      <div class="modal-body">
        <p>⛔ Payments from multiple bank accounts on our QR CODE are not allowed. We are monitoring transactions, and using unauthorized accounts will lead to disabling Paytm payments. Kindly pay only from your personal account to avoid consequences.
        </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Okay</button>
      </div>
    </div>
  </div>
</div>
<!-- /modal -->
<!--<a href="/" class="btn btn-primary">Name Here</a>-->

<style>
  a#pasteButton {
    top: -62px;
    left: 190px;
  }
  ul.nav.nav-pills.paypills {
    background: #e9a800;
    border: 2px solid #ffffff;
    margin: 0;
    margin-bottom: 20px;
    box-shadow: inset rgb(50 50 93 / 25%) 0px 13px 27px -5px, inset rgb(0 0 0 / 30%) 0px 8px 16px -8px;
  }
  ul.nav.nav-pills.paypills li a {
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    opacity: 1;
    border-radius: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  ul.nav.nav-pills.paypills li a img {
    max-height: 55px;
    display: block;
    border-radius: 50px;
    background: #fff;
    padding: 10px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
  }
  .tab-content.paymnttabcontent img {
    width: 100%;
    max-width: 200px;
    background: #ffffff;
    padding: 10px;
    border-radius: 25px;
    margin-bottom: 14px;
  }
  .tab-content.paymnttabcontent {
    padding: 10px;
    border: 2px solid #ffffff20;
    border-radius: 32px;
  }
  .tab-content.paymnttabcontent p {
    color: #fff;
    line-height: 1.2;
    font-size: 16px;
    padding: 10px 10px 0 10px;
  }
  .afcard {
    display: flex;
    align-items: center;
    background: #00000080;
    backdrop-filter: blur(20px);
    margin: 10px 0;
    border: 2px solid #ffffff;
    border-radius: 18px;
    padding: 5px;
  }
  .afcard i {
    background: #ffb800;
    color: #000;
    font-size: 20px;
    padding: 18px;
    border-radius: 16px;
    margin-right: 10px;
  }
  .afcard p {
    margin: 0;
    font-size: 14px !important;
    color: #ffffff99 !important;
    padding: 0 !important;
  }
  .afcard h3 {
    color: #fff;
    margin: 0;
    margin-top: 0;
    font-weight: 900;
  }
  span.paymin {
    background: #fff;
    padding: 0 10px;
    border-radius: 15px;
    margin-left: 10px;
  }
  span.nowrap.pbdate span {
    background: #ffffff20;
    padding: 4px 10px;
    border-radius: 30px;
    color: #fff;
    border: 1px solid #ffffff20;
  }
  div#currency-converter-274741 {
    background: #fff;
    padding: 20px;
    border-radius: 30px;
  }
  .dropdown.paymentdropdown button {
    display: flex;
    align-items: center;
    width: 100%;
    color: #fff;
    overflow: hidden;
  }
  .dropdown.paymentdropdown button img {
    max-width: 30px;
    border-radius: 28px;
    margin-left: -5px;
    border: 2px solid #FFf;
    margin-right: 8px;
  }
  .dropdown.paymentdropdown button span.caret {
    display: none;
  }
  .dropdown-menu.paymentdropdown {
    background: #544c40;
    border: 1px solid #ffffff20;
  }
  .open > .dropdown-menu.paymentdropdown {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    position: relative;
    padding: 0 10px 10px 10px;
    margin-bottom: 20px;
  }
  .dropdown-menu.paymentdropdown a.dropdown-item {
    display: flex;
    align-items: center;
    background: #ffffff10;
    width: 100%;
    border-radius: 25px;
    padding: 4px;
    color: #fff;
    border: 1px solid #ffffff10;
    margin: 4px 0;
  }
  .dropdown-menu.paymentdropdown a.dropdown-item img {
    max-width: 30px;
    border-radius: 30px;
    border: 2px solid #fff;
    margin-right: 8px;
  }
  p.paymethhead {
    color: #fff;
    font-weight: 800;
    display: block;
    width: 100%;
    border-bottom: 1px solid #ffffff20;
    padding: 10px 0;
  }
  p.paymethhead span {
    display: inline-block;
    background: #dea103;
    float: right;
    border-radius: 10px;
    padding: 0 15px;
    font-size: 11px;
  }
</style>



<div class="container-fluid">
  <div class="row">
    <div class="col-md-6">
      <ul class="nav nav-pills">
        <li class="active"><a data-toggle="pill" href="#addfunds"><i class="ti ti-cash"></i> Add Funds</a></li>
        <li><a data-toggle="pill" href="#passbook"><i class="ti ti-history"></i> History</a></li>
      </ul>
      <div class="tab-content">
        <div id="addfunds" class="tab-pane fade in active">
          <div class="well">
            
                                                                                                                                                                                                
            <div class="dropdown">
              <button class="form-control dropdown-toggle payselecbtn" type="button" data-toggle="dropdown">Select Payment Method</button>
              <ul class="dropdown-menu fundlistml">
                                <p class="labelfunds">
                  Payment In INR
                </p>
                                <li class="payment-option" id="btn71883" type="radio">
                  <a>
                    <div class="option-header">
                      <p>𝗣𝗵𝗼𝗻𝗲𝗣𝗲 ( 2% Bonus )  </p>
                    </div>
                    <div class="payment-icons">
                                                                  <img src="https://storage.perfectcdn.com/fcm9r8/j4211ca4cmu2rzfw.webp" alt="Discover">
                                                                                                                                                                                                                                                                                                                                                                                    </div>
                  </a>
                </li>
                <script>
                  $('#btn71883').click(function(){ 
                    $('#method').val('71883').trigger('change');
                                     })
                </script>
                                <li class="payment-option" id="btn79916" type="radio">
                  <a>
                    <div class="option-header">
                      <p>𝗜𝗠𝗣𝗦 ( 4% Bonus ) </p>
                    </div>
                    <div class="payment-icons">
                                                                                                              <img src="https://storage.perfectcdn.com/fcm9r8/8wrwl72katw0bxcg.webp" alt="MasterCard">
                                                                                                                                                                                                                                                                                                                                        </div>
                  </a>
                </li>
                <script>
                  $('#btn79916').click(function(){ 
                    $('#method').val('79916').trigger('change');
                                     })
                </script>
                                                <p class="labelfunds">
                  Payment In USD
                </p>
                                <li class="payment-option" id="btn114687" type="radio">
                  <a>
                    <div class="option-header">
                      <p>𝗣𝗮𝘆𝗲𝗲𝗿 ( 10% Bonus ) </p>
                    </div>
                    <div class="payment-icons">
                                                                                                                                                          <img src="https://storage.perfectcdn.com/fcm9r8/b3mu364k1hym9kly.webp" alt="MasterCard">
                                                                                                                                                                                                                                                                                            </div>
                  </a>
                </li>
                <script>
                  $('#btn114687').click(function(){ 
                    $('#method').val('114687').trigger('change');
                                     })
                </script>
                                                <p class="labelfunds">
                  Payment In CRYPTO
                </p>
                                <li class="payment-option" id="btn134010" type="radio">
                  <a>
                    <div class="option-header">
                      <p>𝗖𝗿𝘆𝗽𝘁𝗼𝗺𝘂𝘀 ( 10% Bonus ) </p>
                    </div>
                    <div class="payment-icons">
                                                                                                                                                                                                                                                  <img src="https://storage.perfectcdn.com/fcm9r8/o7tin0rg0k9atmdl.webp" alt="MasterCard">
                                                                                                                                                                                                    </div>
                  </a>
                </li>
                <script>
                  $('#btn134010').click(function(){ 
                    $('#method').val('134010').trigger('change');
                                     })
                </script>
                                <li class="payment-option" id="btn113411" type="radio">
                  <a>
                    <div class="option-header">
                      <p>𝗖𝗼𝗶𝗻𝗣𝗮𝘆𝗺𝗲𝗻𝘁𝘀 ( 10% Bonus ) </p>
                    </div>
                    <div class="payment-icons">
                                                                                                                                                                                                                                                                                              <img src="https://storage.perfectcdn.com/fcm9r8/gl73yfaxyo5z1jk8.webp" alt="MasterCard">
                                                                                                                                                        </div>
                  </a>
                </li>
                <script>
                  $('#btn113411').click(function(){ 
                    $('#method').val('113411').trigger('change');
                                     })
                </script>
                                              </ul>
            </div>

            <!-- Add this script -->
            <script>
              $(document).ready(function () {
                $('.payment-option').click(function () {
                  var paymentId = $(this).attr('id').replace('btn', ''); // Extract payment ID
                  var selectedPayment = $('#btn' + paymentId + ' p').text(); // Get payment name
                  var paymentImage = $('#btn' + paymentId + ' .payment-icons img').attr('src'); // Get payment image src
                  $('.dropdown-toggle.payselecbtn').html(selectedPayment + ' <span class="caret"></span>'); // Set payment name in dropdown toggle
                  $('.dropdown-toggle.payselecbtn').append('<img src="' + paymentImage + '" alt="' + selectedPayment + '">'); // Append payment image to dropdown toggle
                });
              });
              // Trigger click on the first payment option after a 5-second delay to set initial value
              setTimeout(function() {
                $('.payment-option').first().click();
              }, 200); // 5000 milliseconds = 5 seconds
            </script>

            <br>

            	<form method="post" id="addfundsForm" action="/addfunds">

											<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 method in site["paymentMethods"] %}
														<option value="{{ method['id'] }}">{{ method['name'] }}</option>
													{% endfor %}
												</select>
											</div>
											<div id="addfunds_fields"></div>
										</form>
										<div id="formSubmitResponseMessage"></div>
										<div id="formSubmitResponseContent"></div>
          </div>
        </div>
        <div id="passbook" class="tab-pane fade">
          <div class="well">
            <!--<table class="table">
              <thead>
                <tr>
                  <th>ID</th>
                  <th>Date</th>
                  <th>Method</th>
                  <th>Enter Amount </th>
                </tr>
              </thead>
              <tbody>
                              </tbody>
            </table>-->

            <div class="fundhistwell">
                          </div>

                      </div>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="bonusbox">
        <div class="row row-flex align-items-center justify-content-center">
          <div class="col-lg-6">
            <div class="nlbcont">
              <h2>Get Huge Payment <span class="highlighted">Bonuses</span></h2>
              <p>We take pride in offering the most competitive bonuses in the market, ensuring our customers receive unparalleled value and rewards for their engagement and loyalty.</p>
            </div>
          </div>
          <div class="col-lg-6">
            <div class="browser-window-osx">
              <div class="header">
                <div class="menu">
                  <span class="close"></span>
                  <span class="minimize"></span>
                  <span class="maximize"></span>
                </div>
                <div class="search">
                  <p><span>{{ site['url'] }}/bonuses</p>
                </div>
              </div>
              <div class="window">
                <div class="bonusslider">
                  <div>
                    <div class="bonusflexes">
                      <img src="https://i.imgur.com/EfsNw6n.png">
                      <div>
                        <span>Bonus</span>
                        <p>Upto 7%</p>
                      </div>
                    </div>
                  </div>
                  <div>
                    <div class="bonusflexes">
                      <img src="https://i.imgur.com/fZy556A.png">
                      <div>
                        <span>Bonus</span>
                        <p>Upto 10%</p>
                      </div>
                    </div>
                  </div>
                  <div>
                    <div class="bonusflexes">
                      <img src="https://i.imgur.com/k84wo2c.png">
                      <div>
                        <span>Bonus</span>
                        <p>Upto 10%</p>
                      </div>
                    </div>
                  </div>
                  <div>
                    <div class="bonusflexes">
                      <img src="https://i.imgur.com/q0Nh1nR.png">
                      <div>
                        <span>Bonus</span>
                        <p>Upto 5%</p>
                      </div>
                    </div>
                  </div>
                  <div>
                    <div class="bonusflexes">
                      <img src="https://i.imgur.com/BhWM7Pg.png">
                      <div>
                        <span>Bonus</span>
                        <p>Upto 10%</p>
                      </div>
                    </div>
                  </div>
                  <div>
                    <div class="bonusflexes">
                      <img src="https://i.imgur.com/ZNno5Xs.png">
                      <div>
                        <span>Bonus</span>
                        <p>Upto 15%</p>
                      </div>
                    </div>
                  </div>
                  <div>
                    <div class="bonusflexes">
                      <img src="https://i.imgur.com/9ptu2lK.png">
                      <div>
                        <span>Bonus</span>
                        <p>Upto 15%</p>
                      </div>
                    </div>
                  </div>
                  <div>
                    <div class="bonusflexes">
                      <img src="https://i.imgur.com/D3z72Sq.png">
                      <div>
                        <span>Bonus</span>
                        <p>Upto 15%</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!--<div class="currencyconvs">
        <div class="row">
          <div class="col-md-6">
            <div class="exchrate">
              <div class="tradingview-widget-container">
                <div class="tradingview-widget-container__widget"></div>
                <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/" rel="noopener nofollow" target="_blank"></a></div>
                <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-single-quote.js" async>
                  {
                    "symbol": "FX_IDC:USDIRR",
                      "width": "100%",
                        "isTransparent": true,
                          "colorTheme": "dark",
                            "locale": "en"
                  }
                </script>
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="exchrate">
              <div class="tradingview-widget-container">
                <div class="tradingview-widget-container__widget"></div>
                <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/" rel="noopener nofollow" target="_blank"></a></div>
                <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-single-quote.js" async>
                  {
                    "symbol": "FX_IDC:USDTRY",
                      "width": "100%",
                        "isTransparent": true,
                          "colorTheme": "dark",
                            "locale": "en"
                  }
                </script>
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="exchrate">
              <div class="tradingview-widget-container">
                <div class="tradingview-widget-container__widget"></div>
                <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/" rel="noopener nofollow" target="_blank"></a></div>
                <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-single-quote.js" async>
                  {
                    "symbol": "FX_IDC:USDBRL",
                      "width": "100%",
                        "isTransparent": true,
                          "colorTheme": "dark",
                            "locale": "en"
                  }
                </script>
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="exchrate">
              <div class="tradingview-widget-container">
                <div class="tradingview-widget-container__widget"></div>
                <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/" rel="noopener nofollow" target="_blank"></a></div>
                <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-single-quote.js" async>
                  {
                    "symbol": "FX_IDC:USDINR",
                      "width": "100%",
                        "isTransparent": true,
                          "colorTheme": "dark",
                            "locale": "en"
                  }
                </script>
              </div>
            </div>
          </div>
        </div>
      </div>-->

      <section class="eleventhSec">
        <div class="">
          <div class="row">
            <div class="col-md-12">
              <div class="panel-group faqpanel" id="accordion">
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <h4 class="panel-title">
                      <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
                        <span>
                          <small>Funds</small>
                          How do I add funds to my SMM panel account?
                        </span>
                        <i class="far fa-plus"></i>
                      </a>
                    </h4>
                  </div>
                  <div id="collapse1" class="panel-collapse collapse in">
                    <div class="panel-body">To add funds to your SMM panel account, go to the "Add Funds" section in your dashboard. Choose your preferred payment method such as PayPal, credit card, or cryptocurrency, and follow the instructions. Once the payment is confirmed, your account balance will be updated accordingly.</div>
                  </div>
                </div>
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <h4 class="panel-title">
                      <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
                        <span>
                          <small>Funds</small>
                          Are there any transaction fees when adding funds?
                        </span>
                        <i class="far fa-plus"></i>
                      </a>
                    </h4>
                  </div>
                  <div id="collapse2" class="panel-collapse collapse">
                    <div class="panel-body">Yes, depending on the payment method you choose, there may be a small transaction fee. The fee amount will be displayed during the payment process. Please review the payment details before confirming your transaction.</div>
                  </div>
                </div>
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <h4 class="panel-title">
                      <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
                        <span>
                          <small>Funds</small>
                          How long does it take for funds to reflect in my account?
                        </span>
                        <i class="far fa-plus"></i>
                      </a>
                    </h4>
                  </div>
                  <div id="collapse3" class="panel-collapse collapse">
                    <div class="panel-body">Funds are usually credited to your account instantly after a successful payment. However, in rare cases, it might take a few minutes or up to 24 hours, depending on the payment provider and processing times.</div>
                  </div>
                </div>
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <h4 class="panel-title">
                      <a data-toggle="collapse" data-parent="#accordion" href="#collapse4">
                        <span>
                          <small>Funds</small>
                          Can I get a refund for unused funds?
                        </span>
                        <i class="far fa-plus"></i>
                      </a>
                    </h4>
                  </div>
                  <div id="collapse4" class="panel-collapse collapse">
                    <div class="panel-body">Refunds for unused funds depend on the specific terms and conditions of the SMM panel. At <b>SMM {{site["site_name"] }}</b>, we offer refunds on a case-by-case basis. Please contact our support team for more details on refund eligibility.</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>


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

<script>
  const dateDiv = document.querySelector('span.pbdate');
  const words = dateDiv.textContent.match(/\S+/g);

  const span1 = document.createElement('span');
  span1.textContent = words[0];

  const span2 = document.createElement('span');
  span2.textContent = words[1];

  dateDiv.innerHTML = '';
  dateDiv.appendChild(span1);
  dateDiv.appendChild(document.createTextNode(' '));
  dateDiv.appendChild(span2);
</script>

<script>
  $('img').mousedown(function (e) {
    if(e.button == 2) { // right click
      return false; // do nothing!
    }
  });
</script>

<!--<script>
  $(document).ready(function(){
    if (document.cookie.indexOf('popupShown=true') == -1) {
      // Show the popup
      $('#tcktModal').modal('show');
      // Set a cookie to indicate that the popup has been shown
      document.cookie = 'popupShown=true';
    }
  });
</script>-->
<script>
  $(document).ready(function(){
    // Show the popup
    $('#tcktModal').modal('show');
    // Set a cookie to indicate that the popup has been shown
  });
</script>

<script>
  function addPlaceholder(){
    var orderId = document.getElementById("field-transaction_id");
    orderId.placeholder = "20231007175526XXXX / T231007175440075570XXXX";
    var paymentAmount = document.getElementById("amount");
    paymentAmount.placeholder = "Enter Payment Amount";
    var upigatewayMob = document.getElementById("field-phone");
    upigatewayMob.placeholder = "+91 998867XXXX";
  }
  setTimeout(addPlaceholder, 1000); // 1000 milliseconds = 1 second
</script>

<script>
  document.getElementById("pasteButton").addEventListener("click", function () {
    // Get the copied text from the clipboard
    navigator.clipboard.readText().then(function (text) {
      // Set the input field value to the copied text
      document.getElementById("field-transaction_id").value = text;
    }).catch(function (error) {
      console.error("Unable to read clipboard data: " + error);
    });
  });
</script>

<script>
  $(document).ready(function(){
    $('.bonusslider').slick({
      slidesToShow: 3,
      slidesToScroll: 1,
      vertical: true,
      autoplay: true,
      autoplaySpeed: 2000, // Set the auto slide speed in milliseconds
      arrows: false, // Hide arrows
      dots: false,   // Hide dots
    });
  });
</script>
<!--<script>
      function showBarcodes() {
        var now = new Date();
        var start = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0); // Start of the current day
        var elapsedTime = (now - start) / 1000; // Elapsed time in seconds

        var interval = 2 * 60 * 60; // 2 hours in seconds
        var cycleTime = 5 * 60 * 60; // 5 hours in seconds (2 hours + 3 hours)

        var cyclePosition = elapsedTime % cycleTime; // Position within the current cycle

        var barcodeOne = document.getElementById('barcodeOne');
        var barcodeTwo = document.getElementById('barcodeTwo');
        var barcodeThree = document.getElementById('barcodeThree');

        if (cyclePosition < interval) {
          // Show first two barcodes
          barcodeOne.style.display = 'inline-block';
          barcodeTwo.style.display = 'inline-block';
          barcodeThree.style.display = 'none';
        } else {
          // Show next two barcodes
          barcodeOne.style.display = 'none';
          barcodeTwo.style.display = 'none';
          barcodeThree.style.display = 'inline-block';
        }
      }

      setTimeout(function() {
        showBarcodes();
        setInterval(showBarcodes, 60000); // Check every minute
      }, 200);
    </script>-->

<!-- Modal -->
<div id="imageModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Image Preview</h4>
      </div>
      <div class="modal-body">
        <img src="" id="modalImage" class="img-responsive">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<script>
  $(document).ready(function(){
    $('#imageModal').on('show.bs.modal', function (e) {
      var image = $(e.relatedTarget).data('image-src');
      $('#modalImage').attr('src', image);
    });
  });
</script>

<script>
  function copyToClipboard(value) {
    navigator.clipboard.writeText(value).then(() => {
      alert('Copied to clipboard: ' + value);
    }, (err) => {
      alert('Failed to copy text: ' + err);
    });
  }
</script>
    </div>

    




<div class="integration-fixed integration-fixed__bottom-right">
    <style>
    .telegram-container {
        position: relative;
    }

    .telegram-button {
        width: 60px;
        height: 60px;
        bottom: 40px;
        right: 40px;
        background-color: transparent !important;
        color: #FFF !important;
        border-radius: 50px;
        text-align: center;
        font-size: 30px;
        box-shadow: 2px 2px 3px #999;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none !important;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        transition: all 0.3s ease;
        transform: scale(0.9)
    }

    .telegram-button::after {
        content: '';
        position: absolute;
        width: 70%;
        height: 70%;
        background-color: #fff !important;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        z-index: -1;
    }

    .telegram-button svg {
        fill: #24A1DE;
        width: 60px;
    }

    .telegram-button:hover {
        transform: scale(1);
    }
</style>


			{% include 'footer.twig' %}

			<script>
				var paymentMethods = {{ site["paymentMethodsJSON"] }};
			</script>
			<script>
				const addfundsRoute = "/addfunds";
function addfundsInit() {
var addfundsForm = $("#addfundsForm");
var fields = $("#addfunds_fields");
var selectedMethod = $("#payment_method").val();
var instructions = paymentMethods[selectedMethod][0].instructions;
$.ajax({
url: addfundsRoute,
data: "action=getForm&selectedMethod=" + selectedMethod,
type: "POST",
success: function (json) {
if (json.success == true) {
if (instructions.length > 0) {
var methodInstruction = '<div class="form-group"><label class="control-label">Instructions</label><div class="panel-body border-solid border-rounded">' + instructions + '</div></div>';
} else {
var methodInstruction = "";
} fields.html(methodInstruction + json.content);
extraFeeInit(selectedMethod);
}
}
});
}

function extraFeeInit(method) {
var fee = parseFloat(paymentMethods[method][0].fee).toFixed(2);
var fields = $("#fee_fields");
if (fee > 0) {
fields.html('<div class="form-group"><label class="control-label">Extra fee</label><input type="text" class="form-control" id="methodExtraFee" disabled value="0.00"/></div><div class="form-group"><label class="control-label">Total Amount</label><input type="text" id="totalAmount" class="form-control" disabled value="0.00" /></div>');
}
}
function preparePrice(t) {
n = 2;
var r = (t = $.trim(t.toString().replace(",", "."))).split(".");
return void 0 !== r[1] && (r[1] = r[1].replace(/0+$/g, ""), r[1].length > n && (n = 2 < r[1].length ? 2 : r[1].length)),
1e3 <= (t =( t = parseFloat(t)).toFixed(n)) && (t = t.toString().replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, "$1" + "")),
t = t.toString().replace(/\.(\d+)$/g, "." + "$1");
return t.toFixed(n)
}
$(document).ready(function () {
$(document).on("keyup", "#paymentAmount", function () {
var selectedMethod = $("#payment_method").val();
var amount = parseFloat($(this).val());
var feePercentage = parseFloat(paymentMethods[selectedMethod][0].fee);
var feeInput = $("#methodExtraFee");
var totalAmountInput = $("#totalAmount");
var fee = amount * (feePercentage / 100);
feeInput.val(preparePrice(fee));
totalAmountInput.val(preparePrice(amount + fee));
});
addfundsInit();
});
$("#payment_method").change(function () {
addfundsInit();
});

$("#addfundsForm").submit(function (e) {
e.preventDefault();
var data = $(this).serialize();

$.ajax({
url: addfundsRoute,
data: data,
type: "POST",
success: function (json) {
if (json.success == true) {
var msgDiv = $("#formSubmitResponseMessage");
msgDiv.html('<div class="alert alert-success alert-dismissible fade show mt-2" role="alert">' + json.message + '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button></div>');
var contentDiv = $("#formSubmitResponseContent");
contentDiv.html(json.content);
} else {
var msgDiv = $("#formSubmitResponseMessage");
msgDiv.html('<div class="alert alert-danger alert-dismissible fade show mt-2" role="alert">' + json.message + '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button></div>');
}
}

});
});
			</script>
