{% load i18n %}
{% load static %}
{% include 'filter_tags.html' %}
{% if messages %}
<div class="oh-wrapper">
  {% for message in messages %}
  <div class="oh-alert-container">
    <div class="oh-alert oh-alert--animated {{message.tags}}">
      {{ message }}
    </div>
  </div>
  {% endfor %}
</div>
{% endif %}
{% if contracts %}
  <div class="oh-table_sticky--wrapper">
    <div class="oh-sticky-dropdown--header">
      <div class="oh-dropdown" x-data="{open: false}">
        <button class="oh-sticky-dropdown_btn " @click="open = !open"><ion-icon name="ellipsis-vertical-sharp"
          role="img" class="md hydrated" aria-label="ellipsis vertical sharp"></ion-icon></button>
        <div class="oh-dropdown__menu oh-sticky-table_dropdown" x-show="open" @click.outside="open = false">
        <ul class="oh-dropdown__items" id="contractCells">
        </ul>
        </div>
      </div>
    </div>
  </div>
  <div id="contract-table" data-table-name="contracts_tab">
    <!-- start of sticky table  -->
    <div class="oh-sticky-table">
      <div class="oh-sticky-table__table">
        <div class="oh-sticky-table__thead">
          <div class="oh-sticky-table__tr">
            <div class="oh-sticky-table__th" style="width: 10px; @media (max-width: 575.98px) { position: sticky; }">
              <div class="centered-div">
                <input
                      type="checkbox"
                      class="all-contract oh-input oh-input__checkbox"
                      id = "Allcontract"
                      title='{% trans "Select All" %}'
                    />
              </div>
            </div>
            <div class="oh-sticky-table__th">{% trans "Contract" %}</div>
            <div data-cell-index="1" data-cell-title='{% trans "Employee" %}'
              class="oh-sticky-table__th {% if request.sort_option.order == '-employee_id__employee_first_name' %}arrow-up {% elif request.sort_option.order == 'employee_id__employee_first_name' %}arrow-down {% else %} arrow-up-down {% endif %}"
              hx-target="#payroll-contract-container" hx-get="{% url 'contract-filter' %}?{{pd}}&orderby=employee_id__employee_first_name"
            >{% trans "Employee" %}</div>
            <div data-cell-index="2" data-cell-title='{% trans "Start Date" %}'
              class="oh-sticky-table__th {% if request.sort_option.order == '-contract_start_date' %}arrow-up {% elif request.sort_option.order == 'contract_start_date' %}arrow-down {% else %} arrow-up-down {% endif %}"
              hx-target="#payroll-contract-container" hx-get="{% url 'contract-filter' %}?{{pd}}&orderby=contract_start_date"
            >{% trans "Start Date" %}</div>
            <div data-cell-index="3" data-cell-title='{% trans "End Date" %}'
              class="oh-sticky-table__th {% if request.sort_option.order == '-contract_end_date' %}arrow-up {% elif request.sort_option.order == 'contract_end_date' %}arrow-down {% else %} arrow-up-down {% endif %}"
              hx-target="#payroll-contract-container" hx-get="{% url 'contract-filter' %}?{{pd}}&orderby=contract_end_date"
            >{% trans "End Date" %}</div>
            <div data-cell-index="4" data-cell-title='{% trans "Wage Type" %}'
              class="oh-sticky-table__th"
            >{% trans "Wage Type" %}</div>
            <div data-cell-index="5" data-cell-title='{% trans "Basic Salary" %}'
              class="oh-sticky-table__th {% if request.sort_option.order == '-wage' %}arrow-up {% elif request.sort_option.order == 'wage' %}arrow-down {% else %} arrow-up-down {% endif %}"
              hx-target="#payroll-contract-container" hx-get="{% url 'contract-filter' %}?{{pd}}&orderby=wage"
            >{% trans "Basic Salary" %}</div>
            <div data-cell-index="6" data-cell-title='{% trans "Filing Status" %}' class="oh-sticky-table__th">{% trans "Filing Status" %}</div>
            <div data-cell-index="7" data-cell-title='{% trans "Status" %}' class="oh-sticky-table__th">{% trans "Status" %}</div>
            {% if perms.payroll.change_contract or perms.payroll.delete_contract %}
              <div class="oh-sticky-table__th oh-sticky-table__right">{% trans "Actions" %}</div>
            {% endif %}
          </div>
        </div>
        <div class="oh-sticky-table__tbody">
          {% for contract in contracts %}
          <div class="oh-sticky-table__tr" draggable="true" data-toggle="oh-modal-toggle" data-target = "#objectDetailsModal" hx-get="{% url 'single-contract-view' contract.id %}?{{pd}}&instances_ids={{contract_ids}}" hx-target = "#objectDetailsModalTarget">
            <div class="oh-sticky-table__sd  {% if contract.contract_status == "active" %} row-status--yellow
                {% elif contract.contract_status == 'draft' %} row-status--purple
                {% elif contract.contract_status == 'expired' %} row-status--red
                {% elif contract.contract_status == 'terminated' %} row-status--black {% endif %}" onclick="event.stopPropagation()">
                <div class="centered-div">
                  <input
                    type="checkbox"
                    id="{{contract.id}}"
                    onchange="highlightRow($(this))"
                    value="{{contract.id}}"
                    class="oh-input payslip-checkbox oh-input__checkbox all-contract-row"
                  />
                </div>
            </div>
            <div class="oh-sticky-table__td">{{ contract.contract_name }}</div>
            <div data-cell-index="1" class="oh-sticky-table__td">{{ contract.employee_id }}</div>
            <div data-cell-index="2" class="oh-sticky-table__td dateformat_changer">{{ contract.contract_start_date}}</div>
            <div data-cell-index="3" class="oh-sticky-table__td dateformat_changer">
              {% if contract.contract_end_date %}{{ contract.contract_end_date}}{% endif %}
            </div>
            <div data-cell-index="4" class="oh-sticky-table__td">
              {{ contract.get_wage_type_display}}
            </div>
            <div data-cell-index="5" class="oh-sticky-table__td">{{ contract.wage}}</div>
            <div data-cell-index="6" class="oh-sticky-table__td">{{ contract.filing_status}}</div>
            <!-- Future updation
                <div data-cell-index="6" class="oh-sticky-table__td" onclick="event.stopPropagation();">
                  <select name="filing_status" hx-trigger="change" hx-post="{% url 'update-contract-filing-status' contract.id %}" hx-target="#payroll-contract-container" hx-vals='{"view":"table"}' class="oh-table__editable-input w-100">
                    {% for filing_status_id, filing_status_label in contract.FILING_STATUS_CHOICES %}
                      <option value="{{ filing_status_id }}" {% if filing_status_id == contract.filing_status.id %}selected{% endif %}>{{ filing_status_label }}</option>
                    {% endfor %}
                  </select>
                </div>
            -->
            {% if perms.payroll.change_contract %}
              <div data-cell-index="7" class="oh-sticky-table__td" onclick="event.stopPropagation();">
                <select name="status" hx-trigger="change" hx-post="{% url 'update-contract-status' contract.id %}?{{pd}}" hx-target="#payroll-contract-container" hx-vals='{"view":"table"}' class="oh-table__editable-input w-100" >
                  {% for option in contract.CONTRACT_STATUS_CHOICES %}
                  <option value="{{option.0}}"{% if option.0 == contract.contract_status %}selected{% endif %}>{{option.1}}</option>
                  {% endfor %}
                </select>
              </div>
            {% else %}
              <div class="oh-sticky-table__td">
                {{ contract.get_contract_status_display}}
              </div>
            {% endif %}
            {% if perms.payroll.change_contract or perms.payroll.delete_contract %}
              <div class="oh-sticky-table__td oh-sticky-table__right">
                <div class="oh-btn-group">
                  {% if perms.payroll.change_contract %}
                    <a
                    onclick="event.stopPropagation()"
                      class="oh-btn oh-btn--light-bkg w-100"
                      href="{% url 'update-contract' contract.id %}"
                      title='{% trans "Update" %}'
                    >
                      <ion-icon
                        name="create-outline"
                        role="img"
                        class="md hydrated"
                        style="color: blue"
                        aria-label="create outline"
                      ></ion-icon>
                    </a>
                  {% endif %}
                  {% if perms.payroll.delete_contract %}
                    <a
                      onclick = "event.preventDefault();event.stopPropagation();"
                      class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
                      hx-confirm="{% trans 'Do you want to delete this Contract?' %}"
                      hx-post="{% url 'delete-contract' contract.id %}?{{pd}}"
                      hx-target="#payroll-contract-container"
                      hx-swap="innerHTML"
                      title="{% trans 'Delete' %}"
                    >
                      <ion-icon
                        name="trash-outline"
                        role="img"
                        class="md hydrated"
                        aria-label="trash outline"
                      ></ion-icon>
                    </a>
                  {% endif %}
                </div>
              </div>
            {% endif %}
          </div>
          {% endfor %}
        </div>
      </div>
    </div>
    <div class="oh-pagination">
      <span
        class="oh-pagination__page"
        >
        {% trans "Page" %} {{ contracts.number }} {% trans "of" %} {{ contracts.paginator.num_pages }}.
        </span
      >
      <nav class="oh-pagination__nav">
        <div class="oh-pagination__input-container me-3">
          <span class="oh-pagination__label me-1">{% trans "Page" %}</span>
          <input
            type="number"
            name="page"
            class="oh-pagination__input"
            value="{{contracts.number}}"
            hx-get="{% url 'contract-filter' %}?{{pd}}"
            hx-target="#payroll-contract-container"
            min="1"
          />
          <span class="oh-pagination__label">{% trans "of" %} {{contracts.paginator.num_pages}}</span>
        </div>
        <ul class="oh-pagination__items">
          {% if contracts.has_previous %}
          <li class="oh-pagination__item oh-pagination__item--wide">
            <a hx-target='#payroll-contract-container' hx-get="{% url 'contract-filter' %}?{{pd}}&page=1" class="oh-pagination__link" onclick=tickContractCheckboxes()>{% trans "First" %}</a>
          </li>
          <li class="oh-pagination__item oh-pagination__item--wide">
            <a hx-target='#payroll-contract-container' hx-get="{% url 'contract-filter' %}?{{pd}}&page={{ contracts.previous_page_number }}" class="oh-pagination__link" onclick=tickContractCheckboxes()>{% trans "Previous" %}</a>
          </li>
          {% endif %}
          {% if contracts.has_next %}
          <li class="oh-pagination__item oh-pagination__item--wide">
            <a hx-target='#payroll-contract-container' hx-get="{% url 'contract-filter' %}?{{pd}}&page={{ contracts.next_page_number }}" class="oh-pagination__link" onclick=tickContractCheckboxes()>{% trans "Next" %}</a>
          </li>
          <li class="oh-pagination__item oh-pagination__item--wide">
            <a hx-target='#payroll-contract-container' hx-get="{% url 'contract-filter' %}?{{pd}}&page={{ contracts.paginator.num_pages }}" class="oh-pagination__link" onclick=tickContractCheckboxes()>{% trans "Last" %}</a>
          </li>
          {% endif %}

        </ul>
      </nav>
    </div>
    <!-- end of sticky table  -->
  </div>
{% else %}
  <!-- start of empty page -->
  <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;">
    <img style="width: 190px;height: 190px;" src="{% static 'images/ui/no-results.png' %}" class="oh-404__image mb-4" alt="Page not found. 404."/>
    <h5 class="oh-404__subtitle">{% trans "No search result found!" %}</h5>
  </div>
  <!-- end of empty page -->
{% endif %}




<script>
  $("#Allcontract").click(function (e) {
    var is_checked = $(this).is(":checked");
    if (is_checked) {
      $(".all-contract-row").prop("checked", true).closest(".oh-sticky-table__tr")
      .addClass("highlight-selected");
    } else {
      $(".all-contract-row").prop("checked", false).closest(".oh-sticky-table__tr")
      .removeClass("highlight-selected");
    }
    addingContractIds();
  });
  $("#exportContracts").click(function (e) {
    exportContractRequest();
  });

  $(".all-contract-row").change(function () {
    if ($('.all-contract').is(":checked")) {
      $(".all-contract").prop("checked", false);
    }
    addingContractIds();
  });

  $(document).ready(function () {
    var ids = JSON.parse($("#selectedInstances").attr("data-ids") || "[]");
    if (ids.length === 0) {
      $("#unselectAllContracts").css("display", "none");
      $("#exportContracts").css("display", "none");
      $("#selectedShow").css("display", "none");
    }
    tickContractCheckboxes();
    $("#selectAllContracts").click(function () {
      selectAllContracts();
    });

    $("#unselectAllContracts").click(function () {
      unselectAllContracts();
    });
  });
    // toggle columns //
    toggleColumns("contract-table","contractCells")
    localStoragecontractCells = localStorage.getItem("contracts_tab")
    if (!localStoragecontractCells) {
      $("#contractCells").find("[type=checkbox]").prop("checked",true)
    }
    $("[type=checkbox]").change()
</script>
<script src="{% static 'payroll/action.js' %}"></script>
