{{ header }}
<style>
    .detail_data_base_system {
    display: flex;
}

.detail_boxes_panel {
   
    padding: 10px;
    margin: 15px 0px;
    border: 1px solid #e5dedec2;
}

.detail_boxes_panel h4 {
    font-size: 20px;
    text-transform: capitalize;
}

.detail_boxes_panel p {
    margin-bottom: 5px;
    font-size: 16px;
}
</style>
<div id="account-reward" class="container">
  <ul class="breadcrumb">
    {% for breadcrumb in breadcrumbs %}
    <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
    {% endfor %}
  </ul>
  <div class="row">{{ column_left }}
    {% if column_left and column_right %}
    {% set class = 'col-sm-6' %}
    {% elseif column_left or column_right %}
    {% set class = 'col-sm-9' %}
    {% else %}
    {% set class = 'col-sm-12' %}
    {% endif %}
    <div id="content" class="{{ class }}">{{ content_top }}
        <div class="row">
            
            <div class="col-lg-12 col-md-12">
                <div class="row">
                    <div class="col-lg-9 col-md-9">
                         <h1>{{ heading_title }}</h1>
                        {#<p>{{ text_total }}</p>#}
                       <legend>{{ text_total }}</legend>
                    </div>
                    <div class="col-lg-3 col-md-3">
                        <h4>{{ customer_details.firstname }} {{ customer_details.lastname }} ( {{ customer_details.username }} )</h4>
                        <p>{{ text_customer_rank }} : <span class="text-success">{{ customer_rank }} </span></p>
                        <p>{{ text_sponsor }} : <span class="text-success">{{ sponsor.firstname }} {{ sponsor.lastname }} ({{ sponsor.username }}) </span></p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-3">
                <div class="detail_boxes_panel">
                    <h5>{{ text_current_month_purchase }}</h5>
                    <p>{{ current_month_purchase }}</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-3">
                <div class="detail_boxes_panel">
                    <h5>{{ text_current_self_business }}</h5>
                    <p>{{ current_month_self_business }} {{ text_business_point }}</p>
                </div>
            </div>
           <div class="col-lg-3 col-md-3">
                <div class="detail_boxes_panel">
                    <h5>{{ text_month_group_purchase }}</h5>
                   {# <p>{{ current_month_group_business }} {{ text_business_point }}#}
                    {{ current_month_group_purchase }}
                    </p>
                </div>
            </div>
            <div class="col-lg-3 col-md-3">
                <div class="detail_boxes_panel">
                    <h5>{{ text_expected_payout }}</h5>
                    <p>
                        {{ expected_payout_bp }} {{ text_business_point }}
                    <br>{{ expected_payout }}
                    
                    </p>
                </div>
            </div>
           {# <div class="col-lg-3 col-md-3">
                <div class="detail_boxes_panel">
                    <h5>{{ text_total_purchase }}</h5>
                    <p>{{ total_purchase }}</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-3">
                <div class="detail_boxes_panel">
                    <h5>{{ text_total_self_business }}</h5>
                    <p>{{ total_self_business }}  {{ text_business_point }}</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-3">
                <div class="detail_boxes_panel">
                    <h5>{{ text_total_business_points }}</h5>
                    <p>{{ total_business_points }} {{ text_business_point }}</p>
                </div>
            </div>#}
            <div class="col-lg-3 col-md-3">
                 <div class="detail_boxes_panel">
                    <h5>{{ text_total_payout }}</h5>
                    <p>{{ total_payout }}</p>
                </div>
            </div>
           <div class="col-lg-3 col-md-3">
                 <div class="detail_boxes_panel">
                    <h5>{{ text_total_licence }}</h5>
                    <p>{{ total_licence }}</p>
                </div>
            </div>
             <div class="col-lg-3 col-md-3">
                 <div class="detail_boxes_panel">
                    <h5>{{ text_used_licence }}</h5>
                    <p>{{ used_licence }}</p>
                </div>
            </div>
             <div class="col-lg-3 col-md-3">
                 <div class="detail_boxes_panel">
                    <h5>{{ text_unused_licence }}</h5>
                    <p>{{ unused_licence }}</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-3">
              <div class="detail_boxes_panel">
                 <h5>{{ text_last_three_month_group_business }}</h5>
                 <p>{{ last_three_month_group_business }}</p>
               </div>
           </div>
             <div class="col-lg-12 col-md-12">
                <div class="card detail_boxes_panel">
                    <div class="card-header">
                        <div class="user_eran_heading">
                            <h5>Refer Us &amp; Earn</h5>
                            <p>Use the bellow link to invite your friends.</p>
                        </div>
                        <div class="user_invite">
                            <a href="{{ ref_code }}">Invite</a>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="text-input">
                            <input style="width:100%;" type="text" name="ref_code" value="{{ ref_code }}"  aria-describedby="basic-addon1">
                           {# <button type="submit" class="btn" name="copyButton"  style="padding: 9px 9px 9px;padding-bottom:-1px">
                            <i class="fa fa-copy" style="color: #efb919;font-size: 18px;"></i>
                            </button>#}
                            <a href="{{ ref_code }}" target="_blank" class=""> <button type="submit" class="btn " style="color: #fff; background-color:#f85e36;padding: 9px 9px 9px ;">
                            <i class="fa fa-link" style="color: #fff; font-size: 18px;"></i></button></a>
                            <a  href="whatsapp://send?text={{ ref_code }}" target="_blank"  data-action="share/whatsapp/share" > <button type="submit" class="btn" style="padding: 9px 9px 9px;">
                            <i class="fa fa-whatsapp" style="color: green;font-size: 18px;"></i></button></a> 
                        </div>
                    </div>
                </div>
                
            </div>
       </div>
       
      
      {{ content_bottom }}</div>
    {{ column_right }}</div>
    
</div>
<script type="text/javascript">
        /*$('#button[name=\'copyButton\']').on('click', function(e) {
             
              
              var $temp = $("<input>");
              $("body").append($temp);
              $temp.val($('#input[name=\'ref_code\']').val()).select();
              document.execCommand("copy");
              $temp.remove();
        });
                    */
</script>

{{ footer }}