{{--@extends('basic.calendar_management.bookings.layouts.main')--}}
{{--@push('css')--}}
{{--    <link rel="stylesheet" href="/css/bookings/top_page.css?v={{config('sns-line.version')}}">--}}
{{--    <link rel="stylesheet" href="/css/bookings/booking_history.css?v={{config('sns-line.version')}}">--}}
{{--    <link rel="stylesheet" href="/css/bookings/booking_top.css?v={{config('sns-line.version')}}">--}}
{{--    <link rel="stylesheet" href="/css/bookings/booking_step.css?v={{config('sns-line.version')}}">--}}
{{--    <link rel="stylesheet" href="/css/bookings/booking_status.css?v={{config('sns-line.version')}}">--}}
{{--@endpush--}}


<div v-if="step_booking == 5 && !register_notify_slot">
    <div class="course-content confirmed-content">
        <div class="confirmed-card">
            <div class="confirmed-status">
                <h3>まだ予約は完了していません</h3>
                <p>ご予約内容の最終確認をしてください</p>
            </div>
        </div>
        <div class="confirmed-content confirmed-content-2">
            <div class="cf-reservation-ct">
                <h3 class="cf-reservation-title">
                    予約内容
                </h3>
                <div class="cf-reservation-card">

                    <div class="field">
                        <h3>予約日時</h3>
                        <p>
                            @{{ moment(time_selected.received_booking_date).format('YYYY年MM月DD日') }}（@{{ getTextDayOfWeek(time_selected.received_booking_date) }}）@{{ time_selected.start_time }} - @{{ time_selected.end_time }}
                        </p>
                    </div>

                    <div class="field" v-show="course_preview.course_name">
                        <h3>@{{ calendar.booking_setting_name ? calendar.booking_setting_name : 'コース' }}</h3>
                        <p>
                            @{{ course_preview.course_name }}
                        </p>
                    </div>
                    <div class="field" v-show="selected_staff.id != undefined">
                        <h3>@{{ calendar.booking_setting_text_staff ? calendar.booking_setting_text_staff : 'スタッフ' }}</h3>
                        <p>
                            @{{ selected_staff.staff_name }}
                        </p>
                    </div>
                    <div class="field" style="margin-bottom: 0px"
                         v-show="calendar.is_use_payment == 1 || (calendar.is_use_payment == 0 && (calendar.display_course_cost == 1 || ( calendar.calendar_staff_type == CALENDAR_MANY_STAFF_TYPE && calendar.display_staff_cost == 1)))"
                    >
                        <h3>料金（税込）</h3>
                        <p>
                            ￥@{{ formatNumber(total_payment) }}-
                        </p>
                    </div>
                </div>
            </div>
            <div class="cf-customer-info">
                <h3 class="cf-customer-if-title">お客様情報</h3>
                <div class="cf-customer-if-card">
                    <div class="field"
                         v-for="(info, indexInfo) in friend_info_settings"
                    >
                        <h3 v-html="info.question"></h3>
                        <div v-if="info.sub_question"
                             v-html="info.sub_question"
                             class="sub-description-confirm">

                        </div>

                        <template v-if="info.form_type == FORM_TYPE_TEXTAREA">
                            <div class="preivew-value-info" style="white-space: pre-line; overflow: hidden; text-overflow: ellipsis; min-height: 100px; align-items: start" v-if="info.form_type != FORM_TYPE_DATETIME">@{{ Array.isArray(info.value) ? info.value.join('・') : info.value }}</div>
                        </template>
                        <template v-else-if="info.form_type == FORM_TYPE_RADIO">
                            <p class="preivew-value-info" style="white-space: pre-line; overflow: hidden; text-overflow: ellipsis;" v-if="info.form_type != FORM_TYPE_DATETIME">@{{ Array.isArray(info.value) ? info.value.join('・') : info.value_preview }}</p>
                        </template>
                        <template v-else>
                            <p class="preivew-value-info" style="white-space: pre-line; overflow: hidden; text-overflow: ellipsis" v-if="info.form_type != FORM_TYPE_DATETIME">@{{ Array.isArray(info.value) ? info.value.join('・') : info.value }}</p>
                            <p class="preivew-value-info" style="white-space: pre-line; overflow: hidden; text-overflow: ellipsis" v-else>@{{ info.value}}</p>
                        </template>

                    </div>
                </div>
            </div>
            <div class="cf-customer-info cf-customer-payment"
                v-show="checkHasPayment"
            >
                <template v-if="paymentTime != 2">
                    <h3 class="cf-customer-if-title">カード情報</h3>
                    <div class="cf-customer-if-card">
                        <div class="field">
                            <h3>カード番号</h3>
                            <p>**** - **** - **** - @{{ info_payment.last4 }}</p>
                        </div>
                        <div class="field">
                            <h3>有効期限</h3>
                            <p class="info-payment-input-40">@{{info_payment.expired_card ? info_payment.expired_card :
                                '--/--' }}</p>
                        </div>
                        <div class="field">
                            <h3>セキュリティ番号</h3>
                            <p class="info-payment-input-40">...</p>
                        </div>
                    </div>
                </template>
                <template v-else>
                    <h3 class="cf-customer-if-title">お支払い情報</h3>
                    <div class="field" style="margin-top: 15px;">
                        <h3 style="font-size: 14px; color: #222222;">お支払い料金</h3>
                        <p style="font-size: 14px; color: #222222;">￥@{{ formatNumber(total_payment) }}-（税込）</p>
                        <h3 style="font-size: 12px; color: #888888">現地決済</h3>
                    </div>
                </template>
            </div>

            <div class="cf-customer-info cf-term-of-service"
                v-show="calendar.show_policy == 1"
            >
                <h3 class="cf-customer-if-title cf-term-sv-title">ご利用規約</h3>
                <div class="cf-reservation-card cf-term-card">
                    <p v-html="calendar.content_policy" style="white-space: pre-line; overflow: hidden; text-overflow: ellipsis">

                    </p>
                </div>
                <div class="term-btn-agree">
                    <input type="checkbox" class="term-ck" id="singleCheckbox" v-model="isChecked">
                    <label for="singleCheckbox">同意する</label>
                </div>
            </div>
            <div class="note-term" v-show="calendarSetting.approve_type == 2">
                <div class="text-red">この予約はリクエスト制となります</div>
                <div class="text-normal mt-2">申込みをしても予約が確定するわけではありません</div>
                <div class="text-normal mt-2" v-show="calendar.is_use_payment == 1 && total_payment > 0">※前ページでカード情報を入力された方は、リクエストが承認された時に、カード決済が行われます。</div>
            </div>
            <div class="confirm-btn text-center">
                <button type="submit"
                        @click="order"
                        :disabled="is_processing_order"
                        class="btn box-shadow-btn"
                    :class="{'active-btn': isChecked || calendar.show_policy == 0}"
                >申し込む</button>
            </div>
        </div>
    </div>
</div>