@extends('layout.basic.main')
@push('css')
<script src="/plugins/socket/socket-2.0.4.js"></script>
<script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>

<link rel="stylesheet" href="/chat_files/jquery-ui.min.css">
<link rel="stylesheet" href="/chat_files/font-awesome.min.css">
<link rel="stylesheet" href="/chat_files/emojione.min.css">
<link rel="stylesheet" href="/chat_files/emojionearea.min.css">
<script src="/chat_files/nanoscroller.min.js"></script>
<script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js"></script>
<script src="/chat_files/lodash.min.js"></script>

<script src="/js/vue-paginate.js"></script>

<script>
    var laravel_authorization_data = {
        "media-write": true,
        "tag-write": true,
    };
    function authorize(expression, target) {
        return _.get(laravel_authorization_data, expression, false);
    }
    Vue.prototype.authorize = authorize;

</script>

<style type="text/css">
</style>
<style type="text/css"></style>
<style type="text/css">
    .vue-fine-uploader-file-input {
        display: inline-block
    }

    .vue-fine-uploader-file-input label {
        cursor: pointer
    }

    .vue-fine-uploader-file-input input[type=file] {
        width: 1px;
        height: 1px;
        opacity: 0
    }

    [v-cloak] {
        display: none;
    }

    label:after {
        display: block;
        position: absolute;
        content: "";
        right: 10px;
        top: 0;
        font-family: FontAwesome;
    }

    #tagEditModaltagSelector input[type='checkbox'] {
        top: 5px;
    }

    input[name='single_template_id'] {
        top: 5px;
    }

    .taggroupdiv b {
        font-weight: bold;
    }

    i.glyphicon-folder-open {
        color: #f0ad4e !important;
    }

    #mediaClientEl .modal-content {
        width: 60%;
        margin: auto;
        top: 30px;
    }

    .thumbnail.active {
        border: 4px solid #204d74 !important;
    }

    .selected_foot {
        float: right;
        width: 110px;
    }

    span.btn, span.btn a {
        margin: 0;
    }

    .timepicker-orient-top td {
        text-align: center !important;
    }

    .timepicker-orient-top td a {
        text-align: center !important;
    }

    .timepicker-orient-top input {
        width: 50px !important;
    }

    .nano > .nano-pane > .nano-slider {
        margin-left: 30px;
        float: left;
        height: 300px;
        width: 65px;
        background: #F5F5F5;
        overflow-y: scroll;
        margin-bottom: 25px;
    }

    .nano-content {
        overflow-y: scroll !important;
    }

    #detail .nano-wrapper {
        overflow-y: scroll;
    }

    .nano > .nano-pane > .nano-pane::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        border-radius: 10px;
        background-color: #F5F5F5;
    }

    .nano > .nano-pane > .nano-pane::-webkit-scrollbar {
        width: 12px;
        background-color: #F5F5F5;
    }

    .nano > .nano-pane > .nano-pane::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
        background-color: #555;
    }

    .nano-inner::-webkit-scrollbar-thumb:hover {
        background: red;
    }

    .nano-inner {
        height: 100% !important;
        overflow-y: scroll !important;
        overflow-x: hidden !important;
    }

    .nano-wrapper {
        overflow: hidden !important;
    }

    .nano-content {
        overflow: hidden !important;
        right: 2px !important;
    }

    .nano-inner:hover .nano-content {
        overflow: hidden !important;
        right: -5px !important;
    }

    .nano-pane {
        display: none !important;
    }

    .user-message.me {
        margin-right: -10px !important;
        right: -5px;
    }

    .tag-container {
        word-break: break-word;
    }

    .loadBtn {
        bottom: 0px;
        position: absolute;
        display: none !important;
    }

    #tab-store li:hover {
        cursor: pointer;
    }

    .has_emoji {
        word-break: break-all;
    }

    .doll-box li img {
        max-width: 30px;
        border-radius: 50%;
    }

    .doll-box ul.list-group li {
        margin-bottom: 20px;
    }

    #list-users {
        height: 100%;
        overflow-y: auto;
    }
</style>

<style type="text/css"></style>
<style type="text/css">li.disabled > span[data-v-0448c604] {
        cursor: default !important
    }

    .btn.menuBtn img, .stickerBtn img {
        position: relative;
        top: 13px;
    }

    .glyphicon-send {
        position: relative;
        top: 13px;
    }

    #visual #detail #visual-sender .senderEdit {
        margin-right: 52px;
        margin-left: 90px;
    }

    #queryName {
        background-color: #eee !important;
        width: 100%;
    }

    #sizing-addon2 {
        background: #eee !important;
    }

    #visual #list .search-inputs .input-group-btn button:hover {
        background-color: #f9f9f9;
    }

    .glyphicon-search:hover {
        cursor: pointer;
    }

    #visual #list .search-inputs .input-group-btn button {
        height: 34px;
    }

    .search_tags {
        background-color: #f0ad4e !important;
    }

    .message-body {
        max-width: 50% !important;
        word-break: break-word;
    }

    #message-modal-body .button-balloon {
        margin: auto;
    }

    #message-modal-body .message-body {
        margin-left: auto;
        margin-right: 1em;
        float: right;
    }

    #message-modal-body .button-balloon > p {
        padding: 1em;
        margin-bottom: 0;
        background: white;
        margin-bottom: 0;
    }

    #message-modal-body .button-balloon > p b {
        display: block;
    }

    #message-modal-body .button-balloon-img {
        height: 11.26em;
        background-size: cover;
        background-position: center center;
        border-top-left-radius: 0.5em;
        border-top-right-radius: 0.5em;

    }

    #message-modal-body .button-balloon .button-actions {
        border-top: 0px solid #ccc;
        color: #3e6292;
    }

    #message-modal-body .button-balloon .button-actions .button-action {
        width: 100%;
        display: block;
        text-align: center;
        padding: 1em;
        cursor: pointer;
        background: white;
    }

    #message-modal-body b {
        font-weight: bold;
    }

    #status-rec {
        border-radius: 5px 5px;
        margin-left: 10px;
        color: white;
        font-weight: bold;
        background: #67c6ef;
        padding: 5px 10px;
    }

    #list-buttons {
        border: 1px solid #ccc;
        border-radius: 5px;
    }

    .list-button {
        padding: 10px 15px;
        margin-bottom: 1px;
    }

    .label-type {
        padding: 4px 15px;
        background-color: #272828;
        border-radius: 4px;
        color: white;
        margin-right: 3px;

    }

    .listitems .thumbnail:hover {
        margin: 0px !important;
        padding: 0 !important;

    }

    .modal-backdrop {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1040;
        background-color: #000;
    }

    .modal-backdrop.in {
        display: block;
    }

    #templateModal .nano-pane {
        display: none !important;
    }

    div:focus, div:visited {
        outline: none !important;
    }

    .taggroupdiv {
        word-break: break-word;
    }
</style>
@endpush
@section('content')
    <section>
        <div class="container-fluid pc-body">
            <div class="row">
                <div class="col-xs-12 col-sm-12">
                    <div class="row">
                        <div class="col-sm-12">
                        </div>
                        <div class="row">
                            <div class="col-sm-12">
                                <div id="visual">
                                    <ul class="nav nav-tabs visual-selector">
                                        <li role="presentation" class=""><a><!----> <i
                                                        class="glyphicon glyphicon-user"></i>
                                                <span class="pill-label">リスト</span></a></li>
                                        <li role="presentation" class="active"><a><i
                                                        class="glyphicon glyphicon-comment"></i>
                                                <span class="pill-label">メッセージ</span></a></li>
                                        <li role="presentation" class=""><a><i class="glyphicon glyphicon-list-alt"></i>
                                                <span
                                                        class="pill-label">情報</span></a></li>
                                    </ul>
                                    <div class="visual-main detail" v-cloak>
                                        <div id="list" class="visual-list">
                                            <div class="input-group search-inputs"><span
                                                        class="input-group-btn deepsearch-toggler">
                                                </span>
                                                <label id="sizing-addon2" for="queryName" class="input-group-addon"><i
                                                            class="glyphicon glyphicon-search"></i></label>
                                                <input type="text" id="queryName" class="form-control" v-model="search">
                                                <span class="input-group-btn">
                                                    <button v-show="search.length>0" v-on:click="removeSearch"
                                                            type="button"
                                                            class="btn btn-default"><i
                                                                class="glyphicon glyphicon-remove"></i></button></span>
                                            </div>
                                            <div class="user-list nano-wrapper">
                                                @include('layout.screen_chat.left-sidebar')
                                            </div>
                                            <div class="list-footer"></div>
                                        </div>
                                        <div id="doll" class="visual-doll">
                                            <div class="nano-wrapper" v-show="current_friend!=null && current_friend.length != 0">
                                                <div class="nano has-scrollbar">
                                                    <div class="nano-content" tabindex="0" style="right: -30px;">
                                                        <div class="nano-inner">
                                                            <div class="doll">
                                                                <div class="doll-user">
                                                                    <img :src="(current_friend.avatar_url!=null)?current_friend.avatar_url:'/images/blank_avatar.png'" onerror="this.onerror=null;this.src='/images/blank_avatar.png'"
                                                                         class="doll-icon">
                                                                    <div class="doll-name has_emoji">@{{current_friend.conversation_name}}</div>
                                                                    <div class="doll-status has_emoji">@{{current_friend.status_message}}</div>
                                                                    <div class="doll-from"><i
                                                                                class="glyphicon glyphicon-user"></i>
                                                                        @{{ time_followed }} ～
                                                                    </div>

                                                                    <hr>
                                                                    @include('layout.screen_chat.select_confirmed')
                                                                </div>
                                                                <hr>
                                                                <div>
                                                                    <div class="doll-head">
                                                                        <span class="btn btn-xs btn-default pull-right"
                                                                              data-toggle="modal"
                                                                              data-target="#memoEdit"><i
                                                                                    class="glyphicon glyphicon-edit"></i> 編集</span>
                                                                        グループ名
                                                                    </div>
                                                                    <div class="doll-box" style="white-space: pre-wrap;"
                                                                         >@{{ current_friend.conversation_name }}</div>

                                                                    <div class="doll-head">
                                                                        グループ名
                                                                    </div>
                                                                    <div class="doll-box" id="list-users"
                                                                         style="white-space: pre-wrap;">
                                                                        <ul class="list-group">
                                                                            <li v-for="(item,key) in member_list">
                                                                                <img :src="(item.avatar_url==null||item.avatar_url=='')?'/images/blank_avatar.png':item.avatar_url" onerror="this.onerror=null;this.src='/images/blank_avatar.png'"
                                                                                     class="visual-list-icon" alt="">
                                                                                <span class="visual-list-name">
                                                                                    <span>@{{ item.name }}</span>
                                                                                </span>
                                                                                <span v-if="item.is_blocked == 0" class="btn btn-xs btn-danger" v-on:click="blockUserGroup(item.id, 1)">ユーザー削除</span>
                                                                                <span v-else="item.is_blocked == 1" class="btn btn-xs btn-primary" v-on:click="blockUserGroup(item.id, 0)">解除する</span>
                                                                            </li>
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                                <div class="doll-wrap"><span
                                                                            class="btn btn-block btn-lg btn-default backtodetail">メッセージに戻る</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="nano-pane" style="display: block;">
                                                        <div class="nano-slider"
                                                             style="height: 775px; transform: translate(0px, 0px);"></div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="doll-footer"></div>
                                        </div>
                                        @include('layout.screen_chat.detail_content')
                                    </div>

                                </div>

                                <span id="modalCaller" style="display: none;" type="button" data-toggle="modal"
                                      data-target="#messageModal"></span>
                                <script src="/chat_files/jquery.photoswipe-global.js"></script>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <!-- Modal -->
            <div class="modal fade message-modal message-show" id="messageModal" tabindex="-1" role="dialog"
                 aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header" id="message-modal-header" style="display:block;">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                        aria-hidden="true">×</span></button>
                            <a id="message-modal-header-link" target="_blank">
                                <img src="" alt="" id="message-modal-face">
                                <h4 class="modal-title has_emoji" id="message-model-name"
                                    style="line-height:34px!important"></h4>
                            </a>
                            <span id="status-rec"></span>
                        </div>
                        <div class="modal-body modal-body-main" style="display: block">
                            <div id="message-modal-body" class="message-area">

                            </div>
                        </div>
                        <div class="modal-body" id="message-modal-analytics">
                            <ul id="list-buttons" v-for="(item,k) in items">
                                <li class="list-button"><b>@{{ item.label }}</b> <br>
                                    <span v-html="postBackType(item.post_back,item.data)"></span>
                                </li>
                            </ul>
                        </div>
                        <div class="modal-footer">
                            <div class="row">
                                <div class="col-sm-3" style="display: none;">
                                            <span class="dropup" id="message_modal_labeler">
                         <button class="btn btn-primary btn-block dropdown-toggle" type="button" id="dropdownLabelModal"
                                 data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                             対応マーク
                             <span class="caret"></span>
                         </button>
                         <ul class="dropdown-menu" aria-labelledby="dropdownLabelModal" id="dropdownLabelModalMenu">

                         </ul>
                    </span>
                                </div>
                                <div class="col-sm-12">
                                    <button type="button" class="btn btn-default btn-block" data-dismiss="modal">
                                        <i class="glyphicon glyphicon-remove"></i> 閉じる
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <script>
            </script>
            <!-- Modal -->
            <div class="modal fade" id="templateModal" tabindex="-1" role="dialog" aria-labelledby="templateModal">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                        aria-hidden="true">×</span></button>
                            <h4 class="modal-title" id="myModalLabel">
                                テンプレート選択
                                <small class="hidden-xs">送信先：<span id="templateModalToName">@{{ username }}</span>
                                </small>
                            </h4>
                        </div>
                        <div class="modal-body modal-body-tag-selector">
                            <div class="tag-selector">
                                <div class="row" id="single_template_idSelector">
                                    <div class="col-sm-5 twin-selector-left">
                                        <div class="group-selector">
                                            <div style="height: 180px;" class="nano-parent">
                                                <div class="nano nano-bar-force has-scrollbar">
                                                    <div class="nano-content" tabindex="0" style="right: -30px;">
                                                        <div class="nano-inner">

                                                            <a v-for="(category,key) in categories"
                                                               class="collapsed collapse-opener" role="button"
                                                               :id="'template_'+category.id"
                                                               v-on:click="template(key,category.id)"
                                                               data-toggle="collapse"
                                                               aria-expanded="false"
                                                               data-accordion="tag_editor_single_template_id"
                                                               :aria-controls="'single_template_idCollapse'+category.id">
                                                                <i class="glyphicon "
                                                                   :class="(category_id==category.id)?'glyphicon-folder-open':'glyphicon-folder-collapse'"></i> @{{ category.name }}
                                                            </a>
                                                        </div>
                                                    </div>
                                                    <div class="nano-pane" style="display: none;">
                                                        <div class="nano-slider"
                                                             style="height: 20px; transform: translate(0px, 0px);"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-7 twin-selector-right">
                                        <div class="collapse fade fade-flash in"
                                             data-accordion="tag_editor_single_template_id">
                                            <p style="text-align: center;font-weight: bold;margin-top: 0.5em;"
                                               v-show="category_id!=null">
                                                @{{ title }}</p>
                                        </div>

                                        <div style="height: 100px;" class="nano-parent">
                                            <div class="nano has-scrollbar" id="single_template_iditemradiopart">
                                                <div class="nano-content" tabindex="0" style="right: -30px;">
                                                    <div class="nano-inner">
                                                        <div class="tag-container">
                                                            <div class="radio" v-for="(template,key) in templates_item">
                                                                <label>

                                                                    <input type="radio" name="single_template_id"
                                                                           :id="'template_'+template.id"
                                                                           v-model="picked"
                                                                           :value="key"
                                                                           data-tagname="template.name">@{{ template.name }}
                                                                </label>
                                                            </div>

                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="nano-pane" style="display: none;">
                                                    <div class="nano-slider"
                                                         style="height: 20px; transform: translate(0px, 0px);"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="selected-tag" id="single_template_idCollapseSelected">
                                            選択中：<span>@{{ category_name }}</span>
                                        </div>
                                        <div class="row" style="margin-bottom: 0.5em;margin-top: 0.5em;">
                                            <div class="col-xs-6">
                                                <a id="single_template_idpreviewOpener"
                                                   class="btn btn-xs btn-default btn-block"
                                                   :disabled="(category_name.length==0)" v-on:click="detailTemplate()">プレビュー</a>
                                            </div>
                                            <div class="col-xs-6">
                                                <a
                                                        id="single_template_idmessageTester"
                                                        class="btn btn-xs btn-primary btn-block"
                                                        :disabled="(category_name.length==0)"
                                                        v-on:click="send_for_tester">テスト</a>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                                <span id="single_template_idModalCaller" style="display: none;" data-type="egg"
                                      type="button"
                                      data-toggle="modal" data-target="#messageModal"></span>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-danger pull-left" data-dismiss="modal">閉じる</button>
                            <button :disabled="(picked==null)" type="button" id="template_to_send"
                                    class="btn btn-success" v-on:click="sendTemplate('real')">送信する
                            </button>

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

            <!-- Modal -->
            <div class="modal fade" id="memoEdit" tabindex="-1" role="dialog" aria-labelledby="memoEditModal">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                        aria-hidden="true">×</span></button>
                            <h4 class="modal-title" id="myModalLabel">
                                グループ名
                                <small class="hidden-xs">対象：<span id="memoEditModalToName">@{{ username }}</span>
                                </small>
                            </h4>
                        </div>
                        <div class="modal-body modal-body-tag-selector">
                            <textarea name="memoEditModalMemo" id="memoEditModalMemo" v-model="username" class="form-control" rows="4"></textarea>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-danger pull-left" v-on:click="cancelMemo"
                                    data-dismiss="modal">閉じる
                            </button>
                            <button type="button" id="memoedit_to_send" class="btn btn-success" v-on:click="saveMemo">
                                更新する
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="reviewContent" tabindex="-1" role="dialog">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                        aria-hidden="true">×</span></button>
                        </div>
                        <div class="modal-main-content text-center"></div>
                    </div>
                </div>
            </div>


            @include('layout.screen_chat.media_modal')
            <span data-toggle="modal" data-target="#mediaClientV1" data-type="photo" data-callback="mediaSelected"
                  id="photoclientOpener" data-title="画像送信:tokunaga">
    </span>
            <span data-toggle="modal" data-target="#mediaClientV1" data-type="audio" data-callback="mediaSelected"
                  id="audioclientOpener">
    </span>
            <span data-toggle="modal" data-target="#mediaClientV1" data-type="video" data-callback="mediaSelected"
                  id="videoclientOpener" data-title="動画送信:tokunaga">
    </span>
            <script src="/chat_files/emojione.js?v={{config("sns-line.version")}}"></script>
            <script src="/chat_files/emojionearea.js?v={{config("sns-line.version")}}"></script>
        </div>
        <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="pswp__bg"></div>
            <div class="pswp__scroll-wrap">
                <div class="pswp__container">
                    <div class="pswp__item"></div>
                    <div class="pswp__item"></div>
                    <div class="pswp__item"></div>
                </div>
                <div class="pswp__ui pswp__ui--hidden">
                    <div class="pswp__top-bar">
                        <div class="pswp__counter"></div>
                        <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
                        <button class="pswp__button pswp__button--share" title="Share"></button>
                        <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
                        <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
                        <div class="pswp__preloader">
                            <div class="pswp__preloader__icn">
                                <div class="pswp__preloader__cut">
                                    <div class="pswp__preloader__donut"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                        <div class="pswp__share-tooltip"></div>
                    </div>
                    <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
                    <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
                    <div class="pswp__caption">
                        <div class="pswp__caption__center"></div>
                    </div>
                </div>
            </div>
        </div>
        <div role="log" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible">
            <div style="display: none;">友だちリストの確認や検索、友だちの詳細情報を確認することが出来ます</div>
            <div style="display: none;">友だちリストの確認や検索、友だちの詳細情報を確認することが出来ます</div>
            <div>友だちリストの確認や検索、友だちの詳細情報を確認することが出来ます</div>
        </div>
        <div role="log" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible"></div>
        <div role="log" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible">
            <div>友だちと個別にトークを行うことが出来ます。</div>
        </div>
        <div role="log" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible">
            <div>あらかじめ登録しておいた複数のメッセージを、決められたタイミングに、自動で配信することができます。</div>
        </div>
        <div role="log" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible"></div>
        <div role="log" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible"></div>
        <div role="log" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible">
            <div>1：1トーク・ステップ配信・一斉配信・自動返信などで使用できるテンプレートを登録・管理することが出来ます</div>
        </div>
        <div role="log" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible"></div>
        <div role="log" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible"></div>
        <div role="log" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible">
            <div style="display: none;">友だちに追加で登録する情報を管理することができます</div>
            <div style="display: none;">友だちに追加で登録する情報を管理することができます</div>
            <div style="display: none;">友だちに追加で登録する情報を管理することができます</div>
            <div style="display: none;">友だちに追加で登録する情報を管理することができます</div>
            <div>友だちに追加で登録する情報を管理することができます</div>
        </div>
        <div role="log" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible">
            <div>保存したカスタム検索条件を管理することが出来ます</div>
        </div>
        <div role="log" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible">
            <div>リンクをクリックした人数を算出し、クリック率を測定することが出来ます</div>
        </div>
        <div role="log" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible">
            <div>コードをサイトに埋め込むことによってそのサイトを訪れたユーザーに自動でタグ付けを行ったり、テンプレートを送信することができます</div>
        </div>
        <div role="log" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible"></div>
        <div role="log" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible"></div>
        <div role="log" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible">
            <div style="display: none;">アカウントの設定を確認することが出来ます</div>
            <div>アカウントの設定を確認することが出来ます</div>
        </div>
        <div role="log" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible">
            <div style="display: none;">アカウントにログインできるユーザーの権限を管理することができます。ユーザーの追加もこちらから行えます</div>
            <div style="display: none;">アカウントにログインできるユーザーの権限を管理することができます。ユーザーの追加もこちらから行えます</div>
            <div>アカウントにログインできるユーザーの権限を管理することができます。ユーザーの追加もこちらから行えます</div>
        </div>
        <div role="log" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible">
            <div style="display: none;">タグ・ステップ・テンプレートなどの設定を他のアカウントに引き継ぐことが出来ます</div>
            <div style="display: none;">タグ・ステップ・テンプレートなどの設定を他のアカウントに引き継ぐことが出来ます</div>
            <div>タグ・ステップ・テンプレートなどの設定を他のアカウントに引き継ぐことが出来ます</div>
        </div>
        <div role="log" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible">
            <div style="display: none;">ユーザーID、情報、パスワード等の変更、またアカウントの切り替えを行うことが出来ます</div>
            <div style="display: none;">ユーザーID、情報、パスワード等の変更、またアカウントの切り替えを行うことが出来ます</div>
            <div style="display: none;">ユーザーID、情報、パスワード等の変更、またアカウントの切り替えを行うことが出来ます</div>
            <div style="display: none;">ユーザーID、情報、パスワード等の変更、またアカウントの切り替えを行うことが出来ます</div>
            <div style="display: none;">ユーザーID、情報、パスワード等の変更、またアカウントの切り替えを行うことが出来ます</div>
            <div>ユーザーID、情報、パスワード等の変更、またアカウントの切り替えを行うことが出来ます</div>
        </div>
    </section>
@endsection
@push('js')
<script src="/plugins/vuejs/vue-resource@1.3.4.js"></script>
<script src="{{asset('/chat_files/bootstrap-timepicker.js')}}"></script>
<script>
    $(function () {
        $('#c_step_to_time').timepicker({
            minuteStep: 1,
            template: 'dropdown',
            appendWidgetTo: 'body',
            showSeconds: false,
//            showMeridian:true,
            secondStep: 1,
            defaultTime: '00:00 AM',
            showMeridian: false

        });
    });
</script>
<script type="text/javascript">
    var port = location.protocol === 'https:' ? {{ env('PORT_SOCKET') }} : 3442;
    var socket = io.connect("{{env('NODE_SERVER')}}" + ":" + port, {secure: true});
    var my_id =