{% extends "index.html" %} {% load static %} {% load i18n %} {% block content %}
<div class="oh-wrapper d-flex justify-content-center mt-4 mb-4">
  <form
    action="{% url 'save-employee-bulk-update' %}"
    class="oh-onboarding-card"
    method="post"
  >
    {% csrf_token %}
    <input type="hidden" name="update_fields" value="{{ update_fields }}" />
    <input
      type="hidden"
      name="bulk_employee_ids"
      value="{{ bulk_employee_ids }}"
    />
    <div class="oh-profile-section">
      <div class="oh-payslip__header">
        <div class="oh-payslip__header-left">
          <div class="oh-payroll__component-title">
            {% trans "Employees Bulk Update" %}
          </div>
        </div>
      </div>
      {{form.as_p}} {{form1.as_p}} {{form2.as_p}}
      <div class="oh-dropdown__filter-footer" style="margin-bottom: 10px">
        <button class="oh-btn oh-btn--secondary oh-btn--small w-100">
          {% trans "Update" %}
        </button>
      </div>
    </div>
  </form>
</div>
<script src="{% static 'employee/actions.js' %}"></script>
<script>
  {% include "country.js" %}
</script>

<script>
  function depChange(value) {
      var departmentId = value.val(); // Get the selected department ID

      // Make AJAX request to fetch available job positions for the selected department
      $.ajax({
        url: '{% url "get-job-positions" %}',
        method: 'GET',
        data: {
          'department_id': departmentId
        },
        success: function(data) {

          // Clear existing options in the Job Position dropdown
          $('#id_job_position_id').empty();

          // Append new options based on the response
          $.each(data.job_positions, function(key, value) {
            $('#id_job_position_id').append($('<option>', {
              value: key,
              text: value
            }));
          });
          $('#id_job_position_id').change();
        }
      });

  }

  // Add event listener to the Job Position dropdown
  function jobChange(selectElement){

    var jobId = selectElement.val(); // Get the selected jobposition ID

    // Make AJAX request to fetch available job roles for the selected job positions
    $.ajax({
      url: '{% url "get-job-roles" %}',
      method: 'GET',
      data: {
        'job_id': jobId
      },
      success: function(data) {
        // Clear existing options in the Job role dropdown
        $('#id_job_role_id').empty();

        // Append new options based on the response
        $.each(data.job_roles, function(key, value) {
          $('#id_job_role_id').append($('<option>', {
            value: key,
            text: value
          }));
        });
      }
    });
  };
</script>

{% endblock %}