{% extends 'default_frame.twig' %}

{% set body_class = 'mypage' %}

{% block javascript %}
    <script>
        $(function () {
            // 定期購入休止手続きをする
            $('#pause').on('click', function() {
                if (confirm("定期購入休止手続きをしますか？")){
                    $('#form').append('<input type="hidden" name="mode" value="pause_confirm">');
                    document.form.submit();
                }
            });
        })
    </script>
{% endblock %}

{% block main %}
{# ヘッダーとりあえず直書き　カートの中は無理そうなので表示しない #}

    <div class="ec-layoutRole__header">
        <!-- ▼ロゴ -->
        <div id="header_logo" class="ec-headerRole">
            <div class="ec-headerRole__title">
                <div class="ec-headerTitle">
                    <div class="ec-headerTitle__title">
                        <h1>
                            <a href="https://www.probiotech.jp/" class="text-left">
                                <img src="/html/template/default/assets/img/common/logo.png" alt="マメビオショップ">
                            </a>
                        </h1>
                    </div>
                </div>
            </div>
        </div>
        <div id="header_top" class="ec-headerNaviRole">
            <div class="ec-headerRole__navSP">            
                <div class="ec-headerNavSP">
                    <i class="fas fa-bars"></i>
                </div>
            </div>
        </div>
        <!-- ▼ヘッダーメニュー -->
        <div id="header_menu" class="ec-headerNaviRole pc">
            <a class="" href="https://www.probiotech.jp/">
                HOME
            </a>
            <a class="" href="https://www.probiotech.jp/products/list">
                商品一覧
            </a>
            <a class="" href="https://www.probiotech.jp/user_data/about_chonaisaikin">
                腸内細菌について
            </a>
            <a class="" href="https://www.probiotech.jp/user_data/about_mamebio">
                マメビオとは
            </a>
            <a class="" href="https://www.probiotech.jp/user_data/media">
                メディア掲載
            </a>
            <a class="" href="https://www.probiotech.jp/user_data/shopping_guide">
                お買い物ガイド
            </a>
            <a class="" href="https://www.probiotech.jp/user_data/comment">
                ご愛用者の声
            </a>
            <a class="" href="https://www.probiotech.jp/user_data/faq">
                よくある質問
            </a>
        </div>
        <!-- ▲ヘッダーメニュー -->
    </div> 

{# ヘッダーここまで #}

    <div class="ec-layoutRole__main main_periodical_pause">
        <form name="form" id="form" method="get" action="?">
            <input type="hidden" name="cid" value="{{ customer_id }}">   
            <div class="ec-mypageRole">
                <div class="ec-pageHeader">
                    <h1>{{ 'マイページ'|trans }}/{{ '定期購入休止手続き'|trans }}</h1>
                </div>
                {% include 'Mypage/navi.twig' %}
            </div>
            <div class="ec-mypageRole text-center">
                {% if Periodicals is empty %}
                    継続中の定期購入はございません。<br><br>
                    <a href="{{ url('mypage') }}">{{ 'マイページトップへ'|trans }}</a>
                {% elseif pause_end %}
                    定期購入の休止手続きを受け付けました。<br><br>
                    <a href="{{ url('mypage') }}">{{ 'マイページトップへ'|trans }}</a>
                {% else %}
                    次回発送分より、定期購入の休止手続きをさせて頂きます。<br>
                    次回発送予定日の7日前までにお申し込みください。<br>
                    7日前を過ぎますと、次回発送分の休止手続きが出来ない場合がございます。ご了承ください。<br>
                    再開される場合はお電話もしくはメールにてご連絡ください。<br><br>

                    <a id="pause" class="ec-blockBtn--action load-overlay" href="javascript:;">定期購入休止手続きをする</a>
                {% endif %}

                {#
                {% if Periodicals is not empty %}
                    {% for Periodical in Periodicals %}
                        {{ Periodical.id }} *** 
                        {{ Periodical.classcategory_name01 }} ***
                        {{ Periodical.classcategory_name02 }} <br>
                    {% endfor %}
                {% endif %}
                #}
            </div>
        </form>
    </div>

{# spナビ　とりあえず直置き #}
<div class="ec-overlayRole"></div>
<div class="ec-drawerRoleClose"><i class="fas fa-times"></i></div>
<div class="ec-drawerRole">
    <!-- ▼ログインナビ(SP) -->
            
    <div class="ec-headerLinkArea">
        <ul id="sp_menu" class="">
            <li><a class="" href="https://www.probiotech.jp/">HOME</a></li>
            <li><a class="" href="https://www.probiotech.jp/products/list">商品一覧</a></li>
            <li><a class="" href="https://www.probiotech.jp/user_data/about_chonaisaikin">腸内細菌について</a></li>
            <li><a class="" href="https://www.probiotech.jp/user_data/about_mamebio">マメビオとは</a></li>
            <li><a class="" href="https://www.probiotech.jp/user_data/media">メディア掲載</a></li>
            <li><a class="" href="https://www.probiotech.jp/user_data/shopping_guide">お買い物ガイド</a></li>
            <li><a class="" href="https://www.probiotech.jp/user_data/comment">ご愛用者の声</a></li>
            <li><a class="" href="https://www.probiotech.jp/user_data/faq">よくある質問</a></li>
        </ul>
    </div>
    <!-- ▲ログインナビ(SP) -->
</div>

{# フッターとりあえず直書き #}
<div class="ec-layoutRole__footer">
    <!-- ▼フッター -->
    <div class="ec-footerRole">
        <div class="ec-footerRole__inner">
            <ul class="ec-footerNavi">
                <li class="ec-footerNavi__link">
                    <a href="https://probiotech2.sakura.ne.jp/mamebio/help/about">会社概要</a>
                </li>
                <li class="ec-footerNavi__link">
                    <a href="https://probiotech2.sakura.ne.jp/mamebio/help/privacy">プライバシーポリシー</a>
                </li>
                <li class="ec-footerNavi__link">
                    <a href="https://probiotech2.sakura.ne.jp/mamebio/help/tradelaw">特定商取引法に基づく表記</a>
                </li>
                <li class="ec-footerNavi__link">
                    <a href="https://probiotech2.sakura.ne.jp/mamebio/contact">お問い合わせ</a>
                </li>
            </ul>
            <div class="ec-footerTitle">
                <div class="ec-footerTitle__logo">
                    <a href="https://probiotech2.sakura.ne.jp/mamebio/">マメビオショップ</a>
                </div>
                <div class="ec-footerTitle__copyright">copyright (c) マメビオショップ all rights reserved.</div>
            </div>
        </div>
    </div>
</div>
{# フッターここまで #}
{% endblock %}