@extends('layout.basic.main')
@push('css')
<link rel="stylesheet" href="/css/conversion/style.css" type="text/css">
@endpush
@section('content')
    <div class="container-fluid pc-body">
        <div class="row">
            <div class="row" id="vue-conversion-form" v-cloak>
                <div class="col-sm-12">
                    @if(session('error'))
                        <div class="alert alert-danger alert-dismissable fade in">
                            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                            <ul>
                                <ul>
                                    <li>{!! session('error') !!}</li>
                                </ul>
                            </ul>
                        </div>
                    @endif
                    @if(session('success'))
                        @push('js')
                        <script type="application/javascript">
                            setTimeout(function(){ location.href = '/basic/form-answer/setting/'+form_id}, 1000);
                        </script>
                        @endpush
                        <div class="alert alert-success alert-dismissable fade in">
                            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                            <ul>
                                <li>{!! session('success') !!}</li>
                            </ul>
                        </div>
                    @endif
                </div>
                <div class="col-sm-12">
                    <h2 style="font-size: 20px; color: #222222; font-weight: bold; padding: 10px 10px 10px 0">@{{ form_name }}
                    </h2>
                    <hr>
                    <form method="POST" :action="'/basic/form-answer/setting/store/'+form_id" accept-charset="UTF-8"  id="frm_settings">
                        <input name="_token" type="hidden" value="{!! csrf_token() !!}">
                        <div class="row">
                            {{--Tags--}}
                            <div class="col-sm-6">
                                <div class=" form-group">
                                    <label for="tag_id"> 回答時に追加するタグ</label>
                                    <div class="tag-selector">
                                        <div class="row" id="tag_idSelector">
                                            <div class="col-sm-5">
                                                <div class="group-selector">
                                                    <div class="scrollbar_left style-1">
                                                        <div class="nano has-scrollbar force-overflow style-1" style="height: 180px;">
                                                            <div class="nano-content" tabindex="0"
                                                                 style="right: -17px;">
                                                                <div class="nano-inner">
                                                                    <a
                                                                       id="group_0"
                                                                       v-on:click="showSelectTags(0)"
                                                                       v-bind:class="group_tag_open == 0 ? '':'collapsed'"
                                                                       class="collapse-opener"
                                                                       role="button" data-toggle="collapse"
                                                                       aria-expanded="false"
                                                                       data-accordion="tag_editor_tag_id"
                                                                       aria-controls="tag_idCollapse0">
                                                                        <i class="glyphicon glyphicon-folder-collapse"></i>
                                                                        未分類(@{{ items_tag_default.length }})
                                                                    </a>
                                                                    <a v-for="(group_tag, index) in sortedTagsCategories"
                                                                       :id="'group_'+group_tag.id"
                                                                       v-bind:class="group_tag_open == group_tag.id ? '':'collapsed'"
                                                                       v-on:click="showSelectTags(group_tag.id)"
                                                                       class="collapse-opener"
                                                                       role="button" data-toggle="collapse"
                                                                       aria-expanded="false"
                                                                       data-accordion="tag_editor_tag_id"
                                                                       :aria-controls="'tag_idCollapse'+group_tag.id">
                                                                        <i class="glyphicon glyphicon-folder-collapse"></i>
                                                                        @{{ group_tag.name }}(@{{ group_tag.count }})
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-sm-7">
                                                {{--do not tags--}}
                                                <div class="radio">
                                                    <label>
                                                        <input type="radio" name="tag_id" value="0" checked=""
                                                               data-tagname="タグを選択しない"  v-on:change="chooseTags('タグを選択しない')"> タグを選択しない
                                                    </label>
                                                </div>
                                                <hr>
                                                <div class="fade fade-flash collapse"
                                                     data-accordion="tag_editor_tag_id"
                                                     aria-expanded="false" style="height: 0px;">
                                                    <p style="text-align: center;font-weight: bold;margin-top: 0.5em;">
                                                        分類を選択して下さい</p>
                                                </div>
                                                {{--display tags--}}
                                                <div class="scrollbar_right style-1">
                                                    <div class="nano has-scrollbar nano-bar-force force-overflow style-1" style="height: 100px;"
                                                         id="tag_idtagradiopart">
                                                        <div class="nano-content" tabindex="0"
                                                             style="right: -17px;">
                                                            <div class="nano-inner">
                                                                <div class="fade fade-flash collapse"
                                                                     v-bind:class="group_tag_open==0?'in':''"
                                                                     id="tag_idCollapse0"
                                                                     data-accordion="tag_editor_tag_id"
                                                                     aria-expanded="true">
                                                                    <div class="radio tag-radio-block" v-for="(tag, index) in items_tag_default">
                                                                        <label>
                                                                            <input type="radio" name="tag_id"
                                                                                   :checked="(form_setting.tag_id != null && form_setting.tag_id == tag.id)"
                                                                                   :value="tag.id"
                                                                                   v-on:change="chooseTags(tag.name)"
                                                                                   :data-tagname="tag.name">
                                                                            <span>@{{ tag.name }}</span>
                                                                        </label>
                                                                    </div>
                                                                </div>
                                                                <div v-for="(tag_item, index) in items_tag"
                                                                     class="fade fade-flash collapse"
                                                                     v-bind:class="group_tag_open==tag_item.group_id?'in':''"
                                                                     :id="'tag_idCollapse'+tag_item.group_id"
                                                                     data-accordion="tag_editor_tag_id"
                                                                     aria-expanded="true">
                                                                    <div class="radio tag-radio-block" v-for="(tag, index) in tag_item.tags">
                                                                        <label>
                                                                            <input type="radio" name="tag_id"
                                                                                   :checked="(form_setting.tag_id != null && form_setting.tag_id == tag.id)"
                                                                                   :value="tag.id"
                                                                                   v-on:change="chooseTags(tag.name)"
                                                                                   :data-tagname="tag.name">
                                                                            <span>@{{ tag.name }}</span>
                                                                        </label>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                {{--search tags--}}
                                                <div class="selected-tag" id="tag_idCollapseSelected">
                                                    選択中：<span>{!! $tag_name !!}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {{--Template--}}
                            <div class="col-sm-6">
                                <div class=" form-group">
                                    <label for="egg_id"> 回答時にテンプレートを送信</label>
                                    <div class="tag-selector">
                                        <div class="row" id="temp_idSelector">
                                            <div class="col-sm-5 twin-selector-left">
                                                <div class="group-selector">
                                                    <div class="nano-parent scrollbar_left style-1">
                                                        <div class="nano nano-bar-force has-scrollbar force-overflow style-1" style="height: 180px;">
                                                            <div class="nano-content" tabindex="0"
                                                                 style="right: -17px;">
                                                                <div class="nano-inner">
                                                                    <a id="group_temp0"
                                                                       v-bind:class="group_template_open == 0 ? '':'collapsed'"
                                                                       v-on:click="showSelectTemps(0)"
                                                                       class="collapse-opener"
                                                                       role="button"
                                                                       data-toggle="collapse"
                                                                       aria-expanded="false"
                                                                       data-accordion="tag_editor_egg_id"
                                                                       aria-controls="egg_idCollapse0">
                                                                        <i class="glyphicon glyphicon-folder-collapse"></i>
                                                                        未分類(@{{ items_template_default.length }})
                                                                    </a>
                                                                    <a v-for="(group_temp, index) in sortedTempsCategories"
                                                                       :id="'group_temp'+group_temp.id"
                                                                       v-bind:class="group_template_open == group_temp.id ? '':'collapsed'"
                                                                       v-on:click="showSelectTemps(group_temp.id)"
                                                                       class="collapse-opener"
                                                                       role="button"
                                                                       data-toggle="collapse"
                                                                       aria-expanded="false"
                                                                       data-accordion="tag_editor_egg_id"
                                                                       aria-controls="egg_idCollapse0">
                                                                        <i class="glyphicon glyphicon-folder-collapse"></i>
                                                                        @{{ group_temp.name }}(@{{ group_temp.count }})
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-sm-7 twin-selector-right">
                                                <div class="radio">
                                                    <label>
                                                        <input type="radio" name="egg_id" value="0" checked=""
                                                               data-tagname="選択しない"  v-on:change="chooseTemps('選択しない')"> 選択しない
                                                    </label>
                                                </div>
                                                <hr>
                                                <div class="fade fade-flash collapse"
                                                     data-accordion="tag_editor_egg_id"
                                                     aria-expanded="false" style="height: 0px;">
                                                    <p style="text-align: center;font-weight: bold;margin-top: 0.5em;">
                                                        分類を選択して下さい</p>
                                                </div>
                                                <div class="nano-parent scrollbar_right style-1">
                                                    <div class="nano has-scrollbar nano-bar-force force-overflow style-1" style="height: 100px;"
                                                         id="egg_iditemradiopart">
                                                        <div class="nano-content" tabindex="0"
                                                             style="right: -17px;">
                                                            <div class="nano-inner">

                                                                <div class="fade fade-flash collapse"
                                                                     v-bind:class="group_template_open==0?'in':''"
                                                                     id="temp_idCollapse0"
                                                                     data-accordion="tag_editor_egg_id"
                                                                     aria-expanded="true">
                                                                    <div class="radio" v-for="(temp, index) in items_template_default">
                                                                        <label>
                                                                            <input type="radio" name="egg_id"
                                                                                   :checked="(form_setting.template_id != null && form_setting.template_id == temp.id)"
                                                                                   v-on:change="chooseTemps(temp.name)"
                                                                                   :value="temp.id"
                                                                                   :data-tagname="temp.name">
                                                                            <span>@{{ temp.name }}</span>
                                                                        </label>
                                                                    </div>
                                                                </div>

                                                                <div v-for="(temp_item, index) in items_template"
                                                                     class="fade fade-flash collapse"
                                                                     data-accordion="tag_editor_egg_id"
                                                                     :id="'temp_idCollapse'+temp_item.group_id"
                                                                     v-bind:class="group_template_open==temp_item.group_id?'in':''"
                                                                     aria-expanded="false" style="height: 0px;">
                                                                    <div class="radio" v-for="(temp, index) in temp_item.templates">
                                                                        <label>
                                                                            <input type="radio" name="egg_id"
                                                                                   :checked="(form_setting.template_id != null && form_setting.template_id == temp.id)"
                                                                                   v-on:change="chooseTemps(temp.name)"
                                                                                   :value="temp.id"
                                                                                   :data-tagname="temp.name">
                                                                            <span>@{{ temp.name }}</span>
                                                                        </label>
                                                                    </div>

                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="selected-tag" id="egg_idCollapseSelected">
                                                    選択中：<span>{!! $tem_name !!}</span>
                                                </div>
                                                <div class="row" style="margin-bottom: 0.5em; margin-top: 0.5em;">
                                                    <div class="col-xs-6">
                                                        <a id="egg_idpreviewOpener" class="btn btn-xs btn-default btn-block" v-on:click="previewTemplate()">プレビュー</a></div>
                                                    <div class="col-xs-6"><a id="egg_idmessageTester"  v-on:click="sendForTest()" class="btn btn-xs btn-primary btn-block">テスト</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <span id="egg_idModalCaller" style="display: none;" data-type="egg" type="button"
                                              data-toggle="modal" data-target="#messageModal">
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="clearfix"></div>
                            {{--Scenario--}}
                            <div class="col-sm-6">
                                <div class="panel panel-default">
                                    <div class="panel-body">
                                        <label for="a_content_group_id"
                                               style="margin-top:0.5em"> 回答時にステップを操作</label>
                                        <select class="form-control" id="scenario_id"
                                                name="scenario_id">
                                            <option value="-1" :selected="form_setting.scenario_id == -1 || !form_setting.scenario_id">変更しない</option>
                                            <option value="0" :selected="form_setting.scenario_id === 0">購読中止・予約キャンセル</option>
                                            <option v-for="(item_scenario, index) in scenario" :value="item_scenario.id"
                                                    :selected="form_setting.scenario_id == item_scenario.id">@{{ item_scenario.name }}</option>
                                        </select>
                                        <div id="a_step_to_setting" v-show="form_setting.scenario_id > 0">
                                            <div class="radio">
                                                <label class="">
                                                    <input id="a_step_to_change_0" class="a_step_to_change"
                                                           :checked="(form_setting.scenario_start_day  == null && form_setting.scenario_start_time == null)" name="a_step_to_change"
                                                           type="radio" value="0">
                                                    (新規)最初から／(再開)読んだところから
                                                </label>
                                            </div>
                                            <div class="radio">
                                                <label class="">
                                                    <input id="a_step_to_change_1" class="a_step_to_change"
                                                           :checked="(form_setting.scenario_start_day != null || form_setting.scenario_start_time != null)"
                                                           name="a_step_to_change" type="radio" value="1">
                                                    途中から始める
                                                </label>

                                                <div class="form-inline" id="a_step_to_move"
                                                     v-show="form_setting.scenario_start_day != null || form_setting.scenario_start_time != null">
                                                    <input class="form-control input-sm" min="0"
                                                           style="width:6em;"
                                                           name="a_step_to_date" type="number" :value="form_setting.scenario_start_day">
                                                    日目
                                                    <input class="timepicker form-control input-sm"
                                                           name="a_step_to_time"
                                                           type="text" :value="form_setting.scenario_start_time">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="clearfix"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <input class="btn btn-success btn-lg pull-right" type="button" value="登録" v-on:click="createSetting()">
                    </form>
                    <hr>
                    <br>
                    <br>
                    <a href="{!! route('form_answer.index') !!}">一覧に戻る</a>
                    <br>
                </div>
            </div>
        </div>
        <span class="id_page" data-id="form-answer-setting"> </span>
        @include('layout.modal_test_list.modal_list_test')
    </div>
@endsection
@push('js')
<script>
    var form_id = "{!! $form_id !!}";
    var form_setting = ;
    var group_tag_open = {!! $group_tag_open !!};
    var group_template_open = {!! $group_template_open !!};
    var token = "{!! csrf_token() !!}";
</script>
<script src="/chat_files/bootstrap-timepicker.js"></script>
<script src="/plugins/loadingoverlay/loadingoverlay.min.js"></script>
<script type="application/javascript" src="/js/form_answer/setting.js?v={{config("sns-line.version")}}"></script>
<script type="application/javascript" src="/js/popup_send_test-message.js?v={{config("sns-line.version")}}"></script>
@endpush