{{-- レッスン予約 --}}
<div class="fd-card" v-if="selectedOption.value === 'lesson'">
    <div class="fd-card-table-header">
        <h2 class="fd-card-title">レッスン予約</h2>
        <div class="fd-salon-stats">
            <div class="fd-salon-stat">
                <span class="fd-salon-stat-label">来店合計回数</span>
                <lme-tag type="primary" size="md" :text="lessonVisitTotal + '回'"></lme-tag>
            </div>
            <div class="fd-salon-stat">
                <span class="fd-salon-stat-label">キャンセル合計回数</span>
                <lme-tag type="primary" size="md" :text="lessonCancelTotal + '回'"></lme-tag>
            </div>
        </div>
    </div>

    <div class="fd-card-table-wrap" ref="fdLessonTableTop">
        <lme-table
            key="lesson-table"
            :columns="lessonColumns"
            :data-source="lessonRows"
            row-key="id"
            empty-text="まだデータがありません"
            :fixed-right-count="1"
            max-height="540px"
            @sort-change="onLessonSortChange">

            <template slot="cell-status" slot-scope="{ record }">
                <lme-status :text="record.status_text" :color="record.status_color"></lme-status>
            </template>

            <template slot="cell-action_setting" slot-scope="{ record }">
                <span v-if="record.action_capture || record.message_ids"
                      class="has_action"
                      @click="openActionCapturePreview(record.action_capture, record.message_ids)">プレビュー</span>
                <span v-else>@{{ record.action_setting }}</span>
            </template>

            <template slot="cell-actions" slot-scope="{ record }">
                <div class="fd-salon-actions" :class="{ 'is-active': record.id === lessonActiveRowId }">
                    <lme-tooltip v-if="!record.action_capture && !record.message_ids" content="アクションがありません" position="top">
                        <lme-button-ghost color="blue" size="md" icon rounded disabled>
                            <lme-icon>
                                <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M8.0002 15.0004C4.14028 15.0004 1 11.8601 1 8.0002C1 4.14028 4.14028 1 8.0002 1C11.8601 1 15.0004 4.14028 15.0004 8.0002C15.0004 11.8601 11.8601 15.0004 8.0002 15.0004ZM8.0002 2.1871C4.79485 2.1871 2.1871 4.79485 2.1871 8.0002C2.1871 11.2051 4.79485 13.8124 8.0002 13.8124C11.2051 13.8124 13.8124 11.2051 13.8124 8.0002C13.8124 4.79485 11.2051 2.1871 8.0002 2.1871Z" fill="black"/>
                                    <path d="M6.46825 11.6089C6.34826 11.6089 6.21875 11.5135 6.21875 11.3594V4.64093C6.21875 4.48632 6.3477 4.39062 6.46717 4.39062C6.51938 4.39062 6.5701 4.40746 6.61385 4.43932L11.2408 7.79903C11.3064 7.84663 11.344 7.91996 11.344 8.00017C11.344 8.08039 11.3064 8.15371 11.2408 8.20132L6.61385 11.561C6.57063 11.5924 6.52029 11.6089 6.46825 11.6089ZM7.21595 6.10792V9.89243L9.82055 7.99972L7.21595 6.10792Z" fill="black"/>
                                </svg>
                            </lme-icon>
                        </lme-button-ghost>
                    </lme-tooltip>
                    <lme-button-ghost v-else color="blue" size="md" icon rounded @click="openActionCapturePreview(record.action_capture, record.message_ids)">
                        <lme-icon>
                            <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M8.0002 15.0004C4.14028 15.0004 1 11.8601 1 8.0002C1 4.14028 4.14028 1 8.0002 1C11.8601 1 15.0004 4.14028 15.0004 8.0002C15.0004 11.8601 11.8601 15.0004 8.0002 15.0004ZM8.0002 2.1871C4.79485 2.1871 2.1871 4.79485 2.1871 8.0002C2.1871 11.2051 4.79485 13.8124 8.0002 13.8124C11.2051 13.8124 13.8124 11.2051 13.8124 8.0002C13.8124 4.79485 11.2051 2.1871 8.0002 2.1871Z" fill="black"/>
                                <path d="M6.46825 11.6089C6.34826 11.6089 6.21875 11.5135 6.21875 11.3594V4.64093C6.21875 4.48632 6.3477 4.39062 6.46717 4.39062C6.51938 4.39062 6.5701 4.40746 6.61385 4.43932L11.2408 7.79903C11.3064 7.84663 11.344 7.91996 11.344 8.00017C11.344 8.08039 11.3064 8.15371 11.2408 8.20132L6.61385 11.561C6.57063 11.5924 6.52029 11.6089 6.46825 11.6089ZM7.21595 6.10792V9.89243L9.82055 7.99972L7.21595 6.10792Z" fill="black"/>
                            </svg>
                        </lme-icon>
                    </lme-button-ghost>
                    <lme-tooltip v-if="!record.has_schedule" content="配信予定がありません" position="top">
                        <lme-button-default
                            :type="record.id === lessonActiveRowId ? 'primary' : 'secondary'"
                            size="sm"
                            disabled>配信予定</lme-button-default>
                    </lme-tooltip>
                    <lme-button-default
                        v-else
                        :type="record.id === lessonActiveRowId ? 'primary' : 'secondary'"
                        size="sm"
                        @click="onLessonSchedule(record)">配信予定</lme-button-default>
                    <lme-button-ghost color="blue" size="sm" @click="onLessonDetail(record)">詳細</lme-button-ghost>
                </div>
            </template>
        </lme-table>
    </div>

    <div class="fd-card-pagination">
        <lme-pagination
            :pagination="lessonPagination"
            :is_limit="true"
            :arr_limit="[10, 20, 30, 50, 100]"
            end_text_limit="件表示"
            @change_page="onLessonPageChange"
            @change_limit="onLessonLimitChange">
        </lme-pagination>
    </div>

    {{-- 操作履歴 modal --}}
    <lme-modal v-model="lessonShowOpHistoryModal" title="操作履歴" :width="800">
        <div class="fd-salon-modal-body">
            <lme-table
                :columns="lessonOpHistoryColumns"
                :data-source="lessonOpHistoryRows"
                row-key="id"
                empty-text="まだデータがありません"
                max-height="320px">
            </lme-table>
            <div class="fd-salon-modal-footer">
                <lme-button-flat type="primary" size="lg" @click="lessonShowOpHistoryModal = false">閉じる</lme-button-flat>
            </div>
        </div>
    </lme-modal>

    {{-- 配信予定 modal --}}
    <lme-modal v-model="lessonShowBroadcastModal" title="配信予定" :width="800">
        <div class="fd-salon-modal-body">
            <div v-if="!lessonBroadcastSteps.length" class="fd-salon-modal-empty">まだデータがありません</div>
            <div v-else class="fd-salon-timeline">
                <div v-for="(step, idx) in lessonBroadcastSteps" :key="step.id" class="fd-salon-step" :class="{ 'is-last': idx === lessonBroadcastSteps.length - 1 }">
                    <div class="fd-salon-step-rail">
                        <div class="fd-salon-step-badge">@{{ idx + 1 }}</div>
                        <div class="fd-salon-step-line"></div>
                    </div>
                    <div class="fd-salon-step-body">
                        <div class="fd-salon-step-time">@{{ step.time }}</div>
                        <div class="fd-salon-step-card">
                            <div class="fd-salon-step-banner" :class="'is-' + step.banner_kind">@{{ step.banner_text }}</div>
                            <div class="fd-salon-step-tags">
                                <lme-tag v-if="step.course" type="default" size="md">
                                    <lme-icon size="14">
                                        <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M13.0003 15.0004H3.0004C2.72448 15.0004 2.5 14.7759 2.5 14.5V1.5004C2.5 1.22448 2.72448 1 3.0004 1H13.0003C13.2757 1 13.4998 1.22448 13.4998 1.5004V14.5C13.4998 14.7759 13.2757 15.0004 13.0003 15.0004ZM3.625 2.125V13.8754H12.373V2.125H11.3731V6.7582C11.3731 6.89566 11.2613 7.0075 11.1238 7.0075C11.0711 7.0075 11.0187 6.99056 10.9762 6.9598L9.7045 6.031L8.395 6.967C8.35218 6.99783 8.30187 7.01413 8.24952 7.01413C8.16921 7.01413 8.09339 6.97498 8.0467 6.9094C8.01652 6.86888 7.9999 6.81741 7.9999 6.7645V2.125H3.625ZM8.9377 2.125V5.428L9.7108 4.8754L10.4371 5.4046V2.125H8.9377Z" fill="black"/>
                                        </svg>
                                    </lme-icon>
                                    <span>@{{ step.course }}</span>
                                </lme-tag>
                            </div>
                            <template v-if="step.has_content && step.event_step_id > 0">
                                @include('basic.friend_detail.partials.broadcast-step-preview', ['stepVar' => 'step'])
                            </template>
                        </div>
                    </div>
                </div>
            </div>
            <div class="fd-salon-modal-footer">
                <lme-button-flat type="primary" size="lg" @click="lessonShowBroadcastModal = false">閉じる</lme-button-flat>
            </div>
        </div>
    </lme-modal>
</div>