{#
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 'default_frame.twig' %}

{% form_theme form 'Form/form_div_layout.twig' %}

{% block javascript %}
    <script>
        $(function() {
            var $redirectCallback = function() {
                loadingOverlay();
                $('#shopping_order_redirect_to').val($(this).attr('data-path'));
                $('#shopping-form').attr('action', '{{ url("shopping_redirect_to") }}').submit();
                setTimeout(function () {
                    loadingOverlay("hide");
                }, 2000);
            };
            $('[data-trigger]').each(function() {
                $(this).on($(this).attr('data-trigger'), $redirectCallback);
            });

            {% if is_granted('ROLE_USER') == false %}
            var edit = $('.customer-edit');
            var hidden = $('.customer-in');
            var form = $('.customer-form');

            $('#customer').click(function() {
                $(edit).each(function(index) {
                    var name = $(this).text();
                    var input = $('<input id="edit' + index + '" type="text" />').val(name);
                    $(form[index]).empty().append(input);
                });

                $('.non-customer-display').hide();
                $('.non-customer-edit').show();
                $('.mod-button').show();
            });

            $('#customer-ok').click(function() {
                $(form).each(function(index) {
                    $(hidden[index]).val($(form[index]).children('input').val());
                });

                var postData = {};
                $(hidden).each(function() {
                    postData[$(this).attr('name')] = $(this).val();
                });

                loadingOverlay();

                $.ajax({
                    url: "{{ url('shopping_customer') }}",
                    type: 'POST',
                    data: postData,
                    dataType: 'json'
                }).done(function(data) {
                    if (data.status == 'OK') {
                        $(form).each(function(index) {
                            $(edit[index]).empty().text($(form[index]).children('input').val());
                            $(form[index]).empty();
                        });

                        // kana field
                        $(edit[2]).empty().text(data.kana01);
                        $(edit[3]).empty().text(data.kana02);
                        $('#customer-kana01').val(data.kana01);
                        $('#customer-kana02').val(data.kana02);
                    }
                }).fail(function() {
                    alert('更新に失敗しました。入力内容を確認してください。');
                }).always(function(data) {
                    // overlayを無効
                    loadingOverlay('hide');
                });

                $('.non-customer-display').show();
                $('.non-customer-edit').hide();
                $('.mod-button').hide();
            });

            $('#customer-cancel').click(function() {
                $('.non-customer-display').show();
                $('.non-customer-edit').hide();
                $('.mod-button').hide();
            });
            {% endif %}
 
            // ゆうパケット可能な商品以外の場合は選択肢から消す 2020.11
            var upacket = {{ check_delivery['upacket']|json_encode|raw }};
            if(!upacket) {
                $('#shopping_order_Shippings_0_Delivery option[value="29"]').hide();
                $('#shopping_order_Shippings_0_Delivery option[value="30"]').hide();
            }
            
            // 宅配便送料410円定期商品の場合は 「宅配便（定期・無料）」を選択肢から消す 
            // 宅配便送料無料の定期商品の場合は 「宅配便（定期・410円）」を選択肢から消す 2020.11
            var teiki_free = {{ check_delivery['teiki_free']|json_encode|raw }};
            if(teiki_free) {                
                $('#shopping_order_Shippings_0_Delivery option[value="31"]').hide();
            } else {
                $('#shopping_order_Shippings_0_Delivery option[value="22"]').hide();
            }
           
            var selectedValue = $("#shopping_order_Shippings_0_Delivery").val();
            // ゆうパケットはお届け日指定できない 2020.11
            if (selectedValue == '29' || selectedValue == '30') {
                $('.ec-select__delivery').hide();
                $('.ec-select__time').hide();
                $('.select-ng-msg').show();
            } else {
                $('.select-ng-msg').hide()
            }
            
        });
    </script>
{% endblock javascript %}

{% block main %}

    <div class="ec-role">
        <div class="ec-pageHeader">
            <h1>{{ 'ご注文手続き'|trans }}</h1>
        </div>
    </div>

    <div class="ec-cartRole">
        <div class="ec-cartRole__progress">
            <ul class="ec-progress">
                {% set step = 1 %}
                <li class="ec-progress__item">
                    <div class="ec-progress__number">{{ step }}{% set step = step + 1 %}
                    </div>
                    <div class="ec-progress__label">{{ 'カートの商品'|trans }}
                    </div>
                </li>
                {% if is_granted('ROLE_USER') == false %}
                    <li class="ec-progress__item">
                        <div class="ec-progress__number">{{ step }}{% set step = step + 1 %}
                        </div>
                        <div class="ec-progress__label">{{ 'お客様情報'|trans }}
                        </div>
                    </li>
                {% endif %}
                <li class="ec-progress__item is-complete">
                    <div class="ec-progress__number">{{ step }}{% set step = step + 1 %}
                    </div>
                    <div class="ec-progress__label">{{ 'ご注文手続き'|trans }}
                    </div>
                </li>
                <li class="ec-progress__item">
                    <div class="ec-progress__number">{{ step }}{% set step = step + 1 %}
                    </div>
                    <div class="ec-progress__label">{{ 'ご注文内容確認'|trans }}
                    </div>
                </li>
                <li class="ec-progress__item">
                    <div class="ec-progress__number">{{ step }}{% set step = step + 1 %}
                    </div>
                    <div class="ec-progress__label">{{ '完了'|trans }}
                    </div>
                </li>
            </ul>
        </div>

        <!-- アラートメッセージ -->
        {{ include('Shopping/alert.twig') }}
    </div>

    <form id="shopping-form" method="post" action="{{ url('shopping_confirm') }}">
        {{ form_widget(form._token) }}
        {{ form_widget(form.redirect_to) }}
        <div class="ec-orderRole">
            <div class="ec-orderRole__detail">
                <div class="ec-orderAccount">
                    <div class="ec-rectHeading">
                        <h2>{{ 'お客様情報'|trans }}</h2>
                    </div>
                    {% if is_granted('ROLE_USER') == false %}
                        <div class="ec-orderAccount__change non-customer-display">
                            <button id="customer" class="ec-inlineBtn" type="button">{{ '変更'|trans }}</button>
                        </div>
                    {% endif %}
                    <div class="ec-orderAccount__account non-customer-display">
                        <p class="ec-halfInput">{{ ''|trans }}<span class="customer-edit customer-name01">{{ Order.name01 }}</span> <span class="customer-edit customer-name02">{{ Order.name02 }}</span>{{ ' 様'|trans }}</p>
                        <p class="ec-halfInput"><span class="customer-edit customer-kana01">{{ Order.kana01 }}</span> <span class="customer-edit customer-kana02">{{ Order.kana02 }}</span></p>
                        <p class="ec-input"><span class="customer-edit customer-company_name">{{ Order.companyName }}</span></p>
                        <p class="ec-zipInput">〒<span class="customer-edit customer-postal_code">{{ Order.postal_code }}</span></p>
                        <p class="ec-input"><span class="customer-edit customer-pref">{{ Order.pref }}</span><span class="customer-edit customer-addr01">{{ Order.addr01 }}</span><span class="customer-edit customer-addr02">{{ Order.addr02 }}</span></p>
                        <p class="ec-telInput"><span class="customer-edit customer-phone_number">{{ Order.phone_number }}</span></p>
                        <p class="ec-input"><span class="customer-edit customer-email">{{ Order.email }}</span></p>
                    </div>
                    {% if is_granted('ROLE_USER') == false %}
                        <div class="ec-borderedDefs  non-customer-edit" style="display:none;">
                            <dl>
                                <dt>
                                    <label class="ec-label required">{{ 'お名前'|trans }}</label>
                                    <span class="ec-required">{{ '必須'|trans }}</span>
                                </dt>
                                <dd>
                                    <div class="ec-halfInput">
                                        <span class="customer-form customer-name01"></span>
                                        <span class="customer-form customer-name02"></span>
                                    </div>
                                </dd>
                            </dl>
                            <dl>
                                <dt>
                                    <label class="ec-label required">{{ 'お名前(カナ)'|trans }}</label>
                                    <span class="ec-required">{{ '必須'|trans }}</span>
                                </dt>
                                <dd>
                                    <div class="ec-halfInput">
                                        <span class="customer-form customer-kana01"></span>
                                        <span class="customer-form customer-kana02"></span>
                                    </div>
                                </dd>
                            </dl>
                            <dl>
                                <dt>
                                    <label class="ec-label" for="nonmember_company_name">{{ '会社名'|trans }}</label>
                                </dt>
                                <dd>
                                    <div class="ec-halfInput">
                                        <span class="customer-form customer-company_name"></span>
                                    </div>
                                </dd>
                            </dl>
                            <dl>
                                <dt>
                                    <label class="ec-label required">{{ '住所'|trans }}</label>
                                    <span class="ec-required">{{ '必須'|trans }}</span>
                                </dt>
                                <dd>
                                    <div class="ec-zipInput">
                                        <span>{{ '〒'|trans }}</span>
                                        <span class="customer-form customer-postal_code"></span>
                                        <div class="ec-zipInputHelp">
                                            <div class="ec-zipInputHelp__icon">
                                                <div class="ec-icon">
                                                    <img src="{{ asset('assets/icon/question-white.svg') }}" alt="">
                                                </div>
                                            </div>
                                            <a href="https://www.post.japanpost.jp/zipcode/" target="_blank">
                                                <span>{{ '郵便番号検索'|trans }}</span>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="ec-select">
                                        <span class="customer-form customer-address_pref"></span>
                                    </div>
                                    <div class="ec-input">
                                        <span class="customer-form customer-address_addr01"></span>
                                    </div>
                                    <div class="ec-input">
                                        <span class="customer-form customer-address_addr02"></span>
                                    </div>
                                </dd>
                            </dl>
                            <dl>
                                <dt>
                                    <label class="ec-label required" for="nonmember_phone_number">{{ '電話番号'|trans }}</label>
                                    <span class="ec-required">{{ '必須'|trans }}</span>
                                </dt>
                                <dd>
                                    <div class="ec-telInput">
                                        <span class="customer-form customer-phone_number"></span>
                                    </div>
                                </dd>
                            </dl>
                            <dl>
                                <dt>
                                    <label class="ec-label required">{{ 'メールアドレス'|trans }}</label>
                                    <span class="ec-required">{{ '必須'|trans }}</span>
                                </dt>
                                <dd>
                                    <div class="ec-input">
                                        <span class="customer-form customer-email"></span>
                                    </div>
                                </dd>
                            </dl>
                        </div>
                        <div class="mod-button" style="display:none;">
                            <span id="customer-ok"><button type="button" class="ec-inlineBtn">{{ 'OK'|trans }}</button></span>
                            <span id="customer-cancel"><button type="button" class="ec-inlineBtn">{{ 'キャンセル'|trans }}</button></span>
                        </div>
                        <input type="hidden" id="customer-name01" class="customer-in" name="customer_name01" value="{{ Order.name01 }}">
                        <input type="hidden" id="customer-name02" class="customer-in" name="customer_name02" value="{{ Order.name02 }}">
                        <input type="hidden" id="customer-kana01" class="customer-in" name="customer_kana01" value="{{ Order.kana01 }}">
                        <input type="hidden" id="customer-kana02" class="customer-in" name="customer_kana02" value="{{ Order.kana02 }}">
                        <input type="hidden" id="customer-company-name" class="customer-in" name="customer_company_name" value="{{ Order.companyName }}">
                        <input type="hidden" id="customer-postal_code" class="customer-in" name="customer_postal_code" value="{{ Order.postal_code }}">
                        <input type="hidden" id="customer-pref" class="customer-in" name="customer_pref" value="{{ Order.pref }}">
                        <input type="hidden" id="customer-addr01" class="customer-in" name="customer_addr01" value="{{ Order.addr01 }}">
                        <input type="hidden" id="customer-addr02" class="customer-in" name="customer_addr02" value="{{ Order.addr02 }}">
                        <input type="hidden" id="customer-phone_number" class="customer-in" name="customer_phone_number" value="{{ Order.phone_number }}">
                        <input type="hidden" id="customer-email" class="customer-in" name="customer_email" value="{{ Order.email }}">
                    {% endif %}
                </div>
                <div class="ec-orderDelivery">
                    <div class="ec-rectHeading">
                        <h2>{{ '配送情報'|trans }}</h2>
                    </div>
                    
                    {% for shipping in Order.shippings %}
                        {% set idx = loop.index0 %}
                        {% set isShowReducedTaxMess = false %}
                        <div class="ec-orderDelivery__title">{{ 'お届け先'|trans }}{% if Order.multiple %}({{ loop.index }}){% endif %}
                            <div class="ec-orderDelivery__change">
                                {% if is_granted('ROLE_USER') %}
                                    <button class="ec-inlineBtn" data-id="{{ shipping.id }}" data-trigger="click" data-path="{{ path('shopping_shipping', {'id': shipping.id}) }}">{{ '変更'|trans }}</button>
                                {% else %}
                                    <button class="ec-inlineBtn" data-id="{{ shipping.id }}" data-trigger="click" data-path="{{ path('shopping_shipping_edit', {'id': shipping.id}) }}">{{ '変更'|trans }}</button>
                                {% endif %}
                            </div>
                        </div>
                        <div class="ec-orderDelivery__item">
                            <ul class="ec-borderedList">
                                {% for orderItem in shipping.productOrderItems %}
                                    <li>
                                        <div class="ec-imageGrid">
                                            <div class="ec-imageGrid__img"><img src="{{ asset((orderItem.product is null ? null : orderItem.product.MainListImage)|no_image_product, 'save_image') }}" alt="{{ orderItem.productName }}"></div>
                                            <div class="ec-imageGrid__content">
                                                <p>{{ orderItem.productName }}{% if is_reduced_tax_rate(orderItem) %}{{ '※'|trans }}{% set isShowReducedTaxMess = true %}{% endif %}</p>
                                                {% if orderItem.productClass is not null and orderItem.productClass.classCategory1 %}
                                                    <p>{{ orderItem.productClass.classCategory1.className.name }}：{{ orderItem.productClass.classCategory1 }}</p>
                                                {% endif %}
                                                {% if orderItem.productClass is not null and orderItem.productClass.classCategory2 %}
                                                    <p>{{ orderItem.productClass.classCategory2.className.name }}：{{ orderItem.productClass.classCategory2 }}</p>
                                                {% endif %}
                                                <p>{{ orderItem.priceIncTax|price }} × {{ orderItem.quantity|number_format }}<span>{{ '小計：'|trans }}{{ orderItem.totalPrice|price }}</span></p>
                                            </div>
                                        </div>
                                    </li>
                                {% endfor %}                                
                            </ul>
                            <p>{{ isShowReducedTaxMess ? '※ は軽減税率対象商品です。'|trans }}</p>
                        </div>
                        <div class="ec-orderDelivery__address">
                            <p>{{ ''|trans }}{{ shipping.name01 }} {{ shipping.name02 }} ({{ shipping.kana01 }} {{ shipping.kana02 }}){{ ' 様'|trans }}</p>
                            <p>{{ '〒'|trans }}{{ shipping.postal_code }} {{ shipping.pref }}{{ shipping.addr01 }}{{ shipping.addr02 }}</p>
                            <p>{{ shipping.phone_number }}</p>
                        </div>
                        <div class="ec-orderDelivery__actions">
                            <div class="ec-selects">
                                {# 定期同梱の場合 #}
                                    {% for orderItem in shipping.productOrderItems %}
                                        {% if orderItem.product['id'] == 42 or orderItem.product['id'] == 40 or orderItem.product['id']  == 38 or orderItem.product['id']  == 34  or orderItem.product['id']  == 21 %}
                                            <p class="text_red p_text">定期同梱の商品はお申込みいただいている定期商品と同梱での発送になります。<br>
				一度のご注文で一回のみの同梱発送になります。<br><br>
                                                宅配便をご選択いただきますが、定期商品の配送方法にて発送させていただきます。</p>
                                        {% endif %}
                                        
                                    {% endfor %}
                                <div class="ec-select">
                                    <label>{{ '配送方法'|trans }}</label>
                                    {{ form_widget(form.Shippings[idx].Delivery, { 'attr': { 'class': 'form-control', 'data-trigger': 'change' }}) }}
                                    {{ form_errors(form.Shippings[idx].Delivery) }}
                                </div>
                                <div class="ec-select ec-select__delivery">
                                    <label>{{ 'お届け日'|trans }}</label>
                                    {{ form_widget(form.Shippings[idx].shipping_delivery_date, {'attr': {'class': 'form-control'}}) }}
                                    {{ form_errors(form.Shippings[idx].shipping_delivery_date) }}
                                </div>
                                <div class="ec-select ec-select__time">
                                    <label>{{ 'お届け時間'|trans }}</label>
                                    {{ form_widget(form.Shippings[idx].DeliveryTime, {'attr': {'class': 'form-control'}}) }}
                                    {{ form_errors(form.Shippings[idx].DeliveryTime) }}
                                </div>
                                <p class="select-ng-msg ec-select">ゆうパケットはお届け日・お届け時間をご指定いただけません。</p>
                            </div>
                        </div>
                    {% endfor %}
                    {# 複数配送先指定は使えないようにする #}
                    {#
                    <div class="ec-orderDelivery__edit">
                        <button type="button" class="ec-inlineBtn" data-trigger="click" data-path="{{ path('shopping_shipping_multiple') }}">{{ 'お届け先を追加する'|trans }}</button>
                    </div>
                    #}
                </div>
                <div class="ec-orderPayment">
                    <div class="ec-rectHeading">
                        <h2>{{ 'お支払方法'|trans }}</h2>
                    </div>
                    
                    {% if(first_shopping) %}{# 初回購入時はメッセージ表示 #}
                        <div class="text_red p_text">{{ Order.name01 }}様　今回は新規ご購入になります。下記で「後払い（郵便局払込票）」を選択された場合、初回のみ「後払い(コンビニ、金融機関)※手数料は弊社負担」、2回目の発送より「後払い（郵便局払込票）」になります。<br> 
                <small>「後払い(コンビニ、金融機関)」のサービスは(株)キャッチボールの運営する「後払い.com(ドットコム)」により提供されます。ご本人様確認や後払い.comサービス利用にあたって、お電話・メールにてご連絡させていただく場合がございます。お客様が当サイトにおいて登録された個人情報および発注内容は、株式会社キャッチボールが行う与信および請求関連業務に必要な範囲のみで株式会社キャッチボールに提供させていただきます。与信結果によっては当サービスをご利用いただけない場合がございます。その場合は、他の決済方法にご変更いただくことになります。</small><br>
                        ご了承ください。詳しくは<a href="shopping_guide">こちら</a>をご覧ください。</div>
                    {% endif %}
                    <div class="ec-radio">
                        {% for key, child in form.Payment %}
                            <div style="display: block;">
                                {% set Payment = form.Payment.vars.choices[key].data %}
                                {{ form_widget(child, { 'attr': { 'data-trigger': 'change' }}) }}
                                {% if Payment.payment_image is not null %}
                                    <p><img src="{{ asset(Payment.payment_image, 'save_image') }}"></p>
                                {% endif %}
                            </div>
                        {% endfor %}
                    </div>
                    <p class="p_text">代金引換　商品代金と送料の合計が1万円未満：330円、1万円以上3万円未満：440円、3万円以上：660円<br>
                    後払い（コンビニ、金融機関）220円</p>
                    <div class="ec-input {{ has_errors(form.Payment) ? ' error' }}">{{ form_errors(form.Payment) }}</div>
                </div>
                {% if BaseInfo.isOptionPoint and Order.Customer is not null %}
                    <div class="ec-orderPayment">
                        <div class="ec-rectHeading">
                            <h2>{{ '利用ポイント'|trans }}</h2>
                        </div>
                        <div class="ec-input {{ has_errors(form.use_point) ? ' error' }}">
                            <p>{{ '%point% pt が利用可能です。'|trans({ '%point%': Order.Customer.Point|number_format }) }}</p>
                            {{ form_widget(form.use_point, { 'attr': { 'type': 'text', 'class': 'form-control', 'data-trigger': 'change' }}) }}
                            {{ form_errors(form.use_point) }}
                        </div>
                    </div>
                {% endif %}
                <div class="ec-orderConfirm">
                    <div class="ec-rectHeading">
                        <h2>{{ 'お問い合わせ'|trans }}</h2>
                    </div>
                    <div class="ec-input">
                        {{ form_widget(form.message, {'attr': {'class': 'form-control', 'placeholder': 'お問い合わせ事項がございましたら、こちらにご入力ください。(3000文字まで)'|trans, 'rows': '6'}}) }}
                        {{ form_errors(form.message) }}
                    </div>
                </div>
            </div>
            <div class="ec-orderRole__summary">
                <div class="ec-totalBox">
                    <dl class="ec-totalBox__spec">
                        <dt>{{ '小計'|trans }}</dt>
                        <dd class="ec-totalBox__specTotal">{{ Order.subtotal|price }}</dd>
                    </dl>
                    <dl class="ec-totalBox__spec">
                        <dt>{{ '手数料'|trans }}</dt>
                        <dd>{{ Order.charge|price }}</dd>
                    </dl>
                    <dl class="ec-totalBox__spec">
                        <dt>{{ '送料'|trans }}</dt>
                        <dd>{{ Order.deliveryFeeTotal|price }}</dd>
                    </dl>
                    {% if Order.taxable_discount < 0 %}
                    <dl class="ec-totalBox__spec">
                        <dt>{{ '値引き'|trans }}</dt>
                        <dd>{{ Order.taxable_discount|price }}</dd>
                    </dl>
                    {% endif %}
                    <div class="ec-totalBox__total">{{ '合計'|trans }}<span class="ec-totalBox__price">{{ Order.taxable_total|price }}</span><span class="ec-totalBox__taxLabel">{{ '税込'|trans }}</span></div>

                {#
                    {% for rate, total in Order.taxable_total_by_tax_rate %}
                    <dl class="ec-totalBox__taxRate">
                        <dt>{{ '税率 %rate% %対象'|trans({ '%rate%': rate }) }}</dt>
                        <dd>{{ total|price }}</dd>
                    </dl>
                    {% endfor %}
                #}
                    {# 税率ごとに金額集計 2020.11 #}
                    {% set calc_tax_rate_result = calc_tax_rate_total(Order) %}
                    <dl class="ec-totalBox__taxRate">
                        <dt>{{ '税率 8 %対象'|trans }}</dt>
                        <dd>{{ calc_tax_rate_result.tax8|price }}</dd>
                    </dl>
                    <dl class="ec-totalBox__taxRate">
                        <dt>{{ '税率 10 %対象'|trans }}</dt>
                        <dd>{{ calc_tax_rate_result.tax10|price }}</dd>
                    </dl>
                
                    {% for item in Order.tax_free_discount_items %}
                        {% if loop.first %}<div class="ec-totalBox__total"></div>{% endif %}
                        <dl class="ec-totalBox__spec">
                            <dt>{{ item.product_name }}</dt>
                            <dd>{{ item.total_price|price }}</dd>
                        </dl>
                    {% endfor %}
                    <div class="ec-totalBox__paymentTotal">{{ 'お支払い合計'|trans }}<span class="ec-totalBox__price">{{ Order.payment_total|price }}</span><span class="ec-totalBox__taxLabel">{{ '税込'|trans }}</span></div>
                    {% if BaseInfo.isOptionPoint and Order.Customer is not null %}
                    <div class="ec-totalBox__pointBlock">
                        <dl class="ec-totalBox__spec">
                            <dt>{{ 'ご利用ポイント'|trans }}</dt>
                            <dd>{{ Order.UsePoint|number_format }} pt</dd>
                        </dl>
                        <dl class="ec-totalBox__spec">
                            <dt><span class="ec-font-bold">{{ '加算ポイント'|trans }}</span></dt>
                            <dd><span class="ec-font-bold">{{ Order.AddPoint|number_format }} pt</span></dd>
                        </dl>
                    </div>
                    {% endif %}
                    <div class="ec-totalBox__btn">
                        <button type="submit" class="ec-blockBtn--action">{{ '確認する'|trans }}</button>
                        <a href="{{ url("cart") }}" class="ec-blockBtn--cancel">{{ 'カートに戻る'|trans }}</a>
                    </div>
                </div>
            </div>
        </div>
    </form>
{% endblock %}