{% extends "base.html" %}
{% load static %}
{% load crispy_forms_tags %}
{% block title %}
  <title>Comparative Statement of Salary & Manpower</title>
{% endblock title %}
{% load widget_tweaks %}
{% block Style %}
<style>
  .right{
    text-align: right !important;
  }



html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
.intro {
  max-width: 1280px;
  margin: 1em auto;
}
.table-scroll {
  position: relative;
  width:100%;
  
  z-index: 1;
  margin: auto;
  overflow: auto;
  height: 350px;
  /* height:100vh; */
  height:80vh
}
.table-scroll table {
  width: 100%;
  min-width: 1280px;
  margin: auto;
  border-collapse: separate;
  border-spacing: 0;
}
.table-wrap {
  position: relative;
}
.table-scroll th,
.table-scroll td {
  /* padding: 5px 10px; */
  /* border: 1px solid #000; */
  background: #fff;
  vertical-align: top;
}




/* safari and ios need the tfoot itself to be position:sticky also */
.table-scroll tfoot,
.table-scroll tfoot th,
.table-scroll tfoot td {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  /* background: #666; */
  /* color: #fff; */
  z-index:4;
}

a:focus {
  background: red;
} /* testing links*/

th:nth-child(2) {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 2;
  /* background: #ccc !important; */
}
thead th:nth-child(2),
tfoot th:nth-child(2) {
  z-index: 5;
}



.table-scroll thead th {
    /* background: #333; */
  /* color: #fff; */
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}






 
</style>


{% endblock Style %}

{% block MainContent %}


<div class="contents">
  <div class="table-area">
    <div class="table-title">
      <div class="row">
        <div class="col-md-8">
          <div class="depertment-name">
            <h3>Comparative Statement of Salary & Manpower</h3>
          </div>
        </div>
      </div>
    </div>
    <form method="post" id="personForm" data-cities-url="" novalidate>
    {% csrf_token %}
    <div class="table-header">
      <div>
        <div class="row">
          <div class="col-md-12 fw-bold">
            {{form.branch|as_crispy_field }}
          </div> 
          <div class="col-md-3 fw-bold">
            {{form.employment_status|as_crispy_field }}
          </div> 
          <div class="col-md-2 fw-bold">
            {{form.disbursement_status|as_crispy_field }}
          </div> 
          <div class="col-md-2 fw-bold">
            {{form.month|as_crispy_field }}
          </div> 
          <div class="col-md-2 fw-bold">
            {{form.year|as_crispy_field }}
          </div> 
          <div class="col-md-1" style="margin-top: 31px;">
            <button type="submit" class="cus-btn">Show</button>
          </div>
        </div>
      </div>
    </div>
  </form>

  

</div>




{% if information_list %}




<div class="table-area">
  <div class="right">
    <button onclick="ExportToExcel('xlsx')" class="cus-btn" style="width:70px; height:30px"><i class="fa fa-file-excel-o" aria-hidden="true"></i></button>
    {% comment %} <button type="button" id="employee-attendance-general-report-pdf-button" class="cus-btn" style="width:70px; height:30px"><i class="fa fa-print" style="font-size: 16px; color:#fff"></i></button> {% endcomment %}
  </div>

  <div class="tables table-responsive" id="employee-attendance-general-report-table-pdf">
    <div>
      <h3 style = 'text-align: center'>O'DELL GROUP</h3>
      <h5 style = 'text-align: center'>Comparative Statement of Salary & Manpower</h5>
      <h6 style = 'text-align: center'>{{ branch.address_details }}</h6>
    </div>
  </div>



  
  <div class="tables table-responsive" id="employee-attendance-general-report-table-pdf">
    <div>
      <h3>Salary Comparison Report  </h3>
     
     
    </div>
    <div id="table-scroll" class="table-scroll">
    <table class="main-table table table-hover"  id="main-table">
        <thead>
          <tr>
            <th style="background-color:{{color_list.0}}"></th>
            <th style="background-color:{{color_list.0}}"></th>
            
                 <td colspan="17" class="text-center" style="background-color:{{color_list.1}}" >{{month_list.0|date:"F"}} {{month_list.0.year}}</td>
                 <td colspan="17" class="text-center" style="background-color:{{color_list.2}}" >{{month_list.1|date:"F"}} {{month_list.1.year}}</td>
                 <td colspan="17" class="text-center" style="background-color:{{color_list.3}}">{{month_list.2|date:"F"}} {{month_list.2.year}}</td>
            
            
            <th colspan="10" class="text-center" style="background-color:{{color_list.4}}">Increase/Decrease From Previous Month</th>
         
            
            
          </tr>
     
       
          <tr>
            <th style="background-color:{{color_list.0}}">SL</th>
           
            <th style="background-color:{{color_list.0}}" ><p style="width:200px !important;">Concerns</p></th>
           
                    <th style="background-color:{{color_list.1}}" ></th>


                    <th colspan="7" class="text-center" style="background-color:{{color_list.1}}">Earnings</th>
                    <th colspan="4" class="text-center" style="background-color:{{color_list.1}}">Deductions</th>
                    <th style="background-color:{{color_list.1}}"></th>
                    
                    <th colspan="4" class="text-center" style="background-color:{{color_list.1}}">Production/Sewing</th>

                     
                     
                      <th style="background-color:{{color_list.2}}" ></th>


                    <th colspan="7" class="text-center" style="background-color:{{color_list.2}}">Earnings</th>
                    
                    <th colspan="4" class="text-center" style="background-color:{{color_list.2}}">Deductions</th>
                    
                    <th style="background-color:{{color_list.2}}"></th>
                    
                    <th colspan="4" class="text-center" style="background-color:{{color_list.2}}">Production/Sewing</th>


                    <th style="background-color:{{color_list.3}}" ></th>


                    <th colspan="7" class="text-center" style="background-color:{{color_list.3}}">Earnings</th>
                    
                    <th colspan="4" class="text-center" style="background-color:{{color_list.3}}">Deductions</th>
                    
                    <th style="background-color:{{color_list.3}}"></th>
                    
                    <th colspan="4" class="text-center" style="background-color:{{color_list.3}}">Production/Sewing</th>
            
          
            <th colspan="10" style="background-color:{{color_list.4}}"></th>

           

            
            
          </tr>
     
       
                
                <th ></th>
                <th ></th>

          {% for item in month_list  %}

                {% comment %} Earnings {% endcomment %}
                    <th>Man Power</th>
                    <th>Gross</th>
                    <th>OT</th>
                    <th>Att. Bonus</th>
                    <th>EL</th>
                    <th>Night Bill</th>
                    <th>Tiffin Bill</th>
                    <th>Total</th>
                {% comment %} Deductions {% endcomment %}
                    <th>Absent</th>
                    <th>Late</th>
                    <th>Tax</th>
            
          
                    <th>Total</th>
                    <th class="text-center">Payable</th>
         
                {% comment %} Productions {% endcomment %}
                    <th>OT Hour</th>
                    <th>Targeted Qty</th>
                    <th>Sewing Qty</th>
                    <th>Remaining</th>
          
          {% endfor %}
                    <th>Man Power</th>
                    <th>Gross</th>
                    <th>ATT. Bonus</th>
                    <th>EL</th>
                    <th>Night Bill</th>
                    <th>Tiffin Bill</th>
                    <th>OT(TAKA)</th>

                
                    <th>OT Hour</th>
                    <th>Sewing</th>

                    <th>Payable</th>





   
          </tr>
        </thead>
        <tbody>
        {% for info in information_list %}
        
        
            <tr>    
             
            
            
                <td>{{forloop.counter}}</td>
                <th class="table-body fw-bold">{{info.0.branch}}</th>

                {% for branch_info in info  %}
                
                 {% if not forloop.last %}
                            <td>{{branch_info.man_power|floatformat:0}}</td>
                            <td>{{branch_info.gross|floatformat:0}}</td>
                            <td>{{branch_info.OT_tk|floatformat:0}}</td>
                            <td>{{branch_info.att_bonus|floatformat:0}}</td>
                            <td>{{branch_info.el|floatformat:0}}</td>
                            <td>{{branch_info.night|floatformat:0}}</td>
                            <td>{{branch_info.tiffin|floatformat:0}}</td>
                            <td>{{branch_info.total_earnings|floatformat:0}}</td>
                            <td>{{branch_info.absent|floatformat:0}}</td>
                            <td>{{branch_info.late|floatformat:0}}</td>
                            <td>{{branch_info.tax|floatformat:0}}</td>
                            <td>{{branch_info.total_deductions|floatformat:0}}</td>
                            <td>{{branch_info.total_payable|floatformat:0}}</td>
                            <td>{{branch_info.ot_hour|floatformat:0}} Hrs</td>
                            <td>{{branch_info.targetted_production}} pcs</td>
                            <td>{{branch_info.sewing_qty}} pcs</td>
                            {% if branch_info.production_highlight == 'green'%}
                                <td style="background-color: green !important; color: white">  {{branch_info.remaining|floatformat:0}} pcs</td>
                            {% elif branch_info.production_highlight == 'warning' %}
                            
                                <td style="background-color: #b9991a !important; color: white">  {{branch_info.remaining|floatformat:0}} pcs</td>

                            
                            {% else %}
                                

                                <td style="background-color: #d14e19 !important; color: white">  {{branch_info.remaining|floatformat:0}} pcs</td>


                            {% endif %}
                            
                              

                {% else %}
                            <td>{{branch_info.man_power|floatformat:0}}</td>
                            <td>{{branch_info.gross|floatformat:0}}</td>
                        
                            <td>{{branch_info.att_bonus|floatformat:0}}</td>
                            <td>{{branch_info.el|floatformat:0}}</td>
                            <td>{{branch_info.night|floatformat:0}}</td>
                            <td>{{branch_info.tiffin|floatformat:0}}</td>
                            <td>{{branch_info.OT_tk|floatformat:0}}</td>
                            <td>{{branch_info.ot_hour|floatformat:0}} Hrs</td>
                            <td>{{branch_info.sewing_qty}} pcs</td>
                            <td>{{branch_info.total_payable|floatformat:0}}</td>




                {% endif %} 
                

              {% endfor %}
              
            </tr>
            {% comment %} Grand Total section {% endcomment %}

        {% endfor %}

        <tr>    

                      <th></th>
            
                
                          <th class="table-body fw-bold">Grand Total</th>

                {% for branch_info in grand_total_list  %}

                
                 {% if not forloop.last %}
                            
                            <td  class="fw-bold">{{branch_info.grand_man_power|floatformat:0}}</td>
                            <td  class="fw-bold">{{branch_info.grand_gross|floatformat:0}}</td>
                            <td  class="fw-bold">{{branch_info.grand_OT_tk|floatformat:0}}</td>
                            <td  class="fw-bold">{{branch_info.grand_att_bonus|floatformat:0}}</td>
                            <td  class="fw-bold">{{branch_info.grand_el|floatformat:0}}</td>
                            <td  class="fw-bold">{{branch_info.grand_night|floatformat:0}}</td>
                            <td  class="fw-bold">{{branch_info.grand_tiffin|floatformat:0}}</td>
                            <td  class="fw-bold">{{branch_info.grand_total_earnings|floatformat:0}}</td>
                            <td  class="fw-bold">{{branch_info.grand_absent|floatformat:0}}</td>
                            <td  class="fw-bold">{{branch_info.grand_late|floatformat:0}}</td>
                            <td  class="fw-bold">{{branch_info.grand_tax|floatformat:0}}</td>
                            <td  class="fw-bold">{{branch_info.grand_total_deductions|floatformat:0}}</td>
                            <td  class="fw-bold">{{branch_info.grand_total_payable|floatformat:0}}</td>
                            <td  class="fw-bold">{{branch_info.grand_ot_hour|floatformat:0}} Hrs</td>
                            <td  class="fw-bold">{{branch_info.grand_targetted_production}} pcs</td>
                            <td  class="fw-bold">{{branch_info.grand_sewing_qty}} pcs</td>
                            {% if branch_info.grand_production_highlight == 'green'%}
                                <td  class="fw-bold" style="background-color: green !important; color: white">  {{branch_info.grand_remaining|floatformat:0}} pcs</td>
                            {% elif branch_info.grand_production_highlight == 'warning' %}
                            
                                <td  class="fw-bold" style="background-color: #b9991a !important; color: white">  {{branch_info.grand_remaining|floatformat:0}} pcs</td>

                            
                            {% else %}
                                

                                <td  class="fw-bold" style="background-color: #d14e19 !important; color: white">  {{branch_info.grand_remaining|floatformat:0}} pcs</td>


                            {% endif %}
                            
                              

                {% else %}
                            <td  class="fw-bold">{{branch_info.grand_man_power|floatformat:0}}</td>
                            <td  class="fw-bold">{{branch_info.grand_gross|floatformat:0}}</td>
                        
                            <td  class="fw-bold">{{branch_info.grand_att_bonus|floatformat:0}}</td>
                            <td  class="fw-bold">{{branch_info.grand_el|floatformat:0}}</td>
                            <td  class="fw-bold">{{branch_info.grand_night|floatformat:0}}</td>
                            <td  class="fw-bold">{{branch_info.grand_tiffin|floatformat:0}}</td>
                            <td  class="fw-bold">{{branch_info.grand_OT_tk|floatformat:0}}</td>
                            <td  class="fw-bold">{{branch_info.grand_ot_hour|floatformat:0}} Hrs</td>
                            <td class="fw-bold">{{branch_info.grand_sewing_qty}} pcs</td>
                            <td  class="fw-bold">{{branch_info.grand_total_payable|floatformat:0}}</td>




                {% endif %} 
                

              {% endfor %}
              
            </tr>


            

   
          
       
        </tbody>
    </table>
      

    </div>
  </div>

  <p class="m-3 p-3 text-danger">**NB: The lunch bill and stamp have not been factored into the current calculation.ML (Absent), salary advance, personal loan instalement are deducted from the Payable</p>
</div>
{% endif %}


{% endblock MainContent %}
{% block meassage %}
{% include 'notifications/notifications.html' %} 
{% endblock meassage %}
{% block JS %}

<script type="text/javascript" src="https://unpkg.com/xlsx@0.15.1/dist/xlsx.full.min.js"></script>

<script type=text/javascript>
  
  var load_sister_organization_url = "{% url 'sister-organization-load' %}"
  var load_branch_organization_url = "{% url 'load-branch-organization' %}"
  var load_department_url = "{% url 'ajax-load-department' %}"
  var load_designation_url = "{% url 'ajax-load-designation' %}"
  $(document).ready(function() {
        $('select').select2();
    });
 

  function printDiv(divName) {
    var originalContents = document.body.innerHTML
    var printContents = document.getElementById(divName).innerHTML;
    document.body.innerHTML = printContents;
    window.print();
    document.body.innerHTML = originalContents;
  }
  function ExportToExcel(type, fn, dl) {
        var elt = document.getElementById('main-table');
        var wb = XLSX.utils.table_to_book(elt, { sheet: "sheet1" });
        return dl ?
            XLSX.write(wb, { bookType: type, bookSST: true, type: 'base64' }) :
            XLSX.writeFile(wb, fn || ('Comparative Statement of Salary & Manpower.' + (type || 'xlsx')));
    }
</script>

<script src="{% static 'js/report_app/global_dependency_search/global_dependency_search.js' %} "></script>
<script src="{% static 'js/report_app/general_attendance_report/general_attendance_report.js' %} "></script>

{% endblock JS%}