{% extends "back_office/email_layout.html" %} 
{% block head %}{% endblock %} 
{% block title %}Mail Template{% endblock %} 
{% block content%}
<form id="add_form">
{% for mesg in get_flashed_messages(category_filter=["successMsg"]) %}        
  <div class="alert alert-success text-center alert-dismissible" id="successMessage" >
    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
    <h4><img src="/static/images/right.png" alt="right" height="21" width="21">{{ mesg|safe }}</h4>
  </div>
  {% endfor %}

  {% for mesg in get_flashed_messages(category_filter=["errorMsg"]) %}
  <div class="alert alert-danger text-center alert-dismissible" id="successMessage" >
    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
    <h4><img src="/static/images/wrong_img.png" alt="wrong"height="21" width="21">{{ mesg }}</h4>
  </div>
  {% endfor %}

{% if is_preview == 1 :%}
<div class="row">
  <div class="col-md-12">

    
    <h3 class="text-center text-primary font-weight-bold">{{mailData.template_name or ''}}</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('adminmem.MailTemplateIndex',society_id=society_id,society_key=society_key)}}" class="btn btn-danger">Back</a>
  </div>
</div>
{% else %}

<h3 class="text-center text-primary font-weight-bold">{% if mailData: %}{{mailData.template_name}}{% else %}Add Mail Template{% endif %}</h3><br>

<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 or ''}}"/>
  </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_merge_jinja-error" class="error" for="s_merge_jinja"></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 or ''}}</textarea>
     <label id="subject_error" class="text-danger" for="subject"></label>
  </div>
  <div class="col-md-2 form-group">
     <label>Is Active<span style="color: red;">*</span></label>
  </div>
  <div class="col-md-10 form-group">    
      <input type="checkbox" class="form-input" name="is_active" id="is_active" value="1"  {% if mailData.is_active == 1 %}checked="checked" {% endif %}> <label for="is_active" class="text-dark" >is_active</label> 
  </div>
  <div class="col-md-2 form-group">
     <label>IS Send Backup<span style="color: red;">*</span></label>
  </div>
  <div class="col-md-10 form-group">
       <input type="checkbox" class="form-input" name="is_backup" id="is_backup" value="1" {% if mailData.is_send_backup == 1 %}checked="checked" {% endif %} > <label for="is_active" class="text-dark" >is_backup</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 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_merge_jinja-error" class="error" for="m_merge_jinja"></label>
      </div>
    <div class="col-md-6" style="background-color:lightgreen;">      
      <div class="col-md-3 form-group">
         <label>Mail Content<span style="color: red;">*</span></label>
      </div>
      <div class="col-md-9 form-group">
         <textarea class="form-control" rows="20" id="mail_content" name="mail_content" rows="10">{{mailData.mail_content or ''}}</textarea>
         <label id="mail_content_error" class="text-danger" for="mail_content"></label>
      </div>
    </div>
    <div class="col-md-6" style="background-color:lightgreen;">     
         <label>Mail Data<span style="color: red;">*</span></label>        
         <label id="mail_data_error" class="text-danger" for="mail_data"></label>
        <!-- <div id="show_subject"></div> -->
      
        <div id="show_mail"> {{datas|safe}}</div>
     
    </div>
  

  <div class="col-md-12 mt-3">
    <a href="{{url_for('adminmem.MailTemplateIndex',society_id=society_id,society_key=society_key)}}" class="btn btn-danger">Back</a>
    <button class="btn btn-success float-right ml-2 update_btn" id="update_btn">update</button>
    <!-- <button class="btn btn-primary float-right" id="preview_btn">Preview</button> -->
    
  </div>
  {% endif %}
  
</div>
</form>
{% endblock %}
{% block script %} 
<script type="text/javascript">
    var BaseUrl = document.location.origin
    var society_id = "{{society_id}}";
    var society_key = "{{society_key}}";


$(document).on("change" , "#mail_content",function(e)
{
  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+"/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;    
});
$(document).ready(function(){ 


  $("#update_btn").click(function()
  { 
      validate_update_form();
      var template_name = $("#template_name").val();
      var mail_content  = $("#mail_content").val();      
      var subject       = $("#subject").val();      
      var sub_type      = $("input[name='s_merge_jinja']:checked").val();      
      var mail_type     = $("input[name='m_merge_jinja']:checked").val();      
      var is_active     = $("input[name='is_active']:checked").val();      
      var is_backup     = $("input[name='is_backup']:checked").val();

      
        $.ajax({
           type: 'POST',
           url: BaseUrl+"/post_add_mail_template/"+society_id+"/"+society_key,
           data:{ 
                  'template_name'     : template_name,
                  'mail_content'      : mail_content,
                  'subject'           : subject,
                  'sub_type'          : sub_type,
                  'mail_type'         : mail_type,
                  'is_active'         : is_active,
                  'is_backup'         : is_backup
                }, 
           dataType: 'json',
           success: function(data){
            var message = data.msg;
            alert(message);
            var sub_data    = data.sub_data;
            $("#show_subject").html(sub_data);
            $("#show_mail").html(mail_content);
            

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


  
  $("#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+"/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()
  {
      alert("hai")
      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+"/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;
  });
});
function validate_update_form()
    {
      errorclass : 'error',
      $("#add_form").validate({

        rules : {
          template_name :"required",
          s_merge_jinja :"required",
          subject       :"required",
          m_merge_jinja :"required",
          mail_content  :"required"       
          

        },
        messages : {
          template_name   : "Please enter the template name",
          s_merge_jinja   : "Please select subject type",
          subject         : "Please enter subject",
          m_merge_jinja   : "Please select mail type",
          mail_content    : "Please enter mail content"        
          
        }
      });
     }
</script>
{% endblock %}