{extends file="admin-layout.tpl"}

{block name="no-return-functions"}
    {$admin_current_location = 'configuration'}
{/block}

{block name="page-title"}{intl l='Edit a mailing template'}{/block}

{block name="check-resource"}admin.configuration.message{/block}
{block name="check-access"}update{/block}

{block name="main-content"}
    <div class="messages edit-message">
        
        <div id="wrapper" class="container">
            
            {loop name="message_edit" type="message" secured="*" id="$message_id" backend_context="1" lang="$edit_language_id"}
                
                <ul class="breadcrumb">
                    <li><a href="{url path='/admin/home'}">{intl l="Home"}</a></li>
                    <li><a href="{url path='/admin/configuration'}">{intl l="Configuration"}</a></li>
                    <li><a href="{url path='/admin/configuration/messages'}">{intl l="Mailing templates"}</a></li>
                    <li>{intl l='Editing mailing template "%name"' name={$NAME}}</li>
                </ul>
            
            {hook name="message-edit.top" message_id=$message_id}
                
                <div class="row">
                    <div class="col-md-12 general-block-decorator">
                        <div class="row">
                            <div class="col-md-12 ">
                                <div class="title">
                                    {intl l='Edit mailing template "%name"' name={$NAME}}
                                </div>
                                
                                <ul class="nav nav-tabs" id="tabbed-menu">
                                    <li class="active"><a href="#data" data-toggle="tab">{intl l="Message data"}</a></li>
                                    <li><a href="#preview" data-toggle="tab">{intl l="Preview"}</a></li>
                                </ul>
                                
                                <div class="tab-content">
                                    <div class="tab-pane fade in active" id="data">
                                        
                                        <div class="form-container">
                                            <div class="col-md-12">
                                                {form name="thelia.admin.message.modification"}
                                                    <form method="POST" action="{url path='/admin/configuration/messages/save'}" {form_enctype}>
                                                        
                                                        {* Be sure to get the message ID, even if the form could not be validated *}
                                                        <input type="hidden" name="message_id" value="{$message_id}" />
                                                        
                                                        {include file="includes/inner-form-toolbar.html" close_url="{url path='/admin/configuration/messages'}"}
                                                        
                                                        {form_hidden_fields exclude="success_url,locale"}
                                                        
                                                        {render_form_field field='success_url' value="{url path='/admin/configuration/messages'}"}
                                                        {render_form_field field='locale' value="{$edit_language_locale}"}
                                                        
                                                        {if $form_error}<div class="alert alert-danger">{$form_error_message}</div>{/if}
                                                        
                                                        {render_form_field field='name'}
                                                        {render_form_field field='secured'}
                                                        {render_form_field field='title'}
                                                        {render_form_field field='subject'}
                                                        
                                                        
                                                        <div class="panel panel-default">
                                                            <div class="panel-heading"><h3 class="panel-title">{intl l="HTML version of this message"}</h3></div>
                                                            
                                                            <div class="panel-body">
                                                                <div class="row">
                                                                    <div class="col-md-6">
                                                                        {custom_render_form_field field='html_layout_file_name'}
                                                                            <select {form_field_attributes field='html_layout_file_name'}>
                                                                                <option value="">{intl l='Use default layout'}</option>
                                                                                {foreach $layout_list as $layout}
                                                                                    <option value="{$layout}" {if $layout == $value}selected="selected"{/if}>{$layout}</option>
                                                                                {/foreach}
                                                                            </select>
                                                                        {/custom_render_form_field}
                                                                    </div>
                                                                    
                                                                    <div class="col-md-6">
                                                                        {custom_render_form_field field='html_template_file_name'}
                                                                            <select data-toggle-textarea="html_message" {form_field_attributes field='html_template_file_name' extra_class="textarea-toggle"}>
                                                                                <option value="">{intl l='Use HTML message defined below'}</option>
                                                                                {foreach $html_template_list as $template}
                                                                                    <option value="{$template}" {if $template == $value}selected="selected"{/if}>{$template}</option>
                                                                                {/foreach}
                                                                            </select>
                                                                        {if ! empty($value)}{$disable_html='readonly="true"'}{/if}
                                                                        {/custom_render_form_field}
                                                                    </div>
                                                                </div>
                                                                
                                                                <div class="row">
                                                                    <div class="col-md-12">
                                                                        {custom_render_form_field field='html_message'}
                                                                            <textarea {$disable_html|default:''}  {form_field_attributes field='html_message' extra_class="fixedfont"}>{$value nofilter}</textarea>
                                                                            <div id="{$name}" style="height: 500px;"></div>
                                                                        {/custom_render_form_field}
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        
                                                        <div class="panel panel-default">
                                                            <div class="panel-heading"><h3 class="panel-title">{intl l="Text version of this message"}</h3></div>
                                                            
                                                            <div class="panel-body">
                                                                <div class="row">
                                                                    <div class="col-md-6">
                                                                        {custom_render_form_field field='text_layout_file_name'}
                                                                            <select {form_field_attributes field='text_layout_file_name'}>
                                                                                <option value="">{intl l='Use default layout'}</option>
                                                                                {foreach $layout_list as $layout}
                                                                                    <option value="{$layout}" {if $layout == $value}selected="selected"{/if}>{$layout}</option>
                                                                                {/foreach}
                                                                            </select>
                                                                        {/custom_render_form_field}
                                                                    </div>
                                                                    
                                                                    <div class="col-md-6">
                                                                        {custom_render_form_field field='text_template_file_name'}
                                                                            <select data-toggle-textarea="text_message" {form_field_attributes field='text_template_file_name' extra_class='textarea-toggle'}>
                                                                                <option value="">{intl l='Use Text message defined below'}</option>
                                                                                {foreach $text_template_list as $template}
                                                                                    <option value="{$template}" {if $template == $value}selected="selected"{/if}>{$template}</option>
                                                                                {/foreach}
                                                                            </select>
                                                                        {if ! empty($value)}{$disable_text='readonly="true"'}{/if}
                                                                        {/custom_render_form_field}
                                                                    </div>
                                                                </div>
                                                                
                                                                <div class="row">
                                                                    <div class="col-md-12">
                                                                        {custom_render_form_field field='text_message'}
                                                                        <textarea {$disable_html|default:''}  {form_field_attributes field='text_message' extra_class="fixedfont"}>{$value nofilter}</textarea>
                                                                        <div id="{$name}" style="height: 500px;"></div>
                                                                    </div>
                                                                    {/custom_render_form_field}
                                                                </div>
                                                            </div>
                                                        </div>
                                                        
                                                        <div class="form-group">
                                                            <p>{intl l='Message created on %date_create. Last modification: %date_change' date_create="{format_date date=$CREATE_DATE}" date_change="{format_date date=$UPDATE_DATE}"}</p>
                                                        </div>
                                                    
                                                    </form>
                                                {/form}
                                            </div>
                                        </div>
                                    
                                    </div>
                                    
                                    <div class="tab-pane fade" id="preview">
                                        
                                        <br/>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <button class="btn btn-default btn-primary preview-button" data-url="{url path='/admin/message/preview/%id' id=$ID}">
                                                    {intl l="Preview HTML"}
                                                </button>
                                                
                                                <button class="btn btn-default preview-button" data-url="{url path='/admin/message/preview/text/%id' id=$ID}">
                                                    {intl l="Preview text"}
                                                </button>
                                                
                                                {form name="thelia.admin.message.send-sample"}
                                                    <form class="form-inline pull-right send-test-mail-form" action="{url path='/admin/message/send/%id' id=$ID}" method="POST">
                                                        {form_field field="recipient_email"}
                                                            <div class="form-group">
                                                                <label for="recipient-test-email">{$label} *</label>
                                                                <input type="email" required name="{$name}" class="form-control" id="recipient-test-email" {$attr nofilter}>
                                                            </div>
                                                        {/form_field}
                                                        <button type="submit" class="btn btn-primary">{intl l="Send"}</button>
                                                    </form>
                                                {/form}
                                            </div>
                                        </div>
                                        
                                        <div class="table-responsive">
                                            <table class="table table-striped" id="url-variable-table">
                                                <caption class="clearfix">
                                                    {intl l="Variables to inject"}
                                                </caption>
                                                <thead>
                                                <tr>
                                                    <th>
                                                        {intl l='Name'}
                                                    </th>
                                                    
                                                    <th>
                                                        {intl l='Value'}
                                                    </th>
                                                </tr>
                                                </thead>
                                                
                                                <tbody>
                                                <tr class='url-variable'>
                                                    <td>
                                                        <input type='text' class='url-variable-key form-control' />
                                                    </td>
                                                    
                                                    <td>
                                                        <input type='text' class='url-variable-value form-control' />
                                                    </td>
                                                </tr>
                                                
                                                <tr class='url-variable'>
                                                    <td>
                                                        <input type='text' class='url-variable-key form-control' />
                                                    </td>
                                                    
                                                    <td>
                                                        <input type='text' class='url-variable-value form-control' />
                                                    </td>
                                                </tr>
                                                
                                                <tr class='url-variable'>
                                                    <td>
                                                        <input type='text' class='url-variable-key form-control' />
                                                    </td>
                                                    
                                                    <td>
                                                        <input type='text' class='url-variable-value form-control' />
                                                    </td>
                                                </tr>
                                                </tbody>
                                                <tfoot>
                                                <tr>
                                                    <td>
                                                        <a href="#" class="url-variable-table-add">
                                                            <i class="glyphicon glyphicon-plus"></i> {intl l="Add a variable"}
                                                        </a>
                                                    </td>
                                                </tr>
                                                </tfoot>
                                            </table>
                                        </div>
                                    </div>
                                
                                </div><!--/tab-content-->
                            </div>
                        </div>
                    </div>
                
                </div>
            
            {hook name="message-edit.bottom" message_id=$message_id}
            
            {/loop}
            
            {elseloop rel="message_edit"}
                <div class="row">
                    <div class="col-md-12">
                        <div class="alert alert-error">
                            {intl l="Sorry, message ID=%id was not found." id={$message_id}}
                        </div>
                    </div>
                </div>
            {/elseloop}
        
        </div>
    </div>
    
    <div id="preview-modal" class="modal  fade" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <div class="modal-body"></div>
                <div class="modal-footer">
                    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                </div>
            </div>
        </div>
    </div>
    
    <div class="modal fade" id="test-email-modal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h3>{intl l="Test email result"}</h3>
                </div>
                <div class="modal-body">
                    <p id="test-email-body"></p>
                </div>
            </div>
        </div>
    </div>

{/block}

{block name="javascript-initialization"}
    <script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.1.9/ace.js"></script>
    <script>
        (function($) {
            
            var editor = {
                "text_message": null,
                "html_message": null
            };
            
            $('select.textarea-toggle').change(function(ev) {
                var aceEditor = editor[$(this).data('toggle-textarea')];
                if ($(this).val() != '') {
                    aceEditor.setReadOnly(true);
                    $(this).parents(".row").next().slideUp()
                } else {
                    aceEditor.setReadOnly(false);
                    $(this).parents(".row").next().slideDown()
                }
            });
            
            var elems = ["html_message", "text_message"];
            $.each(elems, function(index, value){
                editor[value] = ace.edit('thelia_message_modification[' + value + ']');
                var textarea = $('textarea[name="thelia_message_modification[' + value + ']"]').hide();
                
                editor[value].setTheme("ace/theme/monokai");
                editor[value].getSession().setMode("ace/mode/smarty");
                editor[value].setValue(textarea.text());
                editor[value].getSelection().clearSelection();
                
                editor[value].getSession().on("change", function () {
                    textarea.text(editor[value].getSession().getValue());
                });
            });
            
            $('select.textarea-toggle').change();
            
            function buildUrlParameters() {
                var url = '';
                
                $('.url-variable').each(function(){
                    var key = $('.url-variable-key', $(this)).val();
                    var value = $('.url-variable-value', $(this)).val();
                    
                    if (key != '' && value != '') {
                        url += key + '=' + value + '&';
                    }
                });
                
                return url;
            }
            
            $('.send-test-mail-form').submit(function(ev) {
                var $zis = $(this);
                
                var data = $zis.serialize() + '&' + buildUrlParameters();
                
                $('body').append('<div class="modal-backdrop fade in" id="loading-event"><div class="loading"></div></div>');
                
                $.ajax({
                    url: $zis.attr('action'),
                    method: 'post',
                    data: data,
                    success: function (data) {
                        $('#test-email-body').html(data);
                        $('#test-email-modal').modal("show");
                    }
                }).always(function() {
                    $("#loading-event").remove();
                });
                
                ev.preventDefault();
            });
            
            $('.preview-button').click(function(){
                var url = $(this).data("url");
                url += "?" + buildUrlParameters();
                
                $(".modal-body", "#preview-modal").html(
                    $("<iframe frameborder=0 height='"+$(window).innerHeight()+"px' width='100%' src='"+url+"'/>")
                
                );
                
                $("#preview-modal").modal("show");
            });
            
            $('.url-variable-table-add').click(function() {
                var $line = $("<tr class='url-variable'><td><input type='text' class='url-variable-key form-control' /></td>" +
                    "<td><input type='text' class='url-variable-value form-control' /></td></tr>");
                
                $("tbody", '#url-variable-table').prepend($line);
            });
            
        })(jQuery);
    </script>
{/block}

{block name="javascript-last-call"}
    {hook name="message.edit-js" location="message-edit-js" message_id={$message_id} }
{/block}