@extends('layout.basic.main')
@section('title', 'サロン予約（スタッフ詳細）')

@push('js')
<script src="/js/tailwindcss.js"></script>
@endpush
@push('css')
<style>
    .btn-sns-line-success {
        background-color: #08BF5A !important;
        color: white !important;
    }

    .content-preview-action>div,
    .content-preview-action>div * {
        font-weight: 400;
    }
    .content-preview-action>div:first-child{
        width: 350px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .wrap-item-action-herme .type div:last-child {
        font-weight: 400;
    }

    .wrap-action-broadcast-new {
        display: flex;
        border: 1px solid #DDDDDD;
        border-radius: 4px;
        padding: 9px 15px;
        margin-bottom: 10px;
    }

    .wrap-item-action-herme {
        flex-grow: 1;
    }

    .wrap-item-action-herme>div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: 400;
    }

    .wrap-item-action-herme .type {
        margin-bottom: 5px;
    }

    .wrap-action-broadcast-new .remove i {
        font-size: 18px;
        cursor: pointer;
        color: #E0E0E0;
    }

    .wrap-action-broadcast-new .remove {
        flex: 0 0 50px;
        padding-left: 15px;
        justify-content: center;
        display: flex;
        align-items: center;
    }

    #calendar-salon-staff-edit .tab-header .active {
        background: #fff !important;
        border-bottom: 2px solid #08bf5a;
        margin-bottom: 1px;
    }

    #calendar-salon-staff-edit .tab-header .active button {
        color: #fff;
        background: #08BF5A ;
    }

    #calendar-salon-staff-edit li.active {
        background: #fff !important;
        border-bottom: 2px solid #08bf5a;
        margin-bottom: 1px;
    }

    #calendar-salon-staff-edit li.active button {
        color: #08BF5A;
        font-weight: 600 !important;
    }

    #calendar-salon-staff-edit li.message.active {
        border-bottom: none;
    }

    #calendar-salon-staff-edit li.message.active button {
        background: #F4FBF2;
        color: #08BF5A;
        border-radius: 4px;
        border: 1px solid #08BF5A !important;
    }

    .my_class {
        color: #000000 !important;
    }

    .my_class option {
        font-weight: 300 !important;
        color: #2B2F36 !important;
    }

    #calendar-salon-staff-edit input[type="text"] ,
    textarea {
        color: #2B2F36 !important;
    }

    #calendar-salon-staff-edit input:focus {
        box-shadow: none !important;
    }

    #calendar-salon-staff-edit textarea:focus {
        box-shadow: none !important;
    }

    /*#calendar-salon-course-edit [type='radio']:checked {*/
    /*    background: #FFFFFF;*/
    /*    outline: 1px solid green;*/
    /*}*/

    #reservation-information-modal .relative {
        background-color: #FFFFFF !important;
    }

    #friend-information-modal .relative {
        background-color: #FFFFFF !important;
    }

    #calendar-salon-staff-edit .box_description {
        padding-bottom: 30px;
    }

    #calendar-salon-staff-edit .norwrap_description {
        line-height: 25px;
        word-break: break-all;
    }

    textarea:disabled {
        background-color: #F8F8F8;
    }

    .custom-checkbox {
        position: relative;
        cursor: pointer;
        display: inline-block;
        line-height: 20px;
        width: 25px;
        /*height: 25px;*/
        margin-right: 9px;
    }

    .custom-checkbox input:checked+span {
        background-color: #08BF5A;
    }

    .custom-checkbox span {
        position: absolute;
        left: 0;
        top: 0;
        width: 25px;
        height: 25px;
        background-color: #FFFFFF;
        border-radius: 5px;
        transition: background-color 0.3s;
        border: 1px solid #E0E0E0;
    }

    .has-filter-calendar {
        color: #5799DB;
        text-decoration: underline;
        cursor: pointer;
    }

    .form-checkbox::-webkit-scrollbar {
        width: 6px;
        height: 40px;
        background-color: #FAFAFA;
    }

    .form-checkbox::-webkit-scrollbar-thumb {
        background-color: #DDDDDD;
        border-radius: 8px;
    }

    .wrap-custom-check:has(input:checked) {
        border: 1px solid #08BF5A;
        background-color: #F4FBF2 !important;
        width: 100%;
    }

    .wrap-custom-check .custom-checkbox {
        padding-left: 30px;
        position: relative;
        display: block;
        width: 100%;
    }

    .wrap-custom-check .custom-checkbox::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 20px;
        height: 20px;
        border-radius: 3px;
        border: 1px solid #DDDDDD;
    }

    .wrap-custom-check input:checked + .custom-checkbox::before {
        background-color: #08BF5A;
        border-color: #08BF5A;
    }

    .wrap-custom-check input:checked + label {
        color: #08BF5A;
        font-weight: 600;
    }
    .img_active{
        display: none;
    }
    .img_normal{
        display: inline-block;
    }
    .menu_action.active .img_normal{
        display: none;
    }
    .menu_action.active .img_active{
        display: inline-block;
    }
    .top-menu-select:has(.menu_info.active) {
        max-width:510px;
    }
    .top-menu-select:has(.menu_action.active)  {
        max-width:668px;
    }
    .hidden {
        display: none !important;
    }
    [hidden] {
        display: none !important;
    }
    #calendar-salon-staff-edit .relative {
        background-color: #FFFFFF !important;
    }
    .inp-bill::placeholder{
        text-align: center !important;
    }
    .inp-system::placeholder{
        color: #E0E0E0;
    }
    input[type="radio"]:checked {
        color: #08BF5A !important;
        accent-color: green;
    }

    input[type='radio']:checked {
        background-image: none;
        appearance: auto;
        -webkit-appearance: auto;
    }

    .custom-checkbox input:checked + span {
        background-color: #08BF5A;
    }


    #calendar-salon-staff-edit #setting-message input[type="radio"]:checked + label
    {
        color: #08BF5A;
        font-weight: 600;
    }


    #calendar-salon-staff-edit #setting-message input[type="radio"]:checked + span {
        color: #08BF5A;
        font-weight: 600;
    }


    #calendar-salon-staff-edit #reservation-information-modal input[type="radio"]:checked + span
    {
        color: #08BF5A;
        font-weight: 600;
    }


    #calendar-salon-staff-edit #friend-information-modal input[type="radio"]:checked + span
    {
        color: #08BF5A;
        font-weight: 600;
    }

    .setting-calendar-wrapper #setting-form textarea::placeholder {
        color: #E0E0E0;
    }


    #calendar-salon-staff-edit #setting-form input[type="radio"]:checked + span
    {
        color: #08BF5A;
        font-weight: 600;
    }

    #calendar-salon-staff-edit #setting-form input[type="radio"]:checked + label
    {
        color: #08BF5A;
        font-weight: 600;
    }



</style>
@endpush
@section('content')
<h3 class="text-[20px] leading-[27px] font-semibold mb-[30px] mt-5 ml-[15px] text-[#222222]">スタッフ詳細</h3>
<div id="calendar-salon-staff-edit" class="text-[#2B2F36]" v-cloak>
    <div class=" top-menu-select  w-full" >
        <div class="tab-header pt-[15px] border-solid border border-[#DDDDDD] pb-[15px]">
            <ul class="flex flex-wrap -mb-[17px] font-light pl-[15px]">
                <li class=" active mr-[20px] menu_info">
                    <button type="button" class="font-light inline-block pr-[16px] mb-[10px] py-2 px-3 hover:opacity-70 text-[16px]
                     border border-solid border-[#08BF5A]
                     rounded-[3px] bg-white
                     text-[#08BF5A]" data-toggle="tab"
                            href="#basic-info"><i class="far fa-list-alt"></i> 基本情報
                    </button>
                </li>
                <li class="menu_action">
                    <button @click="loadDataAction" type="button"
                            class=" flex font-light inline-block mb-[10px] py-2 px-2 hover:opacity-70 text-[16px]
                     border border-solid border-[#08BF5A]
                     rounded-[3px] bg-white
                     text-[#08BF5A]" data-toggle="tab"
                            href="#action-setting">
                        <img src="/images/arrow-down-from-arc-regular-white.png" class="w-[20px] h-[20px] mr-[5px] img_active" alt="">
                        <img src="/images/arrow-down-from-arc-regular-green.png" class="w-[20px] h-[20px] mr-[5px] img_normal" alt="">
                         予約完了・リクエスト承認時アクション
                    </button>
                </li>
            </ul>

        </div>

        <div class="tab-content">
            <div class="tab-pane fade in active !bg-white" id="basic-info">
                <div class="  border-solid border border-[#DDDDDD] " :class="{'bg-[#F8F8F8]': formEditStaff.staffImage }" style="border-top: 1px solid #DDDDDD ;border-bottom: none">
                    <div class="w-[250px] !h-[250px]"  style="position: relative; margin: auto" >
                        <div  class=" absolute right-[20px] top-3 flex">
                            <div
{{--                                    v-if="buttonUpload.isShowBtnEdit"--}}
                                 @click.prevent="showModalUpload()"
                                 class="   flex items-center justify-center hover:opacity-70 cursor-pointer border border-solid bg-white border-[#DDDDDD] w-[40px] h-[40px] rounded-[5px] mr-[15px]">
                                <i class="far fa-edit text-[20px] text-[#222222]"></i>
                            </div>
                            <div @click.prevent="deleteImage()"
{{--                                 v-if="buttonUpload.isShowBtnDelete" --}}
                                 class=" flex items-center justify-center hover:opacity-70 cursor-pointer border border-solid bg-white border-[#DDDDDD] w-[40px] h-[40px] rounded-[5px] " >
                                <i class="fal fa-trash-alt  text-[20px] text-[#222222]"></i>
                            </div>
                        </div>
                        <div v-show="!formEditStaff.staffImage" class="absolute left-[21%] top-[146px] text-[14px] text-[#888888] text-[14px] font-light ">推奨 1,000 × 1,000 (px)</div>

                        <img :src="formEditStaff.staffImage ? (formEditStaff.staffImage.indexOf('ext-media') >= 0 ? '{{ env('URL_SERVER_MEDIA') }}' + formEditStaff.staffImage: formEditStaff.staffImage) : '/images/img_staff.png'" class="w-[250px] !h-[250px]" alt=""
                             @click.prevent="showModalUpload()">
                        <input accept="image/*" ref="fileInput" type="file" id="inputFile" @change="previewFiles($event)" class="hidden mt-[40px]">
                    </div>

                </div>
                <div v-show="formEditStaff.staffImage" class=" right text-[12px] text-[#888888] " style="float: right;
    margin-top: 8px;
    margin-right: 13px;
    font-weight: 300;">推奨 1,000 × 1,000 (px)</div>
                <div class=" border-solid border border-[#DDDDDD] px-2 pt-[42px]  pb-[26px]">
                    <div class="max-w-[450px] w-full ml-[15px] ">
                        <div class="flex text-[14px] leading-[21px] justify-between">
                            <div class="font-semibold text-[14px]"><span class="font-semibold text-[#F44336]">＊</span> スタッフ名 <span class="font-semibold text-[#F44336]">（お客様に表示されます）</span></div>
                            <div class="font-light text-[#888888]">@{{ formEditStaff.staffName ? formEditStaff.staffName.length
                                : 0 }}/50
                            </div>
                        </div>
                        <input id="myField" v-model="formEditStaff.staffName"  class=" inp-system form-control mt-[8px] mb-[6px] !h-[40px]
                                !px-[10px]
                                text-[14px] !pl-[10px]
                                border border-solid border-[#DDDDDD] rounded-[3px]
                                placeholder:text-[#D3D3D3] font-light" type="text" placeholder="フォルダ名を入力">
                    </div>
                    <div class="max-w-[450px] w-full ml-[15px]">
                        <div class="flex text-[14px] leading-[21px] justify-between mt-[25px]">
                            <div class="font-semibold text-[14px]"><span class="font-semibold text-[#F44336]">＊</span> システム管理名 <span class="font-semibold text-[#F44336]">（お客様には表示されません）</span></div>

                            <div class="font-light text-[#888888]">@{{ formEditStaff.staffSystemName ?
                                formEditStaff.staffSystemName.length : 0 }}/10
                            </div>
                        </div>
                        <input v-model="formEditStaff.staffSystemName" class="form-control border-solid border-1 border-[#DDDDDD]
                mt-[8px] mb-[6px] !h-[40px]
                !px-[10px]
                text-[14px]
                    !pl-[10px]
                    border border-solid border-[#DDDDDD] rounded-[3px]
                    placeholder:text-[#D3D3D3] font-light" type="text" placeholder="システム管理名を入力">
                    </div>
                    <div class="w-full flex  ml-[15px]">
                        <div class="">
                            {{--                        <div class="mt-[25px] mb-[10px] text-[#222222]">--}}
                            {{--                            <span class="font-semibold text-[16px]">イメージ</span>--}}
                            {{--                            <span class="font-light text-[14px] ml-[15px]">推奨 1,000 × 700（px）</span>--}}
                            {{--                        </div>--}}
                            {{--                        <div class="max-w-[200px] !h-[100px]">--}}
                            {{--                            <img :src="formEditStaff.staffImage ?? '/images/Group3022.png'" class="w-full h-full" alt="">--}}
                            {{--                            <input accept="image/*" ref="fileInput" type="file" id="inputFile" @change="previewFiles($event)" class="hidden mt-[40px]">--}}
                            {{--                        </div>--}}
                            {{--                        <div class="text-[16px] text-[#5799DB] mt-[5px] font-light">--}}
                            {{--                        <span v-if="buttonUpload.isShowBtnUpload" @click.prevent="showModalUpload()" class="hover:opacity-70 cursor-pointer underline--}}
                            {{--                        !font-light"><span--}}
                            {{--                                    class="!font-light text-[16px]">アップロード</span></span>--}}
                            {{--                            <span v-if="buttonUpload.isShowBtnEdit" @click.prevent="showModalUpload()" :class="{'cursor-pointer underline': true}"><span class="font-light">変更</span></span>--}}
                            {{--                            <span @click.prevent="deleteImage()" v-if="buttonUpload.isShowBtnDelete" class="ml-[10px] text-[#F44336] cursor-pointer underline"><span class="font-light">削除</span></span>--}}
                            {{--                        </div>--}}
                            {{--                        <div class="text-[#222222] mt-[50px] text-[16px] font-semibold">所要時間</div>--}}
                            {{--                        <div class="flex justify-start align-item-center mt-[10px] text-[#2B2F36] text-[16px] !font-light">--}}
                            {{--                            <select class="font-light my_class text-[#2B2F36] text-[16px] !w-[80px] !h-[32px] px-[10px] !py-0 border-solid border-1--}}
                            {{--                        !border-[#DDDDDD]--}}
                            {{--                        bg-white rounded-[4px]" v-model="formEditStaff--}}
                            {{--                        .hourDone">--}}
                            {{--                                @for($i = 0; $i < 24; $i++) <option class="font-light" value="{{ str_pad($i, 2, '0', STR_PAD_LEFT) }}">{{ str_pad($i, 2, '0', STR_PAD_LEFT) }}</option>--}}
                            {{--                                @endfor--}}
                            {{--                            </select>--}}
                            {{--                            <span class="ml-[7px] mr-[7px] !font-light">時間</span>--}}
                            {{--                            <select class="font-light my_class text-[#2B2F36] text-[16px] !w-[80px] !h-[32px] px-[10px] !py-0 border-solid border-1--}}
                            {{--                        !border-[#DDDDDD]--}}
                            {{--                        bg-white--}}
                            {{--                        rounded-[4px]" v-model="formEditStaff--}}
                            {{--                        .minuteDone">--}}
                            {{--                                @for($i = 0; $i < 60; $i+=5) <option class="font-light" value="{{ str_pad($i, 2, '0', STR_PAD_LEFT) }}">{{ str_pad($i, 2, '0', STR_PAD_LEFT) }}</option>--}}
                            {{--                                @endfor--}}
                            {{--                            </select>--}}
                            {{--                            <span class="ml-[7px] mr-[7px] font-light">分</span>--}}
                            {{--                        </div>--}}
                            <div class="text-[#222222] text-[14px] font-semibold mt-[25px] mb-[10px]">スタッフ指名料金</div>
                            <input v-model="formEditStaff.amount" type="text" class=" inp-bill focus:outline-none font-light border-solid border-1 !border-[#DDDDDD]
                    bg-white rounded-[4px] text-[16px] text-right
                    placeholder:text-[#D3D3D3] !w-[120px] !h-[40px] !px-[10px]" placeholder="5,000" />
                            <span class="text-[16px] text-[#2B2F36] font-light ml-[10px]">円（税込）</span>
                            <div v-if="botPlanType == 2" class="pt-[5px] text-[14px] text-[#222222] font-light">
                                <span class="font-light">決済機能の利用は、有料プランに</span>
                                <span><a onclick="window.location='{{route('botAdd',['upgrade_bot_id'=>Hashids::encode($botId)])}}'" class="text-[#5799DB] text-[14px] underline font-light" href="javascript:void(0)">アップグレード</a></span>
                                <span class="font-light">する必要があります。</span>
                            </div>
                            <div class="max-w-[450px] flex justify-between mt-[50px] mb-[5px]">
                                <div class="text-[14px] text-[#222222]">スタッフ説明</div>
                                <div class="text-[#888888] text-[14px] font-light">@{{ formEditStaff.staffDescription ?
                                    formEditStaff.staffDescription.length : 0 }}/1,000
                                </div>
                            </div>
                            <textarea v-model="formEditStaff
                        .staffDescription" class="overflow-y-auto
                    focus:outline-none font-light w-[450px] min-h-[150px] border-1
                    border-solid !border-[#DDDDDD]
                    rounded-[3px] px-[10px] py-[10px]"></textarea>
                        </div>
                    </div>
                </div>

                <div>
                    <div class="pl-[20px]">
                        <div class="mt-[30px] text-[14px] text-[#222222] !font-semibold">コース連携設定</div>
                        <div class="mt-[15px]  rounded-[4px] bg-[#F8F8F8] p-[15px] leading-[24px]">
                            <span class="block text-[14px] text-[#222222] font-semibold leading-[24px]">スタッフごとに対応できるコースが設定できます。</span>
                            <span class="block text-[14px] text-[#222222] font-light tracking-[0px] leading-[24px]" >例）「カット」「シャンプー」「ヘッドスパ」の3コースの場合、カットの対応ができないスタッフは「シャンプー」「ヘッドスパ」のみコース連携することで、「カット」を予約するお客様には、該当スタッフが表示されなくなります。</span>
{{--                            <span class="block text-[14px] text-[#222222] font-light ">いスタッフは「シャンプー」「ヘッドスパ」のみコース連携することで、「カット」を予約</span>--}}
{{--                            <span class="block text-[14px] text-[#222222] font-light">するお客様には、該当スタッフが表示されなくなります。</span>--}}
                        </div>
                        <div class="mt-[15px] text-[#222222] text-[14px] !font-semibold">
                            スタッフ対応可能なコース
                        </div>
                        <div class="form-checkbox w-[100%] h-full max-h-[220px] bg-[#F8F8F8] px-[10px] py-[10px] pr-[30px] mt-[20px] overflow-y-auto cursor-pointer">
                            <div class="wrap-custom-check h-[40px] !bg-[#FFFFFF] rounded-[3px] flex items-center px-[10px] mb-[8px] w-[100%]">
                                <input type="checkbox" @click="selectAllCourse"
                                       v-model="allSelected"
                                       id="check_all_course"
                                       name="check_all_course"
                                       class="checkboxField w-[20px] h-[20px] rounded-[3px] bg-[#FFFFFF] border border-solid border-[#DDDDDD] hidden">
                                <label for="check_all_course" class="custom-checkbox text-[14px] font-light text-[#222222]">コースを全選択</label>
                            </div>
                            <div v-for="(course, indexCourse) in formEditStaff.courseLists"
                                 class="wrap-custom-check form-checkbox h-[40px] !bg-[#FFFFFF] rounded-[3px] flex items-center px-[10px] mb-[8px] w-[100%]">
                                <input type="checkbox"
                                       :id="'check-course' + indexCourse"
                                       name="course"
                                       :value="course.id"
                                       v-model="formEditStaff.course_ids"
                                       v-on:change="selectCourse"
                                       class="checkboxField w-[20px] h-[20px] rounded-[3px] bg-[#FFFFFF] border border-solid border-[#DDDDDD] hidden">
                                <label :for="'check-course' + indexCourse" class="custom-checkbox text-[14px] font-light text-[#222222]">@{{ course.system_name ? course.system_name : course.course_name
                                    }}</label>
                            </div>
                        </div>
                        <div class="mt-[23px]">
                            <a href="" @click.prevent="redirectTab('#action-setting', 'setting_action')" class="text-[#5799DB] text-[14px] !font-light
                        underline">予約完了・リクエスト承認時アクションを設定する</a>
                        </div>
                    </div>

                </div>
                <div id="button-trans-preview" class="flex w-[450px] text-[16px] font-light mb-[8px] mt-[25px] pl-[20px]">
                    <button @click.prevent="updateStaff()" class="hover:opacity-70 font-light cursor-pointer !bg-[##FFFFFF] border border-solid border-[#08BF5A]
                        !rounded-[3px] text-[#08BF5A] w-[150px]
                        h-[35px] text-[16px]">保存
                    </button>

                </div>
                <div  class="flex justify-content-between align-item-center text-[16px] font-light mb-[8px] mt-[25px] pl-[20px]">
                    <button @click.prevent="backToList()" class="hover:opacity-70 cursor-pointer !bg-[#FFFFFF] rounded-[3px] border border-solid border-[#DDDDDD]
                    text-[#535657] text-[14px] w-[100px] h-[35px] font-light">戻る
                    </button>
                    <a @click.prevent="handleDeleteStaff()" class="hover:opacity-70 font-light cursor-pointer text-[#F44336] text-[16px] ml-[150px]
                underline">このスタッフを削除する</a>
                </div>

            </div>
            <div class="tab-pane fade in  !bg-white " id="action-setting">
                <div class="max-w-[668px] px-[30px] py-[20px] border border-solid border-[#DDDDDD]">
                    <div class="bg-[#FDEBE9] w-full h-[60px] rounded-[4px] py-[7px] px-[15px] flex items-center">
                        <div class="mr-[8px] w-[25px] h-[20px] bg-[#F44336] rounded-[20px] leading-[17px] text-center">
                            <i class="text-[#FFFFFF] text-[10px] fal
                    fa-info"></i>
                        </div>
                        <div class="text-[#F44336] text-[14px] font-light">
                            このアクションが設定されている場合は、全体設定の予約（リクエスト承認）時アクションは稼働しません。
                        </div>
                    </div>
                    <div class="tab-header mt-[22px] mb-[35px]">
                        <ul class="flex flex-wrap font-light">
                            <li :class="{'message mr-[5px]': 'true', 'active': true}">
                                <button href="#message-send-after-booking" @click="calendarStaffSetting.tab_current = 'status-send-after-booking'"
                                        data-toggle="tab" class="
                            text-[16px]
                            border
                            border-solid
                            !border-[#DDDDDD]
                            rounded-[4px]
                            w-[150px]
                            font-light
                            hover:opacity-70
                    h-[40px]">予約完了時</button>
                            </li>
                            <li :class="{'message': 'true', 'active': false}">
                                <button @click="calendarStaffSetting.tab_current = 'status-send-approve-booking'" href="#message-send-approve-booking"
                                        data-toggle="tab" class="text-[#888888] font-light
                            text-[16px]
                            border border-solid
                            !border-[#DDDDDD] rounded-[4px]
                            bg-white w-[190px]
                            hover:opacity-70
                    h-[40px] ml-[8px]">予約リクエスト承認時
                                </button>
                            </li>
                        </ul>
                    </div>
                    <div class="tab-content">
                        <div class="tab-pane fade in active !bg-white" id="message-send-after-booking">
                            <div class="bg-[#F8F8F8] w-full h-[50px] flex justify-between align-items-center border border-solid border-[#DDDDDD] px-[15px] text-[14px]
                text-[#222222]
                 font-light">
                                <button :disabled="calendarStaffSettingNotify.use_message_notify_send_after_booking == 1" @click="appendTextInformation('{name}',
                             2)" class="hover:opacity-70 font-normal bg-white flex justify-center items-center
                            border border-solid !border-[#DDDDDD] rounded-[3px]
                            w-[100px] h-[30px] hover:opacity-70">＋
                                    LINE名
                                </button>
                                <button :disabled="calendarStaffSettingNotify.use_message_notify_send_after_booking == 1" @click="showReservationInformationModal =
                            true" class="hover:opacity-70 font-normal bg-white flex justify-center
                            items-center border border-solid !border-[#DDDDDD] rounded-[3px] w-[100px]
                    h-[30px]">予約情報
                                </button>
                                <button :disabled="calendarStaffSettingNotify.use_message_notify_send_after_booking == 1" @click="showFriendInformationModal =
                            true; getDataFriendInfo()" class="hover:opacity-70 font-normal bg-white flex
                            justify-center align-items-center border border-solid border-[#DDDDDD] rounded-[3px]
                            w-[100px]
                    h-[30px]">友だち情報
                                </button>
                                <div class="link mr-[15px]">
                                    <a @click="insertExampleSentence" class="cursor-pointer text-[#5799DB] text-[14px] underline font-normal">例文を挿入する</a>
                                </div>
                                <div class="checkbox flex align-items-center font-light">
                                    <label class="custom-checkbox"><input v-model="calendarStaffSettingNotify.use_message_notify_send_after_booking"
                                                                          type="checkbox" hidden="hidden"> <span></span></label>
                                    <span class="font-normal" :class="calendarStaffSettingNotify.use_message_notify_send_after_booking ? 'text-[#08BF5A]' :
                                ''">利用しない</span>
                                </div>
                            </div>
                            <textarea id="message_notify_send_after_booking" :disabled="calendarStaffSettingNotify.use_message_notify_send_after_booking == 1"
                                      @select="saveCursorPosition" @click="saveCursorPosition" @keyup="saveCursorPosition" v-model="calendarStaffSettingNotify
                                  .message_notify_send_after_booking" class="focus:outline-none font-light w-full text-[14px]
                        h-[400px] border border-solid
                        border-[#DDDDDD]
                        overflow-y-auto
                        border-t-0 bg-white p-[15px]"></textarea>
                            <div class="text-right text-[#888888] text-[14px] font-light mt-[8px]">
                                @{{ calendarStaffSettingNotify.message_notify_send_after_booking ?
                                calendarStaffSettingNotify.message_notify_send_after_booking.length : 0 }}/5,000
                            </div>
                            <div class="mt-[25px] text-[#222222] text-[16px] mb-[10px] font-light">
                                上記メッセージ送信以外に、タグ付け等のアクションを設定する場合はこちら↓
                            </div>
                            <div class="flex justify-between items-center w-full h-[70px] border border-solid border-[#E0E0E0] px-[15px] rounded-[3px]">
                                <div class="h-full flex items-end border-b-2 border-solid border-b-[#08BF5A] text-[14px] text-[#08BF5A] font-semibold">
                                    エルメアクション
                                </div>
                                <button class="hover:opacity-70 font-light border border-solid border-[#08BF5A] bg-white rounded-[4px] w-[180px] h-[40px] text-[#08BF5A]
                    text-[14px] mr-[10px]" @click="openSettingActionSendAfterBooking('calendar-staff-status-send-after-booking', calendarStaffSettingAction
                    .action_id_send_after_booking)
                    ">アクション登録・編集
                                </button>
                            </div>
                            <div class="w-full max-h-[400px] overflow-y-auto border border-solid border-[#E0E0E0] px-[15px]">
                                @include('basic.calendar_salon.tabs.staff.preview_action_send_after_booking')
                            </div>
                            <div class="text-[#2B2F36] text-[18px] font-light mt-[55px] mb-[20px] font-semibold">
                                スタッフ詳細の絞り込み表示
                            </div>
                            <div class="font-light border border-solid border-[#F8F8F8] rounded-[4px] w-full h-[64px]
                    bg-[#F8F8F8] px-[20px] py-[10px] text-[14px] text-[#222222]">
                                以下で設定した条件を満たす友だちにだけこのスタッフを表示する設定です。 <br>例）「店長対応」タグが付いている友だちにだけ、店長を表示する など
                            </div>
                            <div class="flex justify-between items-center w-full h-[70px] border border-solid border-[#E0E0E0] px-[15px] mt-[20px]" style="border-radius: 3px 3px 0px 0px;">
                                <div class="font-semibold text-[16px] text-[#222222]">対象人数</div>
                                <div class="link">
                                    <span v-if="calendarStaffSettingFilter.list_preview_filter_send_after_booking.length == 0"
                                          class="font-semibold text-[16px] text-[#5799DB] mr-[110px]">@{{
                                        calendarStaffSettingFilter.filter_number }}人（友だち全員)
                                    </span>
                                    <span v-else class="font-semibold text-[16px] text-[#5799DB] ml-[-115px]">@{{
                                        calendarStaffSettingFilter.filter_number }}人
                                    </span>
                                </div>
                                <button @click="showModalFilterV2SendAfterBooking(formEditStaff.staffId, 'status-send-after-booking')"
                                        class="font-light
                            border
                            border-solid
                            border-[#5799DB]
                            bg-white
                            rounded-[4px] w-[180px] h-[40px] text-[#5799DB]
                            hover:opacity-70
                    text-[14px] mr-[10px]">絞り込み条件 登録・編集
                                </button>
                            </div>
                            <div class="w-full max-h-[250px] overflow-y-auto border border-solid border-[#E0E0E0]" style="border-radius: 0px 0px 3px">
                                <div class="setting_destination_area rounded-[4px] p-[10px] bg-[#F5F6F7] min-h-[115px] scroll-auto" v-if="calendarStaffSettingFilter
                            .list_preview_filter_send_after_booking.length > 0">
                                    <div v-for="(preview, index) in calendarStaffSettingFilter.list_preview_filter_send_after_booking" v-html="preview"
                                         style="font-weight: 600">
                                    </div>
                                </div>
                                <div v-if="calendarStaffSettingFilter.list_preview_filter_send_after_booking == 0" class="mx-[15px] my-[15px] font-light border
                            border-solid border-[#F8F8F8] rounded-[3px] flex justify-center items-center h-[40px] text-[14px] text-[#535657]
                    bg-[#F8F8F8]">絞り込み条件が登録されていません
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade in !bg-white" id="message-send-approve-booking">
                            <div class="bg-[#F8F8F8] w-full h-[50px] flex justify-between align-items-center border border-solid border-[#DDDDDD] px-[15px] text-[14px]
                text-[#222222]
                 font-light">
                                <button :disabled="calendarStaffSettingNotify.use_message_notify_send_approve_booking == 1" @click="appendTextInformation('{name}',
                            2)" class="font-normal bg-white flex justify-center items-center
                            border border-solid !border-[#DDDDDD] rounded-[3px]
                            w-[100px] h-[30px] hover:opacity-70">＋
                                    LINE名
                                </button>
                                <button :disabled="calendarStaffSettingNotify.use_message_notify_send_approve_booking == 1"
                                        @click="showReservationInformationModal = true" class="hover:opacity-70 font-normal bg-white flex justify-center
                            items-center border border-solid !border-[#DDDDDD] rounded-[3px] w-[100px]
                    h-[30px]">予約情報</button>
                                <button :disabled="calendarStaffSettingNotify.use_message_notify_send_approve_booking == 1" @click="showFriendInformationModal =
                            true; getDataFriendInfo()" class="hover:opacity-70 font-normal bg-white flex
                            justify-center align-items-center border border-solid border-[#DDDDDD] rounded-[3px]
                            w-[100px] h-[30px]">友だち情報</button>
                                <div class="link mr-[15px]">
                                    <a @click="insertExampleSentenceRequest" class="cursor-pointer text-[#5799DB] text-[14px] underline font-normal">例文を挿入する</a>
                                </div>
                                <div class="checkbox flex align-items-center font-light">
                                    <label class="custom-checkbox"><input v-model="calendarStaffSettingNotify.use_message_notify_send_approve_booking"
                                                                          type="checkbox" hidden="hidden"> <span></span></label>
                                    <span :class="calendarStaffSettingNotify.use_message_notify_send_approve_booking ? 'text-[#08BF5A]' : ''"
                                          class="font-normal">利用しない</span>
                                </div>
                            </div>
                            <textarea id="message_notify_send_approve_booking" :disabled="calendarStaffSettingNotify.use_message_notify_send_approve_booking == 1"
                                      @select="saveCursorPosition" @click="saveCursorPosition" @keyup="saveCursorPosition" v-model="calendarStaffSettingNotify
                                  .message_notify_send_approve_booking" class="focus:outline-none font-light w-full text-[14px]
                            h-[400px] border border-solid
                            border-[#DDDDDD]
                            overflow-y-auto
                        border-t-0 bg-white p-[15px]"></textarea>
                            <div class="text-right text-[#888888] text-[14px] font-light mt-[8px]">
                                @{{ calendarStaffSettingNotify
                                .message_notify_send_approve_booking ?
                                calendarStaffSettingNotify
                                .message_notify_send_approve_booking.length : 0 }}/5,000
                            </div>
                            <div class="mt-[25px] text-[#222222] text-[16px] mb-[10px] font-light">
                                上記メッセージ送信以外に、タグ付け等のアクションを設定する場合はこちら↓
                            </div>
                            <div class="flex justify-between items-center w-full h-[70px] border border-solid border-[#E0E0E0] px-[15px] rounded-[3px]">
                                <div class="h-full flex items-end border-b-2 border-solid border-b-[#08BF5A] text-[14px] text-[#08BF5A] !font-semibold">
                                    エルメアクション
                                </div>
                                <button class="hover:opacity-70 font-light border border-solid border-[#08BF5A] bg-white rounded-[4px] w-[180px] h-[40px] text-[#08BF5A]
                    text-[14px] mr-[10px]" @click="openSettingActionSendApproveBooking('calendar-staff-status-send-approve-booking', calendarStaffSettingAction
                    .action_id_send_approve_booking)
                    ">アクション登録・編集
                                </button>
                            </div>
                            <div class="w-full max-h-[400px] overflow-y-auto border border-solid border-[#E0E0E0] px-[15px]">
                                @include('basic.calendar_salon.tabs.staff.preview_action_send_approve_booking')
                            </div>
                            <div class="text-[#2B2F36] text-[18px] font-light mt-[55px] mb-[20px] font-semibold">
                                スタッフ詳細の絞り込み表示
                            </div>
                            <div class="font-light border border-solid border-[#F8F8F8] rounded-[4px] w-full h-[64px]
                    bg-[#F8F8F8] px-[20px] py-[10px] text-[14px] text-[#222222]">
                                以下で設定した条件を満たす友だちにだけこのスタッフを表示する設定です。<br> 例）「店長対応」タグが付いている友だちにだけ、店長を表示する など
                            </div>
                            <div class="flex justify-between items-center w-full h-[70px] border border-solid border-[#E0E0E0] px-[15px] mt-[20px]">
                                <div class="font-semibold text-[16px] text-[#222222]">対象人数</div>
                                <div class="link">
                                    <span v-if="calendarStaffSettingFilter.list_preview_filter_send_after_booking.length == 0"
                                          class="font-semibold text-[16px] text-[#5799DB] mr-[110px]">@{{
                                        calendarStaffSettingFilter.filter_number }}人（友だち全員)
                                    </span>
                                    <span v-else class="font-semibold text-[16px] text-[#5799DB] ml-[-115px]">@{{
                                        calendarStaffSettingFilter.filter_number }}人
                                    </span>
                                </div>
                                <button @click="showModalFilterV2SendAfterBooking(formEditStaff.staffId, 'status-send-after-booking')"
                                        class="font-light
                            border
                            border-solid
                            border-[#5799DB]
                            bg-white
                            rounded-[4px] w-[180px] h-[40px] text-[#5799DB]
                            hover:opacity-70
                    text-[14px] mr-[10px]">絞り込み条件 登録・編集
                                </button>
                            </div>
                            <div class="w-full max-h-[250px] overflow-y-auto border border-solid border-[#E0E0E0]">
                                <div class="setting_destination_area rounded-[4px] p-[10px] bg-[#F5F6F7] min-h-[115px] scroll-auto"
                                     v-if="calendarStaffSettingFilter.list_preview_filter_send_after_booking.length > 0">
                                    <div v-for="(preview, index) in calendarStaffSettingFilter.list_preview_filter_send_after_booking" v-html="preview"
                                         style="font-weight: 600">
                                    </div>
                                </div>
                                <div v-if="calendarStaffSettingFilter.list_preview_filter_send_after_booking == 0" class="mx-[15px] my-[15px] font-light border
                            border-solid border-[#F8F8F8] rounded-[3px] flex justify-center items-center h-[40px]
                    bg-[#F8F8F8]">絞り込み条件が登録されていません
                                </div>
                            </div>
                        </div>

                    </div>

                </div>
                <div class="ml-[20px]">
                    <div class="mt-[25px]">
                        <a href=""
                           @click.prevent="redirectTab('#basic-info', 'setting_action')"
                           class="text-[#5799DB] text-[14px] font-light
                        underline">基本情報を設定する</a>
                    </div>
                    <div id="button-trans-preview" class="flex w-[450px] text-[16px] font-light mb-[8px] mt-[25px]">
                        <button @click.prevent="updateStaff()" class="hover:opacity-70 font-light cursor-pointer !bg-[##FFFFFF] border border-solid border-[#08BF5A]
                        !rounded-[3px] text-[#08BF5A] w-[150px]
                        h-[35px] text-[16px]">保存
                        </button>

                    </div>
                    <div  class="flex justify-content-between text-[16px] font-light mb-[8px] mt-[25px] align-item-center ">
                        <button @click.prevent="backToList()" class="hover:opacity-70 cursor-pointer !bg-[#FFFFFF] rounded-[3px] border border-solid border-[#DDDDDD]
                    text-[#535657] text-[14px] w-[100px] h-[35px] font-light">戻る
                        </button>
                        <a @click.prevent="handleDeleteStaff()" class="hover:opacity-70 font-light cursor-pointer text-[#F44336] text-[16px] ml-[150px]
                underline">このスタッフを削除する</a>
                    </div>
                </div>
            </div>
        </div>
    </div>



    @include('basic.calendar_salon.modal.reservation_information')
    @include('basic.calendar_salon.modal.friend_information')
    @include('basic.calendar_salon.modal.delete_staff')
</div>
@include('layout.modal_setting.modal_select_action')
@include('layout.modal_filter_v2')
@endsection
@push('js')
<script src="/js/form_answer/jquery.ui.datepicker-ja.js"></script>
<script src="/chat_files/bootstrap-timepicker.js"></script>

<script>
    var urlMedia = '