@extends('layout.basic.main')
@push('css')
    <link rel="stylesheet" href="/css/booking/setting_slot.css?v={{config("sns-line.version")}}">
    <style>
        a, span, div, .btn{
            font-weight: bold;
        }
        .row-setting-slot {
            width: 70%;
            min-width: 1040px;
        }

        #settingActionUrlModal #close_modal_action {
            line-height: 40px !important;
        }

        #settingActionUrlModal .ic-close {
            line-height: 15px !important;
            top: 5px !important;
        }

        .ic-cal-ip {
            position: absolute;
            left: 8px;
            top: 5px;
            color: rgba(190, 190, 190, 1);
            cursor: pointer;
        }

        .c_h_tooltip {
            position: relative;
            display: inline-flex;
            margin-left: 12px;
        }

        .c_h_tooltip .c_h_tooltip-text {
            visibility: hidden;
            width: 200px;
            color: #000;
            text-align: left;
            border-radius: 6px;
            padding: 8px;
            position: absolute;
            z-index: 1;
            bottom: 140%;
            opacity: 0;
            transition: opacity 0.3s;
            border: 1px solid #d1d1d1;
            transform: translate(-48%);
            font-size: 12px;
            background-color: white;
        }

        .c_h_tooltip:hover .c_h_tooltip-text {
            visibility: visible;
            opacity: 1;
            box-shadow: 0 2px 5px rgb(0 0 0 / 30%);
        }

        .c_h_option-c {
            display: flex;
            flex-direction: row;
            margin: auto 0;
            align-items: center;
        }

        .c_h_tooltip .c_h_tooltip-text::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: 0;
            border-width: 5px;
            border-style: solid;
            border-color: #fff transparent transparent transparent;
        }

        .c_h_tooltip-text * {
            line-height: 25px;
        }
    </style>
@endpush
@section('content')
    <br/>
<div class="col-xs-12" id="app_setting_slot" v-cloak>
    <div class="row d-flex align-item-center">
        <div class="font-weight-bold title-setting-slot">詳細設定</div>
    </div>
    <br/>
    <div class="row">
        <div class="row-setting-slot d-flex">
            <div class="label-setting">予約枠表示</div>
            <div class="item-setting">
                <div class="row-item-setting">
                    <label>予約枠の残数</label>
                    <div class="custom-radio-setting-slot">
                        <input type="radio" name="is_hide_remain" v-model="is_hide_remain" id="is_hide_remain_1" value="1"><label for="is_hide_remain_1">表示</label>
                    </div>
                    <div class="custom-radio-setting-slot">
                        <input type="radio" name="is_hide_remain" v-model="is_hide_remain" id="is_hide_remain_2" value="0"><label for="is_hide_remain_2">非表示</label>
                    </div>
                </div>
                <div class="row-item-setting">
                    <label>受付期間終了した予約枠</label>
                    <div class="custom-radio-setting-slot">
                        <input type="radio" name="is_show_expire" v-model="is_show_slot_expire" id="is_show_expire_1" value="1"><label for="is_show_expire_1">表示</label>
                    </div>
                    <div class="custom-radio-setting-slot">
                        <input type="radio" name="is_show_expire" v-model="is_show_slot_expire" id="is_show_expire_2" value="0"><label for="is_show_expire_2">非表示</label>
                    </div>
                </div>
                <div class="row-item-setting">
                    <label>満席の予約枠</label>
                    <div class="custom-radio-setting-slot">
                        <input type="radio" name="is_show_slot_over" v-model="is_show_slot_over" id="is_show_slot_over_1" value="1"><label for="is_show_slot_over_1">表示</label>
                    </div>
                    <div class="custom-radio-setting-slot">
                        <input type="radio" name="is_show_slot_over" v-model="is_show_slot_over" id="is_show_slot_over_2" value="0"><label for="is_show_slot_over_2">非表示</label>
                    </div>
                </div>
            </div>
        </div>

        <div class="row-setting-slot d-flex">
            <div class="label-setting">予約人数</div>
            <div class="item-setting">
                <div class="limit_people d-flex align-items-center font-weight-bold">一回の予約人数上限
                    <label for="is_limit_people" style="margin-left: 40px;font-weight: bold">
                        <input type="checkbox" name="is_limit_people" v-model="is_limit_people" :checked="is_limit_people == 1" id="is_limit_people" value="1">人数を範囲で指定
                    </label>
                </div>
                <div class="number_people d-flex align-item-center">
                    <input v-if="is_limit_people" type="text" class="form-control" v-model="min_people"
                           name="min_people" style="width: 100px"><span v-if="is_limit_people"
                                                                        style="align-self: end; font-weight: bold;font-size: 13px;margin-left: 5px">人</span>
                    <div v-if="is_limit_people" style="padding: 0 10px">〜</div>
                    <input type="text" class="form-control" v-model="limit_people" name="limit_people"
                           style="width: 100px"><span
                            style="align-self: end; font-weight: bold;font-size: 13px;margin-left: 5px">人</span>
                </div>
            </div>
        </div>

        <div class="row-setting-slot d-flex">
            <div class="label-setting">リマインド配信
                <div class="c_h_tooltip">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="15px" style="fill: #7D9195;">
                        <path d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 400c-18 0-32-14-32-32s13.1-32 32-32c17.1 0 32 14 32 32S273.1 400 256 400zM325.1 258L280 286V288c0 13-11 24-24 24S232 301 232 288V272c0-8 4-16 12-21l57-34C308 213 312 206 312 198C312 186 301.1 176 289.1 176h-51.1C225.1 176 216 186 216 198c0 13-11 24-24 24s-24-11-24-24C168 159 199 128 237.1 128h51.1C329 128 360 159 360 198C360 222 347 245 325.1 258z"/>
                    </svg>
                    <span class="c_h_tooltip-text">
                        <p>イベント開催日時を基準に</p>
                        <p>リマインドが配信されます</p>
                    </span>
                </div>
            </div>
            <div class="item-setting">
                <div class="div_user_remind" style="display: flex">
                    <div class="custom-radio-setting-slot">
                        <input type="radio" name="is_use_remind" v-model="is_use_remind" id="use_remind_1"
                               value="0"><label for="use_remind_1">利用しない</label>
                    </div>
                    <div class="custom-radio-setting-slot">
                        <input type="radio" name="is_use_remind" v-model="is_use_remind" id="use_remind_2"
                               value="1"><label for="use_remind_2">利用する</label>
                    </div>
                </div>
                <div class="div_user_remind d-flex align-items-center">
                    <div class="custom-radio-setting-slot">
                        {{--                        <input type="radio" name="is_use_remind" v-model="is_use_remind" id="use_remind_2"--}}
                        {{--                               value="1"><label for="use_remind_2">利用する</label>--}}
                        リマインド選択
                    </div>
                    <div class="slt_remind">
                        <select class="form-control my_class" name="remind_id" v-model="remind_id"
                                :disabled="is_use_remind == 0">
                            @foreach($events as $event)
                                <option value="{{ $event->id }}">{{ $event->event_name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
{{--                @if($slot['is_event_many_date'] == 'many')--}}
                    <div class="div_user_remind d-flex align-items-center">
                        <div class="custom-radio-setting-slot">配信終了日時
                            <div style="position: absolute;right: 20px;top: 1px;">
                                <div class="c_h_tooltip">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="15px"
                                         style="fill: #7D9195;">
                                        <path d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 400c-18 0-32-14-32-32s13.1-32 32-32c17.1 0 32 14 32 32S273.1 400 256 400zM325.1 258L280 286V288c0 13-11 24-24 24S232 301 232 288V272c0-8 4-16 12-21l57-34C308 213 312 206 312 198C312 186 301.1 176 289.1 176h-51.1C225.1 176 216 186 216 198c0 13-11 24-24 24s-24-11-24-24C168 159 199 128 237.1 128h51.1C329 128 360 159 360 198C360 222 347 245 325.1 258z"/>
                                    </svg>
                                    <span class="c_h_tooltip-text">
                                        <p>イベント開始日時を配信終了日</p>
                                        <p>時として設定してください</p>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div>
                            <div class="input-group box-date" style="position: relative; float: left; width: 160px;">
                                <input type="text" readonly="readonly"
                                       id="event_time_date"
                                       value="{{$event_time ? \Illuminate\Support\Carbon::parse($event_time->event_date)->format('Y-m-d') : \Illuminate\Support\Carbon::now()->format('Y-m-d') }}"
                                       class="input-cal datepicker"
                                       style="width: 145px;padding-left: 30px; height: 34px">
                                <span class="ic-cal-ip"><i class="far fa-calendar"></i></span>
                            </div>
                            <div style="float: left;">
                                <input type="time" class="form-control" style="width: 145px;"
                                       value="{{$event_time ? $event_time->event_start_time : '08:00'}}"
                                       id="event_time_time">
                            </div>
                            <span style="line-height: 34px; margin-left: 10px;">に配信終了</span>
                        </div>
                    </div>
{{--                @endif--}}
                <div class="note_remind" style="width: 790px">
                    <p>予約日程が変更された場合</p>
                    <p>上記で設定したリマインド配信停止後、（設定されている場合）変更された日程のリマインドが配信されます。</p>
                    <p>予約日程がキャンセルされた場合</p>
                    <p>上記で設定したリマインド配信は停止します。</p>
                </div>
            </div>
        </div>

        <div class="row-setting-slot d-flex" style="flex-wrap: wrap; border-bottom: 0">
            <div class="label-setting">アクション</div>
            <div class="item-setting" style="width: 100%">
                <div class="list-action">
                    <div class="row-item-action">
                        <div class="lable-item-action">優先稼働アクション</div>
                        <div class="div_using_action_slot">
                            <div class="custom-radio-setting-slot">
                                <input type="radio" name="using_action_slot" v-model="using_action_slot" id="using_action_slot_1" value="0"><label for="using_action_slot_1">予約枠（下記）のアクション</label>
                            </div>

                            <div class="custom-radio-setting-slot">
                                <input type="radio" name="using_action_slot" v-model="using_action_slot" id="using_action_slot_2" value="1"><label for="using_action_slot_2">コース別アクション</label>
                            </div>
                        </div>
                    </div>

                    <div class="row-item-action" :class="(action_id_booking_success && list_action_booking_success && list_action_booking_success.length > 0) ? 'align-items-label-action-start' : ''">
                        <div class="lable-item-action" :class="(action_id_booking_success && list_action_booking_success && list_action_booking_success.length > 0) ? 'lable-item-action-margin-top' : ''">予約受付時</div>
                        <div class="add-action" :class="(action_id_booking_success && list_action_booking_success && list_action_booking_success.length > 0) ? 'text-right' : 'text-left'">
                            <a style="cursor: pointer; text-decoration: underline" v-if="action_id_booking_success && list_action_booking_success && list_action_booking_success.length > 0" @click="openModalAction(action_id_booking_success, 'success')">編集</a>
                            <button type="button" v-else class="btn btn-add-action-plan btn-sns-line btn-sns-line-warning" @click="openModalAction(action_id_booking_success, 'success')">設定</button>
                            <input type="hidden" name="action_id_booking_success" v-model="action_id_booking_success">
                            <div class="list-action-item">
                                <div class="item-action" v-for="(item, indexAction) in list_action_booking_success">
                                    @include('layout.modal_setting.label_action')
                                                                {{-- <span v-if="item.type == 'tag'">【タグ】タグ
                                                                    <span v-for="(itemTag, indexTag) in item.list_tags">@{{  indexTag == 0 ? '' : ',' }}@{{ itemTag.name }}</span>を<span
                                                                            v-if="item.data.action == 1">つける</span><span v-else>はずす</span>
                                                                </span>
                                    <span v-else-if="item.type == 'scenario'">【ステップ】
                                                                    <span v-if="item.data.action != 1">@{{ item.data.scenario_name }}</span><span v-else>購読停止・予約キャンセル</span>
                                                                </span>
                                    <span v-else-if="item.type == 'template'">【テンプレート】
                                                                    <span>@{{ item.data.template_name }}</span>
                                                                </span>
                                    <span v-else-if="item.type == 'text'">【テキスト】
                                                                    <span>@{{ item.data.content | shortContent }}</span>
                                                                </span>
                                    <span v-else-if="item.type == 'richmenu'">【リッチメニュー】
                                                                    <span v-if="item.data.action != 1">@{{ item.data.richmenu_name }}表示</span><span v-else>表示を停止</span>
                                                                </span>
                                    <span v-else-if="item.type == 'remind'">【リマインド】<span>@{{ item.data.remind_name }}</span></span>
                                    <span v-else-if="item.type == 'bookmark'">
                                                    <span class="action-title">【ブックマーク】</span>
                                                    <span v-if="item.data.action == 1">ブックマークする</span>
                                                    <span v-else>ブックマークを外す</span>
                                                </span>
                                                <span v-else-if="item.type == 'block'">
                                                    <span class="action-title">【ブロック・非表示】</span>
                                                    <span v-if="item.data.action == 1">ブロックする</span>
                                                    <span v-if="item.data.action == 2">ブロック解除</span>
                                                    <span v-if="item.data.action == 3">表示</span>
                                                    <span v-if="item.data.action == 4">非表示</span>
                                                </span>
                                                <span v-else-if="item.type == 'compliant_status'">
                                                    <span class="action-title">【対応ステータス】</span>
                                                    <span v-if="item.data.action == 1">@{{ item.data.content }}をつける</span>
                                                    <span v-else> ステータスを外す</span>
                                                </span>

                                    <span v-else-if="item.type == 'friend_info'">【友だち情報】
                                                                    <span v-show="item.data.action == 1">登録情報を削除</span>
                                                                    <span v-show="item.data.action == 3">当日日付を登録</span>
                                                                    <span v-show="item.data.action == 2">
                                                                        <span v-show="item.data.type == 1"><span style="margin-right: 5px">@{{item.data.name}}</span>(選択肢): @{{ item.data.content | shortContentFriendInfo }}</span>
                                                                        <span v-show="item.data.type == 2"><span style="margin-right: 5px">@{{item.data.name}}</span>(記述): @{{ item.data.content | shortContentFriendInfo }}</span>
                                                                        <span v-show="item.data.type == 3"><span style="margin-right: 5px">@{{item.data.name}}</span>(年月日): @{{ item.data.content | shortContentFriendInfo }}</span>
                                                                        <span v-show="item.data.type == 6"><span style="margin-right: 5px">@{{item.data.name}}</span>(ポイント): @{{ item.data.content | shortContentFriendInfo }} ポイントを</span>
                                                                            <span v-show="item.data.type == 6">
                                                                                <span v-show="item.data.type == 6 && item.data.action_content == 1">（上書き）</span>
                                                                                <span v-show="item.data.type == 6 && item.data.action_content == 2">（プラス）</span>
                                                                                <span v-show="item.data.type == 6 && item.data.action_content == 3">（マイナス）</span>
                                                                            </span>
                                                                        </span>
                                                                    </span> --}}
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row-item-action" :class="(action_id_booking_change && list_action_booking_change && list_action_booking_change.length > 0) ? 'align-items-label-action-start' : ''">
                        <div class="lable-item-action" :class="(action_id_booking_change && list_action_booking_change && list_action_booking_change.length > 0) ? 'lable-item-action-margin-top' : ''">予約変更時</div>
                        <div class="add-action" :class="(action_id_booking_change && list_action_booking_change && list_action_booking_change.length > 0) ? 'text-right' : 'text-left'">
                            <a style="cursor: pointer; text-decoration: underline" v-if="action_id_booking_change && list_action_booking_change && list_action_booking_change.length > 0" @click="openModalAction(action_id_booking_change, 'change')">編集</a>
                            <button type="button" v-else class="btn btn-add-action-plan btn-sns-line btn-sns-line-warning" @click="openModalAction(action_id_booking_change, 'change')">設定</button>
                            <input type="hidden" name="action_id_booking_change" v-model="action_id_booking_change">
                            <div class="list-action-item">
                                <div class="item-action" v-for="(item, indexAction) in list_action_booking_change">
                                    @include('layout.modal_setting.label_action')
                                                                {{-- <span v-if="item.type == 'tag'">【タグ】タグ
                                                                    <span v-for="(itemTag, indexTag) in item.list_tags">@{{  indexTag == 0 ? '' : ',' }}@{{ itemTag.name }}</span>を<span
                                                                            v-if="item.data.action == 1">つける</span><span v-else>はずす</span>
                                                                </span>
                                    <span v-else-if="item.type == 'scenario'">【ステップ】
                                                                    <span v-if="item.data.action != 1">@{{ item.data.scenario_name }}</span><span v-else>購読停止・予約キャンセル</span>
                                                                </span>
                                    <span v-else-if="item.type == 'template'">【テンプレート】
                                                                    <span>@{{ item.data.template_name }}</span>
                                                                </span>
                                    <span v-else-if="item.type == 'text'">【テキスト】
                                                                    <span>@{{ item.data.content | shortContent }}</span>
                                                                </span>
                                    <span v-else-if="item.type == 'richmenu'">【リッチメニュー】
                                                                    <span v-if="item.data.action != 1">@{{ item.data.richmenu_name }}表示</span><span v-else>表示を停止</span>
                                                                </span>
                                    <span v-else-if="item.type == 'remind'">【リマインド】<span>@{{ item.data.remind_name }}</span></span>
                                    <span v-else-if="item.type == 'bookmark'">
                                                    <span class="action-title">【ブックマーク】</span>
                                                    <span v-if="item.data.action == 1">ブックマークする</span>
                                                    <span v-else>ブックマークを外す</span>
                                                </span>
                                                <span v-else-if="item.type == 'block'">
                                                    <span class="action-title">【ブロック・非表示】</span>
                                                    <span v-if="item.data.action == 1">ブロックする</span>
                                                    <span v-if="item.data.action == 2">ブロック解除</span>
                                                    <span v-if="item.data.action == 3">表示</span>
                                                    <span  v-if="item.data.action == 4">非表示</span>
                                                </span>
                                                <span v-else-if="item.type == 'compliant_status'">
                                                    <span class="action-title">【対応ステータス】</span>
                                                    <span v-if="item.data.action == 1">@{{ item.data.content }}をつける</span>
                                                    <span v-else> ステータスを外す</span>
                                                </span>

                                    <span v-else-if="item.type == 'friend_info'">【友だち情報】
                                                                    <span v-show="item.data.action == 1">登録情報を削除</span>
                                                                    <span v-show="item.data.action == 3">当日日付を登録</span>
                                                                    <span v-show="item.data.action == 2">
                                                                        <span v-show="item.data.type == 1"><span style="margin-right: 5px">@{{item.data.name}}</span>(選択肢): @{{ item.data.content | shortContentFriendInfo }}</span>
                                                                        <span v-show="item.data.type == 2"><span style="margin-right: 5px">@{{item.data.name}}</span>(記述): @{{ item.data.content | shortContentFriendInfo }}</span>
                                                                        <span v-show="item.data.type == 3"><span style="margin-right: 5px">@{{item.data.name}}</span>(年月日): @{{ item.data.content | shortContentFriendInfo }}</span>
                                                                        <span v-show="item.data.type == 6"><span style="margin-right: 5px">@{{item.data.name}}</span>(ポイント): @{{ item.data.content | shortContentFriendInfo }} ポイントを</span>
                                                                            <span v-show="item.data.type == 6">
                                                                                <span v-show="item.data.type == 6 && item.data.action_content == 1">（上書き）</span>
                                                                                <span v-show="item.data.type == 6 && item.data.action_content == 2">（プラス）</span>
                                                                                <span v-show="item.data.type == 6 && item.data.action_content == 3">（マイナス）</span>
                                                                            </span>
                                                                        </span>
                                                                    </span> --}}
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row-item-action" :class="(action_id_at_time_cancel && list_action_at_time_cancel && list_action_at_time_cancel.length > 0) ? 'align-items-label-action-start' : ''">
                        <div class="lable-item-action" :class="(action_id_at_time_cancel && list_action_at_time_cancel && list_action_at_time_cancel.length > 0) ? 'lable-item-action-margin-top' : ''">キャンセル時</div>
                        <div class="add-action" :class="(action_id_at_time_cancel && list_action_at_time_cancel && list_action_at_time_cancel.length > 0) ? 'text-right' : 'text-left'">
                            <a  style="cursor: pointer; text-decoration: underline" v-if="action_id_at_time_cancel && list_action_at_time_cancel && list_action_at_time_cancel.length > 0" @click="openModalAction(action_id_at_time_cancel, 'cancel')">編集</a>
                            <button type="button" v-else class="btn btn-add-action-plan btn-sns-line btn-sns-line-warning" @click="openModalAction(action_id_at_time_cancel, 'cancel')">設定</button>
                            <input type="hidden" name="action_id_at_time_cancel" v-model="action_id_at_time_cancel">
                            <div class="list-action-item">
                                <div class="list-action-item">
                                    <div class="item-action" v-for="(item, indexAction) in list_action_at_time_cancel">
                                        @include('layout.modal_setting.label_action')
                                                                {{-- <span v-if="item.type == 'tag'">【タグ】タグ
                                                                    <span v-for="(itemTag, indexTag) in item.list_tags">@{{  indexTag == 0 ? '' : ',' }}@{{ itemTag.name }}</span>を<span
                                                                            v-if="item.data.action == 1">つける</span><span v-else>はずす</span>
                                                                </span>
                                        <span v-else-if="item.type == 'scenario'">【ステップ】
                                                                    <span v-if="item.data.action != 1">@{{ item.data.scenario_name }}</span><span v-else>購読停止・予約キャンセル</span>
                                                                </span>
                                        <span v-else-if="item.type == 'template'">【テンプレート】
                                                                    <span>@{{ item.data.template_name }}</span>
                                                                </span>
                                        <span v-else-if="item.type == 'text'">【テキスト】
                                                                    <span>@{{ item.data.content | shortContent }}</span>
                                                                </span>
                                        <span v-else-if="item.type == 'richmenu'">【リッチメニュー】
                                                                    <span v-if="item.data.action != 1">@{{ item.data.richmenu_name }}表示</span><span v-else>表示を停止</span>
                                                                </span>
                                        <span v-else-if="item.type == 'remind'">【リマインド】<span>@{{ item.data.remind_name }}</span></span>
                                        <span v-else-if="item.type == 'bookmark'">
                                                    <span class="action-title">【ブックマーク】</span>
                                                    <span v-if="item.data.action == 1">ブックマークする</span>
                                                    <span v-else>ブックマークを外す</span>
                                                </span>
                                                <span v-else-if="item.type == 'block'">
                                                    <span class="action-title">【ブロック・非表示】</span>
                                                    <span v-if="item.data.action == 1">ブロックする</span>
                                                    <span v-if="item.data.action == 2">ブロック解除</span>
                                                    <span v-if="item.data.action == 3">表示</span>
                                                    <span  v-if="item.data.action == 4">非表示</span>
                                                </span>
                                                <span v-else-if="item.type == 'compliant_status'">
                                                    <span class="action-title">【対応ステータス】</span>
                                                    <span v-if="item.data.action == 1">@{{ item.data.content }}をつける</span>
                                                    <span v-else> ステータスを外す</span>
                                                </span>

                                        <span v-else-if="item.type == 'friend_info'">【友だち情報】
                                                                    <span v-show="item.data.action == 1">登録情報を削除</span>
                                                                    <span v-show="item.data.action == 3">当日日付を登録</span>
                                                                    <span v-show="item.data.action == 2">
                                                                        <span v-show="item.data.type == 1"><span style="margin-right: 5px">@{{item.data.name}}</span>(選択肢): @{{ item.data.content | shortContentFriendInfo }}</span>
                                                                        <span v-show="item.data.type == 2"><span style="margin-right: 5px">@{{item.data.name}}</span>(記述): @{{ item.data.content | shortContentFriendInfo }}</span>
                                                                        <span v-show="item.data.type == 3"><span style="margin-right: 5px">@{{item.data.name}}</span>(年月日): @{{ item.data.content | shortContentFriendInfo }}</span>
                                                                        <span v-show="item.data.type == 6"><span style="margin-right: 5px">@{{item.data.name}}</span>(ポイント): @{{ item.data.content | shortContentFriendInfo }} ポイントを</span>
                                                                            <span v-show="item.data.type == 6">
                                                                                <span v-show="item.data.type == 6 && item.data.action_content == 1">（上書き）</span>
                                                                                <span v-show="item.data.type == 6 && item.data.action_content == 2">（プラス）</span>
                                                                                <span v-show="item.data.type == 6 && item.data.action_content == 3">（マイナス）</span>
                                                                            </span>
                                                                        </span>
                                                                    </span> --}}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row-item-action" :class="(action_id_booking_approve && list_action_booking_approve && list_action_booking_approve.length > 0) ? 'align-items-label-action-start' : ''">
                        <div class="lable-item-action" :class="(action_id_booking_approve && list_action_booking_approve && list_action_booking_approve.length > 0) ? 'lable-item-action-margin-top' : ''">予約リクエスト承認時</div>
                        <div class="add-action" :class="(action_id_booking_approve && list_action_booking_approve && list_action_booking_approve.length > 0) ? 'text-right' : 'text-left'">
                            <a style="cursor: pointer; text-decoration: underline" v-if="action_id_booking_approve && list_action_booking_approve && list_action_booking_approve.length > 0" @click="openModalAction(action_id_booking_approve, 'approve')">編集</a>
                            <button  type="button" class="btn btn-add-action-plan btn-sns-line btn-sns-line-warning" v-else @click="openModalAction(action_id_booking_approve, 'approve')">設定</button>
                            <input type="hidden" name="action_id_booking_approve" v-model="action_id_booking_approve">
                            <div class="list-action-item">
                                <div class="list-action-item">
                                    <div class="item-action" v-for="(item, indexAction) in list_action_booking_approve">
                                        @include('layout.modal_setting.label_action')
                                                                {{-- <span v-if="item.type == 'tag'">【タグ】タグ
                                                                    <span v-for="(itemTag, indexTag) in item.list_tags">@{{  indexTag == 0 ? '' : ',' }}@{{ itemTag.name }}</span>を<span
                                                                            v-if="item.data.action == 1">つける</span><span v-else>はずす</span>
                                                                </span>
                                        <span v-else-if="item.type == 'scenario'">【ステップ】
                                                                    <span v-if="item.data.action != 1">@{{ item.data.scenario_name }}</span><span v-else>購読停止・予約キャンセル</span>
                                                                </span>
                                        <span v-else-if="item.type == 'template'">【テンプレート】
                                                                    <span>@{{ item.data.template_name }}</span>
                                                                </span>
                                        <span v-else-if="item.type == 'text'">【テキスト】
                                                                    <span>@{{ item.data.content | shortContent }}</span>
                                                                </span>
                                        <span v-else-if="item.type == 'richmenu'">【リッチメニュー】
                                                                    <span v-if="item.data.action != 1">@{{ item.data.richmenu_name }}表示</span><span v-else>表示を停止</span>
                                                                </span>
                                        <span v-else-if="item.type == 'remind'">【リマインド】<span>@{{ item.data.remind_name }}</span></span>
                                        <span v-else-if="item.type == 'bookmark'">
                                                    <span class="action-title">【ブックマーク】</span>
                                                    <span v-if="item.data.action == 1">ブックマークする</span>
                                                    <span v-else>ブックマークを外す</span>
                                                </span>
                                                <span v-else-if="item.type == 'block'">
                                                    <span class="action-title">【ブロック・非表示】</span>
                                                    <span v-if="item.data.action == 1">ブロックする</span>
                                                    <span v-if="item.data.action == 2">ブロック解除</span>
                                                    <span v-if="item.data.action == 3">表示</span>
                                                    <span v-if="item.data.action == 4">非表示</span>
                                                </span>
                                                <span v-else-if="item.type == 'compliant_status'">
                                                    <span class="action-title">【対応ステータス】</span>
                                                    <span v-if="item.data.action == 1">@{{ item.data.content }}をつける</span>
                                                    <span v-else> ステータスを外す</span>
                                                </span>

                                        <span v-else-if="item.type == 'friend_info'">【友だち情報】
                                                                    <span v-show="item.data.action == 1">登録情報を削除</span>
                                                                    <span v-show="item.data.action == 3">当日日付を登録</span>
                                                                    <span v-show="item.data.action == 2">
                                                                        <span v-show="item.data.type == 1"><span style="margin-right: 5px">@{{item.data.name}}</span>(選択肢): @{{ item.data.content | shortContentFriendInfo }}</span>
                                                                        <span v-show="item.data.type == 2"><span style="margin-right: 5px">@{{item.data.name}}</span>(記述): @{{ item.data.content | shortContentFriendInfo }}</span>
                                                                        <span v-show="item.data.type == 3"><span style="margin-right: 5px">@{{item.data.name}}</span>(年月日): @{{ item.data.content | shortContentFriendInfo }}</span>
                                                                        <span v-show="item.data.type == 6"><span style="margin-right: 5px">@{{item.data.name}}</span>(ポイント): @{{ item.data.content | shortContentFriendInfo }} ポイントを</span>
                                                                            <span v-show="item.data.type == 6">
                                                                                <span v-show="item.data.type == 6 && item.data.action_content == 1">（上書き）</span>
                                                                                <span v-show="item.data.type == 6 && item.data.action_content == 2">（プラス）</span>
                                                                                <span v-show="item.data.type == 6 && item.data.action_content == 3">（マイナス）</span>
                                                                            </span>
                                                                        </span>
                                                                    </span> --}}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row-item-action" :class="(action_id_booking_denial && list_action_booking_denial && list_action_booking_denial.length > 0) ? 'align-items-label-action-start' : ''">
                        <div class="lable-item-action" :class="(action_id_booking_denial && list_action_booking_denial && list_action_booking_denial.length > 0) ? 'lable-item-action-margin-top' : ''">予約リクエスト否認時</div>
                        <div class="add-action" :class="(action_id_booking_denial && list_action_booking_denial && list_action_booking_denial.length > 0) ? 'text-right' : 'text-left'">
                            <a style="cursor: pointer; text-decoration: underline" v-if="action_id_booking_denial && list_action_booking_denial && list_action_booking_denial.length > 0" @click="openModalAction(action_id_booking_denial, 'denial')">編集</a>
                            <button style="cursor: pointer" type="button" v-else class="btn btn-add-action-plan btn-sns-line btn-sns-line-warning" @click="openModalAction(action_id_booking_denial, 'denial')">設定</button>
                            <input type="hidden" name="action_id_booking_denial" v-model="action_id_booking_denial">
                            <div class="list-action-item">
                                <div class="item-action" v-for="(item, indexAction) in list_action_booking_denial">
                                    @include('layout.modal_setting.label_action')
                                                                {{-- <span v-if="item.type == 'tag'">【タグ】タグ
                                                                    <span v-for="(itemTag, indexTag) in item.list_tags">@{{  indexTag == 0 ? '' : ',' }}@{{ itemTag.name }}</span>を<span
                                                                            v-if="item.data.action == 1">つける</span><span v-else>はずす</span>
                                                                </span>
                                    <span v-else-if="item.type == 'scenario'">【ステップ】
                                                                    <span v-if="item.data.action != 1">@{{ item.data.scenario_name }}</span><span v-else>購読停止・予約キャンセル</span>
                                                                </span>
                                    <span v-else-if="item.type == 'template'">【テンプレート】
                                                                    <span>@{{ item.data.template_name }}</span>
                                                                </span>
                                    <span v-else-if="item.type == 'text'">【テキスト】
                                                                    <span>@{{ item.data.content | shortContent }}</span>
                                                                </span>
                                    <span v-else-if="item.type == 'richmenu'">【リッチメニュー】
                                                                    <span v-if="item.data.action != 1">@{{ item.data.richmenu_name }}表示</span><span v-else>表示を停止</span>
                                                                </span>
                                    <span v-else-if="item.type == 'remind'">【リマインド】<span>@{{ item.data.remind_name }}</span></span>
                                    <span v-else-if="item.type == 'bookmark'">
                                                    <span class="action-title">【ブックマーク】</span>
                                                    <span v-if="item.data.action == 1">ブックマークする</span>
                                                    <span v-else>ブックマークを外す</span>
                                                </span>
                                                <span v-else-if="item.type == 'block'">
                                                    <span class="action-title">【ブロック・非表示】</span>
                                                    <span v-if="item.data.action == 1">ブロックする</span>
                                                    <span v-if="item.data.action == 2">ブロック解除</span>
                                                    <span v-if="item.data.action == 3">表示</span>
                                                    <span  v-if="item.data.action == 4">非表示</span>
                                                </span>
                                                <span v-else-if="item.type == 'compliant_status'">
                                                    <span class="action-title">【対応ステータス】</span>
                                                    <span v-if="item.data.action == 1">@{{ item.data.content }}をつける</span>
                                                    <span v-else> ステータスを外す</span>
                                                </span>

                                    <span v-else-if="item.type == 'friend_info'">【友だち情報】
                                                                    <span v-show="item.data.action == 1">登録情報を削除</span>
                                                                    <span v-show="item.data.action == 3">当日日付を登録</span>
                                                                    <span v-show="item.data.action == 2">
                                                                        <span v-show="item.data.type == 1"><span style="margin-right: 5px">@{{item.data.name}}</span>(選択肢): @{{ item.data.content | shortContentFriendInfo }}</span>
                                                                        <span v-show="item.data.type == 2"><span style="margin-right: 5px">@{{item.data.name}}</span>(記述): @{{ item.data.content | shortContentFriendInfo }}</span>
                                                                        <span v-show="item.data.type == 3"><span style="margin-right: 5px">@{{item.data.name}}</span>(年月日): @{{ item.data.content | shortContentFriendInfo }}</span>
                                                                        <span v-show="item.data.type == 6"><span style="margin-right: 5px">@{{item.data.name}}</span>(ポイント): @{{ item.data.content | shortContentFriendInfo }} ポイントを</span>
                                                                            <span v-show="item.data.type == 6">
                                                                                <span v-show="item.data.type == 6 && item.data.action_content == 1">（上書き）</span>
                                                                                <span v-show="item.data.type == 6 && item.data.action_content == 2">（プラス）</span>
                                                                                <span v-show="item.data.type == 6 && item.data.action_content == 3">（マイナス）</span>
                                                                            </span>
                                                                        </span>
                                                                    </span> --}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="text-center button-action" style="margin-top: 30px">
            <button type="button" class="btn btn-action-slot btn-sns-line btn-sns-line-dark" @click="backListSlot()" style="margin-right: 30px; font-size: 16px;">戻る</button>
            <button type="button" class="btn btn-action-slot btn-sns-line btn-sns-line-success" @click="saveSettingSlot()" style="font-size: 16px;">保存</button>
        </div>
    </div>
</div>
    @include('layout.modal_setting.modal_select_action')
    @include('layout.modal_filter_v2')
@endsection
@push('js')
    <script src="/js/form_answer/jquery.ui.datepicker-ja.js"></script>
    <script>
        var slot_id = '{{ $slot_id }}';
        var bot_id = '{{ $bot_id }}';
        var event_detail_id = '{{ $event_detail_id }}';
        var slot = null;
        var list_action_booking_success = [];
        var list_action_at_time_cancel = [];
        var list_action_booking_change = [];
        var list_action_booking_approve = [];
        var list_action_booking_denial = [];
    </script>
    <script src="/js/form_answer/vuedraggable.min.js"></script>
    <script src="/js/form_answer/vee-validate.rc7.min.js"></script>
    <script src="/js/form_answer/vee-validate_ja.min.js"></script>
    <script src="/js/booking/setting_slot.js?v={{config("sns-line.version")}}"></script>
    <script>
        $(document).ready(function () {
            $('.datepicker').datepicker({
                dateFormat: 'yy/mm/dd',
                language: 'ja',
                minDate: new Date(),
            });
        });
    </script>
    <script>
        var params = [];
        var basic_home_new = [];
    </script>
    <script src="/js/friendlist/modal_filter_v2.js?v={{ config('sns-line.version') }}"></script>
@endpush