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

.detail_boxes_panel {
    padding: 10px;
    margin: 12px 0px;
    border: 1px solid #e5dedec7;
    box-shadow: 1px 1px 6px 1px #e5dedec2;
    border-radius: 5px;
}

.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-12 col-md-12">
                         <h1>{{ heading_title }}</h1>
                        <p>{{ text_total }}</p>
                    </div>
                    <div class="col-lg-12 col-md-12">
                        <h4 class="mb-1">{{ customer_details.firstname }} {{ customer_details.lastname }} ( {{ customer_details.username }} )</h4>
                        <p class="mb-1">{{ text_customer_rank }} : <span class="text-success">{{ customer_rank }} </span></p>
                        <p class="mb-1">{{ 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>Total Expected Payout</h5>
                    <p>
                        {{ tot_expected_payout }}
                    </p>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 ">
                <div class="detail_boxes_panel">
                    <h5>Total Pending Payout</h5>
                    <p>
                        {{ total_negative_payout }}
                    </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 }}
                        (CR :{{ total_licence_cr }}, TR :{{ total_licence_tr }})
                    </p>
                </div>
            </div>
             <div class="col-lg-3 col-md-3 ">
                 <div class="detail_boxes_panel">
                    <h5>{{ text_used_licence }}</h5>
                    <p>
                        {{ used_licence }}
                        (CR :{{ used_licence_cr }}, TR :{{ used_licence_tr }})
                    </p>
                </div>
            </div>
             <div class="col-lg-3 col-md-3 ">
                 <div class="detail_boxes_panel">
                    <h5>{{ text_unused_licence }}</h5>
                    <p>
                        {{ unused_licence }}
                        (CR :{{ unused_licence_cr }}, TR :{{ unused_licence_tr }})
                    </p>
                </div>
            </div>
            {% if branch_totals %}
                {% for branchid,branch_total in branch_totals %}
                    <div class="col-lg-3 col-md-3 ">
                         <div class="detail_boxes_panel">
                            <h5> Branch Business(Id : {{branchid}})</h5>
                            <p><b>Total : </b> {{ branch_total.total }}</p><br>
                            <!-- <p><b>Total with Tax : </b> {{ branch_total.total_wt }}</p><br> -->
                            <!-- <p><b>BP : </b> {{ branch_total.business_point }} BP</p><br> -->
                            <!-- <p><b>No of order : </b> {{ branch_total.total_order }}</p><br> -->
                        </div>
                    </div>
                {% endfor %}
            {% endif %}
            <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>
           {% if branch_totals_3 %}
                <div class="table-responsive">
                    <table class="table table-bordered table-hover">
                        <thead>
                            <tr>
                                <td class="text-left">Branch Id</td>
                                <td class="text-left">Last Month</td>
                                <td class="text-left">Last 2nd Month</td>
                                <td class="text-left">Last 3rd Month</td>
                            </tr>
                        </thead>
                        <tbody>
                            {% for branchid,branch_totals in branch_totals_3 %}
                                <tr>
                                    <td class="text-left">{{branchid}}</td>
                                    <td class="text-left">{{ branch_totals.first.total }}</td>
                                    <td class="text-left">{{ branch_totals.second.total }}</td>
                                    <td class="text-left">{{ branch_totals.third.total }}</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% endif %}
             <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 }}" class="text-success">Invite</a>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="text-input row">
                            <input class="col-sm-10 col-12 m-1 m-sm-0" disabled 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="col-sm-1 col-2"> <button type="submit" class="btn " style="color: #fff; background-color:#f85e36;padding: 10px 9px 9px ;border-radius: 5px;margin-top: 4px;">
                            <i class="fa fa-link" style="color: #fff; font-size: 18px;"></i></button></a>
                            <a class="col-sm-1 col-2 p-0 text-right text-md-center text-md-center"  href="whatsapp://send?text={{ ref_code }}" target="_blank"  data-action="share/whatsapp/share" > <button type="submit" class="btn p-0">
                            <i class="fab fa-whatsapp-square" style="color: green;font-size: 48px;"></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 }}