@extends('layout.basic.main')
@push('css')
    <script async="" src="/js/form_answer/analytics.js"></script>
    <script>
        var lml_abilities = {};
    </script>
    <link href="/css/form_answer/bootstrap-datepicker.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="/css/form_answer/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 href="/css/form_answer/bs_style.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="/css/form_answer/style.css">
@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: 20px; color: #222222; font-weight: bold; padding: 10px 10px 10px 0">フォーム</h2>

                            <div id="lvbuilder" v-cloak>
                                <div class="row">
                                    <div class="col-sm-8">
                                        @include('basic.form_answer.partials.left_form')
                                    </div>
                                    <div class="col-sm-4">
                                        @include('basic.form_answer.partials.right_form')
                                    </div>
                                </div>
                            </div>
                            <br>
                            <br>
                            <a href="{!! route('form_answer.index') !!}">一覧に戻る</a>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </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>
    <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/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/v_action_editor.js"></script>
    {{--Setup form--}}
    <script>
        var csrf_token = "{!! csrf_token() !!}";
        var root_url = "@if(empty($form_answer))/basic/form-answer/store @else /basic/form-answer/save/{!! $form_answer->id !!}@endif";
        @if(!empty($form_answer)) update_flag = true;
        @else update_flag = false;
                @endif
        var lvfname = "@if(!empty($form_answer)){!! $form_answer->name !!}@endif";
        var lvfid = "@if(!empty($form_answer)){!! $form_answer->name !!}@endif";
        var lvfcode = "@if(!empty($form_answer)){!! $form_answer->unique_key !!}@endif";
        var lvfroot = "";
        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": "@if(!empty($form_answer)){!! $form_answer->reply_text !!}@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="/plugins/loadingoverlay/loadingoverlay.min.js"></script>
    <script src="/js/form_answer/create.js?v={{config("sns-line.version")}}"></script>
    {{--    <script>--}}
    {{--        @if(empty($form_answer))--}}
    {{--            item = {--}}
    {{--            "type": "description",--}}
    {{--            "name": "description_1",--}}
    {{--            "typeoption": "description",--}}
    {{--            "label": "\u898b\u51fa\u3057",--}}
    {{--            "title": "",--}}
    {{--            "help": "",--}}
    {{--            "default": "",--}}
    {{--            "swatch_id": "1",--}}
    {{--            "page": "0",--}}
    {{--            "rules": ""--}}
    {{--            // "t"--}}
    {{--        };--}}
    {{--        app.lv.attr.push(item);--}}
    {{--        Vue.nextTick(function () {--}}
    {{--            $('#component_display_0').toggle();--}}
    {{--        });--}}
    {{--        @endif--}}
    {{--    </script>--}}
    <script>
        $(function () {
            $(".nano").nanoScroller({iOSNativeScrolling: true});
            $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                $(".nano").nanoScroller({iOSNativeScrolling: true});
            });
        });
    </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
            });
        });
    </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;
    </script>
@endpush