@extends('layout.basic.main')
@push('css')
<link rel="stylesheet" href="/css/conversion/style.css" type="text/css">
    <style>
        .btn{
            font-weight: bold;
        }
    </style>

@endpush
@section('content')
    <div class="container-fluid pc-body">
        <div class="row">
            <div class="col-sm-12 col-xs-12">
                
                @if($errors->any())
                    <div class="alert alert-danger alert-dismissable fade in">
                        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                        <ul>
                            @foreach($errors->all() as $error)
                                <li>{!! $error !!}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
                @if(session('success'))
                    @push('js')
                    <script type="application/javascript">
                        setTimeout(function () {
                            location.href = '/basic/conversion'
                        }, 1000);
                    </script>
                    @endpush

                @endif
            </div>
            <div class="row" id="vue-conversion-form" v-cloak>
                <div class="col-sm-12 sub">
                    <h2 style="font-size: 20px; color: #222222; font-weight: bold; padding: 10px 10px 10px 0">コンバージョン編集</h2>

                    <hr>
                    <form method="POST" action="{!! route('saveConversion') !!}" accept-charset="UTF-8"
                          id="frm_conversion">
                        <input name="_token" type="hidden" value="{!! csrf_token() !!}">
                        <input name="conversion_id" type="hidden" :value="conversion_id">
                        <div class="row">
                            <div class="col-sm-6">
                                <div class=" form-group">
                                    <label for="name" style="font-weight: bold">管理名</label>
                                    <span class="label label-danger">必須</span>
                                    <div style="display: flex">
                                    <input class="form-control" name="name" type="text" id="name"
                                           :value="conversion_name" style="margin-top: 5px;">
                                        <div id="count_text_name" style="text-align: right;width: 95px;margin-top: 6px;margin-left: 15px;">0/20文字</div>
                                    </div>
                                    <div class="errors" id="name_conversion_error"></div>
                                </div>
                            </div>
                        </div>
                        @if($conversion->type ==2)
                        <div class="row" id="show_url">
                            <div class="col-sm-6">
                                <div class=" form-group">
                                    <label for="name" style="font-weight: bold">配信するURL</label>
                                    <input class="form-control" name="sent_url" type="text" id="sent_url" :value="conversion_sent_url" style="margin-top: 5px;" disabled>
                                </div>
                            </div>
                        </div>
                        @endif
                        <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;">
                                                                {{--No edit tags group--}}
                                                                <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>
                                                                {{--has edit tags group--}}
                                                                <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">
                                                {{--do not tags--}}
                                                <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>
                                                {{--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;">
                                                            {{--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>
                                                            {{--Has edit tag item--}}
                                                            <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>
                                                {{--search tags--}}
                                                <div class="selected-tag" id="tag_idCollapseSelected">
                                                    選択中：<span>@{{ tag_update_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" 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;">
                                                                {{--No edit template group--}}
                                                                <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>
                                                                {{--Has edit template group--}}
                                                                <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>
                            {{--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="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>
                        <div class="text-center">
                            <input class="btn btn-success btn-lg " type="button" value="登録" style="border-color: #08BF5A; background-color: #08BF5A; width: 100px"
                                   v-on:click="createConversion()">
                        </div>

                    </form>

                </div>
            </div>
        </div>
    </div>
    <span class="id_page" data-id="conversion-edit"> </span>
    @include('layout.modal_test_list.modal_list_test')
@endsection
@push('js')
<script src="/chat_files/clipboard.min.js"></script>
<script src="/chat_files/bootstrap-timepicker.js"></script>
<script src="/js/conversion/edit.js?v={{config("sns-line.version")}}"></script>
<script type="application/javascript" src="/js/popup_send_test-message.js?v={{config("sns-line.version")}}"></script>
<script>
    token  = "{!! csrf_token() !!}"
    app.conversion_name = "{!! $conversion->name !!}";
    app.conversion_id = "{!! $conversion->id !!}";
    app.conversion_sent_url = "{!! $conversion->sent_url !!}";
    app.edit_tag_group = "{!! $conversion->edit_tag_group !!}";
    app.edit_tag_item = "{!! $conversion->add_tag_id !!}";
    app.edit_tem_group = "{!! $conversion->edit_tem_group !!}";
    app.edit_tem_item = "{!! $conversion->add_template_id !!}";
    app.edit_scenario_id = "{!! $conversion->scenario_id !!}";
    app.edit_scenario_day = "{!! $conversion->scenario_day !!}";
    app.edit_scenario_time = "{!! $conversion->scenario_time !!}";
    app.tag_update_name = "{!! $tag_name !!}";
    app.temp_update_name = "{!! $temp_name !!}";
    app.group_tag_open = 0;
    app.group_template_open = 0;
    @if($errors->any())
        alert('{{$errors->first()}}');
    @endif
</script>
@endpush