@extends('layout.basic.main')
@section('title', 'カレンダー予約（予約枠編集）')
@push('css')
    <link rel="stylesheet" href="/css/booking_manager/slots.css?v={{config("sns-line.version")}}">
@endpush

@section('content')
    <h2 style="font-size: 23px; color: #51595C; font-weight: bold; padding: 10px 10px 10px 0">予約枠編集</h2>
    <div id="app-item" v-cloak>
        <div class="wrapper_item_staff">
            <div class="c__title-group">
                <label class="title col-sm-2">
                    <span class="ui_mark-title">基本情報</span>
                </label>
            </div>
            <div class="c__item c__item_staff">
                <lable class="title title_staff">管理名</lable>
                <div class="c__item_form">
                    <div class="" style="display: flex; align-items: end">
                        <input type="text" class="form-control" maxlength="10" v-model="staff.name">
                        <span style="margin-left: 5px; font-size: 12px"><span class="max_length_name"
                                                                              v-html="staff.name ? staff.name.length : 0"></span>/10</span>
                    </div>
                    <span class="text-danger item__text_error" v-html="error.message_name_staff"></span>
                </div>
            </div>
            <div class="c__item c__item_staff">
                <lable class="title title_staff">予約枠表示名</lable>
                <div class="c__item_form">
                    <div class="" style="display: flex; align-items: end">
                        <textarea type="text" class="form-control" rows="3" maxlength="30"
                                  v-model="staff.title"></textarea>
                        <span style="margin-left: 5px; font-size: 12px"><span class="max_length_name"
                                                                              v-html="staff.title ? staff.title.length : 0"></span>/30</span>
                    </div>
                    <span class="text-danger item__text_error" v-html="error.message_title_staff"></span>
                </div>
            </div>

            <div class="c__item c__item-long c__item_staff">
                <lable class="title title_staff">イメージ</lable>
                <div class="c__item_form">
                    <div class="c_h_file">
                        <div class="c_h_file-preview" v-if="staff.avatar_url" style="border-radius: 50%;overflow: hidden;">
                            <img :src="image_item" style="height: 120px;object-fit: contain;width: 120px;" alt="image"/>
                        </div>
                        <div>
                            <div class="c_h_file-upload">
                                <label for="item-image" class="c_h_custom-file-upload" style="box-shadow: rgb(0 0 0 / 50%) 0px 2px 0px">
                                    <span>選択</span>
                                </label>
                                <input id="item-image" ref="fileInput" class="c_h_file-input" type="file" @input="pickFile()"/>
                            </div>
                            <div class="c_h_file-remove" v-if="staff.avatar_url" @click="staff.avatar_url = ''" style="box-shadow: rgb(0 0 0 / 50%) 0px 2px 0px">
                                <span class="h_refresh">リセット</span>
                            </div>
                        </div>
                    </div>
                    <span class="text-danger item__text_error" v-html="error.image_staff"></span>
                </div>
            </div>

            <div class="c__item c__item_staff" v-if="setting.is_display_staff_cost == 1">
                <lable class="title title_staff">利用料</lable>
                <div class="c__item_form">
                    <div class="" style="display: flex; align-items: end">
                        <input type="text" class="form-control text-center"
                               @blur="formatPriceDetailCost($event, 'staff')"
                               @keypress="numbersOnly"
                               style="width: 100px" v-model="staff.cost">
                        <span style="margin-left: 5px; font-size: 12px">円</span>
                    </div>
                </div>
            </div>

            <div class="c__item c__item_staff">
                <lable class="title title_staff">予約枠説明</lable>
                <div class="c__item_form">
                    <div class="" style="display: flex; align-items: end">
                        <textarea class="form-control" rows="5" maxlength="1500" v-model="staff.memo"
                                  style="resize: both"></textarea>
                        <span style="margin-left: 5px; font-size: 12px"><span class="max_length_name"
                                                                              v-html="staff.memo ? staff.memo.length : 0"></span>/1500</span>
                    </div>
                </div>
            </div>

            <div class="c__item c__item_staff">
                <lable class="title title_staff">コース連携</lable>
                <div class="c__item_form">
                    <div class="day__of_week c_h_lcourse" style="flex-direction: column">
                        <div class="day__of_week-item">
                            <input type="checkbox" class="check-all-course-by-staff"
                                   checked
                                   @click="checkAllCourse()">
                            <label>全て対応可能</label>
                        </div>
                        <div class="day__of_week-item list-check-course-by-staff" v-for="course in list_course">
                            <input type="checkbox" class="check-course-item"
                                   checked
                                   @click="updateCheckCourse()"
                                   :name="'check-course-by-staff-' + course.id"
                                   :data-id="course.id">
                            <label v-html="course.title"></label>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="wrapper_item_staff">
            <div class="c__title-group">
                <label class="title col-sm-2">
                    <span class="ui_mark-title">受付・予約設定</span>
                </label>
            </div>
            <div class="c__item c__item_staff">
                <label class="title title_staff">
                    同時受付上限数
                </label>
                <div class="c__item_form ds__change-multiple-box">
                    <div class="box__checkbox ds__change-multiple-box" style="width: 120px">
                        <input type="radio" name="max_booking_slot" class="booking__checkbox" value="1"
                               v-model="staff.type_max_booking_slot">
                        <span class="ds__change-white-space">無制限</span>
                    </div>
                    <div class="ds__change-multiple-box">
                        <input type="radio" name="max_booking_slot" class="booking__checkbox" value="2"
                               v-model="staff.type_max_booking_slot">
                        <input type="number" class="form-control ds__change-white-space" style="width: 80px;"
                               min="1"
                               v-model="staff.max_booking_slot"
                               :disabled="staff.type_max_booking_slot != 2">
                        <span class="ml-5 content_bottom">人</span>
                    </div>
                </div>
            </div>

            <div class="c__item c__item_staff">
                <lable class="title title_staff">受付時間
                    <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>
                </lable>
                <div class="c__item_form c_h_option-c">
                    <div class="box__checkbox">
                        <input type="checkbox" class="booking__checkbox" v-model="staff.is_apply_time_booking">
                    </div>
                    <div>
                        <span>営業日時の全てを受付時間に設定</span>
                    </div>
                </div>
            </div>

            <div class="c__item c__item_staff">
                <label class="title title_staff">
                    タグ絞り込み表示
                    <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>
                </label>
                <div class="c__item_form">
                    <div class="item_filer_tag">
                        <button type="button" class="btn btn-sns-line btn-sns-line-primary" @click="showModalFilterTag('staff')" style="width: 150px;box-shadow: rgb(0 0 0 / 50%) 0px 2px 0px">タグ選択</button>

                        <!-- Modal -->
                        <div class="modal fade" id="settingTagModalCenter" tabindex="-1" role="dialog" aria-labelledby="settingTagModalCenter" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered" role="document" style="width: 700px">
                                <div class="modal-content" style="width: 700px !important;position: relative">
                                    <div class="modal-header" style="border: 0">
                                        <h2 class="text-center" style="font-weight: bold;">タグ選択</h2>
                                        <button type="button" data-dismiss="modal" aria-hidden="true" class="close btn-close-modal" style="opacity: 1; font-size: 27px;">
                                            <i class="fas fa-times ic-close"></i>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <div class="tag_feature">
                                            <div class="h_tag_list col-sm-6">
                                                <div v-for="category in categories">
                                                    <div class="h_tag_folder_item h_folder_item item_act_display_tag"
                                                         @click="loadTagByCategory(category.id)"
                                                         :class="category_open == category.id ? 'folder_active' : ''">
                                                        <span>@{{category.name}}</span>
                                                    </div>
                                                </div>

                                            </div>
                                            <div class="h_tag_list col-sm-6">
                                                <div v-for="tag in list_tag_of_category">
                                                    <div class="h_tag_folder_item h_tag_item"
                                                         :class="staff.list_tag.indexOf(tag.id) != -1 ? 'tag_active' : ''">
                                                        <input type="checkbox" @change="activeTag(tag.id,'staff', $event)"
                                                               :checked="staff.list_tag.indexOf(tag.id) != -1"
                                                               :disabled="staff.setting_filter_tag == 0">
                                                        <div class="item_act_display_tag" style="max-width: 125px">
                                                            <span>@{{ tag.name }}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="modal-footer modal-footer-modal-tag text-center">
                                        <button type="button" @click="saveTagToStaff()" class="btn btn-sns-line btn-sns-line-success">決定</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <span class="text-danger item__text_error" v v-html="error.message_setting_filter"></span>
                        <div class="main_tag_selected d-flex align-items-center">
                            <div style="flex: 0 0 90px!important;float: left">選択した項目</div>
                            <div class="h_list_tag_selected"
                                 :class="staff.setting_filter_tag == 0 ? 'selected_setting_filter_none' : ''">
                                <div class="h_box_tag_selected" v-for="tag in staff.list_tag"><span>@{{ detailTag(tag).name }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="main_setting_filter_tag">
                            <div>条件選択</div>
                            <div class="h_setting_filter_tag" style="display: block">
                                <select class="form-control" v-model="staff.setting_filter_tag">
                                    <option value="0">設定しない</option>
                                    <option value="1">選択した項目を全て含む</option>
                                    <option value="2">選択した項目を1つ以上含む人を除く</option>
                                    <option value="3">選択した項目を全て含む人を除く</option>
                                </select>
                                <span style="margin-left: 5px; font-size: 12px">友だちにはこの予約枠を表示しない</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="c__item">
                <label class="title title_staff" style="font-size: 11px;height: 55px;line-height: 23px;padding: 5px">
                    予約枠予約・リクエスト<br/>承認時アクション
                </label>
                <div class="c__item_form" :class="staff.action_id ? 'ui_action-group' : ''" style="width: 350px!important;">
                    <div v-if="staff.action_id">
                        <div style="text-align: right;margin-bottom: 10px">
                                            <span style="cursor: pointer;width:100px;color: #5799DB;text-decoration-line: underline"
                                                  v-on:click="openSettingAction('staff', staff.action_id)"
                                            > <span v-show=" staff.detail_action &&  staff.detail_action.length > 3">
                                            その他@{{ staff.detail_action.length - 3 }}件</span> 編集</span>
                        </div>
                        <div class="item-act-display" style=""
                             v-for="(item, indexAction) in staff.detail_action"
                             v-if="item.type" :class="indexAction > 2 ? 'toggle-detail-action-booking_approve' : ''"
                             :hidden="indexAction > 2">
                             @include('layout.modal_setting.label_action')
                                                {{-- <span v-if="iAc.type == 'tag'">【タグ】
                                                    <span v-for="(itemTag, indexTag) in iAc.list_tags">@{{  indexTag == 0 ? '' : ',' }}@{{ itemTag.name }}</span>を<span
                                                            v-if="iAc.data.action == 1">つける</span><span v-else>はずす</span>
                                                </span>

                            <span v-else-if="iAc.type == 'scenario'">【ステップ】<span v-if="iAc.data.action != 1">@{{ iAc.data.scenario_name }}</span>
                                                                    <span v-else>購読停止・予約キャンセル</span>
                                                </span>
                            <span v-else-if="iAc.type == 'template'">【テンプレート】
                                                    <span>@{{ iAc.data.template_name }}</span>
                                                </span>
                            <span v-else-if="iAc.type == 'text'">【テキスト】
                                                    <span>@{{ iAc.data.content | shortContent }}</span>
                                                </span>
                            <span v-else-if="iAc.type == 'richmenu'">【リッチメニュー】
                                                    <span v-if="iAc.data.action != 1">@{{ iAc.data.richmenu_name }} 表示</span>
                                                                    <span v-else>表示を停止</span>
                                                </span>
                            <span v-else-if="iAc.type == 'remind'">【リマインド】
                                                    <span>@{{ iAc.data.remind_name }}</span>
                                                </span>
                            <span v-else-if="iAc.type == 'bookmark'">
      <span class="action-title">【ブックマーク】</span>
      <span v-if="iAc.data.action == 1">ブックマークする</span>
      <span v-else>ブックマークを外す</span>
    </span>
                            <span v-else-if="iAc.type == 'block'">
      <span class="action-title">【ブロック・非表示】</span>
      <span v-if="iAc.data.action == 1">ブロックする</span>
      <span v-if="iAc.data.action == 2">ブロック解除</span>
       <span v-if="iAc.data.action == 3">表示</span>
      <span  v-if="iAc.data.action == 4">非表示</span>
    </span>
                            <span v-else-if="iAc.type == 'compliant_status'">
      <span class="action-title">【対応ステータス】</span>
      <span v-if="iAc.data.action == 1">@{{ iAc.data.content }}をつける</span>
      <span v-else> ステータスを外す</span>
    </span>
                            <span v-else-if="iAc.type == 'friend_info'">【友だち情報】
                                                    <span>@{{ iAc.data.name }}</span>
                                                    <span v-if="iAc.data.action == 1"> 登録情報を削除</span>
                                                    <span v-else> @{{ iAc.data.content }}</span>
                                                </span> --}}
                        </div>
                    </div>
                    <button v-else class="btn btn-sns-line btn-sns-line-warning" style="width: 150px; height: 40px;margin-top: 8px;"
                            v-on:click="openSettingAction('staff', staff.action_id)">設定する
                    </button>
                </div>
            </div>
        </div>

        <div >
            <button type="button" class="btn btn-sns-line btn-sns-line-success" @click="submitSaveStaff" style="width: 170px; height: 44px; box-shadow: rgb(0 0 0 / 50%) 0px 2px 0px">保存</button>
            <br/>
            <br/>
            <button type="button" @click="backToListItem()" class="btn btn-sns-line btn-sns-line-secondary"
                    style="width: 120px; height: 44px; box-shadow: rgb(0 0 0 / 50%) 0px 2px 0px">戻る
            </button>
        </div>

    </div>
    @include('layout.modal_setting.modal_select_action')
    @include('layout.modal_filter_v2')
@endsection
@push('js')
    <script>
        setting_action.show_booking_calendar = true;
        const bot_id = '{{ $bot_id }}';
        const staff_id = '{{ $staff_id ?? 0 }}';
        const course_id = '{{ $course_id ?? 0 }}';
        const booking_calendar_id = '{{ $booking_calendar_id }}';
        const action = '{{ $action }}';
        const item = '{{ $item }}';

        const init_staff = '{{ route('calendar.staff.init') }}';
        const ajax_save_staff = '{{ route('ajax.booking_calendar.ajax_save_staff') }}';
        const url_setting_calendar = '{{ route('booking.setting', $booking_calendar_id) }}';
        const ajax_get_tag_by_category = '{{ route('calendar.get_tag_by_category') }}';


    </script>
    <script src="/js/booking_manager/japanese-holidays.min.js?v={{config('sns-line.version')}}"></script>
    <script src="/js/booking_manager/message.js?v={{config("sns-line.version")}}"></script>
    <script src="/js/booking_manager/function.js?v={{config("sns-line.version")}}"></script>
    <script src="/js/booking_manager/item/item.js?v={{config("sns-line.version")}}"></script>
    <script>
        var params = [];
        var basic_home_new = [];
    </script>
    <script src="/js/friendlist/modal_filter_v2.js?v={{ config('sns-line.version') }}"></script>
@endpush