@extends('layout.basic.main')
@section('title', 'イベント予約（開催日基本設定）')
@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;
        }

        .box_menu_p{
            display: flex;
        }

        .item_menu_p{
            font-size: 18px;
            padding: 8px 0px;
            cursor: pointer;
        }
        .item_menu_p label{
            cursor: pointer;
            color: #7D9195;
        }
        .item_menu_p.active label{
            color:#08BF5A ;
        }
        .item_menu_p.active .line{
            height: 4px;
            border-radius: 5px;
            background-color: #08BF5A;
            width: 100%
        }
        .btn_danger_cus{
            color: #F44336 !important;
            background-color: #FFDAD8
        }
        .btn_primary_cus{
            color: #5799DB !important;
            background-color: #D5E9FC
        }
        .btn_success_cus{
            color: #08BF5A !important;
            background-color: #CBF4DD
        }
        .input-border{
            border: 1.5px solid #E8E8E8 !important;
            height: 37px !important;
        }
        .icon-calendar{
            position: absolute;
            top: 4px;
            width: 36px;
            display: inline-block;
            left: 1px;
            background: unset;
            border: 0;
            padding: 8px 12px 9px;
        }

        .datetimepicker, .datetimepicker_end, .datetimepicker_allow_cancel, .datetimepicker_deadline{
            padding-left: 36px !important;
        }
        .txt_sp{
            font-size: 13px;
        }
        .item_row{
            border: 1.5px solid #F0F0F0;
            border-radius: 5px;
            padding: 15px;
            display: flex;
            margin-top: 16px;
        }
        .item_time {
            background: #F2F2F2 ;
            border-radius: 5px;
            padding: 9px 15px;
            margin-right: 5px;
            /*margin-bottom: 5px;*/
            font-size: 13px;
        }
        .box_plan_icon{
            display: flex;
        }
        .box_plan_icon >*{
            margin-left: 10px;
        }
        .box_plan {
            display: flex;
            background: #F8F8F8;
            align-items: center;
            justify-content: space-between;
            padding: 9px 15px 5px 15px;
            font-size: 13px;
            width: inherit;
            border-radius: 5px;
        }
        .box_plan_icon .line-icon{
            border: 1px solid #E0E0E0;
            border-radius: 5px;
            width: 36px;
            line-height: 35px;
            height: 35px;
        }
        .box_plan_icon .line-icon i{
           font-size: 17px;
            color: #7D9195;
         }
        .item_row .box_time_left{
            width: 128px;
        }
        .item_row .box_content_plan{
            width: calc(100% - 128px);
        }
        .item_plan{
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            width: 100%;
            margin-bottom: 10px;
        }
        .item_row .txt_sp{
            color: #8F9293;
            margin-right: 13px;
        }
        .button_add_del{
            display: flex;
            justify-content: space-between;
        }
        .box_content_bd{
            border: 2px solid #E8E8E8;
            border-radius: 5px;
            margin-top: 20px;
            padding: 15px
        }
        .title_border{
            display: flex;
            align-items: center;
        }
        .title_border .border{
            width: 11px;
            height: 35px;
            background: #08BF5A;
            border-radius: 3px;
            margin-right: 11px;
        }
        .title_border .text{
            font-size: 16px;
        }
        .notify {
            position: absolute;
            font-weight: bold;
            width: 600px;
            padding: 10px;
            top: -45px;
            box-shadow: 0px 3px 6px #00000029;
            border-radius: 5px;
            font-size: 13px !important;
            opacity: 0;
            background-color: white;
            left: 5px;
            transition: opacity 0.3s ease;
            visibility: hidden;
        }

        .fa-question-circle:hover  + .w-notify .notify {
            opacity: 1;
            visibility: visible;
        }
        .w-notify {
            padding-bottom: 30px;
            top: -71px;
            position: absolute;
            opacity: 0;
            visibility: hidden;
        }
        .fa-question-circle:hover {
            cursor: pointer;
        }

        .show-notify {
            position: relative;
            z-index: 1000;
        }
        .item-row{
            display: flex;
            align-items: center;
            margin-top: 25px;
        }
        .col_tt{
            width: 215px;
        }
        .col_content{
            display: flex;
            align-items: center;
        }
        .w-notify {
            padding-bottom: 30px;
            top: -71px;
            position: absolute;
            opacity: 0;
            visibility: hidden;
        }

        .fa-question-circle:hover + .w-notify {
            opacity: 1;
            visibility: visible;
        }

        .w-notify:hover {
            opacity: 1;
            visibility: visible;
        }

        .col_tt .text{
            color: #8F9293;
            font-size: 16px;
        }
        .box_gray{
            margin-top: 15px;
            background: #F8F8F8;
            border-radius: 5px;
            padding: 15px;
            font-size: 13px;
        }
        .box_gray .btn_tt{
            background: #7D9195;
            border-radius: 3px;
            padding: 9px 20px 5px 20px;
            width: 249px;
            text-align: center;
            font-size: 13px;
            margin-bottom: 5px;
            color: #FFFFFF;
        }
        .list-action-item{
            max-height: 140px;
            overflow: hidden;
        }

        .list-action-item .item-action{
            text-align: left;
            background-color: #F2F2F2;
            padding: 8px 10px;
            border-radius: 5px;
            margin-top: 8px;
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-weight: bold;
        }
        .col_content_action{
            width: 40%;
        }
        .box_request_cancel .item-row .col_tt{
            width: 241px;
        }
        .col_content_action .btn-add-action-plan{
            width: 90px;
        }
        .scroll-modal{
            max-height: 67vh;
            overflow: auto;
        }

        .radio_form_setting label {
            /*display: flex;*/
            cursor: pointer;
            font-weight: 500;
            position: relative;
            overflow: hidden;
        }
        .radio_form_setting label input {
            position: absolute;
            left: -9999px;
        }
        .radio_form_setting label input:checked + span {
            background-color: #F4FBF2;
            border: 1.5px solid #44CB80;
        }

        .radio_form_setting label input:checked + span:before {
            display: flex;
            flex-shrink: 0;
            content: "";
            background-color: #00a65a;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            margin-right: 11px;
            transition: 0.25s ease;
            border: 1px solid #96ADB2;
            /*border: 2px solid #08BF5A;*/
            box-shadow: inset 0 0 0 4px #F4FBF2;
        }
        .radio_form_setting label input:checked + span:after {
            width: 3px;
            height: 3px;
            border-radius: 50%;
            margin-right: 0.375em;
            background: red;
        }
        .radio_form_setting label span {
            display: flex;
            align-items: center;
            padding: 9px 12px;
            border: 1.5px solid #7D9195;
            border-radius: 5px;
            width: 100%;
            font-size: 12px;
        }
        .radio_form_setting label span:hover {
            background: #F4FBF2 ;
            border: 1.5px solid #44CB80;
        }
        .radio_form_setting label span:before {
            display: flex;
            flex-shrink: 0;
            content: "";
            width: 22px;
            height: 22px;
            border-radius: 50%;
            margin-right: 11px;
            background: #FFFFFF;
            border: 1px solid #96ADB2;
        }
        #app_setting_slot input[type=checkbox] {
            display:none;
        }
        #app_setting_slot .form-check {
            display: block;
            margin-bottom: 2px;
        }

        #app_setting_slot .form-check input {
            padding: 0;
            height: initial;
            width: initial;
            margin-bottom: 0;
            display: none;
            cursor: pointer;
        }

        #app_setting_slot .form-check label {
            position: relative;
            cursor: pointer;
        }

        #app_setting_slot .form-check label:before {
            content:'';
            -webkit-appearance: none;
            border: 1.5px solid #E8E8E8;
            border-radius: 5px;
            display: inline-block;
            position: relative;
            vertical-align: middle;
            cursor: pointer;
            margin-right: 5px;
            margin-bottom: 4px;
            padding: 8px;
        }

        #app_setting_slot .form-check input:checked + label:after {
            content: '';
            display: block;
            position: absolute;
            top: 5px;
            left: 6px;
            width: 6px;
            height: 9px;
            border: solid #51595C;
            border-width: 0 3px 3px 0;
            transform: rotate(45deg);
        }
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none !important;
            appearance: none !important;
            margin: 0;
            display: none;
        }

        /* Firefox */
        input[type=number] {
            -moz-appearance: textfield;
        }

        .bootstrap-timepicker-widget table td input{
            width: 35px !important; ;
        }
    </style>
@endpush
@section('content')
    <br/>
    <div class="" id="app_setting_slot" v-cloak>
        <div class="row d-flex align-item-center">
            <div class="col-md-12">
                <div class="font-weight-bold title-setting-slot">@{{ formatDate(dateSetting.date_start) }}</div>
                <div style="    font-size: 16px;    margin-top: 30px;">基本設定</div>
            </div>

        </div>
{{--        <div class="row">--}}
{{--            <div class="col-md-9" >--}}
{{--                <div style="display: flex; align-items: baseline; justify-content: space-between">--}}
{{--                    <div class="box_menu_p">--}}
{{--                        <div class="item_menu_p " style="margin-right: 30px" v-bind:class="{'active': (menu_top == 1)}"--}}
{{--                             v-on:click="changeMenuP(1)">--}}
{{--                            <label>開催時刻・コース</label>--}}
{{--                            <div class="line"></div>--}}
{{--                        </div>--}}
{{--                        <div class="item_menu_p " v-bind:class="{'active': (menu_top == 2)}"--}}
{{--                             v-on:click="changeMenuP(2)">--}}
{{--                            <label>予約時アクション</label>--}}
{{--                            <div class="line"></div>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                    <button type="button" class="btn btn-sns-line btn-sns-line-danger btn_danger_cus" style="">開催日を削除</button>--}}
{{--                </div>--}}
{{--                <div style="background-color: #E8E8E8; height: 3px; width: 100%; margin-bottom: 15px;"></div>--}}
{{--            </div>--}}
{{--        </div>--}}
{{--        <div class="boxTimeCourse" v-if="menu_top == 1">--}}
{{--            <div class="row">--}}
{{--                <div class="col-md-9" >--}}
{{--                    <div style="display: flex; align-items: center; justify-content: space-between;    font-size: 14px;">--}}
{{--                        <div style="display: flex; align-items: center">--}}
{{--                            <button class="btn btn-sns-line btn-sns-line-primary btn_primary_cus" style=" font-size: 14px;">--}}
{{--                                開催時刻追加--}}
{{--                            </button>--}}
{{--                            <button class="btn btn-sns-line btn-sns-line-success btn_success_cus"--}}
{{--                                    data-toggle='modal'--}}
{{--                                    data-target='#copyAndAddSlotModal'--}}
{{--                                    style="margin-left: 10px;    font-size: 14px;">--}}
{{--                                時刻を選択してコピー--}}
{{--                            </button>--}}
{{--                            <i class="fas fa-user-circle" style="color: #7D9195; margin-left: 15px;font-size: 18px; "></i><span class="txt_sp" style=" margin-left: 5px">定員数</span>--}}
{{--                            <i class="fas fa-yen-sign" style="color: #7D9195;margin-left: 10px; font-size: 18px;"></i><span  class="txt_sp"  style=" margin-left: 5px">コース料金</span>--}}
{{--                        </div>--}}
{{--                        <div style="display: flex; align-items: center">--}}
{{--                            <label style="width: 101px;">表示予約--}}
{{--                                <div class="c_h_tooltip">--}}
{{--                                    <i class="fas fa-question-circle" style="color: #7D9195;font-size: 18px;"></i>--}}
{{--                                    <span class="c_h_tooltip-text">--}}
{{--                                    <p>イベント開催日時を基準に</p>--}}
{{--                                    <p>リマインドが配信されます</p>--}}
{{--                                </span>--}}
{{--                                </div>--}}
{{--                            </label>--}}
{{--                            <div style="position: relative">--}}
{{--                                <input type="text" class="form-control datetimepicker_deadline input-border " name="date_end"--}}
{{--                                       id="date_end" style="width: 130px;" >--}}
{{--                                <label class="input-group-addon icon-calendar" for="date_end"--}}
{{--                                       style="position: absolute">--}}
{{--                                    --}}{{--                                        <span class="fal fa-calendar open-datetimepicker"></span>--}}
{{--                                    <i class="fal fa-calendar"></i>--}}
{{--                                </label>--}}

{{--                            </div>--}}
{{--                            <div style="width: 39%;">--}}
{{--                                <input type="time" class="form-control input-border"  style="width: 130px; margin-left: 10px"--}}
{{--                                       name="time_end">--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                    </div>--}}

{{--                </div>--}}
{{--            </div>--}}
{{--            <div class="row">--}}
{{--                <div class="col-md-9" >--}}
{{--                    <div class="item_row">--}}
{{--                        --}}{{--                    nếu có plan--}}
{{--                        <div class="box_time_left">--}}
{{--                            <div style="margin-bottom: 10px"> <span class="txt_sp"> 開始</span> <label class="item_time"><i class="far fa-clock"></i> 6:00</label></div>--}}
{{--                            <div> <span  class="txt_sp"> 終了</span> <label class="item_time"><i class="far fa-clock"></i> 7:00</label></div>--}}
{{--                        </div>--}}
{{--                        <div class="box_content_plan">--}}
{{--                            <div style="text-align: left">--}}
{{--                                <a href="/basic/booking_event_day/add-plan/817" class="btn btn-sns-line btn-sns-line-primary btn_primary_cus" style=" font-size: 14px;">コース追加</a>--}}
{{--                            </div>--}}
{{--                            <div class="text-right">--}}
{{--                                <button class="btn btn-sns-line btn-sns-line-danger btn_danger_cus" style=" font-size: 14px;">削除</button>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                    <div class="item_row">--}}
{{--                        --}}{{--                    nếu có 1 plan--}}
{{--                        <div class="box_time_left">--}}
{{--                            <div style="margin-bottom: 10px"> <span class="txt_sp"> 開始</span> <label class="item_time"><i class="far fa-clock"></i> 6:00</label></div>--}}
{{--                            <div> <span  class="txt_sp"> 終了</span> <label class="item_time"><i class="far fa-clock"></i> 7:00</label></div>--}}
{{--                        </div>--}}
{{--                        <div class="box_content_plan">--}}
{{--                            <div  class="item_plan">--}}
{{--                                <div class="box_plan">--}}
{{--                                    <label>コースA</label>--}}
{{--                                    <div>--}}
{{--                                        <i class="fas fa-user-circle" style="color: #7D9195; margin-left: 15px;font-size: 18px; "></i><span class="txt_sp" style=" margin-left: 5px">30</span>--}}
{{--                                        <i class="fas fa-yen-sign" style="color: #7D9195;margin-left: 10px; font-size: 18px;"></i><span  class="txt_sp"  style=" margin-left: 5px">1,000</span>--}}
{{--                                    </div>--}}
{{--                                </div>--}}
{{--                                <div class="box_plan_icon">--}}
{{--                                    <span class="line-icon"><i class="fas fa-pen"></i></span>--}}
{{--                                    <span class="line-icon"><i class="far fa-chevron-circle-up"></i></span>--}}
{{--                                    <span class="line-icon"><i class="far fa-chevron-circle-down"></i></span>--}}
{{--                                    <span class="line-icon"><i class="fal fa-copy icon-plan"></i></span>--}}
{{--                                    <span class="line-icon"><i class="fal fa-trash-alt icon-plan"></i></span>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                            <div class="button_add_del">--}}
{{--                                <button class="btn btn-sns-line btn-sns-line-primary btn_primary_cus" style=" font-size: 14px;">コース追加</button>--}}
{{--                                <button class="btn btn-sns-line btn-sns-line-danger btn_danger_cus" style=" font-size: 14px;">削除</button>--}}

{{--                            </div>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                    <div class="item_row">--}}
{{--                        --}}{{--                    nếu có nhieeuf plan--}}
{{--                        <div class="box_time_left">--}}
{{--                            <div style="margin-bottom: 10px"> <span class="txt_sp"> 開始</span> <label class="item_time"><i class="far fa-clock"></i> 6:00</label></div>--}}
{{--                            <div> <span  class="txt_sp"> 終了</span> <label class="item_time"><i class="far fa-clock"></i> 7:00</label></div>--}}
{{--                        </div>--}}
{{--                        <div class="box_content_plan">--}}
{{--                            <div class="item_plan" >--}}
{{--                                <div class="box_plan">--}}
{{--                                    <label>コースA</label>--}}
{{--                                    <div>--}}
{{--                                        <i class="fas fa-user-circle" style="color: #7D9195; margin-left: 15px;font-size: 18px; "></i><span class="txt_sp" style=" margin-left: 5px">30</span>--}}
{{--                                        <i class="fas fa-yen-sign" style="color: #7D9195;margin-left: 10px; font-size: 18px;"></i><span  class="txt_sp"  style=" margin-left: 5px">1,000</span>--}}
{{--                                    </div>--}}
{{--                                </div>--}}
{{--                                <div class="box_plan_icon">--}}
{{--                                    <span class="line-icon"><i class="fas fa-pen"></i></span>--}}
{{--                                    <span class="line-icon"><i class="far fa-chevron-circle-up"></i></span>--}}
{{--                                    <span class="line-icon"><i class="far fa-chevron-circle-down"></i></span>--}}
{{--                                    <span class="line-icon"><i class="fal fa-copy icon-plan"></i></span>--}}
{{--                                    <span class="line-icon"><i class="fal fa-trash-alt icon-plan"></i></span>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                            <div class="item_plan" >--}}
{{--                                <div class="box_plan">--}}
{{--                                    <label>コースA</label>--}}
{{--                                    <div>--}}
{{--                                        <i class="fas fa-user-circle" style="color: #7D9195; margin-left: 15px;font-size: 18px; "></i><span class="txt_sp" style=" margin-left: 5px">30</span>--}}
{{--                                        <i class="fas fa-yen-sign" style="color: #7D9195;margin-left: 10px; font-size: 18px;"></i><span  class="txt_sp"  style=" margin-left: 5px">1,000</span>--}}
{{--                                    </div>--}}
{{--                                </div>--}}
{{--                                <div class="box_plan_icon">--}}
{{--                                    <span class="line-icon"><i class="fas fa-pen"></i></span>--}}
{{--                                    <span class="line-icon"><i class="far fa-chevron-circle-up"></i></span>--}}
{{--                                    <span class="line-icon"><i class="far fa-chevron-circle-down"></i></span>--}}
{{--                                    <span class="line-icon"><i class="fal fa-copy icon-plan"></i></span>--}}
{{--                                    <span class="line-icon"><i class="fal fa-trash-alt icon-plan"></i></span>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                            <div class="button_add_del">--}}
{{--                                <button class="btn btn-sns-line btn-sns-line-primary btn_primary_cus" style=" font-size: 14px;">コース追加</button>--}}
{{--                                <button class="btn btn-sns-line btn-sns-line-danger btn_danger_cus" style=" font-size: 14px;">削除</button>--}}

{{--                            </div>--}}
{{--                        </div>--}}

{{--                    </div>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--            <div class="row">--}}
{{--                <div class="col-md-12" >--}}
{{--                    <button type="button" class="btn btn-sns-line btn-sns-line-lg btn-sns-line-success"--}}
{{--                            style="box-shadow: 0px 2px 0px #00000080;width: 200px ;margin-top: 20px;    margin-bottom: 15px;">保存</button> <br>--}}
{{--                    <button type="button" class="btn btn-sns-line btn-sns-line-lg btn-sns-line-dark"--}}
{{--                            style="box-shadow: 0px 2px 0px #00000080;width: 150px">保存</button>--}}

{{--                </div>--}}
{{--            </div>--}}
{{--        </div>--}}
        <div class="boxBookingAction"  >
            <div class="row box_action_booking">
                <div class="col-md-9" >
                    <div class="box_content_bd">
                        <div class="title_border">
                            <div class="border"></div>
                            <label class="text">予約枠設定</label>
                        </div>
                        <div class="item-row">
                            <div class="col_tt">
                                <label class="text" style="position: relative;">開催時間
                                    <i class="fas fa-star-of-life" style="    color: rgb(244, 67, 54);
                                                                        font-size: 10px;
                                                                        position: absolute;
                                                                        top: 5px;
                                                                        right: -22px;"> </i></label>
                            </div>
                            <div class="col_content" >
                                <div class="d-flex align-item-center" >

{{--                                    <input type="time" @blur="hideMessageError('time_start')"--}}
{{--                                           style="    width: 150px;"--}}
{{--                                           class="form-control input-border"--}}
{{--                                               name="time_start" v-model="itemSlot.time_start">--}}
                                    <div style="position: relative; display: inline-block; ">
                                        <input type="text"
                                               name="time_start"
                                               v-model="itemSlot.time_start"
                                               class="form-control input-border timepicker"
                                               style="width: 120px; padding-left: 40px">
                                        <i style="position: absolute; left: 8px; top: 10px; color: #7D9195;font-size: 18px;" class="fal fa-clock"></i>
                                    </div>

                                    <div v-show="itemSlot.is_hide_time_end == 0" style="padding: 0px 15px;font-size: 12px;">-</div>
{{--                                    <input type="time" v-if="itemSlot.is_hide_time_end == 0" class="form-control input-border"--}}
{{--                                           @blur="hideMessageError('time_end')"--}}
{{--                                           style="    width: 150px;"--}}
{{--                                           name="time_end" v-model="itemSlot.time_end">--}}
                                    <div  v-show="itemSlot.is_hide_time_end == 0" style="position: relative; display: inline-block; ">
                                        <input type="text"
                                               name="time_end"
                                               v-model="itemSlot.time_end"
                                               class="form-control input-border timepicker"
                                               style="width: 120px; padding-left: 40px">
                                        <i style="position: absolute; left: 8px; top: 10px; color: #7D9195;font-size: 18px;" class="fal fa-clock"></i>
                                    </div>

                                </div>
                                <div class="form-check">
                                    <input type="checkbox" name="is_hide_time_end" id="is_hide_time_end" v-model="itemSlot.is_hide_time_end" value="1">
                                    <label class="font-weight-bold form-check-label" for="is_hide_time_end" style="font-size: 14px; margin-left: 20px">終了時間を設定しない
                                    </label>
                                </div>

                            </div>
                        </div>
                        <div class="text-danger pt-1" v-show="errors.time_start">@{{ errors.time_start }}</div>
                        <div class="text-danger pt-1" v-show="errors.time_end">@{{ errors.time_end }}</div>
                        <div class="item-row">
                            <div class="col_tt">
                                <label class="text">締切日時  <i class="fas fa-star-of-life" style="    color: rgb(244, 67, 54);
                                                                        font-size: 10px;
                                                                        position: absolute;
                                                                        top: 5px;
                                                                        right: -22px;"> </i></label>
                            </div>
                            <div class="col_content">
                                <div class=" d-flex align-item-center" style="justify-content: space-between;flex-wrap: wrap">
                                    <span style="font-size: 13px">
                                        開催
                                    </span>
                                    <input class="form-control input-border" type="number"
                                           v-model="itemSlot.duration_deadline"
                                           style=" width: 79px;
                                        margin-left: 7px;margin-right: 5px;">
                                    <span style="font-size: 13px; margin-right: 5px;">日前の</span>
                                    <div >
                                        <div style="position: relative; display: inline-block; ">
                                            <input type="text"
                                                   name="time_deadline"
                                                   v-model="itemSlot.time_deadline"
                                                   class="form-control input-border timepicker"
                                                   style="width: 120px; padding-left: 40px">
                                            <i style="position: absolute; left: 8px; top: 10px; color: #7D9195;font-size: 18px;" class="fal fa-clock"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="text-danger pt-1" v-show="errors.duration_deadline">@{{ errors.duration_deadline }}</div>
                        <div class="text-danger pt-1" v-show="errors.time_deadline">@{{ errors.time_deadline }}</div>
                        <div class="item-row">
                            <div class="col_tt">
                                <label class="text">定員
                                    <div class="c_h_tooltip">
                                        <i class="fas fa-question-circle" style="color: #7D9195;font-size: 18px;"></i>
                                        <span class="c_h_tooltip-text" style="left: 28px;">
                                            <p>コース別に定員を設定した場合</p>
                                            <p>コースの定員が優先されます。</p>
                                        </span>
                                    </div>
                                </label>
                            </div>
                            <div class="col_content">
                                <input type="number" class="form-control input-border"   style="    width: 116px; margin-right: 10px"
                                       v-model="itemSlot.number_people"
                                       name="number_people">
                                <span>人</span>
                                <span style="margin-left: 15px">※設定なしの場合は無制限になります。</span>
                            </div>
                            <div class="text-danger pt-1" v-show="errors.number_people">@{{ errors.number_people }}</div>
                        </div>
                        <div class="item-row">
                            <div class="col_tt">
                                <label class="text">予約承認方法
                                </label>
                            </div>
                            <div class="col_content">
                                <div class="d-flex" style="position: relative;padding-right: 0; margin-right: 30px;    width: 108px;">
                                    <input type="radio" class="request_reservation custom-radio"
                                           v-model="itemSlot.approval_system"
                                           id="request_reservation_1" name="approval_system" value="0">
                                    <label for="request_reservation_1" class="font-weight-bold"
                                           style="font-size: 15px">全承認</label>
                                </div>
                                <div class=" d-flex" style="position: relative;padding-right: 0">
                                    <input type="radio" class="request_reservation custom-radio"
                                           v-model="itemSlot.approval_system"
                                           id="request_reservation_2" name="approval_system" value="1">
                                    <label for="request_reservation_2" class="font-weight-bold"
                                           style="font-size: 15px">リクエスト制</label>
                                </div>
                            </div>
                        </div>
                        <div class="item-row">
                            <div class="col_tt">
                                <label class="text">予約可能回数
                                </label>
                            </div>
                            <div class="col_content">
                                <div class="d-flex" style="position: relative;padding-right: 0; margin-right: 30px">
                                    <input type="radio" class="request_reservation custom-radio"
                                           v-model="itemSlot.times_booking"
                                           id="times_booking" name="times_booking" value="2">
                                    <label for="times_booking" class="font-weight-bold"
                                           style="font-size: 15px">1回のみ可能</label>
                                </div>
                                <div class=" d-flex" style="position: relative;padding-right: 0">
                                    <input type="radio" class="request_reservation custom-radio"
                                           v-model="itemSlot.times_booking"
                                           id="times_booking1" name="times_booking" value="1">
                                    <label for="times_booking1" class="font-weight-bold"
                                           style="font-size: 15px">何度でも可能</label>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="row box_action_booking">
                <div class="col-md-9" >
                    <div class="box_content_bd">
                        <div class="title_border">
                            <div class="border"></div>
                            <label class="text">リマインド配信</label>
                        </div>
                        <div class="item-row">
                            <div class="col_tt">
                                <label class="text">リマインド選択</label>
                            </div>
                            <div class="col_content" style="width: 50%">
                                <select class="form-control my_class input-border text-center" style="color:#96ADB2;"
                                        name="event_id" v-model="itemSlot.event_id">
                                    <option value="">リマインド配信を選択</option>
                                    @foreach($events as $event)
                                        <option value="{{ $event->id }}">{{ $event->event_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
{{--                        <div class="item-row">--}}
{{--                            <div class="col_tt">--}}
{{--                                <label class="text">配信終了日時--}}
{{--                                    <div class="c_h_tooltip">--}}
{{--                                        <i class="fas fa-question-circle" style="color: #7D9195;font-size: 18px;"></i>--}}
{{--                                        <span class="c_h_tooltip-text" >--}}
{{--                                            <p>イベント開催日時を基準に</p>--}}
{{--                                            <p>リマインドが配信されます</p>--}}
{{--                                        </span>--}}
{{--                                    </div>--}}
{{--                                </label>--}}
{{--                            </div>--}}
{{--                            <div class="col_content">--}}
{{--                                <div class="d-flex align-item-center" style="justify-content: space-between;flex-wrap: wrap">--}}
{{--                                    <div style="">--}}
{{--                                        <div style="position: relative">--}}
{{--                                            <input type="text" class="form-control datetimepicker_deadline input-border " name="date_end_remind"--}}
{{--                                                   style="width: 151px; margin-right: 15px;"--}}
{{--                                                   v-model="itemSlot.date_end_remind"--}}
{{--                                                   id="date_end_remind">--}}
{{--                                            <label class="input-group-addon icon-calendar" for="date_end_remind"--}}
{{--                                                   style="position: absolute">--}}
{{--                                                <span class="fal fa-calendar open-datetimepicker"></span>--}}
{{--                                            </label>--}}

{{--                                        </div>--}}
{{--                                    </div>--}}
{{--                                    <div style=" margin-right: 10px" >--}}
{{--                                        <input type="time" class="form-control input-border" name="time_end_remind"  v-model="itemSlot.time_end_remind" style="width: 151px;">--}}

{{--                                    </div>--}}
{{--                                    <span style="margin-top: 15px;">に配信終了</span>--}}

{{--                                </div>--}}
{{--                            </div>--}}
{{--                        </div>--}}
                        <div class="box_gray">
                            <div class="btn_tt">予約日程が変更された場合</div>
                            <span>上記で設定したリマインド配信停止後、（設定されている場合）変更された日程のリマインドが配信されます。</span><br>
                            <br>
                            <div class="btn_tt">予約日程がキャンセルされた場合</div>
                            <span>上記で設定したリマインド配信は停止します。</span>
                        </div>
                    </div>
                </div>
            </div>
{{--            <div class="row box_action_booking">--}}
{{--                <div class="col-md-9 text-right" style=" margin-top: 20px" >--}}
{{--                    <button class="btn btn-sns-line btn-sns-line-primary btn_primary_cus">共通設定を適用</button>--}}
{{--                    <button class="btn btn-sns-line btn-sns-line-secondary" style="background: #F2F2F2; color: #535657 !important; margin-left: 15px">リセット</button>--}}
{{--                </div>--}}
{{--            </div>--}}
            <div style="font-size: 15px; margin-top: 29px">
                アクション設定
            </div>

            {{--                         khi booking--}}
            <div class="row box_action_booking">
                <div class="col-md-9" >
                    <div class="box_content_bd"style="margin-top: 11px">
                        <div class="title_border">
                            <div class="border"></div>
                            <label class="text">予約時</label>
                        </div>
                       
                        
                        <div class="item-row">
                            <div class="col_tt">
                                <label class="text">優先アクション</label>
                            </div>
                            <div class="col_content">
                                <div class="d-flex" style="position: relative;padding-right: 0; margin-right: 30px">
                                    <input type="radio" class="request_reservation custom-radio"
                                           id="using_action_slot_booking_v1" name="using_action_slot_booking_v1"
                                           v-model="itemSlot.using_action_slot_booking_v1"
                                           value="0">
                                    <label for="using_action_slot_booking_v1" class="font-weight-bold"
                                           style="font-size: 15px">予約枠（下記）のアクション</label>
                                </div>
                                <div class=" d-flex" style="position: relative;padding-right: 0">
                                    <input type="radio" class="request_reservation custom-radio"
                                           id="using_action_slot_booking_v11" name="using_action_slot_booking_v1"
                                           v-model="itemSlot.using_action_slot_booking_v1"
                                           value="1">
                                    <label for="using_action_slot_booking_v11" class="font-weight-bold"
                                           style="font-size: 15px">コース別アクション</label>
                                </div>
                            </div>
                        </div>
{{--                        <div class="box_gray">--}}
{{--                            <div class="btn_tt">リマインド配信自動切り替え機能</div>--}}
{{--                            <span>予約日程が変更された場合</span><br>--}}
{{--                            <span>予約受付時アクションで設定したリマインド配信停止後、（設定されている場合）変更された日程の予約受付時アクションに設定されているリマインド配信が稼働します。</span><br><br>--}}
{{--                            <span>予約日程がキャンセルされた場合</span><br>--}}
{{--                            <span>設定したリマインド配信は停止します。</span><br>--}}
{{--                        </div>--}}
                        <div class="item-row">
                            <div class="col_tt">
                                <label class="text">予約受付時</label>
                            </div>
                            <div class="col_content_action">
                                <div class="add-action" :class="(itemSlot.action_id_booking_approve_v1 && itemSlot.list_action_booking_approve_v1 && itemSlot.list_action_booking_approve_v1.length > 0) ? 'text-right' : 'text-left'">
                                    <a style="cursor: pointer; text-decoration: underline" v-if="itemSlot.action_id_booking_approve_v1 && itemSlot.list_action_booking_approve_v1 && itemSlot.list_action_booking_approve_v1.length > 0" @click="openModalAction(itemSlot.action_id_booking_approve_v1, 'booking_approve')">
                                        <span v-if="itemSlot.list_action_booking_approve_v1.length > 3"> その他 @{{ itemSlot.list_action_booking_approve_v1.length - 3 }}件 編集 </span>
                                        <span v-else>編集</span>
                                    </a>
                                    <button type="button" v-else class="btn btn-add-action-plan btn-sns-line btn-sns-line-warning" @click="openModalAction(itemSlot.action_id_booking_approve_v1, 'booking_approve')">設定</button>
                                    <input type="hidden" name="action_id_booking_approve_v1" v-model="itemSlot.action_id_booking_approve_v1">
                                    <div class="list-action-item">
                                        <div class="item-action" v-for="(item, indexAction) in itemSlot.list_action_booking_approve_v1">
                                            @include('layout.modal_setting.label_action')
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="item-row">
                            <div class="col_tt">
                                <label class="text">予約リクエスト申請時</label>
                            </div>
                            <div class="col_content_action">
                                <div class="add-action" :class="(itemSlot.action_id_booking_admin_approve_v1 && itemSlot.list_action_booking_admin_approve_v1 && itemSlot.list_action_booking_admin_approve_v1.length > 0) ? 'text-right' : 'text-left'">
                                    <a style="cursor: pointer; text-decoration: underline" v-if="itemSlot.action_id_booking_admin_approve_v1 && itemSlot.list_action_booking_admin_approve_v1 && itemSlot.list_action_booking_admin_approve_v1.length > 0" @click="openModalAction(itemSlot.action_id_booking_admin_approve_v1, 'booking_admin_approve')">
                                        <span v-if="itemSlot.list_action_booking_admin_approve_v1.length > 3"> その他 @{{ itemSlot.list_action_booking_admin_approve_v1.length - 3 }}件 編集 </span>
                                        <span v-else>編集</span>
                                    </a>
                                    <button type="button" v-else class="btn btn-add-action-plan btn-sns-line btn-sns-line-warning" @click="openModalAction(itemSlot.action_id_booking_admin_approve_v1, 'booking_admin_approve')">設定</button>
                                    <input type="hidden" name="action_id_booking_admin_approve_v1" v-model="itemSlot.action_id_booking_admin_approve_v1">
                                    <div class="list-action-item">
                                        <div class="item-action" v-for="(item, indexAction) in itemSlot.list_action_booking_admin_approve_v1">
                                            @include('layout.modal_setting.label_action')
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="item-row">
                            <div class="col_tt">
                                <label class="text">予約リクエスト承認時</label>
                            </div>
                            <div class="col_content_action">
                                <div class="add-action" :class="(itemSlot.action_id_booking_approve_request_v1 && itemSlot.list_action_booking_approve_request_v1 && itemSlot.list_action_booking_approve_request_v1.length > 0) ? 'text-right' : 'text-left'">
                                    <a style="cursor: pointer; text-decoration: underline" v-if="itemSlot.action_id_booking_approve_request_v1 && itemSlot.list_action_booking_approve_request_v1 && itemSlot.list_action_booking_approve_request_v1.length > 0" @click="openModalAction(itemSlot.action_id_booking_approve_request_v1, 'booking_approve_request')">
                                        <span v-if="itemSlot.list_action_booking_approve_request_v1.length > 3"> その他 @{{ itemSlot.list_action_booking_approve_request_v1.length - 3 }}件 編集 </span>
                                        <span v-else>編集</span>
                                    </a>
                                    <button type="button" v-else class="btn btn-add-action-plan btn-sns-line btn-sns-line-warning" @click="openModalAction(itemSlot.action_id_booking_approve_request_v1, 'booking_approve_request')">設定</button>
                                    <input type="hidden" name="action_id_booking_approve_request_v1" v-model="itemSlot.action_id_booking_approve_request_v1">
                                    <div class="list-action-item">
                                        <div class="item-action" v-for="(item, indexAction) in itemSlot.list_action_booking_approve_request_v1">
                                            @include('layout.modal_setting.label_action')
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="item-row">
                            <div class="col_tt">
                                <label class="text">予約リクエスト否認時</label>
                            </div>
                            <div class="col_content_action">
                                <div class="add-action" :class="(itemSlot.action_id_booking_cancel_request_v1 && itemSlot.list_action_booking_cancel_request_v1 && itemSlot.list_action_booking_cancel_request_v1.length > 0) ? 'text-right' : 'text-left'">
                                    <a style="cursor: pointer; text-decoration: underline" v-if="itemSlot.action_id_booking_cancel_request_v1 && itemSlot.list_action_booking_cancel_request_v1 && itemSlot.list_action_booking_cancel_request_v1.length > 0" @click="openModalAction(itemSlot.action_id_booking_cancel_request_v1, 'booking_cancel_request')">
                                        <span v-if="itemSlot.list_action_booking_cancel_request_v1.length > 3"> その他 @{{ itemSlot.list_action_booking_cancel_request_v1.length - 3 }}件 編集 </span>
                                        <span v-else>編集</span>
                                    </a>
                                    <button type="button" v-else class="btn btn-add-action-plan btn-sns-line btn-sns-line-warning" @click="openModalAction(itemSlot.action_id_booking_cancel_request_v1, 'booking_cancel_request')">設定</button>
                                    <input type="hidden" name="action_id_booking_cancel_request_v1" v-model="itemSlot.action_id_booking_cancel_request_v1">
                                    <div class="list-action-item">
                                        <div class="item-action" v-for="(item, indexAction) in itemSlot.list_action_booking_cancel_request_v1">
                                            @include('layout.modal_setting.label_action')
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            {{--                         change request--}}
            <div class="row box_change_request">
                <div class="col-md-9" >
                    <div class="box_content_bd">
                        <div class="title_border">
                            <div class="border"></div>
                            <label class="text">予約変更</label>
                        </div>
                        <div class="item-row">
                            <div class="col_tt">
                                <label class="text">予約変更</label>
                            </div>
                            <div class="col_content">
                                {{--                                             tự approve--}}
                                <div class="d-flex" style="position: relative;padding-right: 0; margin-right: 30px">
                                    <input type="radio" class="request_reservation custom-radio" v-model="itemSlot.approval_system_change_request"
                                           id="approval_system_change_request" name="approval_system_change_request" value="0">
                                    <label for="approval_system_change_request" class="font-weight-bold"
                                           style="font-size: 15px">全承認</label>
                                </div>
                                {{--                                             admin approve--}}
                                <div class=" d-flex" style="position: relative;padding-right: 0; margin-right: 30px">
                                    <input type="radio" class="request_reservation custom-radio" v-model="itemSlot.approval_system_change_request"
                                           id="approval_system_change_request1" name="approval_system_change_request" value="1">
                                    <label for="approval_system_change_request1" class="font-weight-bold"
                                           style="font-size: 15px">リクエスト制</label>
                                </div>
                                {{--                                             không cho change--}}
                                <div class=" d-flex" style="position: relative;padding-right: 0">
                                    <input type="radio" class="request_reservation custom-radio" v-model="itemSlot.approval_system_change_request"
                                           id="approval_system_change_request2" name="approval_system_change_request" value="2">
                                    <label for="approval_system_change_request2" class="font-weight-bold"
                                           style="font-size: 15px">不可</label>
                                </div>
                            </div>
                        </div>
                        {{--                                     ngày giờ kết thúc nhận--}}
                        <div class="item-row">
                            <div class="col_tt">
                                <label class="text">変更受付期限</label>
                            </div>
                            <div class="col_content">
                                <div class="d-flex align-item-center" >
                                    <div style="display: flex;    align-items: baseline;"  v-show="!itemSlot.is_no_datetime_end_change_request">
{{--                                        <div style="position: relative">--}}
{{--                                            <input type="text" class="form-control datetimepicker_deadline input-border "--}}
{{--                                                   name="date_end_change_request" style="width: 150px; margin-right: 20px"--}}
{{--                                                   v-model="itemSlot.date_end_change_request" id="date_end_change_request"--}}
{{--                                                   :value="itemSlot.date_end_change_request">--}}
{{--                                            <label class="input-group-addon icon-calendar" for="date_end_change_request"--}}
{{--                                                   style="position: absolute">--}}
{{--                                                <span class="fal fa-calendar open-datetimepicker"></span>--}}
{{--                                            </label>--}}

{{--                                        </div>--}}

                                        <span style="font-size: 13px">
                                        開催
                                        </span>
                                        <input class="form-control input-border" type="number"
                                               v-model="itemSlot.duration_change_request"
                                               style=" width: 79px;
                                        margin-left: 7px;margin-right: 5px;">
                                        <span style="font-size: 13px; margin-right: 5px;">日前の</span>
                                    </div>
                                    <div v-show="!itemSlot.is_no_datetime_end_change_request" style=" margin-right: 30px" >
                                        <div style="position: relative; display: inline-block; ">
                                            <input type="text"
                                                   name="time_end_change_request"
                                                   v-model="itemSlot.time_end_change_request"
                                                   class="form-control input-border timepicker"
                                                   style="width: 120px; padding-left: 40px">
                                            <i style="position: absolute; left: 8px; top: 10px; color: #7D9195;font-size: 18px;" class="fal fa-clock"></i>
                                        </div>

{{--                                        <input type="time" class="form-control input-border" @blur="hideMessageError('time_end')"--}}
{{--                                               name="time_end_change_request" style="width: 150px" v-model="itemSlot.time_end_change_request">--}}
                                    </div>
                                    <div class="form-check">
                                        <input type="checkbox" name="is_no_datetime_end_change_request"
                                               id="is_no_datetime_end_change_request"
                                               v-model="itemSlot.is_no_datetime_end_change_request" value="1">
                                        <label class="font-weight-bold form-check-label" for="is_no_datetime_end_change_request" style="font-size: 14px; ">
                                           締切を設定しない
                                        </label>
                                    </div>


                                </div>
                            </div>
                        </div>
                        <div class="text-danger pt-1" v-show="errors.date_end_change_request">@{{ errors.date_end_change_request }}</div>
                        <div class="text-danger pt-1" v-show="errors.time_end_change_request">@{{ errors.time_end_change_request }}</div>

                        <div class="item-row">
                            <div class="col_tt">
                                <label class="text">優先アクション</label>
                            </div>
                            <div class="col_content">
                                <div class="d-flex" style="position: relative;padding-right: 0; margin-right: 30px">
                                    <input type="radio" class="request_reservation custom-radio"
                                           id="using_action_slot_change_request" name="using_action_slot_change_request"
                                           v-model="itemSlot.using_action_slot_change_request"
                                           value="0">
                                    <label for="using_action_slot_change_request" class="font-weight-bold"
                                           style="font-size: 15px">予約枠（下記）のアクション</label>
                                </div>
                                <div class=" d-flex" style="position: relative;padding-right: 0">
                                    <input type="radio" class="request_reservation custom-radio"
                                           id="using_action_slot_change_request1" name="using_action_slot_change_request"
                                           v-model="itemSlot.using_action_slot_change_request"
                                           value="1">
                                    <label for="using_action_slot_change_request1" class="font-weight-bold"
                                           style="font-size: 15px">コース別アクション</label>
                                </div>
                            </div>
                        </div>
                        <div class="item-row">
                            ※ 以下の項目は、この予約枠が変更先として選択されている場合に稼働するアクションです。
                        </div>
                        <div class="item-row">
                            <div class="col_tt">
                                <label class="text">予約変更時</label>
                            </div>
                            <div class="col_content_action">
                                <div class="add-action" :class="(itemSlot.action_id_change_request_booking_approve_v1 && itemSlot.list_action_change_request_booking_approve_v1 && itemSlot.list_action_change_request_booking_approve_v1.length > 0) ? 'text-right' : 'text-left'">
                                    <a style="cursor: pointer; text-decoration: underline" v-if="itemSlot.action_id_change_request_booking_approve_v1 && itemSlot.list_action_change_request_booking_approve_v1 && itemSlot.list_action_change_request_booking_approve_v1.length > 0" @click="openModalAction(itemSlot.action_id_change_request_booking_approve_v1, 'change_request_booking_approve')">
                                        <span v-if="itemSlot.list_action_change_request_booking_approve_v1.length > 3"> その他 @{{ itemSlot.list_action_change_request_booking_approve_v1.length - 3 }}件 編集 </span>
                                        <span v-else>編集</span>
                                    </a>
                                    <button type="button" v-else class="btn btn-add-action-plan btn-sns-line btn-sns-line-warning" @click="openModalAction(itemSlot.action_id_change_request_booking_approve_v1, 'change_request_booking_approve')">設定</button>
                                    <input type="hidden" name="action_id_change_request_booking_approve_v1" v-model="itemSlot.action_id_change_request_booking_approve_v1">
                                    <div class="list-action-item">
                                        <div class="item-action" v-for="(item, indexAction) in itemSlot.list_action_change_request_booking_approve_v1">
                                            @include('layout.modal_setting.label_action')
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="item-row">
                            <div class="col_tt">
                                <label class="text">変更リクエスト申請時</label>
                            </div>
                            <div class="col_content_action">
                                <div class="add-action" :class="(itemSlot.action_id_change_request_admin_approve_v1 && itemSlot.list_action_change_request_admin_approve_v1 && itemSlot.list_action_change_request_admin_approve_v1.length > 0) ? 'text-right' : 'text-left'">
                                    <a style="cursor: pointer; text-decoration: underline" v-if="itemSlot.action_id_change_request_admin_approve_v1 && itemSlot.list_action_change_request_admin_approve_v1 && itemSlot.list_action_change_request_admin_approve_v1.length > 0" @click="openModalAction(itemSlot.action_id_change_request_admin_approve_v1, 'change_request_admin_approve')">
                                        <span v-if="itemSlot.list_action_change_request_admin_approve_v1.length > 3"> その他 @{{ itemSlot.list_action_change_request_admin_approve_v1.length - 3 }}件 編集 </span>
                                        <span v-else>編集</span>
                                    </a>
                                    <button type="button" v-else class="btn btn-add-action-plan btn-sns-line btn-sns-line-warning" @click="openModalAction(itemSlot.action_id_change_request_admin_approve_v1, 'change_request_admin_approve')">設定</button>
                                    <input type="hidden" name="action_id_change_request_admin_approve_v1" v-model="itemSlot.action_id_change_request_admin_approve_v1">
                                    <div class="list-action-item">
                                        <div class="item-action" v-for="(item, indexAction) in itemSlot.list_action_change_request_admin_approve_v1">
                                            @include('layout.modal_setting.label_action')
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="item-row">
                            <div class="col_tt">
                                <label class="text">変更リクエスト承認時</label>
                            </div>
                            <div class="col_content_action">
                                <div class="add-action" :class="(itemSlot.action_id_change_request_approve_request_v1 && itemSlot.list_action_change_request_approve_request_v1 && itemSlot.list_action_change_request_approve_request_v1.length > 0) ? 'text-right' : 'text-left'">
                                    <a style="cursor: pointer; text-decoration: underline" v-if="itemSlot.action_id_change_request_approve_request_v1 && itemSlot.list_action_change_request_approve_request_v1 && itemSlot.list_action_change_request_approve_request_v1.length > 0" @click="openModalAction(itemSlot.action_id_change_request_approve_request_v1, 'change_request_approve_request')">
                                        <span v-if="itemSlot.list_action_change_request_approve_request_v1.length > 3"> その他 @{{ itemSlot.list_action_change_request_approve_request_v1.length - 3 }}件 編集 </span>
                                        <span v-else>編集</span>
                                    </a>
                                    <button type="button" v-else class="btn btn-add-action-plan btn-sns-line btn-sns-line-warning" @click="openModalAction(itemSlot.action_id_change_request_approve_request_v1, 'change_request_approve_request')">設定</button>
                                    <input type="hidden" name="action_id_change_request_approve_request_v1" v-model="itemSlot.action_id_change_request_approve_request_v1">
                                    <div class="list-action-item">
                                        <div class="item-action" v-for="(item, indexAction) in itemSlot.list_action_change_request_approve_request_v1">
                                            @include('layout.modal_setting.label_action')
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="item-row">
                            <div class="col_tt">
                                <label class="text">変更リクエスト否認時</label>
                            </div>
                            <div class="col_content_action">
                                <div class="add-action" :class="(itemSlot.action_id_change_request_cancel_request_v1 && itemSlot.list_action_change_request_cancel_request_v1 && itemSlot.list_action_change_request_cancel_request_v1.length > 0) ? 'text-right' : 'text-left'">
                                    <a style="cursor: pointer; text-decoration: underline" v-if="itemSlot.action_id_change_request_cancel_request_v1 && itemSlot.list_action_change_request_cancel_request_v1 && itemSlot.list_action_change_request_cancel_request_v1.length > 0" @click="openModalAction(itemSlot.action_id_change_request_cancel_request_v1, 'change_request_cancel_request')">
                                        <span v-if="itemSlot.list_action_change_request_cancel_request_v1.length > 3"> その他 @{{ itemSlot.list_action_change_request_cancel_request_v1.length - 3 }}件 編集 </span>
                                        <span v-else>編集</span>
                                    </a>
                                    <button type="button" v-else class="btn btn-add-action-plan btn-sns-line btn-sns-line-warning" @click="openModalAction(itemSlot.action_id_change_request_cancel_request_v1, 'change_request_cancel_request')">設定</button>
                                    <input type="hidden" name="action_id_change_request_cancel_request_v1" v-model="itemSlot.action_id_change_request_cancel_request_v1">
                                    <div class="list-action-item">
                                        <div class="item-action" v-for="(item, indexAction) in itemSlot.list_action_change_request_cancel_request_v1">
                                            @include('layout.modal_setting.label_action')
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            {{--                         request cancel--}}
            <div class="row box_request_cancel">
                <div class="col-md-9" >
                    <div class="box_content_bd">
                        <div class="title_border">
                            <div class="border"></div>
                            <label class="text">予約キャンセル</label>
                        </div>
                        <div class="item-row">
                            <div class="col_tt">
                                <label class="text">予約キャンセル</label>
                            </div>
                            <div class="col_content">
                                {{--                                             tự approve--}}
                                <div class="d-flex" style="position: relative;padding-right: 0; margin-right: 30px">
                                    <input type="radio" class="request_reservation custom-radio" v-model="itemSlot.approval_system_cancel"
                                           id="approval_system_cancel" name="approval_system_cancel" value="0">
                                    <label for="approval_system_cancel" class="font-weight-bold"
                                           style="font-size: 15px">全承認</label>
                                </div>
                                {{--                                             admin approve--}}
                                <div class=" d-flex" style="position: relative;padding-right: 0; margin-right: 30px">
                                    <input type="radio" class="request_reservation custom-radio" v-model="itemSlot.approval_system_cancel"
                                           id="approval_system_cancel1" name="approval_system_cancel" value="1">
                                    <label for="approval_system_cancel1" class="font-weight-bold"
                                           style="font-size: 15px">リクエスト制</label>
                                </div>
                                {{--                                             không cho change--}}
                                <div class=" d-flex" style="position: relative;padding-right: 0">
                                    <input type="radio" class="request_reservation custom-radio" v-model="itemSlot.approval_system_cancel"
                                           id="approval_system_cancel2" name="approval_system_cancel" value="2">
                                    <label for="approval_system_cancel2" class="font-weight-bold"
                                           style="font-size: 15px">不可</label>
                                </div>
                            </div>
                        </div>
                        {{--                                     ngày giờ kết thúc nhận--}}
                        <div class="item-row">
                            <div class="col_tt">
                                <label class="text">キャンセル受付期限</label>
                            </div>
                            <div class="col_content">
                                <div class="d-flex align-item-center" >
                                    <div  style=" display: flex; align-items: baseline" v-show="!itemSlot.is_no_datetime_end_cancel">

{{--                                        <div style="position: relative">--}}
{{--                                            <input type="text" class="form-control datetimepicker_deadline input-border " name="date_end_cancel"--}}
{{--                                                   style="width: 150px; margin-right: 20px"--}}
{{--                                                   v-model="itemSlot.date_end_cancel" id="date_end_cancel" :value="itemSlot.date_end_cancel">--}}
{{--                                            <label class="input-group-addon icon-calendar" for="date_end_cancel"--}}
{{--                                                   style="position: absolute">--}}
{{--                                                <span class="fal fa-calendar open-datetimepicker"></span>--}}
{{--                                            </label>--}}

{{--                                        </div>--}}
                                        <span style="font-size: 13px">
                                        開催
                                        </span>
                                        <input class="form-control input-border" type="number"
                                               v-model="itemSlot.duration_cancel"
                                               style=" width: 79px;
                                        margin-left: 7px;margin-right: 5px;">
                                        <span style="font-size: 13px; margin-right: 5px;">日前の</span>

                                    </div>
                                    <div  v-show="!itemSlot.is_no_datetime_end_cancel"  style=" margin-right: 30px" >
                                        <div style="position: relative; display: inline-block; ">
                                            <input type="text"
                                                   name="time_end_cancel"
                                                   v-model="itemSlot.time_end_cancel"
                                                   class="form-control input-border timepicker"
                                                   style="width: 120px; padding-left: 40px">
                                            <i style="position: absolute; left: 8px; top: 10px; color: #7D9195;font-size: 18px;" class="fal fa-clock"></i>
                                        </div>
{{--                                        <input type="time" style="width: 150px" class="form-control input-border" @blur="hideMessageError('time_end')" name="time_end_cancel" v-model="itemSlot.time_end_cancel">--}}
                                    </div>
                                    <div  class="form-check">
                                        <input type="checkbox" id="is_no_datetime_end_cancel" name="is_no_datetime_end_cancel" v-model="itemSlot.is_no_datetime_end_cancel" value="1">
                                        <label class="font-weight-bold form-check-label" for="is_no_datetime_end_cancel" style="font-size: 14px; ">
                                           締切を設定しない
                                        </label>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="text-danger pt-1" v-show="errors.date_end_cancel">@{{ errors.date_end_cancel }}</div>
                        <div class="text-danger pt-1" v-show="errors.time_end_cancel">@{{ errors.time_end_cancel }}</div>

                        <div class="item-row">
                            <div class="col_tt">
                                <label class="text">優先アクション</label>
                            </div>
                            <div class="col_content">
                                <div class="d-flex" style="position: relative;padding-right: 0; margin-right: 30px">
                                    <input type="radio" class="request_reservation custom-radio"
                                           id="using_action_slot_cancel" name="using_action_slot_cancel"
                                           v-model="itemSlot.using_action_slot_cancel"
                                           value="0">
                                    <label for="using_action_slot_cancel" class="font-weight-bold"
                                           style="font-size: 15px">予約枠（下記）のアクション</label>
                                </div>
                                <div class=" d-flex" style="position: relative;padding-right: 0">
                                    <input type="radio" class="request_reservation custom-radio"
                                           id="using_action_slot_cancel1" name="using_action_slot_cancel"
                                           v-model="itemSlot.using_action_slot_cancel"
                                           value="1">
                                    <label for="using_action_slot_cancel1" class="font-weight-bold"
                                           style="font-size: 15px">コース別アクション</label>
                                </div>
                            </div>
                        </div>

                        <div class="item-row">
                            <div class="col_tt">
                                <label class="text">予約キャンセル時</label>
                            </div>
                            <div class="col_content_action">
                                <div class="add-action" :class="(itemSlot.action_id_cancel_booking_approve_v1 && itemSlot.list_action_cancel_booking_approve_v1 && itemSlot.list_action_cancel_booking_approve_v1.length > 0) ? 'text-right' : 'text-left'">
                                    <a style="cursor: pointer; text-decoration: underline" v-if="itemSlot.action_id_cancel_booking_approve_v1 && itemSlot.list_action_cancel_booking_approve_v1 && itemSlot.list_action_cancel_booking_approve_v1.length > 0" @click="openModalAction(itemSlot.action_id_cancel_booking_approve_v1, 'cancel_booking_approve')">
                                        <span v-if="itemSlot.list_action_cancel_booking_approve_v1.length > 3"> その他 @{{ itemSlot.list_action_cancel_booking_approve_v1.length - 3 }}件 編集 </span>
                                        <span v-else>編集</span>
                                    </a>
                                    <button type="button" v-else class="btn btn-add-action-plan btn-sns-line btn-sns-line-warning" @click="openModalAction(itemSlot.action_id_cancel_booking_approve_v1, 'cancel_booking_approve')">設定</button>
                                    <input type="hidden" name="action_id_cancel_booking_approve_v1" v-model="itemSlot.action_id_cancel_booking_approve_v1">
                                    <div class="list-action-item">
                                        <div class="item-action" v-for="(item, indexAction) in itemSlot.list_action_cancel_booking_approve_v1">
                                            @include('layout.modal_setting.label_action')
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="item-row">
                            <div class="col_tt">
                                <label class="text">キャンセルリクエスト申請時</label>
                            </div>
                            <div class="col_content_action">
                                <div class="add-action" :class="(itemSlot.action_id_cancel_admin_approve_v1 && itemSlot.list_action_cancel_admin_approve_v1 && itemSlot.list_action_cancel_admin_approve_v1.length > 0) ? 'text-right' : 'text-left'">
                                    <a style="cursor: pointer; text-decoration: underline" v-if="itemSlot.action_id_cancel_admin_approve_v1 && itemSlot.list_action_cancel_admin_approve_v1 && itemSlot.list_action_cancel_admin_approve_v1.length > 0" @click="openModalAction(itemSlot.action_id_cancel_admin_approve_v1, 'cancel_admin_approve')">
                                        <span v-if="itemSlot.list_action_cancel_admin_approve_v1.length > 3"> その他 @{{ itemSlot.list_action_cancel_admin_approve_v1.length - 3 }}件 編集 </span>
                                        <span v-else>編集</span>
                                    </a>
                                    <button type="button" v-else class="btn btn-add-action-plan btn-sns-line btn-sns-line-warning" @click="openModalAction(itemSlot.action_id_cancel_admin_approve_v1, 'cancel_admin_approve')">設定</button>
                                    <input type="hidden" name="action_id_cancel_admin_approve_v1" v-model="itemSlot.action_id_cancel_admin_approve_v1">
                                    <div class="list-action-item">
                                        <div class="item-action" v-for="(item, indexAction) in itemSlot.list_action_cancel_admin_approve_v1">
                                            @include('layout.modal_setting.label_action')
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="item-row">
                            <div class="col_tt">
                                <label class="text">キャンセルリクエスト承認時</label>
                            </div>
                            <div class="col_content_action">
                                <div class="add-action" :class="(itemSlot.action_id_cancel_approve_request_v1 && itemSlot.list_action_cancel_approve_request_v1 && itemSlot.list_action_cancel_approve_request_v1.length > 0) ? 'text-right' : 'text-left'">
                                    <a style="cursor: pointer; text-decoration: underline" v-if="itemSlot.action_id_cancel_approve_request_v1 && itemSlot.list_action_cancel_approve_request_v1 && itemSlot.list_action_cancel_approve_request_v1.length > 0" @click="openModalAction(itemSlot.action_id_cancel_approve_request_v1, 'cancel_approve_request')">
                                        <span v-if="itemSlot.list_action_cancel_approve_request_v1.length > 3"> その他 @{{ itemSlot.list_action_cancel_approve_request_v1.length - 3 }}件 編集 </span>
                                        <span v-else>編集</span>
                                    </a>
                                    <button type="button" v-else class="btn btn-add-action-plan btn-sns-line btn-sns-line-warning" @click="openModalAction(itemSlot.action_id_cancel_approve_request_v1, 'cancel_approve_request')">設定</button>
                                    <input type="hidden" name="action_id_cancel_approve_request_v1" v-model="itemSlot.action_id_cancel_approve_request_v1">
                                    <div class="list-action-item">
                                        <div class="item-action" v-for="(item, indexAction) in itemSlot.list_action_cancel_approve_request_v1">
                                            @include('layout.modal_setting.label_action')
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="item-row">
                            <div class="col_tt">
                                <label class="text">キャンセルリクエスト否認時</label>
                            </div>
                            <div class="col_content_action">
                                <div class="add-action" :class="(itemSlot.action_id_cancel_cancel_request_v1 && itemSlot.list_action_cancel_cancel_request_v1 && itemSlot.list_action_cancel_cancel_request_v1.length > 0) ? 'text-right' : 'text-left'">
                                    <a style="cursor: pointer; text-decoration: underline" v-if="itemSlot.action_id_cancel_cancel_request_v1 && itemSlot.list_action_cancel_cancel_request_v1 && itemSlot.list_action_cancel_cancel_request_v1.length > 0" @click="openModalAction(itemSlot.action_id_cancel_cancel_request_v1, 'cancel_cancel_request')">
                                        <span v-if="itemSlot.list_action_cancel_cancel_request_v1.length > 3"> その他 @{{ itemSlot.list_action_cancel_cancel_request_v1.length - 3 }}件 編集 </span>
                                        <span v-else>編集</span>
                                    </a>
                                    <button type="button" v-else class="btn btn-add-action-plan btn-sns-line btn-sns-line-warning" @click="openModalAction(itemSlot.action_id_cancel_cancel_request_v1, 'cancel_cancel_request')">設定</button>
                                    <input type="hidden" name="action_id_cancel_cancel_request_v1" v-model="itemSlot.action_id_cancel_cancel_request_v1">
                                    <div class="list-action-item">
                                        <div class="item-action" v-for="(item, indexAction) in itemSlot.list_action_cancel_cancel_request_v1">
                                            @include('layout.modal_setting.label_action')
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" >
                    <button type="button" class="btn btn-sns-line btn-sns-line-lg btn-sns-line-success"
                            v-on:click="saveSettingSlot"
                            style="box-shadow: 0px 2px 0px #00000080;width: 200px ;margin-top: 20px;    margin-bottom: 15px;">保存</button> <br>
                    <button type="button" class="btn btn-sns-line btn-sns-line-lg btn-sns-line-dark"
                            v-on:click="backListSlot"
                            style="box-shadow: 0px 2px 0px #00000080;width: 150px" >戻る</button>

                </div>
            </div>
        </div>

        <div class="modal fade" id="copyAndAddSlotModal" role="dialog" aria-hidden="true">
            <div class="modal-dialog " role="document">
                <div class="modal-content">
                    <div class="modal-header" style="border: none">
                        <button type="button" class="close" data-dismiss="modal"
                                aria-hidden="true" style="opacity: 1;font-size: 27px"
                        >
                            <span class="line-icon line-icon-close"><i class="fas fa-times" style="color: #7D9195"></i></span>
                        </button>

                    </div>
                    <div class="modal-body scroll-modal">
                        <div style="padding: 0 15px">
                            <div style="color: #8F9293; margin-bottom: 10px">
                                コピーする時刻を選択
                            </div>
                            <div class="radio_form_setting">
                                <label style=" ">
                                    <input type="radio"  checked name="setting_shortcut" id="setting_shortcut"  value="1"/>
                                    <span class="font-weight-bold">6:00 - 7:00</span>
                                </label>
                                <label>
                                    <input type="radio" name="setting_shortcut" id="setting_shortcut1"  value="0"/>
                                    <span class="font-weight-bold">10:00 - 11:00</span>
                                </label>
                                <label>
                                    <input type="radio" name="setting_shortcut" id="setting_shortcut1"  value="0"/>
                                    <span class="font-weight-bold">13:00 - 14:00</span>
                                </label>

                            </div>
                            <div  style="color: #8F9293; margin-top: 15px; margin-bottom: 5px">追加する時刻</div>
                            <div class="d-flex " >
                                <div style="width: 140px; margin-right: 20px" >
                                    <input type="time" class="form-control input-border" @blur="hideMessageError('time_end')" name="time_end">
                                </div>
                                <div style="width: 140px" >
                                    <input type="time" class="form-control input-border" @blur="hideMessageError('time_end')" name="time_end">
                                </div>
                                <p class="text-error-line" id="err_time_start"></p>
                                <p class="text-error-line" id="err_time_end"></p>
                            </div>
                        </div>

                    </div>
                    <div class="modal-footer " style="border: none">
                        <div class="text-center">
                            <button type="button" class="btn btn-sns-line btn-sns-line-success btn-sns-line-lg"
                                    >コピー実行</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>




        {{--        <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 ? 'align-items-label-action-start' : ''">--}}
{{--                            <div class="lable-item-action" :class="action_id_booking_success ? 'lable-item-action-margin-top' : ''">予約受付時</div>--}}
{{--                            <div class="add-action" :class="action_id_booking_success ? 'text-right' : 'text-left'">--}}
{{--                                <a style="cursor: pointer; text-decoration: underline" v-if="action_id_booking_success" @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')--}}

{{--                                    </div>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        </div>--}}

{{--                        <div class="row-item-action" :class="action_id_booking_change ? 'align-items-label-action-start' : ''">--}}
{{--                            <div class="lable-item-action" :class="action_id_booking_change ? 'lable-item-action-margin-top' : ''">予約変更時</div>--}}
{{--                            <div class="add-action" :class="action_id_booking_change ? 'text-right' : 'text-left'">--}}
{{--                                <a style="cursor: pointer; text-decoration: underline" v-if="action_id_booking_change" @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')--}}

{{--                                    </div>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        </div>--}}

{{--                        <div class="row-item-action" :class="action_id_at_time_cancel ? 'align-items-label-action-start' : ''">--}}
{{--                            <div class="lable-item-action" :class="action_id_at_time_cancel ? 'lable-item-action-margin-top' : ''">キャンセル時</div>--}}
{{--                            <div class="add-action" :class="action_id_at_time_cancel ? 'text-right' : 'text-left'">--}}
{{--                                <a  style="cursor: pointer; text-decoration: underline" v-if="action_id_at_time_cancel" @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')--}}

{{--                                        </div>--}}
{{--                                    </div>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        </div>--}}

{{--                        <div class="row-item-action" :class="action_id_booking_approve ? 'align-items-label-action-start' : ''">--}}
{{--                            <div class="lable-item-action" :class="action_id_booking_approve ? 'lable-item-action-margin-top' : ''">予約リクエスト承認時</div>--}}
{{--                            <div class="add-action" :class="action_id_booking_approve ? 'text-right' : 'text-left'">--}}
{{--                                <a style="cursor: pointer; text-decoration: underline" v-if="action_id_booking_approve" @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')--}}

{{--                                        </div>--}}
{{--                                    </div>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        </div>--}}

{{--                        <div class="row-item-action" :class="action_id_booking_denial ? 'align-items-label-action-start' : ''">--}}
{{--                            <div class="lable-item-action" :class="action_id_booking_denial ? 'lable-item-action-margin-top' : ''">予約リクエスト否認時</div>--}}
{{--                            <div class="add-action" :class="action_id_booking_denial ? 'text-right' : 'text-left'">--}}
{{--                                <a style="cursor: pointer; text-decoration: underline" v-if="action_id_booking_denial" @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')--}}

{{--                                    </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>
    <input type="hidden" id="type_booking_event_basic">
    @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 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="/chat_files/bootstrap-timepicker.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment-with-locales.min.js"></script>
    <script src="/js/form_answer/jquery.ui.datepicker-ja.js"></script>
    <script src="/js/validate/validate.js?v={{config('sns-line.version')}}"></script>
    <script>
        var bot_id = '{{ $bot_id }}';
        var slotId = '{{ !empty($slot_id) ? $slot_id : '' }}';
        var dateSetting = ;
      </script>
    <script src="/js/booking_event_day/setting_slot.js?v={{config("sns-line.version")}}"></script>
    <script>
        $(document).ready(function () {
            $('.datepicker').datepicker({
                dateFormat: 'yy/mm/dd',
                language: 'ja',
                minDate: new Date(),
            });
            $('.datetimepicker_deadline').datepicker({
                dateFormat: "yy-mm-dd",
                theme: 'dark',
                minDate: new Date(),
                onClose: function (selectedDate, event) {
                    // appSettingEvent.itemSlot.date_deadline = selectedDate;
                    $('#err_date_deadline').text('');
                }
            });
        });
    </script>
    <script>
        var params = [];
        var basic_home_new = [];
    </script>
    <script src="/js/friendlist/modal_filter_v2.js?v={{ config('sns-line.version') }}"></script>
@endpush