@extends('layout.basic.main')
@push('css')
    <link rel="stylesheet" href="/css/friendlist/style.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/css/tag/style.css?v={{config("sns-line.version")}}">
    <style>
        .active {
            background-color: #fbda7b !important;
        }

        .ylw {
            padding: 8px 12px !important;
        }

        #item_vuelist_sitescript .title{
            font-size: 20px;
            color: #222222;
            font-weight: bold;
            padding: 10px 10px 10px 0;
        }
    </style>
@endpush
@section('content')
    <div class="container-fluid">
        <div class="row" id="item_vuelist_sitescript" v-cloak>
            <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 col-sm-12 col-md-12">
                <div class="row">
                    <div class="col-sm-12">
                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <p class="title">サイトスクリプト</p>
                            <p style="margin-bottom: 40px">
                                Webサイトに埋め込むJavaScriptコードを管理することが出来ます。<br>
                                また、URLを登録することで友だちのサイト滞在時間を計測し、滞在時間に応じてタグを付けることが出来ます。
                            </p>
                            <div id="item_vuelist">
                                <div class="group_list">
                                    <div class="group_list_head">
                                        <div class="add_group btn btn-sm btn-success">
                                            <i class="glyphicon glyphicon-plus"></i> 新しいフォルダー
                                        </div>
                                    </div>
                                    <div class="vuelist-nanowrapper leftlist-wrapper">
                                        <div id="showtagcheckpart" class="">
                                            <div tabindex="0" class="nano-content" style="right: -17px;">
                                                {{--addgroup--}}
                                                <div class="tag_group folder-close hidden" id="showAddGroup">
                                                    <span>
                                                        <i class="glyphicon glyphicon-folder-collapse"
                                                           style="margin-right: 10px"></i>
                                                        <input type="text" id="cat_txt" name="cat_txt"
                                                               style="width: 65%;height: 25px;" placeholder="新しいフォルダー名"
                                                               autofocus onkeyup="showSubmitBtn()">
                                                        <input type="button" class="btn btn-default btn-add-group"
                                                               value="決定 "
                                                               style="width: 19%;margin-left:5px;padding:1px;display: none"
                                                               v-on:click="addGroup()">
                                                    </span>
                                                </div>

                                                <div class="tag_group"
                                                     id="group_0"
                                                     data-id="0"
                                                     v-bind:class="(group_open == 0)?'active':'folder-close'">
                                                    <span v-on:click="showGroup(0)" class="display_category">
                                                        <span class="glyphicon glyphicon-folder-collapse"
                                                              style="margin-right: 10px"></span>未分類(@{{ count_default }})
                                                    </span>
                                                </div>
                                                <div>
                                                    <div class="list_search" style="display: none;">
                                                        <i class="glyphicon glyphicon-search"></i> 検索結果
                                                    </div>
                                                    <div v-for="(category, index) in groups" class="tag_group"
                                                         :id="'group_'+category.id"
                                                         :data-id="category.id" :data-name="category.name"
                                                         v-bind:class="(category.id == group_open)?'active':'folder-close'">
                                                        <span v-on:click="showGroup(category.id)"
                                                              class="display_category">
                                                            <span class="glyphicon glyphicon-folder-collapse"></span>@{{ category.name }} (@{{ category.count }})
                                                        </span>
                                                        <div class="dropdown">
                                                            <button type="button" data-toggle="dropdown"
                                                                    aria-haspopup="true" aria-expanded="false"
                                                                    class="btn btn-default btn-xs tag_group_opener dropdown-toggle display_category">
                                                                編集 <span class="caret"></span></button>
                                                            <ul class="dropdown-menu dropdown-menu-right">
                                                                <li>
                                                                    <a v-on:click="editGroup(category.id)">名前を変える</a>
                                                                </li>
                                                                <li>
                                                                    <a v-on:click="deleteGroup(category.id)">分類を削除</a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                        <span :id="'edit_group_'+category.id" class="hidden">
                                                             <i class="glyphicon glyphicon-folder-collapse"
                                                                style="margin-right: 10px"></i>
                                                             <input type="text" :id="'rename_cat_'+category.id"
                                                                    style="width: 65%;height: 25px;"
                                                                    :value="category.name" autofocus>
                                                             <input type="button" class="btn btn-default" value="決定 "
                                                                    style="width: 19%;margin-left:5px;padding:1px;"
                                                                    v-on:click="renameGroup(category.id)">
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="primary_list">
                                    <div class="primary_list_head">
                                        <div class="btn_wrapper">
                                            <a v-if="group_open == 0" :href="'/basic/sitescript/add/'+ 0">
                                                <div class="btn btn-primary btn-sm add-tag">
                                                    <i class="glyphicon glyphicon-plus"></i>
                                                    新しいスクリプト
                                                </div>
                                            </a>
                                            <a v-if="group_open != 0"
                                               v-bind:class="(category.id == group_open)? '':'hidden'"
                                               v-for="(category, index) in groups"
                                               :href="'/basic/sitescript/add/'+ category.id">
                                                <div class="btn btn-primary btn-sm add-tag">
                                                    <i class="glyphicon glyphicon-plus"></i>
                                                    新しいスクリプト
                                                </div>
                                            </a>
                                            <button type="button" data-toggle="modal" data-target="#myModal"
                                                    data-type="tag" data-id="" data-callback="tag_sorted"
                                                    class="btn  btn-sm btn-default btn-sort" style="color: black;">
                                                並び替え
                                            </button>
                                            <button v-if="selected.length > 0" type="button" v-on:click="deleteItems()"
                                                    class="btn-delete">
                                                タグを削除
                                            </button>
                                        </div>
                                        <div class="input-group search-inputs">
                                            <input type="text" id="queryName" class="form-control">
                                            <input type="button" id="btn-search" v-on:click="searchSiteScript()"
                                                   value="検索">
                                        </div>
                                    </div>
                                    <table border="1" style="margin-bottom: 0px;">
                                        <thead>
                                        <tr>
                                            <th class="checkth" style="width: 5%">
                                                <input v-if="group_open == 0" type="checkbox" name="dammy"
                                                       v-model="selectAllDefault">
                                                <input v-else type="checkbox" name="dammy" v-model="selectAll">
                                            </th>
                                            <th style="width: 25%">スクリプト名</th>
                                            <th style="width: 40%">オプション</th>
                                            <th style="width: 10%" class="bunruith">フォルダー</th>
                                            <th style="width: 20%"></th>
                                        </tr>
                                        </thead>
                                    </table>
                                    <div class="vuelist-nanowrapper">
                                        <div class="nano has-scrollbar" style="height: unset">
                                            <div tabindex="0" class="nano-content" style="right: -17px;">
                                                <div class="nano-inner">
                                                    <table border="1" style="margin-bottom: 0px;">
                                                        <tbody>
                                                        <tr v-if="group_open == 0 && items_default.length > 0"
                                                            draggable="true"
                                                            :class="'tag_'+item.id"
                                                            v-for="(item, index) in items_default"
                                                            :data-id="item.id">
                                                            <td style="width: 5%">
                                                                <label :for="'itemcheck_'+item.id">
                                                                    <input type="checkbox" name="item_checks[]"
                                                                           :id="'itemcheck_'+item.id"
                                                                           :value="item.id"
                                                                           v-model="selected">
                                                                </label>
                                                            </td>
                                                            <td style="width: 25%">
                                                                    <span>
                                                                        @{{ item.name }}
                                                                    </span>
                                                                <div class="input-group input-group-sm">
                                                                    <input type="text"
                                                                           :value="renderScriptLink(item.script_command)"
                                                                           class="form-control"
                                                                           :id="'action_'+item.id">
                                                                    <span class="input-group-btn">
                                                                        <button class="btn btn-default copy-btn" :data-clipboard-target="'#action_' + item.id" type="button">
                                                                            <span class="glyphicon glyphicon-copy"></span> コピー
                                                                        </button>
                                                                    </span>
                                                                </div>
                                                            </td>
                                                            <td style="width: 40%">
                                                                <p v-for="(item_url, index_url) in item.url">
                                                                    <span v-html="displayUrl(item_url)"></span><span v-show="item_url.number > 0">
                                                                        <button class="btn btn-xs btn-default" v-on:click="showAccessedUser(item_url.url_id, item_url.time_to_stay)">表示</button></span>
                                                                </p>
                                                            </td>
                                                            <td style="width: 10%">
                                                                @{{ item.category_name }}
                                                            </td>
                                                            <td style="width: 20%">
                                                                <div class="btn" style="display: inline-block;">
                                                                    <a :href="'/basic/sitescript/edit/'+ item.id"
                                                                       class="ylw">編集</a>
                                                                </div>
                                                                <div class="btn" style="display: inline-block;">
                                                                    <button class="btn_delete"
                                                                            :data-id="item.id"
                                                                            v-on:click="deleteItem(item.id)"
                                                                            style="background: #d9534f; border-radius: 5px; border: none; padding: 5px 10px; color:#fff;">
                                                                        削除
                                                                    </button>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                        <tr v-if="group_open == 0 && items_default.length == 0">
                                                            <td colspan="5">表示するサイトスクリプトがありません。</td>
                                                        </tr>
                                                        <tr draggable="true" v-if="group_open != 0"
                                                            v-for="(item,index) in items"
                                                            :class="'tag_'+item.id"
                                                            :data-id="item.id">
                                                            <td style="width:5%">
                                                                <label :for="'itemcheck_'+item.id">
                                                                    <input type="checkbox" name="item_checks[]"
                                                                           :id="'itemcheck_'+item.id"
                                                                           :value="item.id"
                                                                           v-model="selected">
                                                                </label>
                                                            </td>
                                                            <td style="width: 25%">
                                                                    <span>
                                                                        @{{ item.name }}
                                                                    </span>
                                                                <div class="input-group input-group-sm">
                                                                    <input type="text"
                                                                           :value="renderScriptLink(item.script_command)"
                                                                           class="form-control"
                                                                           :id="'action_'+ item.id">
                                                                    <span class="input-group-btn">
                                                                            <button class="btn btn-default copy-btn"
                                                                                    :data-clipboard-target="'#action_' + item.id"
                                                                                    type="button">
                                                                                <span class="glyphicon glyphicon-copy"></span> コピー
                                                                            </button>
                                                                        </span>
                                                                </div>
                                                            </td>
                                                            <td style="width: 40%">
                                                                <p v-for="(item_url, index_url) in item.url">
                                                                    <span v-html="displayUrl(item_url)"></span><span v-show="item_url.number > 0">
                                                                        <button class="btn btn-xs btn-default" v-on:click="showAccessedUser(item_url.url_id, item_url.time_to_stay)">表示</button></span>
                                                                </p>
                                                            </td>
                                                            <td style="width: 10%">
                                                                @{{ item.category_name }}
                                                            </td>
                                                            <td style="width: 20%">
                                                                <div class="btn" style="display: inline-block;">
                                                                    <a :href="'/basic/sitescript/edit/'+ item.id"
                                                                       class="ylw">編集</a>
                                                                </div>
                                                                <div class="btn" style="display: inline-block;">
                                                                    <button class="btn_delete"
                                                                            v-on:click="deleteItem(item.id)"
                                                                            :data-id="item.id" type="button"
                                                                            style="background: #d9534f; border-radius: 5px; border: none; padding: 5px 10px; color:#fff;">
                                                                        削除
                                                                    </button>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                        <tr v-if="group_open != 0 && items.length == 0">
                                                            <td colspan="5">表示するサイトスクリプトがありません。</td>
                                                        </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <span id="modalCaller" data-type="egg" type="button" data-toggle="modal"
                                  data-target="#messageModal" style="display: none;">
                            </span>
                        </div>

                        <div class="modal fade" id="myModal" role="dialog">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div id="" class="modal-header">
                                        <span id="sorter_modal_v1">タグ並び替え</span>
                                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                                    </div>
                                    <div id="sorter_modal_body" class="modal-body modal-body-main">
                                        <div class="panel-group">
                                            <div>
                                                    <span v-if="group_open != 0">
                                                       <div v-for="(item,index) in items"
                                                            class="panel panel-default sortitem sortable-chosen sort_item"
                                                            draggable="true" style="will-change: transform;"
                                                            :data-id="item.id">
                                                          <div class="panel-heading sort-panel-heading fomat-row-sort"
                                                               style="max-height: 100px; overflow: hidden">
                                                              <div style="width: 50%;float: left;word-wrap: break-word" v-if="item.name.length > 100">
                                                                  @{{ item.name.slice(0,80) }}...<small></small>
                                                              </div>
                                                              <div style="width: 50%;float: left;word-wrap: break-word" v-else>
                                                                  @{{ item.name }} <small></small>
                                                              </div>
                                                              <div style="width: 50%;float: left">
                                                                  <span @click="onUpdate(undefined, index, 'bottom')"
                                                                        class="pull-right sort-button sort-menu movebottom"
                                                                        id="">
                                                                  <i class="glyphicon glyphicon-arrow-down"></i>末尾
                                                                 </span>

                                                                 <span @click="onUpdate(undefined, index, 'down')"
                                                                       class="pull-right sort-button sort-menu movedown"
                                                                       id="">
                                                                    <i class="glyphicon glyphicon-menu-down"></i>下
                                                                 </span>

                                                                 <span @click="onUpdate(undefined, index, 'up')"
                                                                       class="pull-right sort-button sort-menu moveup"
                                                                       id="">
                                                                    <i class="glyphicon glyphicon-menu-up"></i>上
                                                                 </span>

                                                                 <span @click="onUpdate(undefined, index, 'top')"
                                                                       class="pull-right sort-button sort-menu movetop"
                                                                       id="">
                                                                    <i class="glyphicon glyphicon-arrow-up"></i>先頭
                                                                 </span>
                                                              </div>
                                                          </div>
                                                       </div>
                                                    </span>
                                                    <span  v-if="group_open == 0">
                                                       <div v-for="(item,index) in items_default"
                                                            class="panel panel-default sortitem sortable-chosen sort_item"
                                                            draggable="true" style="will-change: transform;"
                                                            :data-id="item.id">
                                                          <div class="panel-heading sort-panel-heading"
                                                               style="max-height: 100px; overflow: hidden">
                                                               <div style="width: 50%;float: left;word-wrap: break-word" v-if="item.name.length > 100">
                                                                  @{{ item.name.slice(0,80) }}...<small></small>
                                                              </div>
                                                              <div style="width: 50%;float: left;word-wrap: break-word" v-else>
                                                                  @{{ item.name }} <small></small>
                                                              </div>
                                                              <div style="width: 50%;float: left">
                                                                  <span @click="onUpdate(undefined, index, 'bottom')"
                                                                        class="pull-right sort-button sort-menu movebottom"
                                                                        id="">
                                                                 <i class="glyphicon glyphicon-arrow-down"></i>末尾
                                                                 </span>

                                                                 <span @click="onUpdate(undefined, index, 'down')"
                                                                       class="pull-right sort-button sort-menu movedown"
                                                                       id="">
                                                                    <i class="glyphicon glyphicon-menu-down"></i>下
                                                                 </span>

                                                                 <span @click="onUpdate(undefined, index, 'up')"
                                                                       class="pull-right sort-button sort-menu moveup"
                                                                       id="">
                                                                    <i class="glyphicon glyphicon-menu-up"></i>上
                                                                 </span>

                                                                 <span @click="onUpdate(undefined, index, 'top')"
                                                                       class="pull-right sort-button sort-menu movetop"
                                                                       id="">
                                                                    <i class="glyphicon glyphicon-arrow-up"></i>先頭
                                                                 </span>
                                                              </div>
                                                          </div>
                                                       </div>
                                                    </span>
                                                <input type="hidden" id="array_sort" value="">
                                                <input type="hidden" id="current_position" value="">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                            <span class="btn btn-danger pull-left" data-dismiss="modal">
                                                <button type="button" class="close"
                                                        style="color: #fff;font-size: 16px;opacity:unset !important;font-weight:normal !important;">&times;キャンセル
                                                </button>
                                            </span>
                                        <span class="sorter_client_finishers">
                                                <span data-save="update" v-on:click="sortedTemplate"
                                                      class="btn btn-primary sorter-modal-finisher">この順番で決定する</span>
                                            </span>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="modal-overlay" style="display: none;"></div>
    </div>

@endsection
@push('js')
    <script>
        route_add_item = "{!! route('addItemReply') !!}";
        bot_id = "{!! \Session::get('current_bot_id') !!}"
    </script>
    <script src="/chat_files/clipboard.min.js"></script>
    <script>
        $(document).ready(function () {
            var clipboard = new Clipboard('.copy-btn');
            clipboard.on('success', function (e) {
                alert(e.text);
            });
            clipboard.on('error', function (e) {
                alert("コピーに失敗しました");
            });
        });
    </script>
    <script src="/js/tag/vue-sortable.js"></script>

    <script src="/js/plugins/bootbox.min.js"></script>

    <script src="/js/sitescript/index.js?v={{config("sns-line.version")}}"></script>
@endpush