{#
This file is part of EC-CUBE

Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.

http://www.ec-cube.co.jp/

For the full copyright and license information, please view the LICENSE
file that was distributed with this source code.
#}
{% extends '@admin/default_frame.twig' %}

{% set menus = ['setting', 'shop', 'shop_mail'] %}

{% block title %}{{ 'admin.setting.shop.mail_setting'|trans }}{% endblock %}
{% block sub_title %}{{ 'admin.setting.shop'|trans }}{% endblock %}

{% form_theme form '@admin/Form/bootstrap_4_horizontal_layout.html.twig' %}

{% block stylesheet %}
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <style>
        .ui-resizable-se {
            right: -3px;
            bottom: -3px;
        }
    </style>
{% endblock %}

{% block javascript %}
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.8/ace.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.8/ext-language_tools.js"></script>
    <script>
        $(function() {
            $('#mail_template').on('change', function() {
                var id = $(this).val()
                if (id) {
                    location.href = '{{ url('admin_setting_shop_mail') }}/' + id;
                } else {
                    location.href = '{{ url('admin_setting_shop_mail') }}';
                }
            });

            ace.require('ace/ext/language_tools');
            var editor = ace.edit('editor');
            editor.session.setMode('ace/mode/twig');
            editor.setTheme('ace/theme/tomorrow');
            editor.setValue("{{ form.tpl_data.vars.value|escape('js') }}");
            editor.setOptions({
                enableBasicAutocompletion: true,
                enableSnippets: true,
                enableLiveAutocompletion: true,
                showInvisibles: true
            });

            {% if form.html_tpl_data.vars.value %}
                var html_editor = ace.edit('html_editor');
                html_editor.session.setMode('ace/mode/twig');
                html_editor.setTheme('ace/theme/tomorrow');
                html_editor.setValue("{{ form.html_tpl_data.vars.value|escape('js') }}");
                html_editor.setOptions({
                    enableBasicAutocompletion: true,
                    enableSnippets: true,
                    enableLiveAutocompletion: true,
                    showInvisibles: true
                });
            {% endif %}

            $("#editor").resizable({
                resize: function (event, ui) {
                    editor.resize();
                }
            });

            $("#html_editor").resizable({
                resize: function (event, ui) {
                    editor.resize();
                }
            });

            $('#form1').on('submit', function() {
                $('#mail_tpl_data').val(editor.getValue());
                {% if form.html_tpl_data.vars.value %}
                    $('#mail_html_tpl_data').val(html_editor.getValue());
                {% endif %}
            });

            // HTMLメールモーダル表示
            $('#htmlPreviewModal').on('show.bs.modal', function (event) {
                var html = $('#viewEmail');
                html.children().remove();

                // HTMLを読み込んでモーダルに表示
                $.ajax({
                    type: 'POST',
                    dataType: 'html',
                    data: {
                        'html_body' : html_editor.getValue(),
                    },
                    url: '{{ url('admin_setting_shop_mail_preview') }}',
                    success: function(data) {
                        // モーダルに結果を書き出し.
                        $('#viewEmail').html(data);
                    },
                    error: function() {
                        alert('preview html mail failed.');
                    }
                });
            });

            $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                var activated_tab = e.target;
                var id = $(activated_tab).attr('id');
                if (id == 'menu__{{ form.html_tpl_data.vars.id }}') {
                    $('#preview_button').attr('style', 'display:blocked;');
                } else {
                    $('#preview_button').attr('style', 'display:none;');
                }
            });
        });
    </script>
{% endblock javascript %}

{% block main %}
    <form name="form1" role="form" class="form-horizontal" id="form1" method="post" action="">
        {{ form_widget(form._token) }}
        <div class="c-contentsArea__cols">
            <div class="c-contentsArea__primaryCol">
                <div class="c-primaryCol">
                    <div class="card rounded border-0 mb-4">
                        <div class="card-header"><span class="card-title">{{ 'admin.setting.shop.mail.mail_template_edit'|trans }}</span></div>
                        <div class="card-body">
                            <div class="row mb-2">
                                <div class="col-2">
                                    <div class="d-inline-block" data-tooltip="true" data-placement="top" title="{{ 'tooltip.setting.shop.mail.mail_template'|trans }}">
                                        <span>{{ 'admin.setting.shop.mail.mail_template'|trans }}</span><i class="fa fa-question-circle fa-lg ml-1"></i>
                                    </div>
                                </div>
                                <div class="col-10">
                                    {{ form_widget(form.template) }}
                                    {{ form_errors(form.template) }}
                                </div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-2"><span>{{ 'admin.setting.shop.mail.mail_subject'|trans }}</span><span class="badge badge-primary ml-1">{{ 'admin.common.required'|trans }}</span></div>
                                <div class="col-10">
                                    {{ form_widget(form.mail_subject) }}
                                    {{ form_errors(form.mail_subject) }}
                                </div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-2"><span>{{ 'admin.setting.shop.mail.mail_body'|trans }}</span><span class="badge badge-primary ml-1">{{ 'admin.common.required'|trans }}</span></div>
                                <div class="col-10">
                                    {# タブ表示 #}
                                    {% if id is not null %}
                                    <ul class="nav nav-tabs text-center" role="tablist">
                                        <li class="nav-item" style="border: 1px solid #ced4da; padding:0;">
                                            <a id="menu__{{ form.tpl_data.vars.id }}" href="#detail_box__tpl_data" class="nav-link active" data-toggle="tab"><span>{{ 'admin.setting.shop.mail.mail_text'|trans }}</span></a>
                                        </li>
                                        {% if form.html_tpl_data.vars.value %}
                                        <li class="nav-item" style="border: 1px solid #ced4da; padding:0;">
                                            <a id="menu__{{ form.html_tpl_data.vars.id }}" href="#detail_box__html_tpl_data" class="nav-link" data-toggle="tab"><span>{{ 'admin.setting.shop.mail.mail_html'|trans }}</span></a>
                                        </li>
                                        {% endif %}
                                        <div class="col-1">
                                            <div class="d-inline-block">
                                                <div class="btn-group" role="group">
                                                    <button type="button" id="preview_button" class="btn btn-block btn-ec-regular" style="display:none;" data-toggle="modal" data-target="#htmlPreviewModal">
                                                        {{ 'admin.setting.shop.mail.preview'|trans }}
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </ul>
                                    {% endif %}
                                    <div class="tab-content">
                                        <div id="detail_box__tpl_data" class="form-group tab-pane active">
                                            {{ form_label(form.tpl_data) }}
                                            <div id="editor" style="height: 480px" class="form-control{{ has_errors(form.tpl_data) ? ' is-invalid' }}"></div>
                                            <div style="display: none">{{ form_widget(form.tpl_data) }}</div>
                                            {{ form_errors(form.tpl_data) }}
                                        </div>
                                        {% if form.html_tpl_data.vars.value %}
                                        <div id="detail_box__html_tpl_data" class="form-group tab-pane">
                                            {{ form_label(form.html_tpl_data) }}
                                            <div id="html_editor" style="height: 480px" class="form-control{{ has_errors(form.html_tpl_data) ? ' is-invalid' }}"></div>
                                            <div style="display: none">{{ form_widget(form.html_tpl_data) }}</div>
                                            {{ form_errors(form.html_tpl_data) }}
                                        </div>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                            {# エンティティ拡張の自動出力 #}
                            {% for f in form if f.vars.eccube_form_options.auto_render %}
                                {% if f.vars.eccube_form_options.form_theme %}
                                    {% form_theme f f.vars.eccube_form_options.form_theme %}
                                    {{ form_row(f) }}
                                {% else %}
                                    <div class="row mb-2">
                                        <div class="col-2"><span>{{ f.vars.label|trans }}</span></div>
                                        <div class="col-10">
                                            {{ form_widget(f) }}
                                            {{ form_errors(f) }}
                                        </div>
                                    </div>
                                {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="c-conversionArea" id="aside_column">
            <div class="c-conversionArea__container">
                <div class="row justify-content-between align-items-center">
                    <div class="col-6">
                        <div class="c-conversionArea__leftBlockItem">
                        </div>
                    </div>
                    <div class="col-6">
                        <div id="ex-conversion-action" class="row align-items-center justify-content-end">
                            <div class="col-auto">
                                <button class="btn btn-ec-conversion px-5" type="submit">{{ 'admin.common.registration'|trans }}</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <!-- HTMLメールを確認するモーダル -->
    <div class="modal fade" id="htmlPreviewModal" tabindex="-1" role="dialog" aria-labelledby="htmlPreviewModal" aria-hidden="true" data-keyboard="false" data-backdrop="static">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title font-weight-bold">{{ 'admin.setting.shop.mail.preview'|trans }}</h5>
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                </div>
                <div class="modal-body">
                    <div class="bg-light p-4 bg-ec-formGray" id="viewEmail" style="word-wrap: break-word; word-break:break-all">

                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-ec-sub" type="button" data-dismiss="modal">{{ 'admin.common.close'|trans }}</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
