@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">
    <link rel="stylesheet" href="/css/admin/plan_max_friend.css?v={{config("sns-line.version")}}" type="text/css">
    <link rel="stylesheet" href="/css/admin/bill_tool/confirm-contract.css?version={{ config('sns-line.version') }}">
@endpush
@section('content')
    <section id="card" v-cloak>

        <div style="font-size: 24px; font-weight: 600; color: #222222; margin-top: 20px">従量課金の決済</div>
        <div class="card-content">
            @include('basic.bill.components.step')
            <div class="content">
                <card v-if="payment_method == 1 && step_active == 1 && is_card_error == 1"
                      :contract="botContract"
                      :card_type="type"
                      :flag_show_univapay="flagShowUnivapay"
                      @push_error="pushError"
                      @push_success="pushSuccess"
                      @redirect_page="back"
                >
                </card>
                <div v-if="step_active == 0 && steps[0].status == STATUS.PROCESSING" class="success">
                    <div class="confirm-card">
                        <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">
                                    <img style="width: 26px; height: 26px; border-radius: 50%; margin-right: 5px" :src="botContract.bot_image ? botContract.bot_image : '/images/user-outlined.svg'" alt="">
                                    <span style="word-break: break-word;">@{{ botContract.view_name ?? 'LINE公式アカウント未接続' }}</span>
                                </span>
                            </div>
                            <div class="item">
                                <span class="font-s14 font-w-normal color-gray1">従量課金</span>
                                <span class="font-s14 font-w-normal color-text">総友だち数　<span class="font-w-bold">@{{ totalFriend > 200000 ? '20~30' : '10~20'  }}万人</span></span>
                            </div>
                            <div class="item">
                                <span class="font-s14 font-w-normal color-gray1">お支払い期間</span>
                                <span v-if="cardBillMaxFriend && cardBillMaxFriend.count_bill_friend_success > 0" class="font-s14 font-w-normal color-text text-right" style="line-height: 170%">@{{ formatDate(cardBillMaxFriend.expired_date) }} ~ @{{ formatDate(nextExpiredMaxFriend(botContract.expired_date_contract)) }}
                                </span>
                                <span v-else class="font-s14 font-w-normal color-text text-right" style="line-height: 170%">@{{ formatDatNow() }} ~ @{{ formatDate(botContract.expired_date_contract) }}
                                    <br> 日割り @{{ getDaysBetween(botContract.expired_date_contract) }}︎日分 
                                </span>
                            </div>
                            <div class="item" >
                                <span class="font-s14 font-w-normal color-gray1">お支払い金額</span>
                                <span class="font-s14 font-w-normal color-text text-right" v-if="cardBillMaxFriend && cardBillMaxFriend.count_bill_friend_success > 0">
                                    <span class="font-w-bold ">@{{ getAmountFriend() }}円 (税込)</span>
                                </span>
                                <span class="font-s14 font-w-normal color-text text-right" v-else>
                                    日割り @{{ getAmountFriendOneDay()  }}円/日 × @{{ getDaysBetween(botContract.expired_date_contract) }}日
                                    <br> <span class="font-w-bold ">@{{ getAmountFriend() }}円 (税込)</span>
                                </span>
                            </div>

                            <div class="item">
                                <span class="font-s14 font-w-normal color-gray1">お支払い方法</span>
                                <div  class="value-use">
                                    <label v-if="payment_method == 1" class="flex items-center">
                                        <input type="radio" v-model="payment_method" value="1" class="!mt-[0px] peer/month peer-checked/month:bg-[#1677FF] cursor-pointer" id="payment_kind_1">
                                        <span for="payment_kind_1" class="ml-[5px] text-[#222222E0] text-[14px] font-[400] cursor-pointer">
                                                登録済みクレジットカード
                                            </span>
                                    </label>
                                    <div v-if="botContract.payment_method == 1" style="margin-top: 7px; margin-bottom: 5px;">
                                        <span v-if="botContract.univa_last_four_card" class="font-s14 color-text font-w-normal" style="color: #888888; margin-left: 24px;">****-****-****-@{{ botContract.univa_last_four_card }}</span>
                                    </div>

                                    <div v-if="botContract.contract_bill_type != 'month' && payment_method == 2" class="flex items-center" style="margin-top: 10px">
                                        <label class="flex items-center">
                                            <input type="radio" v-model="payment_method" value="2" class="!mt-[0px] peer/month peer-checked/month:bg-[#1677FF] cursor-pointer" id="payment_kind_2">
                                            <span for="payment_kind_2" class="ml-[5px] text-[#222222E0] text-[14px] font-[400] whitespace-nowrap cursor-pointer">
                                                銀行振込（請求書の発行ができます）
                                            </span>
                                        </label>
                                    </div>
                                </div>
                            </div>


                        </div>
                    </div>
                    <div class="d-flex mt-4">
                        <button type="button" class="button-ripple button09 mr-3"  @click="backSetting()">キャンセル</button>
                        <button class="button-ripple button07" @click="saveNextStepMaxFriend(1)" >決済情報の確認に進む</button>
                    </div>
                </div>
                <div v-if="step_active == 1 && steps[1].status == STATUS.PROCESSING && is_card_error == 0" class="success">
                    <div class="confirm-card">
                        <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">
                                    <img style="width: 26px; height: 26px; border-radius: 50%; margin-right: 5px" :src="botContract.bot_image ? botContract.bot_image : '/images/user-outlined.svg'" alt="">
                                    <span style="word-break: break-word;">@{{ botContract.view_name ?? 'LINE公式アカウント未接続' }}</span>
                                </span>
                            </div>
                            <div class="item">
                                <span class="font-s14 font-w-normal color-gray1">従量課金</span>
                                <span class="font-s14 font-w-normal color-text">総友だち数　<span class="font-w-bold">@{{ totalFriend > 200000 ? '20~30' : '10~20'  }}万人</span></span>
                            </div>
                            <div class="item">
                                <span class="font-s14 font-w-normal color-gray1">お支払い期間</span>
                                <span v-if="cardBillMaxFriend && cardBillMaxFriend.count_bill_friend_success > 0" class="font-s14 font-w-normal color-text text-right" style="line-height: 170%">@{{ formatDate(cardBillMaxFriend.expired_date) }} ~ @{{ formatDate(nextExpiredMaxFriend(botContract.expired_date_contract)) }}
                                </span>
                                <span v-else class="font-s14 font-w-normal color-text text-right" style="line-height: 170%">@{{ formatDatNow() }} ~ @{{ formatDate(botContract.expired_date_contract) }}
                                    <br> 日割り @{{ getDaysBetween(botContract.expired_date_contract) }}︎日分 </span>
                            </div>
                            <div class="item" >
                                <span class="font-s14 font-w-normal color-gray1">お支払い金額</span>
                                <span class="font-s14 font-w-normal color-text text-right" v-if="cardBillMaxFriend && cardBillMaxFriend.count_bill_friend_success > 0">
                                    <span class="font-w-bold ">@{{ getAmountFriend() }}円 (税込)</span>
                                </span>
                                <span class="font-s14 font-w-normal color-text text-right" v-else>
                                    日割り @{{ getAmountFriendOneDay()  }}円/日 × @{{ getDaysBetween(botContract.expired_date_contract) }}日
                                    <br> <span class="font-w-bold ">@{{ getAmountFriend() }}円 (税込)</span>
                                </span>
                            </div>

                            <div class="item">
                                <span class="font-s14 font-w-normal color-gray1">お支払い方法</span>
                                <div  class="value-use">
                                  <span v-if="payment_method == 1" class="font-s14 color-text font-w-bold text-right" >
                                            登録済みクレジットカード <br>
                                           <span v-if="botContract.univa_last_four_card" class="font-w-normal" style="color: #888888">****-****-****-@{{ botContract.univa_last_four_card }}</span>
                                  </span>
                                    <span  v-if="payment_method == 2" class="font-s14 color-text font-w-bold text-right">銀行振込 </span>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="d-flex mt-4">
                        <button type="button" class="button-ripple button09 mr-3"  @click="back()">戻る</button>
                        <button class="button-ripple button07" @click="saveNextStepMaxFriend(2)" >決済する</button>
                    </div>
                </div>
                <div v-if="payment_method == 1">
                    <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-2">お申し込みありがとうございます。</span>
                        <button class="button-ripple button01 mt-4 btn-bill-success"  @click="redirectToAccountList()" style="width: 162px !important;">ホームに戻る
                            <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 v-if="payment_method == 2">
                    <div v-if="step_active == stepEnd && steps[stepEnd].status == STATUS.DONE" class="success">
                        <div v-if="is_transfer_error">
                            <div class="transfer_box" >
                                <img src="/images/logo_icon.png">
                                <div class="text-center font-w-bold " style="margin-bottom: 35px">
                                    お申し込みありがとうございます。<br>
                                    お支払い口座を発行しています。
                                </div>
                                <div  style="width: 400px; height: 100px; font-size: 14px; background: #FFFFFF ; padding: 18px 20px; border-radius: 10px; line-height: 160%">
                                    発行が完了しましたら「<span style="font-weight:600; text-decoration: underline ">L Messageトップ画面</span>」<br>
                                    「<span  style="font-weight:600;text-decoration: underline ">ご登録のメールアドレス</span>」にてご案内いたします。<br>
                                    口座発行までは数分~数時間かかる場合があります。
                                </div>
                            </div>

                            <div class="bx-btn-custom">
                                <div class="parts-wrapButton">
                                    <label class="button button03 px-[12px] py-[10px]" for="modalTrigger02" @click="showModalDownloadInvoice()">請求書のダウンロード</label>
                                    <button class="button button01-success"  @click="redirectToAccountList" style="width: 130px"> ホームに戻る</button>
                                </div>
                            </div>
                        </div>
                        <div v-if="!is_transfer_error">
                            <div class="text-center font-s20 font-w-bold color-text " style="margin-bottom: 35px">
                                お申し込みありがとうございます。<br>
                                振込期日までにお振込が確認でき次第、ご契約完了となります。
                            </div>
                            <div class="tab-info" style="width: 925px">
                                <div class="col left-content">
                                    <div class="font-s14 font-w-bold color-text">振込先情報</div>
                                    <div  class="row-info-use">
                                        <div class="lbl">
                                            銀行名
                                        </div>
                                        <div class="value-use">
                                            @{{ bank_name }}
                                        </div>
                                    </div>
                                    <div class="row-info-use">
                                        <div class="lbl">
                                            支店名
                                        </div>
                                        <div class="value-use">
                                            @{{ branch_name }}
                                        </div>
                                    </div>
                                    <div class="row-info-use">
                                        <div class="lbl">
                                            口座種別
                                        </div>
                                        <div class="value-use">
                                            普通
                                        </div>
                                    </div>
                                    <div class="row-info-use">
                                        <div class="lbl">
                                            口座番号
                                        </div>
                                        <div class="value-use">
                                            @{{ account_number }}
                                        </div>
                                    </div>

                                    <div class="row-info-use">
                                        <div class="lbl" >
                                            口座名義
                                        </div>

                                        <div class="value-use">
                                            @{{ bank_account_holder_name ?? 'ｶ)ﾕﾆｳﾞｱﾍﾟｲｷﾔｽﾄ' }}
                                        </div>
                                    </div>
                                    <div class="row-info-use">
                                        <div class="lbl" style="color: #222222; font-weight: 600">
                                            振込期日
                                        </div>

                                        <div class="value-use">
                                            @{{ expired_transfer }} まで
                                        </div>
                                    </div>
                                    <div class="row-info-use">
                                        <div class="lbl" style="color: #222222; font-weight: 600">
                                            お支払い総額
                                        </div>

                                        <div class="value-use">
                                            ￥@{{ formatPrice(amount_bill) }} <span class="vat">（税込）</span>
                                        </div>
                                    </div>

                                </div>
                                <div class="col right-content">
                                    <div class="box-cnt-term mt-[0px]" style="background: #F8F8F8">
                                        <div class="scl-content " style="height: 400px">
                                            <div style="font-weight: 600; font-size: 14px;margin-bottom: 15px;">注意事項</div>
                                            <div class="font-s14 font-w-bold color-text d-flex mb-2" >
                                                <span class="color-red mr-2">※</span> 振込手数料はご負担いただきますようお願いいたします。
                                            </div>
                                            <div class="font-s14 font-w-bold color-text d-flex mb-2" >
                                                <span class="color-red mr-2">※</span> 振込口座情報は、ご登録のメールアドレスにもお送りしております。
                                            </div>
                                            <div class="font-s14 font-w-bold color-text d-flex mb-2" >
                                                <span class="color-red mr-2">※</span> 振込期限は本日より1ヶ月以内となります。
                                            </div>
                                            <div class="font-s14 font-w-bold color-text d-flex mb-2" >
                                                <span class="color-red mr-2">※</span> 左記振込期日までに入金が確認できない場合、お申込みは無効
                                                <br>となります。土日を挟む場合など、入金確認に時間を要する場
                                                <br>合がございますのでご注意ください。
                                            </div>
                                            <div class="font-s14 font-w-bold color-text d-flex mb-2" >
                                                <span class="color-red mr-2">※</span> 無効となった場合は、再度ご契約操作をお願いいたします。
                                            </div>
                                            <div class="font-s14 font-w-bold color-text d-flex mb-2" >
                                                <span class="color-red mr-2">※</span> 入金確認は決済システム側で自動確認しておりますので、過不
                                                <br>足が発生している場合も入金完了になりませんのでご注意くだ
                                                <br>さい。
                                            </div>

                                        </div>


                                    </div>

                                </div>
                            </div>

                            <div class="bx-btn-custom">
                                <div class="parts-wrapButton">
                                    <label class="button button03 px-[12px] py-[10px]" for="modalTrigger02" @click="showModalDownloadInvoice()">請求書のダウンロード</label>
                                    <button class="button button01-success"  @click="redirectToAccountList">ホームに戻る</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div id="modal-content-download-invoice" style="background: #FFFFFF; display: none" class="px-[30px]" >
                <div class="tt-invoice " style="position: relative">
                    <h2 class="" style="font-size: 150% !important; color: #222222; font-weight: 600">
                        請求書
                    </h2>
                    <span class="time_export">
                        発行日： @{{ moment().format('YYYY/MM/DD') }}
                    </span>
                </div>

                <div class=" content_top" style="width: 100%">
                    <div>
                        <div  style="font-weight: 400; font-size: 35px;color: #222222">@{{ name_invoice }} @{{ getName2Invoice() }}</div>
                        <div style="margin-top: 22px; background-color: #F8F8F8; height: 60px; width: 350px; display: flex; align-items: center; justify-content: space-between;     padding-left: 30px;padding-right: 30px;">
                            <div  style="font-size: 35px; font-weight: 400; color: #222222">
                                ご請求金額
                            </div>
                            <div style="font-size: 35px; font-weight: 400; color: #222222">
                                @{{ formatPrice(amount_bill) }} 円
                            </div>
                        </div>
                    </div>
                    <div  style=" display: flex;  justify-content: flex-end;flex-direction: column;">
                        <div class="add_invoice "
                                {{--					 style="position: relative;"--}}
                        ><span>株式会社ミショナ</span>
                        </div>
                        <div class="add_invoice"  style="position: relative; margin-top: 10px">
                            <span>登録番号：</span><span>T5011001133790</span>
                        </div>
                        <div class="add_invoice"  style="position: relative; margin-top: 20px">
                            <span>〒 </span><span>810-0001</span>
                        </div>
                        <div class="add_invoice" style="margin-top: 10px">
                            <span>福岡県福岡市中央区天神2-2-12</span>
                        </div>
                        <div class="add_invoice" style="margin-top: 10px">
                            <span>T&Jビルディング 7F</span>
                        </div>
                    </div>
                </div>

                <div style="margin-top: 30px">
                    <div  style="display: flex">
                        <div class="th-d grow col1_txt">品目</div>
                        <div class="th-d th-d2 coln_txt">単価</div>
                        <div class="th-d th-d2 coln_txt">数量</div>
                        <div class="th-d th-d2 coln_txt">価格</div>
                    </div>
                    <div style="display: flex; border-top: 1px solid #707070;border-bottom: 1px solid #707070;margin-top: 10px">
                        <div class="td-d grow text_note_price" style="text-align: left">
                            L Message @{{ getExplainContract(botContract.contract_type) }}利用料 @{{ number_bill }}年分
                        </div>
                        <div class="td-d text_note_price" style="  width: 15%;">
                            @{{  formatPrice(amount_bill) }}
                        </div>
                        <div class="td-d text_note_price" style="  width: 15%;">
                            1
                        </div>
                        <div class="td-d text_note_price" style="  width: 15%;">
                            @{{  formatPrice(amount_bill) }}
                        </div>
                    </div>
                </div>

                <div class="tdc_price" style="">
                    <div class="w-[350px]" style="width: 350px">
                        <div class="" style="justify-content: space-between;display: flex;">
                            <div class="col1_gr">小計</div>
                            <div class="col1_gr_2">@{{ amountWithoutTax }}</div>
                        </div>

                        <div class="flex-r" style="margin-top: 15px">
                            <div class="col1_gr">うち消費税額合計</div>
                            <div class="col1_gr_2">@{{ taxInvoice  }}</div>
                        </div>

                        <div class="flex-r" style="margin-top: 20px">
                            <div class="col1_gr_2">合計</div>
                            <div class="col1_gr_2">@{{ formatPrice(amount_bill) }}</div>
                        </div>

                        <div class="col1_gr" style="margin-top: 20px">税率別内訳</div>

                        <div  style="justify-content: space-between;display: flex; margin-top: 15px; padding-bottom: 20px">
                            <div class="col1_gr_2">10%対象税抜額</div>
                            <div class="col1_gr_2">@{{ amountWithoutTax }}</div>
                        </div>

                        <div class="flex-r" style="margin-top: 10px">
                            <div class="col1_gr_2">消費税</div>
                            <div class="col1_gr_2">@{{ taxInvoice  }}</div>
                        </div>
                    </div>
                </div>


                <div class="" style="margin-top: 30px">
                    <div class="border_c" >
                        <div class="col1_gr">振込先</div>
                    </div>
                    <div class="col1_gr_2" style="margin-top: 15px">@{{ bank_name ?? 'GMOあおぞらネット銀行' }}　@{{ branch_name }}支店　(普)@{{ account_number }}　@{{ bank_account_holder_name ?? 'ｶ)ﾕﾆｳﾞｱﾍﾟｲｷﾔｽﾄ' }}</div>
                </div>

                <div style="margin-top: 30px">
                    <div class="border_c">
                        <div class="col1_gr">備考</div>
                    </div>
                    <div class="col1_gr_2" style="margin-top: 15px">
                        L Message利用料金は株式会社ユニヴァ・ペイキャストの提供する決済代行システムを利用して請求されます。 振込先口座名義は「ｶ)ﾕﾆｳﾞｱﾍﾟｲｷﾔｽﾄ」となります。
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-n modal02">
            <input id="modalTrigger02" type="checkbox">
            <div class="overlay">
                <label for="modalTrigger02" class="modal-trigger"></label>
                <div class="contents">
                    <label for="modalTrigger02" class="close"></label>
                    <h2>請求書の宛名</h2>
                    <div class="input-vn input02">
                        <div class="input-ttl">
                            <p>請求書に記載する宛名</p>
                            {{--						<div class="char-count" id="charCount">0 / 50</div>--}}
                        </div>
                        <div class="input-box">
                            <input type="text" id="invoice-name"  v-model="name_invoice"  value="" placeholder="宛名をご入力ください">
                        </div>
                    </div>
                    <div class="row-input-radio mt-[20px]">
                        <div class="text-[#222222] text-[14px] font-[400] mb-[5px]">敬称</div>
                        <div class="radio radio01">
                            <label class="ml-[10px] mr-[30px]">
                                <input  id="name-1" value="1" v-model="type_download_invoice"  type="radio" name="option-card" checked>
                                <span class="font-[400]">御中</span>
                            </label>
                            <label class="mr-[30px]">
                                <input  id="name-2" value="2" v-model="type_download_invoice" type="radio" name="option-card">
                                <span  class="font-[400]">様</span>
                            </label>
                            <label>
                                <input  id="name-3" value="3" v-model="type_download_invoice" type="radio" name="option-card">
                                <span  class="font-[400]">設定なし</span>
                            </label>

                        </div>
                    </div>
                    <div class="bx-btn-custom " style="margin-bottom: 0">
                        <div class="parts-wrapButton !mt-[20px]">
                            <button class="button button01" @click="downloadInvoice">請求書をダウンロード</button>
                        </div>
                    </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="/js/moment.min.js"></script>
    <script src="/js/moment-with-locales.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>

    <script src="{{asset('js/html2pdf.min.js')}}"></script>
    <script>
        var botContract = @json($botContract);
        const plan_pro_fee = '{{ $planProFee }}';
        const basic_fee = '{{ $basicFee }}';
        const botIdMaxF = '{{ $bot->id ?? '' }}';
        const totalFriend = '{{ $totalFriend }}';
        const billAgainMax = '{{ $billAgainMax }}';
        const cardBillMaxFriend = @json($cardBillMaxFriend);
    </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="/js/admin/payment_max_friend.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