<script>
    $(function(){
        $('.ec-orderOrder').first().after($('#remise_payment4_autochrage'));
    });
</script>
<div class="d-none">
    <div id="remise_payment4_autochrage">
        <!--タイトル-->
        <div class="ec-rectHeading">
            <h2>{{ 'remise_payment4.ac.front.mypage_history_autocharge.label.title'|trans }}</h2>
        </div>
        <!--購買情報-->
        <div class="row" style="padding-bottom:5px;">
            <label class="col-sm-10">{{ 'remise_payment4.ac.front.mypage_history_autocharge.label.sub_title.autocharge_info'|trans }}</label>
        </div>
        <!--メンバーID-->
        <div class="row" style="padding-bottom:5px;">
            <div class="col-sm-3">{{ 'remise_payment4.ac.front.mypage_history_autocharge.label.member_id'|trans }}</div>
            <div class="col-sm-7">{{ RemiseACMember.getId }}</div>
        </div>
        <!--定期購買金額-->
        <div class="row" style="padding-bottom:5px;">
            <div class="col-sm-3">{{ 'remise_payment4.ac.front.mypage_history_autocharge.label.total'|trans }}</div>
            <div class="col-sm-7">{{ RemiseACMember.getTotal|price }}</div>
        </div>
        <!--課金開始日-->
        <div class="row" style="padding-bottom:5px;">
            <div class="col-sm-3">{{ 'remise_payment4.ac.front.mypage_history_autocharge.label.start_date'|trans }}</div>
            <div class="col-sm-7">{{ RemiseACMember.getStartDate|date("Y/m/d") }}</div>
        </div>
        {% if RemiseACMember.isLimitless == false %}
        <!--購買回数-->
        <div class="row" style="padding-bottom:5px;">
            <div class="col-sm-3">{{ 'remise_payment4.ac.front.mypage_history_autocharge.label.count'|trans }}</div>
            <div class="col-sm-7">{{ RemiseACMember.getCount }}</div>
        </div>
        {% endif %}
        <!--課金間隔-->
        <div class="row" style="padding-bottom:5px;">
            <div class="col-sm-3">{{ 'remise_payment4.ac.front.mypage_history_autocharge.label.interval'|trans }}</div>
            {% if RemiseACMember.getIntervalMark == 'remise_payment4.ac.plg_remise_payment4_remise_ac_type.interval_marks.m.key'|trans %}
            <div class="col-sm-7">{{ RemiseACMember.getIntervalValue }}{{ 'remise_payment4.ac.plg_remise_payment4_remise_ac_type.interval_marks.m.value'|trans }}</div>
            {% elseif RemiseACMember.getIntervalMark == 'remise_payment4.ac.plg_remise_payment4_remise_ac_type.interval_marks.d.key'|trans %}
            <div class="col-sm-7">{{ RemiseACMember.getIntervalValue }}{{ 'remise_payment4.ac.plg_remise_payment4_remise_ac_type.interval_marks.d.value'|trans }}</div>
            {% endif %}
        </div>
        {% if RemiseACMember.isStatus and useKeizokuEditExtend and useKeizokuResultExtend %}
        <!--次回課金日-->
        <div class="row" style="padding-bottom:5px;">
            <div class="col-sm-3">{{ 'remise_payment4.ac.front.mypage_history_autocharge.label.next_date'|trans }}</div>
            <div class="col-sm-7">{{ RemiseACMember.getNextDate|date("Y/m/d") }}</div>
        </div>
        {% endif %}
        {% if RemiseACMember.isStatus and RemiseACMember.getStopDate %}
        <!--課金停止予定日-->
        <div class="row" style="padding-bottom:5px;">
            <div class="col-sm-3">{{ 'remise_payment4.ac.front.mypage_history_autocharge.label.stop_date'|trans }}</div>
            <div class="col-sm-7">{{ RemiseACMember.getStopDate|date("Y/m/d") }}</div>
        </div>
        {% endif %}
        {% if RemiseACMember.isStatus and useKeizokuEditExtend and useKeizokuResultExtend and RemiseACMember.getSkip == 1 %}
        <!--スキップボタン-->
        <div class="row" style="padding-bottom:5px;">
            <div class="col-sm-3">{{ 'remise_payment4.ac.front.mypage_history_autocharge.label.skip'|trans }}</div>
            <div class="col-sm-7">
            {% if skippingFlg == 1 %}
                <a href="{{ url('remise_payment4_ac_mypage_skip',{order_id:Order.getId}) }}" class="btn btn-default btn-sm">{{ 'remise_payment4.ac.front.mypage_history_autocharge.label.skip_button'|trans }}</a>
            {% else %}
                <button class="btn btn-default btn-sm" disabled>{{ 'remise_payment4.ac.front.mypage_history_autocharge.label.skip_button'|trans }}</button>
            {% endif %}
            </div>
        </div>
        {% endif %}
        {% if RemiseACMember.getStop == 2 %}
        <!--最低利用期間-->
        <div class="row" style="padding-bottom:5px;">
            <div class="col-sm-3">{{ 'remise_payment4.ac.front.mypage_history_autocharge.label.usage'|trans }}</div>
            <div class="col-sm-7">
            {% if 'remise_payment4.ac.plg_remise_payment4_remise_ac_type.usage_mark.m.key'|trans == RemiseACMember.getUsageMark %}
                {{ RemiseACMember.getUsageValue }}{{ 'remise_payment4.ac.plg_remise_payment4_remise_ac_type.usage_mark.m.value'|trans }}
            {% elseif 'remise_payment4.ac.plg_remise_payment4_remise_ac_type.usage_mark.d.key'|trans == RemiseACMember.getUsageMark %}
                {{ RemiseACMember.getUsageValue }}{{ 'remise_payment4.ac.plg_remise_payment4_remise_ac_type.usage_mark.d.value'|trans }}
            {% endif %}
            </div>
        </div>
        {% endif %}
        {% if RemiseACMember.isStatus %}
        {%   if RemiseACMember.getStop != 1 %}
        <!--解約について-->
        <div class="row" style="padding-bottom:2px;">
            <div class="col-sm-3">{{ 'remise_payment4.ac.front.mypage_history_autocharge.label.stop'|trans }}</div>
            <div class="col-sm-7">{{ dispAcStopFlg }}</div>
        </div>
        {%   endif %}
        {% else %}
        <!--解約状態-->
        <div class="row" style="padding-bottom:2px;">
            <div class="col-sm-3">{{ 'remise_payment4.ac.front.mypage_history_autocharge.label.status'|trans }}</div>
            <div class="col-sm-7"><span style="color:#ff0000;">{{ 'remise_payment4.ac.front.mypage_history_autocharge.label.stoped'|trans }}</span></div>
        </div>
        {% endif %}
        {% if refusalFlg != 0 %}
        <!--解約ボタン-->
        <div class="row" style="padding-bottom:8px;">
            <div class="col-sm-offset-3 col-sm-7">
            {% if refusalFlg == 1 %}
                <a href="{{ url('remise_payment4_ac_mypage_cancel',{order_id:Order.getId}) }}" class="btn btn-default btn-sm">{{ 'remise_payment4.ac.front.mypage_history_autocharge.label.stop_button'|trans }}</a>
            {% elseif refusalFlg == 2 %}
                <button class="btn btn-default btn-sm" disabled>{{ 'remise_payment4.ac.front.mypage_history_autocharge.label.stop_button'|trans }}</button>
            {% endif %}
            </div>
        </div>
        {% endif %}

        {% if RemiseACMember.isStatus %}
        <!--カード情報-->
        <div class="row" style="padding-top:15px; padding-bottom:5px;">
            <label class="col-sm-10">{{ 'remise_payment4.ac.front.mypage_history_autocharge.label.sub_title.card_info'|trans }}</label>
        </div>
        {%   if RemiseACMember.getCardparts != "" %}
        <!--カード番号-->
        <div class="row" style="padding-bottom:5px;">
            <div class="col-sm-3">{{ 'remise_payment4.ac.front.mypage_history_autocharge.label.cardparts'|trans }}</div>
            <div class="col-sm-7">{{ RemiseACMember.getCardpartsProcessing }}</div>
        </div>
        <!--有効期限-->
        <div class="row" style="padding-bottom:5px;">
            <div class="col-sm-3">{{ 'remise_payment4.ac.front.mypage_history_autocharge.label.expire'|trans }}</div>
            <div class="col-sm-7">{{ RemiseACMember.getExpireProcessing }}</div>
        </div>
        {%   endif %}
        <!--カード情報更新ボタン-->
        <div class="row" style="padding-bottom:8px;">
            <div class="col-sm-offset-3 col-sm-7">
                <a href="{{ url('remise_payment4_ac_mypage_card_update',{order_id:Order.getId}) }}" class="btn btn-default btn-sm">{{ 'remise_payment4.ac.front.mypage_history_autocharge.label.card_update_button'|trans }}</a>
            </div>
        </div>
        {% endif %}

    </div>
</div>
