@extends('layout.basic.main')
@push('css')
    <link rel="stylesheet" href="/css/conversion/style.css?v={{config("sns-line.version")}}" type="text/css">

@endpush
@section('content')
    <div class="container-fluid pc-body">
        <div class="row">
            <div class="col-sm-12 col-xs-12">
                @if(session('errors'))
                    <div class="alert alert-danger alert-dismissable fade in">
                        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                        <ul>
                            @foreach(session('errors') as $error)
                                <li>{!! $error !!}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
                @if(session('success'))
                    @push('js')
                        <script type="application/javascript">
                            setTimeout(function () {
                                location.href = '/basic/url'
                            }, 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="row" id="vue-conversion-form" v-cloak>
                <div class="col-sm-12 sub">
                    <h2 style="font-size: 18px">コンバージョン登録
                    </h2>
                    <b style="color:red;font-weight: bold">
                        友だち特定が可能な条件について、必ずマニュアルをご確認下さい。
                    </b>
                    <hr>
                    <form method="POST" action="{!! route('editUrl', ['id' => $url->id]) !!}" accept-charset="UTF-8"
                          id="frm_conversion">
                        <input name="_token" type="hidden" value="{!! csrf_token() !!}">
                        <input name="url_id" type="hidden" :value="url_id">

                        <div class="row">
                            <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" tyle="height: 180px;">
                                                            <div class="nano-content" tabindex="0"
                                                                 style="right: -17px;">
                                                                <div class="nano-inner" v-if="edit_tag_group.length == 0">
                                                                    <a id="group_0"
                                                                       v-bind:class="group_tag_open != 0 ? 'collapsed':''"
                                                                       v-on:click="showSelectTags(0)"
                                                                       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>
                                                                        未分類(@{{ count_tag_default }})
                                                                    </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_idCollapse0">
                                                                        <i class="glyphicon glyphicon-folder-collapse"></i>
                                                                        @{{ group_tag.name }}(@{{ group_tag.count }})
                                                                    </a>
                                                                </div>
                                                                <div class="nano-inner" v-else>
                                                                    <a id="group_0"
                                                                       v-bind:class="edit_tag_group != 0 ? 'collapsed':''"
                                                                       v-on:click="showSelectTags(0)"
                                                                       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>
                                                                        未分類(@{{ count_tag_default }})
                                                                    </a>
                                                                    <a v-for="(group_tag, index) in sortedTagsCategories"
                                                                       :id="'group_'+group_tag.id"
                                                                       v-bind:class="edit_tag_group != 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_idCollapse0">
                                                                        <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">
                                                <div class="radio">
                                                    <label>
                                                        <input v-on:change="chooseTags('タグを選択しない')" type="radio"
                                                               name="tag_id" value="0"
                                                               :checked="edit_tag_item == '' || edit_tag_item.trim().length == 0 || edit_tag_item == 0"
                                                               data-tagname="タグを選択しない">
                                                        タグを選択しない
                                                    </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>
                                                <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;">
                                                            {{--No edit tag item--}}
                                                            <div class="nano-inner" v-if="edit_tag_item.length == 0">
                                                                <div class="fade fade-flash collapse"
                                                                     v-bind:class="edit_tag_group==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"
                                                                                   :value="tag.id"
                                                                                   :checked="edit_tag_item == 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="edit_tag_group==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"
                                                                                   v-on:change="chooseTags(tag.name)"
                                                                                   :value="tag.id"
                                                                                   :checked="edit_tag_item == tag.id"
                                                                                   :data-tagname="tag.name">
                                                                            <span>@{{ tag.name }}</span>
                                                                        </label>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="nano-inner" v-else>
                                                                <div class="fade fade-flash collapse"
                                                                     v-bind:class="edit_tag_group==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"
                                                                                   :value="tag.id"
                                                                                   :checked="edit_tag_item == 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="edit_tag_group == 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"
                                                                                   v-on:change="chooseTags(tag.name)"
                                                                                   :checked="edit_tag_item == tag.id"
                                                                                   :value="tag.id"
                                                                                   :checked="edit_tag_item == tag.id"
                                                                                   :data-tagname="tag.name">
                                                                            <span>@{{ tag.name }}</span>
                                                                        </label>
                                                                        <input type="hidden" :value="tag.name"
                                                                               v-if="edit_tag_item == tag.id"
                                                                               id="model_tag">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="selected-tag" id="tag_idCollapseSelected">
                                                    選択中：<span>@{{ tag_update_name }}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <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" style="padding-left: 0">
                                                <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" v-if="edit_tem_group.length == 0">
                                                                    <a id="group_temp0"
                                                                       v-bind:class="edit_tem_group != 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>
                                                                        未分類(@{{ count_template_default }})
                                                                    </a>
                                                                    <a v-for="(group_temp, index) in sortedTempsCategories"
                                                                       :id="'group_temp'+group_temp.id"
                                                                       v-bind:class="edit_tem_group != 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 }}
                                                                    </a>
                                                                </div>
                                                                <div class="nano-inner" v-else>
                                                                    <a id="group_temp0"
                                                                       v-bind:class="edit_tem_group != 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>
                                                                        未分類(@{{ count_template_default }})
                                                                    </a>
                                                                    <a v-for="(group_temp, index) in sortedTempsCategories"
                                                                       :id="'group_temp'+group_temp.id"
                                                                       v-bind:class="edit_tem_group != 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 v-on:change="chooseTemp('選択しない')" type="radio"
                                                               name="egg_id" value="0"
                                                               :checked="edit_tem_item == '' || edit_tem_item.trim().length == 0 || edit_tem_item == 0"
                                                               data-tagname="選択しない"> 選択しない
                                                    </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;">
                                                            {{--No edit tem item--}}
                                                            <div class="nano-inner"  v-if="edit_tem_group.length == 0">
                                                                <div class="fade fade-flash collapse"
                                                                     data-accordion="tag_editor_egg_id"
                                                                     id="temp_idCollapse0"
                                                                     v-bind:class="edit_tem_group==0?'in':''"
                                                                     aria-expanded="false" style="height: 0px;">
                                                                    <div class="radio"
                                                                         v-for="(temp, index) in items_template_default">
                                                                        <label>
                                                                            <input type="radio" name="egg_id"
                                                                                   v-on:change="chooseTemps(temp.name)"
                                                                                   :value="temp.id"
                                                                                   :checked="edit_tem_item == 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="edit_tem_group==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"
                                                                                   :value="temp.id"
                                                                                   :checked="edit_tem_item == temp.id"
                                                                                   v-on:change="chooseTemp(temp.name)"
                                                                                   :data-tagname="temp.name">
                                                                            <span>@{{ temp.name }}</span>
                                                                        </label>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="nano-inner" v-else>
                                                                <div class="fade fade-flash collapse"
                                                                     data-accordion="tag_editor_egg_id"
                                                                     id="temp_idCollapse0"
                                                                     v-bind:class="edit_tem_group==0?'in':''"
                                                                     aria-expanded="false" style="height: 0px;">
                                                                    <div class="radio"
                                                                         v-for="(temp, index) in items_template_default">
                                                                        <label>
                                                                            <input type="radio" name="egg_id"
                                                                                   v-on:change="chooseTemps(temp.name)"
                                                                                   :value="temp.id"
                                                                                   :checked="edit_tem_item == 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="edit_tem_group==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="edit_tem_item == temp.id"
                                                                                   :value="temp.id"
                                                                                   :checked="edit_tem_item == temp.id"
                                                                                   v-on:change="chooseTemp(temp.name)"
                                                                                   :data-tagname="temp.name">
                                                                            <span>@{{ temp.name }}</span>
                                                                        </label>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="selected-tag" id="egg_idCollapseSelected">
                                                    選択中：<span>@{{ temp_update_name }}</span>
                                                </div>
                                                <div class="row"
                                                     style="margin-bottom: 0.5em;margin-top: 0.5em;">
                                                    <div class="col-xs-12">
                                                        <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>
                            <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="edit_scenario_id == -1">変更しない</option>
                                            <option value="0" :selected="edit_scenario_id == 0">購読中止・予約キャンセル
                                            </option>
                                            <option v-for="(item_scenario, index) in scenario"
                                                    :value="item_scenario.id"
                                                    :selected="edit_scenario_id == item_scenario.id">@{{ item_scenario.name }}</option>
                                        </select>
                                        <div id="a_step_to_setting"
                                             v-bind:style="edit_scenario_id > 0 ? 'display: block' : 'display: none'">
                                            <div class="radio">
                                                <label class="">
                                                    <input id="a_step_to_change_0" class="a_step_to_change"
                                                           :checked="edit_scenario_day == '' || edit_scenario_day.trim.length == 0"
                                                           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="edit_scenario_day != '' || edit_scenario_day.trim.length > 0"
                                                           name="a_step_to_change" type="radio" value="1">
                                                    途中から始める
                                                </label>

                                                <div class="form-inline" id="a_step_to_move"
                                                     v-bind:style="edit_scenario_day != '' || edit_scenario_day.trim.length > 0 ? 'display:block': 'display:none'">
                                                    <input class="form-control input-sm" min="0"
                                                           style="width:6em;"
                                                           name="a_step_to_date" type="number"
                                                           :value="edit_scenario_day != '' || edit_scenario_day.trim.length > 0 ?edit_scenario_day:'0'">
                                                    日目
                                                    <input class="timepicker form-control input-sm"
                                                           name="a_step_to_time"
                                                           type="text"
                                                           :value="edit_scenario_time != '' || edit_scenario_time.trim.length > 0 ? edit_scenario_time :'00:00:00'">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="clearfix"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <input class="btn btn-success btn-lg pull-right" type="submit" value="登録">
                    </form>
                    <hr>
                    <br>
                    <br>
                    <a href="{!! route('index.conversion') !!}">一覧に戻る</a>
                    <br>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('js')
    <script src="/chat_files/clipboard.min.js"></script>
    <script src="/chat_files/bootstrap-timepicker.js"></script>
    <script src="/js/url/edit.js?v={{config("sns-line.version")}}"></script>
    <script>
        token  = "{!! csrf_token() !!}"
        app.url_id = "{!! $url->id !!}";
        app.edit_tag_group = "{!! $url->edit_tag_group !!}";
        app.edit_tag_item = "{!! $url->add_tag_id !!}";
        app.edit_tem_group = "{!! $url->edit_tem_group !!}";
        app.edit_tem_item = "{!! $url->add_template_id !!}";
        app.edit_scenario_id = "{!! $url->scenario_id !!}";
        app.edit_scenario_day = "{!! $url->scenario_day !!}";
        app.edit_scenario_time = "{!! $url->scenario_time !!}";
        app.tag_update_name = "{!! $tag_name !!}";
        app.temp_update_name = "{!! $temp_name !!}";
        app.group_tag_open = 0;
        app.group_template_open = 0;
    </script>
@endpush