{% 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 Notification Send</h1>
                        </div>
                        <div class="col-sm-6">
                            <ol class="breadcrumb float-sm-right mr-2">
                                <li class="breadcrumb-item">
                                    <a href="/admin/email-notification-list/">Email Notification</a>
                                </li>
                                <li class="breadcrumb-item active">Email Notification Send</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 Notification Send</h3>
                    </div>
                    <form action="/admin/email-notification-send/" method="post" id="email_notification_send_form" enctype="multipart/form-data">
                        {% csrf_token %}
                        <div class="card-body">
                            <input type="hidden" id="email_subject" name="email_subject">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="user_type">User Type</label>
                                        <div>
                                            <input type="radio" class="userType" id="email" name="user_type" value="0" checked/>
                                            <label for="email">Email</label>
                                            <input type="radio" class="userType" id="user" name="user_type" value="1"/>
                                            <label for="user">User</label>
                                            <input type="radio" class="userType" id="all" name="user_type" value="2"/>
                                            <label for="all">All</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6" id="emailDiv">
                                    <div class="form-group">
                                        <label for="email">Email (Multiple email add with ',' seprated)</label>
                                        <input type="text" id="email" name="email" class="form-control" placeholder="Enter email" multiple/>
                                        <div class="errorMsg"></div>
                                    </div>
                                </div>
                                <div class="col-md-6" id="userDiv">
                                    <div class="form-group">
                                        <label for="user">User</label>
                                        <div class="select2-primary">
                                            <select class="select2" id="user_email" name="user_email[]" multiple="multiple" data-placeholder="Select User" data-dropdown-css-class="select2-primary" style="width:100%">
                                                {% for user in users %}
                                                    <option value="{{user.email}}">{{user.email}}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                        <div class="errorMsg"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="email-template">Email Template</label>
                                        <select class="form-control" id="email_template" name="email_template" >
                                            <option value="">Select Template</option>
                                            {% for template in templates %}
                                                <option value="{{template.id}}">{{template.name}}</option>
                                            {% endfor %}
                                        </select>
                                        <div class="errorMsg"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="email_content">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="email_content" name="email_content"></textarea>
                                        <div class="errorMsg"></div>
                                    </div>
                                </div>
                            </div>        
                        </div>
                        <div class="card-footer">
                            <button type="submit" class="btn btn-primary" id="email_notification_send_btn">Send</button>
                        </div>
                    </form>
                </div>
            </div>
        </section>
    </div>
{% endblock %}

{% block custom_js %}
<script>
    $(function(){
        $("#userDiv").hide();
        $("#email").attr('required', 'required');

        $('.select2').select2();

        $("#email_content").summernote({
            height: 300
        });

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

    $(".userType").change(function(){
        var userType = $(this).val();
        if (userType == 0){
            $("#userDiv").hide();
            $("#emailDiv").show();
            $("#email").attr('required', 'required');
            $("#user_email").removeAttr('required');
            $('#user_email').val('').trigger('change');
        } else if (userType == 1) {
            $("#userDiv").show();
            $("#emailDiv").hide();
            $("#user_email").attr('required', 'required');
            $("#email").removeAttr('required');
            $("#email").val('');
        } else{
            $("#userDiv").hide();
            $("#emailDiv").hide();
            $("#user_email").removeAttr('required');
            $("#email").removeAttr('required');
            $('#user_email').val('').trigger('change');
            $("#email").val('');
        }
    });

    $("#email_template").change(function(){
        var templateId = $(this).val();
        if (templateId != ''){
            $.ajax({
                type: 'POST',
                url: '{% url "get_email_template" %}',
                data: {
                    csrfmiddlewaretoken: '{{ csrf_token }}',
                    templateId:templateId
                },  
                success: function(response) {
                    if(response.status == 'success'){
                        $("#email_content").summernote('code',response.email_content);
                        $("#email_subject").val(response.email_subject);
                    }
                },
            });
        } else {
            $("#email_content").summernote('code','');
        }
    });

    $("#email_notification_send_btn").click(function(){
        var emailContent = $('#email_content').summernote('code');
        $('#email_content').val(emailContent);

        $("#email_notification_send_form").validate({
            ignore: [],
            rules:{
                "email":{
                    normalizer: function(value) {
                        return $.trim(value);
                    },
                },
                "email_template":{
                    required:true,
                },
                "email_content":{
                    required:true,
                    checkContent: true,
                }
            },
            messages:{
                "email":{
                    required:"Please enter email"
                },
                "user_email[]":{
                    required:"Please select user"
                },
                "email_template":{
                    required:"Please select email template"
                },
                "email_content":{
                    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 %}