@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="/_assets/commons/css/list.css?v={{ config('sns-line.version') }}" type="text/css">
<link rel="stylesheet" href="/_assets/commons/css/lme_custom.css?v={{ config('sns-line.version') }}" type="text/css">
<link rel="stylesheet" href="/_assets/modules/bill/css/extend_contract.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('detail_contract')">契約詳細</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" style="margin-top: 0"  v-if="!is_transfer_error">
                <card v-show="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">
                    @include('basic.bill.components.recontract.step1')
                </div>
                <div v-if="step_active == stepEnd && steps[stepEnd].status == STATUS.DONE" class="success">
                    @include('basic.bill.components.recontract.step3')
                </div>
            </div>
            <div v-if="is_transfer_error">
                <div class="transfer_box" style="margin-top: 40px">
                    <img src="/images/logo_icon.png">
                    <div class="text-transfer-account-number">
                        お申し込みありがとうございます。<br>
                        お支払い口座を発行しています。
                    </div>
                    <div class="text-transfer-account-number-2">
                        発行が完了しましたら「<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 button04 px-[12px] py-[10px]" for="modalTrigger02"
                            @click="showModalDownloadInvoice()">請求書のダウンロード</label>
                        <button class="button button01-success" @click="redirectToAccountList" style="width: 130px">
                            ホームに戻る</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($bot);
        var subCard = @json($sub_card);
        const plan_pro_fee = '{{ config('sns-line.plan_pro_fee') }}';
        const basic_fee = '{{ $basic_fee }}';
    </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/recontract.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