@extends('layout.admin.main')
@section('title','契約詳細（お支払い期間の変更）')
@push('css')
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
    <link rel="stylesheet" href="/_assets/modules/bill/css/card.css?v={{config("sns-line.version")}}" type="text/css">
@endpush
@section('content')
    <section id="card" v-cloak>
        <div class="flex-space-between page-title-section" style="margin: 20px 0">
            <div class="col-md-6" style="padding-left: 0">
                <nav class="breadcrumb breadcrumb01">
                    <ul>
                        <li><a href="/basic/point-settings">契約情報・領収書</a></li>
                        <li><a href="#" @click="redirectPage('back')">契約詳細</a></li>
                        <li>お支払い期間の変更</li>
                    </ul>
                </nav>
            </div>
        </div>
        <div style="font-size: 24px; font-weight: 600; color: #222222">お支払い期間の変更</div>
        <div class="card-content">
            @include('basic.bill.components.step')
            <div class="content">
                <card v-if="botContract.payment_method == 2 && step_active == 1 && steps[1].status == STATUS.PROCESSING"
                      :contract="botContract"
                      :card_type="type"
                      :flag_show_univapay="flagShowUnivapay"
                      @push_error="pushError"
                      @push_success="pushSuccess"
                      @redirect_page="redirectPage"
                >
                </card>
                <div v-if="step_active == 0 && steps[0].status == STATUS.PROCESSING" class="success">
                    <div class="confirm-card">
                        <div class="font-w-bold font-s20 color-text mb-3 text-center">お支払い期間変更の確認</div>
                        <div class="info-card">
                            <div class="item d-flex justify-content-center align-items-center">
                                <span class="font-s14 font-w-normal color-gray1" style="min-width: 130px">対象アカウント</span>
                                <span class="font-s14 font-w-bold color-text d-flex align-items-center account-info">
                                    <img style="width: 26px; height: 26px; border-radius: 50%; margin-right: 5px" :src="botContract.bot_image ? botContract.bot_image : '/images/user-outlined.svg'" alt="">
                                    <lme-tooltip position="top" class_name="lme-tooltip-account"
                                                 :content="(botContract.contract_type == 'enterprise' || botContract.contract_type == 'enterprise_pro') ? 'おまとめ割引' : (botContract.view_name ?? 'LINE公式アカウント未接続')">
                                        <span class="account-name" @mouseenter="checkAccountNameTruncation($event)">@{{ (botContract.contract_type == 'enterprise' || botContract.contract_type == 'enterprise_pro') ? 'おまとめ割引' : (botContract.view_name ?? 'LINE公式アカウント未接続') }}</span>
                                    </lme-tooltip>
                                </span>
                            </div>
                            <div class="item">
                                <span class="font-s14 font-w-normal color-gray1">ご契約プラン</span>
                                <span class="font-s14 font-w-bold color-text">@{{ contractType(botContract.contract_type) }}</span>
                            </div>
                            <div class="item">
                                <span class="font-s14 font-w-normal color-gray1">ご利用料金</span>
                                <span class="font-s14 font-w-bold color-text">@{{ formatMoneyPayment() }}</span>
                            </div>
                            <div class="item" style="background: #F0F0F0">
                                <span class="font-s14 font-w-bold color-text">お支払い期間</span>
                                <span class="font-s14 font-w-bold color-text">@{{ botContract.contract_bill_type == 'year' ? '年間一括払い → 月払い' : '月払い → 年間一括払い' }}</span>
                            </div>
                            <div class="item">
                                <span class="font-s14 font-w-normal color-gray1">決済方法</span>
                                <span class="font-s14 font-w-bold color-text">@{{ botContract.payment_method == 2 && botContract.contract_bill_type == 'month' ? '銀行振込' : 'クレジットカード' }}</span>
                            </div>
                            <div class="item">
                                <span class="font-s14 font-w-normal color-gray1">決済カード情報</span>
                                <span class="font-s14 font-w-bold color-text d-flex flex-column align-items-end" v-if="botContract.payment_method == 1">****-****-****-@{{ botContract.univa_last_four_card }}</span>
                                <span class="font-s14 font-w-bold color-text d-flex flex-column align-items-end" v-if="botContract.payment_method == 2">
                                    <span>クレジットカード</span>
                                    <span class="font-w-normal">※月払いはクレジットカード決済のみとなります。</span>
                                </span>
                            </div>
                            <div class="item" style="justify-content: center !important; border-bottom: unset !important;">
                                <span class="font-s14 font-w-bold color-text" v-if="botContract.contract_bill_type == 'year'">次回決済日：@{{ formatDate(expiredDateContract(), 'YYYY年MM月DD日') }}から月払いに変更されます</span>
                                <span class="font-s14 font-w-bold color-text" v-else>次回決済日：@{{ formatDate(expiredDateContract(), 'YYYY年MM月DD日') }}から年払いに変更されます</span>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex mt-4">
                        <button type="button" class="button-ripple button09 mr-3"  @click="redirectPage('back')">戻る</button>
                        <button class="button-ripple button07" @click="changeBillType()" >@{{ botContract.payment_method == 1 ? '変更する' : 'クレジットカードの登録に進む' }}</button>
                    </div>
                </div>
                <div v-if="step_active == stepEnd && steps[stepEnd].status == STATUS.DONE" class="success">
                    <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <rect width="80" height="80" rx="40" fill="#08BF5A"/>
                        <path d="M58.75 24.9063H55.474C55.2474 24.9068 55.0239 24.9586 54.8202 25.0578C54.6166 25.157 54.438 25.3011 54.298 25.4793L34.975 49.9623L25.705 38.2203C25.565 38.0421 25.3864 37.898 25.1828 37.7988C24.9791 37.6996 24.7556 37.6478 24.529 37.6473H21.25C21.1804 37.6473 21.1121 37.6667 21.0529 37.7033C20.9936 37.7399 20.9457 37.7923 20.9146 37.8546C20.8834 37.9168 20.8703 37.9866 20.8765 38.0559C20.8828 38.1253 20.9082 38.1915 20.95 38.2473L33.796 54.5163C33.9364 54.6947 34.1154 54.839 34.3196 54.9382C34.5239 55.0374 34.748 55.0889 34.975 55.0889C35.202 55.0889 35.4261 55.0374 35.6304 54.9382C35.8346 54.839 36.0136 54.6947 36.154 54.5163L59.047 25.5063C59.0898 25.4511 59.1162 25.3849 59.1232 25.3154C59.1302 25.2459 59.1175 25.1758 59.0865 25.1132C59.0555 25.0506 59.0075 24.998 58.948 24.9614C58.8885 24.9248 58.8199 24.9057 58.75 24.9063Z" fill="white"/>
                    </svg>
                    <span class="font-s20 font-w-bold color-text mt-4">お支払い期間変更のお申し込みありがとうございます。</span>
                    <span class="font-s20 font-w-bold color-text mt-4">変更が完了いたしました。</span>
                    <button class="button-ripple button01 mt-4 btn-bill-success" @click="redirectPage('back')" style="">契約詳細に戻る
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <g clip-path="url(#clip0_3589_7583)">
                                <path d="M11.9638 7.60516L4.91877 2.10416C4.9003 2.08983 4.87816 2.08101 4.8549 2.07872C4.83164 2.07643 4.8082 2.08076 4.7873 2.09122C4.76639 2.10167 4.74886 2.11782 4.73674 2.1378C4.72461 2.15778 4.71838 2.18079 4.71877 2.20416V3.41016C4.719 3.44893 4.72813 3.48713 4.74547 3.52181C4.76281 3.55648 4.78789 3.58671 4.81877 3.61016L10.4388 7.99916L4.81877 12.3912C4.7876 12.4143 4.76232 12.4445 4.74495 12.4792C4.72758 12.514 4.71861 12.5523 4.71877 12.5912V13.7992C4.71877 13.8224 4.72523 13.8451 4.73744 13.8649C4.74964 13.8846 4.7671 13.9006 4.78786 13.911C4.80863 13.9213 4.83187 13.9257 4.85499 13.9237C4.87811 13.9216 4.9002 13.9131 4.91877 13.8992L11.9628 8.39916C12.0238 8.35256 12.0733 8.29253 12.1073 8.22372C12.1414 8.15492 12.1592 8.07919 12.1593 8.00241C12.1594 7.92562 12.1418 7.84985 12.1079 7.78096C12.074 7.71207 12.0247 7.65191 11.9638 7.60516Z" fill="white"/>
                            </g>
                            <defs>
                                <clipPath id="clip0_3589_7583">
                                    <rect width="16" height="16" fill="white"/>
                                </clipPath>
                            </defs>
                        </svg>
                    </button>
                </div>
                <div v-if="step_active == stepEnd && steps[stepEnd].status == STATUS.ERROR" class="error">
                    <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <rect width="80" height="80" rx="40" fill="#F44336"/>
                        <foreignObject x="8.99805" y="8.625" width="62.002" height="56.75"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(5px);clip-path:url(#bgblur_0_2255_9269_clip_path);height:100%;width:100%"></div></foreignObject><path data-figma-bg-blur-radius="10" d="M39.998 19.125C40.3586 19.125 40.6801 19.3094 40.8643 19.626L60.3633 53.376C60.5454 53.692 60.5455 54.0622 60.3643 54.376C60.183 54.6896 59.8625 54.8749 59.498 54.875H20.499C20.1366 54.875 19.8164 54.6906 19.6348 54.377C19.4527 54.0625 19.4523 53.6914 19.6338 53.375L19.6328 53.374L39.1328 19.626L39.1338 19.623C39.3117 19.3108 39.6306 19.1251 39.998 19.125ZM39.5654 23.9961L23.6377 51.5664L23.2051 52.3164H56.7949L56.3613 51.5664L40.4316 23.9961L39.998 23.2471L39.5654 23.9961ZM39.998 44.999C40.9635 44.999 41.75 45.7855 41.75 46.751C41.75 47.7144 40.9641 48.5 39.998 48.5C39.0342 48.4998 38.2491 47.7149 38.249 46.751C38.249 45.785 39.0347 44.9992 39.998 44.999ZM41 32.625V40.999H39V32.625H41Z" fill="white" stroke="white"/>
                        <defs>
                            <clipPath id="bgblur_0_2255_9269_clip_path" transform="translate(-8.99805 -8.625)"><path d="M39.998 19.125C40.3586 19.125 40.6801 19.3094 40.8643 19.626L60.3633 53.376C60.5454 53.692 60.5455 54.0622 60.3643 54.376C60.183 54.6896 59.8625 54.8749 59.498 54.875H20.499C20.1366 54.875 19.8164 54.6906 19.6348 54.377C19.4527 54.0625 19.4523 53.6914 19.6338 53.375L19.6328 53.374L39.1328 19.626L39.1338 19.623C39.3117 19.3108 39.6306 19.1251 39.998 19.125ZM39.5654 23.9961L23.6377 51.5664L23.2051 52.3164H56.7949L56.3613 51.5664L40.4316 23.9961L39.998 23.2471L39.5654 23.9961ZM39.998 44.999C40.9635 44.999 41.75 45.7855 41.75 46.751C41.75 47.7144 40.9641 48.5 39.998 48.5C39.0342 48.4998 38.2491 47.7149 38.249 46.751C38.249 45.785 39.0347 44.9992 39.998 44.999ZM41 32.625V40.999H39V32.625H41Z"/>
                            </clipPath></defs>
                    </svg>
                    <span class="font-s20 font-w-bold color-text mt-4">カード情報の変更に失敗しました。</span> <br>
                    <span class="font-s16 font-w-normal color-text">※失敗の原因は、ご利用のカード会社様にご確認ください。</span>
                    <div class="d-flex justify-content-start mt-4">
                        <button class="button-ripple button09 color-gray1 mr-4" @click="redirectPage('back')">戻る</button>
                        <button class="button-ripple button07" @click="redirectPage('current')">クレジットカードの登録に進む  ></button>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <input type="hidden" id="app_token_univapay" value="{{ env('UNIVAPAY_APP_TOKEN') }}">
@endsection

@push('script')
    <script src="https://widget.univapay.com/client/checkout.js"></script>
    <script src="/js/media/vue.min.js"></script>
    <script src="/lme-ui/src/js/tooltip/lme-tooltip.js?v={{config("sns-line.version")}}"></script>
    <script src="/js/moment.min.js"></script>
    <script src="/js/moment-with-locales.js"></script>
    <script>
        var botContract = @json($botContract);
        const plan_pro_fee = '{{ $planProFee }}';
        const basic_fee = '{{ $basicFee }}';
        const isUpgradeFromStandard = {{ $isUpgradeFromStandard ? 'true' : 'false' }};
        const isExtendContract = {{ $isExtendContract ? 'true' : 'false' }};
        const isReContract = {{ $isReContract ? 'true' : 'false' }};
    </script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
    <script src="/_assets/commons/js/lme.js?v={{config("sns-line.version")}}"></script>
    <script src="/_assets/commons/js/services/card_service.js?v={{config("sns-line.version")}}"></script>
    <script src="/_assets/commons/js/card.js?v={{config("sns-line.version")}}"></script>
    <script src="/_assets/modules/bill/js/mixins/setting_card.js?v={{config("sns-line.version")}}"></script>
    <script src="/_assets/modules/bill/js/change_bill_type.js?v={{config("sns-line.version")}}"></script>
    <script type="application/javascript" src="/js/validate/message_error_univapay.js?v={{config('sns-line.version')}}"></script>
@endpush