@extends('layout.basic.main')
@section('title', 'カレンダー予約（コース編集）')
@push('css')
    <link rel="stylesheet" href="/css/booking_manager/slots.css?v={{config("sns-line.version")}}">
    <style>
        .c28__form-group {
            padding: 15px;
            border: 2px solid #e8e8e8;
            width: 700px;
            display: flex;
            flex-direction: column;
            row-gap: 20px;
            border-radius: 5px;
        }

        .c__item .title {
            width: 160px;
            background: #F6F6F6;
            text-align: center;
            padding: 8px;
            border-radius: 5px;
            font-weight: bold;
            font-size: 13px;
        }

        .c28__group_input {
            display: flex;
            align-items: end;
            flex-direction: column-reverse;
        }

        .c_h_file-remove {
            /*display: none;*/
        }

        .c_h_tooltip {
            position: relative;
            display: inline-flex;
            margin-left: 0;
            height: 17px;
        }

        .c_h_tooltip .c_h_tooltip-text {
            visibility: hidden;
            width: 480px;
            color: #000;
            text-align: left;
            border-radius: 6px;
            padding: 15px 10px;
            position: absolute;
            z-index: 9999;
            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_tooltip .c_h_tooltip-text::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -3px;
            border-width: 5px;
            border-style: solid;
            border-color: #fff transparent transparent transparent;
        }

        .btn-close-modal{
            right: 15px;
            top: 15px;
            position: absolute;
        }

        .ic-close{
            color: #898F90;
            padding: 2px 6px 7px 6px;
        }

        .ic-close:hover {
            background-color: #96ADB2;
            color: #FFFFFF !important;
            border-radius: 4px;
            padding: 2px 6px 3px 6px;
        }

        .modal-footer-modal-tag{
            border-top: 0;
            text-align: center;
        }

        .modal-footer-modal-tag button{
            width: 250px;
            height: 45px;
            box-shadow: 0 3px 0 #00000066;
            font-size: 18px;
        }

        .main_tag_selected{
            display: flex;
            align-items: center;
        }
    </style>
@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>
        <p style="font-weight: bold"></p>
        <div class="c28__form-group">
            <div class="c__title-group">
                <label class="title col-sm-2">
                    <span class="ui_mark-title">基本情報</span>
                </label>
            </div>

            <div class="c__item">
                <lable class="title" style="margin-top: 17px;">管理名</lable>
                <div class="col-sm-10">
                    <div class="w-100 c28__group_input">
                        <input type="text" class="form-control" maxlength="10" v-model="course.title">
                        <span style="margin-left: 5px; font-size: 12px"><span class="max_length_name">@{{ course.title ? course.title.length : 0 }}</span>/10</span>
                    </div>
                    <span class="text-danger item__text_error" v-html="error.message_title"></span>
                </div>
            </div>
            <div class="c__item">
                <lable class="title" style="margin-top: 17px;">コース表示名</lable>
                <div class="col-sm-10">
                    <div class="w-100 c28__group_input">
                        <textarea type="text" class="form-control" rows="3" maxlength="50"
                                  v-model="course.name"></textarea>
                        <span style="margin-left: 5px; font-size: 12px"><span class="max_length_name">@{{ course.name ? course.name.length : 0 }}</span>/50</span>
                    </div>
                    <span class="text-danger item__text_error" v-html="error.course_name"></span>
                </div>
            </div>

            <div class="c__item c__item-long">
                <lable class="title">イメージ</lable>
                <div class="col-sm-10">
                    <div class="c_h_file">
                        <div class="c_h_file-preview" v-if="course.url_image">
                            <img :src="image_item" alt="image"/>
                        </div>
                        <div>
                            <div class="c_h_file-upload">
                                <label for="item-image" class="c_h_custom-file-upload" style="box-shadow: 0 2px 0 #00000080">
                                    <span>選択</span>
                                </label>
                                <input id="item-image" ref="fileInput" class="c_h_file-input" type="file" accept="image/*"
                                       @input="pickFile()"/>
                            </div>
                            <div class="c_h_file-remove" v-show="course.url_image" @click="course.url_image = ''" style="box-shadow: 0 2px 0 #00000080">
                                <span class="h_refresh">リセット</span>
                            </div>
                        </div>
                    </div>
                    <span class="text-danger item__text_error" v-html="error.image_course"></span>
                </div>
            </div>

            <div class="c__item" v-if="setting.is_display_course_cost == 1">
                <lable class="title">利用料</lable>
                <div class="col-sm-10">
                    <div class="w-100" style="display:flex; align-items: end">
                        <input type="text" class="form-control text-center"
                               @blur="formatPriceCourseDetailCost($event)"
                               @keypress="numbersOnly"
                               style="width: 100px" v-model="course.cost">
                        <span style="margin-left: 5px; font-size: 12px">円</span>
                    </div>
                </div>
            </div>

            <div class="c__item">
                <lable class="title">所要時間</lable>
                <div class="col-sm-10">
                    <div class="w-100" style="display: flex;align-items: end;">
                        <select type="text" class="form-control" style="width: 100px" v-model="course.hours">
                            <option :value="h-1" v-for="h in 24" v-html="h-1"></option>
                        </select>
                        <span style="margin-left: 5px; margin-right: 5px; font-size: 12px">時間</span>
                        <select type="text" class="form-control" style="width: 100px" v-model="course.minutes">
                            <option :value="(m-1)*5" v-for="m in 12" v-html="(m-1)*5"></option>
                        </select>
                        <span style="margin-left: 5px; font-size: 12px">分</span>
                    </div>
                    <span class="text-danger item__text_error" v-html="error.message_time_course"></span>
                </div>
            </div>

            <div class="c__item">
                <lable class="title" style="margin-top: 17px;">説明</lable>
                <div class="col-sm-10">
                    <div class="w-100 c28__group_input">
                        <textarea class="form-control w-100" rows="5" maxlength="1500" v-model="course.memo"
                                  style="resize: both"></textarea>
                        <span style="margin-left: 5px; font-size: 12px"><span class="max_length_name">@{{ course.memo ? course.memo.length : 0 }}</span>/1500</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="c28__form-group" style="margin-top: 25px;">
            <div class="c__title-group">
                <label class="title col-sm-2">
                    <span class="ui_mark-title">タグ絞り込み表示</span>
                </label>
            </div>

            <div class="c__item" style="margin-bottom: 0">
                <lable class="title">
                    タグ絞り込み表示
                    <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="col-sm-10">
                    <div class="item_filer_tag">
                        <button type="button" class="btn btn-sns-line btn-sns-line-primary" @click="showModalFilterTag('course')" style="width: 150px;box-shadow: 0 2px 0 #00000080">タグ選択</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="course.list_tag.indexOf(tag.id) != -1 ? 'tag_active' : ''">
                                                        <input type="checkbox" @change="activeTag(tag.id,'course', $event)"
                                                               :checked="course.list_tag.indexOf(tag.id) != -1">
                                                        <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="saveTagToSource()" class="btn btn-sns-line btn-sns-line-success">決定</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <span class="text-danger item__text_error" v-html="error.message_setting_filter"></span>
                        <div class="main_tag_selected">
                            <div style="flex: 0 0 90px !important;float: left">選択した項目</div>
                            <div class="h_list_tag_selected"
                                 :class="course.setting_filter_tag == 0 ? 'selected_setting_filter_none' : ''">
                                <div class="h_box_tag_selected" v-for="tag in course.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="course.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 align-items-center" style="align-items: center !important;">
                <label class="title font-weight-bold" style="font-size: 11px; margin-bottom: 0">
                    コース予約・リクエスト<br/>
                    承認時アクション
                </label>
                <div class="col-sm-5" :class="course.action_id ? 'ui_action-group' : ''"
                     style="width: 350px!important;">
                    <div v-if="course.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('course', course.action_id)"
                                        > <span v-show=" course.detail_action &&  course.detail_action.length > 3">
                                        その他@{{ course.detail_action.length - 3 }}件</span> 編集</span>
                        </div>
                        <div class="item-act-display" style=""
                             v-for="(item, indexAction) in course.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 btn-sm"
                            style="width: 150px; height: 40px; background-color: rgba(254,195,0,1);box-shadow: 0 2px 0 #00000080"
                            v-on:click="openSettingAction('course', course.action_id)">設定する
                    </button>
                </div>
            </div>
        </div>


        <div class="text-center" style="display: flex;flex-direction: column;margin-top: 25px;">
            <button type="button" @click="submitSaveCourse()"
                    class="btn btn-sns-line btn-sns-line-success btn-sns-line-lg"
                    style="width: 170px;box-shadow: 0 2px 0 #00000080">保存
            </button>
            <button type="button" class="btn btn-sns-line btn-sns-line-secondary btn-sns-line-lg"
                    style="width: 120px;margin-top: 15px;box-shadow: 0 2px 0 #00000080"
                    @click="backToListItem()">戻る
            </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 course_id = '{{ $course_id ?? 0 }}';
        const staff_id = '{{ $staff_id ?? 0 }}';
        const booking_calendar_id = '{{ $booking_calendar_id }}';
        const action = '{{ $action }}';
        const item = '{{ $item }}';


        const init_course = '{{ route('calendar.course.init') }}';
        const ajax_save_course = '{{ route('ajax.booking_calendar.ajax_save_course') }}';
        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