@extends('layout.basic.main')
@push('css')

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

<article id="add_template_group" class="sub" v-cloak>
    <section class="taglist tmpadd">
        <h2 class="font-weight-bold" style="font-size: 23px !important;">テンプレート作成</h2>
        <div class="col-sm-12">
            <div class="row">
                <div class="col-sm-6 col-md-5">
                    <div class="form-group">
                        <label>管理名</label>
                        <input @keyup="keyupInputTemplateName($event)" type="text" :value="decode(template_name)" class="form-control" name="template_name" style="margin-top: 20px;"/>
                        <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">
                        <label>フォルダ</label>
                        <select name="category_select" id="category_select" class="form-control my_class" v-model="folder_id" style="margin-top: 20px;">
                            <option value="0" :selected="folder_id == 0">未分類</option>
                            @if(isset($categories) && count($categories) > 0)
                            @foreach($categories as $category)
                            <option :selected="folder_id == '{{$category->id}}'" value="{{$category->id}}">{!! $category->name !!}</option>
                            @endforeach
                            @endif
                        </select>
                    </div>
                </div>
            </div>
            <input type="hidden" name="array_sort" v-model="arrayTemplateChildSort" />
        </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/message-template/add?park_id={{ !empty($template) ? $template->id : null }}" style="margin-left: 15px;">
                        <span class="line-icon" ><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="row">
                <div class="col-sm-12 col-md-10">
                    <table class="table tbl_setting_action ">
                        <tbody>
                            <tr>
                                <th style="width: 250px;">タイプ</th>
                                <th class="text-center">内容</th>
                                <th style="width: 220px;"></th>
                            </tr>
                        </tbody>
                        <tbody style="border-top: none;">
                            <tr v-for="(item, index) in template_child">
                                <td class="text-left font-weight-bold">
                                    <span v-if="item.type == 'text'">テキスト</span>
                                    <span v-else-if="item.type == 'image'">画像</span>
                                    <span v-else-if="item.type == 'stamp'">スタンプ</span>
                                    <span v-else-if="item.type == 'form'">カルーセル</span>
                                    <span v-else-if="item.type == 'location'">位置情報</span>
                                    <span v-else-if="item.type == 'introduction'">紹介</span>
                                    <span v-else-if="item.type == 'video'">動画</span>
                                    <span 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;">
                                        @{{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">
                                            <img :src="(item.image_server ? item.image_server : '