{#
Copyright(c) Nobuhiko Kimoto. All Rights Reserved.

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 = ['order', 'order_edit'] %}

{% block title %}{{ 'admin.order.mail'|trans }}{% endblock %}
{% block sub_title %}{{ 'admin.order.order_management'|trans }}{% endblock %}

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

{% block javascript %}
<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() {
        $('#template-change').on('change', function() {
            $('#mode').val('change');
            $('#order-mail-form').submit();
            return false;
        });

        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
        });

        $('#order-mail-form').on('submit', function() {
            $('#admin_order_mail_tpl_data').val(editor.getValue());
        });
    });
</script>
{% endblock javascript %}

{% block main %}
<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">
                    <div class="row">
                        <div class="col-8">
                            <div class="d-inline-block" data-tooltip="true" data-placement="top" title="{{ 'tooltip.order.mail_destination_info'|trans }}"><span class="card-title">{{ 'admin.order.mail_destination_info'|trans }}</span><i class="fa fa-question-circle fa-lg ml-1"></i></div>
                        </div>
                        <div class="col-4 text-right"><a data-toggle="collapse" href="#mailTo" aria-expanded="false" aria-controls="mailTo"><i class="fa fa-angle-up fa-lg"></i></a></div>
                    </div>
                </div>
                <div class="collapse show ec-cardCollapse" id="mailTo">
                    <div class="card-body">
                        {% for Order in Orders %}
                        <div class="row mb-2">
                            <div class="col-2"><span>{{ 'admin.order.order_no'|trans }}</span></div>
                            <div class="col-1"><span>{{ Order.id }}</span></div>
                            <div class="col-5"><span>{{ Order.name01 }} {{ Order.name02 }}（{{ Order.kana01 }} {{ Order.kana02 }})</span></div>
                            <div class="col-4"><span>{{ Order.email }}</span></div>
                        </div>
                        {% endfor %}
                    </div>
                    <div class="card-footer">
                        合計 {{ Orders | length }} 件を選択中　{% if complete_flg %}<span class="m-2 text_red">メール送信処理が終了しました。</span>{% endif %}
                    </div>
                </div>
            </div>

            <form id="order-mail-form" class="form-horizontal" method="post" action="{{ url('send_all_mails4_admin_mail', {ids : ids}) }}">
                {{ form_widget(form._token) }}
                <input id="mode" type="hidden" name="mode">

                <div class="card rounded border-0 mb-4">
                    <div class="card-header">
                        <div class="row">
                            <div class="col-8"><span class="card-title">{{ 'admin.order.mail_mail_info'|trans }}</span></div>
                            <div class="col-4 text-right"><a data-toggle="collapse" href="#mailCreate" aria-expanded="false" aria-controls="mailCreate"><i class="fa fa-angle-up fa-lg"></i></a></div>
                        </div>
                    </div>
                    <div class="collapse show ec-cardCollapse" id="mailCreate">
                        <div class="card-body">
                            <div class="row mb-2">
                                <div class="col-3">
                                    <div class="d-inline-block" data-tooltip="true" data-placement="top" title="{{ 'tooltip.order.mail_template'|trans }}">
                                        <span>{{ 'admin.order.mail_template'|trans }}</span><i class="fa fa-question-circle fa-lg ml-1"></i>
                                    </div>
                                </div>
                                <div class="col">
                                    {{ form_widget(form.template, {'id': 'template-change'}) }}
                                    {{ form_errors(form.template) }}
                                </div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-3">
                                    <div class="d-inline-block" data-tooltip="true" data-placement="top" title="{{ 'tooltip.order.mail_subject'|trans }}">
                                        <span>{{ 'admin.order.mail_subject'|trans }}</span><i class="fa fa-question-circle fa-lg ml-1"></i>
                                    </div>
                                    <span class="badge badge-primary ml-1">{{ 'admin.common.required'|trans }}</span>
                                </div>
                                <div class="col">
                                    {{ form_widget(form.mail_subject) }}
                                    {{ form_errors(form.mail_subject) }}
                                </div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-3"><span>{{ 'admin.order.mail_body'|trans }}</span></div>
                                <div class="col">
                                    <div id="detail_box__tpl_data" class="form-group tab-pane active">
                                        {{ form_label(form.tpl_data) }}
                                        {# <div>{{ form_widget(form.tpl_data, {'attr': {'readonly': true}}) }}</div> #}
                                        <div>{{ form_widget(form.tpl_data) }}</div>
                                        {{ form_errors(form.tpl_data) }}
                                    </div>
                                    <p>
                                    <b>※「-*-*-*-*-*-*-*-*-*-*-」~「-*-*-*-*-*-*-*-*-*-*-」の間が編集可能です。<br /></b>
                                    　そのほかの部分を編集してもメールの内容に反映されませんのでご注意ください。<br />
                                    <b>※「-*-*-*-*-*-*-*-*-*-*-」は2カ所とも消さないでください。<br /></b>
                                    　消してしまうと、デフォルトのテンプレートのままメールが生成されます。<br />
                                </p>
                                </div>
                            </div>
                            {#
                            <div class="row mb-2">
                                <div class="col-3"><span>メッセージ</span></div>
                                <div class="col">
                                    <div id="detail_box__message" class="form-group tab-pane active">
                                        {{ form_label(form.message) }}
                                        <div>{{ form_widget(form.message) }}</div>
                                        {{ form_errors(form.message) }}
                                    </div>
                                </div>
                            </div>
                            #}
                        </div>
                    </div>
                </div>


                <div class="c-conversionArea">
                    <div class="c-conversionArea__container">
                        <div class="row justify-content-between align-items-center">
                            <div class="col-6">
                                <div class="c-conversionArea__leftBlockItem">
                                    <a class="c-baseLink" href="{{ url('admin_order', { 'resume': 1 }) }}"><i class="fa fa-backward" aria-hidden="true"></i><span>{{ 'admin.order.order_list'|trans }}</span></a>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="row align-items-center justify-content-end">
                                    <div class="col-auto">
                                        <button type="submit" class="btn btn-ec-conversion px-5" name="mode" value="confirm">{{ 'admin.order.mail_confirm'|trans }}</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

{% endblock %}
