{% load static %}
{% load i18n %}

  <div class="oh-dropdown__filter-body">
    <div class="oh-accordion">
      <div class="oh-accordion-header">{% trans "Contract" %}</div>
      <div class="oh-accordion-body">
        <div class="row">
          <div class="col-sm-6">
            <div class="oh-input-group">
              <label class="oh-label" for="{{f.form.contract_start_date.id_for_label}}">{% trans "Start Date" %}</label>
              {{ f.form.contract_start_date }}
            </div>
          </div>
          <div class="col-sm-6">
            <div class="oh-input-group">
              <label class="oh-label" for="{{f.form.contract_end_date.id_for_label}}">{% trans "End Date" %}</label>
              {{ f.form.contract_end_date }}
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-6">
            <div class="oh-input-group">
              <label class="oh-label" for="{{f.form.wage_type.id_for_label}}">{% trans "Wage Type" %}</label>
              {{ f.form.wage_type }}
            </div>
          </div>
          <div class="col-sm-6">
            <div class="oh-input-group">
              <label class="oh-label" for="{{f.form.filing_status.id_for_label}}">{% trans "Filing Status" %}</label>
              {{ f.form.filing_status }}
            </div>
          </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
              <div class="oh-input-group">
                <label class="oh-label" for="{{f.form.pay_frequency.id_for_label}}">{% trans "Pay Frequency" %}</label>
                {{ f.form.pay_frequency }}
              </div>
            </div>
            <div class="col-sm-6">
              <div class="oh-input-group">
                <label class="oh-label" for="{{f.form.contract_status.id_for_label}}">{% trans "Status" %}</label>
                {{ f.form.contract_status }}
              </div>
            </div>
        </div>
      </div>
    </div>
    <div class="oh-accordion">
      <div class="oh-accordion-header">{% trans "Work Info" %}</div>
      <div class="oh-accordion-body">
        <div class="row">
          <div class="col-sm-6">
            <div class="oh-input-group">
              <label class="oh-label" for="{{f.form.employee_id__employee_work_info__company_id.id_for_label}}">{% trans "Company" %}</label>
              {{ f.form.employee_id__employee_work_info__company_id }}
            </div>
          </div>
          <div class="col-sm-6">
            <div class="oh-input-group">
              <label class="oh-label" for="{{f.form.department.id_for_label}}">{% trans "Department" %}</label>
              {{ f.form.department }}
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-6">
            <div class="oh-input-group">
              <label class="oh-label" for="{{f.form.job_position.id_for_label}}">{% trans "Job Position" %}</label>
              {{ f.form.job_position }}
            </div>
          </div>
          <div class="col-sm-6">
            <div class="oh-input-group">
              <label class="oh-label" for="{{f.form.job_role.id_for_label}}">{% trans "Job Role" %}</label>
              {{ f.form.job_role }}
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-6">
            <div class="oh-input-group">
              <label class="oh-label" for="{{f.form.shift.id_for_label}}">{% trans "Shift" %}</label>
              {{ f.form.shift }}
            </div>
          </div>
          <div class="col-sm-6">
            <div class="oh-input-group">
              <label class="oh-label" for="{{f.form.work_type.id_for_label}}">{% trans "Work Type" %}</label>
              {{ f.form.work_type }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="oh-accordion">
      <div class="oh-accordion-header">{% trans "Advanced" %}</div>
      <div class="oh-accordion-body">
        <div class="row">
          <div class="col-sm-6">
            <div class="oh-input-group">
              <label class="oh-label" for="{{f.form.contract_start_date_from.id_for_label}}">{% trans "Contract Start Date From" %}</label>
              {{ f.form.contract_start_date_from }}
            </div>
          </div>
          <div class="col-sm-6">
            <div class="oh-input-group">
              <label class="oh-label" for="{{f.form.contract_start_date_till.id_for_label}}">{% trans "Contract Start Date Till" %}</label>
              {{ f.form.contract_start_date_till }}
            </div>
          </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
              <div class="oh-input-group">
                <label class="oh-label" for="{{f.form.contract_end_date_from.id_for_label}}">{% trans "Contract End Date From" %}</label>
                {{ f.form.contract_end_date_from }}
              </div>
            </div>
            <div class="col-sm-6">
              <div class="oh-input-group">
                <label class="oh-label" for="{{f.form.contract_end_date_till.id_for_label}}">{% trans "Contract End Date Till" %}</label>
                {{ f.form.contract_end_date_till }}
              </div>
            </div>
          </div>
        <div class="row">
          <div class="col-sm-6">
            <div class="oh-input-group">
              <label class="oh-label" for="{{f.form.basic_pay__lte.id_for_label}}"
                >{% trans "Basic Salary Less Than or Equal" %}</label
              >
              {{ f.form.basic_pay__lte }}
            </div>
          </div>
          <div class="col-sm-6">
            <div class="oh-input-group">
              <label class="oh-label" for="{{f.form.basic_pay__gte.id_for_label}}"
                >{% trans "Basic Salary Greater or Equal" %}</label
              >
              {{ f.form.basic_pay__gte }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="oh-dropdown__filter-footer">
    <button class="oh-btn oh-btn--secondary oh-btn--small w-100 filterButton" id="filterSubmit">
      {% trans "Filter" %}
    </button>
  </div>

<script>
  $("#filterForm").submit(function (e) {
    var formData = $(this).serialize();
    count = 0;
    formData.split("&").forEach(function (field) {
      parts = field.split("=");
      value = parts[1];
      if (value != "" && parts[0] != "field") {
        count++;
      }
    });
    $("#filterCount").empty();
    if (count > 0) {
      $("#filterCount").text("(" + count + ")");
    }
    $("#field").attr("hx-vals", `{'data':${formData}}`);
  });
</script>
