@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(backType)">契約詳細</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="step_active == 0 && steps[0].status == STATUS.PROCESSING" :back_type="backType" :contract="botContract" :card_type="type" @push_error="pushError" @push_success="pushSuccess" @redirect_page="redirectPage"></card>
                <div v-if="step_active == 1 && steps[1].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 account-info">
                                    <img style="width: 26px; height: 26px; border-radius: 50%" :src="botContract.bot_image ? botContract.bot_image : '/images/user-gray.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">@{{ formatNumber(botContract.amount_payment) }}円/@{{ 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">クレジットカード</span>
                            </div>
                            <div class="item">
                                <span class="font-s14 font-w-bold color-text">新規決済カード情報</span>
                                <span class="font-s14 font-w-bold color-text">****-****-****-@{{ payload.univa_last_four_card }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex mt-4">
                        <button type="button" class="button-ripple button09 mr-3" @click="redirectPage('current')">戻る</button>
                        <button class="button-ripple button01" @click="changeCard()" >変更する</button>
                    </div>
                </div> <div v-if="step_active == 2 && steps[2].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>
                    <button class="button-ripple button01 mt-4 btn-bill-success" @click="redirectPage(backType)" 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 == 1 && steps[1].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(backType)">戻る</button>
                        <button class="button-ripple button07 btn-bill-card-fail" @click="redirectPage('current')">別のカードを登録する
                            <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>
            </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>
        var botContract = @json($botContract);
        const plan_pro_fee = '';
        const basic_fee = '';
        const backType = '{{ $backType ? $backType : "back" }}';
        
    </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_card.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