{% extends 'admin/layout/admin_app.html' %}

{% block content %}
    {% if messages %}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            {% for message in messages %}
                showToastr("{{ message }}", "{{ message.tags }}");
            {% endfor %}
        });
    </script>
    {% endif %}
    <div class="content-wrapper">
        <div class="content-header">
            <div class="container-fluid">
                <div class="card">
                    <div class="row m-1">
                        <div class="col-sm-6">
                            <h1 class="ml-2">Email Template Add</h1>
                        </div>
                        <div class="col-sm-6">
                            <ol class="breadcrumb float-sm-right mr-2">
                                <li class="breadcrumb-item">
                                    <a href="/admin/email-template-list/">Email Management</a>
                                </li>
                                <li class="breadcrumb-item active">Email Template Add</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <section class="content">
            <div class="container-fluid">
                <div class="card card-primary">
                    <div class="card-header">
                        <h3 class="card-title">Email Template Add</h3>
                    </div>
                    <form action="/admin/email-template-add/" method="post" id="email_template_add_form" enctype="multipart/form-data">
                        {% csrf_token %}
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="name">Name</label>
                                        <input type="text" name="name" class="form-control" placeholder="Enter name" />
                                        <div class="errorMsg"></div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="emailSubject">Email Subject</label>
                                        <input type="text" name="emailSubject" class="form-control" placeholder="Enter email subject" />
                                        <div class="errorMsg"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="emailContent">Email Content</label>
                                        {% verbatim %}
                                            <p style="background-color:silver">Email template define variable :{{ first_name }}, {{ reset_link }}, {{ user_name }}, {{ email }}, {{ password }}, {{ invite_code }} </p>
                                        {% endverbatim %}
                                        <textarea id="emailContent" name="emailContent"></textarea>
                                        <div class="errorMsg"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="status">Status</label>
                                        <select class="form-control" name="status">
                                            <option value="1">Active</option>
                                            <option value="0">Inactive</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            
                        </div>
                        <div class="card-footer">
                            <button type="submit" class="btn btn-primary" id="email_template_add_btn">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </section>
    </div>
{% endblock %}

{% block custom_js %}
<script>
    $(function(){
        $("#emailContent").summernote({
            height: 300
        });

        $.validator.addMethod("checkContent", function() {
            var content = $('#emailContent').summernote('code');
            var textContent = $('<div>').html(content).text().trim();
            if (!textContent && /(<p><br><\/p>)|(&nbsp;\s*){2,}/.test(content)) {
                return false;
            } else {
                return true;
            }
        });
    })
    
    $("#email_template_add_btn").click(function(){
        var emailContent = $('#emailContent').summernote('code');
        $('#emailContent').val(emailContent);

        $("#email_template_add_form").validate({
            ignore: [],
            rules:{
                "name":{
                    required:true,
                    normalizer: function(value) {
                        return $.trim(value);
                    },
                    minlength: 2,
                    maxlength: 50,
                },
                "emailSubject":{
                    required:true,
                    normalizer: function(value) {
                        return $.trim(value);
                    },
                    minlength: 2,
                    maxlength: 100,
                },
                "emailContent": {
                    required: true,
                    checkContent: true,
                },
            },
            messages:{
                "name":{
                    required:"Please enter name",
                    minlength: "Name required minimum 2 characters",
                    maxlength: "Name required maximum 50 characters",
                },
                "emailSubject":{
                    required:"Please enter email subject",
                    minlength: "Email subject required minimum 2 characters",
                    maxlength: "Email subject required maximum 100 characters",
                },
                "emailContent":{
                    required:"Please enter email content",
                    checkContent:"Please enter email content",
                },
            },
            errorPlacement: function(error, element) {
                error.appendTo(element.closest(".form-group").find('.errorMsg'));
                error.addClass(['error-msg', 'error-msg-font-size']);
            },
            submitHandler: function(form) {
                if($(form).valid()){
                    form.submit(); 
                }
            }
        });
    });

</script>
{% endblock %}