@extends('layout.admin.main')
@section('title', 'システム通知')
@push('css')
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sawarabi+Mincho&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/_assets/commons/css/lme_custom.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">
    <style>

    </style>

@endpush
@section('content')
    <section class="masteredit" id="plan_max_friend" v-cloak>
        <div class="contentBox" v-if="type_show_screen == 0">
            <div class="txt_1">【システム通知】</div>
            <div class="txt_1 " style="margin-top: 15px;">総友だち数が</div>
            <div class="txt_2" >50,000<span class="txt_1">人を超えました</span></div>
            <div class="txt_3" style="text-decoration: underline">@{{ formatDate(bot_active.expired_date_max_friend) }}までに料金プランのアップグレードが必要です</div>
            <img  v-if="totalFriend <= 100000" src="/images/image_max_50.jpg" style="height: 228px">
            <button class="button-ripple button07 mt-4 btn-bill-success"  @click="upgradeContract()" 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 class="contentBox" v-if="type_show_screen == 1">
            <div class="txt_1">【システム通知】</div>
            <div class="txt_1 " style="margin-top: 15px;">総友だち数が</div>
            <div class="txt_2" >100,000<span class="txt_1">人を超えました</span></div>
            <div class="txt_3" style="text-decoration: underline" >@{{ formatDate(bot_active.expired_date_max_friend) }}までに<br>
                プロプランへのアップグレード・従量課金決済が必要です。</div>
            <div class="box_max" style="border-bottom: 0;">
                <div class="text-left">プロプラン<br>
                    アップグレード
                </div>
                <div>
{{--                    <div>日割り 658円/日 × @{{ getDaysBetween(contract_bot_active.expired_date_contract) }}日</div>--}}
                    <div  style="font-weight: 600">@{{ getAmountPlanUpgrade() }}円 (税込)/月</div>
                </div>
            </div>
            <div class="box_max">
                <div>
                    従量課金 @{{ totalFriend > 200000 ? '20~30' : '10~20'  }}万人
                </div>
                <div>
{{--                    <div>日割り 361円/日 × @{{ getDaysBetween(contract_bot_active.expired_date_contract) }}日</div>--}}
                    <div style="font-weight: 600">@{{ getAmountFriend() }}円 (税込)/月</div>
                </div>
            </div>
            <button class="button-ripple button07 mt-4 btn-bill-success"  @click="upgradeContractPro()" 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 class="contentBox" v-if="type_show_screen == 2">
            <div class="txt_1">【システム通知】</div>
            <div class="txt_1 " style="margin-top: 15px;">総友だち数が</div>
            <div class="txt_2" >100,000<span class="txt_1">人を超えました</span></div>
            <div class="txt_3" >本日(@{{ formatDatNow() }})から、@{{ formatDate(contract_bot_active.expired_date_contract) }}まで<br>
                @{{ getDaysBetween(contract_bot_active.expired_date_contract) }}︎ 日分の下記決済が必要です</div>

            <div class="box_max">
                <div>
                    従量課金 @{{ totalFriend > 200000 ? '20~30' : '10~20'  }}万人
                </div>
                <div>
                    <div>日割り @{{ totalFriend > 200000 ? '722' : '361'  }}円/日 ×  @{{ getDaysBetween(contract_bot_active.expired_date_contract) }}日</div>
                    <div style="font-weight: 600;text-align: right;">@{{ getAmountFriend2() }}円 (税込)</div>
                </div>
            </div>
            <button class="button-ripple button07 mt-4 btn-bill-success"   @click="openPage()" style="width: 232px !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>

    </section>

@endsection
@push('script')
<script>
    var botActive = @json($bot);
    var contractBotActive = @json($contractBotActive);
    var totalFriend = '{{ $totalFriend }}';
</script>
<script src="https://widget.univapay.com/client/checkout.js"></script>
<script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></script>
<script src="/js/vue-paginate.js"></script>
<script src="/js/media/vue.min.js"></script>
<script src="/plugins/vuejs/vue-resource@1.3.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="/js/admin/plan_max_friend.js?v={{config('sns-line.version')}}"></script>

@endpush