@extends('layout.basic.main')
@section('title', 'URL分析（一覧）')
@push('css')
<link rel="stylesheet" href="/css/url/index_v2.css?v={{config("sns-line.version")}}">
@endpush
@section('content')
<h2 style="font-size: 20px; color: rgb(34, 34, 34); font-weight: bold; padding: 10px 10px 10px 0px;">URL分析</h2>
<div class="tag_separate" id="list_url" v-cloak>
    <div class="tag_left">
        <div class="row">
            <div class="col-md-12" style="padding-right: 0px;">
                <div class="tab_folder  "><span style="font-weight: bold; font-size: 18px;">フォルダ</span>
                    <div style="display: flex; align-items: baseline;">
                        <div class="popup"><span @click="showPopupCreateFolder()" class="line-icon"><i class="far fa-plus-circle "></i></span>
                            <div id="myPopup" class="popuptext"><span style="font-weight: bold; color: rgb(81, 89, 92);">フォルダ名</span>
                                <div style="padding: 7px 0px; display: flex; align-items: flex-end;">
                                    <input v-model="folder_name" type="text" id="cat_txt" style="outline: none; width: 79%; height: 32px; padding-left: 3px; border: 1px solid rgb(187, 187, 187); border-radius: 4px;"> <span style="font-size: 12px; margin-left: 2px;">@{{folder_name.length}}/15</span>
                                </div>
                                <div class="text-center" style="display: flex; align-items: center; justify-content: space-between;">
                                    <button class="btn btn-sns-line btn-sns-line-success btn-sns-line-sm" @click="saveFolder()" style="width: 82px; background: rgb(8, 191, 90);">決定</button>
                                    <button class="btn btn-sns-line btn-sns-line-dark btn-sns-line-sm" @click="hidePopupCreateFolder()" style="background-color: rgb(125, 145, 149); color: white;">キャンセル</button>
                                </div>
                            </div>
                        </div> <span @click="showModalSortFolder" class="line-icon"><i class="fas fa-sort-amount-down-alt "></i></span>
                    </div>
                </div>
            </div>
        </div>
        <div id="nano-inner-group" class="nano-inner" style="margin-top: 0px;">
            <div :id="'group_'+folder.id" data-id="@{{ folder.id }}" v-for="(folder, index_folder) in folders" class="tag_group" :class="folder.id == folder_id ? 'active' : ''" @click="chooseFolder(folder.id)">
                <div class="display_category " style="width: 100%;">
                    <div class="col-md-11 list-i-fol">
                        <div>
                            @{{ folder.name }} (@{{ folder.urls_count }})
                        </div>
                        <div class="btn-group btn-action-folder" v-if="folder.id == folder_id && index_folder != 0" style="padding: unset; ">
                            <i class="far fa-ellipsis-h ic-menu"></i>
                            <ul class="dropdown-menu action-broadcast" style="min-width: 130px; left: -89px; top: 15px;">
                                <li class="focus-pointer" @click="showPopupCreateFolder(folder.id)">
                                    <div style="cursor: pointer;">
                                        フォルダ名変更
                                    </div>
                                </li>
                                <li class="focus-pointer" @click="deleteFolder(folder.id)">
                                    <div style="cursor: pointer;">
                                        フォルダ削除
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="tag_right" style="margin-top: 12px;">
        <div class="box-btn-center">
            <div>
                <!-- <button type="button" onclick="showCreateEvent()" target="_self" class="btn btn-sns-line btn-sns-line-primary" style="background-color: rgb(87, 153, 219);"> 新規作成</button> -->
            </div>
            <div class="btn-right-top">
                <div><button type="button" href="" @click="showModalSort()" id="btn_sort_event" data-type="tag" data-id="" data-callback="tag_sorted" class="btn btn-sns-line btn-sns-line-secondary " style="padding-left: 25px; padding-right: 25px;">並べ替え</button></div>
                <div><button type="button" @click="showModalMoveFolder()" :disabled="selected.length == 0" class="btn btn-sns-line btn-sns-line-primary btn-move-folder"> 一括フォルダ変更
                    </button></div>
                <div><button type="button" :disabled="selected.length == 0" @click="deleteUrl()" class="btn btn-sns-line btn-sns-line-danger" style="padding-right: 15px; padding-left: 15px;"> 一括削除
                    </button></div>
            </div>
        </div>
        <table class="table table-striped">
            <thead>
                <tr>
                    <th><input type="checkbox" v-model="selectAll"></th>
                    <th class="text-left" style="width: 130px;">登録日</th>
                    <th class="text-left" style="min-width: 101px;">ページ</th>
                    <th style="width: 100px;">配信数</th>
                    <th style="width: 130px;">開封数/率</th>
                    <th style="width: 206px;">ユニーククリック数/率</th>
                    <th style="width: 115px;"></th>
                    <th style="width: 50px;"></th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="url in url_list">
                    <td class="check_all"><input type="checkbox" v-model="selected" :selected="selected.indexOf(url.id) > -1" :value="url.id"></td>
                    <td class="text-left">
                        @{{ moment(url.created_at).format('YYYY.MM.DD')}}
                    </td>
                    <td class="text-left">
                        <div class="url_name">
                            <button type="button" class="action-edit-url" @click="showEditUrl(url.id)">
                                <i class="fas fa-pencil"></i>
                            </button>
                            <a target="_blank" :href="url.url">@{{ url.name }}</a>
                        </div>
                    </td>
                    <td>
                        @{{ url.number_send }}
                    </td>
                    <td>
                        <div class="percent_url">
                            <div>@{{ url.count_view < url.user_number_click ? '-' : url.count_view}}</div><span>/</span>
                            <div :style="{textAlign: url.count_view < url.user_number_click ? 'left' : 'right'}">@{{ url.count_view < url.user_number_click ? '-' : rates(url.number_send, url.count_view)+'%' }}</div>
                        </div>
                    </td>
                    <td>
                        <div class="percent_url percent_url_click">
                            <div>@{{ url.user_number_click }}人</div><span>/</span>
                            <div>@{{ rates(url.number_send, url.user_number_click) }}%</div>
                        </div>
                    </td>
                    <td>
                        <button type="button" @click="detailUrl(url.id)" class="btn btn-sns-line btn-sns-line-secondary">詳細確認</button>
                    </td>
                    <td :class="'check_all check_event_'+url.id">
                        <div class="btn-group btn-action-folder" style="padding: unset;">
                            <i class="far fa-ellipsis-h ic-menu" style="font-size: 25px;">
                            </i>
                            <ul class="dropdown-menu action-broadcast" style="min-width: 74px; left: -39px; top: 23px; text-align: center;">
                                <li class="focus-pointer-item" style="cursor: pointer;" v-if="false">
                                    <a @click="copyUrl(url.id)" style="padding: unset; font-weight: bold; color: rgb(81, 89, 92);">
                                        コピー
                                    </a>
                                </li>
                                <li class="focus-pointer-item" style="cursor: pointer">
                                    <div @click="deleteUrl(url.id)" style="color: rgb(244, 67, 54); font-weight: bold;">
                                        削除
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </td>
                </tr>


                <tr style="display: none;">
                    <td colspan="9"> データがありません。</td>
                </tr>
            </tbody>
        </table>
        <!-- Pagination -->
        <nav sty class="text-center" v-if="pagination.total > pagination.per_page">
            <span>全@{{pagination.total}}件中　@{{pagination.from}}～@{{pagination.to}}件を表示中</span>
            <ul class="pagination">
                <li v-if="pagination.current_page > 1">
                    <a href="#" aria-label="Previous"
                       @click.prevent="changePage(pagination.current_page - 1)">
                        <span aria-hidden="true" style="color:#08BF5A"><i class="fas fa-arrow-left"></i></span>
                    </a>
                </li>
                <li v-for="page in pagesNumber" v-bind:class="[ page == isActived ? 'active' : '']">
                    <a href="#" @click.prevent="changePage(page)">@{{ page }}</a>
                </li>
                <li v-if="pagination.current_page < pagination.last_page">
                    <a href="#" aria-label="Next" @click.prevent="changePage(pagination.current_page + 1)">
                        <span aria-hidden="true" style="color:#08BF5A"><i class="fas fa-arrow-right"></i></span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>

    <div class="modal fade" id="addUrl" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog fade in" aria-labelledby="confirmAddTemplate">
        <div class="modal-dialog" role="document">
            <div class="modal-content" style="border: 0; padding: 15px;">
                <div class="modal-header" style="border: 0;position: relative;">
                <button type="button" data-dismiss="modal" aria-hidden="true" class="close" style="opacity: 1; font-size: 27px;position: absolute;top: 0;right: 0;">
                    <span class="line-icon line-icon-close"><i class="fas fa-times"></i></span>
                </button>
                    <h2 class="modal-title text-center font-weight-bold" id="myModalLabel">
                        ページ名編集
                    </h2>
                </div>
                <div class="modal-body modal-body-set-profile" style="max-height: 486px;overflow: auto;">
                    <div class="form-group">
                        <input type="text" class="form-control" style="height: 35px;width: 75%;margin: auto;" v-model="url_name" />
                    </div>
                    <div style="text-align: center; margin-top: 30px;">
                        <button @click="saveUrl()" class="btn btn-sns-line btn-sns-line-success" style="width:160px">保存</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--modal sort-->
    <div id="myModal" role="dialog" class="modal fade in" style="padding-right: 17px;">
        <div class="modal-dialog ">
            <div class="modal-content" style="border: 0 !important;">
                <div id="" class="modal-header"><button type="button" data-dismiss="modal" aria-hidden="true" class="close" style="opacity: 1; font-size: 27px;"><i class="fas fa-times"></i></button>
                    <h2 class="text-center font-weight-bold"> 【 並べ替え 】</h2>
                </div>
                <div id="sorter_modal_body " class="modal-body modal-body-main scroll-modal">
                    <div v-for="(url_sort, index) in list_url_sort" :data-id="url_sort.id" :key="url_sort.id" class="row mt-item-fol">
                        <div class="col-sm-9 col-sm-offset-1  ">
                            <div class="item-modal-sort">@{{ url_sort.name }}</div>
                        </div>
                        <div class="col-sm-1">
                            <div class="box-ic-sort">
                                <i @click="onUpdate(undefined, index, 'up')" class="far fa-chevron-up "></i>
                                <i @click="onUpdate(undefined, index, 'down')" class="far fa-chevron-down "></i>
                            </div>
                        </div>
                    </div>
                    <input type="hidden" id="array_sort" :value="array_url_id">
                </div>
                <div class="text-center"  style="padding: 15px 0;">
                    <button type="button" @click="sortUrl()" data-save="update" class="btn btn-sns-line-success btn-sns-line">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!--modal move folder-->
    <div id="modalMoveFolder" tabindex="-1" role="dialog" aria-labelledby="chatSettingStatus" class="modal fade in" style="padding-right: 17px;">
        <div role="document" class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header"><button type="button" data-dismiss="modal" aria-hidden="true" class="close" style="opacity: 1; font-size: 27px;"><i class="fas fa-times"></i></button>
                    <h2 class="text-center font-weight-bold"> 【 一括フォルダ変更 】</h2>
                </div>
                <div class="modal-body">
                    <div style="display: flex; align-items: center;">
                        <div style="flex:0 0 100px" class="col-sm-offset-1 title-left font-weight-bold">
                            移行先選択
                        </div>
                        <div style="flex:0 0 calc(100% - 200px)">
                            <div class="b-select">
                                <select class="form-control font-weight-bold my_class" v-model="folder_id_move">
                                    <option v-for="folder in folders" :value="folder.id">@{{ folder.name }}</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="text-center" style="margin: 15px 0px;"><button @click="moveFolderForUrl()" type="button" class="btn btn-sns-line-success btn-sns-line">登録</button></div>
            </div>
        </div>
    </div>

    <!--modal sort folder-->
    <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" style="border: 0;">
                        <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">
                                <span class="line-icon line-icon-close"><i class="fas fa-times"></i></span>
                            </button>
                            <h2 class="text-center font-weight-bold"> 【 フォルダ並べ替え 】</h2>
                        </div>
                        <div class="modal-body scroll-modal">
                            <div class="mt-item-fol" v-for="(item,index) in folders_sort" :data-id="item.id" :key="item.id">
                                <div class="row" v-if="index > 0">
                                    <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>
                            </div>
                            <input type="hidden" id="array_sort_fol" v-model="array_sort_fol">
                        </div>
                        <div class="text-center" style="padding: 15px;">
                            <button type="button" class="btn btn-sns-line btn-sns-line-success " v-on:click="sortedFolder">保存</button>
                        </div>
                    </div>
                </div>
            </div>
</div>
@endsection
@push('js')
<script>
    var folder_id = '{{ $folder_id }}';
</script>
<script src="/js/url/index_v2.js?v={{config("sns-line.version")}}"></script>
@endpush