@extends('layout.basic.main')
@push('css')
    <link rel="stylesheet" href="/css/tag/style.css?v={{config("sns-line.version")}}" xmlns:v-on="http://www.w3.org/1999/xhtml">
    <link rel="stylesheet" href="/css/url/style.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-rqn26AG5Pj86AF4SO72RK5fyefcQ/x32DNQfChxWvbXIyXFePlEktwD18fEz+kQU" crossorigin="anonymous">
    <style>
        .tab_folder{
            padding-bottom: 10px;
            margin-top: 7px;
            font-size: 18px;
            display: flex;
            align-items: baseline;
            justify-content: space-between;
        }

        .popup {
            position: relative;
            display: inline-block;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        /* The actual popup */
        .popup .popuptext {
            visibility: hidden;
            width: 233px;
            background-color: white;
            color: black;
            border-radius: 6px;
            border: 1px solid #ddd;
            padding: 10px;
            position: absolute;
            z-index: 9999;
            font-size: 14px;
            top: 125%;
            right: -159%;
            margin-left: -80px;
            box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
        }
        .popup .show {
            visibility: visible;
        }
        .btn-cus-a{
            padding: 9px 27px;
            border: 0;
            border-radius: 4px;
            color: white;
            font-weight: bold;
            cursor: pointer;
        }
        .btn-new-group{
            background-color: #0ebeeb !important;
        }
        .btn-cus-a:hover{
            color: #FFFFFF;
        }
        .col-btn-primary{
            background-color: rgb(87, 153, 219);
        ;
        }
        .box-btn-center{
            display: flex;
            align-items: baseline;
            justify-content: space-between;
        }
        #item_vuelist_url .tag_group.active{
            background-color: #f6f6f6 !important;
        }
        .list-i-fol{
            padding: unset;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        #nano-inner-group .tag_group {
            padding: 7px;
            border: 1px solid #F2F2F2;
            border-radius: 4px;
            margin-bottom: 7px;
        }
        #nano-inner-group .tag_group:hover {
            background-color: #f6f6f6;
        }
        .btn-info {
            display: block;
            border-radius: 5px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            padding: 5px 10px;
            font-size: 85%;
            background: #4A96B2;
            color: #fff;
            margin-top: 5px;
            border: 0
        }



        #nano-inner-group {
            background-color: #fff
        }

        #nano-inner-group .tag_group {
            /*padding: 5px;*/
            /*border-bottom: solid 1px #dedddd;*/
            margin-left: 2px;
        }
        .btn-group:hover .action-broadcast{
            opacity: 1;
            visibility: visible;
            z-index: 100;
            display: block !important;
        }
        .ic-menu{
            font-size: 25px;
            cursor: pointer
        }
        .focus-pointer {
            cursor: pointer;
            padding: 5px;
        }

        .focus-pointer:hover{
            background-color: #f6f6f6  !important; ;
        }
        .fade {
            transform: unset !important;
            animation: unset !important;
        }
        .fade.in {
            transform: unset !important;
            animation: unset !important;
        }
        .modal-content {
            -webkit-animation-name: unset !important;
            -webkit-animation-duration: 0.6s;
            animation-name: unset !important; ;
            animation-duration: unset !important;
        }
        .modal.fade .modal-dialog {
            -webkit-transition: unset !important;
            transition: unset !important;
            -webkit-transform:unset !important;
            -ms-transform: unset !important;
            -o-transform: unset !important;
            transform: unset !important;
        }
        .modal-header{
            border-bottom: unset !important;
        }
        .tag_left i {
            color: rgba(137,143,144,1) !important;
            cursor: pointer;
        }
        #item_vuelist_url .box-ic-sort i{
            line-height: 12px;
            color: rgba(137,143,144,1);
        }
        .box-ic-sort i{
            line-height: 15px;
            color: rgba(137,143,144,1);
            font-size: 24px;
        }
        .mt-item-fol{
            margin-top: 10px;
            display: flex;
            align-items: center;
        }
        #item_vuelist_url .btn-choise-folder {
            background: rgba(8,191,90,1);
            width: 140px;
            font-size: 18px !important;
            font-weight: bold;
            border-radius: 50px !important;
            margin-bottom: 25px;
            margin-top: 10px;
        }
        #item_vuelist_url .tag_left ul li{
            padding: 4px 10px;
            font-size: 13px;
            border: unset;
        }
        #item_vuelist_url th{
            padding: 9px;
            font-weight: bold;
            background-color: #08BF5A !important;
            /*border: none!important;*/
        }
        #item_vuelist_url .tag_right .btngroup{
            margin-bottom: 5px;
        }
        .btn{
            font-weight: bold;
        }
        .btn a{
            font-weight: bold;
        }
    </style>
    <style>
        table {
            margin-bottom: 40px !important;
        }

        #errorURL {
            color: red;
            font-weight: bold;
        }

        .grn {
            padding: 5px 120px;
            margin-top: 4px;
        }

        .tag_left .btn {
            width: auto;
        }

        .btn a.ylw {
            padding: 7px;
        }

        .table tr td {
            max-width: 100% !important;
            word-break: break-all;
        }

        #item_vuelist_url {
        }

        .tag_right td .btn {
            margin: 0;
        }

        .choice {
            height: 34px;
        }

        .btn-primary {
            color: #fff !important;
            background-color: #337ab7 !important;
            border-color: #2e6da4 !important;
        }

        table td .btn:first-child {
            margin-bottom: 0px;
        }

        .tag_right td .btn {
            width: 100%;
        }

        .tag_separate {
             margin-top: 0;
        }


        /*.active {*/
        /*    background-color: #fbda7b !important;*/
        /*}*/
    </style>
@endpush
@section('content')
    <article class="">
        <section class="taglist urlclick " id="item_vuelist_url" v-cloak>
            <h2 style="font-size: 20px; color: #222222; font-weight: bold; padding: 10px 10px 10px 0">URL分析</h2>
            <p style="margin-bottom: 15px; font-size: 15px; color: #222222">登録したURLをクリックした人数とそのクリック率を測定が可能です。<br>
                どの友だちが・いつクリックしたのかも確認することができます。</p>
            {{--            <form action="{{route('hiddenURL')}}" method="post">--}}
            {{--                {{csrf_field()}}--}}
            {{--                <ul>--}}
            {{--                    @foreach($get_urls as $get_url)--}}
            {{--                        <li style="word-wrap: break-word;margin-top: 15px;">--}}
            {{--                            {{$get_url->url}}<a href="{{url('basic/url/detail/'.$get_url->id)}}"--}}
            {{--                                                style="border: 1px solid #bbb;padding: 3px 5px;margin-left: 10px;border-radius: 6px;">詳細を開く</a>--}}
            {{--                        </li>--}}
            {{--                    @endforeach--}}
            {{--                </ul>--}}
            {{--                @if(!empty($get_urls))--}}
            {{--                    <div class="rightcontents" style="float: right">--}}
            {{--                        <div class="btn">--}}
            {{--                            <button class="btn btn-danger" name="hidden_url" type="submit">--}}
            {{--                                --}}{{--スクリプト設定--}}
            {{--                                非表示--}}
            {{--                            </button>--}}
            {{--                        </div>--}}
            {{--                    </div>--}}
            {{--                @endif--}}
            {{--            </form>--}}
            @if(session('error'))
                <div class="alert alert-error alert-dismissible" style="color: red">
                    {{session('error')}}
                </div>
            @endif
            <div class="tag_separate">
                <div class="tag_left" style="width: 20%;margin-left: 10px">
                    <div class="row">
                        <div class="col-md-12" style="padding-right: 0">
                            <div class="tab_folder  " >
                                <span style="font-weight: bold">フォルダ</span>
                                <div>
                                    <div class="popup">

                                        <svg v-on:click="showAddGroupPopup" xmlns="http://www.w3.org/2000/svg"
                                             viewBox="0 0 512 512" style="width: 20px; fill: rgba(137,143,144,1) !important;position: absolute;right: 7px;top: -18px;"><path d="M232 344V280H168C154.7 280 144 269.3 144 256C144 242.7 154.7 232 168 232H232V168C232 154.7 242.7 144 256 144C269.3 144 280 154.7 280 168V232H344C357.3 232 368 242.7 368 256C368 269.3 357.3 280 344 280H280V344C280 357.3 269.3 368 256 368C242.7 368 232 357.3 232 344zM512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 48C141.1 48 48 141.1 48 256C48 370.9 141.1 464 256 464C370.9 464 464 370.9 464 256C464 141.1 370.9 48 256 48z"/></svg>
                                        {{--                                        <i class="fa-regular fa-circle-plus"  ></i>--}}
                                        <div class="popuptext" id="myPopup">
                                            <span>フォルダ名</span>
                                            <div style="padding: 7px 0; display: flex; align-items: flex-end">
                                                <input type="text" id="cat_txt" v-model="name_group"
                                                       style="width: 79%;height: 32px;padding-left: 3px;border: 1px solid #bbb;border-radius: 4px">
                                                <span style="font-size: 12px;margin-left: 2px;">@{{ countTex(name_group) }}/15</span>
                                            </div>
                                            <div class="text-center" style="display: flex;align-items: center;justify-content: space-between;">
                                                <button class="btn btn-success btn-sm"
                                                        style="width: 82px;background: #08BF5A;"
                                                        v-on:click="addGroup()">決定</button>
                                                <button class="btn btn-secondary btn-sm" style="background-color: rgb(125, 145, 149);color: white;"
                                                        v-on:click="closeAddPopup">キャンセル</button>

                                            </div>

                                        </div>
                                    </div>
                                    <i class="fas fa-sort-amount-down-alt"  data-toggle='modal'
                                       data-target='#modalSortFolder' v-on:click="showModalSortFolder()"></i>
                                </div>

                            </div>

                        </div>

                    </div>
                    <div class="nano-inner" id="nano-inner-group" style="margin-top: 0">
                        <div class="tag_group row"
                             id="group_0"
                             data-id="0"
                             style="padding: 10px 7px"
                             v-bind:class="(group_open == 0)?'active':'folder-close'">
                            <div v-on:click="showGroup(0)" class="display_category row" style="margin-left: 1px;">
                                <div class="col-md-11 list-i-fol" >
                                    <div>未分類 (@{{ count_default }})</div>
                                    <div class="btn-group"  style="padding: unset;">
                                        {{--                                        <i class="far fa-ellipsis-h ic-menu" ></i>--}}
                                    </div>
                                </div>

                            </div>
                        </div>

                        <div v-for="(category, index) in sortedCategories" class="tag_group row"
                             :id="'group_'+category.id"
                             :data-id="category.id"
                             v-bind:class="(category.id == group_open)?'active':'folder-close'">
                            <div v-on:click="showGroup(category.id)" class="display_category  row" style="margin-left: 1px;">
                                <div class="col-md-11 list-i-fol" >
                                    <div>
                                        @{{ category.name }} (@{{ category.count }})
                                    </div>
                                    <div class="btn-group" style="padding: unset;" :style="(category.id == group_open)?'display:block':'display:none'">
                                        <i class="far fa-ellipsis-h ic-menu" ></i>
                                        <ul class="dropdown-menu action-broadcast"
                                            style="min-width: 113px;left: -89px;top: 0px;">
                                            <li class="focus-pointer" v-on:click="editGroup(category)">
                                                <div style="cursor: pointer">
                                                    フォルダ名変更
                                                </div>
                                            </li>
                                            <li class="focus-pointer" v-on:click="deleteGroup(category.id)">
                                                <div style="cursor: pointer">
                                                    フォルダ削除
                                                </div>
                                            </li>
                                        </ul>
                                    </div>

                                </div>

                            </div>


                        </div>
                    </div>

{{--                    <div class="add_group btn btn-sm btn-success">--}}
{{--                        <i class="glyphicon glyphicon-plus"></i> 新しいフォルダー--}}
{{--                    </div>--}}
{{--                    <ul>--}}
{{--                        <li class="tag_group folder-close hidden row" id="showAddGroup">--}}
{{--                            <i class="glyphicon glyphicon-folder-collapse col-md-1"--}}
{{--                               style="margin-right: 10px;padding: unset"></i>--}}
{{--                            <input type="text" id="cat_txt" name="cat_txt"--}}
{{--                                   style="width: 60%;height: 25px;" placeholder="新しいフォルダー名"--}}
{{--                                   autofocus onkeyup="showSubmitBtn()" class="col-md-8">--}}
{{--                            <input type="button" class="btn btn-default btn-add-group col-md-2"--}}
{{--                                   value="決定 " style="width: 19%;margin-left:5px;padding:1px;display: none"--}}
{{--                                   v-on:click="addGroup()">--}}
{{--                        </li>--}}
{{--                    </ul>--}}
{{--                    <ul>--}}
{{--                        <li class="tag_group row" id="group_0" data-id="0"--}}
{{--                            v-bind:class="(group_open == 0)?'active':'folder-close'" style="margin-right: -15px;margin-left: -15px">--}}
{{--                                <span v-on:click="showGroup(0)" class="display_category">--}}
{{--                                    <span class="glyphicon glyphicon-folder-collapse" style="margin-right: 10px"></span>未分類(@{{ count_default }})--}}
{{--                                </span>--}}
{{--                        </li>--}}
{{--                        <li v-for="(category,index) in groups"--}}
{{--                            :id="'group_'+category.id"--}}
{{--                            :data-id="category.id" :data-name="category.name"--}}
{{--                            v-bind:class="(category.id == group_open)?'active':'folder-close'"--}}
{{--                            class="tag_group row">--}}
{{--                                    <div v-on:click="showGroup(category.id)"--}}
{{--                                          class="display_category col-md-10" style="padding:unset">--}}
{{--                                    <span class="glyphicon glyphicon-folder-collapse"></span>&nbsp;--}}
{{--                                    @{{ category.name }} (@{{ category.count }})--}}
{{--                                </div>--}}
{{--                            <div class="dropdown col-md-2" v-show="category.id == group_open" style="padding-left: unset;float: right">--}}
{{--                                <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" style="min-width: 40px">--}}
{{--                                    編集 <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 row">--}}
{{--                             <i class="glyphicon glyphicon-folder-collapse col-md-1"--}}
{{--                                style="margin-right: 10px;padding: unset"></i>--}}
{{--                            <input type="text" class="col-md-8" :id="'rename_cat_'+category.id"--}}
{{--                                   style="width: 55%;height: 25px;padding: unset" :value="category.name">--}}
{{--                            <input type="button" class="btn btn-default col-md-2" value="決定"--}}
{{--                                   style="width: 12%;margin-left:5px;padding:2px;min-width: 40px"--}}
{{--                                   v-on:click="renameGroup(category.id)">--}}
{{--                            </span>--}}
{{--                            <input type="hidden" name="category_id" :value="category.id">--}}
{{--                        </li>--}}
{{--                    </ul>--}}
                </div>
                <div class="tag_right" style="width: 80%;">
                    <div class="btngroup">
                        <div class="btn">
                            <a data-toggle="modal" data-target="#myModal"  style="background-color:rgba(87,153,219,1) ;  border-color:rgba(87,153,219,1) ;  " >
                                新しいサイト</a>
                        </div>
                        <div class="btn">
                            <a data-toggle="modal" data-target="#myModalSort" style="background-color: rgba(125,145,149,1); color: white; outline: none"
                               class="gry">並び替え</a>
                        </div>
                        <div class="btn" style="margin-top: 6px;">
                            <button v-if="selected.length > 0" v-on:click="deleteByChecked()"
                                    type="submit" class="btn-delete" style="color: #fff;">
                                {{--タグを削除--}}
                                サイトを削除
                            </button>
                        </div>
                        <div class="tag_right_search">
                            <input name="queryName" id="queryName" type="text">
                            <input type="button" value="検索" v-on:click="search()" id="btn-search">
                        </div>
                    </div>
                    <table class="table ">
                        <tbody>
                        <tr>
                            <th class="checkth" style="width: 3%;">
                                <input v-if="group_open==0" type="checkbox" name="dammy" v-model="selectAllDefault">
                                &nbspトリガー
                                <input v-else type="checkbox" name="dammy" v-model="selectAll">
                            </th>
                            <th style="width: 40%;">サイト名</th>
                            <th class="bunruith" style="width: 10%;">フォルダー</th>
{{--                            <th class="memth" style="width: 5%;">訪問割合(%)</th>--}}
{{--                            <th class="memth" style="width: 10%;">クリック率(%)</th>--}}
                            <th class="memth" style="width: 10%;">クリック数</th>
                            <th class="memth" style="width: 10%;">開封率(%)</th>
                            <th class="memth" style="width: 10%;">開封数</th>
                            <th class="memth" style="width: 10%;">配信数</th>
                            <th class="bunruith" style="width: 10%;"></th>
                        </tr>
                        <tr v-if="group_open == 0 && items_default.length > 0"
                            v-for="(item, index) in items_default" :class="'url_'+item.id">
                            <td>
                                <input type="checkbox" name="item_check[]" v-model="selected" :value="item.id">
                            </td>
                            <td class="message">
                                <span v-on:click="showURL(item.id)" class="display_url">
                                    &nbsp;@{{ item.name }}<br>
                                    <a style="color: #00a0ea;" :href="item.url">@{{ item.url }}</a>
                                </span>
                                <span :class="'edit_url_'+item.id" class="hidden">
                                    <input type="text" :class="'rename_url_'+item.id"
                                           style="width: 80%;height: 25px;" :value="item.name" autofocus>
                                    <input type="button" class="btn btn-default" value="決定 "
                                           style="width: 15%;margin-left:5px;padding:1px;min-width: 50px"
                                           v-on:click="renameURL(item.id)" onclick="location.reload()">
                                </span>
                                <div style="text-align: left">
{{--                                    <p :style="{height: 10, width: ((item.visit / item.released) * 100).toFixed(0) + '%',--}}
                                    <p :style="[(((item.visit / item.released) * 100).toFixed(0) < 70) ?
                                    (((item.visit / item.released) * 100).toFixed(0) < 50) ?
                                    {background:'red',height: '10px',width: ((item.visit / item.released) * 100).toFixed(0) + '%'} :
                                    {background:'yellow',height: '10px',width: ((item.visit / item.released) * 100).toFixed(0) + '%'} :
                                    {background:'blue',height: '10px',width: ((item.visit / item.released) * 100).toFixed(0) + '%'}]">
                                </div>
                            </td>
                            <td>@{{item.category_name}}</td>
{{--                            <td>@{{item.percent_click}}</td>--}}
{{--                            <td><strong>@{{ (item.released != 0) ? ((item.visit / item.released) * 100).toFixed(0) : 0 }}</strong></td>--}}
                            <td><strong>@{{ item.visit }}</strong></td>
                            <td><strong>@{{ (item.released != 0) ? ((item.viewer / item.released) * 100).toFixed(0) : 0 }}</strong></td>
                            <td><strong>@{{ item.viewer }}</strong></td>
                            <td><strong>@{{ item.released }}</strong></td>
                            <td>
                                <div style="margin-bottom: 5px;">
                                    <a v-on:click="editURL(item.id)">
                                        <button style="" class="btn btn-primary">名前を変える
                                        </button>
                                    </a>
                                </div>
{{--                                <div style="margin-bottom: 5px">--}}
{{--                                    <a :href="'url/edit/'+item.id">--}}
{{--                                        <button class="btn btn-warning">編集</button>--}}
{{--                                    </a>--}}
{{--                                </div>--}}
                                <div style="margin-bottom: 5px;">
                                    <a :href="'url/detail/'+item.id">
                                        <button style="" class="btn btn-primary">詳細
                                        </button>
                                    </a>
                                </div>
                                <div>
                                    <button style="" class="btn btn-danger" v-on:click="deleteURL(item.id)">削除
                                    </button>
                                </div>
                            </td>
                        </tr>
                        <tr v-if="group_open == 0 && items_default.length == 0">
                            <td colspan="9">表示するサイトがありません。</td>
                        </tr>
                        <tr :class="'url_'+item.id"
                            v-for="(item,index) in urls" v-if="item.id && group_open != 0" :id="'url_'+item.id"
                            :data-id="item.id">
                            <td>
                                <input type="checkbox" name="item_check[]" v-model="selected" :value="item.id">
                            </td>
                            <td class="message">
                                <span v-on:click="showURL(item.id)" class="display_url">
                                    &nbsp;@{{ item.name }}<br>
                                    <a style="color: #00a0ea;" :href="item.url">@{{ item.url }}</a>
                                </span>
                                <span :class="'edit_url_'+item.id" class="hidden">
                                    <input type="text" :class="'rename_url_'+item.id"
                                           style="width: 80%;height: 25px;" :value="item.name" autofocus>
                                    <input type="button" class="btn btn-default" value="決定 "
                                           style="width: 15%;margin-left:5px;padding:1px; min-width: 50px"
                                           v-on:click="renameURL(item.id)">
                                </span>
                                <div style="text-align: left">
{{--                                    <img src="/images/graph.png" :style="{height: 10, width: item.percent_click + '%'}">--}}
                                    <p :style="[(((item.visit / item.released) * 100).toFixed(0) < 70) ?
                                    (((item.visit / item.released) * 100).toFixed(0) < 50) ?
                                    {background:'red',height: '10px',width: ((item.visit / item.released) * 100).toFixed(0) + '%'} :
                                    {background:'yellow',height: '10px',width: ((item.visit / item.released) * 100).toFixed(0) + '%'} :
                                    {background:'blue',height: '10px',width: ((item.visit / item.released) * 100).toFixed(0) + '%'}]">
                                </div>
                            </td>
                            <td>@{{item.category_name}}</td>
{{--                            <td>@{{item.percent_click}}</td>--}}
                            <td><strong>@{{ (item.released != 0) ? ((item.visit / item.released) * 100).toFixed(0) : 0 }}</strong></td>
                            <td><strong>@{{ item.visit }}</strong></td>
                            <td><strong>@{{ (item.released != 0) ? ((item.viewer / item.released) * 100).toFixed(0) : 0 }}</strong></td>
                            <td><strong>@{{ item.viewer }}</strong></td>
                            <td><strong>@{{ item.released }}</strong></td>
                            <td>
                                <div style="margin-bottom: 5px;">
                                    <a v-on:click="editURL(item.id)">
                                        <button style="" class="btn btn-primary">名前を変える
                                        </button>
                                    </a>
                                </div>
                                <div style="margin-bottom: 5px;">
                                    <a :href="'url/detail/'+item.id">
                                        <button style="" class="btn btn-primary">詳細
                                        </button>
                                    </a>
                                </div>
                                <div>
                                    <button style="" class="btn btn-danger" v-on:click="deleteURL(item.id)">削除
                                    </button>
                                </div>
                            </td>
                        </tr>
                        <tr v-if="group_open != 0 && urls.length == 0">
                            <td colspan="9">表示するサイトがありません。</td>
                        </tr>
                        </tbody>
                    </table>
                    <div class="paginate" style="text-align: center">
                        <nav aria-label="Page navigation example">
                            <ul class="pagination" v-if="group_open == 0">
                                <li class="page-item" v-if="current_page > 1">
                                    <a class="page-link" aria-label="Previous"
                                       @click="decrementPaginate(current_page - 1)"
                                    >
                                        <span aria-hidden="true">&laquo;</span>
                                        <span class="sr-only">Previous</span>
                                    </a>
                                </li>
                                <li class="page-item" v-if="current_page > 2">
                                    <a class="page-link">
                                        ...
                                    </a>
                                </li>
                                <li class="page-item" v-if="current_page > 1">
                                    <a class="page-link" @click="decrementPaginate(current_page - 1)">
                                        @{{ current_page - 1 }}
                                    </a>
                                </li>
                                <li class="page-item active"><a class="page-link">@{{ current_page }}</a></li>
                                <li class="page-item" v-if="current_page < Math.ceil(total_url/50)">
                                    <a class="page-link" @click="incrementPaginate(current_page + 1)">
                                        @{{ current_page + 1 }}
                                    </a>
                                </li>
                                <li class="page-item" v-if="current_page + 1 < Math.ceil(total_url/50)">
                                    <a class="page-link">
                                        ...
                                    </a>
                                </li>
                                <li class="page-item" v-if="current_page < Math.ceil(total_url/50)">
                                    <a class="page-link" aria-label="Next"
                                       @click="incrementPaginate(current_page + 1)"
                                    >
                                        <span aria-hidden="true">&raquo;</span>
                                        <span class="sr-only">Next</span>
                                    </a>
                                </li>
                            </ul>
                            <ul class="pagination" v-if="group_open != 0">
                                <li class="page-item" v-if="current_page > 1">
                                    <a class="page-link" aria-label="Previous"
                                       @click="decrementGroupPaginate(current_page - 1)"
                                    >
                                        <span aria-hidden="true">&laquo;</span>
                                        <span class="sr-only">Previous</span>
                                    </a>
                                </li>
                                <li class="page-item" v-if="current_page > 2">
                                    <a class="page-link">
                                        ...
                                    </a>
                                </li>
                                <li class="page-item" v-if="current_page > 1">
                                    <a class="page-link" @click="decrementGroupPaginate(current_page - 1)">
                                        @{{ current_page - 1 }}
                                    </a>
                                </li>
                                <li class="page-item active"><a class="page-link">@{{ current_page }}</a></li>
                                <li class="page-item" v-if="current_page < Math.ceil(total_url/50)">
                                    <a class="page-link" @click="incrementGroupPaginate(current_page + 1)">
                                        @{{ current_page + 1 }}
                                    </a>
                                </li>
                                <li class="page-item" v-if="current_page + 1 < Math.ceil(total_url/50)">
                                    <a class="page-link">
                                        ...
                                    </a>
                                </li>
                                <li class="page-item" v-if="current_page < Math.ceil(total_url/50)">
                                    <a class="page-link" aria-label="Next"
                                       @click="incrementGroupPaginate(current_page + 1)"
                                    >
                                        <span aria-hidden="true">&raquo;</span>
                                        <span class="sr-only">Next</span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>

            <form action="{{route('addURL')}}" method="post">
                {{csrf_field()}}
                <div class="modal fade" id="myModal" role="dialog">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <h3>URL分析登録</h3>
                            <div class="modal_shuffle">
                                <dl>
                                    <dt>
                                        <span style="font-weight: bold">リンク名</span>
                                    </dt>
                                    <dd>
                                        <input type="text" id="name" name="name">
                                    </dd>
                                    <dt>
                                        <span style="font-weight: bold">URL</span> <span class="taiou_red">必須</span>
                                    </dt>
                                    <dd>
                                        <input type="text" id="url" name="url" placeholder="http://example.com/">
                                    </dd>
                                    <br>
                                    <div id="errorURL"></div>
                                    <dt>フォルダー</dt>
                                    <dd>
                                        <select name="category" id="category" v-model="flagSelected">
                                            <option value="">未分類</option>
                                            <option v-for="(category,index) in groups" :value="category.id" >
                                                @{{ category.name }}
                                            </option>
                                        </select>
                                    </dd>
                                </dl>
                            </div>
                            <div class="btngroup">
                                <div class="btn">
                                    <a class="modal-close gry" data-dismiss="modal">一覧に戻る</a>
                                </div>
                                <div class="btn">
                                    <button type="submit" id="add-url" class="grn">登録</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <div class="modal fade" id="modalSortFolder"
                 tabindex="-1" role="dialog"
                 data-backdrop="static"
                 data-keyboard="false"
                 aria-labelledby="chatSettingStatus">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"
                                    v-on:click="closeModalSortFolder()" aria-hidden="true" style="opacity: 1;font-size: 27px">
                                <i class="fas fa-times" style="color: rgba(125,145,149,1) !important;"></i></button>
                            <h2 class="text-center"> 【 フォルダ並べ替え 】</h2>

                        </div>
                        <div class="modal-body scroll-modal">
                            <div class="row mt-item-fol" v-for="(item,index) in arrGroupSort" :data-id="item.id">
                                <div class="col-sm-9 col-sm-offset-1  ">
                                    <div style="padding: 8px; border: 1px solid rgba(205,214,221,1); border-radius: 4px">@{{item.name}}</div>
                                </div>
                                <div class="col-sm-1">
                                    <div class="box-ic-sort" >
                                        <i class="far fa-chevron-up"  v-on:click="onUpdateDefaultGroup(undefined, index, 'up')"></i>
                                        <i class="far fa-chevron-down " v-on:click="onUpdateDefaultGroup(undefined, index, 'down')"></i>
                                    </div>

                                </div>
                            </div>
                            <input type="hidden" id="array_sort_fol" value="">
                            <input type="hidden" id="current_position_fol" value="">
                        </div>
                        <div class="text-center">
                            <button type="button" class="btn btn-success btn-choise-folder" v-on:click="sortedFolder">保存</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade" id="myModalSort" role="dialog">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div id="" class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"
{{--                                    v-on:click="cancelSorted"--}}
                                    aria-hidden="true" style="opacity: 1;font-size: 27px">
                                <i class="fas fa-times" style="color: rgba(125,145,149,1) !important;"></i></button>
                            <h2 class="text-center"> 【 並べ替え 】</h2>
{{--                            <span id="sorter_modal_v1"> URL分析並び替え</span>--}}
{{--                            <button type="button" class="close" data-dismiss="modal">&times;</button>--}}
                        </div>
                        <div class="modal-body modal-body-main scroll-modal">

                            <div v-if="group_open == 0"
                                 class="row mt-item-fol" v-for="(item,index) in items_default" :data-id="item.id">
                                <div class="col-sm-9 col-sm-offset-1  ">
                                    <div style="word-break: break-all;padding: 8px; border: 1px solid rgba(205,214,221,1); border-radius: 4px">@{{item.name}}</div>
                                </div>
                                <div class="col-sm-1">
                                    <div class="box-ic-sort">
                                        <i class="far fa-chevron-up "  v-on:click="onUpdate(undefined, index, 'up')"></i>
                                        <i class="far fa-chevron-down " v-on:click="onUpdate(undefined, index, 'down')"></i>
                                    </div>
                                </div>
                            </div>
                            <div
                                 class="row mt-item-fol" v-for="(item,index) in urls"
                                 v-if="group_open != 0 && item.id"
                                 :data-id="item.id">
                                <div class="col-sm-9 col-sm-offset-1  ">
                                    <div style=" word-break: break-all;padding: 8px; border: 1px solid rgba(205,214,221,1); border-radius: 4px">@{{item.name}}</div>
                                </div>
                                <div class="col-sm-1">
                                    <div class="box-ic-sort">
                                        <i class="far fa-chevron-up "  v-on:click="onUpdate(undefined, index, 'up')"></i>
                                        <i class="far fa-chevron-down " v-on:click="onUpdate(undefined, index, 'down')"></i>
                                    </div>
                                </div>
                            </div>
                            <input type="hidden" id="array_sort" value="">
                            <input type="hidden" id="current_position" value="">

                            <div class="text-center">
                                <button type="button" data-save="update"
                                        class="btn btn-success btn-choise-folder"
                                        v-on:click="sortedTemplate">保存</button>
                            </div>




                        </div>
{{--                        <div class="modal-footer">--}}
{{--                            <span class="btn btn-danger pull-left">--}}
{{--                                <button type="button" class="close" data-dismiss="modal"--}}
{{--                                        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>
        </section>
    </article>
    <input type="hidden" id="folder_cookie"  value="{{$folderCookie}}">
@endsection
@push('js')
    <script src="/js/tag/vue-sortable.js"></script>
    <script src="/js/url/index.js?v={{config("sns-line.version")}}"></script>
@endpush