@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="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr@latest/dist/plugins/monthSelect/style.css">
    <link rel="stylesheet" href="/_assets/commons/css/calendar_control.css?v={{config('sns-line.version')}}" type="text/css">
    <link rel="stylesheet" href="/_assets/modules/bill/css/detail.css?v={{config('sns-line.version')}}" type="text/css">
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js"></script>
@endpush
@section('content')
    <section id="detail-contract" 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>契約詳細</li>
                    </ul>
                </nav>
            </div>
        </div>
        <div class="page-title">契約詳細</div>

        <div class="overdue mb-4 mt-4" v-if="cardBillMaxFriend && bot.max_friend_plan == 3">
            <div class="d-flex justify-content-between align-items-center">
                <div class="d-flex align-items-center color-red">
                    <span class="font-s20">決済エラー：</span>
                    <span class="font-s16">@{{ formatDate(overdueDate(), 'MM月DD日') }}までに決済が行われない場合、強制解約となります</span>
                </div>
                <button v-if="bot.payment_method == 1" class="button-ripple button10" @click="paymentContract()" >決済にすすむ</button>
                <div class="d-flex align-items-center" v-if="bot.payment_method == 2">
                    <button  class="button-ripple button10 mr-3" @click="openModalExportBillTransfer()">請求書のダウンロード</button>
                    <button  class="button-ripple button10" @click="redirectPage('confirm-payment')">振込口座を確認する</button>
                </div>
            </div>

            <div class="o-content"  v-if="bot.payment_method == 2">
                <div class="d-flex justify-content-start align-items-center font-s16 color-text">
                    <span>@{{ cardBillMaxFriend ? formatDate(cardBillMaxFriend.expired_date_bank_transfer, 'YYYY/MM/DD') + ' 23:59' : '-' }} までにエルメ利用料を</span>
                    <a href="#" class="underline" style="font-weight: 500 !important;" @click="redirectPage('download_invoice')">指定口座</a>
                    <span>にお振込ください</span>
                </div>
            </div>
        </div>
        <div class="contract mt-3">
            <div class="bot-info d-flex align-items-center">
                <img :src="bot.bot_image ? bot.bot_image : '/images/8.png'" alt="">
                <div class="info d-flex flex-column ml-2">
                    <span class="name">@{{ bot.view_name ? bot.view_name : 'LINE公式アカウント未接続' }}</span>
                    <span class="line" v-if="bot.premium_id || bot.line_id">LINE ID: @{{ bot.premium_id ? bot.premium_id : bot.line_id }}</span>
                </div>
            </div>
            <div class="content mt-4">
                <div class="item d-flex justify-content-between align-items-start">
                    <div class="label-text">ステータス</div>
                    <div class="detail">
                        <div class="status s-danger-bg" v-if="bot.max_friend_plan == 3">延滞中</div>
                        <div class="status active" v-else>正常</div>
                    </div>
                </div>
               <div class="item d-flex justify-content-between align-items-start" >
                    <div class="label-text">LINE公式アカウント接続日</div>
                    <div class="detail">@{{ bot.bot_created_at ? formatDate(bot.bot_created_at) : '-' }}</div>
                </div>
                <hr>
                <template >
                    <div class="item d-flex justify-content-between align-items-start">
                        <div class="label-text">ご契約プラン</div>
                        <div class="detail">
                            <div class="d-flex justify-content-center">
                                @{{ showTextCountFriend() }}
                            </div>

                        </div>
                    </div>
                    <div class="item d-flex justify-content-between align-items-start">
                        <div class="label-text">お支払い開始日</div>
                        <div class="detail">@{{ formatDate(bot.datetime_first_payment) }}</div>
                    </div>
                    <div class="item d-flex justify-content-between align-items-start">
                        <div class="label-text">ご利用料金</div>
                        <div class="detail">@{{  formatNumber(bot.amount_payment) }}円/月 (税込)</div>
                    </div>
                    <div class="item d-flex justify-content-between align-items-start">
                        <div class="label-text">お支払い期間</div>
                        <div class="detail">
                            <div class="d-flex justify-content-end mb-2">@{{ billType(bot.contract_bill_type) }}</div>
                        </div>
                    </div>
                    <div class="item d-flex justify-content-between align-items-start">
                        <div class="label-text">次回決済日</div>
                        <div class="detail">
                            <div class="d-flex justify-content-end mb-2">@{{ expiredDateContract() ? formatDate(expiredDateContract(), 'YYYY年MM月DD日') : '-'}}</div>
                        </div>
                    </div>
                    <div class="item d-flex justify-content-between align-items-start">
                        <div class="label-text">決済方法</div>
                        <div class="detail">
                            <div class="d-flex justify-content-end mb-2">@{{ paymentMethod(bot.payment_method) }}</div>
                        </div>
                    </div>
                    <div class="item d-flex justify-content-between align-items-start" v-if="bot.payment_method == 1">
                        <div class="label-text">決済カード情報</div>
                        <div class="detail">
                            <div class="d-flex justify-content-end mb-2">****-****-****-@{{ bot.univa_last_four_card }}</div>
                            <button  v-if="bot.max_friend_plan != 3 && bot.status != 3" class="button-ripple button10" @click="redirectPage('change_card')">メインカード情報を変更する</button>
                        </div>
                    </div>
                    <div class="item d-flex justify-content-between align-items-start" v-if="bot.payment_method == 1">
                        <div class="label-text">サブ決済カード情報</div>
                        <div class="detail" v-if="bot.sub_card">
                            <div class="d-flex justify-content-end mb-2">****-****-****-@{{ bot.sub_card.univa_last_four_card }}</div>
                            <div class="d-flex" v-if="bot.max_friend_plan != 3 && bot.status != 3">
                                <button class="button-ripple button10 mr-2" @click="redirectPage('add_sub_card')">サブカード情報を変更する</button>
                                <button class="button-ripple button11" @click="redirectPage('remove_sub_card')">カード情報を削除</button>
                            </div>
                        </div>
                        <div class="detail" v-else>
                            <div class="d-flex justify-content-end mb-2">登録なし</div>
                            <button  v-if="bot.max_friend_plan != 3 && bot.status != 3" class="button-ripple button10" @click="redirectPage('add_sub_card')">サブ決済カードを登録する</button>
                        </div>
                    </div>

                </template>
            </div>
        </div>
        @include('basic.bill.modals.index.export_bill_transfer',['detail_page'=>1])
        @include('basic.bill.modals.index.transfer_info')
        @include('basic.payment_history.modals.download_invoices')
        @include('basic.bill.modals.detail.confirm_remove_subcard')
    </section>
@endsection

@push('script')
{{--    <script src="/js/tailwindcss.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>
        var bot = @json($botContract);
        var user = @json($user);
        var cardBillMaxFriend = @json($cardBillMaxFriend);
        var totalFriend = @json($totalFriend);
        const plan_pro_fee = '{{ $planProFee }}';
        const basic_fee = '{{ $basicFee }}';
    </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/datetime.js?v={{config('sns-line.version')}}"></script>
<script src="/_assets/modules/bill/js/mixins/invoices.js?v={{config('sns-line.version')}}"></script>
<script src="/_assets/modules/bill/js/download_invoice.js?v={{config('sns-line.version')}}"></script>
<script src="/_assets/modules/bill/js/detail_bill_fail.js?v={{config('sns-line.version')}}"></script>
<script src="{{ asset('js/jspdf.debug.js') }}"></script>
<script src="{{ asset('js/jspdf.min.js') }}"></script>
<script src="{{ asset('js/html2canvas.min.js') }}"></script>
<script src="{{ asset('js/html2pdf.min.js') }}"></script>
@endpush