<script>
    // 商品規格情報. 規格2のプルダウンリストの設定に利用する,
    var productsClassCategories = {
        {% for Product in pagination %}
        "{{ Product.id|escape('js') }}": {{ Product.class_categories|json_encode|raw }}{% if loop.last == false %}, {% endif %}
        {% endfor %}
    };
    // 規格1が選択された際に, 規格2のプルダウンリストを設定する,
    function fnSetClassCategory2(select, product_id) {
        // 規格1の要素を取得
        var $sele1 = $(select);
        // 規格2の要素を取得
        var $sele2 = $sele1.parent().find('select[name=classcategory_id2]');

        // 規格1の選択肢
        var classcat_id1 = $sele1.val() ? $sele1.val() : '';

        // 規格2がある場合は選択肢を書き換える
        if ($sele2 && $sele2.length) {
            // 規格2の選択肢をクリア
            $sele2.children().remove();
            var classcat2 = productsClassCategories[product_id][classcat_id1];

            // 規格2の要素を設定
            for (var key in classcat2) {
                if (classcat2.hasOwnProperty(key)) {
                    var id = classcat2[key].classcategory_id2;
                    var name = classcat2[key].name;
                    var option = $('<option />').val(id ? id : '').text(name);
                    $sele2.append(option);
                }
            }
        }
    }
    // 受注明細行を追加する.
    // 受注明細行のレコード数カウンタ(order_details_count)は, edit.twig側で定義している.
    function fnAddOrderDetail($row, product_id) {
        // 規格1の要素を取得
        var $sele1 = $row.find('select[name=classcategory_id1]');
        // 規格2の要素を取得
        var $sele2 = $row.find('select[name=classcategory_id2]');

        var product_class_id = null;
        var price = null;
        var quantity = 1;
        var product_code = null;
        var tax_rate = null;

        // 規格なし商品の場合
        if (!$sele1.length && !$sele2.length) {
            var product = productsClassCategories[product_id]['__unselected2']['#'];
            product_class_id = product['product_class_id'];
            price = product['price02'];
            product_code = product['product_code'];
        // 規格が登録されている商品の場合
        } else if ($sele1.length) {
            if ($sele2.length) {
                var class_category_id1 = $sele1.val();
                var class_cateogry_id2 = $sele2.val();
                if (class_category_id1 == '__unselected' || !class_cateogry_id2) {
                    alert('規格を選択してください。')
                    return;
                }
                var product = productsClassCategories[product_id][class_category_id1]['#' + class_cateogry_id2];

                product_class_id = product['product_class_id'];
                price = product['price02'];
            } else {
                var class_category_id1 = $sele1.val();
                if (class_category_id1 == '__unselected') {
                    alert('規格を選択してください。')
                    return;
                }
                var product = productsClassCategories[product_id][class_category_id1]['#'];

                product_class_id = product['product_class_id'];
                price = product['price02'];
            }
        }

        // 受注明細行を取得.
        var list = $('#order_detail_list');
        var orderDetailExists = false;

        $('*[id^="product_info_list__item--"]').each(function () {
            var $inputs = $(this).find(':input');
            if ($inputs.filter('[id$="_ProductClass"][value="'+product_class_id+'"]').length > 0) {
                var $quantity = $inputs.filter('[id$="_quantity"]');
                var quantity = $quantity.val().trim();
                if (quantity.match(/^\d+$/)) {
                    $quantity.val(parseInt(quantity) + 1);
                }
                orderDetailExists = true;
                return false;
            }
        });

        if (!orderDetailExists) {

            // prototype templateを取得.
            var newWidget = list.attr('data-prototype');
            // レコード数カウンタで置換.
            newWidget = newWidget.replace(/__name__/g, order_details_count);
            // フォーム入力値をセットm
            $newWidget = $(newWidget);
            $newWidget.find('#order_OrderDetails_' + order_details_count + '_Product').val(product_id);
            $newWidget.find('#order_OrderDetails_' + order_details_count + '_ProductClass').val(product_class_id);
            $newWidget.find('#order_OrderDetails_' + order_details_count + '_price').val(price);
            $newWidget.find('#order_OrderDetails_' + order_details_count + '_quantity').val(1); // コントローラ側で再取得するため、仮の値をセット
            $newWidget.find('#order_OrderDetails_' + order_details_count + '_tax_rate').val(8); // コントローラ側で再取得するため、仮の値をセット

            // 明細行に追加.
            list.append($newWidget);
        }

        // 配送商品行を取得.
        list = $('#shipment_item_list' + shipment_idx);

        // prototype templateを取得.
        if (typeof(list) !== 'undefined' && list.length > 0) {

            var itemExists = false;

            list.find('*[id^="shipment_item__id--"]').each(function () {
                var $inputs = $(this).find(':input');
                if ($inputs.filter('[id$="_ProductClass"][value="'+product_class_id+'"]').length > 0) {
                    var $quantity = $inputs.filter('[id$="_quantity"]');
                    var quantity = $quantity.val().trim();
                    if (quantity.match(/^\d+$/)) {
                        $quantity.val(parseInt(quantity) + 1);
                    }
                    itemExists = true;
                    return false;
                }
            });

            if (!itemExists) {

                newWidget = list.attr('data-prototype');
                // レコード数カウンタで置換.
                newWidget = newWidget.replace(/__name__/g, shipmentItem_idx);
                // フォーム入力値をセット
                $newWidget = $(newWidget);
                $newWidget.find('#order_Shippings_' + shipment_idx + '_ShipmentItems_' + shipmentItem_idx + '_Product').val(product_id);
                $newWidget.find('#order_Shippings_' + shipment_idx + '_ShipmentItems_' + shipmentItem_idx + '_ProductClass').val(product_class_id);
                $newWidget.find('#order_Shippings_' + shipment_idx + '_ShipmentItems_' + shipmentItem_idx + '_price').val(price);
                $newWidget.find('#order_Shippings_' + shipment_idx + '_ShipmentItems_' + shipmentItem_idx + '_quantity').val(1); // コントローラ側で再取得するため、仮の値をセット

                // 明細行に追加.
                list.append($newWidget);
            }
        }

        if (orderDetailExists) {
            // カウンタを更新.
            order_details_count++;
        }

        // モーダル閉じる.
        $('#searchProductModal').modal('hide');

        // 再計算のためsubmit.
        setModeAndSubmit('modal');

        return false;
    }

    // 商品検索
    $('#product_pagination a').on('click', function(event) {
        var list = $('#searchProductModalList');
        list.children().remove();

        $.ajax({
            type: 'GET',
            dataType: 'html',
            url: $(this).attr('href'),
            success: function(data) {
                $('#searchProductModalList').html(data);
            },
            error: function() {
                alert('search product failed.');
            }
        });
        event.preventDefault();
    });
</script>
<div class="table-responsive">
    <table class="table">
        <tbody>

        {% for Product in pagination %}
            <form name="product_form{{ Product.id }}">
                {% set form = forms[Product.id] %}

                <tr>
                    <td>
                        {{ Product.id }}
                    </td>
                    <td>
                        {{ Product.name }}
                        {% if Product.hasProductClass %}
                            <span><br/>{{ Product.code_min }}～{{ Product.code_max }}</span>
                        {% else %}
                            <span><br/>{{ Product.code_min }}</span>
                        {% endif %}
                    </td>
                    <td>
                        {% if form.classcategory_id1 is defined %}
                            {{ form_label(form.classcategory_id1) }}：{{ form_widget(form.classcategory_id1, { attr : { 'onchange' : "fnSetClassCategory2(this," ~ Product.id ~ ")" } } ) }}
                            {% if form.classcategory_id2 is defined %}
                                <br/>{{ form_label(form.classcategory_id2) }}：{{ form_widget(form.classcategory_id2, {'id': ''}) }}
                            {% endif %}
                        {% endif %}
                    </td>
                    <div class="extra-form">
                        {% for f in form.getIterator %}
                            {% if f.vars.name matches '[^plg*]' %}
                                {{ form_label(f) }}
                                {{ form_widget(f) }}
                                {{ form_errors(f) }}
                            {% endif %}
                        {% endfor %}
                    </div>
                    <td class="text-right">
                        <button onclick="fnAddOrderDetail($(this).parent().parent(), {{ Product.id }})" type="button" class="btn btn-default btn-sm" name="mode" value="modal">
                            決定
                        </button>
                    </td>
                </tr>
            </form>
        {% endfor %}

        </tbody>
    </table>
    {% if pagination.totalItemCount > 0 %}
        {% include "pager.twig" with {'id': 'product_pagination', 'pages': pagination.paginationData, 'routes': 'admin_order_search_product_page'} %}
    {% endif %}
</div>