@extends('layout.basic.main')
@push('css')
    <link rel="stylesheet" href="/css/form_answer/form_style.css?v={{config("sns-line.version")}}">
    <style>
        main {
            min-height: 100vh !important;
            height: auto;
        }

        .hear_table {
            color: #fff !important;
        }
    </style>
@endpush
@section('content')
    <article class="">
        <div id="loading_overlay" class="loading-overlay text-center" style="display: none">
            <i class="glyphicon glyphicon-refresh spin"></i>
        </div>
        <section class="taglist tmp" id="form-answer-list" style="margin-bottom: 0" v-cloak>
            <div class="row">
                <div class="col-sm-12">
                    <h2 style="font-size: 20px; color: #222222; font-weight: bold; padding: 10px 10px 10px 0">フォーム作成</h2>
                    <p style="margin-bottom: 15px; font-size: 15px; color: #222222">申込フォームやアンケートフォームを作成・管理することができます。<br>
                        メッセージで「呼び出しタグ」を送信し、回答を入力していただくことで、タグ付けやテンプレートの送信などのアクション設定を自動で行うことができます。</p>
                    <a  @if($flagNewFreePlan == 0 || ( $flagNewFreePlan == 1 && $formAnswerNumber < 3))href="{!! route('form_answer.create') !!}" @endif class="btn btn-success"
                        @if($flagNewFreePlan == 1 && $formAnswerNumber >= 3) onclick="showAlertNewFreePlan()" @endif>新規作成</a>　
                    <hr>
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th class="hear_table">フォーム名</th>
                            <th class="hear_table" style="width: 21em;">呼び出しタグ</th>
                            <th class="hear_table" style="width: 10em;">回答人数</th>
                            <th class="hear_table" style="width: 100px;"></th>
                            <th class="hear_table">回答後設定</th>
                            <th class="hear_table" style="width: 8em;">作成日</th>
                            <th class="hear_table"></th>
                        </tr>
                        </thead>
                        <tbody style="margin-bottom: 20px;border-bottom: 1px;border-style: groove;">
                        <tr v-if="items.length == 0 ">
                            <td colspan="7">登録されているフォーム作成がありません</td>
                        </tr>
                        <tr v-if="items.length > 0 " v-for="(item, index) in items">
                            <td>@{{ item.name }}</td>
                            <td>
                                <div class="input-group input-group-sm">
                                    <input type="text" :value="'[FORM_'+item.unique_key+']'" class="form-control"
                                           :id="'short_url_'+item.unique_key">
                                    <span class="input-group-btn">
                                        <a :href="'/basic/form-answer/form-render/'+item.unique_key+'?mode=preview'"
                                           class="btn btn-default"
                                           target="_blank" type="button">プレビュー</a>
                                  </span>
{{--                                    <div v-if="item.google_sheet_id != null" class="icon-google-sheet">--}}
{{--                                        <a :href="'https://docs.google.com/spreadsheets/d/'+item.google_sheet_id"--}}
{{--                                           target="_blank">--}}
{{--                                            <img src="{{asset('images/google-sheet.png')}}" alt="" width="30px">--}}
{{--                                        </a>--}}
{{--                                    </div>--}}
                                </div>
                            </td>
                            <td>
                                <b>@{{ item.viewer }}</b>人
                                <a :href="'/basic/form-answer/v2/result/'+item.id"
                                   class="btn btn-xs btn-default"
                                   v-bind:class="item.viewer == 0 ? 'disabled': '0'">表示</a>
                                <br>
                                <a :href="'/ajax/download-answer/'+item.id"
                                   class="btn btn-xs btn-default" v-bind:class="item.viewer == 0 ? 'disabled': '0'"
                                   style="margin-top: 0.5em;">回答一覧DL</a>
                            </td>
                            <td>
                                <a :href="'/basic/form-answer/edit/'+item.id" class="btn btn-sm btn-warning">編集</a>
                            </td>
                            <td>
                                <p v-show="item.tag_id != null">タグ[@{{ item.tag_id }}]を追加</p>
                                <p v-show="item.template_id != null ">テンプレ[@{{ item.template_id }}]を送信</p>
                                <p v-show="item.scenario_id != null">ステップ[@{{ item.scenario_id }}]を開始</p>
                                <span v-show="item.has_settings == false">-</span>
                                　<a :href="'/basic/form-answer/setting/'+item.id" class="btn btn-xs btn-info">
                                    回答後設定
                                </a>
                            </td>
                            <td>
                                @{{ item.created_at }}
                            </td>
                            <td>
                                <input class="btn btn-xs btn-danger"
                                       v-on:click="deleteItem(item.id)"
                                       type="button" value="削除">
                            </td>
                        </tr>
                        </tbody>

                    </table>
                    <div class="pagenavi text-left">
                        <button class="btn btn-success" v-bind:class="next_page == 1 ? 'disabled': ''"
                                v-on:click="nextPage(next_page)">次の50件へ
                        </button>
                    </div>

                </div>
            </div>
        </section>
    </article>
@endsection
@push('js')
    <script src="/plugins/loadingoverlay/loadingoverlay.min.js"></script>
    <script type="application/javascript" src="/js/form_answer/index.js?v={{config("sns-line.version")}}"></script>
    <script>
        function showAlertNewFreePlan(){
            alert('現在のプランは利用できない機能です。アップグレードが必要になります。');
        }
    </script>
@endpush