@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">
                <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.extend_contract.step1')
                </div>
                <div v-if="step_active == stepEnd && steps[stepEnd].status == STATUS.DONE" class="success">
                    @include('basic.bill.components.extend_contract.step3')
                </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);
        var plan_pro_fee = '{{ $planProFee }}';
        var 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/extend_contract.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