<script>
    $(function () {
        $('.teikiInfo___append').insertAfter($('#order-product'));
        
        // 定期購入・次回の受注データを作成
        $('#next_order').on('click', function() {
            if (confirm("次回の注文データを作成しますか？")){
                $('#form1').append('<input type="hidden" name="mode" value="add_next_periodical">');
                //$('#form1').append('<input type="hidden" name="preodical_id" value="'+{{ Periodical.id }}+'">');
                //document.form1.mode.value = "add_next_periodical";
                document.form1.submit();
            }
        });
    })
</script>

<div class="teikiInfo___append card rounded border-0 mb-4">
    <a id="teikiInfo"></a>
    <div class="card-header">
        <div class="row">
            <div class="col-8">
                <span class="card-title">定期購入商品情報</span>
            </div>
        </div>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-3">
                <span class="card-title">定期ID</span>
            </div>
            <div class="col-9">
                {{ Periodical.id }}
            </div>
        </div>
        <div class="row mt-2">
            <div class="col-3">
                <span class="card-title">継続状況</span>
            </div>
            <div class="col-9">
                <span class="mt-1">
                    {% if Periodical.periodical_status == 1 %}
                        継続
                    {% elseif Periodical.periodical_status == 2 %}
                        休止
                    {% else %}
                        解約
                    {% endif %}
                </span>
            
                <a class="btn btn-ec-regular" data-toggle="modal" data-target="#changePeriodical">継続状況を変更する</a>
                <div class="modal fade" id="changePeriodical" tabindex="-1" role="dialog" aria-labelledby="changePeriodical" aria-hidden="true">
                    <div class="modal-dialog modal-md" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">定期購入継続状況を変更する</h5>
                                <button class="close" type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                            </div>
                            <div class="modal-body">
                                <a class="btn btn-ec-conversion px-5 mb-4 mt-2" href="{{ path('apteq_periodical_admin_order_cahnge_periodical_status', { id : Order.id, status : 1 }) }}">継続</a>
                                <a class="btn btn-ec-conversion px-5 mb-4 mt-2" href="{{ path('apteq_periodical_admin_order_cahnge_periodical_status', { id : Order.id, status : 2 }) }}">休止</a>
                                <a class="btn btn-ec-conversion px-5 mb-4 mt-2" href="{{ path('apteq_periodical_admin_order_cahnge_periodical_status', { id : Order.id, status : 3 }) }}">解約</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row mt-2">
            <div class="col-3">
                <span class="card-title">回数</span>
            </div>
            <div class="col-9">
                 {{ count }}回目 （{{ total_count }}回目の注文まで受付済み）
            </div>
        </div>
        <div class="row mt-2">
            <div class="col-3">
                <span class="card-title">前回発送予定日</span>
            </div>
            <div class="col-9">
                {% if PeriodicalDetail.last_shipping_date is null %}
                    ―
                {% else %}                
                    {{ PeriodicalDetail.last_shipping_date|date_format('', 'Y年m月d日') }}
                {% endif %}
            </div>
        </div>
        <div class="row mt-2">
            <div class="col-3">
                <span class="card-title">今回発送予定日</span>
            </div>
            <div class="col-6"> 
                {% if PeriodicalDetail.this_shipping_date is null %}
                    希望なし
                {% else %} 
                    {{ PeriodicalDetail.this_shipping_date|date_format('', 'Y年m月d日') }}
                {% endif %}                
            </div>
        </div>
        <div class="row mt-2">
            <div class="col-3">
                <span class="card-title">次回発送予定日</span>
            </div>
            <div class="col-9">
                 {{ PeriodicalDetail.next_shipping_date|date_format('', 'Y年m月d日') }}
            </div>
        </div>
        <div class="text-center m-3">
            <a id="next_order" class="btn btn-secondary text-white" href="javascript:;">次回の注文データを発行する</a>
        </div>
    </div>
    
</div>