{{--@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>@{{ calendar.booking_setting_name ? calendar.booking_setting_name : 'コース' }}</h3>
                        <p>
                            @{{ course_preview.course_name }}
                        </p>
                    </div>
                    <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.new_end_time }}
                        </p>
                    </div>
                    <div class="field" style="margin-bottom: 0px"
                         v-show="calendar.is_use_payment == 1 || (calendar.is_use_payment == 0 && calendar.is_display_course_cost == 1)"
                    >
                        <h3>料金（税込）</h3>
                        <p>
                            ￥@{{ formatNumber(course_preview.amount) }}-
                        </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 + (info.recording_time == 1 ? ' ' + info.time : '')}}</p>
                        </template>

                    </div>
                </div>
            </div>
            <div class="cf-customer-info cf-customer-payment"
                v-show="checkHasPayment"
            >
                <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>
            </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 && course_preview.amount > 0">※前ページでカード情報を入力された方は、リクエストが承認された時に、カード決済が行われます。</div>
            </div>
            <div class="confirm-btn text-center">
                <button type="submit"
                        @click="order"
                        :disabled="is_processing_order"
                        class="btn"
                    :class="{'active-btn box-shadow-btn': isChecked || calendar.show_policy == 0}"
                >申し込む</button>
            </div>
        </div>
    </div>
</div>