@extends('layout.basic.main')
@push('css')
    <link rel="stylesheet" href="/css/friendlist/style.css">
    <style>
        th {
            background: #fff !important;
            border-top: 1px solid #eee;
        }
    </style>
@endpush
@section('content')
    <div class="container-fluid">
        <div id="vue-broadcast">
            <div class="row">
                <div class="col-sm-12">

                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <h2 style="margin-top: 0; color: #000000;">スクリプト登録</h2>
                        <br>
                        <form id="formSave" action="{{route('updateScript')}}" method="post">
                            {{ csrf_field() }}
                            <input type="hidden" value="{{$id}}" name="id" id="id">
                            <div class="form-horizontal">
                                <div class="form-group">
                                    <label for="body" class="col-sm-2 control-label">
                                        管理名 <span class="label label-danger">必須</span>
                                    </label>
                                    <div class="col-sm-10">
                                        <input type="text" v-model="script_name" name="script_name" id="script_name" class="form-control">
                                        <br>
                                        <div id="errorName"></div>
                                        @if($errors->has('name'))
                                            <span class="error">{{$errors->first('name')}}</span>
                                        @endif
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="body" class="col-sm-2 control-label">タグ追加設定</label>
                                    <div class="col-sm-10" id="block">

                                        <div class="panel panel-default" v-for="(tag_item,tag_key) in block_items">
                                            <div class="panel-heading">
                                                <div class="row">
                                                    <div class="col-sm-8">
                                                        <div class="input-group"><span
                                                                    class="input-group-addon">URLに</span>
                                                            <input type="text" v-model="tag_item.url"
                                                                   :name="'url_'+tag_key" id="url"
                                                                   class="form-control input-sm">
                                                            <span class="input-group-addon">が含まれるページ</span></div>
                                                    </div>
                                                    <div class="col-sm-4 text-right">
                                                        <span class="panel-heading-btn panel-heading-btn-default">
                                                            <span class="panel-heading-btn" v-on:click="removeBlock">
                                                                <i class="glyphicon glyphicon-remove"></i> 消去
                                                            </span>
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                            <table class="table table-condensed table-striped table-scrpt-option-action">
                                                <tbody>
                                                <tr v-for="(item,key) in tag_item.tag_items">
                                                    <td style="width: 5%;">
                                                        <span class="panel-heading-btn"
                                                              v-on:click="removeItem(key,tag_key)">
                                                            <i class="glyphicon glyphicon-remove"></i>
                                                        </span>
                                                    </td>
                                                    <td style="width: 15%">
                                                        <div class="input-group">
                                                            <span class="input-group-addon">滞在</span>
                                                            <input type="text" min="0" :name="'stay_'+key+'_'+tag_key"
                                                                   class="form-control input-sm"
                                                                   v-model="item.number_user" >
                                                            <span class="input-group-addon">秒以上</span>
                                                        </div>
                                                    </td>
                                                    <td style="width: 5%; text-align: right;">
                                                        タグ
                                                    </td>
                                                    <td style="width: 75%">
                                                        <div class="item-selector">
                                                            <div id="wap_add_tags" style="padding-left: 0">
                                                                <div class=" form-group" style="margin: 0 !important;">
                                                                    <div class="item-selector">
                                                                        <div tabindex="0"
                                                                             class="input-area openable-area multi-area hasitem-area">
                                                                            <span aria-hidden="true"
                                                                                  class="glyphicon input-glyph"
                                                                                  v-on:click="showAddTags(key,tag_key)"
                                                                                  style="top: 2px">

                                                                            </span>
                                                                            <span class="itemlabel"
                                                                                  v-for="(item_name, index) in item.items_add_tag">
                                                                                <span>
                                                                                    @{{ item_name.name }}
                                                                                </span>
                                                                                <i class="glyphicon glyphicon-remove"
                                                                                   v-on:click="clearTags('add',index,tag_key,key)">
                                                                                </i>
                                                                            </span>
                                                                            <div>
                                                                                <input class="searchbox" placeholder=""
                                                                                       disabled>
                                                                            </div>
                                                                        </div>
                                                                        <div class="clearfix"></div>
                                                                        <div class="itempool float-pool"
                                                                             id="itempool_add"
                                                                             style="display: none;text-align: left">
                                                                            <div>
                                                                                <div class="group_selector">
                                                                                    <ul>
                                                                                        <li class="unique-col group_display selected"
                                                                                            id="group_id_0"
                                                                                            v-on:click="showTags(0)">
                                                                                            <i class="glyphicon group-icon"></i>
                                                                                            <span>未分類(@{{ count_default }})</span>
                                                                                        </li>
                                                                                        <li class="unique-col group_display"
                                                                                            v-for="(category, index) in sortedCategories"
                                                                                            v-on:click="showTags(category.id)"
                                                                                            :id="'group_id_'+category.id">
                                                                                            <i class="glyphicon group-icon"></i>
                                                                                            <span>@{{ category.name }}</span>
                                                                                            (@{{ category.count }})
                                                                                        </li>
                                                                                    </ul>
                                                                                </div>
                                                                                <div class="item_selector">
                                                                                    <ul v-if="group_open == 0"
                                                                                        id="tags_0"
                                                                                        class="tags_display"
                                                                                        v-bind:style="group_open==0 ? 'display:block' : 'display: none'">
                                                                                        <li v-for="item in items_default"
                                                                                            v-on:click="addTags(item.id, item.name,key,tag_key)">
                                                                                            <span class="li-itemname"><span>@{{ item.name }}</span></span>
                                                                                        </li>
                                                                                    </ul>
                                                                                    <ul v-for="(tags_item, index) in items_tag"
                                                                                        :id="'tags_'+tags_item.group_id"
                                                                                        class="tags_display"
                                                                                        v-bind:style="group_open!=0 ? 'display:block' : 'display: none'">
                                                                                        <li v-for="(tag_item,index) in tags_item.tags"
                                                                                            v-on:click="addTags(tag_item.id, tag_item.name,key,tag_key)">
                                                                                            <span class="li-itemname"><span>@{{ tag_item.name }}</span></span>
                                                                                        </li>
                                                                                    </ul>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="clearfix"></div>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr id="add-new-row">
                                                    <td colspan="5">
                                                        <span class="btn btn-default btn-sm btn-block add_row"
                                                              v-on:click="addTime(tag_key)">
                                                            <i class="glyphicon glyphicon-plus"></i>
                                                            タグ追加
                                                        </span>
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <span class="btn btn-default btn-sm btn-block" v-on:click="copyBlock">
                                            <i class="glyphicon glyphicon-plus"></i> ページ追加
                                        </span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-10 col-sm-offset-2 ">
                                        <div role="alert" class="alert alert-warning">
                                            ※サイトを訪問してから、システムにタグが反映されるまで時間がかかる場合があります。
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="body" class="col-sm-2 control-label">JavaScriptコード
                                        <span class="label label-default">任意</span>
                                    </label>
                                    <div class="col-sm-10">
                                        <textarea name="body" id="body" v-model="script_command"
                                                  placeholder="console.log(&quot;hello world&quot;);"
                                                  class="form-control">
                                        </textarea>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-offset-2 col-sm-10">
                                        <button class="btn btn-success btn-lg" type="button" v-on:click="update">スクリプト登録
                                        </button>
                                    </div>
                                </div>
                                <hr>
                                <span style="font-weight: bold">スクリプト登録</span>
                                <div class="input-group input-group-sm" style="width: 70%;float: right;">
                                    <input type="text" value="" class="form-control" id="" style="height: 35px;">
                                    <span class="input-group-btn">
                                        <button class="btn btn-default copy-btn" data-clipboard-target="'#action_'" type="button" style="height: 35px;">
                                            <span class="glyphicon glyphicon-copy"></span> コピー
                                        </button>
                                    </span>
                                </div>
                            </div>
                        </form>
                        <br>
                        <br>
                        <br>
                        <a href="{{route('sitescriptHome')}}">戻る</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        var script = null    </script>
    @push('js')
        <script src="/js/vue-paginate.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script src="/plugins/vuejs/vue-resource@1.3.4.js"></script>
        <script>
            var id =