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

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

{% block content %}

    <!-- scroll-to-top start -->
    <div class="scroll-to-top">
        <span class="scroll-icon">
          <i class="fa fa-rocket" aria-hidden="true"></i>
        </span>
      </div>
      <!-- scroll-to-top end -->
  
    <div class="full-wh">
      <!-- STAR ANIMATION -->
      <div class="bg-animation">
        <div id='stars'></div>
        <div id='stars2'></div>
        <div id='stars3'></div>
        <div id='stars4'></div>
      </div><!-- / STAR ANIMATION -->
    </div>
    <div class="page-wrapper">
        <!-- header-section start  -->
    <header class="header">
      <div class="header__bottom">
        <div class="container">
          <nav class="navbar navbar-expand-xl p-0 align-items-center">
            <a class="site-logo site-title" href="{% url 'userdashboard:login' %}"><img src="https://res.cloudinary.com/daniela1/image/upload/v1664313966/IMG2_dhqgdk.jpg" alt="site-logo"></a>
            <div id="google_translate_element"></div>
  
  <script type="text/javascript">
  function googleTranslateElementInit() {
    new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
  }
  </script>
  
  <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
            <ul class="account-menu responsive-account-menu ml-3">
                
                          <li class="icon"><a href="{% url 'userdashboard:user_profile' %}"><i class="las la-user"></i></a></li>
                        </ul> 
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="menu-toggle"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav main-menu ml-auto">
                <li> <a href="{% url 'userdashboard:user_profile' %}">Dashboard</a></li>
                <li><a href="{% url 'userdashboard:account_details' %}">Investment</a></li>
                <li><a href="{% url 'userdashboard:make_deposit' %}">Deposit</a></li>
                <li><a href="{% url 'userdashboard:request_withdraw' %}">Withdraw</a></li>
                <li><a href="{% url 'userdashboard:account_details' %}">Transactions</a></li>
                <li class="menu_has_children"><a href="#0">Referrals</a>
                  <ul class="sub-menu">
                    <li><a href="{% url 'userdashboard:account_details' %}">Referred Users</a></li>
                  </ul>
                </li>
                <li class="menu_has_children"><a href="#0">Account</a>
                  <ul class="sub-menu">
                    <li><a href="{% url 'userdashboard:update_wallet' id %}">Update Wallet</a></li>
                                      <li><a href="{% url 'password_change' %}">Change Password</a></li>
                    <li><a href="{% url 'zeeprimeapp:contact_us' %}">Get Support</a></li>
                    <li><a href="{% url 'userdashboard:logout' %}"> Logout</a></li>
                  </ul>
                </li>
              </ul>
              <div class="nav-right">
                <ul class="account-menu ml-3">
                                  <li class="icon"><a href="{% url 'userdashboard:user_profile' %}"><i class="las la-user"></i></a></li>
                                </ul>  
              </div>
            </div>
          </nav>
        </div>
      </div><!-- header__bottom end -->
    </header>
    <!-- header-section end  -->
  
      <!-- inner hero start -->
      <section class="inner-hero bg_img" data-background="https://res.cloudinary.com/daniela1/image/upload/v1664313966/IMG2_dhqgdk.jpg">
        <div class="container">
          <div class="row">
            <div class="col-lg-6">
              <h2 class="page-title">Dashboard</h2>
              <ul class="page-breadcrumb">
                <li><a href="{% url 'zeeprimeapp:home' %}">Home</a></li>
                <li>Dashboard</li>
              </ul>
            </div>
          </div>
        </div>
      </section>
      <!-- inner hero end -->
   <div class="row">
            <div class="col-lg-6">
          <button type="button" onclick="window.location='/account/user/make-deposit/'">Deposit Now</button> <button type="button2" onclick="window.location='/account/user/withdraw-balance/'">Withdraw Now</button> <button type="button" onclick="window.location='/account/user/make-deposit/'">Invest Now</button>
          </div>
  
  <div style="height:62px; background-color: #1D2330; overflow:hidden; box-sizing: border-box; border: 1px solid #282E3B; border-radius: 4px; text-align: right; line-height:14px; block-size:62px; font-size: 12px; font-feature-settings: normal; text-size-adjust: 100%; box-shadow: inset 0 -20px 0 0 #262B38;padding:1px;padding: 0px; margin: 0px; width: 100%;"><div style="height:40px; padding:0px; margin:0px; width: 100%;"><iframe src="https://widget.coinlib.io/widget?type=horizontal_v2&theme=dark&pref_coin_id=1505&invert_hover=" width="100%" height="36px" scrolling="auto" marginwidth="0" marginheight="0" frameborder="0" border="0" style="border:0;margin:0;padding:0;"></iframe></div><div style="color: #626B7F; line-height: 14px; font-weight: 400; font-size: 11px; box-sizing: border-box; padding: 2px 6px; width: 100%; font-family: Verdana, Tahoma, Arial, sans-serif;"><a href="https://coinlib.io" target="_blank" style="font-weight: 500; color: #626B7F; text-decoration:none; font-size:11px">Cryptocurrency Prices</a>&nbsp;by Coinlib</div></div>
  <script defer src="https://www.livecoinwatch.com/static/lcw-widget.js"></script> <div class="livecoinwatch-widget-5" lcw-base="USD" lcw-color-tx="#ffffff" lcw-marquee-1="coins" lcw-marquee-2="movers" lcw-marquee-items="10" ></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>
  <div class="pt-80 pb-80">
        <div class="container">
          <div class="row justify-content-center">
            <div class="col-lg-12 pl-lg-5 mt-lg-0 mt-5">
              <div class="row mb-none-30">
                <div class="col-md-12 mb-4">
                  <label>Referral Link</label>
                  <div class="input-group">
                    <input type="text" name="text" class="form-control" id="referralURL"
                    value="http://{{request.get_host}}/referral/referrer={{request.user}}/" readonly>
                    <div class="input-group-append">
                      <span class="input-group-text copytext copyBoard" id="copyBoard"> <i class="fa fa-copy"></i> </span>
                    </div>
                  </div>
                </div>


                <div class="col-xl-4 col-sm-6 mb-30">
                  <div class="d-widget d-flex flex-wrap">
                    <div class="col-8">
                      <span class="caption">BTC/USD MARKET FUNDAMENTALS</span>
                      <!-- TradingView Widget BEGIN -->
  <div class="tradingview-widget-container">
    <div class="tradingview-widget-container__widget"></div>
    <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/symbols/BTCUSD/?exchange=BITSTAMP" rel="noopener" target="_blank"><span class="blue-text">BTCUSD Rates</span></a> by TradingView</div>
    <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-mini-symbol-overview.js" async>
    {
    "symbol": "BITSTAMP:BTCUSD",
    "width": 250,
    "height": 200,
    "locale": "en",
    "dateRange": "12M",
    "colorTheme": "dark",
    "trendLineColor": "rgba(41, 98, 255, 1)",
    "underLineColor": "rgba(41, 98, 255, 0.3)",
    "underLineBottomColor": "rgba(41, 98, 255, 0)",
    "isTransparent": false,
    "autosize": false,
    "largeChartUrl": ""
  }
    </script>
  </div>
  <!-- TradingView Widget END -->
                    </div>
                    <div class="col-4">
                      <div class="icon ml-auto">
                      </div>
                    </div>
                  </div><!-- d-widget-two end -->
                </div>
                <div class="col-xl-4 col-sm-6 mb-30">
                  <div class="d-widget  d-flex flex-wrap">
                    <div class="col-8">
                      <span class="caption">ETH/USD MARKET FUNDAMENTALS</span>
                     <!-- TradingView Widget BEGIN -->
  <div class="tradingview-widget-container">
    <div class="tradingview-widget-container__widget"></div>
    <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/symbols/ETHUSD/?exchange=PHEMEX" rel="noopener" target="_blank"><span class="blue-text">ETHUSD Rates</span></a> by TradingView</div>
    <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-mini-symbol-overview.js" async>
    {
    "symbol": "PHEMEX:ETHUSD",
    "width": 250,
    "height": 200,
    "locale": "en",
    "dateRange": "12M",
    "colorTheme": "dark",
    "trendLineColor": "rgba(41, 98, 255, 1)",
    "underLineColor": "rgba(41, 98, 255, 0.3)",
    "underLineBottomColor": "rgba(41, 98, 255, 0)",
    "isTransparent": false,
    "autosize": false,
    "largeChartUrl": ""
  }
    </script>
  </div>
  <!-- TradingView Widget END -->
                    </div>
                    <div class="col-4">
                      <div class="icon ml-auto">
                      </div>
                    </div>
                  </div><!-- d-widget-two end -->
                </div>
                <div class="col-xl-4 col-sm-6 mb-20">
                  <div class="d-widget  d-flex flex-wrap">
                    <div class="col-8">
                      <span class="caption">XRP/USD</span>
                      <!-- TradingView Widget BEGIN -->
  <div class="tradingview-widget-container">
    <div class="tradingview-widget-container__widget"></div>
    <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/symbols/XRPUSD/?exchange=BITFINEX" rel="noopener" target="_blank"><span class="blue-text">XRPUSD Rates</span></a> by TradingView</div>
    <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-mini-symbol-overview.js" async>
    {
    "symbol": "BITFINEX:XRPUSD",
    "width": 250,
    "height": 200,
    "locale": "en",
    "dateRange": "12M",
    "colorTheme": "dark",
    "trendLineColor": "rgba(41, 98, 255, 1)",
    "underLineColor": "rgba(41, 98, 255, 0.3)",
    "underLineBottomColor": "rgba(41, 98, 255, 0)",
    "isTransparent": false,
    "autosize": false,
    "largeChartUrl": ""
  }
    </script>
  </div>
  <!-- TradingView Widget END -->
                    </div>
                    <div class="col-4">
                      <div class="icon ml-auto">
                        <i class="las la-shopping-cart"></i>
                      </div>
                    </div>
                  </div><!-- d-widget-two end -->
                </div>
              </div><!-- row end -->
            </div>
          </div>
        </div>
      </div>  
{% endblock content %}