{{--@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 == 7">
    <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>
                            @{{ booking_detail.course_name }}
                        </p>
                    </div>
                    <div class="field">
                        <h3>予約日時</h3>
                        <p>
                            @{{ moment(booking_detail.received_booking_date).format('YYYY年MM月DD日') }}（@{{ getTextDayOfWeek(booking_detail.received_booking_date) }}）@{{ moment(booking_detail.start_time, 'HH:mm:ss').format('HH:mm')}} - @{{ (booking_detail.end_time == '00:00:00') ? '24:00' : moment(booking_detail.end_time, 'HH:mm:ss').format('HH:mm') }}
                        </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>
                            ￥@{{ booking_detail.payment_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 booking_detail.friend_info"
                    >
                        <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="align-items: start; white-space: pre-line; overflow: hidden; text-overflow: ellipsis; min-height: 100px" 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="booking_detail.charge_id"
            >
                <h3 class="cf-customer-if-title">カード情報</h3>
                <div class="cf-customer-if-card">
                    <div class="field">
                        <h3>カード番号</h3>
                        <p>**** - **** - **** - @{{ booking_detail.last4 }}</p>
                    </div>
                    <div class="field">
                        <h3>有効期限</h3>
                        <p class="info-payment-input-40">@{{booking_detail.payment_card_expired ? booking_detail.payment_card_expired : '--/--' }}</p>
                    </div>
                    <div class="field">
                        <h3>セキュリティ番号</h3>
                        <p class="info-payment-input-40">...</p>
                    </div>
                </div>
            </div>

            <div class="note-term" v-show="calendarSettingCancel.approve_type == 2 && booking_detail.status != 0">
                <div class="text-red">このキャンセルはリクエスト制となります</div>
                <div class="text-normal mt-2" style="text-align: center">申込みをしてもキャンセルが確定するわけではありません。</div>
            </div>

            <div class="confirm-btn text-center">
                <button type="submit"
                        @click="cancel"
                        class="btn btn-cancel box-shadow-btn"
                >@{{ (calendarSettingCancel.approve_type == 1 || booking_detail.status == 0) ? 'キャンセルを確定する' : 'キャンセルを申し込む' }}  </button>
            </div>
        </div>
    </div>
</div>