{#
 * This file is part of the Recommend Product plugin
 *
 * Copyright (C) 2016 LOCKON CO.,LTD. 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 = ['content', 'plugin_recommend'] %}

{% block title %}{{ 'plugin_recommend.admin.edit.title'|trans }}{% endblock %}
{% block sub_title %}{{ 'plugin_recommend.admin.edit.subtitle'|trans }}{% endblock %}

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

{% block stylesheet %}
    <style type="text/css">
        .col-sm-2 {
            max-width: none;
        }
    </style>
{% endblock stylesheet %}

{% block javascript %}
    <script type="text/javascript">
        var recommend = JSON.parse('{{ recommend_products|raw }}');

        $(function() {
            $('#showSearchProductModal').on('click', function() {
                    var tbody = $('#searchProductModalList tbody');
                    tbody.children().remove();
                    $('div.box-footer').remove();
                }
            );

            $('#searchProductModalButton').on('click', function() {
                var list = $('#searchProductModalList');
                list.children().remove();
                $.ajax({
                    type: 'POST',
                    dataType: 'html',
                    data: {
                        'id' : $('#admin_search_product_id').val(),
                        'category_id' : $('#admin_search_product_category_id').val()
                    },
                    url: '{{ url('plugin_recommend_search_product') }}',
                    success: function(data) {
                        // モーダルに結果を書き出し.
                        $('#searchProductModalList').html(data);

                    },
                    error: function() {
                        alert('Search product failed.');
                    }
                });
            });
        });
    </script>
{% endblock javascript %}

{% block main %}
    <form role="form" name="form1" id="form1" method="post">
        {{ 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>{{ 'plugin_recommend.admin.edit.header'|trans }}</span>
                        </div><!-- /.box-header -->

                        <div class="card-body">
                            <div class="row" style="display: none;">
                                <div class="col-3">{{ form_label(form.id) }}</div>
                                <div class="col mb-2">
                                    {{ form_widget(form.id) }}
                                    {{ form_errors(form.id) }}
                                </div>
                            </div>

                            {# 商品ID #}
                            <div class="row">
                                <div class="col-3">{{ form_label(form.id) }}</div>
                                <div class="col mb-2">
                                    {% if Product is not null %}
                                        <div id="product_image">
                                            <a href="{{ url('admin_product_product_edit', { id : Product.id }) }}" id="product_image_link">
                                                <img src="{{ asset(Product.mainFileName|no_image_product, "save_image") }}" style="max-width: 135px;" id="product_image_img"/>
                                            </a>
                                        </div>
                                        <br>
                                        <p id="product_name">
                                            {{ Product.name }}
                                        </p>
                                        <br>
                                        <p id="product_code">
                                            {{ Product.code_min }}
                                            {% if Product.code_min != Product.code_max %} ～ {{ Product.code_max }}
                                            {% endif %}
                                        </p>
                                    {% else %}
                                        <div id="product_image" class="d-none">
                                            <a href="" id="product_image_link">
                                                <img src="" style="max-width: 135px;" id="product_image_img"/>
                                            </a>
                                        </div>
                                        <p id="product_name" class="d-none"></p>
                                        <p id="product_code" class="d-none"></p>
                                    {% endif %}

                                    <a id="showSearchProductModal" class="btn btn-ec-regular mr-2" data-toggle="modal" data-target="#searchProductModal">{{ 'plugin_recommend.admin.edit.search'|trans }}</a>
                                    <div class="clearfix"></div>
                                    {{ form_widget(form.Product) }}
                                    {{ form_errors(form.Product) }}
                                    <div id="warning" class="text-info"></div>
                                </div>
                            </div>
                            {# コメント #}
                            <div class="row">
                                <div class="col-3">{{ form_label(form.comment) }}</div>
                                <div class="col mb-2">
                                    {{ form_widget(form.comment, { attr : { rows : "8"} }) }}
                                    {{ form_errors(form.comment) }}
                                    <p class="text-muted" style="text-align: right">{{ 'plugin_recommend.admin.edit.comment.help'|trans({'%number%' : eccube_config['plugin_recommend.text_area_len']}) }}</p>
                                </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-beseLink" href="{{ url('plugin_recommend_list') }}">
                                        <i class="fa fa-backward" aria-hidden="true"></i><span>{{ 'common.back'|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-primary btn-block btn-lg">{{ 'admin.common.save'|trans }}</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </form>

    {#
    // =======================================
    // 商品検索モーダル ダイアログ表示
    // =======================================
    #}
    <div class="modal" id="searchProductModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="searchProductModalLabel">{{ 'plugin_recommend.admin.edit.product_search.header'|trans }}</h4>
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>

                <div class="modal-body">
                    <div class="form-group">
                        {{ form_widget(searchProductModalForm.id, { attr : { placeholder : 'admin.product.product_name_and_code'|trans } }) }}
                    </div>
                    <div class="form-group">
                        {{ form_widget(searchProductModalForm.category_id) }}
                    </div>
                    <div class="form-group text-center">
                        <button type="button" id="searchProductModalButton" class="btn btn-primary" >{{ 'plugin_recommend.admin.edit.product_search.button'|trans }}</button>
                    </div>
                    <div class="form-group" id="searchProductModalList">
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
