@extends('layout.basic.main')
@section('title', empty($plan_id) ? 'イベント予約（コース作成）':'イベント予約（コース編集）')
@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: #E0E0E0;
            border-radius: 3px;
            padding: 9px 20px 5px 20px;
            width: 249px;
            text-align: center;
            font-size: 13px;
            margin-bottom: 5px;

        }
        .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: 266px;
        }
        .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: 2px 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: 2px 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;
        }
        .addInfoPlan .item-row .col_tt{
            width: 132px;
        }
        /*input[type="time"]{*/
        /*    text-align: right;*/
        /*}*/
        /*input[type="time"]::-webkit-calendar-picker-indicator {*/
        /*    filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg);*/
        /*}*/
        #addEditPlan input[type=checkbox] {
            display:none;
        }
        #addEditPlan .form-check {
            display: block;
            margin-bottom: 2px;
        }

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

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

        #addEditPlan .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;
        }

        #addEditPlan .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="addEditPlan" v-cloak>
        <div class="row d-flex align-item-center">
            <div class="col-md-12">
                <div class="font-weight-bold title-setting-slot">コース編集</div>
            </div>

        </div>

        <div class="boxBookingAction"  >
            <div class="row box_action_booking">
                <div class="col-md-9" >
                    <div class="box_content_bd addInfoPlan">
                        <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:calc(100% - 132px) ">
                                <div style="width: 100%">
                                    <span style="float: right; font-size: 13px;">@{{ itemPlan.name ? itemPlan.name.length : 0 }}/50</span>
                                    <textarea class="form-control input-border" v-model="itemPlan.name" maxlength="50" rows="3" style="height: auto !important;"></textarea>
                                </div>

                            </div>
                        </div>
                        <div class="text-danger pt-1" v-show="errors.name">@{{ errors.name }}</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="itemPlan.using_max_slot"
                                           id="using_max_slot" name="using_max_slot" value="1">
                                    <label for="using_max_slot" 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="itemPlan.using_max_slot"
                                           id="using_max_slot1" name="using_max_slot" value="0">
                                    <label for="using_max_slot1" class="font-weight-bold"
                                           style="font-size: 15px;    margin-top: 5px;">
                                    </label>
                                    <input class="form-control input-border" type="number" style="width: 100px;"
                                           v-model="itemPlan.limit">

                                    <span style="margin-left: 4px; font-size: 13px;margin-top: 19px;  ">人</span>
                                </div>

                            </div>

                        </div>
                        <div class="text-danger pt-1" v-show="errors.limit">@{{ errors.limit }}</div>
                        <div class="item-row">
                            <div class="col_tt">
                                <label class="text">料金
                                </label>
                            </div>
                            <div class="col_content">
                                <input class="form-control input-border" type="number" v-model="itemPlan.price">
                                <span style="margin-left: 4px; font-size: 13px;margin-top: 19px;">円</span>
                            </div>

                        </div>
                        <div class="text-danger pt-1" v-show="errors.price">@{{ errors.price }}</div>
                    </div>
                </div>
            </div>
{{--            <div class="row box_action_booking">--}}
{{--                <div class="col-md-9" style=" margin-top: 20px; display: flex; align-items: center; justify-content: space-between" >--}}
{{--                    <div style="font-size: 17px">--}}
{{--                        アクション設定--}}
{{--                    </div>--}}
{{--                    <div>--}}
{{--                        <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>--}}
            <div style="font-size: 15px; margin-top: 29px">
                アクション設定
            </div>
            <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">
                                {{--                                             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="itemPlan.approval_system_booking"
                                           id="approval_system_booking" name="approval_system_booking" value="0">
                                    <label for="approval_system_booking" 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="itemPlan.approval_system_booking"
                                           id="approval_system_booking1" name="approval_system_booking" value="1">
                                    <label for="approval_system_booking1" 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="!itemPlan.is_no_datetime_end_booking">
{{--                                        <div style="position: relative">--}}
{{--                                            <input type="text" class="form-control datetimepicker_deadline input-border "--}}
{{--                                                   name="date_end_booking" style="width: 150px; margin-right: 20px"--}}
{{--                                                   v-model="itemPlan.date_end_booking" id="date_end_booking"--}}
{{--                                                   :value="itemPlan.date_end_booking">--}}
{{--                                            <label class="input-group-addon icon-calendar" for="date_end_booking"--}}
{{--                                                   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="itemPlan.duration_end_booking"
                                               style=" width: 79px;
                                        margin-left: 7px;margin-right: 5px;">
                                        <span style="font-size: 13px; margin-right: 5px;">日前の</span>

                                    </div>
                                    <div v-show="!itemPlan.is_no_datetime_end_booking" style=" margin-right: 30px" >
                                        <div style="position: relative; display: inline-block; ">
                                            <input type="text"
                                                   name="time_end_booking"
                                                   v-model="itemPlan.time_end_booking"
                                                   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" style="width: 150px"  @blur="hideMessageError('time_end')"--}}
{{--                                               name="time_end_booking" v-model="itemPlan.time_end_booking">--}}
                                    </div>
                                    <div class="form-check">
                                        <input type="checkbox" name="is_no_datetime_end_booking" id="is_no_datetime_end_booking"
                                               v-model="itemPlan.is_no_datetime_end_booking" value="1">
                                        <label class="font-weight-bold form-check-label" for="is_no_datetime_end_booking" style="font-size: 14px; ">
                                            締切を設定しない
                                        </label>
                                    </div>


                                </div>
                            </div>
                        </div>
                        <div class="text-danger pt-1" v-show="errors.duration_end_booking">@{{ errors.duration_end_booking }}</div>
                        <div class="text-danger pt-1" v-show="errors.time_end_booking">@{{ errors.time_end_booking }}</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="itemPlan.action_id_booking_approve_v1 ? 'text-right' : 'text-left'">
                                    <a style="cursor: pointer; text-decoration: underline" v-if="itemPlan.action_id_booking_approve_v1" @click="openModalAction(itemPlan.action_id_booking_approve_v1, 'booking_approve')">
                                        <span v-if="itemPlan.list_action_booking_approve_v1.length > 3"> その他 @{{ itemPlan.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(itemPlan.action_id_booking_approve_v1, 'booking_approve')">設定</button>
                                    <input type="hidden" name="action_id_booking_approve_v1" v-model="itemPlan.action_id_booking_approve_v1">
                                    <div class="list-action-item">
                                        <div class="item-action" v-for="(item, indexAction) in itemPlan.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="itemPlan.action_id_booking_admin_approve_v1 ? 'text-right' : 'text-left'">
                                    <a style="cursor: pointer; text-decoration: underline" v-if="itemPlan.action_id_booking_admin_approve_v1" @click="openModalAction(itemPlan.action_id_booking_admin_approve_v1, 'booking_admin_approve')">
                                        <span v-if="itemPlan.list_action_booking_admin_approve_v1.length > 3"> その他 @{{ itemPlan.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(itemPlan.action_id_booking_admin_approve_v1, 'booking_admin_approve')">設定</button>
                                    <input type="hidden" name="action_id_booking_admin_approve_v1" v-model="itemPlan.action_id_booking_admin_approve_v1">
                                    <div class="list-action-item">
                                        <div class="item-action" v-for="(item, indexAction) in itemPlan.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="itemPlan.action_id_booking_approve_request_v1 ? 'text-right' : 'text-left'">
                                    <a style="cursor: pointer; text-decoration: underline" v-if="itemPlan.action_id_booking_approve_request_v1" @click="openModalAction(itemPlan.action_id_booking_approve_request_v1, 'booking_approve_request')">
                                        <span v-if="itemPlan.list_action_booking_approve_request_v1.length > 3"> その他 @{{ itemPlan.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(itemPlan.action_id_booking_approve_request_v1, 'booking_approve_request')">設定</button>
                                    <input type="hidden" name="action_id_booking_approve_request_v1" v-model="itemPlan.action_id_booking_approve_request_v1">
                                    <div class="list-action-item">
                                        <div class="item-action" v-for="(item, indexAction) in itemPlan.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="itemPlan.action_id_booking_cancel_request_v1 ? 'text-right' : 'text-left'">
                                    <a style="cursor: pointer; text-decoration: underline" v-if="itemPlan.action_id_booking_cancel_request_v1" @click="openModalAction(itemPlan.action_id_booking_cancel_request_v1, 'booking_cancel_request')">
                                        <span v-if="itemPlan.list_action_booking_cancel_request_v1.length > 3"> その他 @{{ itemPlan.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(itemPlan.action_id_booking_cancel_request_v1, 'booking_cancel_request')">設定</button>
                                    <input type="hidden" name="action_id_booking_cancel_request_v1" v-model="itemPlan.action_id_booking_cancel_request_v1">
                                    <div class="list-action-item">
                                        <div class="item-action" v-for="(item, indexAction) in itemPlan.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="itemPlan.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="itemPlan.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="itemPlan.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="!itemPlan.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="itemPlan.date_end_change_request" id="date_end_change_request"--}}
{{--                                                   :value="itemPlan.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="itemPlan.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="!itemPlan.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="itemPlan.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" style="width: 150px"  @blur="hideMessageError('time_end')"--}}
{{--                                               name="time_end_change_request" v-model="itemPlan.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="itemPlan.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_action">
                                <div class="add-action" :class="itemPlan.action_id_change_request_booking_approve_v1 ? 'text-right' : 'text-left'">
                                    <a style="cursor: pointer; text-decoration: underline" v-if="itemPlan.action_id_change_request_booking_approve_v1" @click="openModalAction(itemPlan.action_id_change_request_booking_approve_v1, 'change_request_booking_approve')">
                                        <span v-if="itemPlan.list_action_change_request_booking_approve_v1.length > 3"> その他 @{{ itemPlan.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(itemPlan.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="itemPlan.action_id_change_request_booking_approve_v1">
                                    <div class="list-action-item">
                                        <div class="item-action" v-for="(item, indexAction) in itemPlan.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="itemPlan.action_id_change_request_admin_approve_v1 ? 'text-right' : 'text-left'">
                                    <a style="cursor: pointer; text-decoration: underline" v-if="itemPlan.action_id_change_request_admin_approve_v1" @click="openModalAction(itemPlan.action_id_change_request_admin_approve_v1, 'change_request_admin_approve')">
                                        <span v-if="itemPlan.list_action_change_request_admin_approve_v1.length > 3"> その他 @{{ itemPlan.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(itemPlan.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="itemPlan.action_id_change_request_admin_approve_v1">
                                    <div class="list-action-item">
                                        <div class="item-action" v-for="(item, indexAction) in itemPlan.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="itemPlan.action_id_change_request_approve_request_v1 ? 'text-right' : 'text-left'">
                                    <a style="cursor: pointer; text-decoration: underline" v-if="itemPlan.action_id_change_request_approve_request_v1" @click="openModalAction(itemPlan.action_id_change_request_approve_request_v1, 'change_request_approve_request')">
                                        <span v-if="itemPlan.list_action_change_request_approve_request_v1.length > 3"> その他 @{{ itemPlan.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(itemPlan.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="itemPlan.action_id_change_request_approve_request_v1">
                                    <div class="list-action-item">
                                        <div class="item-action" v-for="(item, indexAction) in itemPlan.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="itemPlan.action_id_change_request_cancel_request_v1 ? 'text-right' : 'text-left'">
                                    <a style="cursor: pointer; text-decoration: underline" v-if="itemPlan.action_id_change_request_cancel_request_v1" @click="openModalAction(itemPlan.action_id_change_request_cancel_request_v1, 'change_request_cancel_request')">
                                        <span v-if="itemPlan.list_action_change_request_cancel_request_v1.length > 3"> その他 @{{ itemPlan.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(itemPlan.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="itemPlan.action_id_change_request_cancel_request_v1">
                                    <div class="list-action-item">
                                        <div class="item-action" v-for="(item, indexAction) in itemPlan.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="itemPlan.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="itemPlan.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="itemPlan.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="!itemPlan.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="itemPlan.date_end_cancel" id="date_end_cancel" :value="itemPlan.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="itemPlan.duration_cancel"
                                               style=" width: 79px;
                                        margin-left: 7px;margin-right: 5px;">
                                        <span style="font-size: 13px; margin-right: 5px;">日前の</span>
                                    </div>
                                    <div  v-show="!itemPlan.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="itemPlan.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" class="form-control input-border" --}}
{{--                                               style="width: 150px" @blur="hideMessageError('time_end')" name="time_end_cancel" v-model="itemPlan.time_end_cancel">--}}
                                    </div>
                                    <div class="form-check">
                                        <input type="checkbox" name="is_no_datetime_end_cancel" id="is_no_datetime_end_cancel" v-model="itemPlan.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_action">
                                <div class="add-action" :class="itemPlan.action_id_cancel_booking_approve_v1 ? 'text-right' : 'text-left'">
                                    <a style="cursor: pointer; text-decoration: underline" v-if="itemPlan.action_id_cancel_booking_approve_v1" @click="openModalAction(itemPlan.action_id_cancel_booking_approve_v1, 'cancel_booking_approve')">
                                        <span v-if="itemPlan.list_action_cancel_booking_approve_v1.length > 3"> その他 @{{ itemPlan.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(itemPlan.action_id_cancel_booking_approve_v1, 'cancel_booking_approve')">設定</button>
                                    <input type="hidden" name="action_id_cancel_booking_approve_v1" v-model="itemPlan.action_id_cancel_booking_approve_v1">
                                    <div class="list-action-item">
                                        <div class="item-action" v-for="(item, indexAction) in itemPlan.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="itemPlan.action_id_cancel_admin_approve_v1 ? 'text-right' : 'text-left'">
                                    <a style="cursor: pointer; text-decoration: underline" v-if="itemPlan.action_id_cancel_admin_approve_v1" @click="openModalAction(itemPlan.action_id_cancel_admin_approve_v1, 'cancel_admin_approve')">
                                        <span v-if="itemPlan.list_action_cancel_admin_approve_v1.length > 3"> その他 @{{ itemPlan.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(itemPlan.action_id_cancel_admin_approve_v1, 'cancel_admin_approve')">設定</button>
                                    <input type="hidden" name="action_id_cancel_admin_approve_v1" v-model="itemPlan.action_id_cancel_admin_approve_v1">
                                    <div class="list-action-item">
                                        <div class="item-action" v-for="(item, indexAction) in itemPlan.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="itemPlan.action_id_cancel_approve_request_v1 ? 'text-right' : 'text-left'">
                                    <a style="cursor: pointer; text-decoration: underline" v-if="itemPlan.action_id_cancel_approve_request_v1" @click="openModalAction(itemPlan.action_id_cancel_approve_request_v1, 'cancel_approve_request')">
                                        <span v-if="itemPlan.list_action_cancel_approve_request_v1.length > 3"> その他 @{{ itemPlan.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(itemPlan.action_id_cancel_approve_request_v1, 'cancel_approve_request')">設定</button>
                                    <input type="hidden" name="action_id_cancel_approve_request_v1" v-model="itemPlan.action_id_cancel_approve_request_v1">
                                    <div class="list-action-item">
                                        <div class="item-action" v-for="(item, indexAction) in itemPlan.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="itemPlan.action_id_cancel_cancel_request_v1 ? 'text-right' : 'text-left'">
                                    <a style="cursor: pointer; text-decoration: underline" v-if="itemPlan.action_id_cancel_cancel_request_v1" @click="openModalAction(itemPlan.action_id_cancel_cancel_request_v1, 'cancel_cancel_request')">
                                        <span v-if="itemPlan.list_action_cancel_cancel_request_v1.length > 3"> その他 @{{ itemPlan.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(itemPlan.action_id_cancel_cancel_request_v1, 'cancel_cancel_request')">設定</button>
                                    <input type="hidden" name="action_id_cancel_cancel_request_v1" v-model="itemPlan.action_id_cancel_cancel_request_v1">
                                    <div class="list-action-item">
                                        <div class="item-action" v-for="(item, indexAction) in itemPlan.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="savePlan" 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>
                            <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>
    <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>
        var slot_id = '{{ $slot_id }}';
        var plan_id = '{{ $plan_id }}';
        var bot_id = '{{ $bot_id }}';
        var event_detail_id = '{{ $event_detail_id }}';
        var slot = null;

    </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 src="/js/booking_event_day/setting_plan_v2.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.itemPlan.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