@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="/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 href="/css/form_answer/bs_style.css?v={{config("sns-line.version")}}" rel="stylesheet" type="text/css">--}}
    <link rel="stylesheet" type="text/css" href="/css/form_answer/style.css?v={{config("sns-line.version")}}">
@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: #51595C; font-weight: bold; padding: 10px 10px 10px 0">
                                フォーム作成</h2>

                            <div id="lvbuilder" v-cloak>
                                <div id="lvcanvas">
                                    <div class="row">
                                        <div class="form-horizontal col-sm-12">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="col-sm-12">
                                                        <div class="form-group">
                                                            <label for="formname" class="control-label">
                                                                管理名
                                                                <small>
                                                                    <span class="label label-danger">必須</span>
                                                                </small>
                                                            </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 id="count_text_name" style="width: 110px;margin-top: 6px;margin-left: 16px;font-family: 'Times New Roman' !important;">0/20文字</div>
                                                                </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-6">
                                                    <div class="col-sm-12">
                                                        <div class="form-group">
                                                            <label for="folder_id" class="control-label">
                                                                フォルダ
                                                                <small>
                                                                    <span class="label label-danger">必須</span>
                                                                </small>
                                                            </label>
                                                            <div class="">
                                                                <select class="form-control" 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="margin-top: 10px">
                                            <h4 class="font-weight-bold">ヘッダー・ボタン編集</h4>
                                            <hr class="border-bottom-title"/>
                                        </div>
                                        <br/>
                                        <div class="col-sm-12">
                                            <div class="row">
                                                <div class="col-sm-4">
                                                    <div class="panel panel-default">
                                                        <div class="panel-heading text-center font-weight-bold" style="position: relative; padding: 17px 0 !important; line-height: 20px">
                                                            LINEトーク画面　表示設定<br/>
{{--                                                            <span style="font-size: 15px">1度配信したフォームは変更が反映されない場合があります。</span>--}}
                                                        </div>
                                                        <div class="panel-body">
                                                            <div class="form-group">
                                                                <label for="pagetitle" class="control-label">
                                                                    タイトル
                                                                    <small>
                                                                        <span class="label label-danger">必須</span>
                                                                    </small>
                                                                </label>
                                                                <div style="display: flex; align-items: flex-end">
                                                                    <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">
                                                                    <span style="margin-left: 10px; font-size: 20px; color: rgba(149,149,149,1)">@{{ countLenghtTitel }}/50</span>
                                                                </div>
                                                                <span class="text-danger"
                                                                      v-show="errors.has('pagetitle')">@{{ errors.first('pagetitle') }}</span>
                                                            </div>
                                                            <div class="form-group">
                                                                <label for="pagedescripiton" class="control-label">
                                                                    説明 <small>
                                                                        <span class="label label-danger">必須</span>
                                                                    </small>
                                                                </label>
                                                                <div style="display: flex; align-items: flex-end">
                                                                    <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>
                                                                    <span style="margin-left: 10px; font-size: 20px; color: rgba(149,149,149,1)">@{{ countLenghtDescription }}/50</span>
                                                                </div>
                                                                <span class="text-danger" v-show="errors.has('pagedescripiton')">@{{ errors.first('pagedescripiton') }}</span>
                                                            </div>
                                                            <div class="form-group" style="font-size: 15px;font-weight: bold">
                                                                ※1度配信したフォームは変更が反映されない場合があります。
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-sm-4">
                                                    <div class="panel panel-default">
                                                        <div class="panel-heading text-center font-weight-bold"
                                                             style="padding: 13px 0 !important;">
                                                            ヘッダー画像
                                                            <small class="required pull-right" style="font-size: 14px; background-color: rgba(87,153,219,1);padding: 5px 10px;
    border-radius: 35px;">任意</small>
                                                        </div>
                                                        <div class="panel-body font-weight-bold"
                                                             style="padding: 0 15px; min-height: 112px; line-height: 112px; position: relative">
                                                            <label for="upload_file_header" class="font-weight-bold" style="background-color: rgba(177,177,177,1); color: white;padding: 10px;
                                                                border-radius: 35px;margin-left: 15px;display: inline"> アップロード
                                                                <input style="display: none" type="file"
                                                                   name="upload_file_header" accept="image/*"
                                                                   @change="uploadImageHeader($event)"
                                                                   id="upload_file_header">    
                                                            </label>
                                                            
                                                            <img style="margin-bottom: 15px" v-if="lv.image_header"
                                                                 :src="'