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

{% set body_class = 'product_page' %}

{% block stylesheet %}
    <style>

        .slick-slider {
            margin-bottom: 30px;
        }

        .slick-dots {
            position: absolute;
            bottom: -45px;
            display: block;
            width: 100%;
            padding: 0;
            list-style: none;
            text-align: center;
        }

        .slick-dots li {
            position: relative;
            display: inline-block;
            width: 20px;
            height: 20px;
            margin: 0 5px;
            padding: 0;

            cursor: pointer;
        }

        .slick-dots li button {
            font-size: 0;
            line-height: 0;
            display: block;
            width: 20px;
            height: 20px;
            padding: 5px;
            cursor: pointer;
            color: transparent;
            border: 0;
            outline: none;
            background: transparent;
        }

        .slick-dots li button:hover,
        .slick-dots li button:focus {
            outline: none;
        }

        .slick-dots li button:hover:before,
        .slick-dots li button:focus:before {
            opacity: 1;
        }

        .slick-dots li button:before {
            content: " ";
            line-height: 20px;
            position: absolute;
            top: 0;
            left: 0;
            width: 12px;
            height: 12px;
            text-align: center;
            opacity: .25;
            background-color: black;
            border-radius: 50%;

        }

        .slick-dots li.slick-active button:before {
            opacity: .75;
            background-color: black;
        }

        .slick-dots li button.thumbnail img {
            width: 0;
            height: 0;
        }

    </style>
{% endblock %}

{% block javascript %}
    <script>
        eccube.classCategories = {{ class_categories_as_json(Product)|raw }};

        // 規格2に選択肢を割り当てる。
        function fnSetClassCategories(form, classcat_id2_selected) {
            var $form = $(form);
            var product_id = $form.find('input[name=product_id]').val();
            var $sele1 = $form.find('select[name=classcategory_id1]');
            var $sele2 = $form.find('select[name=classcategory_id2]');
            eccube.setClassCategories($form, product_id, $sele1, $sele2, classcat_id2_selected);
        }

        {% if form.classcategory_id2 is defined %}
        fnSetClassCategories(
            $('#form1'), {{ form.classcategory_id2.vars.value|json_encode|raw }}
        );
        {% elseif form.classcategory_id1 is defined %}
        eccube.checkStock($('#form1'), {{ Product.id }}, {{ form.classcategory_id1.vars.value|json_encode|raw }}, null);
        {% endif %}
    </script>
    <script>
        $(function() {
            // bfcache無効化
            $(window).bind('pageshow', function(event) {
                if (event.originalEvent.persisted) {
                    location.reload(true);
                }
            });

            $('.item_visual').slick({
                dots: false,
                arrows: false,
                responsive: [{
                    breakpoint: 768,
                    settings: {
                        dots: true
                    }
                }]
            });

            $('.slideThumb').on('click', function() {
                var index = $(this).attr('data-index');
                $('.item_visual').slick('slickGoTo', index, false);
            })
        });
    </script>
    <script>
        $(function() {
            $('.add-cart').on('click', function(event) {
                {% if form.classcategory_id1 is defined %}
                // 規格1フォームの必須チェック
                if ($('#classcategory_id1').val() == '__unselected' || $('#classcategory_id1').val() == '') {
                    $('#classcategory_id1')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
                    return true;
                } else {
                    $('#classcategory_id1')[0].setCustomValidity('');
                }
                {% endif %}

                {% if form.classcategory_id2 is defined %}
                // 規格2フォームの必須チェック
                if ($('#classcategory_id2').val() == '__unselected' || $('#classcategory_id2').val() == '') {
                    $('#classcategory_id2')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
                    return true;
                } else {
                    $('#classcategory_id2')[0].setCustomValidity('');
                }
                {% endif %}

                // 個数フォームのチェック
                if ($('#quantity').val() < 1) {
                    $('#quantity')[0].setCustomValidity('{{ '1以上で入力してください。'|trans }}');
                    return true;
                } else {
                    $('#quantity')[0].setCustomValidity('');
                }

                event.preventDefault();
                $form = $('#form1');
                $.ajax({
                    url: $form.attr('action'),
                    type: $form.attr('method'),
                    data: $form.serialize(),
                    dataType: 'json',
                    beforeSend: function(xhr, settings) {
                        // Buttonを無効にする
                        $('.add-cart').prop('disabled', true);
                    }
                }).done(function(data) {
                    // レスポンス内のメッセージをalertで表示
                    $.each(data.messages, function() {
                        $('#ec-modal-header').html(this);
                    });

                    $('#ec-modal-checkbox').prop('checked', true);

                    // カートブロックを更新する
                    $.ajax({
                        url: "{{ url('block_cart') }}",
                        type: 'GET',
                        dataType: 'html'
                    }).done(function(html) {
                        $('.ec-headerRole__cart').html(html);
                    });
                }).fail(function(data) {
                    alert('{{ 'カートへの追加に失敗しました。'|trans }}');
                }).always(function(data) {
                    // Buttonを有効にする
                    $('.add-cart').prop('disabled', false);
                });
            });
        });
    </script>
{% endblock %}

{% block main %}
    <div class="ec-productRole">
        <div class="text-center">
            </br>
            {# 商品名 #}
            <div class="ec-productRole__title">
                <p>{{ Product.description_list|raw|nl2br }}</p>
                <h2 class="ec-headingTitle">{{ Product.name }}</h2>
            </div>
            {# タグ #}
            <ul class="ec-productRole__tags">
                {% for Tag in Product.Tags %}
                    <li class="ec-productRole__tag tag_{{ Tag.id }}">{{ Tag }}</li>
                {% endfor %}
            </ul>
        </div>
        <div class="ec-grid2">
            <div class="ec-grid2__cell">
                <div class="ec-sliderItemRole">
                    <div class="item_visual">
                        {% for ProductImage in Product.ProductImage %}
                            <div class="slide-item"><img src="{{ asset(ProductImage, 'save_image') }}"></div>
                        {% else %}
                            <div class="slide-item"><img src="{{ asset(''|no_image_product, 'save_image') }}"/></div>
                        {% endfor %}
                    </div>
                    <div class="item_nav">
                        {% for ProductImage in Product.ProductImage %}
                            <div class="slideThumb" data-index="{{ loop.index0 }}"><img src="{{ asset(ProductImage, 'save_image') }}"></div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            <div class="ec-grid2__cell">
                <div class="ec-productRole__profile">
                    <div class="ec-productRole__description">{{ Product.description_detail|raw }}
                    </div>
                    {# 通常価格 #}
                    {% if Product.hasProductClass -%}
                        <div class="ec-productRole__priceRegular">
                            {% if Product.getPrice01Min is not null and Product.getPrice01IncTaxMin == Product.getPrice01IncTaxMax %}
                                <span class="ec-productRole__priceRegularPrice">{{ '通常価格'|trans }}：<span class="price01-default">{{ Product.getPrice01IncTaxMin|price }}</span></span>
                                <span class="ec-productRole__priceRegularTax"> ({% if is_reduced_tax_product(Product.id) %}8{% else %}10{% endif %}%{{ '税込'|trans }})</span>
                            {% elseif Product.getPrice01Min is not null and Product.getPrice01Max is not null %}
                                <span class="ec-productRole__priceRegularPrice">{{ '通常価格'|trans }}：<span class="price01-default">{{ Product.getPrice01IncTaxMin|price }}～ {{ Product.getPrice01IncTaxMax|price }}</span></span>
                                <span class="ec-productRole__priceRegularTax"> ({% if is_reduced_tax_product(Product.id) %}8{% else %}10{% endif %}%{{ '税込'|trans }})</span>
                            {% endif %}
                        </div>
                    {% else %}
                        {% if Product.getPrice01Max is not null %}
                            <span class="ec-productRole__priceRegularPrice">{{ '通常価格'|trans }}：{{ Product.getPrice01IncTaxMin|price }}</span>
                            <span class="ec-productRole__priceRegularTax"> ({% if is_reduced_tax_product(Product.id) %}8{% else %}10{% endif %}%{{ '税込'|trans }})/span>
                        {% endif %}
                    {% endif %}
                    {# 販売価格 #}
                    <div class="ec-productRole__price">
                        {% if Product.hasProductClass -%}
                            {% if Product.getPrice02IncTaxMin == Product.getPrice02IncTaxMax %}
                                <div class="ec-price">
                                    <span class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }}</span>
                                    <span class="ec-price__tax"> ({% if is_reduced_tax_product(Product.id) %}8{% else %}10{% endif %}%{{ '税込'|trans }})</span>
                                </div>
                            {% else %}
                                <div class="ec-price">
                                    <span class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }} ～ {{ Product.getPrice02IncTaxMax|price }}</span>
                                    <span class="ec-price__tax"> ({% if is_reduced_tax_product(Product.id) %}8{% else %}10{% endif %}%{{ '税込'|trans }})</span>
                                </div>
                            {% endif %}
                        {% else %}
                            <div class="ec-price">
                                <span class="ec-price__price">{{ Product.getPrice02IncTaxMin|price }}</span>
                                <span class="ec-price__tax"> ({% if is_reduced_tax_product(Product.id) %}8{% else %}10{% endif %}%{{ '税込'|trans }})</span>
                            </div>
                        {% endif %}
                    </div>
                    {# 商品コード #}
                    {% if Product.code_min is not empty %}
                        <div class="ec-productRole__code">
                            {{ '商品コード'|trans }}： <span class="product-code-default">{{ Product.code_min }}{% if Product.code_min != Product.code_max %} ～ {{ Product.code_max }}{% endif %}</span>
                        </div>
                    {% endif %}
                    {# 関連カテゴリ #}
                    {#
                    {% if Product.ProductCategories is not empty %}
                        <div class="ec-productRole__category">
                            <div>{{ '関連カテゴリ'|trans }}</div>
                            {% for ProductCategory in Product.ProductCategories %}
                                <ul>
                                    <li>
                                        {% for Category in ProductCategory.Category.path %}
                                            <a href="{{ url('product_list') }}?category_id={{ Category.id }}">{{ Category.name }}</a> {%- if loop.last == false %}
                                            <span>＞</span>{% endif -%}
                                        {% endfor %}
                                    </li>
                                </ul>
                            {% endfor %}
                        </div>
                    {% endif %}
                    #}
                    <form action="{{ url('product_add_cart', {id:Product.id}) }}" method="post" id="form1" name="form1">
                        {% if Product.stock_find %}
                            <div class="ec-productRole__actions">
                                {% if form.classcategory_id1 is defined %}
                                    <div class="ec-select">
                                        {{ form_widget(form.classcategory_id1) }}
                                        {{ form_errors(form.classcategory_id1) }}
                                    </div>
                                    {% if form.classcategory_id2 is defined %}
                                        <div class="ec-select">
                                            {{ form_widget(form.classcategory_id2) }}
                                            {{ form_errors(form.classcategory_id2) }}
                                        </div>
                                    {% endif %}
                                {% endif %}
                                {% if Product.id != 4 and Product.id != 5 and Product.id != 15 and Product.id != 16 and Product.id != 19 and Product.id != 20 and Product.id != 33 and Product.id != 34 %}
                                    <div class="ec-numberInput"><span>{{ '数量'|trans }}</span>
                                        {{ form_widget(form.quantity) }}
                                        {{ form_errors(form.quantity) }}
                                    </div>
                                {% else %}
                                    <div class="ec-numberInput" style="display:none;">
                                        {{ form_widget(form.quantity, {'value' : '1'}) }}
                                        {{ form_errors(form.quantity) }}
                                    </div>
                                {% endif %}
                            </div>
                            <div class="ec-productRole__btn">
                                <button type="submit" class="ec-blockBtn--action add-cart">
                                    {{ 'カートに入れる'|trans }}
                                </button>
                            </div>
                        {% else %}
                            <div class="ec-productRole__btn">
                                <button type="button" class="ec-blockBtn--action" disabled="disabled">
                                    {{ 'ただいま品切れ中です。'|trans }}
                                </button>
                            </div>
                        {% endif %}

                        {{ form_rest(form) }}
                    </form>
                    <div class="ec-modal">
                        <input type="checkbox" id="ec-modal-checkbox" class="checkbox">
                        <div class="ec-modal-overlay">
                            <label for="ec-modal-checkbox" class="ec-modal-overlay-close"></label>
                            <div class="ec-modal-wrap">
                                <label for="ec-modal-checkbox" class="ec-modal-close"><span class="ec-icon"><img src="{{ asset('assets/icon/cross-dark.svg') }}" alt=""/></span></label>
                                <div id="ec-modal-header" class="text-center">{{ 'カートに追加しました。'|trans }}</div>
                                <div class="ec-modal-box">
                                    <div class="ec-role">
                                        <label for="ec-modal-checkbox" class="ec-inlineBtn--cancel">{{ 'お買い物を続ける'|trans }}</label>
                                        <a href="{{ url('cart') }}" class="ec-inlineBtn--action">{{ 'カートへ進む'|trans }}</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    {# 定期同梱ボタン #}
                    {% if Product.id == "33" %}
                        <p class="ec-blockBtn--action orange_btn doukon_btn">
						    <a href="{{ url('product_detail', {'id': 34}) }}">定期同梱はこちら<span class="glyphicon glyphicon-play" aria-hidden="true"></span></a>
						</p>
                    {% elseif Product.id == "37" %}
                        <p class="ec-blockBtn--action orange_btn doukon_btn">
						    <a href="{{ url('product_detail', {'id': 38}) }}">定期同梱はこちら<span class="glyphicon glyphicon-play" aria-hidden="true"></span></a>
						</p>
                    {% elseif Product.id == "39" %}
                        <p class="ec-blockBtn--action orange_btn doukon_btn">
						    <a href="{{ url('product_detail', {'id': 40}) }}">定期同梱はこちら<span class="glyphicon glyphicon-play" aria-hidden="true"></span></a>
						</p>
                    {% elseif Product.id == "41" %}
                           <p class="ec-blockBtn--action orange_btn doukon_btn">
						    <a href="{{ url('product_detail', {'id': 42}) }}">定期同梱はこちら<span class="glyphicon glyphicon-play" aria-hidden="true"></span></a>
						</p>
                    {% endif %}
                    
                    
                    <p><br />※当サイトでのご購入が初めての場合は<br/>後払い（郵便局払込票）及び【有料】代金引換はご利用できません。</p>

                    {% if BaseInfo.option_favorite_product %}
                        <form action="{{ url('product_add_favorite', {id:Product.id}) }}" method="post">
                            <div class="ec-productRole__btn">
                                {% if is_favorite == false %}
                                    <button type="submit" id="favorite" class="ec-blockBtn--cancel">
                                        {{ 'お気に入りに追加'|trans }}
                                    </button>
                                {% else %}
                                    <button type="submit" id="favorite" class="ec-blockBtn--cancel"
                                            disabled="disabled">{{ 'お気に入りに追加済です。'|trans }}
                                    </button>
                                {% endif %}
                            </div>
                        </form>
                    {% endif %}
                    
                </div>
            </div>
        </div>
        
        {% set teikiari_list = [4,5,19,43] %}
        {% set teiki_list = [15,16,20,44] %}
        {% if Product.id in teikiari_list %}
            <div id="teiki_area_teiki" class="sub_area clearfix">
				<h3 class="text_orange">便利でお得な定期購入とは・・・？</h3>
				<div class="detail">
					<p class="subtext">
						定期購入とは、その都度ご注文いただかなくても、ご希望の商品が毎月1回自動的に届く便利な制度です。<br/>
						毎日続けて、健康を実感してください。
					</p>
                    <a href="{{ asset('assets/img/common/img_teiki_flow.gif') }}" target="_blank" class="no_pointer"><img class="img_teiki_flow" src="{{ asset('assets/img/common/img_teiki_flow.gif') }}" alt="定期購入の流れ" /></a>
					
					<!--{*プラス*}-->
					{% if Product.id == '4' %}
                        <a href="{{ asset('assets/img/common/img_teiki_price.jpg') }}" target="_blank" class="no_pointer"><img class="img_teiki_price" src="{{ asset('assets/img/common/img_teiki_price.jpg') }}" alt="定期購入はこんなにお得！" /></a>
                        <p class="ec-blockBtn--action">
						    <a href="{{ url('product_detail', {'id': 15}) }}">定期購入はこちら<span class="glyphicon glyphicon-play" aria-hidden="true"></span></a>
						</p>
                    <!--{*フローラル*}-->
					{% elseif Product.id == '5' %}
                        <a href="{{ asset('assets/img/common/img_teiki_price_f.jpg') }}" target="_blank" class="no_pointer"><img class="img_teiki_price" src="{{ asset('assets/img/common/img_teiki_price_f.jpg') }}" alt="定期購入はこんなにお得！" /></a>
                        <p class="ec-blockBtn--action">
						    <a href="{{ url('product_detail', {'id': 16}) }}">定期購入はこちら<span class="glyphicon glyphicon-play" aria-hidden="true"></span></a>
						</p>
                    <!--{*ファミリー*}-->
					{% elseif Product.id == '19' %}
                        <a href="{{ asset('assets/img/common/img_teiki_price_f.jpg') }}" target="_blank" class="no_pointer"><img class="img_teiki_price" src="{{ asset('assets/img/common/img_teiki_price_f.jpg') }}" alt="定期購入はこんなにお得！" /></a>
                        <p class="ec-blockBtn--action">
						    <a href="{{ url('product_detail', {'id': 20}) }}">定期購入はこちら<span class="glyphicon glyphicon-play" aria-hidden="true"></span></a>
						</p>
                    <!--{*フェムソイ*}-->
					{% elseif Product.id == '43' %}
                        <p class="ec-blockBtn--action">
						    <a href="{{ url('product_detail', {'id': 44}) }}">定期購入はこちら<span class="glyphicon glyphicon-play" aria-hidden="true"></span></a>
						</p>
                    {% endif %}
				</div>
			</div>
			<div class="handbook text-right">
				<img src="{{ asset('assets/img/common/handbook.gif') }}" alt="ハンドブック" />
			</div>
		{% endif %}
		{% if Product.id in teiki_list %}
		    <div id="teiki_area_teiki" class="sub_area clearfix">
				<h3 class="text_orange">便利でお得な定期購入とは・・・？</h3>
				<div class="detail">
					<p class="subtext">
						定期購入とは、その都度ご注文いただかなくても、ご希望の商品が毎月1回自動的に届く便利な制度です。<br/>
						毎日続けて、健康を実感してください。
					</p>
					<a href="{{ asset('assets/img/common/img_teiki_flow.gif') }}" target="_blank" class="no_pointer"><img class="img_teiki_flow" src="{{ asset('assets/img/common/img_teiki_flow.gif') }}" alt="定期購入の流れ" /></a>
					
					<!--{*プラス*}-->
					{% if Product.id == '15' %}
					    <a href="{{ asset('assets/img/common/img_teiki_price.jpg') }}" target="_blank" class="no_pointer"><img class="img_teiki_price" src="{{ asset('assets/img/common/img_teiki_price.jpg') }}" alt="定期購入はこんなにお得！" /></a>
                    <!--{*フローラル*}-->
					{% elseif Product.id == '16' %}
					<a href="{{ asset('assets/img/common/img_teiki_price_f.jpg') }}" target="_blank" class="no_pointer"><img class="img_teiki_price" src="{{ asset('assets/img/common/img_teiki_price_f.jpg') }}" alt="定期購入はこんなにお得！" /></a>
					<!--{/if}-->
					{% endif %}
					<!-- 送料比較表追加　201403 変更 201703 -->
					<table id="d_fee">
						<caption>送料比較表</caption>
						<tr>
							<th></th>
							<th>単品購入</th>
							<th>定期購入</th>
						</tr>						

						<tr>
							<td>ゆうパケット</td>
							<td>３００円</td>
							<td>０円</td>
						</tr>
                        
                        <tr>
							<td>宅配便</td>
							<td>５１０円</td>
							<td>３箱から送料無料</td>
						</tr>
						
					</table>
				※<a href="{{ url(eccube_config.eccube_user_data_route, {'route': 'shopping_guide'}) }}#deliv_fee">"ゆうパケットについて</a>をご覧の上ご利用下さいませ。<br /><br />
				
					<p class="subtext text-left">
						※　発送日が土・日・祝日の場合は、翌営業日の発送となります。<br/>
						　　（商品の到着は、お住まいの地域によって異なります。）<br/>
						※　定期購入をお申し込み頂いても、特に何ヶ月以上購入を続けないといけないという制約はございません。<br/>
						    　次回定期購入日に自動的に商品が発送されてしまいますので、キャンセルされたい場合は<br/>
						　　次回発送予定日の1週間前までにご連絡下さい。<br/>
						※　定期購入のご解約は、メールもしくはお電話にて承ります。次回発送予定日の1週間前までにお知らせください。<br/>
						※　数量・お届け日時などに変更がある場合は、ご遠慮なくお申し付けください。<br/>
						　　電話番号：0120-160-312<br/>
						　　受付時間：平日10：00～18：00<br/>
					</p>
				</div>
			
			</div>
		
		{% endif %}
        
        <br/><br/>
        {% if Product.freearea %}
             <div class="ec-productRole__description">
                 {{ include(template_from_string(Product.freearea)) |raw|nl2br}}
            </div>
        {% endif %}
    </div>
{% endblock %}