{% extends "central_management_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">
{% if messages %}
  {% for message in messages %}
    <div class="alert alert-dismissible fade show {% if message.tags %}alert-{% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}danger{% else %}{{ message.tags }}{% endif %}{% endif %}" role="alert">{{ message }}
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
  {% endfor %}
{% endif %}
<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.parent_branch|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_manpower}}</h4>
            {% comment %} {{department_temp}} {% endcomment %}

{% for result in results %}
{% if not result.is_factory  %}
    {% if result.head_office_department %}
      <div class="accordion mb-3" id="accordionHeadOffice{{ forloop.counter }}">
        <div class="accordion-item">
          <h2 class="accordion-header" id="headingHeadOffice{{ forloop.counter }}">
            <button class="accordion-button collapsed fw-bold center" type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#collapseHeadOffice{{ forloop.counter }}"
                    aria-expanded="false"
                    aria-controls="collapseHeadOffice{{ forloop.counter }}">
              <div class="w-100">
                {{ result.branch }} &nbsp;&nbsp;&nbsp;
                Total Manpower - {{ result.head_office_grant_total }}
              </div>
            </button>
          </h2>

          <div id="collapseHeadOffice{{ forloop.counter }}"
               class="accordion-collapse collapse"
               aria-labelledby="headingHeadOffice{{ forloop.counter }}"
               data-bs-parent="#accordionHeadOffice{{ forloop.counter }}">
        <div class="accordion-body">
            <table class="table table-hover" id="tbl_non_prod_non_ot{{ forloop.counter }}">
            <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 result.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 %}
{% else %}
<div class="accordion" id="accordionHeadOffice">
    <div class="accordion-item">
      <h2 class="accordion-header" id="headingHeadOffice{{ forloop.counter }}">
        <button class="accordion-button collapsed fw-bold " type="button"
                data-bs-toggle="collapse"
                data-bs-target="#collapseHeadOffice{{ forloop.counter }}"
                aria-expanded="false"
                aria-controls="collapseHeadOffice{{ forloop.counter }}">
          {{ result.branch }} &nbsp;&nbsp;&nbsp; Total Manpower - {{ result.manpower }}
        </button>
      </h2>
      <div id="collapseHeadOffice{{ forloop.counter }}" class="accordion-collapse collapse" aria-labelledby="headingHeadOffice{{ forloop.counter }}" data-bs-parent="#accordionHeadOffice">
        <div class="accordion-body">
            {% if result.non_prodactive_non_ot_department %}
            <div class="accordion mb-3" id="accordionNonProdNonOT{{ forloop.counter }}">
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingNonProdNonOT{{ forloop.counter }}">
                <button class="accordion-button collapsed fw-bold center" type="button"
                        data-bs-toggle="collapse"
                        data-bs-target="#collapseNonProdNonOT{{ forloop.counter }}"
                        aria-expanded="false"
                        aria-controls="collapseNonProdNonOT{{ forloop.counter }}">
                    <div class="w-100">
                    Non Productive Non OT &nbsp;&nbsp;&nbsp;
                    Total Manpower - {{ result.non_prodactive_non_ot_grant_total }}
                    </div>
                </button>
                </h2>

                <div id="collapseNonProdNonOT{{ forloop.counter }}"
                    class="accordion-collapse collapse"
                    aria-labelledby="headingNonProdNonOT{{ forloop.counter }}"
                    data-bs-parent="#accordionNonProdNonOT{{ forloop.counter }}">
                <div class="accordion-body">
                    <table class="table table-hover" id="tbl_non_prod_non_ot{{ forloop.counter }}">
                    <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 result.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 result.non_prodactive_ot_department %}
            <div class="accordion mb-3" id="accordionNonProdOT{{ forloop.counter }}">
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingNonProdOT{{ forloop.counter }}">
                <button class="accordion-button collapsed fw-bold" type="button"
                        data-bs-toggle="collapse"
                        data-bs-target="#collapseNonProdOT{{ forloop.counter }}"
                        aria-expanded="false"
                        aria-controls="collapseNonProdOT{{ forloop.counter }}">
                    <div class="w-100">
                    Non Productive OT &nbsp;&nbsp;&nbsp;
                    Total Manpower - {{  result.non_prodactive_ot_grant_total }}
                    </div>
                    
                </button>
                </h2>

                <div id="collapseNonProdOT{{ forloop.counter }}"
                    class="accordion-collapse collapse"
                    aria-labelledby="headingNonProdOT{{ forloop.counter }}"
                    data-bs-parent="#accordionNonProdOT{{ forloop.counter }}">
                <div class="accordion-body">
                    <table class="table table-hover" id="tbl_non_prod_ot{{ forloop.counter }}">
                    <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 result.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 result.prodactive_non_ot_department %}
            <div class="accordion mb-3" id="accordionProdNonOT{{ forloop.counter }}">
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingProdNonOT{{ forloop.counter }}">
                <button class="accordion-button collapsed fw-bold" type="button"
                        data-bs-toggle="collapse"
                        data-bs-target="#collapseProdNonOT{{ forloop.counter }}"
                        aria-expanded="false"
                        aria-controls="collapseProdNonOT{{ forloop.counter }}">
                
                    <div class="w-100">
                        Productive Non OT &nbsp;&nbsp;&nbsp;
                        Total Manpower - {{  result.prodactive_non_ot_grant_total }}
                    </div>
                </button>
                </h2>

                <div id="collapseProdNonOT{{ forloop.counter }}"
                    class="accordion-collapse collapse"
                    aria-labelledby="headingProdNonOT{{ forloop.counter }}"
                    data-bs-parent="#accordionProdNonOT{{ forloop.counter }}">
                <div class="accordion-body">
                    <table class="table table-hover" id="tbl_prod_non_ot{{ forloop.counter }}">
                    <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 result.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 result.prodactive_ot_department %}
            <div class="accordion mb-3" id="accordionProdOT{{ forloop.counter }}">
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingProdOT{{ forloop.counter }}">
                <button class="accordion-button collapsed fw-bold" type="button"
                        data-bs-toggle="collapse"
                        data-bs-target="#collapseProdOT{{ forloop.counter }}"
                        aria-expanded="false"
                        aria-controls="collapseProdOT{{ forloop.counter }}">
                        <div class="w-100">
                        Productive  OT &nbsp;&nbsp;&nbsp;
                        Total Manpower - {{  result.prodactive_ot_grant_total }}
                    </div>

                </button>
                
                </h2>

                <div id="collapseProdOT{{ forloop.counter }}"
                    class="accordion-collapse collapse"
                    aria-labelledby="headingProdOT{{ forloop.counter }}"
                    data-bs-parent="#accordionProdOT{{ forloop.counter }}">
                <div class="accordion-body">
                    <table class="table table-hover" id="tbl_prod_ot{{ forloop.counter }}">
                    <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 result.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>
      </div>
    </div>
</div>
{% endif %}
{% endfor %}
</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 = [];

      // Collect all table ids dynamically (with forloop.counter in ids)
      document.querySelectorAll('table[id^="tbl_"]').forEach(tbl => {
        tableIds.push(tbl.id);
      });

      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')));
    }, 700);
  }
</script>

<script>
  function openAllAccordions() {
    return new Promise((resolve) => {
      const accordions = document.querySelectorAll('.accordion-collapse');
      let openedCount = 0;

      accordions.forEach((item, index) => {
        const collapseInstance = new bootstrap.Collapse(item, { toggle: false });
        item.addEventListener('shown.bs.collapse', function handler() {
          item.removeEventListener('shown.bs.collapse', handler);
          openedCount++;
          if (openedCount === accordions.length) {
            resolve(); // All accordions fully opened
          }
        });
        collapseInstance.show();
      });

      // If no accordions exist, resolve immediately
      if (accordions.length === 0) {
        resolve();
      }
    });
  }

  $('#employee-attendance-general-report-pdf-button').on('click', async function () {
    await openAllAccordions();

    const content = 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>');
    printWindow.document.write('<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">');
    printWindow.document.write('</head><body>');
    printWindow.document.write(content);
    printWindow.document.write('</body></html>');
    printWindow.document.close();

    printWindow.onload = function () {
      printWindow.focus();
      printWindow.print();
      printWindow.close();
    };
  });
</script>
{% endblock JS %}