{% extends "index.html" %}
{% load horillafilters %}
{% load static %}
{% load i18n %}
{% block content %}
<meta name="csrf-token" content="{{ csrf_token }}">
<style>
    .cancelled--dot{
        background-color:grey;
      }
      .approved--dot{
        background-color:green;
      }
      .rejected--dot{
        background-color:red;
      }
      .requested--dot{
        background-color:orange;
      }

      .rejected-rejected{
        border-left: 4px solid red !important;
        border-radius: 5px 0 0 4px;

      }
     .cancelled-cancelled {
        border-left: 4px solid grey !important;
        border-radius: 5px 0 0 4px;

      }
      .requested-requested{
        border-left: 4px solid orange !important;
        border-radius: 5px 0 0 4px;

      }
     .approved-approved {
        border-left: 4px solid yellowgreen !important;
        border-radius: 5px 0 0 4px;

      }
      .delete{
        color = hsl(1, 100%, 61%) !important;
      }
        .diff-cell {
            background: rgba(255, 166, 0, 0.158);
        }
        .tooltip {
            position: relative;
            display: inline-block; /* Ensures that the tooltip container doesn't stretch to the full width */
        }

        .tooltip .tooltiptext {
            visibility: hidden;
            width: auto; /* Allow the tooltip width to adjust based on content */
            max-width: auto; /* Limit the maximum width of the tooltip to prevent it from overflowing */
            background-color: hsl(8,77%,56%);
            color: white;
            text-align: center;
            border-radius: 6px;
            padding: 5px;
            position: absolute;
            z-index: 1;
            bottom: 5%;
            left: 50%;
            transform: translateX(5%);
            opacity: 0;
            transition: opacity 0.3s;
            white-space: nowrap; /* Prevents the text from wrapping */
            overflow: hidden; /* Hides any overflowed content */
            font-size:15px;
        }

        .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }
    </style>

<div hx-get="{% url "leave-requests-nav" %}?{{request.GET.urlencode}}" hx-trigger="load">
</div>

{% include "generic/components.html" %}
<div class="oh-checkpoint-badge mb-2" id="selectedInstances" data-ids="[]" data-clicked="" style="display: none">
</div>


<div class="oh-wrapper" hx-get="{% url "request-filter" %}?{{request.GET.urlencode}}" hx-trigger="load"
  id="listContainer">
  <div class="animated-background">
</div>
</div>


<div class="oh-activity-sidebar" id="leaveactivitySidebar" style="z-index:1000;">
    <div class="oh-activity-sidebar__body" id="commentContainer">
    </div>
  </div>


  <div class="oh-modal" id="clashViewModal" role="dialog" aria-hidden="true" style="z-index:99;">
    <div class="oh-modal__dialog" style="max-width: 900px;">
      <div class="oh-modal__dialog-header">
        <h3 class="oh-main__titlebar-title fw-bold ">{% trans "Clashed Leave Requests" %}</h3>
        <button class="oh-modal__close" aria-label="Close">
          <ion-icon name="close-outline"></ion-icon>
        </button>
      </div>
      <div class="oh-modal__dialog-body" id="clashViewModalBody" style="overflow-x:auto;"></div>
    </div>
  </div>



  <div
  class="oh-modal"
  id="clashModal"
  role="dialog"
  aria-labelledby="clashModal"
  aria-hidden="true" style="z-index:99;"
>
<div class="oh-modal__dialog" style="max-width: 900px;">
<div class="oh-modal__dialog-header" onclick="event.stopPropagation();">
    <h3 class="oh-main__titlebar-title fw-bold ">{% trans "Clashed Leave Requests" %}</h3>
    <button type="button" class="oh-modal__close--custom" onclick="$(this).closest('.oh-modal--show').removeClass('oh-modal--show')" aria-label="Close">
      <ion-icon name="close-outline" role="img" class="md hydrated" aria-label="close outline"></ion-icon>
  </button>
</div>
  <div class="oh-modal__dialog-body" id="clashModalBody" style="overflow-x:auto;"></div>
</div>
</div>


  <div class="oh-modal" id="penaltyViewModal" role="dialog" aria-hidden="true">
    <div class="oh-modal__dialog" style="max-width: 900px">
      <div class="oh-modal__dialog-header">
        <button type="button" class="oh-modal__close" aria-label="Close"><ion-icon name="close-outline"></ion-icon></button>
      </div>
      <div class="oh-modal__dialog-body" id="penaltyViewModalBody" style="overflow-x:auto;"></div>
    </div>
  </div>
  <div class="oh-modal" id="penaltyModal" role="dialog" aria-hidden="true">
    <div class="oh-modal__dialog" style="max-width: 596px" id="penaltyModalBody"></div>
  </div>


<div class="oh-modal" id="rejectModal" role="dialog" aria-labelledby="rejectModal" aria-hidden="true">
  <div class="oh-modal__dialog">
    <div class="oh-modal__dialog-header">
      <h2 class="oh-modal__dialog-title" id="editModal1ModalLabel">
        {% trans "Rejection" %}
      <button class="oh-modal_close--custom"
        onclick="$('#rejectModal').removeClass('oh-modal--show');"
        aria-label="Close" style="margin-left:80%; border:none; background:none;">
        <ion-icon name="close-outline"></ion-icon>
      </button>
    </h2>
    </div>
    <div class="oh-modal__dialog-body" id="rejectForm"></div>
  </div>
</div>

<div class="oh-wrapper" id="leaveRequest">
</div>

<span id="bulkApproveSpan" hx-post="{% url 'leave-requests-bulk-approve' %}" hx-target="#leaveRequest"></span>


<script src="{% static 'cbv/leave_requests/leave_requests.js' %}"></script>
<script>
  $('#penaltyModalBody').submit(function(e) {
              $(".reload-record").click()
              });
            </script>

  <script>
              $("#LeaveForm [type=submit]").hide();
              var button = `
              <div class="oh-modal__dialog-footer p-0 mt-3">
                <button id="buttonID" class="oh-btn oh-btn--secondary oh-btn--shadow">
                  Save
                </button>
              </div>
              `;
              $("#LeaveForm .row").after(button);

{% if "recruitment"|app_installed %}
  $(document).ready(function () {
                  $("#buttonID").on("click", function () {
                      event.preventDefault();
                      event.stopPropagation();
                      var startDate = $("#LeaveForm [name = start_date]").val();
                      var endDate = $("#LeaveForm [name = end_date]").val();
                      var employee = $("#LeaveForm [name = employee_id]").val();

                      $.ajax({
                          type: "GET",
                          url: "{% url 'check-interview-conflicts' %}",
                          data: {
                              start_date: startDate,
                              end_date: endDate,
                              employee_id: employee,
                          },
                          success: function (response) {
                              var interviews = response.interviews;

                              title = "Leave Request Alert.";
                              var content = `<div>
                      <p>${employee} has interview in the requested date.</p>
                      <ol style="margin-left:5%">`;
                              interviews.forEach(function (interview, index) {
                                  content += `<li style="text-align:left; font-size:14px">${interview}</li>`;
                              });
                              content += `</ol>
                      <p style="font-weight:700">Are you sure you want to proceed with the request?</p>
                    </div>`;

                              if (interviews.length != 0) {
                                  Swal.fire({
                                      title: title,
                                      icon: "info",
                                      html: content,
                                      showCancelButton: true,
                                      confirmButtonColor: "#008000",
                                      cancelButtonColor: "#d33",
                                      confirmButtonText: "Confirm",
                                  }).then(function (result) {
                                      if (result.isConfirmed) {
                                          $("#LeaveForm [type=submit]").click();
                                      }
                                  });
                              } else {
                                  $("#LeaveForm [type=submit]").click();
                              }
                          },
                      });
                  });
              });

              {% endif %}

              function leaveRequestConfirm(message,event) {
                // Define the select box options
                  event.preventDefault()
                  var question = '<p> Would you like to proceed?</p>'
                  html = '<p>' + message + '</p>'
                  html = html + "<div align='center'>" +question + "</div>"
                  Swal.fire({
                    html: html,
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonColor: '#008000',
                    cancelButtonColor: '#d33',
                    confirmButtonText: "Confirm",
                    cancelButtonText: "Close"
                  }).then((result) => {
                    if (result.isConfirmed) {
                      if (event.target.tagName.toLowerCase() === "form") {
                        event.target.submit();
                      } else if (event.target.tagName.toLowerCase() === "a") {
                        window.location.href = event.target.href;
                      }
                      else{
                        console.log(target)
                        console.log(event.target.href)
                      }
                    } else {
                    }
                  });

              }


    function employeeleaveChange(selectElement) {
                var employeeId = $('#id_employee_id').val()
                let parentForm = selectElement.parents().closest("form")
                var leavetypeId = parentForm.find('[name = leave_type_id]').val()
                var start_date = parentForm.find('[name = start_date_id]').val()
                $.ajax({
                  type: "post",
                  url: "/leave/employee-leave-details",
                  data: {
                  csrfmiddlewaretoken: getCookie("csrftoken"),
                  "leave_type":leavetypeId,
                  "employee_id":employeeId,
                  "date":start_date,
                  },
                  success: function (response) {

                    // Assuming parentForm is a reference to the form containing the element to update
                    var messageDiv = parentForm.find(".leave-message");

                    // Check if the messageDiv already exists, if not create it
                    if (!messageDiv.length) {
                      messageDiv = $("<div class='leave-message'></div>");
                      parentForm.find(".oh-modal__dialog-body").prepend(messageDiv);
                    }
                    // Checking leave type is selected in the form or not
                    if (response.leave_count != '' && response.employee != ''){
                      messageDiv.show()
                      messageDiv.text("Available Leaves :  " + response.leave_count);
                      messageDiv.css({
                        'background-color': '#dff0d8',
                        'border': '2px solid #3c763d',
                        'border-radius': '18px',
                        'padding': '10px',
                        'font-weight': 'bold',
                        'margin-bottom': '15px',
                        'width': '35%'
                      });
                    }
                    else if ( leavetypeId === ''){
                      messageDiv.hide()
                    }
                    else if (leavetypeId != '' && response.leave_count === '' && response.employee != ''){
                      messageDiv.show()
                      messageDiv.text("Leave type is not assigned for selecetd employee.");
                      messageDiv.css({
                        'background-color': 'rgb(229 79 56 / 17%)',
                        'border': '2px solid hsl(8,77%,56%)',
                        'border-radius': '18px',
                        'padding': '10px',
                        'font-weight': 'bold',
                        'margin-bottom': '15px',
                        'width': 'auto'
                      });
                    }
                    else if (response.leave_count === 0.0){
                      messageDiv.show()
                      messageDiv.text("Available Leaves :  " + response.leave_count);
                      messageDiv.css({
                        'background-color': 'rgb(229 79 56 / 17%)',
                        'border': '2px solid hsl(8,77%,56%)',
                        'border-radius': '18px',
                        'padding': '10px',
                        'font-weight': 'bold',
                        'margin-bottom': '15px',
                        'width': '35%'
                      });
                    }
                    else{
                      messageDiv.hide()
                    }

                  }
                });
              }

              </script>

{% endblock content %}