{% load i18n %}
<div id="ack-message-{{employee.id}}">
</div>
<form onsubmit="$(this).closest('.oh-modal--show').removeClass('oh-modal--show')"
   hx-post='{% url "send-mail-to-employee" %} ' class="oh-general__tab-target oh-profile-section"
  id='ack-form-{{employee.id}}' hx-target="#ack-message-{{employee.id}}" hx-encoding="multipart/form-data">
  <input type="hidden" value="{{employee.id}}" name="id">
  <div class="modal-body">
    {% if employee %}
    <div class="oh-timeoff-modal__profile-content">
      <div class="oh-profile mb-2">
        <div class="oh-profile__avatar">
          <img src="{{employee.get_avatar}}"
            class="oh-profile__image me-2">
        </div>
        <div class="oh-timeoff-modal__profile-info">
          <span class="oh-timeoff-modal__user fw-bold">{{employee.get_full_name}}</span>
          <span class="oh-timeoff-modal__user m-0" style="font-size: 18px; color: #4d4a4a">
            {{employee.get_job_position}} /
            {{employee.get_department}}</span>
        </div>
      </div>
    </div>
    {% endif %}
    <div class="form-group mt-2">
      <label for="employees">
        <h6>{% trans "Also send to" %}</h6>
      </label>
      <select class="oh-select oh-select-2" {% if not employee %} required {% endif %} name="employees" id="employees" multiple>
        {% for employee in employees %}
          <option value="{{employee.id}}">{{employee}}</option>
        {% endfor %}
      </select>
    </div>
    <div class="form-group mt-2">
      <label for="subject">
        <h6>{% trans "Subject" %}</h6>
      </label>
      <input required type="text" placeholder="Important Reminder" name='subject' class="oh-input w-100" id="subject"
        placeholder="Subject">
    </div>
    <div class="form-group mt-2">
      <label for="template">
        <h6>{% trans "Template" %}</h6>
      </label>
      <select name="template" class="w-100 oh-select" id="template">
        <option value="">----</option>
        {% for template in templates %}
        <option value="{{template.id}}">{{template.title}}</option>
        {% endfor %}
      </select>
    </div>
    <div class="form-group mt-2">
      <label for="body">
        <h6>{% trans "Message Body" %}</h6>
      </label>
      <textarea hidden data-summernote name="body" required class="oh-input w-100" id="body" cols="30"
        rows="2"></textarea>
    </div>
    <div class="form-group mt-2">
      <label for="template_attachments">
        <h6>{% trans "Template as Attachment" %}</h6>
      </label>
      <select name="template_attachments" class="w-100 oh-select" id="template_attachments" multiple>
        {% for template in templates %}
        <option value="{{template.id}}">{{template.title}}</option>
        {% endfor %}
      </select>
    </div>
    <div class="form-group mt-2">
      <label for="other_attachments">
        <h6>{% trans "Other Attachments" %}</h6>
      </label>
      <input type="file" name="other_attachments" id="other_attachments" multiple style="display: block;">
    </div>
    <div class="modal-footer d-flex flex-row-reverse mt-3">
      <input type="submit" class="oh-btn oh-btn--secondary submit-send" data-message-id="ack-message-{{employee.id}}"
        name="submit" id="submit" onclick="sendMail()" value="{% trans 'Send Mail' %}">
    </div>
</form>



<script>
  button = document.querySelector('.submit-send')
  button.onclick = function (event) {
    var element = event.target;
    var valid = true

    if (!$('#employees').val().length && "{{employee|default:'false'|safe}}"=="false") {
      valid=false
      $(`#messages`).html($(`
      <div class="oh-alert oh-alert--animated oh-alert--danger" role="alert">
        This field is required
        </div>
        `));
    }
    else if (!$("#subject").val().length) {
      valid=false
      $(`#messages`).html($(`
      <div class="oh-alert oh-alert--animated oh-alert--danger" role="alert">
        The message subject is required
        </div>
        `));
    }
    else if (!$("#body").val().length) {
      valid=false
      $(`#messages`).html($(`
      <div class="oh-alert oh-alert--animated oh-alert--danger" role="alert">
        The message body is required
        </div>
        `));
    }
    if (valid) {
      Swal.fire({
        title: "Processing",
        text: "Mail will sent on the background",
        icon: "info"
      });
    }
  };

  $(document).ready(function () {
    $("#template").change(function (e) {
      var id = $(this).val();
      if (id.length) {
        $.ajax({
          type: "get",
          url: `/employee/get-template/${id}/`,
          data: { "instance_id": "{{employee.id}}" },
          dataType: "Json",
          success: function (response) {
            $('#ack-form-{{employee.id}} [name="body"]').html(response.body).change()
            $('#ack-form-{{employee.id}} [class="note-editable"]').html(response.body)
          }
        });
      }
    });
    var selectedIds = JSON.parse($("#selectedInstances").attr("data-ids"));
    $("#employees[name=employees]select[multiple]").val(selectedIds).change()

  });
</script>
