@extends('layout.basic.main')
@section('title',isset($getTag) && isset($getTag->id) ? (isset($id_copy)?'タグ管理（コピー）':'タグ管理 （編集）'):'タグ管理 （作成）')
@push('css')
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-rqn26AG5Pj86AF4SO72RK5fyefcQ/x32DNQfChxWvbXIyXFePlEktwD18fEz+kQU" crossorigin="anonymous">
<style>
  .bor-title {
    border-left: 7px solid rgba(68, 203, 128, 1);
    padding: 7px;
    font-size: 15px;
    margin-bottom: 13px;
    margin-top: 30px;
    font-weight: bold;
  }

  .b-select {
    position: relative;
  }

  .b-select i {
    position: absolute;
    right: 9px;
    top: 7px;
    font-size: 22px;
  }

  input[type="text"],
  select {
    height: 37px !important;
  }

  .item-act-display {
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 300px;
    overflow: hidden;
    background-color: #F2F2F2;
    padding-bottom: 4px;
    padding-top: 4px;
    text-align: left !important;
    border-radius: 5px;
    margin-bottom: 4px !important;
    font-size: 14px;
  }

  #loading_overlay {
    z-index: 1;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    background-color: rgba(0, 0, 0, .75)
  }

  #loading_overlay i {
    font-size: 30px;
    font-weight: 700;
    position: absolute;
    top: 40%;
    color: #00c900
  }

  .spin {
    -webkit-animation: spin 2s infinite linear;
    -moz-animation: spin 2s infinite linear;
    -o-animation: spin 2s infinite linear;
    animation: spin 2s infinite linear
  }

  @keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
  }

  .btn:hover{
    opacity: 0.7;
  }

</style>
@endpush
@section('content')
<div class="container-fluid" id="vue_add_tag" v-cloak>
  <div class="row">
    <div id="loading_overlay" class="loading-overlay text-center" style="display: none">
      <i class="glyphicon glyphicon-refresh spin"></i>
    </div>
    <div class="col-xs-12" style="padding-top: 20px">
      <h2 style="font-weight: bold">詳細設定</h2>
      <div class="row">
        <div class="col-sm-6 ">
          <div class="bor-title">
            タグ管理名
          </div>
          <div style="display: flex;">
            <input type="text" class="form-control" id="tag_name" name="tag_name" value="{{ isset($getTag) ? $getTag->name : '' }}" style="float: left; margin-right: 10px">
            <div id="count_text_name" style="text-align: right;width: 90px;margin-top: 6px;">0/50文字</div>
          </div>
          <div class="errors" id="name_conversion_error"></div>
        </div>
        <div class="col-sm-6 ">
          <div class="bor-title">
            フォルダ
          </div>
          <div class="b-select">
            <select class="form-control" name="folder_id" id="folder_id">
              <option value="0" @if($folderCookie == 0) selected @endif>未分類</option>
              @if(isset($folders))
                @foreach($folders as $folder)
                  <option value="{{ $folder->id }}" @if(isset($folderCookie) && $folderCookie == $folder->id) selected @endif>{{ $folder->name }}</option>
                @endforeach
              @endif
            </select>
            <i class="far fa-angle-down"></i>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-6 ">
          <input type="hidden" value="{{isset($id_setting) ? $id_setting : ''}}" name="id_setting" id="id_setting">
          <input type="hidden" value="{{isset($id_copy) ? $id_copy : ''}}" name="id_copy" id="id_copy">
          <div class="bor-title" style="display: flex; align-items: center;">
            <p style="min-width: 160px">タグ追加時アクション</p>
            <input type="radio" name="check_group" style="width: 25px;height: 22px; margin-left: 30px;margin-bottom: 5px" id="check1" value="0" v-model="action_mode"><label for="check1" style="min-width: 170px">1度のみアクション稼働</label>
            <input type="radio" name="check_group" style="width: 25px;height: 22px; margin-left: 30px;margin-bottom: 5px" id="check2" value="1" v-model="action_mode"><label for="check2" style="min-width: 120px">何度でも稼働</label>
          </div>
          <div>
            <button v-if="setting_actions.length == 0" class="btn btn-warning btn-sm" v-on:click="openSettingAction(action_id)" style="width: 100px;
                                    background-color: rgba(254,195,0,1); outline: #5799db; border: none; margin-left: 7px" data-toggle="modal" data-target="#settingActionUrlModal">設定する</button>
            <div v-else style="margin-left: 14px;">
              <div class="item-act-display" v-for="(item, indexAction) in setting_actions" v-if="item.type && indexAction < 3">
                @include('layout.modal_setting.label_action')
                {{-- <span v-if="iAc.type == 'tag'">【タグ】
                  <span v-for="(itemTag, indexTag) in iAc.list_tags">@{{ indexTag == 0 ? '' : ',' }}@{{ itemTag.name }}</span>を<span v-if="iAc.data.action == 1">つける</span><span v-else>はずす</span>
                </span>

                <span v-else-if="iAc.type == 'scenario'">【ステップ】<span v-if="iAc.data.action != 1">@{{ iAc.data.scenario_name }}</span>
                  <span v-else>購読停止・予約キャンセル</span>
                </span>
                <span v-else-if="iAc.type == 'template'">【テンプレート】
                  <span>@{{ iAc.data.template_name }}</span>
                </span>
                <span v-else-if="iAc.type == 'text'">【テキスト】
                  <span>@{{ iAc.data.content | shortContent }}</span>
                </span>
                <span v-else-if="iAc.type == 'richmenu'">【リッチメニュー】
                  <span v-if="iAc.data.action != 1">@{{ iAc.data.richmenu_name }} 表示</span>
                  <span v-else>表示を停止</span>
                </span>
                <span v-else-if="iAc.type == 'remind'">【リマインド】
                  <span>@{{ iAc.data.remind_name }}</span>
                </span>
                <span v-else-if="iAc.type == 'bookmark'">
      <span class="action-title">【ブックマーク】</span>
      <span v-if="iAc.data.action == 1">ブックマークする</span>
      <span v-else>ブックマークを外す</span>
    </span>
                <span v-else-if="iAc.type == 'block'">
      <span class="action-title">【ブロック・非表示】</span>
      <span v-if="iAc.data.action == 1">ブロックする</span>
      <span v-if="iAc.data.action == 2">ブロック解除</span>
       <span v-if="iAc.data.action == 3">表示</span>
      <span v-if="iAc.data.action == 4">非表示</span>
    </span>
                <span v-else-if="iAc.type == 'friend_info'">【友だち情報】
                  <span>@{{ iAc.data.name }}</span>
                  <span v-if="iAc.data.action == 1"> 登録情報を削除</span>
                  <span v-else> @{{ iAc.data.content }}</span>
                </span>
                <span v-else-if="iAc.type == 'compliant_status'">
      <span class="action-title">【対応ステータス】</span>
      <span v-if="iAc.data.action == 1">@{{ iAc.data.content }}をつける</span>
      <span v-else> ステータスを外す</span>
    </span> --}}
              </div>
              <a href="" style="width:200px;color: #5799DB;font-weight: bold;text-decoration: underline; margin-top: 15px; display: inline-block;" v-on:click="openSettingAction(action_id)" data-toggle="modal" data-target="#settingActionUrlModal"> <span v-if="setting_actions.length > 3"> その他@{{ setting_actions.length - 3 }}件 編集 </span>
                <span v-else style="font-weight: bold;text-decoration: underline">編集</span>
              </a>
            </div>
          </div>
        </div>
        <div class="col-sm-6 ">

        </div>
      </div>

      <div class="row" style="margin-top: 50px">
        <div class="col-12" style="text-align: center;">
          <button type="button" class="btn btn-sns-line btn-sns-line-success" v-on:click="saveTag()" style="padding: 10px 70px">保存</button>
        </div>
      </div>
    </div>
  </div>
</div>
@include('layout.modal_setting.modal_select_action')
@include('layout.modal_filter_v2')
@endsection
@push('js')
<script src="/js/tag/add_tag.js?v={{config("sns-line.version")}}"></script>
<script>
    var params = [];
    var basic_home_new = [];
</script>
<script src="/js/friendlist/modal_filter_v2.js?v={{ config('sns-line.version') }}"></script>
@endpush