{% extends "memberapp_users/layout_blank.html" %} 
{% block head %}{% endblock %} 
{% block title %}Mail Template{% endblock %} 
{% block content%}
{% if is_preview == 1 :%}
<div class="row">
  <div class="col-md-12">
    <h3 class="text-center font-weight-bold" style="text">{{mailData.template_name}}</h3><br>
    <h4 class="font-weight-bold "><span class="text-danger mr-2">Subject:</span>{{mailData.subject}}</h4>
    <p class="border border-dark">{{datas|safe}}</p>
  </div>
  <div class="col-md-12">
    <a href="{{url_for('backoffice.MailTemplateIndex',society_id=society_id,society_key=society_key)}}" class="btn btn-danger">Back</a>
  </div>
</div>
{% else %}

<div class="row">
  <div class="col-md-2 form-group">
    <label for="template_name"> Template Name<span style="color: red;">*</span></label>
  </div>
  <div class="col-md-10 form-group">
    <input type="text" name="template_name" id="template_name" class="form-control" placeholder="Template Name" value="{{mailData.template_name}}"/>
  </div>
  <div class="col-md-2 form-group">
     <label>Subject is<span style="color: red;">*</span></label>
  </div>
  <div class="col-md-10 form-group">
     <input type="radio" class="form-input" name="s_merge_jinja" id="s_merge_tag" value="merge_tag" {% if mailData.subject_type == 'merge_tag' %}checked="checked" {% endif %}> <label for="s_merge_tag" class="text-dark" >Merge Tag</label>
     <input type="radio"  class="form-input ml-2" name="s_merge_jinja" id="s_jinja" value="jinja" {% if mailData.subject_type == 'jinja' %}checked="checked" {% endif %}> <label for="s_jinja" class="text-dark">Jinja Tag</label>
     <br><label id="s_radio-error" class="text-danger"></label>
  </div>
  <div class="col-md-2 form-group">
     <label>Subject<span style="color: red;">*</span></label>
  </div>
  <div class="col-md-10 form-group">
     <textarea name="subject" id="subject" class="form-control" rows="3" > {{mailData.subject}}</textarea>
     <label id="subject_error" class="text-danger" for="subject"></label>
  </div>
  <div class="col-md-2 form-group">
     <label>Subject Data<span style="color: red;">*</span></label>
  </div>
  <div class="col-md-10 form-group">
     <label id="sub_data_error" class="text-danger"></label>
  </div>
  <div class="col-md-2 form-group">
     <label>Mail is<span style="color: red;">*</span></label>
  </div>
  <div class="col-md-10 form-group">
     <input type="radio" class="form-input" name="m_merge_jinja" id="m_merge_tag" value="merge_tag"  {% if mailData.mail_type == 'merge_tag' %}checked="checked" {% endif %} > <label for="m_merge_tag" class="text-dark">Merge Tag</label>
     <input type="radio" class="form-input ml-2" name="m_merge_jinja" id="m_jinja" value="jinja"  {% if mailData.mail_type == 'jinja' %}checked="checked" {% endif %}> <label for="m_jinja" class="text-dark">Jinja Tag</label>
     <br><label id="m_radio-error" class="text-danger"></label>
  </div>
  <div class="col-md-2 form-group">
     <label>Mail Layout<span style="color: red;">*</span></label>
  </div>
  <div class="col-md-10 form-group">
     <input type="radio" class="form-input" name="yn_layout" id="y_layout" value="1" checked> <label for="y_layout" class="text-dark">Yes</label>
     <input type="radio" class="form-input ml-2" name="yn_layout" id="n_layout" value="0" > <label for="n_layout" class="text-dark">No</label>
     <br><label id="yn_layout-error" class="text-danger"></label>
  </div>
  <div class="col-md-2 form-group">
     <label>Mail Content<span style="color: red;">*</span></label>
  </div>
  <div class="col-md-10 form-group">
     <textarea class="form-control" id="mail_content" name="mail_content" rows="10">{{mailData.mail_content}}</textarea>
     <label id="mail_content_error" class="text-danger" for="mail_content"></label>
  </div>
  <div class="col-md-2 form-group">
     <label>Mail Data<span style="color: red;">*</span></label>
  </div>
  <div class="col-md-10 form-group">
    
     <label id="mail_data_error" class="text-danger" for="mail_data"></label>
  </div>
  <br>
  <div class="col-md-12 text-center">
    <div id="show_subject"></div>
  </div>
  <br>
  <div class="col-md-12">
    <div id="show_mail"></div>
  </div>

  <div class="col-md-12">
    <a href="{{url_for('backoffice.MailTemplateIndex',society_id=society_id,society_key=society_key)}}" class="btn btn-danger">Back</a>
    <button class="btn btn-primary float-right" id="preview_btn">Preview</button>
  </div>
  {% endif %}
  
</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;
  });
   $("#preview_btn_1").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,
                  'sub_data'    : sub_data,
                  'sub_type'    : sub_type,
                  'mail_content': mail_content,
                  'mail_data'   : mail_data,
                  'is_type'     : is_type,
                  '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 %}