@extends('layout.basic.main')
@section('title','ポップアップ（一覧）')

@push('css')
    <link rel="stylesheet" href="/css/popup/index.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">
@endpush
@section('content')
    <article class="">
        <div id="loading_overlay" class="loading-overlay text-center" style="display: none">
            <i class="glyphicon glyphicon-refresh spin"></i>
        </div>
        <div id="popup-manager" v-cloak>
            <h2>ポップアップ</h2>
            <div class="popup__control">
                <div class="popup__left">
                    <div class="row">
                        <div class="col-md-12" style="padding-right: 0px;">
                            <div class="tab_folder">
                                <span>フォルダ</span>
                                <div style="display: flex; align-items: baseline;">
                                    <div class="popup">
                                        <span class="line-icon" @click="openPopupAddGroup()" >
                                            <i class="far fa-plus-circle "></i>
                                       </span>
                                        <div class="popuptext" v-show="show_popup.add_group">
                                            <span>フォルダ名</span>
                                            <div style="padding: 7px 0; display: flex; align-items: flex-end">
                                                <input type="text" id="cat_txt" v-model="name_group" maxlength="15" class="form-control"
                                                       style="width: 79%;height: 32px;padding-left: 3px;border: 1px solid #bbb;border-radius: 4px">
                                                <span style="font-size: 12px;margin-left: 2px;">@{{ getCountValue(name_group) }}/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" style="width: 82px;" @click="addGroup()">決定</button>
                                                <button class="btn btn-sns-line btn-sns-line-dark btn-sns-line-sm" @click="setClearPopupGroup">キャンセル</button>

                                            </div>
                                        </div>
                                    </div>
                                    <span class="line-icon" data-toggle='modal'
                                          data-target='#modalSortFolder' v-on:click="showModalSortFolder()">
                                        <i class="fas fa-sort-amount-down-alt "></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="nano-inner" id="nano-inner-group" style="margin-top: 0">
                        <div class="tag_group row" style="padding: 10px 7px"
                             @click="showGroup(0)"
                             :class="(group_open == 0)?'active':'folder-close'">
                            <div class="display_category row" style="margin-left: 1px;">
                                <div class="col-md-11 list-i-fol" >
                                    <div>未分類 (@{{ count_default }})</div>
                                </div>

                            </div>
                        </div>
                        <div v-for="(category, index) in sortedCategories" class="tag_group row"
                             :class="(category.id == group_open)?'active':'folder-close'" style="padding: 0">
                            <div class="display_category  row" style="margin-left: 1px;">
                                <div class="col-md-11 list-i-fol" >
                                    <div @click="showGroup(category.id)" style="width: 90%; padding: 7px">
                                        @{{ category.name }} (@{{ category.count }})
                                    </div>
                                    <div class="btn-group" style="padding: unset;" :style="(group_open == category.id)?'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">
                                                <div style="cursor: pointer" @click="editGroup(category)">フォルダ名変更</div>
                                            </li>
                                            <li class="focus-pointer" >
                                                <div style="cursor: pointer" @click="deleteGroup(category)">フォルダ削除</div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="popup__right">
                    <div class="box-btn-center">
{{--                        <div class="" v-if="check_plan == 'plan_standard'">--}}
                        <div class="" v-if="isAdd">
                            <a :href="'/basic/popup/'+getIdGroup()+'/create-or-update'"
                               class="btn btn-sns-line btn-sns-line-primary"
                               style="background-color:rgba(87,153,219,1)"> 新規作成</a>
                        </div>
                        <div class="" v-else>
                            <span class="btn btn-sns-line btn-sns-line-primary" @click="showMessageCheckBot()"
                                  style="background-color:rgba(87,153,219,1)"> 新規作成</span>
                        </div>
                        <div class="btn-right-top">
                            <div>
                                <button style="padding-left: 25px; padding-right: 25px" data-toggle="modal"
                                        data-target="#modalSortItem"
                                        @click="showModalSortItems()"
                                        class="btn btn-sns-line btn-sns-line-secondary">並べ替え
                                </button>
                            </div>

                            <div>
                                <button v-if="selected.length > 0" type="button" data-toggle="modal"
                                        data-target="#modalMoveFolder"
                                        style="padding-right: 10px; padding-left: 10px; margin: 0 15px"
                                        class="btn btn-sns-line btn-sns-line-primary"> 一括フォルダ変更</button>
                                <button v-else class="btn btn-sns-line btn-sns-line-primary btn-move-folder" disabled> 一括フォルダ変更</button>
                            </div>
                            <div>
                                <button v-if="selected.length > 0" class="btn btn-sns-line btn-sns-line-danger"
                                        style="padding-right: 15px; padding-left: 15px;" @click="deletePopups()"> 一括削除</button>
                                <button v-else class="btn btn-sns-line btn-sns-line-danger" style="padding-right: 15px; padding-left: 15px;" disabled> 一括削除</button>
                            </div>
                        </div>
                    </div>

                    <table class="table">
                        <tr style="height: 40px">
                            <th class="checkth" style="width: 41px">
                                <input type="checkbox" name="" value="" v-model="selectAll">

                            </th>
                            <th class="text-left hh_v11" style="width: 10%">作成日</th>
                            <th class="text-left hh_v12" style="width: 13%">埋め込みコード</th>
                            <th class="text-left hh_v13" style="width: 12%">表示タイプ</th>
                            <th class="text-left hh_v14" style="min-width: 20%">管理名</th>
                            <th class="text-left hh_v15">遷移先</th>
                            <th class="text-center hh_v16" style="width: 10%">データ詳細</th>
                            <th class="text-center hh_v17" style="width: 8%"></th>

                        </tr>
                        <tbody style="border-top: none">
                            <tr v-for="(item, index) in items">
                                <td style="width: 41px">
                                    <input type="checkbox" name="check_item[]" :value="item.id" v-model="selected"></td>
                                <td class="text-left"  >
                                    @{{formatDate(item.created_at)}}
                                </td>
                                <td class="text-left">
                                    <button type="button" style="padding: 5px 10px; white-space: nowrap" data-toggle="modal" data-target="#code_embed"
                                            class="btn btn-sns-line btn-sns-line-primary" @click="setCodeEmbed(item)">コード表示</button>
                                </td>
                                <td class="text-left">
                                    <span>@{{ getViewDisplay(item.view) }}</span>
                                </td>
                                <td class="text-left">
                                    <div class="ch__text_inline ch__text_inline_v2">
                                        <span>
                                            <a style="text-decoration: underline;" :href="'/basic/popup/'+getIdGroup()+'/create-or-update'+'?edit='+item.id"> @{{item.name}}</a>
                                        </span>
                                    </div>

                                </td>
                                <td class="text-left">
                                    <div class="ch__text_inline ch__text_inline_v1">
                                        <span v-if="item.is_setting_end_point_user_click == 'url'">
                                            <span><a style="text-decoration: underline;" :href="item.url_end_point" target="_blank">@{{ item.url_end_point }}</a></span>
                                        </span>
                                        <span v-if="item.is_setting_end_point_user_click == 'qr_code'">
                                            <span>@{{ item.landing_name }}</span>
                                        </span>
                                    </div>
                                </td>
                                <td class="text-center">
                                    <a :href="'/basic/popup/detail-data/'+item.id" class="btn btn-sns-line btn-sns-line-secondary">表示</a>
                                </td>
                                <td class="text-center">
                                    <div class="btn-group" style="padding: unset;">
                                        <i class="far fa-ellipsis-h ic-menu" ></i>
                                        <ul class="dropdown-menu action-broadcast" style="min-width: 70px;left: -5px;top: 15px;">
                                            <li class="focus-pointer" >
                                                <div class="text-center h__item_dropdown" style="cursor: pointer;padding: 3px;" @click="copyPopup(item.id)">コピー</div>
                                            </li>
                                            <li class="focus-pointer">
                                                <div class="text-center h__item_dropdown text-danger" style="cursor: pointer; padding: 3px;" @click="deletePopup(item)">削除</div>
                                            </li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                            <tr v-if="items.length == 0"><td colspan="12">データがありません。</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <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" 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"> 【 フォルダ並べ替え 】</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>
                        </div>
                        <div class="text-center gr__btn_bottom">
                            <button type="button" class="btn btn-sns-line btn-sns-line-success" @click="sortedFolder">保存</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="code_embed" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false">
                <div class="modal-dialog" role="document">
                    <div class="modal-content" style="padding-bottom: 10px;">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" 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"> 埋め込みコード</h2>

                        </div>
                        <div class="modal-body scroll-modal" style="padding-left: 30px; padding-right: 30px">
                            <div class="form-group">
                                <label for="">ページ埋め込みコード</label>
                                <div style="display: flex; align-items: center; margin-top: 5px;">
                                    <input type="text" class="form-control" style="width: 100%;" v-model="code_embbed" id="code_embbed" readonly>
                                    <span>
                                        <i class="fal fa-copy" @click="copyCodeEmbbed"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="text-center gr__btn_bottom">
                            <button type="button" data-dismiss="modal" class="btn btn-sns-line btn-sns-line-success">戻る</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="modalSortItem" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false" aria-labelledby="modalSortItem">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" 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"> 【 並べ替え 】</h2>

                        </div>
                        <div class="modal-body scroll-modal">
                            <div class="row mt-item-fol" v-for="(item,index) in arrItemsSort">
                                <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 "  @click="onUpdateDefaultPopup(undefined, index, 'up')"></i>
                                        <i class="far fa-chevron-down " @click="onUpdateDefaultPopup(undefined, index, 'down')"></i>
                                    </div>
                                </div>
                            </div>
                            <input type="hidden" id="array_sort" value="">
                            <input type="hidden" id="current_position" value="">
                        </div>
                        <div class="text-center gr__btn_bottom">
                            <button type="button" class="btn btn-sns-line btn-sns-line-success" @click="sortItemPopup">保存</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="modalMoveFolder"
                 tabindex="-1" role="dialog"
                 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" 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"> 【 一括フォルダ変更 】</h2>

                        </div>
                        <div class="modal-body">
                            <div class="row " >
                                <div class="col-sm-2 col-sm-offset-1 title-left">
                                    移行先選択
                                </div>
                                <div class="col-sm-8">
                                    <div class="b-select">
                                        <select class="form-control" v-model="folder_move_id">
                                            <option value="0">未分類</option>
                                            <option v-for="(category, index) in sortedCategories" :value="category.id">@{{ category.name }}</option>
                                        </select>
                                        <i class="fal fa-angle-down"></i>
                                    </div>

                                </div>

                            </div>

                        </div>
                        <div class="text-center gr__btn_bottom">
                            <button type="button" class="btn  btn-sns-line btn-sns-line-success" @click="moveItems()">登録</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </article>
@endsection
@push('js')
    <script src="/js/booking_manager/message.js"></script>
    <script type="text/javascript">
        const bot_id = '{{ $bot_id }}';
        const kind = '{{ $kind }}';
        const app_url = '{{ $app_url }}';
        const folder_cookie = '{{ $folderCookie }}';
        //route
        const ajax = {
            init: '{{ route('popup.init') }}',
            set_cookie: '{{ route('popupSetCookie') }}',
            folder: {
                create: '{{ route('popup.folder.create') }}',
                sort: '{{ route('popup.folder.sort') }}',
                delete: '{{ route('popup.folder.delete') }}',
            },
            popup: {
                copy: '{{ route('popup.copy') }}',
                delete: '{{ route('popup.delete') }}',
                sort: '{{ route('popup.sort') }}',
                move_folder: '{{ route('popup.move_folder') }}',
                mass_delete: '{{ route('popup.mass_delete') }}',
            }
        }


    </script>
    <script src="/js/popup/index.js?v={{config('sns-line.version')}}"></script>
@endpush