{% load i18n %}
<div id="ack-message-{{cand.id}}">
</div>
<div class="oh-modal__dialog-header">
  <span class="oh-modal__dialog-title" id="sendMailModalLabel"><h5>{% trans 'Send Mail' %}</h5></span>
  <button class="oh-modal__close" aria-label="Close"><ion-icon name="close-outline"></ion-icon></button>
</div>
<div class="oh-modal__dialog-body">
<form onsubmit="$(this).closest('.oh-modal--show').removeClass('oh-modal--show')"
  hx-post='{% url "send-acknowledgement" %} '
  hx-swap="none"
  class="oh-general__tab-target oh-profile-section"
  id='ack-form-{{cand.id}}'
  hx-target="#ack-message-{{cand.id}}"
  hx-encoding="multipart/form-data">
  <input type="hidden" value="{{cand.id}}" name="id">
  <div class="modal-body">
    {% if cand %}
    <div class="oh-timeoff-modal__profile-content">
      <div class="oh-profile mb-2">
        <div class="oh-profile__avatar">
          <img src="https://ui-avatars.com/api/?name={{cand.name}}&amp;background=random"
            class="oh-profile__image me-2">
        </div>
        <div class="oh-timeoff-modal__profile-info">
          <span class="oh-timeoff-modal__user fw-bold">{{cand.name}}</span>
          <span class="oh-timeoff-modal__user m-0" style="font-size: 18px; color: #4d4a4a">
            {{cand.job_position_id.job_position}} /
            {{cand.recruitment_id}}</span>
        </div>
      </div>
    </div>
    <div class="form-group mt-2">
      <label for="to">
        <h6>{% trans "To" %}</h6>
      </label>
      <input required type="text" value="{{cand.email}}" name='to' class="oh-input w-100" id="to"
        placeholder="Subject">
    </div>
    {% endif %}
    <div class="form-group mt-2">
      <label for="candidates">
        <h6>{% trans "Also send to" %}</h6>
      </label>
      <select class="oh-select oh-select-2" {% if not cand %} required {% endif %} name="candidates" id="candidates" multiple>
        {% for cand in candidates %}
          <option value="{{cand.id}}">{{cand}}</option>
        {% endfor %}
      </select>
    </div>
    <div class="form-group mt-2">
      <label for="subject">
        <h6>{% trans "Subject" %}</h6>
      </label>
      <input required type="text" placeholder="Congrats..." 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 name="body" {% if not cand %} data-summernote {% endif %} required class="oh-input w-100" id="body" cols="30"
        rows="2"></textarea>
    </div>
    {% if cand %}
      <div class="form-hint" style="margin-top: 10px; font-size: 14px; color: #888;">
        {% trans "Hint: Type '{' to get sender or receiver data" %}
      </div>
    {% endif %}
    <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-{{cand.id}}"
        name="submit" id="submit" onclick="sendMail()" value="{% trans 'Send Mail' %}">
    </div>
</form>
</div>

<script>
{% if stage_id %}
  $(document).ready(function () {
    var idsArray = $("#candidateContainer{{stage_id}}")
    .find(".candidate-checkbox[type=checkbox]:checked")
    .map(function() {
        return this.id;
    }).get();
    $("#candidates").val(idsArray).change()
  });
{% else %}
  var selectedIds = JSON.parse($("#selectedInstances").attr("data-ids"));
  $("#candidates[name=candidates]select[multiple]").val(selectedIds).change()
{% endif %}
</script>

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

    if (!$('#candidates').val().length && "{{cand|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: `/recruitment/get-template/${id}/`,
          data: { "candidate_id": "{{cand.id}}" },
          dataType: "Json",
          success: function (response) {
            $('#ack-form-{{cand.id}} [name="body"]').html(response.body).change()
            $('#ack-form-{{cand.id}} [class="note-editable"]').html(response.body)
          }
        });
      }
    });
  });
</script>
<script>

  {% if form.instance.title %}
  setModalLabel("{{ form.instance.title|escapejs }}", "#viewTemplateModalLabel");
  {% endif %}
  initializeSummernote({{cand.id}},{{ searchWords|safe }});

</script>