{% include 'header.twig' %}
<div class="top-padding"></div>
<body class=" userauth">
<!-- Main variables *content* -->
<style>
  .card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin: 10px;
    padding: 20px;
    text-align: center;
  }
  .card h3 {
    margin-bottom: 15px;
  }
  .card p {
    margin: 0;
  }
</style>
<section class="dashcards">
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-4">
        <div class="card profcarddash">
          <img class="profilePicture" src="https://i.imgur.com/thHPBoh.png" alt="Profile Picture">
          <p class="usernameprof"><small>#{{ user["userid"] }}</small> {{ user["username"] }}</p>
          <p class="usernameprofemail"><span class="far fa-envelope"></span> {{ user['email'] }}</p>
          <hr>
          <div class="twobalcard">
            <div class="cardbal">
              <h3>Balance</h3>
              <p>{{ user["balance"]}}</p>
            </div>
            <div class="cardbal">
              <h3>Spent</h3>
              <p>{{ user["spent"]}}</p>
            </div>
          </div>
        </div>

        <!-- News Updates Card -->
        <div class="card">
          <div class="card-header">
            Recent Note
          </div>
          <div class="card-text">
            <p style="margin-bottom: 0px; line-height: 1.3; font-size: 16px; font-family: &quot;DM Sans&quot;, sans-serif;">📢 Your Preference, Our Priority!</p><p style="margin-bottom: 0px; line-height: 1.3; font-size: 16px; font-family: &quot;DM Sans&quot;, sans-serif;">We’re planning some tweaks to our Instagram Targeted services categories and would love your input. Would you prefer all services stacked in one category, or separate categories for targeted countries? Let us know!&nbsp;&nbsp;</p>
          </div>
        </div>

        <div class="card">
          <div class="card-header">
            Contact Us
          </div>
          <div class="card-text">
            <div class="contactlistsdash">
              <div class="contactlistli">
                <span><i class="fab fa-skype"></i> Skype:</span>
                <a href="/dashboard">9085312520</a>
              </div>
              <div class="contactlistli">
                <span>WhatsApp:</span>
                <a href="/dashboard">9085312520</a>
              </div>
              <div class="contactlistli">
                <span>Email:</span>
                <a href="/dashboard">{{ site["site_name"] }}@gmail.com</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-8">
        <!-- User Details -->
        <div class="row">
          <div class="col-md-12">
            <div class="laterSlider">
              <!-- Child Panel Card -->
              <div class="card threeddarkblue childcardpanel">
                <div class="card-body">
                  <div class="cardbodycont">
                    <h3>
                      Best Reseller Panel
                    </h3>
                    <div>
                      <strike>$25 / month</strike> <span class="curnpric">$5 / month</span>
                    </div>
                  </div>
                  <div class="ctabtncardpanel">
                    <a class="btn threedblue ctabtn" href="/child-panels">Get This Instant!</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Refer Row -->
        <div class="row">
  <div class="col-md-12">
    <div class="well" style="padding: 10px;margin-top: 10px;">
      <div class="form-group" style="margin: 0;">
        <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>
    </div>
  </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>

        <!-- Order Details -->
        <div class="row">
          <div class="col-sm-12">
            <p class="headingp">
              Total Stastics
            </p>
          </div>
          <div class="col-sm-6 col-md-4">
            <div class="card redbg">
              <i class="fad fa-users"></i>
              <h3>Username</h3>
              <p>{{ user["username"] }}</p>
            </div>
          </div>
          <div class="col-sm-6 col-md-4">
            <div class="card greenbg">
              <i class="fad fa-box-check"></i>
              <h3>Email</h3>
              <p>{{ user['email'] }}</p>
            </div>
          </div>
          <div class="col-sm-6 col-md-4">
            <div class="card bluebg">
              <i class="fad fa-shopping-cart"></i>
              <h3>Balance</h3>
              <p>{{ user["balance"]}}</p>
            </div>
          </div>
          <div class="col-sm-6 col-md-4">
            <div class="card yelbg">
              <i class="fad fa-ticket-alt"></i>
              <h3>Spent</h3>
              <p>{{ user["spent"]}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Modal -->
<div id="vipModal" 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">Exclusive VIP Status Benefits</h4>
        <p>Unlock Premium Perks with <a href="#"></a> VIP Status</p>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-6">
            <div class="card">
              <img src="child-panel-icon.png" alt="Child Panel Icon"> <!-- Replace with actual icon image -->
              <h4>Free Child Panel</h4>
              <p>Say goodbye to high monthly panel costs! With a free child panel, you gain the ability to place an unlimited number of orders without the burden of paying for website hosting. For more information, visit the /child-panel page!</p>
            </div>
          </div>
          <div class="col-md-6">
            <div class="card">
              <img src="priority-ticket-icon.png" alt="Priority Ticket Icon"> <!-- Replace with actual icon image -->
              <h4>Priority Ticket Response</h4>
              <p>Experience top-notch service with expedited ticket responses from our dedicated Agents. Your inquiries and issues will be addressed with the utmost priority.</p>
            </div>
          </div>
          <div class="col-md-6">
            <div class="card">
              <img src="skype-icon.png" alt="Skype Icon"> <!-- Replace with actual icon image -->
              <h4>Direct Skype Chat</h4>
              <p>Establish direct contact with Followwiz administrators for personalized and attentive support. We’re here to assist you one-on-one, ensuring your needs are met efficiently.</p>
            </div>
          </div>
          <div class="col-md-6">
            <div class="card">
              <img src="service-research-icon.png" alt="Service Research Icon"> <!-- Replace with actual icon image -->
              <h4>Tailored Service Research</h4>
              <p>Enjoy the freedom to request the specific services you need. Furthermore, if you're actively purchasing a particular service from another panel, we'll work to secure it for you at a more competitive rate. Your satisfaction is our priority.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </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' %}