@extends('layout.admin.main')
@section('title','通知設定（一覧）')

@push('css')
  <style>
    #notification_schedule, #notification_schedule_chat_work, #schedule_pc{
      background: url(/images/icons8-chevron-down-25.png) right 12px center no-repeat;
      background-color: #FFFFFF;
      color:#2B2F36 ;
      font-size: 12px;
      font-weight: 300;
      border: 1px solid #E0E0E0;
      border-radius: 3px;
      appearance: none;
      width: 180px;
      outline: none;
      height: 35px;
      padding-left: 8px;
      -webkit-appearance: none; /* Support for Google Chrome và Safari. */
      -moz-appearance: none; /* Support for firefox. */
      -ms-appearance: none; /* Support for Internet Explorer. */
      -o-appearance: none; /* Support for Opera. */
    }


    .checkbox label {
      font-weight: bold;
    }

    input[type="checkbox"] {
      width: 16px;
      height: 16px;
      margin-top: 1.5px;
    }

    h2 {
      font-size: 20px;
      color: #535657;
      font-weight: 600;
    }
    .checkbox label {
      color: #535657
    }

    .left_bar {
      border-left: solid 6px #00a65a;
      height: 20px;
      text-indent: 18px;
      font-size: 18px;
      font-weight: 600 !important;
      margin-right: 10px;
    }

    .label-chatwork {
      background: rgba(240,240,240,1);
      width: 100%;
      font-weight: bold;
      border: solid 1px rgba(240,240,240,1);
    }

    .label-sub {
      color: rgba(68,203,128,1);
      padding-top: 20px;
      padding-bottom: 10px;
    }
    #notify-setting .col-md-2 {
      width: 18%;
    }
    #notify-setting .col-md-10 {
      width: 82%;
    }
    .box-title{
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 20px;
    }
    .btn_manual{
      border: 1px solid #DDDDDD;
      border-radius: 4px;
      color: #2B2F36 !important;
      font-size: 14px;
      font-weight: 600;
    }
    .tt_box{
      color: #535657;
      font-size: 16px;
      font-weight: 300;
      margin-top: 25px;
    }
    #tbl_setting_notify_option, .setting_notify_other_box , .box-title{
      max-width: 800px;
    }
    #tbl_setting_notify_option thead tr{
      border: 1px solid #E0E0E0;
    }
    #tbl_setting_notify_option th{
      background: #F8F8F8 !important;
      padding: 15px;
      color: #535657;
      font-size: 14px;
      font-weight: 600;
      border-bottom: 1px solid #E0E0E0;
    }
    #tbl_setting_notify_option  tr{
      border: 1px solid #E0E0E0;
    }
    #tbl_setting_notify_option  tr td{
      text-align: center;
    }
    .text-normal{
      color: #333333;
      font-size: 12px;
      font-weight: 300;
      margin-right: 18px;
      margin-left: 7px;
    }
    .text-active{
      color: #08BF5A;
      font-size: 12px;
      font-weight: 300;
      margin-right: 18px;
      margin-left: 7px;
    }
    .cl-switch>input:checked+span::before {
      background-color: #85b8b7;
    }

    .cl-switch>span::before {
      content: "";
      float: right;
      display: inline-block;
      margin: 5px 0 5px 0;
      border-radius: 7px;
      width: 35px;
      height: 13px;
      background-color: #2B2F36;
      opacity: 0.2;
      vertical-align: top;
    }

    .cl-switch>input:checked+span::after {
      background-color: #08BF5A;
      transform: translateX(16px);
      left: 1px;
    }

    .cl-switch>span::after {
      content: "";
      position: absolute;
      top: 3px;
      right: 19px;
      border-radius: 50%;
      width: 16px;
      height: 16px;
      background-color: #999999;
      box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    }

    .cl-switch>input:checked {
      right: -10px;
      background-color: #85b8b7;
    }

    .cl-switch>input {
      appearance: none;
      -moz-appearance: none;
      -webkit-appearance: none;
      z-index: -1;
      position: absolute;
      right: 6px;
      top: -8px;
      display: block;
      margin: 0;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      background-color: rgb(0, 0, 0, 0.38);
      outline: none;
      opacity: 0;
      transform: scale(1);
      pointer-events: none;
    }

    .cl-toggle-switch {
      margin-right: 5px;
      margin-left: -9px;
    }
    .cursor-pointer{
      cursor: pointer;
    }
    .btn_blue_line{
      border: 1px solid #5799DB;
      background: #FFFFFF 0% 0% no-repeat padding-box;
      border-radius: 3px;
      color: #5799DB !important;
      font-size: 12px;
      font-weight: 300;
      height: 35px;
      width: 110px;
    }
    .setting_notify_other_box{
      border: 1px solid #E0E0E0;
      margin-top: 15px;
        background: #ffffff;
    }

    .setting_notify_other {
      border-bottom: 1px solid #E0E0E0;

      display: flex;
      align-items: center;
      background: #F8F8F8;
    }

    .setting_notify_other_item {
      display: flex;
      position: relative;
      /*align-items: center;*/
    }

    .setting_notify_other .title {

      color: #535657;
      font-size: 14px;
      font-weight: 600;
      /*display: flex;*/
      padding: 10px;
      text-align: center;
    }

    .menu_left_nt {
      display: flex;
      align-items: center;
      width: 320px;
      border-right: 1px solid #E0E0E0;
    }

    .menu_right_nt {
      /*display: flex;*/
      /*align-items: center;*/
      width: 100%;
    }

    .menu_left_nt .text {
      width: 170px;
    }

    .menu_left_nt .setting {
      width: 150px;
    }
    .menu_left_nt .item{
      display: flex;
      align-items: center;
      padding: 10px;
    }
    .menu_left_content {
      width: 320px;
      border-right: 1px solid #E0E0E0;
    }


    .menu_left_content .text {
      width: 170px;
      padding-left: 15px;
      cursor: pointer;
      color: #535657;
      font-size: 14px;
    }

    .menu_left_content .setting {
      width: 150px;
    }
    .menu_left_content .setting i{
      color: #E0E0E0;
      font-size: 13px;
    }

    .menu_left_content .item{
      display: flex;
      /*display: -webkit-box;*/
      align-items: center;
      padding: 11px 2px;
      cursor: pointer;
      height: 52px;
    }
    .menu_left_content .item.active{
      background: #F5FCF8 !important;
    }
    .menu_left_content .item.active .text{
      color: #08BF5A;
      display: flex;
      align-items: center;
      padding-left: 5px;
      font-weight: 600;
      font-size: 14px;
    }
    .border-active{
      background: #08BF5A 0% 0% no-repeat padding-box;
      border-radius: 100px;
      width: 5px;
      height: 30px;
      margin-right: 5px;
      display: none;
    }
    .menu_left_content .item.active .border-active{
      display: block;
    }
    .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{
      padding: 15px;
      border-bottom: 1px solid #E0E0E0;
      height: 52px;
    }
    .wrap-custom-check:has(input:checked) {
      background-color: #F5FCF8 !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: 0px;
      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  label {
      color: #535657;
      font-weight: 300;
      font-size: 14px;
    }
    .wrap-custom-check input:checked + label {
      color: #08BF5A;
      font-weight: 300;
      font-size: 14px;
    }
    .custom-checkbox input:checked + span {
      background-color: #08BF5A;
    }
    .off_box{
      position: absolute;
      background: #000000 0% 0% no-repeat padding-box;
      border: 1px solid #E0E0E0;
      opacity: 0.3;
      z-index: 50;
      top: 0px;
      right: 0px;
      height: 100%;
      /*width: 100%;*/
      left: 300px;
    }
    .box_scroll{
      height: 676px;
      overflow: auto;
    }
    .box_scroll::-webkit-scrollbar {
      width: 9px;
      background-color: #F5F5F5;
    }
    .box_scroll::-webkit-scrollbar-track {
      border-radius: 10px;
    }

    .box_scroll::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background-color: #E0E0E0;
    }
    .text-cus-label{
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .tt_ic{
      color: #535657;
    }
    label:after {
        content: '';
    }

    .fixed-tooltip {
      position: fixed;
      color: #222222;
      padding: 9px 10px;
      border-radius: 6px;
      font-size: 14px;
      max-width: 284px;
      background: #FFFFFF 0% 0% no-repeat padding-box;
      box-shadow: 0px 5px 10px #00000033;
      z-index: 9999;
      pointer-events: none;
    }
    .fixed-tooltip:before {
      border: 8px solid transparent;
      border-top: 8px solid #FFFFFF;
      content: "";
      left: 88%;
      margin-left: -8px;
      position: absolute;
      top: 100%;
    }
  </style>
@endpush
@section('content')
  <article>
    <section id="notify-setting" style="color: rgba(90,90,90,1)" v-cloak>
      <div class="row">
        <div class="col-md-10">
          <div class="box-title">
            <h2 style="font-weight: 600">通知設定</h2>
            <a href="https://lme.jp/manual/notification/" class="btn btn-sns-line btn-sns-line-lg btn-sns-line-outline-default btn_manual" target="_blank">
              <img src="/images/copy.png" class="img-fluid" style="padding-bottom: 2px; padding-right: 5px; width: 20px;">マニュアル
            </a>
          </div>
          <div class="tt_box">
            1.通知を受け取る媒体を選択してください
            <p>※ チャットワーク・PCデスクトップ通知は、30秒~1分程度通知が遅れる場合があります。</p>
          </div>
          <div class="table-setting">
            <table class="table table-striped" id="tbl_setting_notify_option">
              <thead>
              <tr>
                <th class="text-left" style="padding-left: 23px">通知先</th>
                <th>通知受け取り</th>
                <th>通知タイミング</th>
                <th>各種設定</th>
              </tr>
              </thead>
              <tbody>
              <tr>
                <td>
                  <div class="d-flex align-item-center" style="padding-left: 17px" >
                    <img src="/images/ic-app.png" style="height: 35px;width: 35px; margin-right: 10px">
                    <div class="tt_ic">スマートフォンアプリ</div>
                  </div>

                </td>
                <td>

                  <div class="d-flex align-item-center" style="justify-content: center">
                    <div class="d-flex align-item-center ">
                      <span class="text-normal ">OFF</span>
                      <div class="cl-toggle-switch d-flex align-item-center">
                        <label class="cl-switch">
                          <input type="checkbox" value="0" v-model="notifySettingData.app_notification_settings" v-on:change="settingNotifyTop('option')" >
                          <span class="cursor-pointer"></span>
                        </label>
                      </div>
                      <span :class="{'text-normal ': true, 'text-active': notifySettingData.app_notification_settings == 1}">ON</span>

                    </div>
                  </div>
                </td>
                <td>
                  <select  class="" id="notification_schedule" v-model="notifySettingData.notification_schedule" v-on:change="settingNotifyTiming('timing')">
                    @foreach(config('sns-line.notification_schedule') as $key => $value)
                      <option value="{{$key}}" style="color: rgb(34, 34, 34);">{{$value}}</option>
                    @endforeach
                  </select>
                </td>
                <td>
                  <a href="https://lme.jp/manual/application/" target="_blank">
                    <button class="btn btn-sns-line btn-sns-line-outline-default btn_blue_line">
                      ダウンロード
                    </button>
                  </a>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="d-flex align-item-center" style="padding-left: 17px" >
                    <img src="/images/ic-chatwork.png" style="height: 40px; height: 40px; margin-right: 10px">
                    <div  class="tt_ic">ChatWork（チャットワーク）</div>
                  </div>

                </td>
                <td>

                  <div class="d-flex align-item-center" style="justify-content: center">
                    <div class="d-flex align-item-center ">
                      <span class="text-normal ">OFF</span>
                      <div class="cl-toggle-switch d-flex align-item-center">
                        <label class="cl-switch">
                          <input type="checkbox" value="0"  v-model="notifySettingData.chatWork_notification_settings"  v-on:change="settingNotifyTop('option')">
                          <span class="cursor-pointer"></span>
                        </label>
                      </div>
                      <span :class="{'text-normal ': true, 'text-active': notifySettingData.chatWork_notification_settings == 1}">ON</span>

                    </div>
                  </div>
                </td>
                <td>
                  <select  id="notification_schedule_chat_work" v-model="notifySettingData.schedule_chat_work" v-on:change="settingNotifyTiming('timing')">
                    @foreach(config('sns-line.notification_schedule_chat_work') as $key => $value)
                      <option value="{{$key}}" style="color: rgb(34, 34, 34);">{{$value}}</option>
                    @endforeach
                  </select>
                </td>
                <td>
                  <button class="btn btn-sns-line btn-sns-line-outline-default btn_blue_line" onclick="window.open('/basic/notify-setting-chatwork')">
                    連携設定
                  </button>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="d-flex align-item-center" style="padding-left: 17px" >
                    <img src="/images/ic-pc.png" style="height: 24px; width: 36px; margin-right: 10px">
                    <div  class="tt_ic">PCデスクトップ</div>
                  </div>

                </td>
                <td>
                  <div class="d-flex align-item-center" style="justify-content: center">
                    <div class="d-flex align-item-center ">
                      <span class="text-normal ">OFF</span>
                      <div class="cl-toggle-switch d-flex align-item-center">
                        <label class="cl-switch">
                          <input type="checkbox" value="0" v-model="notifySettingData.pc_notification_settings"  v-on:change="settingNotifyTop('option')">
                          <span class="cursor-pointer"></span>
                        </label>
                      </div>
                      <span :class="{'text-normal ': true, 'text-active': notifySettingData.pc_notification_settings == 1}">ON</span>

                    </div>
                  </div>
                </td>
                <td>
                  <select  class="" id="schedule_pc" v-model="notifySettingData.schedule_pc" v-on:change="settingNotifyTiming('timing')">
                    @foreach(config('sns-line.notification_schedule') as $key => $value)
                      <option value="{{$key}}" style="color: rgb(34, 34, 34);">{{$value}}</option>
                    @endforeach
                  </select>
                </td>
                <td>
                  <button class="btn btn-sns-line btn-sns-line-outline-default btn_blue_line"
                    onclick="enableNotification()"
                  >
                    PC設定
                  </button>
                </td>
              </tr>
              </tbody>
            </table>

          </div>

          <div class="tt_box">
            2.通知を受け取る項目を選択してください（通知項目は上記の通知先に対して共通設定です）
          </div>
          <div class="setting_notify_other_box">
            <div class="setting_notify_other">
              <div class="menu_left_nt">
                <div class="title text" style="    text-align: left;    padding-left: 16px;">
                  通知項目
                </div>
{{--                <div class="title setting">--}}
{{--                  通知受け取り--}}
{{--                </div>--}}
              </div>
              <div class="menu_right_nt">
                <div class="title">
                  通知内容詳細
                </div>

              </div>
            </div>
            <div class="setting_notify_other_item">
              <div class="menu_left_content">
                <div>
                  <div class="item " :class="{'active ': activeTab =='chat_11'}" >
                    <div class=" text" v-on:click="activeTabMenu('chat_11')">
                      <div class="border-active"></div>
                      1:1チャット
                    </div>
{{--                    <div class=" setting">--}}
{{--                      <div class="d-flex align-item-center" >--}}
{{--                        <div class="d-flex align-item-center ">--}}
{{--                          <span class="text-normal ">OFF</span>--}}
{{--                          <div class="cl-toggle-switch d-flex align-item-center">--}}
{{--                            <label class="cl-switch">--}}
{{--                              <input type="checkbox" value="1"  v-model="notifySettingData.is_notify_chat11" v-on:change="settingNotifyPageONOFF('chat_11')">--}}
{{--                              <span class="cursor-pointer"></span>--}}
{{--                            </label>--}}
{{--                          </div>--}}
{{--                          <span :class="{'text-normal ': true, 'text-active': notifySettingData.is_notify_chat11 == 1}">ON</span>--}}
{{--                        </div>--}}
{{--                        <i class="far fa-chevron-right"></i>--}}
{{--                      </div>--}}
{{--                    </div>--}}
                  </div>
{{--                  addFriend--}}
                  <div class="item" :class="{'active ': activeTab =='addFriend'}" >
                    <div class=" text" v-on:click="activeTabMenu('addFriend')">
                      <div class="border-active"></div>
                      友だち登録情報
                    </div>
{{--                    <div class=" setting">--}}
{{--                      <div class="d-flex align-item-center" >--}}
{{--                        <div class="d-flex align-item-center ">--}}
{{--                          <span class="text-normal ">OFF</span>--}}
{{--                          <div class="cl-toggle-switch d-flex align-item-center">--}}
{{--                            <label class="cl-switch">--}}
{{--                              <input type="checkbox" value="1"  v-model="notifySettingData.is_notify_add_friend" v-on:change="settingNotifyPageONOFF('addFriend')" >--}}
{{--                              <span class="cursor-pointer"></span>--}}
{{--                            </label>--}}
{{--                          </div>--}}
{{--                          <span :class="{'text-normal ': true, 'text-active': notifySettingData.is_notify_add_friend == 1}">ON</span>--}}

{{--                        </div>--}}
{{--                        <i class="far fa-chevron-right"></i>--}}
{{--                      </div>--}}
{{--                    </div>--}}
                  </div>
{{--                  Send all--}}
                  <div class="item" :class="{'active ': activeTab =='sendAll'}" >
                    <div class=" text" v-on:click="activeTabMenu('sendAll')">
                      <div class="border-active"></div>
                      メッセージ配信
                    </div>
{{--                    <div class=" setting">--}}
{{--                      <div class="d-flex align-item-center" >--}}
{{--                        <div class="d-flex align-item-center ">--}}
{{--                          <span class="text-normal ">OFF</span>--}}
{{--                          <div class="cl-toggle-switch d-flex align-item-center">--}}
{{--                            <label class="cl-switch">--}}
{{--                              <input type="checkbox" value="1"  v-model="notifySettingData.is_notify_send_all" v-on:change="settingNotifyPageONOFF('sendAll')">--}}
{{--                              <span class="cursor-pointer"></span>--}}
{{--                            </label>--}}
{{--                          </div>--}}
{{--                          <span :class="{'text-normal ': true, 'text-active': notifySettingData.is_notify_send_all == 1}">ON</span>--}}

{{--                        </div>--}}
{{--                        <i class="far fa-chevron-right"></i>--}}
{{--                      </div>--}}
{{--                    </div>--}}
                  </div>
{{--                  QR code--}}
                  <div class="item" :class="{'active ': activeTab =='qrCode'}" >
                    <div class=" text" v-on:click="activeTabMenu('qrCode')">
                      <div class="border-active"></div>
                      QRコードアクション
                    </div>
{{--                    <div class=" setting">--}}
{{--                      <div class="d-flex align-item-center" >--}}
{{--                        <div class="d-flex align-item-center ">--}}
{{--                          <span class="text-normal ">OFF</span>--}}
{{--                          <div class="cl-toggle-switch d-flex align-item-center">--}}
{{--                            <label class="cl-switch">--}}
{{--                              <input type="checkbox" value="1"  v-model="notifySettingData.is_notify_qr_code" v-on:change="settingNotifyPageONOFF('qrCode')" >--}}
{{--                              <span class="cursor-pointer"></span>--}}
{{--                            </label>--}}
{{--                          </div>--}}
{{--                          <span :class="{'text-normal ': true, 'text-active': notifySettingData.is_notify_qr_code == 1}">ON</span>--}}

{{--                        </div>--}}
{{--                        <i class="far fa-chevron-right"></i>--}}
{{--                      </div>--}}
{{--                    </div>--}}
                  </div>
{{--                  Form anwser--}}
                  <div class="item" :class="{'active ': activeTab =='form'}" >
                    <div class=" text" v-on:click="activeTabMenu('form')">
                      <div class="border-active"></div>
                      フォーム作成
                    </div>
{{--                    <div class=" setting">--}}
{{--                      <div class="d-flex align-item-center" >--}}
{{--                        <div class="d-flex align-item-center ">--}}
{{--                          <span class="text-normal ">OFF</span>--}}
{{--                          <div class="cl-toggle-switch d-flex align-item-center">--}}
{{--                            <label class="cl-switch">--}}
{{--                              <input type="checkbox" value="1"  v-model="notifySettingData.is_notify_form" v-on:change="settingNotifyPageONOFF('form')">--}}
{{--                              <span class="cursor-pointer"></span>--}}
{{--                            </label>--}}
{{--                          </div>--}}
{{--                          <span :class="{'text-normal ': true, 'text-active': notifySettingData.is_notify_form == 1}">ON</span>--}}

{{--                        </div>--}}
{{--                        <i class="far fa-chevron-right"></i>--}}
{{--                      </div>--}}
{{--                    </div>--}}
                  </div>
{{--                  salonBooking booking--}}
                  <div class="item" :class="{'active ': activeTab =='salonBooking'}">
                    <div class=" text"  v-on:click="activeTabMenu('salonBooking')">
                      <div class="border-active"></div>
                      サロン・面談予約
                    </div>
{{--                    <div class=" setting">--}}
{{--                      <div class="d-flex align-item-center" >--}}
{{--                        <div class="d-flex align-item-center ">--}}
{{--                          <span class="text-normal ">OFF</span>--}}
{{--                          <div class="cl-toggle-switch d-flex align-item-center">--}}
{{--                            <label class="cl-switch">--}}
{{--                              <input type="checkbox" value="1"  v-model="notifySettingData.is_notify_salon_booking" v-on:change="settingNotifyPageONOFF('salonBooking')" >--}}
{{--                              <span class="cursor-pointer"></span>--}}
{{--                            </label>--}}
{{--                          </div>--}}
{{--                          <span :class="{'text-normal ': true, 'text-active': notifySettingData.is_notify_salon_booking == 1}">ON</span>--}}

{{--                        </div>--}}
{{--                        <i class="far fa-chevron-right"></i>--}}
{{--                      </div>--}}
{{--                    </div>--}}
                  </div>
{{--                     lesson booking--}}
                  <div class="item" :class="{'active ': activeTab =='lessonBooking'}" >
                    <div class=" text" v-on:click="activeTabMenu('lessonBooking')">
                      <div class="border-active"></div>
                      レッスン予約
                    </div>
{{--                    <div class=" setting">--}}
{{--                      <div class="d-flex align-item-center" >--}}
{{--                        <div class="d-flex align-item-center ">--}}
{{--                          <span class="text-normal ">OFF</span>--}}
{{--                          <div class="cl-toggle-switch d-flex align-item-center">--}}
{{--                            <label class="cl-switch">--}}
{{--                              <input type="checkbox" value="1"  v-model="notifySettingData.is_notify_lesson_booking" v-on:change="settingNotifyPageONOFF('lessonBooking')" >--}}
{{--                              <span class="cursor-pointer"></span>--}}
{{--                            </label>--}}
{{--                          </div>--}}
{{--                          <span :class="{'text-normal ': true, 'text-active': notifySettingData.is_notify_lesson_booking == 1}">ON</span>--}}

{{--                        </div>--}}
{{--                        <i class="far fa-chevron-right"></i>--}}
{{--                      </div>--}}
{{--                    </div>--}}
                  </div>
{{--                  Event booking--}}
                  <div class="item" :class="{'active ': activeTab =='eventBooking'}" >
                    <div class=" text" v-on:click="activeTabMenu('eventBooking')">
                      <div class="border-active"></div>
                      イベント予約
                    </div>
{{--                    <div class=" setting">--}}
{{--                      <div class="d-flex align-item-center" >--}}
{{--                        <div class="d-flex align-item-center ">--}}
{{--                          <span class="text-normal ">OFF</span>--}}
{{--                          <div class="cl-toggle-switch d-flex align-item-center">--}}
{{--                            <label class="cl-switch">--}}
{{--                              <input type="checkbox" value="1"  v-model="notifySettingData.is_notify_event_booking" v-on:change="settingNotifyPageONOFF('eventBooking')">--}}
{{--                              <span class="cursor-pointer"></span>--}}
{{--                            </label>--}}
{{--                          </div>--}}
{{--                          <span :class="{'text-normal ': true, 'text-active': notifySettingData.is_notify_event_booking == 1}">ON</span>--}}

{{--                        </div>--}}
{{--                        <i class="far fa-chevron-right"></i>--}}
{{--                      </div>--}}
{{--                    </div>--}}
                  </div>
{{--                  booking calender--}}
                  <!-- <div class="item" :class="{'active ': activeTab =='bookingCalendar'}" >
                    <div class=" text" v-on:click="activeTabMenu('bookingCalendar')">
                      <div class="border-active"></div>
                      カレンダー予約
                    </div>
                    <div class=" setting">
                      <div class="d-flex align-item-center" >
                        <div class="d-flex align-item-center ">
                          <span class="text-normal ">OFF</span>
                          <div class="cl-toggle-switch d-flex align-item-center">
                            <label class="cl-switch">
                              <input type="checkbox" value="1"  v-model="notifySettingData.is_notify_calendar_booking" v-on:change="settingNotifyPageONOFF('bookingCalendar')">
                              <span class="cursor-pointer"></span>
                            </label>
                          </div>
                          <span :class="{'text-normal ': true, 'text-active': notifySettingData.is_notify_calendar_booking == 1}">ON</span>

                        </div>
                        <i class="far fa-chevron-right"></i>
                      </div>
                    </div>
                  </div> -->

{{--                  quản lý sản phẩm--}}
                  <div class="item" :class="{'active ': activeTab =='items'}" >
                    <div class=" text" v-on:click="activeTabMenu('items')">
                      <div class="border-active"></div>
                      商品販売
                    </div>
{{--                    <div class=" setting">--}}
{{--                      <div class="d-flex align-item-center" >--}}
{{--                        <div class="d-flex align-item-center ">--}}
{{--                          <span class="text-normal ">OFF</span>--}}
{{--                          <div class="cl-toggle-switch d-flex align-item-center">--}}
{{--                            <label class="cl-switch">--}}
{{--                              <input type="checkbox" value="1"  v-model="notifySettingData.is_notify_items" v-on:change="settingNotifyPageONOFF('items')">--}}
{{--                              <span class="cursor-pointer"></span>--}}
{{--                            </label>--}}
{{--                          </div>--}}
{{--                          <span :class="{'text-normal ': true, 'text-active': notifySettingData.is_notify_items == 1}">ON</span>--}}

{{--                        </div>--}}
{{--                        <i class="far fa-chevron-right"></i>--}}
{{--                      </div>--}}
{{--                    </div>--}}
                  </div>
{{--                  action schedule--}}
                  <div class="item" :class="{'active ': activeTab =='actionSchedule'}">
                    <div class=" text" style="font-size: 12px"  v-on:click="activeTabMenu('actionSchedule')">
                      <div class="border-active"></div>
                      アクション <br>
                      スケジュール実行
                    </div>
{{--                    <div class=" setting">--}}
{{--                      <div class="d-flex align-item-center" >--}}
{{--                        <div class="d-flex align-item-center ">--}}
{{--                          <span class="text-normal ">OFF</span>--}}
{{--                          <div class="cl-toggle-switch d-flex align-item-center">--}}
{{--                            <label class="cl-switch">--}}
{{--                              <input type="checkbox" value="1"  v-model="notifySettingData.is_notify_action_schedule"  v-on:change="settingNotifyPageONOFF('actionSchedule')">--}}
{{--                              <span class="cursor-pointer"></span>--}}
{{--                            </label>--}}
{{--                          </div>--}}
{{--                          <span :class="{'text-normal ': true, 'text-active': notifySettingData.is_notify_action_schedule == 1}">ON</span>--}}

{{--                        </div>--}}
{{--                        <i class="far fa-chevron-right"></i>--}}
{{--                      </div>--}}
{{--                    </div>--}}
                  </div>
{{--                  conversion--}}
                  <div class="item" :class="{'active ': activeTab =='conversion'}" >
                    <div class=" text" v-on:click="activeTabMenu('conversion')">
                      <div class="border-active"></div>
                      コンバージョン
                    </div>
{{--                    <div class=" setting">--}}
{{--                      <div class="d-flex align-item-center" >--}}
{{--                        <div class="d-flex align-item-center ">--}}
{{--                          <span class="text-normal ">OFF</span>--}}
{{--                          <div class="cl-toggle-switch d-flex align-item-center">--}}
{{--                            <label class="cl-switch">--}}
{{--                              <input type="checkbox" value="1"  v-model="notifySettingData.is_notify_conversion"  v-on:change="settingNotifyPageONOFF('conversion')">--}}
{{--                              <span class="cursor-pointer"></span>--}}
{{--                            </label>--}}
{{--                          </div>--}}
{{--                          <span :class="{'text-normal ': true, 'text-active': notifySettingData.is_notify_conversion == 1}">ON</span>--}}

{{--                        </div>--}}
{{--                        <i class="far fa-chevron-right"></i>--}}
{{--                      </div>--}}
{{--                    </div>--}}
                  </div>

{{--                  ASP--}}
                  <div class="item"  :class="{'active ': activeTab =='asp'}">
                    <div class=" text"  v-on:click="activeTabMenu('asp')">
                      <div class="border-active"></div>
                      ASP管理
                    </div>
{{--                    <div class=" setting">--}}
{{--                      <div class="d-flex align-item-center" >--}}
{{--                        <div class="d-flex align-item-center ">--}}
{{--                          <span class="text-normal ">OFF</span>--}}
{{--                          <div class="cl-toggle-switch d-flex align-item-center">--}}
{{--                            <label class="cl-switch">--}}
{{--                              <input type="checkbox" value="1"  v-model="notifySettingData.is_notify_asp" v-on:change="settingNotifyPageONOFF('asp')">--}}
{{--                              <span class="cursor-pointer"></span>--}}
{{--                            </label>--}}
{{--                          </div>--}}
{{--                          <span :class="{'text-normal ': true, 'text-active': notifySettingData.is_notify_asp == 1}">ON</span>--}}

{{--                        </div>--}}
{{--                        <i class="far fa-chevron-right"></i>--}}
{{--                      </div>--}}
{{--                    </div>--}}
                  </div>
{{--                  チケット--}}
{{--                  <div class="item">--}}
{{--                    <div class=" text">--}}
{{--                      <div class="border-active"></div>--}}
{{--                      チケット--}}
{{--                    </div>--}}
{{--                    <div class=" setting">--}}
{{--                      <div class="d-flex align-item-center" >--}}
{{--                        <div class="d-flex align-item-center ">--}}
{{--                          <span class="text-normal ">OFF</span>--}}
{{--                          <div class="cl-toggle-switch d-flex align-item-center">--}}
{{--                            <label class="cl-switch">--}}
{{--                              <input type="checkbox" value="0"  v-model="notifySettingData.app_notification_settings" >--}}
{{--                              <span class="cursor-pointer"></span>--}}
{{--                            </label>--}}
{{--                          </div>--}}
{{--                          <span :class="{'text-normal ': true, 'text-active': notifySettingData.app_notification_settings == 0}">ON</span>--}}

{{--                        </div>--}}
{{--                        <i class="far fa-chevron-right"></i>--}}
{{--                      </div>--}}
{{--                    </div>--}}
{{--                  </div>--}}
{{--                  Send error do quá số message--}}
                  <div class="item" :class="{'active ': activeTab =='limitMessage'}" >
                    <div class=" text" v-on:click="activeTabMenu('limitMessage')">
                      <div class="border-active"></div>
                      配信数アラート
                    </div>
{{--                    <div class=" setting">--}}
{{--                      <div class="d-flex align-item-center" >--}}
{{--                        <div class="d-flex align-item-center ">--}}
{{--                          <span class="text-normal ">OFF</span>--}}
{{--                          <div class="cl-toggle-switch d-flex align-item-center">--}}
{{--                            <label class="cl-switch">--}}
{{--                              <input type="checkbox" value="1"  v-model="notifySettingData.is_notify_send_error" v-on:change="settingNotifyPageONOFF('limitMessage')">--}}
{{--                              <span class="cursor-pointer"></span>--}}
{{--                            </label>--}}
{{--                          </div>--}}
{{--                          <span :class="{'text-normal ': true, 'text-active': notifySettingData.is_notify_send_error == 1}">ON</span>--}}

{{--                        </div>--}}
{{--                        <i class="far fa-chevron-right"></i>--}}
{{--                      </div>--}}
{{--                    </div>--}}
                  </div>
{{--                  System notify--}}
                  <div class="item" :class="{'active ': activeTab =='systemNotify'}" >
                    <div class=" text" v-on:click="activeTabMenu('systemNotify')">
                      <div class="border-active"></div>
                      システム通知
                    </div>
                  </div >

                </div>


              </div>
              <div class="menu_right_nt box_scroll" >
{{--                <div v-bind:class="!is_show_setting ? 'off_box': ''" style="" v-if="!is_show_setting"></div>--}}

                <div v-if="activeTab == 'chat_11'">
{{--                  <div v-bind:class="!notifySettingData.is_notify_chat11 ? 'off_box': ''" v-show="!notifySettingData.is_notify_chat11"></div>--}}
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.chat_1_1"
                             v-on:change="settingNotifyPage('chat_11',true)"
                             value="-1"
                             id="chat_1_1_all"
                             class="checkboxField  hidden ">
                      <label for="chat_1_1_all" class="custom-checkbox ">以下の全項目</label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.chat_1_1"
                             v-on:change="settingNotifyPage('chat_11')"
                             value="0"
                             id="chat_1_1_normal"
                             class="checkboxField  hidden chat_1_1">
                      <label for="chat_1_1_normal" class="custom-checkbox ">通常メッセージを受信した時</label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.chat_1_1"
                             v-on:change="settingNotifyPage('chat_11')"
                             value="2"
                             id="chat_11_auto_all"
                             class="checkboxField  hidden chat_1_1">
                      <label for="chat_11_auto_all" class="custom-checkbox ">自動応答 [すべてのメッセージに反応] のメッセージを受信した時</label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.chat_1_1"
                             v-on:change="settingNotifyPage('chat_11')"
                             value="4"
                             id="chat_11_auto"
                             class="checkboxField  hidden chat_1_1">
                      <label for="chat_11_auto" class="custom-checkbox ">自動応答 [設定したキーワードに反応] のメッセージを受信した時</label>
                    </div>
                  </div>

                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.chat_1_1"
                             v-on:change="settingNotifyPage('chat_11')"
                             value="1"
                             id="chat_11_message"
                             class="checkboxField  hidden chat_1_1">
                      <label for="chat_11_message" class="custom-checkbox ">【◯◯】メッセージを受信した時</label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.chat_1_1"
                             v-on:change="settingNotifyPage('chat_11')"
                             value="3"
                             id="chat_11_media"
                             class="checkboxField  hidden chat_1_1">
                      <label for="chat_11_media" class="custom-checkbox ">メディア</label>
                    </div>
                  </div>
                </div>
                <div v-if="activeTab == 'addFriend'">
{{--                  <div v-bind:class="!notifySettingData.is_notify_add_friend ? 'off_box': ''" style="" v-if="!notifySettingData.is_notify_add_friend"></div>--}}
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             id="add_friends_all"
                             v-model="notifySettingData.add_friends"
                             v-on:change="settingNotifyPage('addFriend',true)"
                             value="0"
                             class="checkboxField  hidden">
                      <label for="add_friends_all" class="custom-checkbox ">以下の全項目</label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             id="add_friends_new"
                             v-model="notifySettingData.add_friends"
                             v-on:change="settingNotifyPage('addFriend')"
                             value="1"
                             class="checkboxField  hidden addFriend">
                      <label for="add_friends_new" class="custom-checkbox ">新規友だちの追加時</label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             id="add_friends_old"
                             v-model="notifySettingData.add_friends"
                             v-on:change="settingNotifyPage('addFriend')"
                             value="2"
                             class="checkboxField  hidden addFriend">
                      <label for="add_friends_old" class="custom-checkbox ">既存友だちの追加時</label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             id="when_friend_block_bot"
                             v-model="notifySettingData.add_friends"
                             v-on:change="settingNotifyPage('addFriend')"
                             value="3"
                             class="checkboxField  hidden addFriend">
                      <label for="when_friend_block_bot" class="custom-checkbox ">友だちがブロックした時</label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             id="when_friend_unblock_bot"
                             v-model="notifySettingData.add_friends"
                             v-on:change="settingNotifyPage('addFriend')"
                             value="4"
                             class="checkboxField  hidden addFriend">
                      <label for="when_friend_unblock_bot" class="custom-checkbox ">友だちがブロック解除した時</label>
                    </div>
                  </div>
                </div>
                <div v-if="activeTab == 'sendAll'">
{{--                  <div v-bind:class="!notifySettingData.is_notify_send_all ? 'off_box': ''" style="" v-if="!notifySettingData.is_notify_send_all"></div>--}}
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             id="send_all"
                             v-model="notifySettingData.send_all"
                             value="0"
                             v-on:change="settingNotifyPage('sendAll')"
                             class="checkboxField  hidden">
                      <label for="send_all" class="custom-checkbox ">メッセージ配信完了時</label>
                    </div>
                  </div>
                </div>
                <div v-if="activeTab == 'qrCode'">
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             id="when_qr-1"
                             v-on:change="settingNotifyPage('qrCode',false,true)"
                             v-model="notifySettingData.is_all_qrcode_new"
                             value="1"
                             class="checkboxField  hidden">
                      <label for="when_qr-1" class="custom-checkbox ">今後以下に追加される項目に、自動でチェックをいれる</label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             id="when_qr_all"
                             v-model="notifySettingData.when_adding_friends"
                             v-on:change="settingNotifyPage('qrCode',true)"
                             value="0"
                             class="checkboxField  hidden">
                      <label for="when_qr_all" class="custom-checkbox ">以下の全項目</label>
                    </div>
                  </div>
                  <div class="item" v-if="landingData.length > 0" v-for="(item,index) in landingData">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             :id="'when_qr_item_'+ item.id"
                             v-model="notifySettingData.when_adding_friends"
                             v-on:change="settingNotifyPage('qrCode')"
                             :value="item.id"
                             class="checkboxField  hidden qrCode">
                      <label :for="'when_qr_item_'+ item.id" class="custom-checkbox ">@{{ item.name }}</label>
                    </div>
                  </div>
                </div>
                <div v-if="activeTab == 'form'">
{{--                  <div v-bind:class="!notifySettingData.is_notify_form ? 'off_box': ''" style="" v-if="!notifySettingData.is_notify_form"></div>--}}
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             id="answer_form-1"
                             v-on:change="settingNotifyPage('form',false,true)"
                             v-model="notifySettingData.is_all_form_new"
                             value="1"
                             class="checkboxField  hidden">
                      <label for="answer_form-1" class="custom-checkbox ">今後以下に追加される項目に、自動でチェックをいれる</label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             id="answer_form_all"
                             v-on:change="settingNotifyPage('form',true)"
                             v-model="notifySettingData.answer_form"
                             value="0"
                             class="checkboxField  hidden">
                      <label for="answer_form_all" class="custom-checkbox ">以下の全項目</label>
                    </div>
                  </div>
                  <div class="item" v-if="formAnswerData.length > 0" v-for="(item,index) in formAnswerData">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.answer_form"
                             v-on:change="settingNotifyPage('form')"
                             :id="'answer_form_item_' + item.id"
                             :value="item.id"
                             class="checkboxField  hidden answer_form">
                      <label :for="'answer_form_item_' + item.id" class="custom-checkbox ">@{{item.name}}</label>
                    </div>
                  </div>

                </div>
                <div v-if="activeTab == 'salonBooking'">
{{--                  <div v-bind:class="!notifySettingData.is_notify_salon_booking ? 'off_box': ''" style="" v-if="!notifySettingData.is_notify_salon_booking"></div>--}}
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.salon_booking"
                             v-on:change="settingNotifyPage('salonBooking',true)"
                             value="-1"
                             id="salon_booking_all"
                             class="checkboxField  hidden">
                      <label for="salon_booking_all" class="custom-checkbox ">以下の全項目</label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.salon_booking"
                             value="0"
                             v-on:change="settingNotifyPage('salonBooking')"
                             id="salon_booking_0"
                             class="checkboxField  hidden salonBooking">
                      <label for="salon_booking_0" class="custom-checkbox ">予約受付時</label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.salon_booking"
                             value="6"
                             v-on:change="settingNotifyPage('salonBooking')"
                             id="salon_booking_6"
                             class="checkboxField  hidden salonBooking">
                      <label for="salon_booking_6" class="custom-checkbox ">予約リクエスト受付時</label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.salon_booking"
                             id="salon_booking_1"
                             v-on:change="settingNotifyPage('salonBooking')"
                             value="1"
                             class="checkboxField  hidden salonBooking">
                      <label for="salon_booking_1" class="custom-checkbox ">予約リクエスト承認時</label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.salon_booking"
                             value="9"
                             v-on:change="settingNotifyPage('salonBooking')"
                             id="salon_booking_no2"
                             class="checkboxField  hidden salonBooking">
                      <label for="salon_booking_no2" class="custom-checkbox ">予約リクエスト否認時 </label>
                    </div>
                  </div>
{{--                  <div class="item">--}}
{{--                    <div class="wrap-custom-check d-flex align-item-center ">--}}
{{--                      <input type="checkbox"--}}
{{--                             v-model="notifySettingData.salon_booking"--}}
{{--                             id="salon_booking_2"--}}
{{--                             v-on:change="settingNotifyPage('salonBooking')"--}}
{{--                             value="2"--}}
{{--                             class="checkboxField  hidden">--}}
{{--                      <label for="salon_booking_2" class="custom-checkbox ">予約変更時</label>--}}
{{--                    </div>--}}
{{--                  </div>--}}
{{--                  <div class="item">--}}
{{--                    <div class="wrap-custom-check d-flex align-item-center ">--}}
{{--                      <input type="checkbox"--}}
{{--                             v-model="notifySettingData.salon_booking"--}}
{{--                             id="salon_booking_7"--}}
{{--                             v-on:change="settingNotifyPage('salonBooking')"--}}
{{--                             value="7"--}}
{{--                             class="checkboxField  hidden">--}}
{{--                      <label for="salon_booking_7" class="custom-checkbox ">変更リクエスト受付時</label>--}}
{{--                    </div>--}}
{{--                  </div>--}}
{{--                  <div class="item">--}}
{{--                    <div class="wrap-custom-check d-flex align-item-center ">--}}
{{--                      <input type="checkbox"--}}
{{--                             v-model="notifySettingData.salon_booking"--}}
{{--                             id="salon_booking_3"--}}
{{--                             v-on:change="settingNotifyPage('salonBooking')"--}}
{{--                             value="3"--}}
{{--                             class="checkboxField  hidden">--}}
{{--                      <label for="salon_booking_3" class="custom-checkbox ">変更リクエスト承認時</label>--}}
{{--                    </div>--}}
{{--                  </div>--}}
{{--                  <div class="item">--}}
{{--                    <div class="wrap-custom-check d-flex align-item-center ">--}}
{{--                      <input type="checkbox"--}}
{{--                             v-model="notifySettingData.salon_booking"--}}
{{--                             id="salon_booking_no3"--}}
{{--                             v-on:change="settingNotifyPage('salonBooking')"--}}
{{--                             value="10"--}}
{{--                             class="checkboxField  hidden">--}}
{{--                      <label for="salon_booking_no3" class="custom-checkbox ">変更リクエスト否認時</label>--}}
{{--                    </div>--}}
{{--                  </div>--}}
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.salon_booking"
                             value="4"
                             v-on:change="settingNotifyPage('salonBooking')"
                             id="salon_booking_4"
                             class="checkboxField  hidden salonBooking">
                      <label for="salon_booking_4" class="custom-checkbox ">予約キャンセル時</label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.salon_booking"
                             value="8"
                             v-on:change="settingNotifyPage('salonBooking')"
                             id="salon_booking_8"
                             class="checkboxField  hidden salonBooking">
                      <label for="salon_booking_8" class="custom-checkbox ">キャンセルリクエスト受付時</label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.salon_booking"
                             value="5"
                             v-on:change="settingNotifyPage('salonBooking')"
                             id="salon_booking_5"
                             class="checkboxField  hidden salonBooking">
                      <label for="salon_booking_5" class="custom-checkbox ">キャンセルリクエスト承認時</label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.salon_booking"
                             value="11"
                             v-on:change="settingNotifyPage('salonBooking')"
                             id="salon_booking_no7"
                             class="checkboxField  hidden salonBooking">
                      <label for="salon_booking_no7" class="custom-checkbox ">キャンセルリクエスト否認時</label>
                    </div>
                  </div>
                </div>
                <div v-if="activeTab == 'lessonBooking'">
{{--                  <div v-bind:class="!notifySettingData.is_notify_lesson_booking ? 'off_box': ''" style="" v-if="!notifySettingData.is_notify_lesson_booking"></div>--}}
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.lesson_booking"
                             v-on:change="settingNotifyPage('lessonBooking',true)"
                             value="-1"
                             id="lesson_booking_all"
                             class="checkboxField  hidden">
                      <label for="lesson_booking_all" class="custom-checkbox ">以下の全項目</label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.lesson_booking"
                             value="0"
                             v-on:change="settingNotifyPage('lessonBooking')"
                             id="lesson_booking_0"
                             class="checkboxField  hidden lessonBooking">
                      <label for="lesson_booking_0" class="custom-checkbox ">予約受付時</label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.lesson_booking"
                             value="6"
                             v-on:change="settingNotifyPage('lessonBooking')"
                             id="lesson_booking_6"
                             class="checkboxField  hidden lessonBooking">
                      <label for="lesson_booking_6" class="custom-checkbox ">予約リクエスト受付時</label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.lesson_booking"
                             id="lesson_booking_1"
                             v-on:change="settingNotifyPage('lessonBooking')"
                             value="1"
                             class="checkboxField  hidden lessonBooking">
                      <label for="lesson_booking_1" class="custom-checkbox ">予約リクエスト承認時</label>
                    </div>
                  </div>

                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.lesson_booking"
                             id="lesson_booking_no3"
                             v-on:change="settingNotifyPage('lessonBooking')"
                             value="10"
                             class="checkboxField  hidden lessonBooking">
                      <label for="lesson_booking_no3" class="custom-checkbox ">予約リクエスト否認時</label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.lesson_booking"
                             value="4"
                             v-on:change="settingNotifyPage('lessonBooking')"
                             id="lesson_booking_4"
                             class="checkboxField  hidden lessonBooking">
                      <label for="lesson_booking_4" class="custom-checkbox ">予約キャンセル時</label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.lesson_booking"
                             value="8"
                             v-on:change="settingNotifyPage('lessonBooking')"
                             id="lesson_booking_8"
                             class="checkboxField  hidden lessonBooking">
                      <label for="lesson_booking_8" class="custom-checkbox ">キャンセルリクエスト受付時</label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.lesson_booking"
                             value="5"
                             v-on:change="settingNotifyPage('lessonBooking')"
                             id="lesson_booking_5"
                             class="checkboxField  hidden lessonBooking">
                      <label for="lesson_booking_5" class="custom-checkbox ">キャンセルリクエスト承認時</label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.lesson_booking"
                             value="11"
                             v-on:change="settingNotifyPage('lessonBooking')"
                             id="lesson_booking_no7"
                             class="checkboxField  hidden lessonBooking">
                      <label for="lesson_booking_no7" class="custom-checkbox ">キャンセルリクエスト否認時</label>
                    </div>
                  </div>
                </div>
                <div v-if="activeTab == 'eventBooking'">
{{--                  <div v-bind:class="!notifySettingData.is_notify_event_booking ? 'off_box': ''" style="" v-if="!notifySettingData.is_notify_event_booking"></div>--}}
{{--                 0,1,2,3,4,5 logic old--}}
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.event_reservation_management"
                             value="-1"
                             v-on:change="settingNotifyPage('eventBooking',true)"
                             id="booking_event_all"
                             class="checkboxField  hidden ">
                      <label for="booking_event_all" class="custom-checkbox ">以下の全項目</label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.event_reservation_management"
                             value="0"
                             v-on:change="settingNotifyPage('eventBooking')"
                             id="booking_event_no1"
                             class="checkboxField  hidden eventBooking">
                      <label for="booking_event_no1" class="custom-checkbox ">予約受付時</label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.event_reservation_management"
                             value="6"
                             v-on:change="settingNotifyPage('eventBooking')"
                             id="booking_event_no2"
                             class="checkboxField  hidden eventBooking">
                      <label for="booking_event_no2" class="custom-checkbox ">予約リクエスト受付時</label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.event_reservation_management"
                             value="3"
                             v-on:change="settingNotifyPage('eventBooking')"
                             id="booking_event_no3"
                             class="checkboxField  hidden eventBooking">
                      <label for="booking_event_no3" class="custom-checkbox ">予約リクエスト承認時</label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.event_reservation_management"
                             value="4"
                             v-on:change="settingNotifyPage('eventBooking')"
                             id="booking_event_no4"
                             class="checkboxField  hidden eventBooking">
                      <label for="booking_event_no4" class="custom-checkbox ">予約リクエスト否認時</label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.event_reservation_management"
                             value="1"
                             v-on:change="settingNotifyPage('eventBooking')"
                             id="booking_event_1"
                             class="checkboxField  hidden eventBooking">
                      <label for="booking_event_1" class="custom-checkbox ">予約変更時</label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.event_reservation_management"
                             value="7"
                             v-on:change="settingNotifyPage('eventBooking')"
                             id="booking_event_no5"
                             class="checkboxField  hidden eventBooking">
                      <label for="booking_event_no5" class="custom-checkbox ">予約変更リクエスト受付時</label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.event_reservation_management"
                             value="8"
                             v-on:change="settingNotifyPage('eventBooking')"
                             id="booking_event_no6"
                             class="checkboxField  hidden eventBooking">
                      <label for="booking_event_no6" class="custom-checkbox ">予約変更リクエスト承認時</label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.event_reservation_management"
                             value="9"
                             v-on:change="settingNotifyPage('eventBooking')"
                             id="booking_event_no7"
                             class="checkboxField  hidden eventBooking">
                      <label for="booking_event_no7" class="custom-checkbox ">予約変更リクエスト否認時</label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.event_reservation_management"
                             value="2"
                             v-on:change="settingNotifyPage('eventBooking')"
                             id="booking_event_2"
                             class="checkboxField  hidden eventBooking">
                      <label for="booking_event_2" class="custom-checkbox ">予約キャンセル時</label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.event_reservation_management"
                             value="10"
                             v-on:change="settingNotifyPage('eventBooking')"
                             id="booking_event_no8"
                             class="checkboxField  hidden eventBooking">
                      <label for="booking_event_no8" class="custom-checkbox ">予約キャンセルリクエスト受付時</label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.event_reservation_management"
                             value="11"
                             v-on:change="settingNotifyPage('eventBooking')"
                             id="booking_event_no9"
                             class="checkboxField  hidden eventBooking">
                      <label for="booking_event_no9" class="custom-checkbox ">予約キャンセルリクエスト承認時</label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.event_reservation_management"
                             value="5"
                             v-on:change="settingNotifyPage('eventBooking')"
                             id="booking_event_no10"
                             class="checkboxField  hidden eventBooking">
                      <label for="booking_event_no10" class="custom-checkbox ">予約キャンセルクエスト否認時 </label>
                    </div>
                  </div>
                </div>
{{--                booking calendar--}}
                <div v-if="activeTab == 'bookingCalendar'">
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.booking_calendar"
                             value="-1"
                             v-on:change="settingNotifyPage('bookingCalendar',true)"
                             id="booking_calendar_all"
                             class="checkboxField  hidden ">
                      <label for="booking_calendar_all" class="custom-checkbox ">以下の全項目</label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.booking_calendar"
                             value="0"
                             v-on:change="settingNotifyPage('bookingCalendar')"
                             id="booking_calendar_no1"
                             class="checkboxField  hidden bookingCalendar">
                      <label for="booking_calendar_no1" class="custom-checkbox ">予約受付時 </label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.booking_calendar"
                             value="6"
                             v-on:change="settingNotifyPage('bookingCalendar')"
                             id="booking_calendar_no2"
                             class="checkboxField  hidden bookingCalendar">
                      <label for="booking_calendar_no2" class="custom-checkbox ">予約リクエスト受付時 </label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.booking_calendar"
                             value="1"
                             v-on:change="settingNotifyPage('bookingCalendar')"
                             id="booking_calendar_no3"
                             class="checkboxField  hidden bookingCalendar">
                      <label for="booking_calendar_no3" class="custom-checkbox ">予約リクエスト承認時 </label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.booking_calendar"
                             value="9"
                             v-on:change="settingNotifyPage('bookingCalendar')"
                             id="booking_calendar_no4"
                             class="checkboxField  hidden bookingCalendar">
                      <label for="booking_calendar_no4" class="custom-checkbox ">予約リクエスト否認時 </label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.booking_calendar"
                             value="2"
                             v-on:change="settingNotifyPage('bookingCalendar')"
                             id="booking_calendar_1"
                             class="checkboxField  hidden bookingCalendar">
                      <label for="booking_calendar_1" class="custom-checkbox ">予約変更時 </label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.booking_calendar"
                             value="7"
                             v-on:change="settingNotifyPage('bookingCalendar')"
                             id="booking_calendar_no5"
                             class="checkboxField  hidden bookingCalendar">
                      <label for="booking_calendar_no5" class="custom-checkbox ">予約変更リクエスト受付時 </label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.booking_calendar"
                             value="3"
                             v-on:change="settingNotifyPage('bookingCalendar')"
                             id="booking_calendar_no6"
                             class="checkboxField  hidden bookingCalendar">
                      <label for="booking_calendar_no6" class="custom-checkbox ">予約変更リクエスト承認時 </label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.booking_calendar"
                             value="10"
                             v-on:change="settingNotifyPage('bookingCalendar')"
                             id="booking_calendar_no7"
                             class="checkboxField  hidden bookingCalendar">
                      <label for="booking_calendar_no7" class="custom-checkbox ">予約変更リクエスト否認時 </label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.booking_calendar"
                             value="4"
                             v-on:change="settingNotifyPage('bookingCalendar')"
                             id="booking_calendar_2"
                             class="checkboxField  hidden bookingCalendar">
                      <label for="booking_calendar_2" class="custom-checkbox ">予約キャンセル時 </label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.booking_calendar"
                             value="8"
                             v-on:change="settingNotifyPage('bookingCalendar')"
                             id="booking_calendar_no8"
                             class="checkboxField  hidden bookingCalendar">
                      <label for="booking_calendar_no8" class="custom-checkbox ">予約キャンセルリクエスト受付時 </label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.booking_calendar"
                             value="5"
                             v-on:change="settingNotifyPage('bookingCalendar')"
                             id="booking_calendar_no9"
                             class="checkboxField  hidden bookingCalendar">
                      <label for="booking_calendar_no9" class="custom-checkbox ">予約キャンセルリクエスト承認時 </label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.booking_calendar"
                             value="11"
                             v-on:change="settingNotifyPage('bookingCalendar')"
                             id="booking_calendar_no10"
                             class="checkboxField  hidden bookingCalendar">
                      <label for="booking_calendar_no10" class="custom-checkbox ">予約キャンセルクエスト否認時  </label>
                    </div>
                  </div>
                </div>
                <div v-if="activeTab == 'items'">
{{--                  <div v-bind:class="!notifySettingData.is_notify_items ? 'off_box': ''" style="" v-if="!notifySettingData.is_notify_items"></div>--}}
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.settlement"
                             value="-1"
                             v-on:change="settingNotifyPage('items',true)"
                             id="items_all"
                             class="checkboxField  hidden ">
                      <label for="items_all" class="custom-checkbox ">以下の全項目</label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.settlement"
                             value="5"
                             v-on:change="settingNotifyPage('items')"
                             id="items_1"
                             class="checkboxField  hidden items">
                      <label for="items_1" class="custom-checkbox ">単品商品が購入された時</label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.settlement"
                             value="6"
                             v-on:change="settingNotifyPage('items')"
                             id="items_2"
                             class="checkboxField  hidden items">
                      <label for="items_2" class="custom-checkbox ">単品商品の決済が失敗した時</label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.settlement"
                             value="7"
                             v-on:change="settingNotifyPage('items')"
                             id="items_3"
                             class="checkboxField  hidden items">
                      <label for="items_3" class="custom-checkbox ">継続商品の決済が完了した時</label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.settlement"
                             value="8"
                             v-on:change="settingNotifyPage('items')"
                             id="items_4"
                             class="checkboxField  hidden items">
                      <label for="items_4" class="custom-checkbox ">継続商品のトライアルが開始した時</label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.settlement"
                             value="9"
                             v-on:change="settingNotifyPage('items')"
                             id="items_5"
                             class="checkboxField  hidden items">
                      <label for="items_5" class="custom-checkbox ">継続商品の決済が手動解約された時</label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.settlement"
                             value="10"
                             v-on:change="settingNotifyPage('items')"
                             id="items_6"
                             class="checkboxField  hidden items">
                      <label for="items_6" class="custom-checkbox ">継続商品の決済が自動（強制）解約された時</label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.settlement"
                             value="11"
                             v-on:change="settingNotifyPage('items')"
                             id="items_7"
                             class="checkboxField  hidden items">
                      <label for="items_7" class="custom-checkbox ">継続商品の決済が失敗した時</label>
                    </div>
                  </div>
                </div>
                <div v-if="activeTab == 'actionSchedule'">
{{--                  <div v-bind:class="!notifySettingData.is_notify_action_schedule ? 'off_box': ''" style="" v-if="!notifySettingData.is_notify_action_schedule"></div>--}}
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.is_all_schedule_new"
                             value="1"
                             v-on:change="settingNotifyPage('actionSchedule',false,true)"
                             id="action_schedule_-1"
                             class="checkboxField  hidden">
                      <label for="action_schedule_-1" class="custom-checkbox ">今後以下に追加される項目に、自動でチェックをいれる</label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.action_schedule"
                             value="0"
                             v-on:change="settingNotifyPage('actionSchedule', true)"
                             id="action_schedule_all"
                             class="checkboxField  hidden">
                      <label for="action_schedule_all" class="custom-checkbox ">以下の全項目</label>
                    </div>
                  </div>
                  <div class="item"  v-if="actionScheduleData.length > 0" v-for="(item,index) in actionScheduleData ">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.action_schedule"
                             :value="item.id"
                             v-on:change="settingNotifyPage('actionSchedule')"
                             :id="'action_schedule_' + item.id"
                             class="checkboxField  hidden actionSchedule">
                      <label :for="'action_schedule_' + item.id" class="custom-checkbox ">@{{ item.name  }}</label>
                    </div>
                  </div>
                </div>
                <div v-if="activeTab == 'conversion'">
{{--                  <div v-bind:class="!notifySettingData.is_notify_conversion ? 'off_box': ''"  style="" v-if="!notifySettingData.is_notify_conversion"></div>--}}
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.is_all_conversion_new"
                             value="1"
                             v-on:change="settingNotifyPage('conversion',false,true)"
                             id="conversion_-1"
                             class="checkboxField  hidden">
                      <label for="conversion_-1" class="custom-checkbox ">今後以下に追加される項目に、自動でチェックをいれる</label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.conversion"
                             value="0"
                             id="conversion_all"
                             v-on:change="settingNotifyPage('conversion',true)"
                             class="checkboxField  hidden">
                      <label for="conversion_all" class="custom-checkbox ">以下の全項目</label>
                    </div>
                  </div>
                  <div class="item" v-if="conversionData.length > 0" v-for="(item,index) in conversionData ">
                    <div class="wrap-custom-check d-flex align-item-center " >
                      <input type="checkbox"
                             v-model="notifySettingData.conversion"
                             :value="item.id"
                             :id="'conversion_'+item.id"
                             v-on:change="settingNotifyPage('conversion')"
                             class="checkboxField  hidden conversion">
                      <label :for="'conversion_'+item.id" class="custom-checkbox ">@{{ item.name }}</label>
                    </div>
                  </div>
                </div>
                <div v-if="activeTab == 'asp'">
{{--                  <div v-bind:class="!notifySettingData.is_notify_asp ? 'off_box': ''" style="" v-if="!notifySettingData.is_notify_asp"></div>--}}
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.asp"
                             value="0"
                             v-on:change="settingNotifyPage('asp',true)"
                             id="asp_all"
                             class="checkboxField  hidden">
                      <label for="asp_all" class="custom-checkbox ">以下の全項目</label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.asp"
                             value="1"
                             v-on:change="settingNotifyPage('asp')"
                             id="asp_1"
                             class="checkboxField  hidden asp">
                      <label for="asp_1" class="custom-checkbox ">アフィリエイター新規登録時</label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.asp"
                             value="2"
                             v-on:change="settingNotifyPage('asp')"
                             id="asp_2"
                             class="checkboxField  hidden asp">
                      <label for="asp_2" class="custom-checkbox ">自動認証のアフィリエイト報酬が登録された時</label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.asp"
                             value="3"
                             v-on:change="settingNotifyPage('asp')"
                             id="asp_3"
                             class="checkboxField  hidden asp">
                      <label for="asp_3" class="custom-checkbox ">手動認証のアフィリエイト報酬が登録された時</label>
                    </div>
                  </div>
                </div>
                <div v-show="activeTab == 'limitMessage'">
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.limitMessage"
                             value="0"
                             v-on:change="settingNotifyPage('limitMessage',true)"
                             id="limitMessage_all"
                             class="checkboxField  hidden">
                      <label for="limitMessage_all" class="custom-checkbox ">以下の全項目</label>
                    </div>
                  </div>
                  <div class="wrap-custom-check" style="background: #F8F8F8; font-weight: 600; color: #535657; font-size: 14px; height: auto; padding: 10px 15px;">
                    LOA配信数
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.limitMessage"
                             value="10"
                             id="limitMessage_loa_50"
                             v-on:change="settingNotifyPage('limitMessage')"
                             class="checkboxField  hidden limitMessage">
                      <label for="limitMessage_loa_50" class="custom-checkbox ">料金プランの上限の 50% に達した時</label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.limitMessage"
                             value="11"
                             id="limitMessage_loa_80"
                             v-on:change="settingNotifyPage('limitMessage')"
                             class="checkboxField  hidden limitMessage">
                      <label for="limitMessage_loa_80" class="custom-checkbox ">料金プランの上限の 80% に達した時</label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.limitMessage"
                             value="12"
                             id="limitMessage_loa_100"
                             v-on:change="settingNotifyPage('limitMessage')"
                             class="checkboxField  hidden limitMessage">
                      <label for="limitMessage_loa_100" class="custom-checkbox ">料金プランの上限の 100% に達した時</label>
                    </div>
                  </div>
                  <div class="wrap-custom-check" style="background: #F8F8F8; font-weight: 600; color: #535657; font-size: 14px; height: auto; padding: 10px 15px;">
                    エルメ配信数
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.limitMessage"
                             value="13"
                             id="limitMessage_elme_50"
                             v-on:change="settingNotifyPage('limitMessage')"
                             class="checkboxField  hidden limitMessage">
                      <label for="limitMessage_elme_50" class="custom-checkbox ">料金プランの上限の 50% に達した時</label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.limitMessage"
                             value="14"
                             id="limitMessage_elme_80"
                             v-on:change="settingNotifyPage('limitMessage')"
                             class="checkboxField  hidden limitMessage">
                      <label for="limitMessage_elme_80" class="custom-checkbox ">料金プランの上限の 80% に達した時</label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.limitMessage"
                             value="15"
                             id="limitMessage_elme_100"
                             v-on:change="settingNotifyPage('limitMessage')"
                             class="checkboxField  hidden limitMessage">
                      <label for="limitMessage_elme_100" class="custom-checkbox ">料金プランの上限の 100% に達した時</label>
                    </div>
                  </div>

                </div>
                <div v-if="activeTab == 'systemNotify'">
{{--                  <div v-bind:class="!notifySettingData.is_notify_system_notify ? 'off_box': ''"  style="" v-if="!notifySettingData.is_notify_system_notify"></div>--}}
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.systemNotify"
                             value="0"
                             id="systemNotify_all"
                             v-on:change="settingNotifyPage('systemNotify',true)"
                             class="checkboxField  hidden">
                      <label for="systemNotify_all" class="custom-checkbox ">以下の全項目</label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.systemNotify"
                             value="1"
                             id="systemNotify_1"
                             v-on:change="settingNotifyPage('systemNotify')"
                             class="checkboxField  hidden systemNotify">
                      <label for="systemNotify_1" class="custom-checkbox ">配信エラー発生時</label>
                    </div>
                  </div>
                  {{-- <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.systemNotify"
                             value="2"
                             v-on:change="settingNotifyPage('systemNotify')"
                             id="systemNotify_2"
                             class="checkboxField  hidden systemNotify">
                      <label for="systemNotify_2" class="custom-checkbox ">LINE公式アカウント接続完了時</label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.systemNotify"
                             value="3"
                             v-on:change="settingNotifyPage('systemNotify')"
                             id="systemNotify_3"
                             class="checkboxField  hidden systemNotify">
                      <label for="systemNotify_3" class="custom-checkbox ">LINE公式アカウント接続解除時</label>
                    </div>
                  </div> --}}
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.systemNotify"
                             value="7"
                             v-on:change="settingNotifyPage('systemNotify')"
                             id="systemNotify_7"
                             class="checkboxField  hidden systemNotify">
                      <label for="systemNotify_7" class="custom-checkbox ">LINE公式アカウント接続エラー発生時</label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.systemNotify"
                             value="4"
                             v-on:change="settingNotifyPage('systemNotify')"
                             id="systemNotify_4"
                             class="checkboxField  hidden systemNotify">
                      <label for="systemNotify_4" class="custom-checkbox ">エルメ利用料の支払い完了時</label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.systemNotify"
                             value="5"
                             id="systemNotify_5"
                             v-on:change="settingNotifyPage('systemNotify')"
                             class="checkboxField  hidden systemNotify">
                      <label for="systemNotify_5" class="custom-checkbox ">エルメ利用料の支払い失敗時</label>
                    </div>
                  </div>
                  <div class="item">
                    <div class="wrap-custom-check d-flex align-item-center ">
                      <input type="checkbox"
                             v-model="notifySettingData.systemNotify"
                             value="6"
                             v-on:change="settingNotifyPage('systemNotify')"
                             id="systemNotify_6"
                             class="checkboxField  hidden systemNotify">
                      <label for="systemNotify_6" class="custom-checkbox ">スタッフ追加時</label>
                    </div>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>

      </div>

    </section>

  </article>
@endsection
@push('script')
  <script src="/js/notify/notify-setting.js?v={{config('sns-line.version')}}"></script>
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      let tooltip = null;
      document.querySelectorAll('.tooltip_e').forEach(el => {
        el.addEventListener('mouseenter', () => {
          const text = el.dataset.tooltip;
          if (!text) return;
          tooltip = document.createElement('div');
          tooltip.className = 'fixed-tooltip';
          tooltip.innerText = text;
          document.body.appendChild(tooltip);

          const rect = el.getBoundingClientRect();

          let top = rect.top - tooltip.offsetHeight - 8;
          let left = (rect.left + rect.width / 2 - tooltip.offsetWidth / 2) - 107;
          if (top < 0) top = rect.bottom + 8;
          if (left < 8) left = 8;
          if (left + tooltip.offsetWidth > window.innerWidth){
            left = window.innerWidth - tooltip.offsetWidth - 8 - 107;
          }
          tooltip.style.top = top + 'px';
          tooltip.style.left = left + 'px';
        });

        el.addEventListener('mouseleave', () => {
          if (tooltip) {
            tooltip.remove();
            tooltip = null;
          }
        });

      });

    });
  </script>

@endpush