@extends('layout.basic.main')
@push('css')
  <style>
    #notification_schedule{
      background: url(/images/down.png) right 12px center no-repeat;
      background-color: rgb(255, 255, 255);
      appearance: none;
      -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. */
    }

    #notification_schedule_chat_work {
      background: url(/images/down.png) right 12px center no-repeat;
      background-color: rgb(255, 255, 255);
      appearance: none;
      -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: rgb(34, 34, 34);
    }
    .checkbox label {
      color: rgb(34, 34, 34);
    }

    .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%;
    }
  </style>
@endpush
@section('content')
  <article>
    <section id="notify-setting" style="color: rgba(90,90,90,1)">
      <h2 style="font-weight: bold">通知設定</h2>
      <p style="color: rgba(141,141,141,1)">スマートフォンアプリ、チャットワークへの通知設定ができます。</p>
      <form id="notify-setting-form" method="post" action="/basic/notify-setting">
        {{csrf_field()}}
        <h2 style="font-weight: bold; margin-top: 40px">アプリ通知設定</h2>
        <hr style="border-top: 1px solid rgba(8,191,90,1); margin-top: 10px;">
        <div class="row radio">
          <div class="col-md-2">
            <span style="font-weight: bold;color: rgb(34, 34, 34);">通知</span>
          </div>
          <div class="col-md-10">
            <label style="font-weight: bold; margin-right: 12px"><input type="radio" class="app_notification_settings" id="default_setting_app" value="0" name="app_notification_settings">ON</label>
            <label style="font-weight: bold"><input type="radio" class="app_notification_settings" value="1" name="app_notification_settings">OFF</label>
          </div>
        </div>
        <div class="row radio" style="margin-top: 20px">
          <div class="col-md-2">
            <span style="font-weight: bold;color: rgb(34, 34, 34);">各種機能通知</span>
          </div>
          <div class="col-md-10">
            <select style="width: 140px" id="notification_schedule" name="notification_schedule">
              @foreach(config('sns-line.notification_schedule') as $key => $value)
                <option value="{{$key}}" style="color: rgb(34, 34, 34);">{{$value}}</option>
              @endforeach
            </select>
          </div>
        </div>
        <h2 style="font-weight: bold; margin-top: 30px"> <span><img src="/images/logo_chatwork.png" width="140" height="40"></span>通知設定</h2>
        <hr style="border-top: 1px solid rgba(8,191,90,1); margin-top: 10px;">
        <div class="row radio" style="margin-top: 25px">
          <div class="col-md-2">
            <span style="font-weight: bold;color: rgb(34, 34, 34);">連携設定</span>
          </div>
          <div class="col-md-10">
            <div class="col-md-2" id="setting_chat_work" style="padding-left: unset;display: none">
              <button type="button" class="btn" data-toggle="modal" data-target="#settingChatWork" style="font-weight: bold;color: white; background-color: rgba(254,195,0,1)">設定する</button>
            </div>
            <div class="col-md-2" id="edit_chat_work" style="display: none;padding-left: 0">
              <button type="button" class="btn" data-toggle="modal" data-target="#settingChatWork" style="font-weight: bold;color: white; background-color: rgba(177,177,177,1);">修正する</button>
            </div>
            <div class="clearfix"></div>
            <p style="margin-top: 10px; font-weight: bold">設定方法マニュアルは<a href="https://lme.jp/manual/notification/" target="blank" style="cursor: pointer; text-decoration: underline;color: #00a0ea; font-weight: bold">こちら</a></p>
          </div>
        </div>
        <div class="row radio" style="margin-top: 20px">
          <div class="col-md-2">
            <span style="font-weight: bold;color: rgb(34, 34, 34);">通知</span>
          </div>
          <div class="col-md-10">
            <label style="font-weight: bold; margin-right: 12px"><input type="radio" class="chatWork_notification_settings" value="0"  name="chatWork_notification_settings">ON</label>
            <label style="font-weight: bold"><input type="radio" value="1" class="chatWork_notification_settings" id="default_setting_chatwork" name="chatWork_notification_settings">OFF</label>
          </div>
        </div>
        <div class="row radio" style="margin-top: 20px">
          <div class="col-md-2">
            <span style="font-weight: bold;color: rgb(34, 34, 34);">各種機能通知</span>
          </div>
          <div class="col-md-10">
            <select style="width: 140px" id="notification_schedule_chat_work" name="notification_schedule_chat_work">
              @foreach(config('sns-line.notification_schedule_chat_work') as $key => $value)
                <option value="{{$key}}" style="color: rgb(34, 34, 34);">{{$value}}</option>
              @endforeach
            </select>
          </div>
        </div>
        <h2 style="font-weight: bold; margin-top: 40px">詳細設定</h2>
        <hr style="border-top: 1px solid rgba(8,191,90,1); margin-top: 10px;">
        <div class="row" style="margin-top: 35px">
          <div class="col-md-2">
            <span style="font-weight: bold;color: rgb(34, 34, 34);">1:1チャット</span>
          </div>
          <div class="checkbox col-md-2" style="margin: unset">
            <label><input type="checkbox" class="chat_1_1" name="chat_1_1[]" value="0">通常メッセージ</label>
          </div>
          <div class="checkbox col-md-2" style="margin: unset">
            <label><input type="checkbox" class="chat_1_1" name="chat_1_1[]" value="1">【◯◯】メッセージ</label>
          </div>
        </div>
        <div class="row" style="margin-top: 10px">
          <div class="col-md-2">
            <span style="font-weight: bold;color: rgb(34, 34, 34);">通知頻度</span>
          </div>
          <div class="checkbox col-md-2" style="margin: unset">
            <label style="padding-left: unset"><input type="radio" style="margin-right: 5px" id="setting_real_time"  name="setting_time_send" value="0">リアルタイム</label>
          </div>
          <div class="checkbox col-md-5" style="margin: unset">
            <label style="padding-left: unset"><input type="radio" style="margin-right: 5px" id="setting_schedule" name="setting_time_send" value="1">各種機能通知と同様の頻度</label>
          </div>
        </div>
        <div class="row" style="margin-top: 35px">
          <div class="col-md-2">
          </div>
          <div class="col-md-2">
            <p style="font-weight: bold;color:rgba(8,191,90,1)">友だち追加時</p>
            <div class="checkbox">
              <label><input type="checkbox" class="when_adding_friends" name="when_adding_friends[]" value="0">通常友だち追加</label>
            </div>
            @if(count($landingData) > 0)
              @foreach($landingData as $key => $value)
                <div class="checkbox">
                  <label><input type="checkbox" class="when_adding_friends" name="when_adding_friends[]" value="{{$value->id}}">{{$value->name}}</label>
                </div>
              @endforeach
            @endif
          </div>
          <div class="col-md-6">
            <p style="font-weight: bold;color:rgba(8,191,90,1);">フォーム作成</p>
            <div class="checkbox">
              <label><input type="checkbox" class="answer_form" name="answer_form[]" value="0" onchange="checkedAll(this, 'answer_form')">全てのフォーム作成</label>
            </div>
            @if(count($formAnswerData) > 0)
              @foreach($formAnswerData as $key => $value)
                <div class="checkbox">
                  <label><input type="checkbox" class="answer_form" name="answer_form[]" value="{{$value->id}}">{{$value->name}}</label>
                </div>
              @endforeach
            @endif
          </div>
        </div>

        <div class="row" style="margin-top: 35px">
          <diV class="col-md-2"></diV>
          <div class="col-md-2">
            <p style="font-weight: bold;color:rgba(8,191,90,1);">イベント予約管理</p>
            <div class="checkbox">
              <label><input type="checkbox" class="event_reservation_management" name="event_reservation_management[]" value="0">予約時</label>
            </div>
            <div class="checkbox">
              <label><input type="checkbox" class="event_reservation_management" name="event_reservation_management[]" value="1">予約変更時</label>
            </div>
            <div class="checkbox">
              <label><input type="checkbox" class="event_reservation_management" name="event_reservation_management[]" value="2">予約キャンセル時</label>
            </div>
            <div class="checkbox">
              <label><input type="checkbox" class="event_reservation_management" name="event_reservation_management[]" value="3">予約承認時</label>
            </div>
            <div class="checkbox">
              <label><input type="checkbox" class="event_reservation_management" name="event_reservation_management[]" value="4">予約拒否時</label>
            </div>
            <div class="checkbox">
              <label><input type="checkbox" class="event_reservation_management" name="event_reservation_management[]" value="5">予約保留時</label>
            </div>
          </div>
          <div class="col-md-2">
            <p style="font-weight: bold;color:rgba(8,191,90,1)">決済</p>
            <div class="checkbox">
              <label><input type="checkbox" class="settlement" name="settlement[]" value="0">申し込み</label>
            </div>
            <div class="checkbox">
              <label><input type="checkbox" class="settlement" name="settlement[]" value="1">申し込み失敗</label>
            </div>
            <div class="checkbox">
              <label><input type="checkbox" class="settlement" name="settlement[]" value="2">キャンセル</label>
            </div>
            <div class="checkbox">
              <label><input type="checkbox" class="settlement" name="settlement[]" value="3">継続決済の成功</label>
            </div>
            <div class="checkbox">
              <label><input type="checkbox" class="settlement" name="settlement[]" value="4">継続決済の失敗</label>
            </div>
          </div>
          <div class="col-md-2">
            <p style="font-weight: bold;color:rgba(8,191,90,1)">システム通知</p>
            <div class="checkbox">
              <label><input type="checkbox" class="system_notification" name="system_notification[]" value="0">配信数 残り500通</label>
            </div>
            <div class="checkbox">
              <label><input type="checkbox" class="system_notification" name="system_notification[]" value="1">配信数 残り300通</label>
            </div>
            <div class="checkbox">
              <label><input type="checkbox" class="system_notification" name="system_notification[]" value="2">配信数 残り100通</label>
            </div>
            <div class="checkbox">
              <label><input type="checkbox" class="system_notification" name="system_notification[]" value="3">配信エラー発生時</label>
            </div>
          </div>
          <div class="col-md-3">
            <p style="font-weight: bold;color:rgba(8,191,90,1);">カレンダー予約</p>
            <div class="checkbox">
              <label><input type="checkbox" class="booking_calendar" name="booking_calendar[]" value="0">予約受付時</label>
            </div>
            <div class="checkbox">
              <label><input type="checkbox" class="booking_calendar" name="booking_calendar[]" value="1">予約リクエスト承認時</label>
            </div>
            <div class="checkbox">
              <label><input type="checkbox" class="booking_calendar" name="booking_calendar[]" value="2">予約変更時</label>
            </div>
            <div class="checkbox">
              <label><input type="checkbox" class="booking_calendar" name="booking_calendar[]" value="3">予約変更リクエスト承認時</label>
            </div>
            <div class="checkbox">
              <label><input type="checkbox" class="booking_calendar" name="booking_calendar[]" value="4">予約キャンセル時</label>
            </div>
            <div class="checkbox">
              <label><input type="checkbox" class="booking_calendar" name="booking_calendar[]" value="5">キャンセルリクエスト承認時</label>
            </div>
            <div class="checkbox">
              <label><input type="checkbox" class="booking_calendar" name="booking_calendar[]" value="6">予約リクエスト受付時</label>
            </div>
            <div class="checkbox">
              <label><input type="checkbox" class="booking_calendar" name="booking_calendar[]" value="7">予約変更リクエスト受付時</label>
            </div>
            <div class="checkbox">
              <label><input type="checkbox" class="booking_calendar" name="booking_calendar[]" value="8">キャンセルリクエスト受付時</label>
            </div>
          </div>
        </div>
        <div style="text-align: center; margin-top: 50px">
          <input type="submit" class="btn btn-success" value="保存" form="notify-setting-form" style="padding: 10px 50px;background: rgba(8,191,90,1);color: white">
        </div>
      </form>
    </section>
    <div class="modal fade message-modal message-show" id="settingChatWork" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document" style="width: 750px">
        <div class="modal-content" style="padding: 20px">
          <div style="display: block; text-align: center">
            <h2 style="font-weight: bold;font-size: 20px"><span style="padding-top: 10px"><img src="/images/logo_chatwork.png" width="170" height="50"></span>通知設定</h2>
          </div>
          <div class="modal-body" id="message-modal-analytics">
            <div id="step1" style="margin-bottom: 10px;">
              <div class="label-chatwork"><strong class="left_bar"></strong> ステップ1</div>
              <div style="padding: 0 10px">
                <div class="label-sub">通知を受け取りたいご自身のChatworkアカウントにログインしてください</div>
                <div>Chatworkアカウントをお持ちでない方は、<span><a href="https://www.chatwork.com/service/packages/chatwork/pre_register.php?lang=ja&click=header-navi" target="_blank">アカウントを作成</a></span>してください（無料）</div>
                <a href="https://www.chatwork.com/login.php?lang=jp" target="_blank"><button type="button" class="btn" style="font-weight: bold;color: white; background-color: rgba(254,195,0,1);margin: 10px 0 20px 0">Chatworkログイン</button></a>
              </div>
            </div>
            <div id="step2" style="margin-bottom: 20px">
              <div class="label-chatwork"><strong class="left_bar"></strong> ステップ2</div>
              <div style="padding: 0 10px">
                <div class="label-sub">「コンタクト追加」をクリックして通知用アカウントをコンタクト追加して下さい</div>
                <div>※「このコンタクトは追加済みです」と表示されている場合は、ステップ4に進んでください</div>
                <a href="{{ env('LINK_BOT_CHATWORK') }}" target="_blank"><button type="button" class="btn" style="font-weight: bold;color: white; background-color: rgba(254,195,0,1);margin: 10px 0 20px 0">コンタクト追加</button></a>
                <div style="text-align: center">
                  <img src="/images/step2_notify.png" width="400px" height="600px">
                </div>
              </div>
            </div>
            <div id="step3" style="margin-bottom: 20px">
              <div class="label-chatwork"><strong class="left_bar"></strong> ステップ3</div>
              <div style="padding: 0 10px">
                <div class="label-sub">「自動承認」をクリックします</div>
                <button type="button" class="btn" style="font-weight: bold;color: white; background-color: rgba(254,195,0,1);margin: 10px 0 20px 0"  onclick="approveAddFriend()">自動承認</button>
                <div>※自動承認をクリックすると、ご自身のChatworkアカウントにエルメ通知用アカウントが自動的にコンタクト追加されます。万が一、追加されない場合は操作に誤りがある場合がございますので、ステップ1より再確認して下さい。</div>
              </div>
            </div>
            <div id="step4" style="margin-bottom: 20px">
              <div class="label-chatwork"><strong class="left_bar"></strong> ステップ4</div>
              <div style="padding: 0 10px">
                <div class="label-sub">「ダイレクトチャット」をクリックします</div>
                <a id="open_room_chat_work" href="https://www.chatwork.com/lmenotification" target="_blank"><button type="button" class="btn" style="font-weight: bold;color: white; background-color: rgba(254,195,0,1);margin: 10px 0 20px 0">ダイレクトチャット</button></a>
                <div style="text-align: center">
                  <img src="/images/step4_notify.png" width="450px" height="400px">
                </div>
                <div class="label-sub">ダイレクトチャットページでコピーしたURLを入力します</div>
                <div style="margin-bottom: 20px">
                  <input type="text" id="notification_room_url" class="notification_room_url" name="notification_room_url" style="width: 75%; margin-right: 20px;border-radius: 5px">
                  <button type="button" onclick="saveUrlRoomChatWork()" class="btn btn-success" style="width: 100px;font-weight: bold; background-color: rgba(8,191,90,1);">保存</button>
                </div>
              </div>
              <div class="label-chatwork"><strong class="left_bar"></strong> 2つ以上のLINE公式アカウントからの通知を分けて受け取る場合</div>
              <div style="padding: 0 10px">
                <div class="label-sub" style="padding-bottom: 5px">エルメ通知用アカウントを含めたグループをそれぞれに分けて作成し</div>
                <div class="label-sub" style="padding-top: 0;padding-bottom: 20px">グループのトーク画面で表示されているURLをステップ4のURL入力欄に入力します。</div>
                <div style="text-align: center">
                  <img src="/images/group_notify.png" width="500px">
                </div>
              </div>
            </div>
          </div>
          <div style="text-align: center;margin-left: 610px">
            <button type="button" class="btn btn-default btn-block" data-dismiss="modal" style="width: 80px;padding:5px;background:rgba(177,177,177,1);color: rgb(34, 34, 34);color: white">
              <i class="glyphicon glyphicon-remove"></i> 閉じる
            </button>
          </div>
        </div>
      </div>
    </div>
  </article>
@endsection
@push('js')
  <script>
    $(document).ready(function () {
      $.ajaxSetup({
        headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
      });
      $.ajax({
        method: 'GET',
        url: `/ajax/basic/notify-setting`,
        beforeSend: function () {
          $.LoadingOverlay('show');
        },
        success: function (response) {
          if (response.notifySettingData) {
            const notifySettingData = response.notifySettingData;
            if (notifySettingData.setting_send_chat === 0) {
              $('#setting_real_time').prop("checked", true);
            }
            if (notifySettingData.setting_send_chat != 0) {
              $('#setting_schedule').prop("checked", true);
            }
            if (notifySettingData.notification_room_url != null && notifySettingData.notification_room_url != '') {
              $('#setting_chat_work').hide();
              $('#edit_chat_work').show();
              $(".notification_room_url").val(notifySettingData.notification_room_url);
              $('#open_room_chat_work').attr('href', notifySettingData.notification_room_url);
            }else{
              $(".notification_room_url").val();
              $('#edit_chat_work').hide();
              $('#setting_chat_work').show();
            }
            if (notifySettingData.app_notification_settings || notifySettingData.app_notification_settings === 0) {
              $(".app_notification_settings:eq(" + notifySettingData.app_notification_settings + ")").prop("checked", true);
            }

            if (notifySettingData.chatWork_notification_settings || notifySettingData.chatWork_notification_settings === 0) {
              $(".chatWork_notification_settings:eq(" + notifySettingData.chatWork_notification_settings + ")").prop("checked", true);
            }

            $("#notification_schedule option[value='" + notifySettingData.notification_schedule + "']").prop("selected", true);
            $("#notification_schedule_chat_work option[value='" + notifySettingData.schedule_chat_work + "']").prop("selected", true);
            notifySettingData.when_adding_friends.forEach(value => {
              if (value) {
                for (let index = 0; index < $(".when_adding_friends").length; index++) {
                  const element = $(".when_adding_friends")[index];
                  if (element.value == value) {
                    element.checked = true;
                    break;
                  }
                }
              }
            });
            notifySettingData.chat_1_1.forEach(element => element && $(".chat_1_1:eq(" + element + ")").prop("checked", true));
            notifySettingData.answer_form.forEach(value => {
              if (value) {
                for (let index = 0; index < $(".answer_form").length; index++) {
                  const element = $(".answer_form")[index];
                  if (element.value == value) {
                    element.checked = true;
                    break;
                  }
                }
              }
            });
            notifySettingData.event_reservation_management.forEach(element => element && $(".event_reservation_management:eq(" + element + ")").prop("checked", true));
            notifySettingData.settlement.forEach(element => element && $(".settlement:eq(" + element + ")").prop("checked", true));
            notifySettingData.system_notification.forEach(element => element && $(".system_notification:eq(" + element + ")").prop("checked", true));
            notifySettingData.booking_calendar.forEach(element => element && $(".booking_calendar:eq(" + element + ")").prop("checked", true));
          }else{
            $('#default_setting_app').prop("checked", true);
            $('#default_setting_chatwork').prop("checked", true);
            $(".chat_1_1:eq(0)").prop("checked", true);
            $(".chat_1_1:eq(1)").prop("checked", true);
            $('#setting_chat_work').show();
            $('#setting_real_time').prop("checked", true);
          }
          $.LoadingOverlay('hide');
        },
        error: function () {
          $.LoadingOverlay('hide');
        }
      })
    });
    function  saveUrlRoomChatWork(){
      var url = $('#notification_room_url').val();
      if (url == null || url.trim().length == 0) return alert('URLを入力してください'),$('#notification_room_url').focus(), !1;
      if (url.length > 500) return alert('500文字以内で入力してください'),$('#notification_room_url').focus(), !1;
      if(!/^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/|www\.)[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/.test(url)){
        return alert('URLのフォーマットで入力してください'),$('#notification_room_url').focus(), !1;
      }
      $.LoadingOverlay('show');
      $.ajax(
              {url: '/ajax/notify/save-url-chat-work',
                type: 'POST',
                data: {notification_room_url: url},
                timeout: 10000})
              .done(function (a, b, c) {
                $.LoadingOverlay('hide');
                if (a.status == 0) {
                  return alert(a.msg), !1;
                }else{
                  $('#notification_room_url').val(a.url);
                  $('#open_room_chat_work').attr('href', a.url);
                  $('#setting_chat_work').hide();
                  $('#edit_chat_work').show();
                }
              }).fail(function (a, b, c) {
        $.LoadingOverlay('hide');
      }).always(function (a, b) {
      });
    }
    function checkedAll(self, className) {
      console.log(`${self} - ${className}`);
      if ($(self).is(":checked")) {
        $('.' + className).prop("checked", true);
      } else {
        $('.' + className).prop("checked", false);
      }
    }
    function approveAddFriend() {
      // Get a list of contact requests pending confirmation
      $.ajaxSetup({
        headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
      });
      $.ajax({
        method: 'GET',
        url: `/ajax/confirm-contact-request`,
        beforeSend: function () {
          $.LoadingOverlay('show');
        },
        success: function (response) {
          $.LoadingOverlay('hide');
        },
        error: function () {
          $.LoadingOverlay('hide');
        }
      })
    }

  </script>
@endpush