{% extends "memberapp_users/layout_blank.html" %} 
{% block head %}{% endblock %} 
{% block title %}Mail Template{% endblock %} 
{% block content%}
<h3 class="text-center">Mail Template Index</h3>
<div class="mobile-responsive">
  <table class="table table-bordered bg-white">
    <thead class="thead-dark text-white font-weight-bold text-center">
        <tr>
            <th scope="col">Sno</th>
            <th scope="col">Mail Template id</th>
            <th scope="col">Template Name</th>
            <th scope="col">Is active</th>
            <th scope="col">Last Modified at</th>
            <th scope="col"></th>
        </tr>
    </thead>
    <tbody>
      {% for template in templateData %}
        <tr>
          <td>{{loop.index}}</td>
          <td>{{template.mail_template_id}}</td>
          <td>{{template.template_name}}</td>
          <td>{{template.is_active}}</td>
          <td>{{template.updated_at or ''}}</td>
          <td>
            <!-- <button class="float-right"  onclick="preview('{{template.mail_template_id}}')"><i class="fa fa-edit"></i></button> -->
            <a href="{{url_for('backoffice.MailTemplate',template_name=template.template_name,society_id=society_id,society_key=society_key)}}"><i class="fa fa-edit"></i></a>
            <a href="{{url_for('backoffice.getPreviewMail',template_name=template.template_name,society_id=society_id,society_key=society_key)}}"><i class="fa fa-eye ml-2"></i></a>
          </td>               
        </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

{% endblock %}
{% block script %} 
<script type="text/javascript">
    var BaseUrl = document.location.origin
    var society_id = "{{society_id}}";
    var society_key = "{{society_key}}";
$(document).ready(function(){

  $("#preview_btn").click(function()
  {
      var mail_content = $("#mail_content").val();
      var mail_data    = $("#mail_data").val();
      var subject      = $("#subject").val();
      var sub_data     = $("#sub_data").val();
      var sub_type     = $("input[name='s_merge_jinja']:checked").val();
      var is_type      = $("input[name='m_merge_jinja']:checked").val();
      var is_layout    = $("input[name='yn_layout']:checked").val();

      if(mail_content.length == 0){
        $("#mail_content_error").text("Please enter mail content");
        return false;
      }
      else if(!$("input[name='m_merge_jinja']").is(":checked")){
        $("#m_radio-error").text("Please select mail type");
        return false;
      }
      else if(!$("input[name='yn_layout']").is(":checked")){
        $("#yn_layout-error").text("Please select if you want layout or not ");
        return false;
      }
      else if (subject.length == 0) {
        $("#subject_error").text("Please enter subject");
        return false;
      }
      else if (!$("input[name='s_merge_jinja']").is(":checked")) {
        $("#s_radio-error").text("Please select subject type");
        return false;
      }
      else
      {
        $.ajax({
           type: 'POST',
           url: BaseUrl+"/bo/preview_mail/"+society_id+"/"+society_key,
           data:{ 
                  'subject'     : subject,
                  'mail_content': mail_content,
                  'is_layout'   : is_layout
                }, 
           dataType: 'json',
           success: function(data){
            var mail_content=data.data;
            var sub_data    = data.sub_data
            $("#show_subject").html(sub_data);
            $("#show_mail").html(mail_content);

           },
           error: function(XMLHttpRequest, textStatus, errorThrown) {}                      
        });
      } 
        return false;
  });

});

</script>
{% endblock %}