{% load i18n %} {% load attendancefilters static horillafilters %}
{% include 'filter_tags.html' %}
<div class="oh-card">
  {% dynamic_regroup payslips by "group_name" as group_payslips %}
  {% for payslip in group_payslips %}
  <div class="oh-accordion-meta">
    <div class="oh-accordion-meta__item">
      <div class="oh-accordion-meta__header {% if request.GET.active_group == payslip.grouper %} oh-accordion-meta__header--show {% endif %}"
      {% if request.GET.active_group == payslip.grouper %} style="background-color: #ffff000f;" {% endif %}

      >
        <span class="oh-accordion-meta__title d-flex">
          <div class="oh-tabs__input-badge-container">
            <span class="oh-badge oh-badge--secondary oh-badge--small oh-badge--round ms-2 mr-2" title="{{payslip.list|length}} {% trans 'payslips' %}">
              {{payslip.list|length}}
              </span>
          </div>
          <span onclick="event.stopPropagation()">
            <input type="text" class="oh-tabs__movable-title  oh-table__editable-input--batch" value="{{payslip.grouper}}" name="" id="{{payslip.grouper}}Grouper" data-previous-name="{{payslip.grouper}}">
          </span>
        </span>
        <div class="oh-accordion-meta__actions" onclick="event.stopPropagation()" style="width:12%">
          <select name="update_selected" onclick="event.stopPropagation()" class="oh-select" data-accordion-id="{{payslip.grouper}}Container">
            <option value="">------</option>
            <option value="draft">{% trans "Draft" %}</option>
            <option value="review_ongoing">{% trans "Review Ongoing" %}</option>
            <option value="confirmed">{% trans "Confirmed" %}</option>
            <option value="paid">{% trans "Paid" %}</option>
          </select>
        </div>
      </div>
      <div class="oh-accordion-meta__body {% if request.GET.active_group != payslip.grouper %} d-none {% endif %}" id="{{payslip.grouper}}Container">
        <div class="oh-sticky-table oh-sticky-table--no-overflow mb-5">
          <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;">
                  <div class="centered-div">
                    <input
                      type="checkbox"
                      title="{% trans 'Select all users' %}"
                      class="oh-input oh-input__checkbox select-all-payslip-row"
                      data-accordion-id="{{payslip.grouper}}Container"
                    />
                  </div>
                </div>
                <div class="oh-sticky-table__th">{% trans "Employee" %}</div>
                <div class="oh-sticky-table__th">{% trans "Start Date" %}</div>
                <div class="oh-sticky-table__th">{% trans "End Date" %}</div>
                <div class="oh-sticky-table__th">{% trans "Gross Pay" %}</div>
                <div class="oh-sticky-table__th">{% trans "Deduction" %}</div>
                <div class="oh-sticky-table__th">{% trans "Net Pay" %}</div>
                <div class="oh-sticky-table__th">{% trans "Status" %}</div>
                <div class="oh-sticky-table__th" style="width: 251px !important;">{% trans "Actions" %}</div>
              </div>
            </div>
            <div class="oh-sticky-table__tbody" >
              {% for payslip in payslip.list %}
              <div class="oh-sticky-table__tr oh-multiple-table-sort__movable">
                <div class="oh-sticky-table__sd {% if payslip.status == "review_ongoing" %}row-status--orange {% elif payslip.status == "confirmed" %} row-status--blue {% elif payslip.status == "paid" %} row-status--yellow {% elif payslip.status == "draft" %} row-status--gray{% endif %}">
                  <div class="centered-div">
                    <input
                      type="checkbox"
                      id="{{payslip.id}}"
                      value="{{payslip.id}}"
                      onchange="highlightRow($(this))"
                      onchange="$(this).attr('data-checked', $(this).is(':checked'));"
                      class="oh-input payslip-checkbox oh-input__checkbox all-payslip-row payslip-row"
                    />
                  </div>
                </div>
                <div class="oh-sticky-table__td">
                  <div class="oh-profile oh-profile--md">
                    <div class="oh-profile__avatar mr-1">
                      <img
                        src="{{payslip.employee_id.get_avatar}}"
                        class="oh-profile__image"
                        alt="Mary Magdalene"
                      />
                    </div>
                    <span class="oh-profile__name oh-text--dark">{{payslip.employee_id}}</span>
                  </div>
                </div>
                {% comment %} <div class="oh-sticky-table__td">
                  <span class="dateformat_changer">{{payslip.start_date}}</span> &nbsp {% trans "to" %} &nbsp <span class="dateformat_changer">{{payslip.end_date}}</span>
                </div> {% endcomment %}
                <div class="oh-sticky-table__td dateformat_changer">
                  {{payslip.start_date}}
                </div>
                <div class="oh-sticky-table__td dateformat_changer">
                  {{payslip.end_date}}
                </div>
                <div class="oh-sticky-table__td">
                  {{payslip.gross_pay|floatformat:2|currency_symbol_position}}
                </div>
                <div class="oh-sticky-table__td">
                  {{payslip.deduction|floatformat:2|currency_symbol_position}}
                </div>
                <div class="oh-sticky-table__td">
                  {{payslip.net_pay|floatformat:2|currency_symbol_position}}
                </div>
                {% if perms.payroll.change_payslip %}
                  <div class="oh-sticky-table__td">
                    <select name="pay_status" data-instance-id="{{payslip.id}}">
                      {% for opt in payslip.status_choices %}
                      <option value="{{opt.0}}"{% if opt.0 == payslip.status %}selected{% endif %}>{{opt.1}}</option>
                      {% endfor %}
                    </select>
                  </div>
                {% else %}
                  <div data-cell-index="3" class="oh-sticky-table__td">
                    {{payslip.get_status_display}}
                  </div>
                {% endif %}
                <div class="oh-sticky-table__td">
                  <div class="oh-btn-group">
                    <a href="{% url 'view-created-payslip' payslip.id %}" type="button" title="{% trans 'View' %}" class="oh-btn oh-btn--light-bkg w-50"> <ion-icon name="eye-outline"></ion-icon></a>
                    <a href="{% url 'payslip-pdf' payslip.id %}" type="button" title="{% trans 'Download' %}" class="oh-btn oh-btn--light-bkg w-50"> <ion-icon name="download"></ion-icon></a>
                    {% if perms.payroll.add_payslip %}
                    <a
                      hx-confirm="{% trans 'Do you want to sent the payslip by mail?' %}" hx-get="{% url "send-slip" %}?id={{payslip.id}}" hx-target="#payslips-table"
                      title="{% trans 'Send via mail ' %}" {% if payslip.sent_to_employee %}class="oh-btn sent-to-employee w-50"{% else %}class="oh-btn oh-btn--light-bkg w-50"{% endif %}> <ion-icon name="mail-outline"></ion-icon></a>
                    {% endif %}
                    <div class="w-50">
                      {% if perms.payroll.change_payslip %}
                        <form action="{% url 'delete-payslip' payslip.id %}" onsubmit="return confirm('{% trans "Are you sure you want to delete this payslip?" %}');" method='post'>
                          {% csrf_token %}
                          <button type='submit' class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100" title="{% trans 'Remove' %}"><ion-icon name="trash-outline"></ion-icon></button>
                        </form>
                      {% endif %}
                    </div>
                  </div>
                </div>
              </div>
              {% endfor %}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  {% endfor %}
</div>

<div class="oh-pagination">
  <span
    class="oh-pagination__page"
    >
    {% trans "Page" %} {{ payslips.number }} {% trans "of" %} {{ payslips.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="{{payslips.number}}"
        hx-get="{% url 'filter-payslip' %}?{{pd}}&group_by=group_name"
        hx-target="#payroll-payslip-container"
        min="1"
      />
      <span class="oh-pagination__label">{% trans "of" %} {{payslips.paginator.num_pages}}</span>
    </div>
    <ul class="oh-pagination__items">
      {% if payslips.has_previous %}
      <li class="oh-pagination__item oh-pagination__item--wide">
        <a hx-target='#payroll-payslip-container' hx-get="{% url 'filter-payslip' %}?{{pd}}&page=1&group_by=group_name" class="oh-pagination__link">{% trans "First" %}</a>
      </li>
      <li class="oh-pagination__item oh-pagination__item--wide">
        <a hx-target='#payroll-payslip-container' hx-get="{% url 'filter-payslip' %}?{{pd}}&page={{ payslips.previous_page_number }}&group_by=group_name" class="oh-pagination__link">{% trans "Previous" %}</a>
      </li>
      {% endif %}
      {% if payslips.has_next %}
      <li class="oh-pagination__item oh-pagination__item--wide">
        <a hx-target='#payroll-payslip-container' hx-get="{% url 'filter-payslip' %}?{{pd}}&page={{ payslips.next_page_number }}&group_by=group_name" class="oh-pagination__link">{% trans "Next" %}</a>
      </li>
      <li class="oh-pagination__item oh-pagination__item--wide">
        <a hx-target='#payroll-payslip-container' hx-get="{% url 'filter-payslip' %}?{{pd}}&page={{ payslips.paginator.num_pages }}&group_by=group_name" class="oh-pagination__link">{% trans "Last" %}</a>
      </li>
      {% endif %}
    </ul>
  </nav>
</div>
<script>
  $(".select-all-payslip-row").change(function (e) {
    e.preventDefault();
    var accordionId = $(this).attr("data-accordion-id");
    $(`[id="${accordionId}"] .payslip-row`).prop("checked",false).change()
    .closest(".oh-sticky-table__tr")
    .removeClass("highlight-selected");
    $(`[id="${accordionId}"] .payslip-row`).attr("data-checked", false);

    if ($(this).is(":checked")) {
      $(`[id="${accordionId}"] .payslip-row`).prop("checked",true).change()
      .closest(".oh-sticky-table__tr")
      .addClass("highlight-selected");
      $(`[id="${accordionId}"] .payslip-row`).attr("data-checked", true).change();
    }
  });
  $("[name=pay_status]").change(function (e) {
    let $element = $(this)
    updatePayStatus($element)
  });
  $("[name=update_selected]").change(function (e) {
    e.preventDefault();
    updateBulkStatus($(this))
  });
  $(".oh-table__editable-input--batch").focusout(function (e) {
    e.preventDefault();
    var grouper = $(this)
    var previousName = grouper.attr("data-previous-name");
    var newName = grouper.val();
    $.ajax({
      type: "post",
      url: "{% url 'update-batch-group-name' %}",
      data: {
        csrfmiddlewaretoken: getCookie("csrftoken"),
        newName: newName,
        previousName:previousName
      },
      success: function (response) {
        grouper.attr("data-previous-name", response.new_name);
        $("#messageContainer").html($($(`
            <div class="oh-alert-container">
              <div class="oh-alert oh-alert--animated  oh-alert--${response.type}">
                ${response.message}
              </div>
            </div>`)
            ))
      },error:()=>{
        $("#messageContainer").html($($(`
          <div class="oh-alert-container">
            <div class="oh-alert oh-alert--animated  oh-alert--danger">
              Status not updated.
            </div>
          </div>`
          )
        ))
        }
    });
  });
  $(".payslip-row.all-payslip-row").change(function (e) {
    e.preventDefault();
    // var id
    var ids = JSON.parse($("#selectedPayslip").attr("data-ids"))
    if ($(this).is(":checked")) {
      ids.push($(this).val())
    }else{
      let index = ids.indexOf($(this).val());
      if (index !== -1) {
        ids.splice(index, 1);
      }
    }
    ids  = [...new Set(ids)]
    var idsJson = JSON.stringify(ids)
    $("#selectedPayslip").attr("data-ids", idsJson);
  });
</script>
<script src="{% static 'payroll/action.js' %}"></script>
