@extends('layout.basic.main')
@section('title',(isset( $_GET['type']) && $_GET['type'] == 'copy') ? 'テンプレート作成（コピー）':'テンプレート作成（作成・編集）')
@push('css')

<link rel="stylesheet" href="/css/msg_template/add_group.css?v={{config('sns-line.version')}}">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">

<style>

    .custom-toast {
        background: transparent;
        background-color: #E5F5EC !important;
        text-align: center;
        color: #08BF5A;
        width: 250px;
        border-radius: 15px;
        align-items: center;
        display: flex;
        left: 48%;
        justify-content: center;
        padding: 8px 20px;
        font-size: 12px !important;
    }

    .toastify-avatar {
        width: 1.2em;
        height: 1.2em;
        margin-right: 10px;
    }

    div.ui-sortable-placeholder.row.mt-item-fol   {
        border: 1px dashed #08BF5A;
        border-radius: 5px;
        visibility: visible !important;
        height: 41.42px;
    }
</style>
@endpush
@section('content')

<article id="add_template_group" class="sub" v-cloak>
    <section class="taglist tmpadd">
        <div style="width: 95%; display: flex; padding-bottom: 10px;">
            <div class="col-sm-3">
                <h2 class="font-weight-bold" style="font-size: 20px !important; margin-bottom: 0 !important; padding-left: 0; padding-bottom: 0; color: #222222;">
                    テンプレート作成
                </h2>
                <a style="font-weight: 400; font-size: 14px; text-decoration: underline; color: #888888; cursor: pointer;"
                data-toggle="modal" data-target="#modal_spec_count">テンプレートの配信カウントについて</a>
            </div>
            <div class="col-sm-9">
                <div class="row">
                    <div class="col-sm-6 col-md-5">
                        <div class="form-group">
                            <div class="manage_name">
                                管理名
                                <p class="text-right" style="font-weight: normal; top: 10px; font-size: 13px; color: #8F9293; margin-left: auto; position: relative;" id="count_title">
                                    @{{ countTex(template_name) }}/20
                                </p>
                            </div>
                            {{-- [#41187] maxlength=20: trình duyệt tự cắt khi gõ VÀ khi dán (chuột phải/Ctrl+V),
                                 nên v-model luôn nhận tối đa 20 ký tự -> bộ đếm hiện 20/20 và lưu được. --}}
                            <input @keyup="keyupInputTemplateName($event)" type="text" maxlength="20"
                                style="font-weight: lighter; border: 1px solid #DDDDDD; font-size: 16px; padding-left: 12px; color: #2B2F36;"
                                :value="decode(template_name)" class="form-control" name="template_name" v-model="template_name" id="template_name"/>
                            <span class="tmp_err text-danger park_name_error font-weight-bold" v-show="show_message_error_name">名前は必須です。</span>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-5">
                        <div class="form-group">
                            <div class="folder_name">フォルダ</div>
                            <select name="category_select" id="category_select" class="form-control my_class" v-model="folder_id" 
                                    style="font-weight: lighter; border: 1px solid #DDDDDD; height: 35px; font-size: 14px; color: #2B2F36; ">
                                <option value="0" :selected="folder_id == 0" style="font-weight: lighter;">未分類</option>
                                @if(isset($categories) && count($categories) > 0)
                                @foreach($categories as $category)
                                <option :selected="folder_id == '{{$category->id}}'" value="{{$category->id}}" style="font-weight: lighter;" >{!! $category->name !!}</option>
                                @endforeach
                                @endif
                            </select>
                        </div>
                    </div>
                </div>
                <input type="hidden" name="array_sort" v-model="arrayTemplateChildSort" />
            </div>
        </div>
        <div class="sep_line" style="width: 85%; border-bottom: 1px solid #DDDDDD;"></div>
        @if(!empty($template))
        <div class="col-sm-12 list-template-child clear-fix">
            <!-- <div class="title_list_template_child col-sm-12 col-md-10">
                <label class="title_table_template_child" style="display: flex; align-items: center;margin-bottom: 0;">
                    メッセージ登録
                    <a href="/basic/template-v2/add-template?template_group_id={{ !empty($template) ? $template->id : null }}" style="margin-left: 15px;">
                        <span class="line-icon" style="line-height: 35px;"><i class="far fa-plus-circle "></i></span>
                    </a>
                </label>
                <div>
                    <button type="button" class="btn btn-sns-line btn-sns-line-light" @click="showModalPreview()">
                        プレビュー
                    </button>
                </div>
            </div> -->
            <div class="text-center add_success" id="success_add" style="display: none;">
              <i class="fal fa-check-circle" style="font-weight: 400;"></i> 変更内容が保存されました
            </div>
            <div style="font-weight: bold; font-size: 16px; margin-bottom: 15px; color: #2B2F36;">メッセージ登録</div>
            <div style="display: flex; width: 83%;">
                <div>
                    <a href="/basic/template-v2/add-template?template_group_id={{ !empty($template) ? $template->id : null }}" 
                        class="btn btn-sns-line btn-sns-line-success btn_add_temp">
                        <i class="far fa-plus" style=" padding-right: 5px;"></i>メッセージ追加
                    </a>
                </div>
                <div style="margin-left: auto;">
                    <!-- <button type="button" class="btn btn-sns-line btn-sns-line-light" @click="showModalPreview()">
                        プレビュー
                    </button> -->
                    <button type="button" class="btn btn-sns-line btn-sns-line-outline-default btn_combine"
                            @click="viewTemplateDetailPreview({{!empty($template) ? $template->id : ''}})"
                           >
                        プレビュー・テスト
                    </button> 
                    <button type="button" class="btn btn-sns-line btn-sns-line-outline-default btn_sort" data-toggle="modal" data-target="#modal_sort_folder"
                    v-on:click="openModalChildSort()">
                        並べ替え
                    </button>
                    <button type="button" class="btn btn-sns-line btn-sns-line-outline-default btn_option_send"
                            :class="{'on': is_delay_message}"
                    v-on:click="openDelayMessage()">
                        送信オプション / @{{ is_delay_message ? 'ON' : 'OFF' }}
                    </button>
                    <button type="button" class="btn btn-sns-line btn-sns-line-outline-default btn_delete"
                            :class="{on: selected.length > 0}"
                            :disabled="(selected.length == 0) ? true : false" @click="deleteTemplateInGroupSelect(selected)" >
                        一括削除
                    </button>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12 col-md-10">
                    <table class="table tbl_setting_action ">
                        <tbody>
                            <tr v-if="template_child_table.length == 0">
                                <th style="width: 3%;">
{{--                                    <input type="checkbox" name="" value="" v-model="selectAll" style="margin-bottom: 5px;">--}}

                                    <label class="c-checkbox">
                                        <input type="checkbox" name="" value="" v-model="selectAll">
                                        <span class="checkmark"></span>
                                    </label>
                                </th>
{{--                                <th style="width: 15%; font-size: 16px !important; font-weight: 500;">タイプ</th>--}}
                                <th style="width: 60%; font-size: 16px !important; font-weight: 500;" class="text-center">内容</th>
                                <th style="width: 22%; padding-left: 25px; font-size: 16px !important; font-weight: 500;">操作</th>
                            </tr>
                            <tr v-else>
                                <th style="width: 3%;">
{{--                                    <input type="checkbox" name="" value="" v-model="selectAll" style="margin-bottom: 5px;">--}}
                                    <label class="c-checkbox">
                                        <input type="checkbox" name="" value="" v-model="selectAll">
                                        <span class="checkmark"></span>
                                    </label>
                                </th>
{{--                                <th style="width: 15%; font-size: 16px !important; font-weight: 500;">タイプ</th>--}}
                                <th style="width: 60%; font-size: 16px !important; font-weight: 500;" class="text-center">内容</th>
                                <th style="width: 22%; border-left: 1px solid #DDDDDD; padding-left: 25px; font-size: 16px !important; font-weight: 500;">操作</th>
                            </tr>
                        </tbody>
                        <tbody style="border-top: none;">
                            <tr v-for="(item, index) in template_child_table">
                                <td>
{{--                                    <input type="checkbox" name="" :value="item.id" v-model="selected" style="margin-bottom: 3px;">--}}

                                    <label class="c-checkbox">
                                        <input type="checkbox" name="" :value="item.id" v-model="selected">
                                        <span class="checkmark"></span>
                                    </label>
                                </td>
{{--                                <td class="text-left" style="color: #2B2F36; font-weight: 500;">--}}
{{--                                    <span class="item_type" v-if="item.type == 'text'">テキスト</span>--}}
{{--                                    <span class="item_type" v-else-if="item.type == 'image'">画像</span>--}}
{{--                                    <span class="item_type" v-else-if="item.type == 'stamp'">スタンプ</span>--}}
{{--                                    <span class="item_type" v-else-if="item.type == 'form'">カルーセル</span>--}}
{{--                                    <span class="item_type" v-else-if="item.type == 'location'">位置情報</span>--}}
{{--                                    <span class="item_type" v-else-if="item.type == 'introduction'">紹介</span>--}}
{{--                                    <span class="item_type" v-else-if="item.type == 'video'">動画</span>--}}
{{--                                    <span class="item_type" v-else-if="item.type == 'voice'">音声</span>--}}
{{--                                </td>--}}
                                <td class="message" v-if="item.type == 'text'">
                                    <div style="overflow: hidden; white-space: nowrap;text-overflow: ellipsis; font-size: 16px; color: #2B2F36; font-weight: 500;">
                                        @{{item.content|shortContent}}
                                    </div>
                                </td>
                                <td class="message" v-if="item.type == 'image'" >
                                    <div class="media" style="overflow: hidden; white-space: nowrap;text-overflow: ellipsis;">
                                        <div class="media-right" v-on:click="viewModalPreviewImg(item.id)">
                                            <img :src="(item.image_server ? item.image_server : '