@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" v-cloak>
            <div class="row">
                <div class="col-sm-12">
                </div>
                <div class="row">
                    <div class="col-sm-12 sub">
                        <h2 style="font-size: 18px">スクリプト登録</h2>
                        <br>
                        <form id="formSave">
                            {{ csrf_field() }}
                            <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"
                                               id="script_name"
                                               name="script_name"
                                               class="form-control"
                                               data-vv-as="管理名"
                                               v-validate="{required:true, max: 255}">
                                        <br>
                                        <span class="text-danger" v-show="errors.has('script_name')">@{{ errors.first('script_name') }}</span>
                                    </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"
                                                                   class="form-control"
                                                                   :data-vv-as="'URL'+(tag_key + 1)"
                                                                   :name="'url_'+tag_key"
                                                                   v-validate="{required:true, max: 255, url:true, url_duplicate: tag_item, url_duplicate: block_items}"
                                                                   class="url_site_script">
                                                            <span class="input-group-addon">が含まれるページ</span></div>
                                                        <span class="text-danger" v-show="errors.has('url_'+tag_key)">@{{ errors.first('url_'+tag_key) }}</span>
                                                    </div>
                                                    <div class="col-sm-4 text-right" v-show="block_items.length == 2">
                                                        <span class="panel-heading-btn panel-heading-btn-default">
                                                            <span class="panel-heading-btn" v-on:click="removeBlock(tag_key)">
                                                                <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="number" min="0" :name="'stay_'+key+'_'+tag_key"
                                                                   class="form-control input-sm"
                                                                   style="min-width: 50px;"
                                                                   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>
                                                                            <input name="add_tag_ids" type="hidden"
                                                                                   :value="add_tag_ids"
                                                                                   id="add_tag_ids">
                                                                        </div>
                                                                        <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" v-show="tag_item.tag_items.length == 1">
                                                    <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 v-show="block_items.length == 1" 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="renderScripLink"
                                              readonly
                                              placeholder="console.log(&quot;hello world&quot;);" class="form-control">
                                    </textarea>
                                    </div>
                                </div>
                                <div class="form-group" v-if="update_flg == 'false'">
                                    <div class="col-sm-offset-2 col-sm-10">
                                        <button class="btn btn-success btn-lg" type="button"
                                                v-on:click="storeSiteScript()">スクリプト登録
                                        </button>
                                    </div>
                                </div>
                                <div class="form-group" v-if="update_flg == 'true'">
                                    <div class="col-sm-offset-2 col-sm-10">
                                        <button class="btn btn-success btn-lg" type="button"
                                                v-on:click="saveSiteScript('{!! Request::route('id') !!}')">スクリプト登録
                                        </button>
                                    </div>
                                </div>
                                <div>
                                    <hr>
                                </div>
                            </div>
                        </form>

                        <br>
                        <br>
                        <br>
                        <a href="{{route('sitescriptHome')}}">戻る</a>
                    </div>
                </div>

            </div>
        </div>
    </div>