@extends('layout.basic.main')
@section('title','テンプレート（一覧）')
@push('css')
<link rel="stylesheet" href="/css/friendlist/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">

<link rel="stylesheet" href="/css/msg_template/index.css?v={{config('sns-line.version')}}">

<style>
    .main {
        padding-bottom: 0;
    }

    body.modal-open {
        overflow-y: hidden;
        height: 100vh;
    }

    div.ui-sortable-placeholder.row.mt-item-fol   {
        border: 1px dashed #08BF5A;
        border-radius: 5px;
        visibility: visible !important;
        width: calc(83.33333333% - 4px);
        margin-left: calc(8.33333333% + 2px);
    }

 
</style>
@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>
    <section class="taglist tmp" id="msg_template" v-cloak>
        <div style="display: flex;align-items: center;justify-content: space-between;">
            <h2 style="font-size: 20px; color: #222222; font-weight: bold; padding: 10px 10px 10px 0">テンプレート</h2>
            <a href="https://lme.jp/manual/templete/" class="btn btn-sns-line btn-sns-line-outline-default btn_manual" target="_blank">
                <img src="/images/icon_manual.png" class="img-fluid" style="padding-bottom: 2px; padding-right: 5px; width: 20px;">マニュアル
            </a>
        </div>

        <div class="separate" style="display: block;">
            <div class="tag_separate" style="margin-top: 5px; display: flex;">
                <div class="tag_left tag_temp_left"
                     v-show="show_tag_left == 1">
                    <div class="row">
                        <div class="col-md-12" style="padding-right: 0">
                            <div class="tab_folder  ">
                                <div class="folder_action" style="margin-top: 5px; margin-top: 29px; display: flex ">
                                    <div class="popup" style="width: 50%;">
                                        <span v-on:click="showAddGroupPopup" style="width: 100%; display: inline-block">
                                            <button class="btn btn-sns-line btn-sns-line-outline-default btn_group_popup"  style="width: 100%; font-weight: 300">
                                                <i class="far fa-plus" style="color: #222222 !important; padding-right: 5px;"></i>フォルダ追加
                                            </button>
                                        </span>
                                        <div class="popuptext" id="myPopup">
                                            <span class="font-weight-bold">フォルダ名</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; font-weight: bold">
                                                <span style="font-size: 12px;margin-left: 2px;font-weight: bold">@{{ countTex(name_group) }}/20</span>
                                            </div>
                                            <div class="text-center" style="display: flex;align-items: center;justify-content: space-between;">
                                                <button class="btn btn-sns-line-success btn-sns-line" style="width: 82px;background: #08BF5A;" v-on:click="addGroup()">決定</button>
                                                <button class="btn btn-sns-line-secondary btn-sns-line" style="padding: 6px;" v-on:click="closeAddPopup">キャンセル</button>
                                            </div>
                                        </div>
                                    </div>


									<button
											data-toggle='modal'
											data-target='#modalSortFolder'
											v-on:click="showModalSortFolder()"
											style="width: 50%; margin-left: 7px; font-weight: 300"
											class="btn btn-sns-line btn-sns-line-outline-default btn_modal_sort" >
										<i class="fa fa-arrows " style="color: #222222 !important; padding-right: 5px;"></i>並べ替え
									</button>
                                </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; border: none; cursor: pointer;" 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 style="font-size: 14px; color: #222222; font-weight: 300;">未分類 (@{{ count_default }})</div>
                                    <div class="btn-group" style="padding: unset;">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div v-for="(category, index) in sortedCategories"
							 class="tag_group row"
							 style="border: none; cursor: pointer;"
							 :id="'group_'+category.id"
							 :data-id="category.id"
							 :key="index"
							 v-bind:class="(localStorage.getItem('group_id') && category.id == localStorage.getItem('group_id'))  ?'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 style="font-size: 14px; color: #222222; font-weight: 300;">
                                        @{{ category.name }} (@{{ category.count }})
                                    </div>
                                    <div class="btn-group" style="padding: unset;">
                                        <i class="far fa-ellipsis-v ic-menu"></i>
                                        <ul class="dropdown-menu action-broadcast" style="font-weight: 500; color: #222222;">
                                            <li class="focus-pointer" v-on:click="editGroup(category, $event)">
                                                <div style="cursor: pointer;">
                                                    <i class="fal fa-edit"></i>
													名称変更
                                                </div>
                                            </li>
                                            <li class="focus-pointer" v-on:click="showModalDeleteFolder(category.id)">
                                                <div style="cursor: pointer">
                                                    <i class="fal fa-trash-alt"></i>
													フォルダ削除
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tag_temp_left_sm" v-if="show_tag_left == 0"></div>

                <div class="tag_right tag_temp_right">
                    <div class="box-btn-center">
                        <div>
                            <button type="button" data-toggle='modal' data-target='#modal_create_group' class="btn btn-sns-line btn-sns-line-primary btn_create_temp">
                                <i class="far fa-plus" style="color: #FFFFFF !important; padding-right: 5px;"></i>新規作成
                            </button>
                            <button type="button" href="" id="btn_sort_event"
									style="color: #222222 !important;; font-weight: 300 !important;"
                                    @click="openModalSortItem"
{{--                                    data-callback="tag_sorted"--}}
                                    class="btn btn-sns-line btn-sns-line-outline-default btn_sort_temp">
                                <i class="fa fa-arrows " style="color: #222222 !important; padding-right: 5px;"></i>並べ替え
                            </button>
                            <span style="color: #222222; font-size: 14px;" v-show="selected.length > 0">このフォルダ内の @{{ selected.length }} 件が選択されています</span>
                        </div>
                        <div class="btn-right-top" style="position: relative">
                            <i class="far fa-search" style="color: #E0E0E0 !important; position: relative; left: 25px;"></i>
                            <input type="text" @keyup.enter="searchByKeyword" class="form-control search_for_temp" v-model="search_template"

                                   placeholder="管理名を入力"
                                style="padding: 0; padding-left: 30px; height: 40px; width: 350px; border: 1px solid #DDDDDD; box-shadow: none; font-size: 13px;">

							<img @click="clearSearch" v-show="search_template"
								 style="width: 20px;
								     transform: translateY(-50%);
									top: 50%;
									right: 10px;
									position: absolute;
									cursor: pointer;
									width: 20px;"
								 src="/images/icon-clear-search.png">
                        </div>
                    </div>
                    <div class="table-responsive table-responsive-list-template">
                        <div>
                          <div class="wrap-scroll-table">
							  <table id="table_list_template">
								  <thead>
								  <tr>
									  <th class="checkth">
										  <label class="c-checkbox">
											  <input v-if="group_open == 0" type="checkbox"
													 @change="selectAllItemsDefault($event.target.checked)"
													 :checked="selectAllDefault"
											  >
											  <input v-else type="checkbox"
													 @change="selectAllItems($event.target.checked)"
													 :checked="selectAll"
											  >
											  <span class="checkmark"></span>
										  </label>

									  </th>
									  <th
											  @click="sortByField('name')"
											  style="width: 250px; color: #222222 !important; font-size: 16px !important; font-weight: 500; cursor: pointer;">
										  <div style="display: flex;">
											  管理名
											  <div style="display: grid; position: relative; bottom: 2px;">
												  <i class="fal fa-angle-up" style="font-size: 12px; color: #222222 !important; position: relative; top: 3px; font-weight: bold;"></i>
												  <i class="fal fa-angle-down" style="font-size: 12px; color: #222222 !important; font-weight: bold;"></i>
											  </div>
										  </div>
									  </th>
									  <th class="btnth" style="width:300px; color: #222222 !important; font-size: 16px !important; font-weight: 500;">内容</th>
									  <th class="siteth"
										  @click="sortByField('created_at')"
										  style="width: 120px; color: #222222 !important; font-size: 16px !important; font-weight: 500; cursor: pointer;">
										  <div style="display: flex;">
											  作成日
											  <div style="display: grid; position: relative; bottom: 2px;">
												  <i class="fal fa-angle-up" style="font-size: 12px; color: #222222 !important; position: relative; top: 3px; font-weight: bold;"></i>
												  <i class="fal fa-angle-down" style="font-size: 12px; color: #222222 !important; font-weight: bold;"></i>
											  </div>
										  </div>
									  </th>
									  <th class="siteth"
										  @click="sortByField('updated_at')"
										  style="width: 120px; color: #222222 !important; font-size: 16px !important; font-weight: 500; cursor: pointer;">
										  <div style="display: flex;">
											  最終編集日
											  <div style="display: grid; position: relative; bottom: 2px;">
												  <i class="fal fa-angle-up" style="font-size: 12px; color: #222222 !important; position: relative; top: 3px; font-weight: bold;"></i>
												  <i class="fal fa-angle-down" style="font-size: 12px; color: #222222 !important; font-weight: bold;"></i>
											  </div>
										  </div>
									  </th>
									  <th class="btnth"
										  style="width: 170px;color: #222222 !important; font-size: 16px !important; font-weight: 500;"
										  :style="($refs['modal-preview-send-test'] && $refs['modal-preview-send-test'].list_user_quick_reply && $refs['modal-preview-send-test'].list_user_quick_reply.length > 0) ? {width : '170px'} : {width : '260px'}"
									  >クイックテスト</th>

									  <th style="width: 120px; color: #222222 !important;
                                             padding-left: 20px; font-size: 16px !important; font-weight: 500;">操作</th>
								  </tr>
								  </thead>
								  <tbody>

								  <tr v-if="group_open == 0 && items_default && items_default.length > 0" v-for="(item, index) in items_default"
									  :id="'row-item-' + item.id"
								  	@click="openPageEdit(item.id, item.type, $event)"
								  >
									  <td class="input_check">
										  {{--                                            <input type="checkbox" name="check_item[]" :value="item.id" v-model="selected">--}}

										  <label class="c-checkbox">
											  <input type="checkbox" :value="item.id"
													 v-model="selected"
											  >
											  <span class="checkmark"></span>
										  </label>
									  </td>
									  <td class="msg-text">
										  <p class="text-left temp_name template_name">
											  <a v-if="item.type == 'group'" :href="'/basic/template-v2/create-group?template_id='+item.id" v-html="item.name"
												 style="text-decoration: none; "></a>
											  <a v-else :href="'/basic/template-v2/add-template?template_child_id='+item.id" v-html="item.name"
												 style="text-decoration: none;"></a>
										  </p>
									  </td>

									  <td class="message msg-text" v-if="item.type == 'text'">ddd
										  @{{item.content|shortContent}}
									  </td>
									  <td class="message" v-if="item.type == 'image'">
										  <div class="media">
											  <div class="media-right" @click="showModalPreviewTemplateChild(item.id)">
												  <img style="font-weight: 500; font-size: 16px;"
													   :src="
                                                    item.content && item.content.startsWith('http') ? item.content : ( item.image_server ? item.image_server : '