@extends('layout.basic.main')
@section('title', empty($conversion) ? 'コンバージョン（作成）':'コンバージョン（編集）')
@push('css')
<link rel="stylesheet" href="/css/conversion/style.css?v={{config("sns-line.version")}}" type="text/css">
<style>

    .style-text {
        font-weight: bold;
        font-size: 15px;
        padding: 3px 0 3px 15px;
        border-left: 7px solid #08BF5A;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    #list-action p {
        background-color: #F2F2F2;
        padding: 10px;
        margin-bottom: 8px;
    }
    #vue-conversion-form input[type="text"]{
        height: 36px !important;
    }
    #vue-conversion-form input[type="radio"]{
        transform: scale(1.5);
    }
    .b-select{
        position: relative;
    }
    .b-select i {
        position: absolute;
        right: 9px;
        top: 7px;
        font-size: 22px;
    }
</style>
@endpush
@section('content')
    <div class="container-fluid pc-body">
        <div class="row">
            <div class="col-sm-12 col-xs-12">
                
                @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">
                    <h2 style="font-size: 20px;  font-weight: bold; padding: 10px 10px 10px 0">コンバージョン登録</h2>


                    <form method="POST" action="{!! route('storeConversion') !!}" 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">
                                <label class="style-text">管理名</label>
                            </div>
                            <div class="col-sm-6">
                                <label class="style-text">フォルダ</label>
                            </div>

                        </div>
                        <div class="row" style="align-items: center; display: flex">
                            <div class="col-sm-4">
                                <div class=" form-group">
                                    <div>
                                      <input class="form-control" name="conversion_name" type="text"  v-model="conversion_name"
                                           id="conversion_name" style="margin-top: 5px;">

                                    </div>
{{--                                    <div class="errors" id="name_conversion_error"></div>--}}
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <div >@{{conversion_name.length}}/10文字</div>
                            </div>
                            <div class="col-sm-6 ">

                                <div class="b-select">
                                    <select  class="form-control text-center" v-model="group_id" name="group_id" style="height: 36px;margin-bottom: 13px;">
                                        <option value="0">未分類</option>
                                        <option  v-for="(item,index) in groups" :value="item.id">@{{ item.name }}</option>
                                    </select>
                                    <i class="far fa-angle-down"></i>
                                </div>


                            </div>

                        </div>

                        <div class="row" v-show="(conversion_id != '' && type != 1) || (conversion_id == '')">
                            <div class="col-sm-5">
                                <label class="style-text">配信ページURL</label>
                                <p>配信するページのURLを入力してください。</p>
                                <div class="">
                                    <input class="form-control" name="sent_url" type="text"
                                           :disabled="conversion_id != '' && conversion_id != null"
                                           v-model="sent_url" id="sent_url" style="margin-top: 5px;">
                                    <input class="form-control" name="sent_url_edit" type="hidden"
                                           v-model="sent_url" id="sent_url_edit" style="margin-top: 5px;">
                                </div>
                            </div>
                        </div>
                        <input type="hidden" :value="(conversion_id != '' && type != 1) || (conversion_id == '')" id="isHide">

                        <div class="row" v-show="(conversion_id != '' && type != 1) || (conversion_id == '')">
                            <div class="col-sm-12">
                                <div class=" form-group " style="margin-top: 15px">
                                    <input name="type_conversion" type="checkbox" value="1" id="type_url" v-model="type"
                                           style="margin-right: 0"
                                           :disabled="conversion_id != '' && conversion_id != null" >
                                    <label for="type_url"> 配信するURLとコンバージョンを計測するURLを同一にする</label>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12" >
                                <div class="">
                                    <div class="form-group col-sm-11">
                                        <div class="row" style="display: flex; align-items: baseline">
                                            <div class="style-text">
                                                コンバージョン時アクション
                                            </div>
                                            <div class="" style="margin-bottom: 10px; margin-left: 40px">
                                                <span style="display: inline-block">
                                                    <input type="radio" class="radio_action_type" id="action_1" name="action_type" value="1" v-model="action_type">
                                                    <label for="action_1" class="font-weight-bold">1度のみアクション稼働</label>
                                                </span>
                                                 <span style="display: inline-block; margin-left: 30px">
                                                    <input type="radio" class="radio_action_type" id="action_2" name="action_type" value="0" v-model="action_type">
                                                    <label for="action_2" class="font-weight-bold">何度でもアクション稼働</label>
                                                </span>
                                            </div>
                                        </div>

                                        <div class="row" style="display: flex;align-items: center;">
                                            <div class="col-sm-5">
                                                <div id="list-action">
                                                    <p v-for="(item,indexAction) in list_action" style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"  v-if="item.type && indexAction <3">
                                                        @include('layout.modal_setting.label_action')
                                                        {{-- <span v-if="item.type == 'tag'">【タグ】
                                                                    <span v-for="(itemTag, indexTag) in item.list_tags">@{{  indexTag == 0 ? '' : ', ' }}@{{ itemTag.name }}</span>を<span
                                                            v-if="item.data.action == 1">つける</span><span v-else>はずす</span>
                                                                </span>
                                                        <span v-else-if="item.type == 'scenario'">【ステップ】
                                                                    <span v-if="item.data.action != 1">@{{ item.data.scenario_name }}</span><span v-else>購読停止・予約キャンセル</span>
                                                                </span>
                                                        <span v-else-if="item.type == 'template'">【テンプレート】
                                                                    <span>@{{ item.data.template_name }}</span>
                                                                </span>
                                                        <span v-else-if="item.type == 'text'">【テキスト】
                                                                    <span>@{{ item.data.content | shortContent }}</span>
                                                                </span>
                                                        <span v-else-if="item.type == 'richmenu'">【リッチメニュー】
                                                                    <span v-if="item.data.action != 1">@{{ item.data.richmenu_name }}表示</span><span v-else>表示を停止</span>
                                                                </span>
                                                        <span v-else-if="item.type == 'remind'">【リマインド】<span>@{{ item.data.remind_name }}</span></span>
                                                        <span v-else-if="item.type == 'bookmark'">
                                                          <span class="action-title">【ブックマーク】</span>
                                                          <span v-if="item.data.action == 1">ブックマークする</span>
                                                          <span v-else>ブックマークを外す</span>
                                                        </span>
                                                        <span v-else-if="item.type == 'block'">
                                                          <span class="action-title">【ブロック・非表示】</span>
                                                          <span v-if="item.data.action == 1">ブロックする</span>
                                                          <span v-if="item.data.action == 2">ブロック解除</span>
                                                           <span v-if="item.data.action == 3">表示</span>
                                                          <span  v-if="item.data.action == 4">非表示</span>
                                                        </span>
                                                        <span v-else-if="item.type == 'compliant_status'">
                                                      <span class="action-title">【対応ステータス】</span>
                                                      <span v-if="item.data.action == 1">@{{ item.data.content }}をつける</span>
                                                      <span v-else> ステータスを外す</span>
                                                    </span>
                                                        <span v-else-if="item.type == 'friend_info'">【友だち情報】
                                                                <span v-show="item.data.action == 1">登録情報を削除</span>
                                                                <span v-show="item.data.action == 3">当日日付を登録</span>
                                                                <span v-show="item.data.action == 2">
                                                                    <span v-show="item.data.type == 1"><span style="margin-right: 5px">@{{item.data.name}}</span>(選択肢): @{{ item.data.content | shortContentFriendInfo }}</span>
                                                                    <span v-show="item.data.type == 2"><span style="margin-right: 5px">@{{item.data.name}}</span>(記述): @{{ item.data.content | shortContentFriendInfo }}</span>
                                                                    <span v-show="item.data.type == 3"><span style="margin-right: 5px">@{{item.data.name}}</span>(年月日): @{{ item.data.content | shortContentFriendInfo }}</span>
                                                                    <span v-show="item.data.type == 6"><span style="margin-right: 5px">@{{item.data.name}}</span>(ポイント): @{{ item.data.content | shortContentFriendInfo }} ポイントを</span>
                                                                    <span v-show="item.data.type == 6">
                                                                        <span v-show="item.data.type == 6 && item.data.action_content == 1">（上書き）</span>
                                                                        <span v-show="item.data.type == 6 && item.data.action_content == 2">（プラス）</span>
                                                                        <span v-show="item.data.type == 6 && item.data.action_content == 3">（マイナス）</span>
                                                                    </span>
                                                                </span>
                                                            </span> --}}
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                        <input type="hidden" name="con_action_id" v-model="action_id" :value="action_id" id="con_action_id">
                                        <div class="row" style="display: flex;align-items: center; ">
                                            <div class="col-sm-3">
                                                <div style="overflow: auto">
                                                    <input type="hidden" name="action_id" id="action_id" value="">
                                                    <a class="" style="cursor: pointer" v-if="list_action.length > 0"
                                                       v-on:click="openSettingAction(action_id)"
                                                       data-toggle="modal"
                                                       data-target="#settingActionUrlModal">
                                                        <span v-if="list_action.length <= 3" style="color: rgb(87, 153, 219);text-decoration: underline; font-weight: bold">編集</span>
                                                        <span v-else style="color: #5799DB;text-decoration: underline;font-weight: bold">その他@{{ list_action.length - 3 }}件編集</span>
                                                    </a>
                                                    <a v-else class="btn btn-sns-line btn-sns-line-warning"
                                                            v-on:click="openSettingAction(action_id)"
                                                            data-toggle="modal"
                                                            data-target="#settingActionUrlModal"
                                                            style="float: left; width: 120px">設定</a>
                                                </div>

                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>

                        <div class="text-center">

                            <button class="btn btn-sns-line btn-sns-line-success btn-sns-line-lg" type="button" v-on:click="createConversion()" style="width: 150px; margin-top: 30px">保存</button>
                        </div>

                    </form>

                </div>
            </div>
        </div>
    </div>
    <span class="id_page" data-id="conversion-new"> </span>
    @include('layout.modal_test_list.modal_list_test')
    @include('layout.modal_setting.modal_select_action')
    @include('layout.modal_filter_v2')
@endsection
@push('js')
<script src="/js/form_answer/jquery.ui.datepicker-ja.js"></script>
<script src="/chat_files/clipboard.min.js"></script>
<script src="/chat_files/bootstrap-timepicker.js"></script>
    <script>
        var token  = "{!! csrf_token() !!}";
        var action_id = "{!! $conversion ? $conversion->action_id : null !!}";
        var action_type = "{!! $conversion ? $conversion->action_type  : 1 !!}";
        var conversion_name = "{!!$conversion ? $conversion->name : ''!!}";
        var conversion_id = "{!!$conversion ? $conversion->id : ''!!}";
        var sent_url = "{!! $conversion ? $conversion->sent_url : ''!!}";
        var type = "{!! $conversion ? ($conversion->type == 1 ? 1 : false) : false !!}";
        var group_id = "{!! $conversion ? $conversion->group_id : $folderCookie !!}";
        @if($errors->any())
            alert(@json($errors->first()));
        @endif
    </script>
<script src="/js/conversion/create.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 src='{{asset("js/conversion/sent_page_v2.js")}}'></script>
<script>
    var params = [];
    var basic_home_new = [];
</script>
<script src="/js/friendlist/modal_filter_v2.js?v={{ config('sns-line.version') }}"></script>
@endpush