{% include 'header.twig' %}
<div class="top-padding"></div>
 <!-- Main variables *content* -->


<div class="container-fluid">
  <div class="row">
    <div class="col-md-12">
      <div class="page-header-lgin">
        <div class="contpghdr">
          <span class="bdghdr threedblue">{{ site["site_name"] }}</span>
          <h2><span>REFER</span> & EARN</h2>
          <p>Earn upto 2% commission on every orders placed by your refferal.</p>
        </div>
        <img src="https://cdn.mypanel.link/edeed4/fcngljc30y4nsgx1.png">
      </div>
    </div>
  </div>
</div>

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-7">
      <div class="well affwell">
        <div class="form-group">
          <h4>
            Share Referral Link, Earn Rewards!
          </h4><br>
          <div class="refflex">
            <input class="form-control" id="referralLink" value="{{ site['url'] }}/affiliates?ref={{ user['ref_code'] }}" readonly="">
          <button class="btn btn-primary" onclick="copyReferralLink()">Copy</button>
          </div>
        </div>
        
        <script>
  function copyReferralLink() {
    var referralLink = document.getElementById("referralLink");
    referralLink.select();
    referralLink.setSelectionRange(0, 99999); // For mobile devices
    document.execCommand("copy");
    alert("Referral link copied to clipboard!");
  }
</script>

        <div class="row">
          <div class="col-sm-6">
            <div class="card affcard">
              <div class="card-body">
                <div>
                  <h2 class="widget-value">{{settings["referral_commision"]}}%</h2>
                  <label class="widget-title">Commission Rate</label>
                </div>
                <div class="widget-icon" style="color: #fff;background: linear-gradient(0deg, #ff6b8982 0%, #ff6b89 100%);border: 4px solid #ff98ad;box-shadow: 0px 1.18245px 2.3649px 0px #ff6b89, 0px 0px 0px 1.18245px #ffa3b6, rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px !important;">
                  <i class="ti ti-circle-percentage"></i>
                </div>
              </div>
            </div>
          </div>
          <div class="col-sm-6">
            <div class="card affcard">
              <div class="card-body">
                <div>
                  <h2 class="widget-value">{{ currency['symbol']}} {{ (settings["referral_payout"]*currency["value"]) }}</h2>
                  <label class="widget-title">Minimum Payout</label>
                </div>
                <div class="widget-icon" style="color: #fff;background: linear-gradient(0deg, #2ac85dcc 0%, #24b252 100%);border: 4px solid #2ac85d;box-shadow: 0px 1.18245px 2.3649px 0px #1ea54a, 0px 0px 0px 1.18245px #2ac85d, rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px !important;">
                  <i class="ti ti-moneybag"></i>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-md-4 col-sm-6">
            <div class="card affcard">
              <div class="card-body">
                <div>
                  <h2 class="widget-value">{{ ref['referral_clicks'] }}</h2>
                  <label class="widget-title">Total Visits</label>
                </div>
                <div class="widget-icon" style="color: #fff;background: linear-gradient(0deg, #6b93ffc4 0%, #6b93ffe3 100%);border: 4px solid #6b93ff;box-shadow: 0px 1.18245px 2.3649px 0px #6b93ff, 0px 0px 0px 1.18245px #4a76ec, rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px !important;">
                  <i class="ti ti-click"></i>
                </div>
              </div>
            </div>
          </div>
         <div class="col-md-4 col-sm-6">
            <div class="card affcard">
              <div class="card-body">
                <div>
                  <h2 class="widget-value">{{ currency['symbol'] }}{{ ref['referral_rejected_commision']*currency["value"] }}</h2>
                  <label class="widget-title">Unpaid Referral</label>
                </div>
                <div class="widget-icon" style="color: #fff;background: linear-gradient(0deg, #f09772c7 0%, #f09772ed 100%);border: 4px solid #f09772;box-shadow: 0px 1.18245px 2.3649px 0px #f09772, 0px 0px 0px 1.18245px #e1794f, rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px !important;">
                  <i class="ti ti-user-plus"></i>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-4 col-sm-6">
            <div class="card affcard">
              <div class="card-body">
                <div>
                  <h2 class="widget-value">{{ currency['symbol'] }}{{ ref['referral_earned_commision']*currency["value"] }}</h2>
                  <label class="widget-title">Paid Referrals</label>
                </div>
                <div class="widget-icon" style="color: #fff;background: linear-gradient(0deg, #41d8a4a6 0%, #47deaa 100%);border: 4px solid #41d8a4;box-shadow: 0px 1.18245px 2.3649px 0px #41d8a4, 0px 0px 0px 1.18245px #24a478, rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px !important;">
                  <i class="ti ti-accessible"></i>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-4 col-sm-6">
            <div class="card affcard">
              <div class="card-body">
                <div>
                  <h2 class="widget-value">0%</h2>
                  <label class="widget-title">Conversion Rate</label>
                </div>
                <div class="widget-icon" style="color: #fff;background: linear-gradient(0deg, #f3e57ae6 0%, #f7e446 100%);border: 4px solid #eada5b;box-shadow: 0px 1.18245px 2.3649px 0px #eddd62, 0px 0px 0px 1.18245px #d7c74a, rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px !important;">
                  <i class="ti ti-user-dollar"></i>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-4 col-sm-6">
            <div class="card affcard">
              <div class="card-body">
                <div>
                  <h2 class="widget-value">{{ currency['symbol'] }}{{ ref['referral_total_commision']*currency["value"] }}</h2>
                  <label class="widget-title">Total Earnings</label>
                </div>
                <div class="widget-icon" style="color: #fff;background: linear-gradient(0deg, #d67aff 0%, #cf6afc 100%);border: 4px solid #cb55ff;box-shadow: 0px 1.18245px 2.3649px 0px #d67aff, 0px 0px 0px 1.18245px #b44ae2, rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px !important;">
                  <i class="ti ti-filter-dollar"></i>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-4 col-sm-6">
            <div class="card affcard">
              <div class="card-body">
                <div>
                  <h2 class="widget-value">{{ ref['referral_sign_up'] }}</h2>
                  <label class="widget-title">Successful referrals</label>
                </div>
                <div class="widget-icon" style="color: #fff;background: linear-gradient(0deg, #ff8585 0%, #f97676 100%);border: 4px solid #ff6b6b;box-shadow: 0px 1.18245px 2.3649px 0px #f35b5b, 0px 0px 0px 1.18245px #d64040, rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px !important;">
                  <i class="ti ti-adjustments-dollar"></i>
                </div>
              </div>
            </div>
          </div>
                  </div>
      </div>
      
          </div>
    <div class="col-lg-5">
      <div class="panel-group" id="accordion">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a class="togler collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapse4">
                Step One: Copy Your Referral Link
                <span class="expandicator">
                  <i class="fa fa-plus"></i>
                  <i class="fa fa-minus"></i>
                </span>
              </a>
            </h4>
          </div>
          <div id="collapse4" class="panel-collapse collapse">
            <div class="panel-body">
              In your affiliate dashboard, find and copy your unique referral link. When users register using your link, you'll receive a commission for every payment they make on our site.
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a class="togler collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapse5">
                Step Two: Promote Your Link
                <span class="expandicator">
                  <i class="fa fa-plus"></i>
                  <i class="fa fa-minus"></i>
                </span>
              </a>
            </h4>
          </div>
          <div id="collapse5" class="panel-collapse collapse">
            <div class="panel-body">
              Utilize your referral link to promote our services. Share it on various platforms such as your website, social media, email campaigns, Skype, WhatsApp, or any other channel where you can connect with potential customers.
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a class="togler collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapse6">
                Step Three: Track Your Progress
                <span class="expandicator">
                  <i class="fa fa-plus"></i>
                  <i class="fa fa-minus"></i>
                </span>
              </a>
            </h4>
          </div>
          <div id="collapse6" class="panel-collapse collapse">
            <div class="panel-body">
              Regularly check our affiliate dashboard to keep tabs on the performance of your referral link. You'll be able to monitor the number of clicks, conversions, and the commissions you've earned.
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a class="togler collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapse7">
                Step Four: Reach Minimum Payout
                <span class="expandicator">
                  <i class="fa fa-plus"></i>
                  <i class="fa fa-minus"></i>
                </span>
              </a>
            </h4>
          </div>
          <div id="collapse7" class="panel-collapse collapse">
            <div class="panel-body">
              Once your earnings have reached the minimum payout threshold, you can initiate the withdrawal process. This allows you to transfer your earnings to your {{ site["site_name"] }} Balance.
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a class="togler collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapse8">
                Step Five: Withdraw and Use Your Balance
                <span class="expandicator">
                  <i class="fa fa-plus"></i>
                  <i class="fa fa-minus"></i>
                </span>
              </a>
            </h4>
          </div>
          <div id="collapse8" class="panel-collapse collapse">
            <div class="panel-body">
              To access your earnings, open a support ticket, and our team will assist you in transferring your earnings to your ElectroSMM Balance. You can then use this balance to purchase our services or continue growing your earnings.
            </div>
          </div>
        </div>
      </div>
    </div>

<div class="col-lg-12">
<div class="well well-float">
        <table class="table ">
          <thead>
            <tr>
              <th>Referral link</th>
              <th>Commission rate</th>
              <th>Minimum payout</th>
            </tr>
          </thead>
<tbody>
	{% for ref_payout in ref_payouts %}
														<tr>
<td>{{ ref_payout['r_p_requested_at'] }}</td>
<td>{{ currency['symbol'] }}{{ ref_payout['r_p_amount_requested']*currency["value"] }}</td>
<td>{{ ref_payout['r_p_updated_at'] }}</td>
<td>
																{% if (ref_payout['r_p_status'] == 0)  %}
																	{{ "Pending" }}
																{% elseif (ref_payout['r_p_status'] == 1)  %}
																	{{ "Disapproved" }}
																{% elseif (ref_payout['r_p_status'] == 2)  %}
																	{{ "Approved" }}
																{% elseif (ref_payout['r_p_status'] == 3)  %}
																	{{ "Rejected" }}
																{% endif %}
															</td>

														</tr>
													{% endfor %}
												</tbody>
        </table>
      </div>
      </div>
    </div>
  </div>
</div>
</div>	



<footer>
      <div class="container-fluid">
        <div class="row">
          <div class="col-sm-6">
            <a class="footer-brand" href="/"> <img style="max-width:205px;" src="{{ site['logo'] }}" alt="{{ site["site_name"] }}" title="{{ site["site_name"] }}"> </a>
          </div>
          <div class="col-sm-6">
            <p class="footerp">
              © 2021-2024, {{ site["site_name"] }}, Inc. or its affiliates
            </p>
          </div>
        </div>
      </div>
    </footer>
{% include 'footer.twig' %}