{{-- イベント予約 --}}
<div class="fd-card" v-if="selectedOption.value === 'event'">

    {{-- Header: title + stats --}}
    <div class="fd-card-table-header">
        <h2 class="fd-card-title">イベント予約</h2>
        <div style="display: flex; gap: 16px; align-items: center;">
            <div style="display: flex; align-items: center; gap: 8px; background: var(--lme-bg-light); padding: 6px 12px;">
                <span style="font-size: var(--lme-text-md); color: var(--lme-text-secondary);">来店合計回数</span>
                <lme-tag type="primary" :text="eventVisitCount + '回'"></lme-tag>
            </div>
            <div style="display: flex; align-items: center; gap: 8px; background: var(--lme-bg-light); padding: 6px 12px;">
                <span style="font-size: var(--lme-text-md); color: var(--lme-text-secondary);">キャンセル合計回数</span>
                <lme-tag type="primary" :text="eventCancelCount + '回'"></lme-tag>
            </div>
        </div>
    </div>

    {{-- Table --}}
    <div class="fd-card-table-wrap" ref="fdEventTableTop">
        <lme-table
            key="event-table"
            :columns="eventColumns"
            :data-source="eventBookings"
            row-key="id"
            :fixed-right-count="1"
            empty-text="まだデータがありません"
            max-height="calc(100vh - 320px)"
            @sort-change="onEventSortChange">

            <template slot="cell-datetime" slot-scope="{ record }">
                <span>@{{ record.date }} @{{ record.dayOfWeek }} @{{ record.time }}~@{{ record.end_time || '指定なし' }}</span>
            </template>

            <template slot="cell-store_name" slot-scope="{ record }">
                <span style="font-size: var(--lme-text-md); color: var(--lme-text-primary);">@{{ record.store_name }}</span>
            </template>

            <template slot="cell-status" slot-scope="{ record }">
                <lme-status :text="record.status" :color="getEventStatusColor(record.status)"></lme-status>
            </template>

            <template slot="cell-payment_amount" slot-scope="{ record }">
                <span style="font-size: var(--lme-text-md); color: var(--lme-text-primary);">@{{ record.payment_amount }}</span>
            </template>

            <template slot="cell-payment_method" slot-scope="{ record }">
                <span style="font-size: var(--lme-text-md); color: var(--lme-text-primary);">@{{ record.payment_method }}</span>
            </template>

            <template slot="cell-payment_status" slot-scope="{ record }">
                <span style="font-size: var(--lme-text-md); color: var(--lme-text-primary);">@{{ record.payment_status }}</span>
            </template>

            <template slot="cell-action" slot-scope="{ record }">
                <span v-if="record.action_multi_capture_id"
                      class="has_action"
                      @click="openActionCapturePreview(record.action_multi_capture_id)">プレビュー</span>
                <span v-else style="font-size: var(--lme-text-md); color: var(--lme-text-primary);">@{{ record.action }}</span>
            </template>

            <template slot="cell-operations" slot-scope="{ record }">
                <div style="display: flex; align-items: center; gap: 8px;">
                    <lme-tooltip v-if="!record.action_multi_capture_id" content="アクションがありません" position="top">
                        <span style="display: inline-block;">
                            <lme-button-ghost :icon="true" :rounded="true" size="md" color="blue" disabled style="pointer-events: none;">
                                <lme-icon>
                                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M7.87522 15.7505C3.53281 15.7505 0 12.2176 0 7.87522C0 3.53281 3.53281 0 7.87522 0C12.2176 0 15.7505 3.53281 15.7505 7.87522C15.7505 12.2176 12.2176 15.7505 7.87522 15.7505ZM7.87522 1.33549C4.26921 1.33549 1.33549 4.26921 1.33549 7.87522C1.33549 11.4807 4.26921 14.4139 7.87522 14.4139C11.4807 14.4139 14.4139 11.4807 14.4139 7.87522C14.4139 4.26921 11.4807 1.33549 7.87522 1.33549Z" fill="#1677FF"/>
                                        <path d="M6.15178 11.9351C6.01679 11.9351 5.87109 11.8277 5.87109 11.6544V4.09604C5.87109 3.92212 6.01616 3.81445 6.15057 3.81445C6.2093 3.81445 6.26636 3.8334 6.31558 3.86924L11.5208 7.6489C11.5947 7.70246 11.637 7.78495 11.637 7.8752C11.637 7.96544 11.5947 8.04793 11.5208 8.10149L6.31558 11.8812C6.26696 11.9164 6.21033 11.9351 6.15178 11.9351ZM6.99294 5.74642V10.004L9.92312 7.87469L6.99294 5.74642Z" fill="#1677FF"/>
                                    </svg>
                                </lme-icon>
                            </lme-button-ghost>
                        </span>
                    </lme-tooltip>
                    <lme-button-ghost v-else :icon="true" :rounded="true" size="md" color="blue" @click="openEventPreview(record)">
                        <lme-icon>
                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M7.87522 15.7505C3.53281 15.7505 0 12.2176 0 7.87522C0 3.53281 3.53281 0 7.87522 0C12.2176 0 15.7505 3.53281 15.7505 7.87522C15.7505 12.2176 12.2176 15.7505 7.87522 15.7505ZM7.87522 1.33549C4.26921 1.33549 1.33549 4.26921 1.33549 7.87522C1.33549 11.4807 4.26921 14.4139 7.87522 14.4139C11.4807 14.4139 14.4139 11.4807 14.4139 7.87522C14.4139 4.26921 11.4807 1.33549 7.87522 1.33549Z" fill="#1677FF"/>
                                <path d="M6.15178 11.9351C6.01679 11.9351 5.87109 11.8277 5.87109 11.6544V4.09604C5.87109 3.92212 6.01616 3.81445 6.15057 3.81445C6.2093 3.81445 6.26636 3.8334 6.31558 3.86924L11.5208 7.6489C11.5947 7.70246 11.637 7.78495 11.637 7.8752C11.637 7.96544 11.5947 8.04793 11.5208 8.10149L6.31558 11.8812C6.26696 11.9164 6.21033 11.9351 6.15178 11.9351ZM6.99294 5.74642V10.004L9.92312 7.87469L6.99294 5.74642Z" fill="#1677FF"/>
                            </svg>
                        </lme-icon>
                    </lme-button-ghost>
                    <lme-button-ghost size="sm" color="blue" @click="openEventDetail(record)">詳細</lme-button-ghost>
                </div>
            </template>
        </lme-table>
    </div>

    {{-- Pagination --}}
    <div class="fd-card-pagination">
        <lme-pagination
            :pagination="eventPagination"
            :is_limit="true"
            :arr_limit="[10, 20, 30, 50, 100]"
            position="top"
            @change_page="onEventPageChange"
            @change_limit="onEventLimitChange">
        </lme-pagination>
    </div>
</div>

{{-- 操作履歴 modal --}}
<lme-modal v-model="showEventDetailModal" title="操作履歴" :width="800">
    <lme-table
        :columns="eventHistoryColumns"
        :data-source="eventDetailHistory"
        row-key="datetime"
        empty-text="まだデータがありません">
        <template slot="cell-operator" slot-scope="{ record }">
            <lme-tooltip v-if="record.operator && record.operator.length > 20" :content="record.operator" position="top">
                <span>@{{ record.operator.slice(0, 20) + '...' }}</span>
            </lme-tooltip>
            <span v-else>@{{ record.operator }}</span>
        </template>
    </lme-table>
    <div class="fd-trigger-footer">
        <lme-button-flat size="md" @click="showEventDetailModal = false">閉じる</lme-button-flat>
    </div>
</lme-modal>