{% load i18n %}
<div
  class="oh-modal oh-modal--show"
  role="dialog"
  id="confirmModal"
  aria-labelledby="confirmModalLabel"
  aria-hidden="true"
>
  <div
    class="oh-modal__dialog oh-modal__dialog--confirm"
    style="max-width: 512px; border-radius:25px;"
  >
    <p class="swal2-close"></p>
    <ul class="swal2-progress-steps" style="display: none"></ul>
    <div class="swal2-icon swal2-info swal2-icon-show" style="display: flex">
      <div class="swal2-icon-content">!</div>
    </div>
    <h2 class="swal2-title" id="swal2-title">{{title}}</h2>
    <div
      class="swal2-html-container"
      id="swal2-html-container"
      style="display: block"
    >
      <p style="font-size:18px;">{{employee.employee_id}} {% trans "has interview in the requested date." %}</p>
    </div>

    <div class="ms-5">
      {% for i in interview %}
        <div class="d-flex">
          <span class="d-flex" style="font-size:16px;">{{forloop.counter}}.</span> &nbsp<p style="font-size:16px;">{{i}}</p>
        </div>
      {% endfor %}
    </div>

    <h2 class="swal2-title" style="font-size:22px;" id="swal2-title">{% trans "Are you sure want to proceed with the request ?" %}</h2>
    <div class="swal2-actions" style="display: flex">
      <div class="swal2-loader"></div>
      {% if admin %}
        <button
            class="swal2-deny swal2-styled mb-4"
            data-toggle="oh-modal-toggle"
            data-target="#objectCreateModal"
            hx-get="{% url 'request-creation' %}?confirm=True"
            hx-target="#objectCreateModalTarget"
            style="display: inline-block;background-color:#008000;"
          >
            {% trans "Yes" %}
        </button>
      {% elif update_admin %}
        <button
            class="swal2-deny swal2-styled mb-4"
            data-toggle="oh-modal-toggle"
            data-target="#objectUpdateModal" hx-get="{% url 'request-update' id %}?confirm=True"
            hx-target="#objectUpdateModalTarget"
            style="display: inline-block;background-color:#008000;"
          >
            {% trans "Yes" %}
        </button>
      {% elif update %}
        <button
            class="swal2-deny swal2-styled mb-4"
            data-toggle="oh-modal-toggle"
            data-target="#objectUpdateModal" hx-get="{% url 'user-request-update' id %}?confirm=True"
            hx-target="#objectUpdateModalTarget"
            style="display: inline-block;background-color:#008000;"
          >
            {% trans "Yes" %}
        </button>
      {% elif id %}
        <button
            class="swal2-deny swal2-styled mb-4"
            data-toggle="oh-modal-toggle"
            data-target="#objectCreateModal"
            hx-get="{% url 'user-request' id %}?confirm=True"
            hx-target="#objectCreateModalTarget"
            style="display: inline-block;background-color:#008000;"
          >
            {% trans "Yes" %}
        </button>
      {% else %}
        <button
          class="swal2-deny swal2-styled mb-4"
          data-toggle="oh-modal-toggle"
          data-target="#objectCreateModal"
          hx-get="{% url 'leave-request-create' %}?confirm=True"
          hx-target="#objectCreateModalTarget"
          style="display: inline-block;background-color:#008000;"
        >
          {% trans "Yes" %}
        </button>
      {% endif %}
      <button
        type="button"
        class="swal2-confirm swal2-styled oh-modal__cancel mb-4"
        aria-label=""
        style="display: inline-block;background-color:#d33;"
      >
        {% trans "No" %}
      </button>
    </div>
  </div>
</div>
<script>
  $(document).ready(function (e) {
    $("#replaceEmployeeForm").submit(function (e) {
      var empId = $("#replaceEmployeeForm").attr("data-id");
      $(".manager-select").each(function () {
        var selectElement = $(this);
        var managerId = selectElement.val();
        var errorElementId = selectElement.data("error");
        if (empId === managerId) {
          $("#" + errorElementId).css("display", "inline-flex");
          event.preventDefault();
        } else {
          $("#" + errorElementId).css("display", "none");
        }
      });
    });
  });
</script>
