{% extends "conferenceapp/layout.html" %} {% block title %} Mail Template {% endblock %} {% block style %}
<style>
    .form .error{
        color: red;
    }
</style>
 {% endblock %} {% block content %}
    <div class="container-xl">
<form id="add_new_mail_template_form">
        <div class="col-md-12">
            <p align="right">
                <a class="btn btn-danger mt-3" type="button" id="back" href="{{ url_for('addons.SelectConference') }}" title="Back">Back</a>
            </p>
        </div>
        <div class="alert alert-success text-center successMessage alert-dismissible" id="successMessage" style="display: none;">
            <p class="close" data-dismiss="alert" aria-label="close">&times;</p>
            <span id="successMsg"></span>
        </div>
        <div class="alert alert-danger text-center errorMessage alert-dismissible" id="errorMessage" style="display: none;">
            <p class="close" data-dismiss="alert" aria-label="close">&times;</p>
            <span id="errorMsg"></span>
        </div>


        <h2 class="fa-title text-center mt-2">Mail Template Form</h2>
        <input type="hidden" name="mail_template_id" id="mail_template_id"  />
        <input type="hidden" name="html_data" id="html_data" value="{{html_data}}" />
        <input type="hidden" name="conf_id" id="conf_id" value="{{conf_id}}" />
        <input type="hidden" name="conf_key" id="conf_key" value="{{conf_key}}" />
        <input type="hidden" name="app_type_id" id="app_type_id" value="2" />
        <input type="hidden" name="is_update" id="is_update" />


        <div class="card">
            <div class="card-body">
                <div class="row">
                    <input class="form-control" type="text" id="conf_ids" name="conf_ids" value="{{conf_id}}" placeholder="Enter Conf id" readonly hidden />
                    <div class="col-md-6">
                        <div class="row">
                            <div class="col-md-4">
                                <label>Display Name<span style="color: red;">*</span></label>
                            </div>
                            <div class="col-md-8">
                                <input class="form-control" type="text" id="display_name" name="display_name" placeholder="Enter Display Name" />
                                <label id="display_name-error" name='display_name_err' class="error" for="display_name"></label> 
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="row">
                            <div class="col-md-4">
                                <label>Template Name<span style="color: red;">*</span></label>
                            </div>
                            <div class="col-md-8">
                                <input class="form-control" type="text" id="template_name" name="template_name" placeholder="Enter Template Name" />
                                <label id="template_name-error" name='template_name_err' class="error" for="template_name"></label> 
                            </div>
                        </div>
                    </div>
                </div>
                 <div class="row">
                    <div class="col-md-6">
                        <div class="row">
                            <div class="col-md-4">
                                <label>Is Active</label>
                            </div>
                            <div class="col-md-8">

                                <input type="radio" class="form-input is_active" name="is_active" id="is_active_yes" value="1" /> <label for="is_active_yes" class="text-dark">Yes</label>&nbsp;&nbsp;&nbsp;&nbsp;

                                <input type="radio" class="form-input is_active" name="is_active" id="is_active_no" value="0" /> <label for="is_active_no" class="text-dark">No</label>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="row">
                            <div class="col-md-4">
                                <label>Is Send Backup</label>
                            </div>
                            <div class="col-md-8">
                                <input type="radio" class="form-input is_send_backup" name="is_send_backup" id="is_send_backup_yes" value="1" /> <label for="is_send_backup_yes" class="text-dark">Yes</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                                <input type="radio" class="form-input is_send_backup" name="is_send_backup" id="is_send_backup_no" value="0" /> <label for="is_send_backup_no" class="text-dark">No</label>
                            </div>
                        </div>
                    </div>
                </div><br>
                <div class="row">
                    <div class="col-md-6">
                        <div class="row"> 
                            <div class="col-md-4">
                                <label>Mail Type<span style="color: red;">*</span></label>
                            </div>
                            <div class="col-md-8">
                                <select class="form-control" id="mail_type" name="mail_type">
                                    <option value="" selected disabled> --SELECT--</option>
                                    <option value="merge_tag"> merge_tag</option>
                                    <option value="jinga"> jinga</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="row">
                            <div class="col-md-4">
                                <label>Subject Type </label>
                            </div>
                            <div class="col-md-8">
                                <select class="form-control" id="subject_type" name="subject_type">
                                    <option value="" selected disabled> --SELECT--</option>
                                    <option value="merge_tag"> merge_tag</option>
                                    <option value="jinga"> jinga</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <br>
                <div class="row"> 
                    <div class="col-md-2">
                        <label>Subject<span style="color: red;">*</span></label>
                    </div>
                    <div class="col-md-10">
                        <input class="form-control" type="text" id="subject" name="subject" placeholder="Enter Subject" />
                    </div>
                </div><br>
                <div class="row">
                    <div class="col-md-12">
                        <div class="row">
                            <div class="col-md-2">
                                <label>Mail Content<span style="color: red;">*</span></label>
                            </div>
                            <div class="col-md-10">
                                <textarea name="mail_content" id="mail_content" rows="15" cols="68"   class="form-control" placeholder="Enter  Mail Content"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <br />
                
                <br />
                <div class="row mb-3 ">
                    <div class="col-lg-12 text-center">
                        <button type="button" name="save_btn" id="save_btn" class="btn btn-success">Save</button>
                        <button type="button" name="update_btn" id="update_btn" class="btn btn-success">Update</button>
                        <button type="button" name="clear_btn" id="clear_btn" class="btn btn-danger">Clear</button>
                    </div>
                </div>
            </div>
        </div>
<br>
    <div id="Mail_template_Table" class="mobile-responsive">
        <table class="table table-bordered">
            <thead style="background-color: #072645;border-color: #dee2e6;color: #FFF;">
                <tr>
                    <th scope="col" width="5%">S No</th>
                    <th scope="col" width="5%">Mail Template Id</th>
                    <th scope="col" width="5%">App Type id</th>
                    <!-- <th scope="col" width="10%" >Conf ids</th> -->
                    <th scope="col" width="10%" >Display Name</th>
                    <th scope="col" width="20%">Template Name</th>
                    <th scope="col" width="5%">Is Active</th>
                    <!-- <th scope="col" width="5%">Is Send Backup</th> -->
                    <th scope="col" width="20%"></th>
                </tr>
            </thead>
            <tbody id="mail_template_table_content"></tbody>
        </table>
    </div>
    
</form>
</div>
          
{% endblock %}
{% block bottomscript %}  

<script type="text/javascript">
var BaseUrl = document.location.origin;
$(document).ready(function () {

    var table_data = $("#html_data").val();
    $("#mail_template_table_content").html(table_data);
    $("#update_btn").hide();
});
    // To Clear fields
    $(document).on("click", "#clear_btn", function (e) {
        clearfields();
    });

    // To Save Mail Template
    $(document).on("click", "#save_btn", function (e) {      
        add_update_mail_template();            
    });

    

    // To Edit Mail Template
    $(document).on("click", ".edit_btn", function (e) {
        e.preventDefault();
        if(confirm("Are you sure you want to edit this?"))
        {
            var conf_id      = $("#conf_id").val();
            var conf_key     = $("#conf_key").val();
            var mail_template_id = $(this).val();
            $.ajax({
                type: "GET", // <-- get method of form
                url: BaseUrl +"/"+conf_id +"/"+conf_key+ "/edit_mail_template", // <-- get action of form
                data: { "mail_template_id":mail_template_id },
                success: function (reposnse) {
                    var data_1    = JSON.parse(reposnse);
                    var status    = data_1.status;
                    var msg       = data_1.msg;
                    var edit_data = data_1.edit_data;

                    if (status == 1) {
                        $("#mail_template_id").val(edit_data.mail_template_id);
                        $("#app_type_id").val(edit_data.app_type_id);

                        $("#display_name").val(edit_data.display_name);
                        $("#template_name").val(edit_data.template_name);
                        $("#is_update").val(1);

                        var is_active = edit_data.is_active;
                        if (is_active == "1") {
                                $("input:radio[id=is_active_yes]").prop("checked", true);
                                $("#is_active_yes").val('1');
                            } else {
                                $("input:radio[id=is_active_no]").prop("checked", true);
                                $("#is_active_no").val('0');
                            }
                        var is_send_backup = edit_data.is_send_backup;
                        if (is_send_backup == "1") {
                                $("input:radio[id=is_send_backup_yes]").prop("checked", true);
                                $("#is_send_backup_yes").val('1');
                            } else {
                                $("input:radio[id=is_send_backup_no]").prop("checked", true);
                                $("#is_send_backup_no").val('0');
                            }

                        $("#mail_content").val(edit_data.mail_content);
                        $("#mail_type").val(edit_data.mail_type);
                        $("#subject").val(edit_data.subject);
                        $("#subject_type").val(edit_data.subject_type);
                        $("#conf_ids").val(edit_data.conf_ids);
                        $("#save_btn").hide();
                        $("#update_btn").show();
                        $("html, body").animate({ scrollTop: "0px" }, 300);
                    } else {
                        return false;
                    }
                },
            });
        };
    });

    // To Update Mail Template
    $("#update_btn").click(function (e) {
        e.preventDefault();
        if(confirm("Are you sure you want to update this record?"))
        {
            add_update_mail_template();
        }
        else{
            return false;
        }
    });

    // To Add and Update Mail Template function
    function add_update_mail_template() {
        validate_mail_template_form();
        if (!$("#add_new_mail_template_form").valid()) {
            return false;
        }
        ShowProgress();
        var conf_id      = $("#conf_id").val();
        var conf_key     = $("#conf_key").val();
         $.ajax({
                type: "POST",
                url: BaseUrl +"/"+conf_id +"/"+conf_key+ "/post_mail_template",
                data : $('#add_new_mail_template_form').serialize(),
                dataType:'html',
                success: function (response) {
                    StopProgress();
                    var data_1 = JSON.parse(response);
                    if (data_1.status == 1) {
                        $("#mail_template_table_content").empty();
                        $("#mail_template_table_content").show();
                        $("#mail_template_table_content").html(data_1.html_data);
                        $("#successMessage").show();
                        $("#successMsg").html(data_1.msg);
                        clearfields();
                        
                    } else {
                        $("#errorMessage").show();
                        $("#errorMsg").html(data_1.msg);
                        return false;
                    }
                },
            });
    }

    // To clear fields
    function clearfields(){
        $("#template_name").val('');
        $("#display_name").val('');
        $("#subject").val('');
        $("#subject_type").val('');
        $("#mail_content").val('');
        $("#mail_type").val('');
        $("#is_update").val('');
        $('.is_active').removeAttr('checked');
        $('.is_send_backup').removeAttr('checked');       
    }

    // To Validate Form
    function validate_mail_template_form()
         {
             errorclass : 'error',
         
             $("#add_new_mail_template_form").validate({

                rules: {
                    

                    conf_ids: {
                                        required: true,
                                    },
                    template_name: {
                                        required: true,
                                    },
                    // is_active: {
                    //                     required: true,
                    //                 },
                    // is_send_backup: {
                    //                     required: true,
                    //                 },
                    // mail_type: {
                    //                     required: true,
                    //                 },
                    // subject: {
                    //                     required: true,
                    //                 },
                    // mail_content: {
                    //                     required: true,
                    //                 },
                
                },

            messages: {
                conf_ids: {
                                    required: "Please Enter Conf Id",
                                },
                template_name: {
                                    required: "Please Enter Template name",
                                },
                // is_active: {
                //                     required: "Please Enter Is Active",
                //                 },
                // is_send_backup: {
                //                     required: "Please Enter Is Send Backup",
                //                 },
                // mail_type: {
                //                     required: "Please Enter Mail Type",
                //                 },
                // subject: {
                //                     required: "Please Enter Subject",
                //                 },
                // mail_content: {
                //                     required: "Please Enter Mail Content",
                //                 },
            },


                 highlight: function(element) {
                     $(element).parent().addClass('error')
                 },
             
                 unhighlight: function(element) {
                     $(element).parent().removeClass('error')
                 },
         
                 submitHandler: function(form) {
                     form.submit();
                 }
            })
         };

    //  Ajax Loader
    function ShowProgress()
    {
        var text = 'loading data.. please wait..';

        if(jQuery('body').find('#resultLoading').attr('id') != 'resultLoading'){
         jQuery('body').append('<div id="resultLoading" style="display:none"><div><img src="'+document.location.origin+'/static/images/ajax-loader.gif"><div>'+text+'</div></div><div class="bg"></div></div>');
         // jQuery('body').append('<div id="resultLoading" style="display:none"><div><div>'+text+'</div></div><div class="bg"></div></div>');
         }

        jQuery('#resultLoading').css({
            'width':'100%',
            'height':'100%',
            'position':'fixed',
            'z-index':'10000000',
            'top':'0',
            'left':'0',
            'right':'0',
            'bottom':'0',
            'margin':'auto'
        });

        jQuery('#resultLoading .bg').css({
            'background':'#000000',
            'opacity':'0.7',
            'width':'100%',
            'height':'100%',
            'position':'absolute',
            'top':'0'
        });

        jQuery('#resultLoading>div:first').css({
            'width': '250px',
            'height':'75px',
            'text-align': 'center',
            'position': 'fixed',
            'top':'0',
            'left':'0',
            'right':'0',
            'bottom':'0',
            'margin':'auto',
            'font-size':'16px',
            'z-index':'10',
            'color':'#ffffff'

        });

        jQuery('#resultLoading .bg').height('100%');
           jQuery('#resultLoading').fadeIn(300);
        jQuery('body').css('cursor', 'wait');
    }

    function StopProgress()
    {
        jQuery('#resultLoading .bg').height('100%');
           jQuery('#resultLoading').fadeOut(300);
        jQuery('body').css('cursor', 'default');
    }

</script>
{% endblock %}