{% load static %}
{% include 'web/include_comman/header.html' %}

        <!-- Sidebar -->
        {% include 'web/include_comman/sidebar.html' with active_tab='report_active1' %}
        <!-- End of Sidebar -->

        <!-- Content Wrapper -->
        <div id="content-wrapper" class="d-flex flex-column">

            <!-- Main Content -->
            <div id="content">

                <!-- Topbar -->
                {% include 'web/include_comman/right_top.html' %}
                <!-- End of Topbar -->
                <div class="row">
                
            </div>
                <!-- Begin Page Content -->
                <div class="container-fluid">
                    <div class="row">
                        {% if request.user.is_authenticated %}
                        {% if request.user.roles_id == 1 or request.user.roles_id == 2 or request.user.roles_id == 3 %}
                        {% if request.user.roles_id == 3 %}
                        <div class="col-xl-4 col-md-6 mb-4">
                            <div class="row bg-dark text-light pt-3 mr-1">
                                <div class="col-lg-2">
                                </div>
                                <div class="col-lg-5">
                                    <div class="text-xs font-weight-bold text-light text-uppercase mb-1">
                                        <h5 style="font-size: 15px;font-weight: bold;">${{wallet_amount|floatformat:2}}</h5>
                                        <p  style="font-size: 8px;font-weight: bold;">Total Balance Amount</p>
                                    </div>
                                </div>

                                <div class="col-lg-5" style="">
                                    {% if request.user.roles_id == 3 or request.user.roles_id == 4 %}
                                    {% if wallet_amount == 0 or wallet_amount < 0 %}
                                    <button type="button" class="btn btn-light mt-2" style="font-size: 10px;width: 117px;border-radius: 0px;font-weight: bold;" disabled>
                                    Transfer In Account
                                      </button>
                                    {% else %}
                                    <button type="button" class="btn btn-light mt-2" data-toggle="modal" data-target="#exampleModalCenter"
                                    style="font-size: 10px;width: 117px;border-radius: 0px;font-weight: bold;">
                                    Transfer In Account
                                      </button>
                                    {% endif %}
                                    {% else %}
                                    {% comment %} <a href="{% url 'web:withdrawal_requests' %}" class="btn btn-primary" 
                                    style="font-size: 10px;width: 117px;border-radius: 0px;font-weight: bold;">
                                    View Requests
                                    </a> {% endcomment %}
                                    {% endif %}

                                </div>
                            </div>
                        </div>
                        {% endif %}

                        <div class="col-xl-4 col-md-6 mb-4">
                            <div class="row bg-primary text-light pt-3 pb-3">
                                <div class="col-lg-2">
                                </div>
                                <div class="col-lg-5" style="height: 72px;">
                                    <div class="text-xs font-weight-bold text-light text-uppercase mb-1">
                                        {% if request.user.roles_id == 1 or request.user.roles_id == 2 %}
                                        <h5 style="font-size: 15px;font-weight: bold;">     </h5>
                                        <p  style="font-size: 10px;font-weight: bold; padding-top: 6px;">Transactions</p>
                                        {% else %}
                                        <h5 style="font-size: 15px;font-weight: bold;">${{withdrawal_amount|floatformat:2}}</h5>
                                        <p  style="font-size: 7px;font-weight: bold;">Total Withdrawal Amount</p>
                                        {% endif %}
                                    </div>
                                </div>
                                <div class="col-lg-5">
                                    <a href="{% url 'web:withdrawal_requests' %}?page={{page}}" class="btn btn-light mt-2" style="font-size: 10px;width: 117px;border-radius: 0px;font-weight: bold;">View Transactions</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-4 col-md-6 mb-4">
                            <div class="row bg-info text-dark pt-3 mr-1 ml-1">
                                <div class="col-lg-2">
                                </div>
                                <div class="col-lg-5">
                                    <div class="text-xs font-weight-bold text-light text-uppercase mb-1">
                                        <h5 style="font-size: 15px;font-weight: bold;">${{admin_earning_amt|floatformat:2}}</h5>
                                        <p  style="font-size: 9px;font-weight: bold;">Total Amount</p>
                                    </div>
                                </div>
                                <div class="col-lg-5">
                                </div>
                            </div>
                        </div>
                        {% if request.user.roles_id == 1 or request.user.roles_id == 2 %}
                        <div class="col-xl-4 col-md-6 mb-4">
                            <div class="row bg-warning text-light pt-3 mr-1 ml-1">
                                <div class="col-lg-2">
                                </div>
                                <div class="col-lg-5">
                                    <div class="text-xs font-weight-bold text-light text-uppercase mb-1">
                                        <h5 style="font-size: 15px;font-weight: bold;">{{pending_requests}}</h5>
                                        <p  style="font-size: 9px;font-weight: bold;">Pending Request</p>
                                    </div>
                                </div>
                                <div class="col-lg-5">
                                    <a href="{% url 'web:pending_requests' %}?page={{page}}" class="btn btn-light mt-2" style="font-size: 10px;width: 117px;border-radius: 0px;font-weight: bold;">View Transactions</a>
                                </div>
                            </div>
                        </div>
                        {% endif %}
                        {% endif %}
                        {% endif %}
{% comment %} {% if request.user.roles_id == 1 or request.user.roles_id == 2 %}
<div class="col-lg-4">
</div>
{% endif %}
<br>
{% endcomment %}
                        <div class='col-lg-4'> 
                            <form method="GET" class="d-none d-sm-inline-block mb-3 form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">
                                <div class="input-group mb-3">
                                    <input type="text" name="search" class="form-control bg-light border-1 small" value="{{search}}" placeholder="Search for..."
                                        aria-label="Search" aria-describedby="basic-addon2">
        
                                    <div class="input-group-append mr-2">
                                        <button class="btn btn-sm btn-primary" type="submit">
                                            <i class="fas fa-search fa-sm"></i>
                                        </button>
                                    </div>
                                    <a href="{% url 'web:report_tebular_view' %}" class="btn btn-info mr-2 btn-sm float-right" role="button">Refresh</a>
                                </div>
                            </form>
                        </div>
                        <div class="col-lg-2">
                        </div>
                        <!--<div class="col-lg-6 float-right">
                            <form class="form-inline form-sm" >
                                <div class="form-group mb-2" method="GET">
                                  <input type="date" class="form-control input-sm" name="date_one">
                                </div>
                                <div class="form-group mx-sm-3 mb-2">
                                  <input type="date" class="form-control input-sm" name="date_two">
                                </div>
                                <button type="submit" class="btn btn-info btn-sm mb-2">Generate</button>
                              </form>
                            {% comment %} <a href="{% url 'web:export_users_csv' %}" class="btn btn-primary">Download Report</a> {% endcomment %}
                        </div>-->
                    </div>
                    <!-- Page Heading -->
                    {% comment %} <h1 class="h3 mb-2 text-gray-800">{{title}}</h1> {% endcomment %}
                    

                   
                
                    <!-- DataTales Example -->
                    <div class="card mb-4">
                        <div class="card-header py-3">
                            <div class="row">
                                <div class="col-lg-6">
                                    <h6 class="m-0 font-weight-bold text-primary">Sells</h6>
                                </div>
                                {% comment %} <div class="col-lg-6">
                                    <a href="{% url 'web:sells_view' %}" class="btn btn-info mr-2 btn-sm float-right" role="button">Reset</a>
                                </div> {% endcomment %}
                            </div>
                             <!--<hr>
                            <div class="row">
                                <div class="col-lg-6">
                                    {% comment %} <h6 class="m-0 font-weight-bold text-primary float-right">Total : {{total_ammount}}</h6> {% endcomment %}
                                </div>
                                <div class="col-lg-6">
                                    <h6 class="m-0 font-weight-bold text-primary float-right">Total : {{admin_earning_amt|floatformat:2}}</h6>
                                </div>
                            </div>-->
                        </div>
                        <div class="card-body" s>
                            {% include 'web/message.html' %}
                            <div class="table-responsive">
                                {% if purchase_info_groups %}
                                <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                                    <thead style="text-align: center;">
                                        <tr style="font-size:13px; color:black; background-color:#DFF6FF;">
                                            <th>S.No.</th>
                                            <th>Magazine Name</th>
                                            <th>Publisher First Name</th>
                                            <th>Publisher Last Name</th>
                                            <th>Commission %</th>
                                            <th>Publisher Amount</th>
                                            <th>Admin Amount</th>
                                            <th>Total Amount</th>
                                            <th>Action</th>        
                                        </tr>
                                    </thead>
                                   
                                    <tbody style="text-align: center;">
                                        {% for purchase_info_group in purchase_info_groups %}
                                        <tr>
                                            <td>{{forloop.counter}}</td>
                                            <td>{{ purchase_info_group.magazine}}</td>
                                            <td>{{purchase_info_group.publisher_fn}}</td>
                                            <td>{{purchase_info_group.publisher_ln}}</td>
                                            <td>{{purchase_info_group.commission|floatformat:2}}</td>
                                            <td>{{purchase_info_group.publisher_amount|floatformat:2}}</td>
                                            <td>{{purchase_info_group.admin_amount|floatformat:2}}</td>
                                            <td>{{purchase_info_group.total_amount|floatformat:2}}</td>
                                            <td><a href="{% url 'web:per_magazine_report_list' purchase_info_group.id %}?page={{page}}"><i class="fa fa-eye" style="font-size:16px;color:grey;" id="action"></i></a></td>
                                        </tr>  
                                        {% endfor %}   
                                    </tbody>
                                </table>
                                <div class="pagination float-right">
                                    <span class="step-links">
                                        {% if purchase_info_groups.has_previous %}
                                            <a href="?page=1&search={{search}}">&laquo; first</a>
                                            <a href="?page={{ purchase_info_groups.previous_page_number }}&search={{search}}">previous</a>
                                        {% endif %}
                                
                                        <span class="current">
                                            Page {{ purchase_info_groups.number }} of {{ purchase_info_groups.paginator.num_pages }}.
                                        </span>
                                
                                        {% if purchase_info_groups.has_next %}
                                            <a href="?page={{ purchase_info_groups.next_page_number }}&search={{search}}">next</a>
                                            <a href="?page={{ purchase_info_groups.paginator.num_pages }}&search={{search}}">last &raquo;</a>
                                        {% endif %}
                                    </span>
                                </div>
                            </div>
                            {% else %}
                            
                            {% endif %}
                        </div>
                    </div>
                    {% comment %} {% url 'web:delete_system_category_view' system_category.id %} {% endcomment %}
                </div>
                <!-- /.container-fluid -->

            </div>
           

<!--Pop Up For Transfer Amount Form -->

  <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header text-center bg-dark" style="color: white;height: 34px;padding-top: 4px;">
          <h5 class="modal-title" id="exampleModalLongTitle" 
          style="font-size: 15px;font-weight: bold;text-align: center;padding-left: 130px;">Transfer in Account Request</h5>
        </div>
        <div class="modal-body" style="background-color:#F4F4F4;">
            <form method="POST" id="add_transfer_account">
                {% csrf_token %}
                <div class="form-group row">
                    <div class="col-sm-6">
                        <label 
                        style="font-size: 11px;color: black;padding-left: 3px; margin-bottom: 0px;">
                        Withdrawal Amount
                        </label>
                        {{withdrawal_form.withdrawal_amount}}
                        {% comment %} <input type="text" class="form-control" id="inputPassword" placeholder="" style="height: 29px;"> {% endcomment %}
                    </div>
                    <div class="col-sm-6">
                        <label 
                        style="font-size: 11px;color: black;padding-left: 3px; margin-bottom: 0px;">
                       Name
                        </label>
                        {{withdrawal_form.name}}
                        {% comment %} <input type="text" class="form-control" id="inputPassword" placeholder="" style="height: 29px;"> {% endcomment %}
                    </div>
                    <div class="col-sm-6 mt-3">
                        <label 
                        style="font-size: 11px;color: black;padding-left: 3px; margin-bottom: 0px;">
                        Mobile Number
                        </label>
                        {{withdrawal_form.mobile_number}}
                        {% comment %} <input type="text" class="form-control" id="inputPassword" placeholder="" style="height: 29px;"> {% endcomment %}
                    </div>
                    <div class="col-sm-6 mt-3">
                        <label 
                        style="font-size: 11px;color: black;padding-left: 3px; margin-bottom: 0px;">
                        Bank Account Number
                        </label>
                        {{withdrawal_form.bank_account_number}}
                        {% comment %} <input type="text" class="form-control" id="inputPassword" placeholder="" style="height: 29px;"> {% endcomment %}
                    </div>
                    <div class="col-sm-6 mt-3">
                        <label 
                        style="font-size: 11px;color: black;padding-left: 3px; margin-bottom: 0px;">
                        Bank Name
                        </label>
                        {{withdrawal_form.bank_name}}
                        {% comment %} <input type="text" class="form-control" id="inputPassword" placeholder="" style="height: 29px;"> {% endcomment %}
                    </div>
                    <div class="col-sm-6 mt-3">
                        <label 
                        style="font-size: 11px;color: black;padding-left: 3px; margin-bottom: 0px;">
                        MCR Code
                        </label>
                        {{withdrawal_form.mcr_code}}
                        {% comment %} <input type="text" class="form-control" id="inputPassword" placeholder="" style="height: 29px;"> {% endcomment %}
                    </div>
                    <div class="col-sm-6 mt-3">
                        <label 
                        style="font-size: 11px;color: black;padding-left: 3px; margin-bottom: 0px;">
                        Swift Code
                        </label>
                        {{withdrawal_form.swift_code}}
                        {% comment %} <input type="text" class="form-control" id="inputPassword" placeholder="" style="height: 29px;"> {% endcomment %}
                    </div>
                    <div class="col-sm-6 mt-3">
                        <label 
                        style="font-size: 11px;color: black;padding-left: 3px; margin-bottom: 0px;">
                        IFSC Code
                        </label>
                        {{withdrawal_form.ifsc_code}}
                        {% comment %} <input type="text" class="form-control" id="inputPassword" placeholder="" style="height: 29px;"> {% endcomment %}
                    </div>
                </div>   
        </div>
                <div class="modal-footer text-center" style="background-color: #F4F4F4;height: 47px">
                <button type="button" class="btn btn-sm btn-light  border-dark border-2 text-dark" data-dismiss="modal" 
                style="font-weight: bold;width: 128px;padding: 1px;left: 105px;position: absolute;">Cancel</button>
                <input type="submit" class="btn btn-sm btn-dark"
                style="font-weight: bold;width: 128px;padding: 1px;left: 255px;position: absolute;" value="Submit">
                </div>
      </div>
             </form>
    </div>
  </div>
<!-- End Pop Up -->

<!-- Pop up For Amount Request-->
<!-- Large modal -->

{% comment %} <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header text-center bg-dark" style="color: white;height: 34px;padding-top: 4px;">
                <h5 class="modal-title" id="exampleModalLongTitle" 
                style="font-size: 15px;font-weight: bold;text-align: center;padding-left: 273px;">Transfer in Account Request</h5>
            </div>
            <div class="modal-body" style="background-color:#F4F4F4;">
                <table class="table">
                    <thead>
                      <tr style="background-color:#EDEEF7;">
                        <th scope="col">#</th>
                        <th scope="col">Name</th>
                        <th scope="col">Mobile Number</th>
                        <th scope="col">Bank Name</th>
                        <th scope="col">Bank Account Number</th>
                        <th scope="col">Withdrawal Aamount</th>
                      </tr>
                    </thead>
                    <tbody>
                        {% for request in requests %}
                      <tr>
                        <th scope="row">{{forloop.counter}}</th>
                        <td>{{request.name}}</td>
                        <td>{{request.mobile_number}}</td>
                        <td>{{request.bank_name}}</td>
                        <td>{{request.bank_account_number}}</td>
                        <td>{{request.withdrawal_amount}}</td>
                      </tr>
                      {% endfor %}
                    </tbody>
                  </table>
            </div>
            <div class="modal-footer text-center" style="background-color: #F4F4F4;">
                <button type="button" class="btn btn-sm btn-dark" data-dismiss="modal" 
                style="font-weight: bold;width: 128px;">Cancel</button>
                </div>
        </div>
    </div>
</div> {% endcomment %}

<!-- End Popup -->
<style>
  #action:hover{
      color:yellow;
  } 
  .form-control{
    height: 32px;
  }
  a{
    margin: 1px;
}
</style>
            {% include 'web/include_comman/footer.html' %}
            <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
            <script type="text/javascript">
                $("#add_transfer_account").validate({
                    rules:{
                        
                        id_withdrawal_amount:{
                            required:true,
                        },
                        id_name:{
                            required:true,
                        },
                        id_mobile_number:{
                            required:true,
                        },
                        id_bank_account_number:{
                            required:true,
                        },
                        id_bank_name:{
                            required:true,
                        },
                        id_mcr_code:{
                            required:true,
                        },
                        id_swift_code:{
                            required:true,
                        },
                        id_ifsc_code:{
                            required:true,
                        }
                    }
                });
            </script>
            <style>
                #add_transfer_account .error{
                    font-size: 14px;
                    color: red;
                }
            </style>
            <script type="text/javascript">
                {% comment %} $('#exampleModalCenter').modal({
                    backdrop: 'static',
                    keyboard: false
                }); {% endcomment %}
                $('#exampleModalCenter').find('.close').remove();
                //this unbind the event click on the shadow zone
                $('#exampleModalCenter').unbind('click');
            </script>