{% extends "ie_base.html" %}
{% load static %}
{% load crispy_forms_tags %}
{% block title %}
  <title>Employee Projection Report</title>
{% endblock title %}

{% block Style %}
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/sweetalert2@10.10.1/dist/sweetalert2.min.css'>
 <style>
 .right{
    text-align: right !important;
  }
  .rowhight{
    height:5px !important;
  }
</style>

{% endblock Style %}

{% block MainContent %}
<div class="contents">

<form action="" method="POST" enctype="multipart/form-data" autocomplete="off">
  {% csrf_token %}
  <div class="accordion-item">
      <div class="card">
        <div class="card-header">
          <h5 class="mb-0 fw-bold"> 
           Employee Projection report
          </h5>
        </div>
        <div class="card-body">
          <div class="row">
            <div class="col-md-3">
                {{form.production_unit|as_crispy_field}}
            </div>
          
          </div>
      
        </div> 
   
      </div>
  
      <div class="row" style="margin-top: 10px;margin-bottom: 8px;">
        <div class="col-md-12" style="text-align: center;" >
            <button type="submit" class="cus-btn" >Submit</button>
        </div>
    </div>
</div>
</form>



{% if company_info %}
  
<div class="table-area mt-2">
    <div class="right">
  <button onclick="openAllAccordions(); setTimeout(() => ExportToExcel('xlsx'), 500);" class="cus-btn" style="width:70px; height:30px">
    <i class="fa fa-file-excel-o" aria-hidden="true"></i>
  </button>
  <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>
    </div>
    <div class="tables table-responsive" id="employee-attendance-general-report-table-pdf">
        <div>
            <h3 style = 'text-align: center'>{{ company_info.name_en }}</h3>
            <h5 style = 'text-align: center'>{{ company_info.address_details }}</h5>
            <p style = 'text-align: right'><span>{{report_month}}</span> <span>{{report_year}}{{eid_bonus_list.created_date}}</span></p>
          </div>
          <h4 class="mb-3">Employee Projection report &nbsp;- &nbsp; {{total_manpowr}}</h4>
            {% comment %} {{department_temp}} {% endcomment %}

            
    
{% if head_office_department %}
<div class="accordion mb-3" id="accordionHeadOffice">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingHeadOffice">
      <button class="accordion-button collapsed fw-bold center" type="button"
              data-bs-toggle="collapse"
              data-bs-target="#collapseHeadOffice"
              aria-expanded="false"
              aria-controls="collapseHeadOffice">
        <div class="w-100">
          Head Office  &nbsp;&nbsp;&nbsp;
          Total Manpower - {{ head_office_grant_total }}
        </div>
      </button>
    </h2>

    <div id="collapseHeadOffice"
        class="accordion-collapse collapse"
        aria-labelledby="headingHeadOffice"
        data-bs-parent="#accordionHeadOffice">
      <div class="accordion-body">
        <table class="table table-hover" id="tbl_non_prod_non_ot">
          <thead>
            <tr>
              <th>Designation</th>
              <th>Authorization</th>
              <th>Actual</th>
              <th>Short/Excess</th>
              <th>Average Salary</th>
              <th>Name</th>
              <th>Designation</th>
              <th>Joining Date</th>
              <th>Salary</th>
              <th>Remarks</th>
            </tr>
          </thead>
          <tbody>
            {% for department in head_office_department %}
              <tr><td colspan="10" class="fw-bold text-center">{{ department.department_name }}</td></tr>
              {% for desg in department.designations %}
                {% for employee in desg.employees %}
                  <tr>
                    {% if forloop.first %}
                      <td rowspan="{{ desg.employees|length }}">{{ desg.designation_name }}</td>
                      <td rowspan="{{ desg.employees|length }}">{{ desg.authorization }}</td>
                      <td rowspan="{{ desg.employees|length }}">{{ desg.actual }}</td>
                      <td rowspan="{{ desg.employees|length }}" style="{% if desg.difference > 0 %}color:red;font-weight:bold;{% endif %}">{{ desg.difference }}</td>
                      <td rowspan="{{ desg.employees|length }}">{{ desg.average_salary }}</td>
                    {% endif %}
                    <td>{{ employee.name }}</td>
                    <td>{{ employee.designation }}</td>
                    <td>{{ employee.joining_date }}</td>
                    <td>{{ employee.gross_salary }}</td>
                    <td>{% if employee.over_time == 'Eligible' %} OT Eligible Employee {% endif %}</td>
                  </tr>
                {% endfor %}
              {% endfor %}
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
{% endif %}
{% if non_prodactive_non_ot_department %}
<div class="accordion mb-3" id="accordionNonProdNonOT">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingNonProdNonOT">
      <button class="accordion-button collapsed fw-bold center" type="button"
              data-bs-toggle="collapse"
              data-bs-target="#collapseNonProdNonOT"
              aria-expanded="false"
              aria-controls="collapseNonProdNonOT">
        <div class="w-100">
          Non Productive Non OT &nbsp;&nbsp;&nbsp;
          Total Manpower - {{ non_prodactive_non_ot_grant_total }}
        </div>
      </button>
    </h2>

    <div id="collapseNonProdNonOT"
        class="accordion-collapse collapse"
        aria-labelledby="headingNonProdNonOT"
        data-bs-parent="#accordionNonProdNonOT">
      <div class="accordion-body">
        <table class="table table-hover" id="tbl_non_prod_non_ot">
          <thead>
            <tr>
              <th>Designation</th>
              <th>Authorization</th>
              <th>Actual</th>
              <th>Short/Excess</th>
              <th>Average Salary</th>
              <th>Name</th>
              <th>Designation</th>
              <th>Joining Date</th>
              <th>Salary</th>
              <th>Remarks</th>
            </tr>
          </thead>
          <tbody>
            {% for department in non_prodactive_non_ot_department %}
              <tr><td colspan="10" class="fw-bold text-center">{{ department.department_name }}</td></tr>
              {% for desg in department.designations %}
                {% for employee in desg.employees %}
                  <tr>
                    {% if forloop.first %}
                      <td rowspan="{{ desg.employees|length }}">{{ desg.designation_name }}</td>
                      <td rowspan="{{ desg.employees|length }}">{{ desg.authorization }}</td>
                      <td rowspan="{{ desg.employees|length }}">{{ desg.actual }}</td>
                      <td rowspan="{{ desg.employees|length }}" style="{% if desg.difference > 0 %}color:red;font-weight:bold;{% endif %}">{{ desg.difference }}</td>
                      <td rowspan="{{ desg.employees|length }}">{{ desg.average_salary }}</td>
                    {% endif %}
                    <td>{{ employee.name }}</td>
                    <td>{{ employee.designation }}</td>
                    <td>{{ employee.joining_date }}</td>
                    <td>{{ employee.gross_salary }}</td>
                    <td>{% if employee.over_time == 'Eligible' %} OT Eligible Employee {% endif %}</td>
                  </tr>
                {% endfor %}
              {% endfor %}
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
{% endif %}
{% if non_prodactive_ot_department %}
<div class="accordion mb-3" id="accordionNonProdOT">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingNonProdOT">
      <button class="accordion-button collapsed fw-bold" type="button"
              data-bs-toggle="collapse"
              data-bs-target="#collapseNonProdOT"
              aria-expanded="false"
              aria-controls="collapseNonProdOT">
        <div class="w-100">
        Non Productive OT &nbsp;&nbsp;&nbsp;
        Total Manpower - {{  non_prodactive_ot_grant_total }}
        </div>
        
      </button>
    </h2>

    <div id="collapseNonProdOT"
         class="accordion-collapse collapse"
         aria-labelledby="headingNonProdOT"
         data-bs-parent="#accordionNonProdOT">
      <div class="accordion-body">
        <table class="table table-hover" id="tbl_non_prod_ot">
           <thead>
            <tr>
              <th>Designation</th>
              <th>Authorization</th>
              <th>Actual</th>
              <th>Short/Excess</th>
              <th>Average Salary</th>
              <th>Name</th>
              <th>Designation</th>
              <th>Joining Date</th>
              <th>Salary</th>
              <th>Remarks</th>
            </tr>
          </thead>
          <tbody>
            {% for department in non_prodactive_ot_department %}
              <tr><td colspan="10" class="fw-bold text-center">{{ department.department_name }}</td></tr>
              {% for desg in department.designations %}
                {% for employee in desg.employees %}
                  <tr>
                    {% if forloop.first %}
                      <td rowspan="{{ desg.employees|length }}">{{ desg.designation_name }}</td>
                      <td rowspan="{{ desg.employees|length }}">{{ desg.authorization }}</td>
                      <td rowspan="{{ desg.employees|length }}">{{ desg.actual }}</td>
                      <td rowspan="{{ desg.employees|length }}" style="{% if desg.difference > 0 %}color:red;font-weight:bold;{% endif %}">{{ desg.difference }}</td>
                      <td rowspan="{{ desg.employees|length }}">{{ desg.average_salary }}</td>
                    {% endif %}
                    <td>{{ employee.name }}</td>
                    <td>{{ employee.designation }}</td>
                    <td>{{ employee.joining_date }}</td>
                    <td>{{ employee.gross_salary }}</td>
                    <td>{% if employee.over_time == 'Ineligible' %} OT Ineligible Employee {% endif %}</td>
                  </tr>
                {% endfor %}
              {% endfor %}
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
{% endif %}
{% if prodactive_non_ot_department %}
<div class="accordion mb-3" id="accordionProdNonOT">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingProdNonOT">
      <button class="accordion-button collapsed fw-bold" type="button"
              data-bs-toggle="collapse"
              data-bs-target="#collapseProdNonOT"
              aria-expanded="false"
              aria-controls="collapseProdNonOT">
       
        <div class="w-100">
            Productive Non OT &nbsp;&nbsp;&nbsp;
            Total Manpower - {{  prodactive_non_ot_grant_total }}
        </div>
      </button>
    </h2>

    <div id="collapseProdNonOT"
         class="accordion-collapse collapse"
         aria-labelledby="headingProdNonOT"
         data-bs-parent="#accordionProdNonOT">
      <div class="accordion-body">
        <table class="table table-hover" id="tbl_prod_non_ot">
           <thead>
            <tr>
              <th>Designation</th>
              <th>Authorization</th>
              <th>Actual</th>
              <th>Short/Excess</th>
              <th>Average Salary</th>
              <th>Name</th>
              <th>Designation</th>
              <th>Joining Date</th>
              <th>Salary</th>
              <th>Remarks</th>
            </tr>
          </thead>
          <tbody>
            {% for department in prodactive_non_ot_department %}
              <tr><td colspan="10" class="fw-bold text-center">{{ department.department_name }}</td></tr>
              {% for desg in department.designations %}
                {% for employee in desg.employees %}
                  <tr>
                    {% if forloop.first %}
                      <td rowspan="{{ desg.employees|length }}">{{ desg.designation_name }}</td>
                      <td rowspan="{{ desg.employees|length }}">{{ desg.authorization }}</td>
                      <td rowspan="{{ desg.employees|length }}">{{ desg.actual }}</td>
                      <td rowspan="{{ desg.employees|length }}" style="{% if desg.difference > 0 %}color:red;font-weight:bold;{% endif %}">{{ desg.difference }}</td>
                      <td rowspan="{{ desg.employees|length }}">{{ desg.average_salary }}</td>
                    {% endif %}
                    <td>{{ employee.name }}</td>
                    <td>{{ employee.designation }}</td>
                    <td>{{ employee.joining_date }}</td>
                    <td>{{ employee.gross_salary }}</td>
                    <td>{% if employee.over_time == 'Eligible' %} OT Eligible Employee {% endif %}</td>
                  </tr>
                {% endfor %}
              {% endfor %}
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
{% endif %}



{% if prodactive_ot_department %}
<div class="accordion mb-3" id="accordionProdOT">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingProdOT">
      <button class="accordion-button collapsed fw-bold" type="button"
              data-bs-toggle="collapse"
              data-bs-target="#collapseProdOT"
              aria-expanded="false"
              aria-controls="collapseProdOT">
            <div class="w-100">
            Productive  OT &nbsp;&nbsp;&nbsp;
            Total Manpower - {{  prodactive_ot_grant_total }}
        </div>

      </button>
      
    </h2>

    <div id="collapseProdOT"
         class="accordion-collapse collapse"
         aria-labelledby="headingProdOT"
         data-bs-parent="#accordionProdOT">
      <div class="accordion-body">
        <table class="table table-hover" id="tbl_prod_ot">
           <thead>
            <tr>
              <th>Designation</th>
              <th>Authorization</th>
              <th>Actual</th>
              <th>Short/Excess</th>
              <th>Average Salary</th>
              <th>Name</th>
              <th>Designation</th>
              <th>Joining Date</th>
              <th>Salary</th>
              <th>Remarks</th>
            </tr>
          </thead>
          <tbody>
            {% for department in prodactive_ot_department %}
              <tr><td colspan="10" class="fw-bold text-center">{{ department.department_name }}</td></tr>
              {% for desg in department.designations %}
                {% for employee in desg.employees %}
                  <tr>
                    {% if forloop.first %}
                      <td rowspan="{{ desg.employees|length }}">{{ desg.designation_name }}</td>
                      <td rowspan="{{ desg.employees|length }}">{{ desg.authorization }}</td>
                      <td rowspan="{{ desg.employees|length }}">{{ desg.actual }}</td>
                      <td rowspan="{{ desg.employees|length }}" style="{% if desg.difference > 0 %}color:red;font-weight:bold;{% endif %}">{{ desg.difference }}</td>
                      <td rowspan="{{ desg.employees|length }}">{{ desg.average_salary }}</td>
                    {% endif %}
                    <td>{{ employee.name }}</td>
                    <td>{{ employee.designation }}</td>
                    <td>{{ employee.joining_date }}</td>
                    <td>{{ employee.gross_salary }}</td>
                    <td>{% if employee.over_time == 'Ineligible' %} OT Ineligible Employee {% endif %}</td>
                  </tr>
                {% endfor %}
              {% endfor %}
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
{% endif %}

</div>
{% endif %}

{% endblock MainContent %}
{% block meassage %}
{% include 'notifications/notifications.html' %}         
{% endblock meassage %}
{% block JS %}
<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' %}"  

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

<!-- <script src="{% static 'js/payroll/intime_outtime_missing/create.js' %} "></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>
<script>

$( document ).ready(function() {    
    $('select').select2();
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>

<script>
$(document).ready(function() {
  $('select').select2();
});

// Function to open all accordions (Bootstrap 5)
function openAllAccordions() {
  const accordions = document.querySelectorAll('.accordion-collapse');
  accordions.forEach(item => {
    const bsCollapse = new bootstrap.Collapse(item, { toggle: false });
    bsCollapse.show();
  });
}

// Export all tables combined into a single Excel sheet
function ExportToExcel(type, fn, dl) {
  openAllAccordions(); // ensure tables visible

  setTimeout(() => {
    const tableIds = ["tbl_non_prod_non_ot", "tbl_non_prod_ot", "tbl_prod_non_ot", "tbl_prod_ot"];
    const wb = XLSX.utils.book_new();

    let combinedData = [];
    let headerSet = false;

    tableIds.forEach(id => {
      const table = document.getElementById(id);
      if (table) {
        const wsData = XLSX.utils.sheet_to_json(XLSX.utils.table_to_sheet(table), { header: 1 });
        if (wsData.length > 0) {
          if (!headerSet) {
            combinedData.push(wsData[0]); // header row once
            headerSet = true;
          }
          combinedData = combinedData.concat(wsData.slice(1)); // append rows
        }
      }
    });

    const ws = XLSX.utils.aoa_to_sheet(combinedData);
    XLSX.utils.book_append_sheet(wb, ws, "CombinedReport");

    XLSX.writeFile(wb, fn || ('EmployeeProjectionReport.' + (type || 'xlsx')));
  }, 500);
}

// Print handler that opens a print window with all accordions expanded
document.getElementById("employee-attendance-general-report-pdf-button").addEventListener("click", function () {
  openAllAccordions();

  setTimeout(() => {
    const printContents = document.getElementById("employee-attendance-general-report-table-pdf").innerHTML;

    const printWindow = window.open('', '', 'height=600,width=800');
    printWindow.document.write('<html><head><title>Print Report</title>');
    // Optional: add CSS here if needed for styling print
    printWindow.document.write('</head><body>');
    printWindow.document.write(printContents);
    printWindow.document.write('</body></html>');
    printWindow.document.close();
    printWindow.focus();
    printWindow.print();
    printWindow.close();
  }, 600);
});
</script>
{% endblock JS %}