@extends('layout.basic.main')
@push('css')
    <link rel="stylesheet" href="/css/tag/style.css?v={{config("sns-line.version")}}" xmlns:v-on="http://www.w3.org/1999/xhtml"
          xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
    <style>
        .bootstrap-timepicker-widget table td input {
            width: 40px !important;
        }

        #btn-send-1, #btn-send-2 {
            display: block;
            border-radius: 5px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            padding: 5px 10px;
            background: #4A96B2;
            color: #fff;
            width: 100%;
            margin-top: 5px;
            border: 0;
        }
        i.glyphicon-folder-open {
            color: #f0ad4e !important;
        }
    </style>
@endpush
@section('content')
    <article class="" id="item_vuelist_template">
        <form action="{{route('updateTag')}}" method="post" id="formEditTag">
            {{  csrf_field() }}
            <section class="taglist_detail">
                <input type="text" name="tag_id" value="{{$tag}}" hidden>
{{--                @foreach($find_tag as $f)--}}
{{--                    <h2 style="font-size: 20px; color: #222222; font-weight: bold; padding: 10px 10px 10px 0;">タグ ＜{{$f->name}}＞ 詳細設定</h2>--}}
{{--                @endforeach--}}
                <section class="tagdetail_blc">
                    <h3 style="font-weight: bold">タグ追加時のアクション</h3>
{{--                    <p>ボタンや自動返信、フォーム作成などでタグが追加された時に行う動作を設定します。</p>--}}
{{--                    <p class="redtxt">管理画面（友だちリストまたは友だち詳細）からタグを手動で設定する場合、アクションは実行されません。</p>--}}
                    <div class="separate_tagdetail">
                        <div class="row" style="width: 100%; margin-top: 20px">
                            <div class="col-xs-6">
                                <div style="display: flex">
                                    <input class="form-control" id="tag_name" name="tag_name" value="{{ $getTag->name }}">
                                    <div id="count_text_name" style="width: 110px;margin-top: 6px;margin-left: 16px;font-family: 'Times New Roman' !important;">0/50文字</div>
                                </div>
                                <div class="text-danger" id="error_name_tag_edit" style="font-family: 'Times New Roman' !important;color: red"></div>
                            </div>
                            <div class="col-xs-6">
                                <select class="form-control" name="folder_id">
                                    <option value="0" @if($getTag->category_id == 0) selected @endif>未分類</option>
                                    @foreach($folders as $folder)
                                        <option value="{{ $folder->id }}" @if($getTag->category_id == $folder->id) selected @endif>{{ $folder->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="tagdetail_left" id="abc" v-cloak>
                            <h4>テンプレートを送信</h4>
                            <div class="tem_choice">
                                <input type="hidden" ref="txt" value="{{$add_template_id}}">
                                <ul style="height: 300px;overflow: scroll">
                                    <li>
                                        <a class="collapsed collapse-opener" role="button"
                                           data-toggle="collapse" href="" aria-expanded="false" id="group_0"
                                           data-id="0">
                                                    <span v-on:click="showGroup(0)" class="display_category"
                                                          :class="(current_group == 0)?'active':''"
                                                    >
                                                        <i class="glyphicon "
                                                              :class="(current_group == 0)?'glyphicon-folder-open':'glyphicon-folder-collapse'"
                                                              style="margin-right: 10px"></i>未分類(@{{ count_default }})
                                                    </span>
                                        </a>
                                    </li>
                                    <li>
                                        <a v-for="(category,index) in groups" class="collapsed collapse-opener"
                                           :class="(group_select!=0 && category.id == current_group)?'active':''"
                                           role="button"
                                           data-toggle="collapse" href="" aria-expanded="false"
                                           :id="'second_group_'+category.id"
                                           :data-id="'second_'+category.id"
                                           :data-name="category.name"
                                           v-bind:class="(category.id == group_open && category.id =='second')?'active':'folder-close'"
                                           v-on:click="showGroup(category.id, 'second')" class="">
                                            <i class="glyphicon" :class="(group_select!=0 && category.id == current_group)?'glyphicon-folder-open':'glyphicon-folder-collapse'"></i> @{{ category.name }}
                                        </a>
                                    </li>
                                </ul>
                                <div class="choice_detail" style="height: 300px;overflow: scroll">
                                    <p class="nochoice">
                                        <input type="radio" name="select_template" data-name="選択しない"
                                               v-model="template_selected"
                                               v-on:click="showTemplate()" value="0"> 選択しない
                                    </p>
                                    <ul v-if="(current_group == 0 || current_group == null) && items_default.length > 0">
                                        <li v-for="(item,index) in items_default">
                                            <input type="radio" name="select_template"
                                                   v-model="template_selected"
                                                   :data-name="item.name"
                                                   v-on:click="showTemplate()" :value="item.id"
                                                   :checked="{{$add_template_id}} == item.id">
                                            @{{item.name }}
                                        </li>
                                    </ul>
                                    <ul v-if="group_open == 0  && items_default.length == 0">
                                        <li>分類を選択して下さい</li>
                                    </ul>
                                    <ul v-if="current_group != 0 && (typeof items['templates'] == 'undefined' || items['templates'].length > 0)"
                                    >
                                        <li style="list-style: none" v-for="(item,index) in items['templates']"
                                            :id="'template_'+item.id"
                                            :data-id="item.id">
                                            <input type="radio" name="select_template"
                                                   v-model="template_selected"
                                                   :data-name="item.name"
                                                   v-on:click="showTemplate()" :value="item.id" :data-id="item.id" :checked="{{$add_template_id}} == item.id">
                                            @{{ item.name }}
                                        </li>
                                    </ul>
                                    <ul v-if="group_open != 0  && (typeof items['templates'] != 'undefined' && items['templates'].length == 0)">
                                        <li>分類を選択して下さい</li>
                                    </ul>
                                </div>
                            </div>

                            <p class="choice_submit">選択中：

                                <span v-if="template_selected!='' && _.find(items_default,{'id':template_selected}) != null">@{{_.find(items_default,{'id':template_selected})['name']}}</span>
                                <span v-if="template_selected!='' && _.find(items['templates'],{'id':template_selected}) != null">@{{_.find(items['templates'],{'id':template_selected})['name']}}</span>
                            </p>
{{--                            <div class="btn">--}}
{{--                                <button type="button" id="btn-send-1">テスト</button>--}}
{{--                            </div>--}}
                        </div>
                        <div class="tagdetail_right">
                            <div class="inner">
                                <h4>ステップを購読</h4>
                                <select name="scenario" id="">
                                        <option value="-1" @if($scenario_id == -1 || $scenario_id == null) selected @endif>変更しない</option>
                                        <option value="0" @if($scenario_id === 0) selected @endif>購読中止・予約キャンセル</option>
                                        @foreach($get_scenario as $scenario)
                                            <option value="{{$scenario->id}}" @if($scenario->id == $scenario_id) selected @endif>{{$scenario->name}}</option>
                                        @endforeach
                                </select>
                                @if($scenario_time === null && $scenario_day === null)
                                    <p><input type="radio" name="set_up_time" value="0" checked>（新規）最初から/（再開）読んだところから</p>
                                    <p>
                                        <input type="radio" name="set_up_time" value="1">
                                        途中から始める <input type="number" name="day" placeholder="0" value="0" min="0">
                                        日目 <input class="timepicker input-sm" name="time" value="00:00:00" type="text" placeholder="00:00:00">
                                    </p>
                                @else
                                    <p><input type="radio" name="set_up_time" value="0">（新規）最初から/（再開）読んだところから</p>
                                    <p>
                                        <input type="radio" name="set_up_time" value="1" checked>
                                        途中から始める <input type="number" name="day" placeholder="0" value="{{isset($scenario_day) ? $scenario_day : '0'}}" min="0">
                                        日目 <input class="timepicker input-sm" name="time" type="text"
                                                  value="{{isset($scenario_time) ? $scenario_time : '00:00:00'}}">
                                    </p>
                                @endif
                                <script src="/chat_files/jquery.min.js"></script>
                                <script src="/chat_files/bootstrap-timepicker.js"></script>
                                <script>
                                    $(function () {
                                        $('.timepicker').timepicker({
                                            minuteStep: 1,
                                            template: 'dropdown',
                                            appendWidgetTo: 'body',
                                            showSeconds: true,
                                            minuteStep: 1,
                                            secondStep: 1,
                                            showMeridian: false
                                        });
                                    });
                                </script>
                            </div>

                            <div class="add-rich-menu" style="margin-top: 30px; margin-bottom: 30px">
                                <div class="row">
                                    <div class="col-sm-8">
                                        <h4>
                                            リッチメニュー表示
                                        </h4>
                                        <div class="input-group">
                                            <span class="input-group-addon">リッチメニュー</span>
                                            <select name="set_rich_menu" class="form-control">
                                                <option value="">指定しない</option>
                                                @foreach($getRichMenu as $rich)
                                                <option value="{{$rich->id}}" @if(isset($getTag->rich_menu_id) && $getTag->rich_menu_id == $rich->id) selected @endif>{{$rich->name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @if($is_2th_apply == 1)
                                <p>
                                    <input type="checkbox" name="check_scenario" value="1" checked> 2回目以降もタグ追加時のアクションを実行する
                                </p>
                            @else
                                <p>
                                    <input type="checkbox" name="check_scenario" value="1"> 2回目以降もタグ追加時のアクションを実行する
                                </p>
                            @endif
                        </div>
                    </div>
                </section>
                <section class="tagdetail_blc">

                    <div class="btngroup">
                        <div class="btn"><a href="{{route('tagHome')}}" class="gry" style="padding: 6px 10px; font-weight: bold; color: #51595C ">戻る</a></div>
                        <div class="btn">
                            <button type="button" id="save-edit-tag" class="grn" style="margin-top: 5px; font-weight: bold; background-color: #08BF5A !important; border-color: #08BF5A">更新</button>
                        </div>
                    </div>

                </section>
                <section class="tagdetail_blc"></section>
                <span class="id_page" data-id="basic-tag-edit"> </span>
                @include('layout.modal_test_list.modal_list_test')

            </section>

        </form>
    </article>

    @push('js')
    <script>
        var current_group = ;
        var add_template = ;
        $( "#save-edit-tag" ).click(function() {
            if($('#tag_name').val() == '' || $('#tag_name').val() == undefined){
                alert('新しいタグ名を入力してください');
            }else{
                $( "#formEditTag" ).submit();
            }
        });
    </script>
        <script src="/js/tag/v_resources.js"></script>
        <script src="/js/tag/v_item_selector.js"></script>
        <script src="/js/tag/edit.js?v={{config("sns-line.version")}}"></script>
    @endpush
@endsection