{% load static %}
{% load i18n horillafilters %}
{% 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 %}
{% include 'filter_tags.html' %}
{% if not request.GET.dashboard %}
    <div
      class="oh-checkpoint-badge text-success mb-2"
      id="selectAllPayslip"
      style="cursor: pointer"
    >
      {% trans "Select All Payslips" %}
    </div>
    <div
      class="oh-checkpoint-badge text-secondary mb-2"
      id="unselectAllPayslip"
      style="cursor: pointer;display:none;"
    >
      {% trans "Unselect All Payslips" %}
    </div>
    <div
      class="oh-checkpoint-badge text-info mb-2"
      id="exportPayslips"
      style="cursor: pointer;display:none;"
    >
      {% trans "Export Payslips" %}
    </div>
    <div class="oh-checkpoint-badge text-danger mb-2" id="selectedSlipShow"></div>
{% endif %}
{% if payslips %}
<div class="oh-card">
	{% for payslip_list in payslips %}
	<div class="oh-accordion-meta">
		<div class="oh-accordion-meta__item">
			<div class="oh-accordion-meta__header" onclick='$(this).toggleClass("oh-accordion-meta__header--show");'>
				<span class="oh-accordion-meta__title pt-3 pb-3">
					<div class="oh-tabs__input-badge-container">
						<span
							class="oh-badge oh-badge--secondary oh-badge--small oh-badge--round mr-1"
						>
              {{payslip_list.list.paginator.count}}
						</span>
            {% if request.GET.field == "group_name" and payslip_list.grouper %}
            <span onclick="event.stopPropagation()">
              <input style="font-size: 13px;
              font-weight: bold;
              border: none;" type="text" class="oh-tabs__movable-title  oh-table__editable-input--batch" value="{{payslip_list.grouper}}" name="" id="{{payslip_list.grouper}}Grouper" data-previous-name="{{payslip_list.grouper}}">
            </span>
            {% else %}
						{{payslip_list.grouper}}
            {% endif %}
					</div>
				</span>
			</div>
			<div class="oh-accordion-meta__body d-none">
				<div class="oh-sticky-table oh-sticky-table--no-overflow mb-5">
					<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;">
										<div class="centered-div">
										<input
											type="checkbox"
											class="group-select oh-input oh-input__checkbox"
                      onchange="
                      $(this).closest('.oh-sticky-table').find('.payslip-checkbox').prop('checked',$(this).is(':checked')).change();
                      $(this).prop('checked',$(this).is(':checked'))
                      "
											id = ""
											title='{% trans "Select All" %}'
										/>
										</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 "Batch" %}</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 oh-sticky-table__right">{% trans "Actions" %}</div>
								</div>
						  </div>
						  <div class="oh-sticky-table__tbody">
							{% for payslip in payslip_list.list %}
							    <a class="oh-sticky-table__tr" draggable="true" href="{% url 'view-created-payslip' payslip.id %}" style="text-decoration: none;">
                                    <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));
                                            if (!$(this).is(':checked')) {
                                              $(this).closest('.oh-sticky-table').find('.group-select').prop('checked',false)
                                            }
                                            "
                                            class="oh-input payslip-checkbox oh-input__checkbox all-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>
                                    <div data-cell-index="1" class="oh-sticky-table__td dateformat_changer">
                                      {{payslip.start_date}}
                                    </div>
                                    <div data-cell-index="2" class="oh-sticky-table__td dateformat_changer">
                                      {{payslip.end_date}}
                                    </div>
                                    <div data-cell-index="4" class="oh-sticky-table__td">
                                      {{payslip.group_name}}
                                    </div>
                                    <div data-cell-index="5" class="oh-sticky-table__td">
                                      {{payslip.gross_pay|floatformat:2|currency_symbol_position}}
                                    </div>
                                    <div data-cell-index="6" class="oh-sticky-table__td">
                                      {{payslip.deduction|floatformat:2|currency_symbol_position}}
                                    </div>
                                    <div data-cell-index="7" class="oh-sticky-table__td">
                                      {{payslip.net_pay|floatformat:2|currency_symbol_position}}
                                    </div>
                                    {% if perms.payroll.change_payslip %}
                                      <div data-cell-index="3" class="oh-sticky-table__td" onclick="event.preventDefault();">
                                        <select name="status" data-instance-id="{{payslip.id}}" hx-trigger="change" hx-post="{% url 'payslip-status-update' payslip.id %}"
                                                hx-target="#payslips-table" hx-vals='{"view":"table"}'
                                                style="color: hsl(0,0%,11%); background-color: transparent; border: none; height: 100%; border: 1px solid transparent;">
                                          {% 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 oh-sticky-table__right"style="width: 251px !important;">
                                      <div class="oh-btn-group">
                                        <form action="{% url 'payslip-pdf' payslip.id %}" method='post' class="w-75">
                                          {% csrf_token %}
                                          <button type='submit' title="{% trans 'Download' %}" class="oh-btn oh-btn--light-bkg w-100"> <ion-icon name="download"></ion-icon></button>
                                        </form>
                                        {% if perms.payroll.add_payslip %}
                                          <button 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' %}" type="button" {% 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>
                                          </button>
                                        {% endif %}
                                        {% if perms.payroll.delete_payslip %}

                                            <button hx-confirm="{% trans 'Are you sure you want to delete this payslip?' %}" hx-post="{% url 'delete-payslip' payslip.id %}"
                                                    hx-target="#payslips-table" class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-50" title="{% trans 'Remove' %}"
                                                  >
                                              <ion-icon name="trash-outline"></ion-icon>
                                            </button>              {% endif %}
                                      </div>
                                    </div>
                                </a>
							{% endfor %}
						  </div>
						</div>
					</div>
        		</div>
                <div class="oh-pagination">
                    <span class="oh-pagination__page">
                      {% trans "Page" %} {{ payslip_list.list.number }} {% trans "of" %} {{ payslip_list.list.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="{{payslip_list.dynamic_name}}"
                              class="oh-pagination__input"
                              value="{{payslip_list.list.number}}"
                              hx-get="{% url 'filter-payslip' %}?{{pd}}"
                              hx-target="#payslips-table"
                              min="1"
                            />
                            <span class="oh-pagination__label">
                              {% trans "of" %} {{payslip_list.list.paginator.num_pages}}
                            </span>
                        </div>
                        <ul class="oh-pagination__items">
                            {% if payslip_list.list.has_previous %}
                                <li class="oh-pagination__item oh-pagination__item--wide">
                                    <a
                                    hx-target="#payslips-table"
                                    hx-get="{% url 'filter-payslip' %}?{{pd}}&{{payslip_list.dynamic_name}}=1"
                                    class="oh-pagination__link"
                                    >{% trans "First" %}</a
                                    >
                                </li>
                                <li class="oh-pagination__item oh-pagination__item--wide">
                                    <a
                                    hx-target="#payslips-table"
                                    hx-get="{% url 'filter-payslip' %}?{{pd}}&{{payslip_list.dynamic_name}}={{ payslip_list.list.previous_page_number }}"
                                    class="oh-pagination__link"
                                    >{% trans "Previous" %}</a
                                    >
                                </li>
                            {% endif %}
                            {% if payslip_list.list.has_next %}
                                <li class="oh-pagination__item oh-pagination__item--wide">
                                    <a
                                    hx-target="#payslips-table"
                                    hx-get="{% url 'filter-payslip' %}?{{pd}}&{{payslip_list.dynamic_name}}={{ payslip_list.list.next_page_number }}"
                                    class="oh-pagination__link"
                                    >{% trans "Next" %}</a
                                    >
                                </li>
                                <li class="oh-pagination__item oh-pagination__item--wide">
                                    <a
                                    hx-target="#payslips-table"
                                    hx-get="{% url 'filter-payslip' %}?{{pd}}&{{payslip_list.dynamic_name}}={{ payslip_list.list.paginator.num_pages }}"
                                    class="oh-pagination__link"
                                    >{% trans "Last" %}</a
                                    >
                                </li>
                            {% endif %}
                      </ul>
                    </nav>
                </div>
			</div>
		</div>
		{% endfor %}
		<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}}"
                    hx-target="#payslips-table"
					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='#payslips-table' hx-get="{% url 'filter-payslip' %}?{{pd}}&page=1" class="oh-pagination__link" >{% trans "First" %}</a>
					</li>
					<li class="oh-pagination__item oh-pagination__item--wide">
						<a hx-target='#payslips-table' hx-get="{% url 'filter-payslip' %}?{{pd}}&page={{ payslips.previous_page_number }}" 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='#payslips-table' hx-get="{% url 'filter-payslip' %}?{{pd}}&page={{ payslips.next_page_number }}" class="oh-pagination__link" >{% trans "Next" %}</a>
					</li>
					<li class="oh-pagination__item oh-pagination__item--wide">
						<a hx-target='#payslips-table' hx-get="{% url 'filter-payslip' %}?{{pd}}&page={{ payslips.paginator.num_pages }}" class="oh-pagination__link" >{% trans "Last" %}</a>
					</li>
					{% endif %}

				</ul>
			</nav>
		</div>
	</div>
</div>
{% else %}
  <!-- start of empty page -->
  <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;" >
    <img
      style="width: 150px; height: 150px"
      src="{% static 'images/ui/no-results.png' %}"
      class="oh-404__image mb-4"
    />
    <h5 class="oh-404__subtitle">
      {% trans "No search result found!" %}
    </h5>
  </div>
  <!-- end of empty page -->
{% endif %}
<script>
    {% comment %} $("[name=pay_status]").change(function (e) {
      let $element = $(this);
      updatePayStatus($element);
    }); {% endcomment %}
    $(".oh-table__editable-input--batch").focusout(function (e) {
      e.preventDefault();
      var grouper = $(this)
      var previousName = grouper.attr("data-previous-name");
      var newName = grouper.val();
      if (newName && newName != previousName) {
        $.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">
                Batch not updated.
              </div>
            </div>`
            )
          ))
          }
      });
      }
    });
    $("[name=update_selected]").change(function (e) {
      updateBulkStatus($(this));
      e.preventDefault();
    });

    $("#Allpayslip").click(function (e) {
      var is_checked = $(this).is(":checked");
      if (is_checked) {
        $(".all-payslip-row").prop("checked", true).closest(".oh-sticky-table__tr")
        .addClass("highlight-selected");
      } else {
        $(".all-payslip-row").prop("checked", false).closest(".oh-sticky-table__tr")
        .removeClass("highlight-selected");;
      }
      addingPayslipIds();
    });

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

    $(document).ready(function () {
      tickPayslipCheckboxes();
    });

    $(document).ready(function () {
      $("#selectAllPayslip").click(function () {
        selectAllPayslip();
      });

      $("#unselectAllPayslip").click(function () {
        unselectAllPayslip();
      });
    });
    // toggle columns //
    toggleColumns("payslip-column-table","payslipCells")
    localStoragepayslipCells = localStorage.getItem("payslip_column_tab")
    if (!localStoragepayslipCells) {
      $("#payslipCells").find("[type=checkbox]").prop("checked",true)
    }
    $("[type=checkbox]").change()
  </script>
  <script src="{% static 'payroll/action.js' %}"></script>
