{% extends 'auth-base.html' %}
{% load static %}
{% load humanize %}
{% load widget_tweaks %}
{% load embed_video_tags %}

{% block title %} User Dashboard {% endblock title %}

{% block content %}

<div class="container-scroller">
  <!-- partial:../../partials/_navbar.html -->
  <div id="loader" class="text-center" style="position:fixed; display: none; left: 0; right: 0; top: 0; bottom: 0; z-index: 9999; background-color: #222437; opacity: 0.855;">
      <div class="text-info text-center">
          <img class="" style=" position: absolute; top: 50%; left: 50%; margin-top: -40px; margin-left: -40px;" src="https://res.cloudinary.com/daniela1/image/upload/v1660293044/Solarswappslogo_uqvvxy.png" height="auto" width="60px">
      </div>
  </div>
  <nav class="navbar default-layout col-lg-12 col-12 p-0 fixed-top d-flex flex-row" style='background-color: #1b1b1c; color: #999999;'>
      <div class="text-center navbar-brand-wrapper d-flex align-items-top justify-content-center" style='background-color: #1b1b1c;'>
          <a class="navbar-brand brand-logo" href="/">
              <img alt="" src="https://res.cloudinary.com/daniela1/image/upload/v1760934619/score_logo_otjbu5.png" style='height: 40px; width: auto;'>
          </a>
          <a class="navbar-brand brand-logo-mini" href="/">
              <img alt="" src="https://res.cloudinary.com/daniela1/image/upload/v1760934619/score_logo_otjbu5.png" style='height: 40px; width: auto;'>
          </a>
      </div>
      <div class="navbar-menu-wrapper d-flex align-items-center">
          <button class="navbar-toggler navbar-toggler align-self-center text-dark" type="button" data-toggle="minimize">
              <span class="fa fa-bars text-white"></span>
          </button>

           
          <a href="{% url 'zeeprimeapp:contact_us' %}" class="btn btn-success mr-1">
              <i class="fa fa-comments"></i>
          </a>
          <a href="{% url 'password_change' %}" class="btn btn-outline-primary">
              <i class="fa fa-gear"></i>
          </a>

          <ul class="navbar-nav ml-auto">
              <li class="nav-item dropdown">
                  <a class="nav-link count-indicator" id="notificationDropdown" href="#" data-toggle="dropdown">
                      <i class="fa fa-bell"></i>
                      <span class="count bg-warning" style="font-size: 8px;">3</span>
                  </a>

                   
              </li>
          </ul>
          <button class="navbar-toggler navbar-toggler-right d-lg-none align-self-center" type="button" data-toggle="offcanvas">
              <span class="fa fa-bars "></span>
          </button>
      </div>
  </nav> <!-- partial -->
  
  
  <div class="container-fluid page-body-wrapper">


      <div class="right-sidebar-toggler-wrapper d-none d-md-block" style="left: 10px; right: auto; background-color: #1b1b1c;">
          <div class="sidebar-toggler" style="background-color: #252526;"><a href="{% url 'userdashboard:make_deposit' %}"><i class="fa fa-upload text-success"></i></a></div>
          <div class="sidebar-toggler" style="background-color: #252526;"><a href="{% url 'userdashboard:request_withdraw' %}"><i class="fa fa-download text-warning"></i></a></div>
          <div class="sidebar-toggler" style="background-color: #252526;"><a href="{% url 'userdashboard:account_details' %}"><i class="fa fa-exchange text-primary"></i></a></div>
      </div>

      <nav class="sidebar sidebar-offcanvas" id="sidebar">
          <ul class="nav">
              <li class="nav-item nav-profile">
                  <a href="#" class="nav-link">
                      <div class="profile-image">
                          <img class="img-xs rounded-circle" src="https://res.cloudinary.com/daniela1/image/upload/v1658152279/user_nisaxc.png" alt="">
                          <div class="dot-indicator bg-success"></div>
                      </div>
                      <div class="text-wrapper">
                          <p class="profile-name">{{request.user}}</p>
                       
                      </div>
                      <p></p>
                  </a>
              </li>

              <li class="nav-item nav-profile text-left" style='margin-bottom: 0px; margin-top: -20px;'>
                  <a href="#" class="nav-link">
                      <div class="text-wrapper">
                          <p class="profile-name">Last Login</p>
                          <p class="designation"><small style="font-size: 11px;" class="text-warning"> {{request.user.last_login}}  </small></p>
                      </div>
                  </a>
              </li>

              <li class="nav-item nav-profile text-center" style='margin-bottom: 0px;'>
                  <div id="google_translate_element"></div>
              </li>




              <li class="nav-item">

                  <a class="nav-link" href="{% url 'userdashboard:user_profile' %}">
                      <i class='fa fa-bank i-con'></i>
                      <span class="menu-title">Dashboard</span>
                  </a>
              </li>

              <li class="nav-item">
                  <a class="nav-link" href="{% url 'userdashboard:make_deposit' %}">
                      <i class='fa fa-upload i-con'></i>
                      <span class="menu-title">Deposit</span>
                  </a>
              </li>

              <li class="nav-item">
                  <a class="nav-link" href="{% url 'userdashboard:request_withdraw' %}">
                      <i class='fa fa-download i-con'></i>
                      <span class="menu-title">Withdraw</span>
                  </a>
              </li>

              <li class="nav-item">
                <a class="nav-link" href="{% url 'userdashboard:update_wallet' id %}">
                    <i class="fa fa-briefcase i-con" aria-hidden="true"></i>
                  <span class="menu-title">Wallet</span>
                </a>
              </li>                    
      
              <li class="nav-item">
                  <a class="nav-link" data-toggle="collapse" href="#transact" aria-expanded="false" aria-controls="transact">
                      <i class='fa fa-file-text-o i-con'></i>
                      <span class="menu-title">Transaction History</span>
                  </a>
                  <div class="collapse" id="transact">
                      <ul class="nav flex-column sub-menu">
                          <li class="nav-item">
                              <a class="nav-link" href="{% url 'userdashboard:account_details' %}">All Transaction</a>
                          </li>
                          
                      </ul>
                  </div>
              </li>
                  <li class="nav-item">
                  <a class="nav-link" href="{% url 'userdashboard:update_wallet' id %}">
                      <i class='fa fa-user-o i-con'></i>
                      <span class="menu-title">Update Wallet</span>
                  </a>
              </li>
              
              <li class="nav-item">
                <a class="nav-link" href="{% url 'zeeprimeapp:contact_us' %}">
                    <i class="fa fa-commenting-o i-con" aria-hidden="true"></i>
                  <span class="menu-title">Get Support</span>
                </a>
              </li>                    

              <li class="nav-item">
                  <a class="nav-link" href="{% url 'userdashboard:account_details' %}">
                      <i class='fa fa-users i-con'></i>
                      <span class="menu-title">My Referral</span>
                  </a>
              </li>

              
              <li class="nav-item">
                <a class="nav-link" href="{% url 'password_change' %}">
                    <i class='fa fa-cog i-con'></i>
                    <span class="menu-title">Password & Security</span>
                </a>
            </li>

              <li class="nav-item">
                  <a class="nav-link" href="{% url 'userdashboard:logout' %}">
                      <i class='fa fa-sign-out i-con'></i>
                      <span class="menu-title">Log Out</span>
                  </a>
              </li>


          </ul>
      </nav>
         <div class="main-panel">
          <div class="content-wrapper">
              <div class="row ">
                  <div class="col-12 py-2">
                  </div>
              </div>

              <div class="row pt-3">
                  <div class="col-md-7  stretch-card">
                      <div class="card">
                          <div class="card-header header-sm d-flex justify-content-between align-items-center" style='background-color: #1b1b1c;'>
                              <h4 class="card-title text-dark">Account Summary</h4>
                              <a class="btn btn-primary btn-sm" href="{% url 'userdashboard:account_details' %}"><i class="fa fa-file-text"></i> History</a>
                          </div>
                          <div class="card-body d-flex flex-column">
                              <div class="d-flex align-items-center justify-content-between">
                                  <div class=" align-items-center">
                                      <p style="margin-bottom: 0.5rem;" class="text-muted">Date Joined</p>
                                      <h1 class="font-weight-medium mb-0" id="ab">{{request.user.date_joined}}</h1>
                                  </div>
                              </div>
                              <div class="d-flex flex-row mt-4 mb-4">
                                  <div class="wrapper">
                                      <p class="mb-0 text-muted">User</p>
                                      <div class="d-flex align-items-center">
                                          <h5 class="font-weight-medium mb-0" id="bb">{{ request.user }}</h5>

                                      </div>
                                  </div>
                                  <div class="wrapper ml-4 border-left pl-4">
                                      <p class="mb-0 text-muted">Account Status </p>
                                      <div class="d-flex align-items-center">
                                          <h5 class="font-weight-medium mb-0" id="lp">ACTIVE</h5>
                                          <!--div class="badge badge-success ml-2 badge-sm">NAN%</div-->
                                      </div>
                                  </div>
                              </div>

                              <div class="d-flex flex-row mb-3">

                                  <a href="{% url 'userdashboard:make_deposit' %}" class="btn btn-success mr-1"><i class="fa fa-upload"></i> Deposit</a>
                                  <a href="{% url 'userdashboard:request_withdraw' %}" class="btn btn-outline-warning mr-1"><i class="fa fa-download"></i> Withdraw</a>
                                 
                              </div>
                              <div class="d-flex flex-row">
                                  <p><small class="text-muted mt-5">Your Available balance is the real balance you can withdraw from while your book balance is your potential balance that will become available when your deposit plan is completed.</small></p>
                              </div>
                          </div>
                      </div>
                  </div>

                  <div class="col-md-5 stretch-card d-none d-md-block">
                      <div class="card text-center">
                          <div class="card-body d-flex flex-column px-2">
                              <div class="wrapper">
                                  <h5>Invite Your Friends</h5>
                                  <!--p><small class="text-muted ">Earn more when you refer your friends to invest with us. The reward on our referral program is dependent on the deposit plans.</small></p>
                                 

                                  <div class="row">
                                      <div class="col-6 col-md-12">
                                          <form class="forms-sample mt-2" action='?a=referals' method="post"><input type="hidden" name="form_id" value="16590264755046"><input type="hidden" name="form_token" value="479b7dfdb9fac8b54be115c5f2c074dc">
                                              <a href="#" class="btn btn-warning btn-block"><i class='fa fa-envelope'></i> Email</a>
                                          </form>
                                      </div>

                                      <div class="col-6 col-md-12">
                                          <form class="forms-sample mt-2" action='?a=referals' method="post"><input type="hidden" name="form_id" value="16590264755046"><input type="hidden" name="form_token" value="479b7dfdb9fac8b54be115c5f2c074dc">
                                              <a href="https://facebook.com/"></i> Facebook</a>
                                          </form>
                                      </div>

                                      <div class="col-6 col-md-12">
                                          <form class="forms-sample mt-2" action='?a=referals' method="post"><input type="hidden" name="form_id" value="16590264755046"><input type="hidden" name="form_token" value="479b7dfdb9fac8b54be115c5f2c074dc">
                                              <a href="https://wa.me/"></i> Whatsapp</a>
                                          </form>
                                      </div>

                                      <div class="col-6 col-md-12">
                                          <form class="forms-sample mt-2" action='?a=referals' method="post"><input type="hidden" name="form_id" value="16590264755046"><input type="hidden" name="form_token" value="479b7dfdb9fac8b54be115c5f2c074dc">
                                              <a href="https://t.me/" class="btn btn-outline-primary btn-block"><i class='fa fa-paper-plane'></i> Telegram</a>
                                          </form>
                                      </div>
                                  </div-->

                                  <form class="forms-sample mt-3"><input type="hidden" name="form_id" value="16590264755046"><input type="hidden" name="form_token" value="479b7dfdb9fac8b54be115c5f2c074dc">
                                      <div class="form-group">
                                          <input type="text" style="background-color: #eee; border-color: #eee;" readonly id='ref_cop' class="form-control" value="http://{{request.get_host}}/ref={{request.user}}/">
                                      </div>
                                      {% comment %} <button id='ref_btn' type="button" onclick="copy_ref('ref_cop','#ref_btn');" class="btn btn-primary btn-block"><i class='fa fa-copy'></i> Copy Referral Link</button> {% endcomment %}
                                  </form>

                              </div>

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

<div class="row">
                  <div class="col-md-12 grid-margin">
                      <div class="card">
                          <div class="card-header header-sm d-flex justify-content-between align-items-center" style="background-color: rgba(0,0,0,0.3);">
                              <h4 class="card-title">Popular Market</h4>
                              <a class="btn btn-inverse-success btn-sm" href="{% url 'userdashboard:make_deposit' %}"><i class="fa fa-upload"></i> Invest Now</a>
                          </div>
                          <div class="card-body">
                            <div class="row">
                              <!-- Left col -->
                              <section class="col-lg-12 connectedSortable">
                                <!-- quick email widget -->
                                <div class="box box-info">
                                  <div class="box-header">
                                    <i class="fa fa-money"></i>
                                    <h3 class="box-title">ALL TRANSACTOINS</h3>
                                    <!-- tools box -->
                                  </div>
                                  <div style="overflow-x:auto;" class="box-body">
                                      <table class="table">
                                          <thead>
                                            <tr  style="color: #000;">
                                              <th scope="col">#</th>
                                              <th scope="col">AMOUNT ($)</th>
                                              <th scope="col">TYPE</th>
                                              <th scope="col">TRANSACTION REF</th>
                                              <th scope="col" >DATE</th>
                                              <th scope="col">STATUS</th>
                                            </tr>
                                          </thead>
                                          <tbody> 
                                            {% for tran in transactions  %}
                                              <tr>
                                                  
                                                  {% if tran.status == "PENDING" %}
                                                  <td class="text-danger" scope="row">{{forloop.counter}}</th>
                                                    <td class="text-danger bg-dark">{{ tran.amount|intcomma}}</td>
                                                    <td class="text-danger bg-dark">{{tran.transaction_type}}</td>
                                                    <td class="text-danger bg-dark">{{tran.transaction_referrence}}</td>
                                                    <td class="text-danger bg-dark">{{tran.date}}</td>
                                                    <td class="text-danger bg-dark">{{tran.status}} <i class="fa fa-times"></i></td>
                  
                                                    {% else %}
                                                    <td class="text-success" scope="row">{{forloop.counter}}</th>
                                                      <td class="text-success bg-dark">{{ tran.amount|intcomma}}</td>
                                                      <td class="text-success bg-dark">{{tran.transaction_type}}</td>
                                                      <td class="text-success bg-dark">{{tran.transaction_referrence}}</td>
                                                      <td class="text-success bg-dark">{{tran.date}}</td>
                                                      <td class="text-success bg-dark">{{tran.status}} <i class="fa fa-check"></i></td>
                                                  {% endif %} 
                  
                                              </tr>                               
                                            {% endfor %}
                                          </tbody>
                                        </table>
                                        <small>Latest transactions</small>
                                  </div>
                                </div>
                  
                              </section><!-- /.Left col -->
                              <!-- right col (We are only adding the ID to make the widgets sortable)-->
                              <section class="col-lg-12 connectedSortable">
                  
                                <!-- Map box -->
                                <div class="box box-solid bg-light-blue-gradient">
                                   <!-- quick email widget -->
                                <div class="box box-info">
                                  <div class="box-header">
                                    <i class="fa fa-usd fa-2x"></i>
                                    <h3 class="box-title">REFERRAL BONUS</h3>
                                    <div id="google_translate_element"></div>
                                    <!-- tools box -->
                                  </div>
                                  <div style="overflow-x:auto;" class="box-body">
                                    {% if messages %} 
                                        {% for msg in messages %}
                                        <div class="alert alert-success text-center" role="alert">
                                          {{ msg }}
                                        </div>
                                        {% endfor %} 
                                      {% endif %}
                                      <table class="table">
                                          <thead>
                                            <tr  style="color: #000;">
                                              <th scope="col">USERNAME</th>
                                            </tr>
                                          </thead>
                                          <tbody> 
                                              {% for value in each_user_bonus_for_referrer %}
                                                  <tr>
                                                  <td class="text-success">{{ value.user}}</td>
                                                </tr> 
                                              {% endfor %}
                                          </tbody>
                                        </table>
                                        <div class="box-footer clearfix">
                                          <a>
                                          <button class="pull-right btn btn-success" id="sendEmail">Total bonus accumulated: ${{referral_bonus.accumulated_bonus|intcomma}} <i class="fa fa-money"></i></button>
                                        </a>
                                        </div>
                                        
                                        {% if referral_bonus.accumulated_bonus > 0 %}
                                        <a href="{% url 'userdashboard:withdraw_bonus' %}">
                                          <button class="pull-right btn btn-primary" id="sendEmail">Withdraw Bonus <i class="fa fa-money"></i></button>
                                        </a>
                                        {% else %}
                                          <div class="box-footer clearfix">
                                            <a href="{% url 'userdashboard:withdraw_bonus' %}">
                                              <button disabled class="pull-right btn btn-success" id="sendEmail">Withdraw Bonus <i class="fa fa-money"></i></button>
                                            </a>
                                          </div>
                                        {% endif %}
                                  </div>
                                </div>
                                <!-- /.box -->
                  
                              </section><!-- right col -->
                            </div><!-- /.row (main row) -->
                          </div>
                      </div>
                  </div>
              </div>
              <style>
              
               .ms{
                  width: 50%;
              }
              </style>




              <div class="row">

                  <!-- <div class="col-md-5 stretch-card d-block d-md-none">
                      <div class="card text-center">
                          <div class="card-body d-flex flex-column">
                              <div class="wrapper">
                                  <h5>Invite Your Friends</h5>
                                  <p><small class="text-muted ">Earn more when you refer your friends to invest with us. The reward on our referral program is dependent on the deposit plans.</small></p>
                                  <!--form class="forms-sample mt-3" action="?a=referals" method="post">
                    <div class="form-group">
                      <input type="email" class="form-control" name='email' placeholder="Your Friend's Email Address"> </div>
                      <button type="submit" name='invite_email' class="btn btn-warning btn-block"><i class='fa fa-envelope'></i> Invite Via Email</button>
                  </form-->

                                  <!-- <div class="row">
                                      <div class="col-6 col-md-12">
                                          <form class="forms-sample mt-2" action='?a=referals' method="post"><input type="hidden" name="form_id" value="16590264755046"><input type="hidden" name="form_token" value="479b7dfdb9fac8b54be115c5f2c074dc">
                                              <a href="#" class="btn btn-warning btn-block"><i class='fa fa-envelope'></i> Email</a>
                                          </form>
                                      </div>

                                      <div class="col-6 col-md-12">
                                          <form class="forms-sample mt-2" action='?a=referals' method="post"><input type="hidden" name="form_id" value="16590264755046"><input type="hidden" name="form_token" value="479b7dfdb9fac8b54be115c5f2c074dc">
                                              <a href="https://facebook.com/" class="btn btn-primary btn-block"><i class='fa fa-facebook'></i> Facebook</a>
                                          </form>
                                      </div>

                                      <div class="col-6 col-md-12">
                                          <form class="forms-sample mt-2" action='?a=referals' method="post"><input type="hidden" name="form_id" value="16590264755046"><input type="hidden" name="form_token" value="479b7dfdb9fac8b54be115c5f2c074dc">
                                              <a href="https://wa.me/+447552137281" class="btn btn-success btn-block"><i class='fa fa-whatsapp'></i> Whatsapp</a>
                                          </form>
                                      </div>

                                      <div class="col-6 col-md-12">
                                          <form class="forms-sample mt-2" action='?a=referals' method="post"><input type="hidden" name="form_id" value="16590264755046"><input type="hidden" name="form_token" value="479b7dfdb9fac8b54be115c5f2c074dc">
                                              <a href="https://t.me/pearlsol" class="btn btn-outline-primary btn-block"><i class='fa fa-paper-plane'></i> Telegram</a>
                                          </form>
                                      </div>
                                  </div>

                                  <form class="forms-sample mt-3"><input type="hidden" name="form_id" value="16590264755046"><input type="hidden" name="form_token" value="479b7dfdb9fac8b54be115c5f2c074dc">
                                      <div class="form-group">
                                          {% comment %} <input type="text" style="background-color: #eee; border-color: #eee;" readonly id='ref_cop' class="form-control" value="https://heritagetrusteesltd.com/?ref=jjj"> {% endcomment %}
                                      </div>
                                      {% comment %} <button id='ref_btn' type="button" onclick="copy_ref('ref_cop','#ref_btn');" class="btn btn-primary btn-block"><i class='fa fa-copy'></i> Copy Referral Link</button> {% endcomment %}
                                  </form>

                              </div>

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


                  <div class="col-md-12  stretch-card">
                      <div class="card">
                          <div class="card-body px-0">
                              <h4 class="card-title text-center">Recent Transaction</h4>
                              <div class="">
                                  <table class="table  table-striped">
                                      <tbody>


                                      </tbody>
                                  </table>
                              </div>
                              <div class='text-center'>
                                  <a class=" btn btn-outline-success mt-3 px-3" href="{% url 'userdashboard:account_details' %}">Show all transactions</a>
                              </div>
                          </div>
                      </div>
                  </div>

               

              </div>


          </div>


        
<div style="margin-bottom: 20px;"></div>
          <div class='bottom-menu d-block d-md-none'>
              <a href="{% url 'userdashboard:account_details' %}" class=''><i class="fa fa-gift"></i> Bonus</a>
              <a href="{% url 'userdashboard:user_profile' %}" class='active-p'><i class="fa fa-home"></i> Account</a>
              <a href="{% url 'userdashboard:account_details' %}" class=''><i class="fa fa-exchange"></i> Account History</a>
              <a href="{% url 'zeeprimeapp:investment_plans}" class=''><i class="fa fa-database"></i> Plans</a>
          </div>
      </div>
      <!-- main-panel ends -->
  </div>
  <!-- page-body-wrapper ends -->
</div>

{% endblock content %}