@extends('layout.basic.main')
@section('title', empty($form_answer) ? 'フォーム作成（作成）': ((isset( $_GET['type']) && $_GET['type'] == 'copy') ? 'フォーム作成（コピー）':'フォーム作成（編集）'))

@push('css')
    <script async="" src="/js/form_answer/analytics.js"></script>
    <script>
        var lml_abilities = {};
    </script>
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-rqn26AG5Pj86AF4SO72RK5fyefcQ/x32DNQfChxWvbXIyXFePlEktwD18fEz+kQU" crossorigin="anonymous">
    <link href="/css/form_answer/bootstrap-datepicker.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="/chat_files/jquery-ui.min.css">
    <link rel="stylesheet" href="/css/form_answer/font-awesome.min.css">
    <link rel="stylesheet" href="/css/form_answer/emojionearea.min.css">
    <link rel="stylesheet" type="text/css" href="/css/form_answer/style.css?v={{config('sns-line.version')}}">
    <style>

        #lvbuilder .checkbox-container {

            /*align-items: center;*/
            position: relative;
            cursor: pointer;
            /*margin-right: 5px;*/
            /*padding-left: 35px  ;*/
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            background: #FFFFFF 0% 0% no-repeat padding-box;
            border: 1px solid #CDD6DD;
            border-radius: 5px;
            font-size: 13px;
            margin-top: 15px;
        }

        #lvbuilder .checkbox-container input[type="checkbox"] {
            display: none;
        }


        #lvbuilder label.checkbox-container{
            cursor: pointer !important;
        }

        #lvbuilder label.checkbox-container.current-checked{
            background-color: #F4FBF2;
        }

        #lvbuilder .checkmark {
            position: relative;
            top: -1px;
            left: unset;
        }

        #lvbuilder .checkbox-container .checkmark {

            width: 17px;
            height: 17px;
            border-radius: 3px;
            background-color: #ffffff;
            border: 1px solid #E0E0E0;
            margin-right: 10px;
            cursor: pointer !important;
            flex: 0 0 17px;
        }

        #lvbuilder .checkbox-container input[type="checkbox"]:checked+.option-container{
            background-color: #E7F8EF;
            border: 1px solid #08BF5A !important;
        }

        #lvbuilder .checkbox-container input[type="checkbox"]:checked+.option-container .checkmark {
            background-color: #08BF5A;
        }
        #lvbuilder .checkbox-container input[type="checkbox"]:checked+.option-container .tag-name {
            color: #08BF5A;
        }

        #lvbuilder .checkbox-container .checkmark:after {
            content: "";
            position: absolute;
            display: none;
        }

        #lvbuilder .checkbox-container input:checked ~ .checkmark:after {
            display: block;
        }

        #lvbuilder .checkbox-container .checkmark:after {
            left: 9px;
            top: 5px;
            width: 5px;
            height: 10px;
            border-width: 0 3px 3px 0;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
        }
        #lvbuilder .option-container{
            display: flex;
            align-items: center;
            border-radius: 5px;
            border: 1px solid #F6F6F6 !important;
            padding: 7px 19px 5px 7px !important;
            cursor: pointer;
            color: #51595C;
        }
        #lvbuilder .option-container:hover {
            background-color: #F4FBF2;
            border-color: #F4FBF2;
        }
        input[type="checkbox"]:checked+.option-container{
            background-color: #F4FBF2;
        }
        .option-container{
            padding: 8px;
            display: flex;
            align-items: center;
            border: 1px solid #F6F6F6;
            border-radius: 5px;
            cursor: pointer;
        }
        /*#lvbuilder .checkbox-container input[type="checkbox"]:checked+.option-container{*/
        /*    background-color: #F4FBF2;*/
        /*}*/

        /*#lvbuilder .checkbox-container input[type="checkbox"]:checked+.option-container .checkmark {*/
        /*    background-color: rgba(8, 191, 90, 1);*/
        /*}*/

        .grid-cell-3 .btn-default{
            background: #96ADB2 0% 0% no-repeat padding-box;
            border-radius: 5px;
            border-color: #96ADB2;
        }
        .grid-cell-3 .btn-default i{
          color: #FFFFFF;
        }
    </style>
@endpush
@section('content')
    <div class="container-fluid pc-body">
        <div class="row">
            <div class="col-xs-12 col-sm-12">
                <div class="row">
                    <div class="col-sm-12">
                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <h2 style="font-size: 23px; color: #51595C; font-weight: bold; padding: 10px 10px 10px 0">フォーム 作成</h2>
                            <div id="lvbuilder" v-cloak>
                                <div id="lvcanvas">
                                    <div class="row">
                                        <div class="info-formanswer">
                                            <div class="form-horizontal col-sm-12" style="padding: 0">
                                                <div class="row">
                                                    <div class="col-md-5">
                                                        <div class="col-sm-12">
                                                            <div class="form-group">
                                                                <label for="formname" class="control-label">
                                                                    フォーム名（管理用）
                                                                    <div id="count_text_name" style="float: right; font-size: 13px">0/20文字</div>
                                                                </label>
                                                                <div class="">
                                                                    <div style="display: flex">
                                                                    <input type="text"
                                                                        v-model="formname"
                                                                        :value="formname"
                                                                        name="formname"
                                                                        id="form_name"
                                                                        data-vv-as="  フォーム名"
                                                                        v-validate="{required:true}"
                                                                        aria-required="true"
                                                                        aria-invalid="false"
                                                                        class="form-control">

                                                                    </div>
                                                                    <span class="text-danger" id="error_name_form" style="font-family: 'Times New Roman' !important;"></span>
                                                                    <span class="text-danger"
                                                                        v-show="errors.has('formname')">@{{ errors.first('formname') }}</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-5">
                                                        <div class="col-sm-12">
                                                            <div class="form-group">
                                                                <label for="folder_id" class="control-label">
                                                                    フォルダ
                                                                </label>
                                                                <div class="">
                                                                    <select class="form-control my_class" name="folder_id"
                                                                            v-model="lv.folder_id">
                                                                        @foreach($list_folder as $folderId => $folderName)
                                                                            <option value="{{ $folderId }}"
                                                                                    @if($folderId == $folder_selected) selected @endif>
                                                                                {{ $folderName }}
                                                                            </option>
                                                                        @endforeach
                                                                    </select>
                                                                    <span class="text-danger"
                                                                        v-show="errors.has('folder_id')">@{{ errors.first('folder_id') }}</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <br/>
                                            <div class="col-sm-12" style="padding: 0">
                                                <br/>
                                                <div class="d-flex justify-content-between" style="align-items: end">
                                                    <div class="title_form">
                                                        <h3 style="font-size: 15px; margin-bottom: 10px; font-weight: bold;">LINEトーク画面 表示設定</h3>
                                                        <p style="font-size: 14px">※配信後は変更が反映されない場合があります。</p>
                                                        <br/>
                                                        <div class="form-group d-flex align-items-center" style="flex-wrap: wrap;">
                                                            <label for="pagetitle" class="control-label" style="width: 100%;margin-bottom: 5px;">
                                                                タイトル
                                                                <span style="float: right; font-size: 13px; color: rgba(149,149,149,1);">@{{ countLenghtTitel }}/50</span>
                                                            </label>
                                                            <div style="display: flex; align-items: flex-end;flex: 0 0 100%;">
                                                                <input type="text"
                                                                        v-model="lv.pages.title"
                                                                        name="pagetitle"
                                                                        id="pagetitle"
                                                                        :value="lv.pages.title"
                                                                        data-vv-as="  タイトル"
                                                                        v-validate="{required:true, max: 50}"
                                                                        aria-required="true"
                                                                        aria-invalid="false"
                                                                        class="form-control">

                                                            </div>
                                                            <span class="text-danger" v-show="errors.has('pagetitle')">@{{ errors.first('pagetitle') }}</span>
                                                        </div>
                                                        <div class="form-group d-flex align-items-center" style="flex-wrap: wrap;">
                                                            <label for="pagedescripiton" class="control-label" style="width: 100%;margin-bottom: 5px;">
                                                                説明 <span style="float: right; font-size: 13px; color: rgba(149,149,149,1)">@{{ countLenghtDescription }}/50</span>
                                                            </label>
                                                            <div style="display: flex; align-items: flex-end;flex: 0 0 100%;">
                                                                <textarea name="pagedescripiton"
                                                                            v-model="lv.pages.description"
                                                                            :value="lv.pages.description"
                                                                            id="pagedescripiton"
                                                                            data-vv-as="説明"
                                                                            v-validate="{required:true, max: 50}"
                                                                            class="form-control"
                                                                            aria-required="false"
                                                                          aria-invalid="false" > </textarea>

                                                            </div>
                                                            <span class="text-danger" v-show="errors.has('pagedescripiton')">@{{ errors.first('pagedescripiton') }}</span>
                                                        </div>
                                                    </div>
                                                    <div class="image_description">
                                                        <img width="100%" src="/images/create_formanswer.png"/>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <br/>
                                        <div class="setting_formanswer  ">
                                            <div class="tabpanel_setting col-sm-12">
                                                <ul>
                                                    <li :class="tab == 1 ? 'active' : ''" @click="changeTabSetting(1)">内容編集</li>
                                                    <li :class="tab == 2 ? 'active' : ''" @click="changeTabSetting(2)">詳細設定</li>
                                                    <li :class="tab == 3 ? 'active' : ''" @click="changeTabSetting(3)">表示期限・カウントダウン</li>
                                                </ul>
                                                @if(!empty($form_answer))
                                                    <a target="_blank" @click="submitData(true)" style="background-color: #08BF5A; cursor: pointer;" class="btn btn-sns-line btn-sns-line-secondary">保存・プレビュー <i class="fas fa-share"></i></a>
                                                @endif
                                            </div>
                                            <div class="content_setting form_answer_check" v-show="tab == 1">
                                                <div class="setting_item" >
                                                    <div class="list_item_formanswer">
                                                        @include('basic.form_answer.partials.left_form_v2')
                                                    </div>
                                                    <div class="menu_item_formanswer">
                                                        @include('basic.form_answer.partials.right_form_v2')
                                                    </div>
                                                </div>
                                            </div>
                                            @include('basic.form_answer.partials.setting_form')
                                            @include('basic.form_answer.partials.setting_count_down')
                                        </div>
                                        @if(!empty($form_answer))
                                        <div style="margin: 0 15px">
                                            <div style="padding: 30px; margin-top: 30px; background-color: #F6F6F6;border-radius: 5px">
                                                <div style="font-size: 18px; margin-bottom: 15px">配信用URL</div>
                                                <div class="d-flex align-items-center">
                                                    <input id="input_code_form" type="text" class="form-control" disabled value="https://liff.line.me/{{$liff_id}}?unique_key={{ $form_answer->unique_key }}&ts={{time()}}" style="width: 450px; margin-right: 15px">
                                                    <button @click="copyCodeFormAnswer($event, '{{'https://liff.line.me/'.$liff_id.'?unique_key='.$form_answer->unique_key.'&ts='.time() }}')" type="button" class="btn btn-sns-line btn-sns-line-success">コピー</button>
                                                </div>
                                            </div>
                                        </div>
                                        @endif
                                        <br/>
                                        <div class="col-sm-12 text-left">
                                            <button id="lvbuildsave" class="btn btn-sns-line btn-sns-line-success btn-lg text-center btn-sns-line-drop-shadow"
                                                    style="width: 220px; font-weight: bold; padding: 13px 16px; border: 1px solid #08BF5A" v-on:click="submitData(false)"> 登録
                                            </button> <br/><br/>
                                            <a style="width: 150px;display: inline-block;padding: 10px 16px;font-size: 18px; border-radius: 5px;margin-right: 1em" class="btn btn-sns-line btn-sns-line-secondary btn-sns-line-drop-shadow font-weight-bold" href="{!! route('form_answer.index') !!}">戻る</a>
                                        </div>
                                    </div>
                                </div>

                                <!--modal setting remind-->
                                <div class="modal fade" id="modalSettingRemind"  data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog fade in"
                                        aria-labelledby="modalSettingRemind">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content" style="border: 0;display: block;padding: 15px;">
                                            <div class="modal-header" style="border-bottom: none">
                                                <button type="button" class="close" data-dismiss="modal"
                                                        aria-hidden="true" style="opacity: 1;font-size: 27px">
                                                    <i class="fas fa-times ic-close"></i></button>
                                                <h2 class="text-center" style="font-weight: bold"> リマインド設定</h2>
                                            </div>
                                            <div class="modal-body modal-body-set-profile" style="max-height: 486px;overflow: auto;">
                                                <div class="col-xs-12">
                                                    <div class="option-choose-remind">
                                                        <label>リマインド選択</label>
                                                        <div>
                                                            <select @change="handleChangeRemind($event)" v-model="setting_remind.remind_id"  class="form-control my_class" id="choose_remind" name="remind">
                                                                <option data-name="" disabled selected value="">リマインド配信を選択</option>
                                                                @foreach($events as $event)
                                                                    <option data-name="{{ $event->event_name }}" value="{{ $event->id }}">{{ $event->event_name }}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                    
                                                    <div class="option-add-event-time">
                                                        <label>配信終了日時</label>
                                                        <div class="d-flex">
                                                            <div class="input-group">
                                                                <span class="input-group-addon" id="basic-addon2">
                                                                    <i class="fas fa-calendar-alt"></i>
                                                                </span>
                                                                <input style="width: 175px; padding-left: 35px; border-radius: 5px;" type="text" name="date_start_remind" class="form-control remind_datetimepicker" id="date_time_remind"  />
                                                            </div>
                                                            <div class="input-group" style="margin-left: 15px;">
                                                                <span class="input-group-addon" id="basic-addon2">
                                                                    <i class="far fa-clock"></i>
                                                                </span>
                                                                <input style="width: 140px; padding-left: 35px; border-radius: 5px;" type="text" name="time_start_remind" class="form-control remind_timepicker" id="time_start_remind" />
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div style="text-align: center; display: flex; justify-content: center;clear: both">
                                                    <button type="button" @click="saveSettingRemind()" class="btn btn-sns-line btn-sns-line-success">保存</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <span class="id_page" data-id="form-answer-edit"> </span>
    @include('layout.modal_test_list.modal_list_test')
    @include('layout.modal_setting.modal_select_action')
    @include('layout.modal_filter_v2')
    <div role="log" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible"></div>
    <div role="log" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible"></div>
    <div role="log" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible"></div>
    <div role="log" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible"></div>
    <div role="log" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible"></div>
    <div role="log" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible"></div>
    <div role="log" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible"></div>
    <div role="log" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible"></div>
    <div role="log" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible"></div>
    <div role="log" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible"></div>
    <div role="log" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible"></div>
    <div role="log" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible"></div>
    <div role="log" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible"></div>
    <div role="log" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible"></div>
    <div role="log" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible"></div>
    <div role="log" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible"></div>
    <div role="log" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible"></div>
    <div role="log" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible"></div>
    <div role="log" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible"></div>
@endsection
@push('js')
    <script src="/js/form_answer/jquery.min.js"></script>
    <script src="/js/form_answer/promise-7.0.4.min.js"></script>
    <script src="/js/form_answer/weakmap-polyfill.min.js"></script>
    <script src="/js/form_answer/bootstrap.min.js"></script>
    <script src="/js/form_answer/bootstrap-datepicker.min.js"></script>
    <script src="/js/form_answer/bootstrap-datepicker.ja.min.js"></script>
    <script src="/js/form_answer/moment.min.js"></script>
    <script src="/js/form_answer/jquery-ui.min.js"></script>
    <script src="/js/form_answer/jquery.ui.datepicker-ja.js"></script>
    <script src="/js/form_answer/nanoscroller.min.js"></script>
    <script src="/js/form_answer/vue.min.js"></script>
    <script src="/js/form_answer/lodash.min.js"></script>
    <script src="/js/form_answer/v_resources.js"></script>
    <script src="/js/form_answer/v_item_selector.js"></script>
    <script src="/js/form_answer/v_explorer.js"></script>
    <script src="/js/form_answer/jquery.ui.datepicker-ja.js"></script>
    {{--Setup form--}}
    <script>
        var csrf_token = "{!! csrf_token() !!}";
        var root_url = "@if(empty($form_answer))/ajax/form-answer/store @else /ajax/form-answer/save/{!! $form_answer->id !!}@endif";
        @if(!empty($form_answer)) 
        var update_flag = true;
        @else 
        var update_flag = false;
        @endif
        var lvfname = `@if(!empty($form_answer)){!! $form_answer->name !!}@endif`;
        var lvfid = `@if(!empty($form_answer)){!! $form_answer->id !!}@endif`;
        var lvfcode = "@if(!empty($form_answer)){!! $form_answer->unique_key !!}@endif";
        var lvfroot = "";
        var formAnswer = @if(!empty($form_answer)) null @else [] @endif;
        var title = @if(!empty($form_answer)) null @else "" @endif;
        var description = @if(!empty($form_answer)) null @else "" @endif;
        var current_list_type = @if(!empty($current_list_type)) null@else [] @endif;
        var lvvuesortableoptions = {
            handle: '.lvitem-handle'
        };
        var items = @if(!empty($form_details)) null @else [] @endif ;
       
        var lvdatas = {
            "attr": items,
            "pages": {
                "title": title,
                "description": description
            },
            "revision": "2",
            "generation": "1",
            "editor": {"name_position": "8"},
            "ping":@if(!empty($form_answer)) "{!! $form_answer->reply_kind !!}" @else 0 @endif,
            "ping_text": formAnswer.reply_text != undefined ? formAnswer.reply_text : '',
            "color":@if(!empty($form_answer) && !empty($form_answer->color)) "{{ $form_answer->color }}" @else "#009588" @endif,
            "image_header":@if(!empty($form_answer)) "{!! $form_answer->image_header !!}" @else '' @endif,
            "button_submit_text": formAnswer.button_submit_name != undefined ? formAnswer.button_submit_name : '',
            "folder_id":@if(!empty($form_answer)) "{!! $form_answer->group_id !!}" @else '{{ $folder_selected }}' @endif,
            "form_answer": @if(!empty($form_answer)) null @else [] @endif,
            "tag_id":@if(!empty($form_setting)) "{!! $form_setting->tag_id !!}" @else 0 @endif,
            "scenario_id":@if(!empty($form_setting)) "{!! $form_setting->scenario_id !!}" @else -1 @endif,
            "template_id":@if(!empty($form_setting)) "{!! $form_setting->template_id !!}" @else 0 @endif,
            "a_step_to_change":@if(!empty($form_setting) && !empty($form_setting->scenario_start_day)) '1' @else '0' @endif,
            "a_step_to_date":@if(!empty($form_setting)) "{!! $form_setting->scenario_start_day !!}" @else '' @endif,
            "a_step_to_time":@if(!empty($form_setting)) "{!! $form_setting->scenario_start_time !!}" @else '' @endif,
            "title_timer": @if(!empty($form_answer) && $form_answer->title_timer) `{!! $form_answer->title_timer !!}` @else "" @endif,
            "option_show_timer": @if(!empty($form_answer) && $form_answer->option_show_timer) {!! $form_answer->option_show_timer !!} @else 0 @endif,
            "option_timer": @if(!empty($form_answer) && $form_answer->option_timer) {!! $form_answer->option_timer !!} @else 0 @endif,
            "unit_timer" : @if(!empty($form_answer) && $form_answer->unit_timer) "{!! $form_answer->unit_timer !!}" @else 0 @endif,
            "text_color_timer": @if(!empty($form_answer) && $form_answer->text_color_timer) "{!! $form_answer->text_color_timer !!}" @else "#FFFFFF" @endif,
            "bg_color_timer": @if(!empty($form_answer) && $form_answer->bg_color_timer) "{!! $form_answer->bg_color_timer !!}" @else "#08BF5A" @endif,
            "date_timer_count_down": @if(!empty($form_answer) && $form_answer->date_timer_count_down) "{!! \Carbon\Carbon::parse($form_answer->date_timer_count_down)->format('Y-m-d') !!}" @else '{!! \Carbon\Carbon::now()->format('Y-m-d') !!}' @endif,
            "time_timer_count_down": @if(!empty($form_answer) && !empty($form_answer->time_timer_count_down)) "{!! $form_answer->time_timer_count_down !!}" @else '{!! \Carbon\Carbon::now()->format('H:i') !!}' @endif,
            "time_duration_hour" : @if(!empty($form_answer) && $form_answer->time_duration && $form_answer->is_duration_timer == 0) "{!! explode(':', $form_answer->time_duration)[0] !!}" @else 0 @endif,
            "time_duration_minute" : @if(!empty($form_answer) && $form_answer->time_duration && $form_answer->is_duration_timer == 0) "{!! explode(':', $form_answer->time_duration)[1] !!}" @else 0 @endif,
            "url_redirect_timer" : @if(!empty($form_answer) && $form_answer->url_redirect_timer) `{!! $form_answer->url_redirect_timer !!}` @else '' @endif,
            "position_countdown" : @if(!empty($form_answer) && $form_answer->position_countdown == 1) true @else false @endif,
            "use_url_reply_countdown": @if(!empty($form_answer)) {!! $form_answer->use_url_reply_countdown !!} @else '0' @endif,
            "message_notify_count_down": formAnswer.message_notify_count_down != undefined ? formAnswer.message_notify_count_down : '',
            "reply_use_url": @if(!empty($form_answer)) {!! $form_answer->reply_use_url !!} @else 2 @endif,
            "message_notify_success": formAnswer.message_notify_success != undefined ? formAnswer.message_notify_success : '',
            "url_notify_success": @if(!empty($form_answer)) '{!! $form_answer->url_notify_success !!}' @else '' @endif,
            "action_reply_type": @if(!empty($form_answer)) "{!! $form_answer->action_reply_type !!}" @else 1 @endif,
            "action_reply_id": @if(!empty($form_answer)) "{!! $form_answer->action_reply_id !!}" @else '' @endif,
            "action_open_type": @if(!empty($form_answer)) "{!! $form_answer->action_open_type !!}" @else 1 @endif,
            "action_open_id": @if(!empty($form_answer)) "{!! $form_answer->action_open_id !!}" @else '' @endif,
            "is_duration_timer": @if(!empty($form_answer)) {!! $form_answer->is_duration_timer !!} @else 0 @endif,
            "days_timer_count_down": @if(!empty($form_answer)) "{!! $form_answer->days_timer_count_down !!}" @else 0 @endif,
            "time_duration" : @if(!empty($form_answer) && $form_answer->time_duration && $form_answer->is_duration_timer == 1) "{!! $form_answer->time_duration !!}" @else '{!! \Carbon\Carbon::now()->format('H:i') !!}' @endif,
            "custom_style": formAnswer ? formAnswer.custom_style : '',
            "bg_color_button": @if(!empty($form_answer) && !empty($form_answer->bg_color_button)) `{!! $form_answer->bg_color_button !!}` @else '#08BF5A' @endif,
            "text_color_button": @if(!empty($form_answer) && !empty($form_answer->text_color_button)) `{!! $form_answer->text_color_button !!}` @else '#FFFFFF' @endif,
        };
        var friendInfoTypeText = @if(!empty($friendInfoTypeText)) null @else [] @endif;
        var friendInfoTypeTextAndSelection = @if(!empty($friendInfoTypeTextAndSelection)) null @else [] @endif;
        var friendInfoTypeFile = @if(!empty($friendInfoTypeFile)) null @else [] @endif;
        var friendInfoTypeDatetime = @if(!empty($friendInfoTypeDatetime)) null @else [] @endif;
    </script>
    {{--Setup form--}}
    <script src="/js/form_answer/Sortable.min.js"></script>
    <script src="/js/form_answer/vuedraggable.min.js"></script>
    <script src="/js/form_answer/vee-validate.rc7.min.js"></script>
    <script src="/js/form_answer/vee-validate_ja.min.js"></script>
    <script src="/js/form_answer/lvswatches.js"></script>
    <script src="/tinymce/js/tinymce/tinymce.min.js" referrerpolicy="origin"></script>
    <!-- <script src="https://cdn.tiny.cloud/1/g3zs72us63f0hhxg73jreycj5mblfo0jqrg6udujttaqokrz/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script> -->
    <script src="/tinymce/langs/ja.js"></script>
    <script src="/plugins/loadingoverlay/loadingoverlay.min.js"></script>
    <script src="/chat_files/bootstrap-timepicker.js"></script>
    <script>
        var form_id = "{!! !empty($form_id) ? $form_id : null !!}";
        var bot_id = "{{ $bot_id }}";
        var form_setting = {"id":"","form_id":"","tag_id":"","template_id":"","scenario_id":-1,"scenario_start_day":"","scenario_start_time":"","created_at":"","updated_at":""};
        var group_tag_open = {!! $group_tag_open !!};
        var group_template_open = {!! $group_template_open !!};
        var token = "{!! csrf_token() !!}";
    </script>
    <script src="/js/form_answer/create.js?v={{config("sns-line.version")}}"></script>
    <script>
        $(function () {
            $(".nano").nanoScroller({iOSNativeScrolling: true});
            $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                $(".nano").nanoScroller({iOSNativeScrolling: true});
            });

            $(".remind_datetimepicker").datepicker({
                dateFormat: "yy-mm-dd",
                theme: "dark",
                minDate: new Date(),
                onClose: function(selectedDate) {
                    app.setting_remind.start_date = selectedDate;
                },
            });

            $(".remind_timepicker").timepicker({
                minuteStep: 1,
                template: "dropdown",
                appendWidgetTo: "body",
                showSeconds: false,
                secondStep: 1,
                showMeridian: !1,
            }).change(function(e) {
                var time = e.target.value;
                console.log(time);
                app.setting_remind.start_time = time;
            });

            
            function compare( a, b ) {
                if ( a.position > b.position ){
                    return -1;
                }
                if ( a.position < b.position ){
                    return 1;
                }
                return 0;
            }
        });
    </script>
    <script>
        (function (i, s, o, g, r, a, m) {
            i['GoogleAnalyticsObject'] = r;
            i[r] = i[r] || function () {
                (i[r].q = i[r].q || []).push(arguments)
            }, i[r].l = 1 * new Date();
            a = s.createElement(o),
                m = s.getElementsByTagName(o)[0];
            a.async = 1;
            a.src = g;
            m.parentNode.insertBefore(a, m)
        })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');

        ga('create', 'UA-90664129-2', 'auto');
        ga('send', 'pageview');
    </script>
    <script>
        my_collapse = function () {
            $('[data-toggle="collapse"]').on("click", function () {
                if ($(this).data("accordion") != undefined) {
                    $('.collapse.in[data-accordion="' + $(this).data("accordion") + '"]').collapse('hide')
                }
            });
        };
        my_collapse();
    </script>
    <script>
        var emtimer = (+new Date());
    </script>
    <script src="/js/form_answer/emojione.js"></script>
    <script src="/js/form_answer/emojionearea.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".emoji-area").emojioneArea({
                template: "<editor/><filters/><tabs/>", // plugin template

                autocomplete: "off", // autocomplete http://www.w3schools.com/tags/att_input_autocomplete.asp
                autocorrect: "off", // autocorrect https://davidwalsh.name/disable-autocorrect
                autocapitalize: "off", // autocapitalize http://www.w3schools.com/tags/att_input_autocomplete.asp

                placeholder: null, // placeholder
                container: null, // by default, emojionearea container created directly under source,
                                 // in this option you can specify custom {jQuery|selector} container

                hideSource: true, // hide source element after binding
                autoHideFilters: true, // auto hide filters panel

                useSprite: true, // use sprite instead of images, is awesome, but not works in old browsers
                shortnames: false // if true - will converts emojis to short names,
                // by default converts emojis to unicode characters
            });
            $('#count_text_name').text($("#form_name").val().length + '/20文字');
            $("#form_name").on('change keyup focusout',function () {
                var str = $(this).val();
                $('#count_text_name').text(str.length + '/20文字');
                if (str.length > 20) {
                    str = str.substring(0, 20);
                    $(this).val(str);
                    app.formname = str;
                    $('#error_name_form').html('フォーム名は20文字以内で入力してください。');
                    $('#form_name').focus();
                }
            });
            $("#form_name").on('focusout',function () {
                $('#error_name_form').html('');
            });
        });
    </script>
    <script>
        popups = [];

        function windowPopup(url, id) {
            if (id == null) {
                a = new Date();
                id = a.getTime();
            }
            popups.push(window.open(url, "popup" + id, "width=500,height=500,scrollbars=yes,resizable=yes,toolbar=no,menubar=no,directories=no,status=no"));
        }
    </script>
    <script>
        var laravel_authorization_data = {
            "media-write": true,
            "tag-write": true,
        };

        function authorize(expression, target) {
//        var expressions = expression.split('-');
            return _.get(laravel_authorization_data, expression, false);
        }

        Vue.prototype.authorize = authorize;

        $("#sortable").sortable({
            handle: '.icon-sort-item',
            cancel: '',
            update: function (event, ui) {
                var benefits = $(this)
                    .sortable('toArray').toString();
                app.array_sort = benefits.split(',');
                console.log(app.array_sort);
            }
        }).disableSelection();
    </script>
    <script>
        var params = [];
        var basic_home_new = [];
    </script>
    <script src="/js/friendlist/modal_filter_v2.js?v={{ config('sns-line.version') }}"></script>
@endpush