{% extends "index.html" %}
{% load i18n %}{% load static %}


{% block content %}
<style>
    .rejected--dot{
        background-color:red;
      }
      .approved--dot{
        background-color:yellowgreen;
      }
      .requested--dot{
        background-color: rgba(128, 128, 128, 0.482);
      }
      .status-requested{
        border-left: 3.4px solid rgba(128, 128, 128, 0.482) !important;
        border-radius: 4px 0 0 4px;
      }
      .status-rejected{
        border-left: 3.4px solid red !important;
        border-radius: 4px 0 0 4px;
      }
      .status-approved{
        border-left: 3.4px solid yellowgreen !important;
        border-radius: 4px 0 0 4px;
      }
    </style>

<meta name="csrf-token" content="{{ csrf_token }}">


<div hx-get="{% url "reimbursement-nav" %}" hx-trigger="load">
</div>
{% comment %} my_app/templates/my_app/generic/index.html {% endcomment %}



{% include "generic/components.html" %}


<div
    class="oh-checkpoint-badge mb-2"
    id="selectedInstances"
    data-ids="[]"
    data-clicked=""
    style="display: none"
  ></div>
 {% comment %} status=requested {% endcomment %}

  <div
  class="oh-wrapper"
  id="listContainer">
  <div class="animated-background">
  </div>
</div>

<div class="oh-activity-sidebar" id="activitySidebar" style="z-index:1000;">

    <div class="oh-activity-sidebar__body" id="commentContainer">
    </div>

  </div>


  <script>
    function reimbursementConfirm(params, target, approve = false) {
        Swal.fire({
            text: params,
            icon: "question",
            showCancelButton: true,
            confirmButtonColor: "#008000",
            cancelButtonColor: "#d33",
            confirmButtonText: "Confirm",
            cancelButtonText: "Close",
        }).then((result) => {
            if (result.isConfirmed) {
                if (approve) {
                    $(`${target} [name=amount]`).attr("required", true);
                }
                $(target + "Button").click();
                if (event.target.tagName.toLowerCase() === "form") {
                    event.target.submit();
                } else if (event.target.tagName.toLowerCase() === "a") {
                    window.location.href = event.target.href;
                }
            } else {
            }
        });
    }
    function inputAmount(elem) {
        let amount=elem.val()
        $(elem).parents().closest("tr").find('[name=amount]').val(amount);
      }


     function enlargeImage(src,$element) {
        $(".enlargeImageContainer").empty()
        var enlargeImageContainer = $element.parents().closest("li").find(".enlargeImageContainer")
        enlargeImageContainer.empty()
        style = 'width:100%; height:90%; box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2); background:white'
        var enlargedImage = $('<iframe>').attr({ src: src, style: style })
        var name = $('<span>').text(src.split('/').pop().replace(/_/g, ' '))
        enlargeImageContainer.append(enlargedImage)
        enlargeImageContainer.append(name)
        setTimeout(function () {
            enlargeImageContainer.show()

            const iframe = document.querySelector('iframe').contentWindow
            var iframe_document = iframe.document
            iframe_image = iframe_document.getElementsByTagName('img')[0]
            $(iframe_image).attr('style', 'width:100%; height:100%;')
        }, 100)
    }

 function hideEnlargeImage() {
        var enlargeImageContainer = $('.enlargeImageContainer')
        enlargeImageContainer.empty()
    }

    $(document).on('click', function (event) {
        if (!$(event.target).closest('#enlargeImageContainer').length) {
            hideEnlargeImage()
        }
    })
    function submitForm(elem) {
        $(elem).siblings(".add_more_submit").click();
    }

   function enlargeattachment(src,$element) {
      $("#enlargeattachmentContainer").empty()
      var enlargeattachmentContainer = $("#enlargeattachmentContainer")
      enlargeattachmentContainer.empty()
      style = 'width:100%; height:90%; box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2); background:white'
      var enlargedImage = $('<iframe>').attr({ src: src, style: style })
      var name = $('<span>').text(src.split('/').pop().replace(/_/g, ' '))
      enlargeattachmentContainer.append(enlargedImage)
      enlargeattachmentContainer.append(name)
      setTimeout(function () {
          enlargeattachmentContainer.show()

          const iframe = document.querySelector('iframe').contentWindow
          var iframe_document = iframe.document
          iframe_image = iframe_document.getElementsByTagName('img')[0]
          $(iframe_image).attr('style', 'width:100%; height:100%;')
      }, 100)
  }

  function hideEnlargeattachment() {
      var enlargeattachmentContainer = $('#enlargeattachmentContainer')
      enlargeattachmentContainer.empty()
  }
  $(document).on('click', function (event) {
    if (!$(event.target).closest('#enlargeattachmentContainer').length) {
      hideEnlargeattachment()
    }
  })
</script>


{% endblock %}