@extends('layout.basic.main')
@section('title','フォーム作成（一覧）')
@push('css')
<link rel="stylesheet" href="/css/form_answer/form_style.css?v={{config('sns-line.version')}}">
<link rel="stylesheet" href="/css/form_answer/index.css?v={{config('sns-line.version')}}">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-rqn26AG5Pj86AF4SO72RK5fyefcQ/x32DNQfChxWvbXIyXFePlEktwD18fEz+kQU" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>

<style>
    input[type=checkbox] {
        -moz-appearance:none;
        -webkit-appearance:none;
        -o-appearance:none;
        outline: none;
        content: none;
    }

    input[type=checkbox]:before {
        font-family: "FontAwesome";
        content: "\f00c";
        font-size: 15px;
        color: transparent !important;
        background: #fff;
        display: block;
        width: 18px;
        height: 18px;
        border: 1px solid #ccc;
        border-radius: 5px;
        margin-right: 7px;
    }

    #checkbox_all::before{
        border: 0;
        width: 17px;
        height: 17px;
    }

    input[type=checkbox]:checked:before {

        color: rgb(81, 89, 92) !important;
    }
    input[type=checkbox]:focus{
        outline: unset;
    }

    .table>tbody>tr>td{
        border-top-color: #F2F2F2 !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: #51595C; font-weight: bold; padding: 10px 10px 10px 0">フォーム作成</h2>
                <br />
                <br />
                <div class="row">
                    <div class="col-md-3  col-lg-2 tag_left" style="position: relative">
                        <div style="margin-right: -15px">
                            <div class="tab_folder  ">
                                <span style="font-weight: bold">フォルダ</span>
                                <div class="d-flex">
                                    <div class="popup">
                                        <span v-on:click="showHidePopupCreateFolder" class="line-icon">
                                           <i class="far fa-plus-circle"></i>
                                        </span>
                                    </div>

                                    <span data-toggle="modal" data-target="#modalSortFolder" v-on:click="showModalSortFolder()" class="line-icon">
                                        <i class="fas fa-sort-amount-down-alt "></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="form-create-folder" :class="show_create_folder ? 'show-create-folder' : ''">
                            <div class="form-group">
                                <label for="folder_name" id="title_folder">フォルダ名</label>
                                <div style="padding: 7px 0; display: flex; align-items: flex-end">
                                    <input type="text" name="folder_name" id="folder_name" v-model="folder_name" />
                                    <span style="font-size: 12px;margin-left: 2px;">@{{ countTex(folder_name) }}/15</span>
                                </div>
                                <span class="text-danger" v-html="error_folder"></span>
                            </div>
                            <div class="form-group" style="display: flex;justify-content: space-between;">
                                <button type="button" class="btn btn-primary" style="padding: 6px 8px; background-color: rgb(8, 191, 90); border: none" @click="createFolder()" v-model="folder_name">決定
                                </button>
                                <button type="button" class="btn btn-secondary" style="padding: 5px;background-color: rgb(125, 145, 149);color: #FFFFFF" @click="showHidePopupCreateFolder()">キャンセル
                                </button>
                            </div>
                        </div>
                        <div class="nano-inner" id="nano-inner-group" style="margin-top: 0">
                            <div class="tag_group row" id="group_0" data-id="0" style="padding: 10px 7px" v-bind:class="(folder_active == 0)?'active':'folder-close'">
                                <div @click="selectedFolder(0, $event)" class="display_category row" style="margin-left: 1px;">
                                    <div class="col-md-11 list-i-fol">
                                        <div>未分類 (@{{ count_default }})</div>
                                        <div class="btn-group" style="padding: unset;">
                                            {{-- <i class="far fa-ellipsis-h ic-menu" ></i>--}}
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div v-for="(category, index) in sortedCategories" class="tag_group row" :id="'group_'+category.id" :data-id="category.id" v-bind:class="(category.id == folder_active)?'active':'folder-close'">
                                <div @click="selectedFolder(category.id, $event)" class="display_category  row" style="margin-left: 1px;">
                                    <div class="col-md-11 list-i-fol">
                                        <div>
                                            @{{ category.name }} (@{{ category.count }})
                                        </div>
                                        <div class="btn-group" style="padding: unset;" :style="(category.id == folder_active)?'display:block':'display:none'">
                                            <i class="far fa-ellipsis-h ic-menu"></i>
                                            <ul class="dropdown-menu action-broadcast" style="min-width: 113px;left: -89px;top: 16px;">
                                                <li class="focus-pointer" @click="showHidePopupEditFolder(category.id, category.name)">
                                                    <div style="cursor: pointer">
                                                        フォルダ名変更
                                                    </div>
                                                </li>
                                                <li class="focus-pointer" @click="deleteFolder(category.id)">
                                                    <div style="cursor: pointer">
                                                        フォルダ削除
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-9 col-lg-9">
                        <div class="row" style="display: flex; align-items: center">
                            <div class="col-md-3">
                                <a @if($flagNewFreePlan==0 || ( $flagNewFreePlan==1 && $formAnswerNumber < 3)) href="{!! route('form_answer.create') !!}" @endif class="btn btn-sns-line btn-sns-line-primary" @if($flagNewFreePlan==1 && $formAnswerNumber>= 3) onclick="showAlertNewFreePlan()" @endif>
                                    新規作成
                                </a>
                            </div>
                            <div class="col-md-9 text-right">
                                @if(!empty($google_sheet_auth_url))
                                <a href="{{ $google_sheet_auth_url }}" class="btn btn-default" id="btn-relation-googlesheet">
                                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200.609" height="45" viewBox="0 0 207.609 50"><image id="btn_google_signin_light_normal_web_2x" data-name="btn_google_signin_light_normal_web@2x" width="207.609" height="50" xlink:href="data:image/png;base64,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"></image></svg>
                                </a>
                                @else
                                <a href="{{route('cancel.google.sheet', ['bot_id' => $bot->id])}}?unlink-google-sheet=true" style="background-color: white; border: 1px solid #F44336; color: #F44336 !important;" class="btn btn-sns-line btn-sns-line-danger">Google連携解除</a>
                                @endif
                                <button class="btn btn-sns-line btn-sns-line-secondary" data-toggle="modal" data-target="#sorter_modal_v1" data-type="reaction" data-callback="item_sorted">
                                    並べ替え
                                </button>
                                <button type="button" @click="showModalMoveTemplate()" :disabled="selected.length == 0" class="btn btn-sns-line btn-sns-line-primary btn-move-folder">
                                    一括フォルダ変更
                                </button>
                                <button type="button"  @click="deleteListForm()" :disabled="selected.length == 0" class="btn btn-sns-line btn-sns-line-danger" style="padding-right: 26px; padding-left: 26px;">
                                    一括削除
                                </button>
                            </div>
                        </div>
                        <table class="table table-striped table-hover" id="tbl-formanswer">
                            <thead>
                                <tr>
                                    <th style="width: 50px;border-radius: 5px 0 0 5px"><input type="checkbox" id="checkbox_all" v-model="selectAll"></th>
                                    <th class="hear_table text-left">作成日/管理名</th>
                                    <th class="hear_table text-left" style="min-width: 200px;max-width: 450px;">配信用URL</th>
                                    <th class="hear_table text-left" style="width: 250px;padding-left: 25px">回答人数 / 回答者リスト</th>
                                    <th style="border-radius: 0 5px 5px 0" class="hear_table" width="50px"></th>
                                </tr>
                            </thead>
                            <tbody style="margin-bottom: 20px;border-bottom: 1px;border-style: groove;">
                                <tr v-if="items.length == 0 ">
                                    <td colspan="8">登録されているフォーム作成がありません</td>
                                </tr>
                                <tr v-if="items.length > 0 " v-for="(item, index) in items">
                                    <td :style="{ borderTop: index == 0 ? '0px' : '1px solid #ddd' }"><input type="checkbox" name="check_item[]" :value="item.id" v-model="selected"></td>
                                    <td :style="{ borderTop: index == 0 ? '0px' : '1px solid #ddd' }" class="text-left">
                                        <div style="font-size: 13px">@{{ item.created_at }}</div>
                                        <div>
                                            <a class="name_formanswer" :href="'/basic/form-answer/edit/'+item.id" style="text-decoration: underline; font-size: 16px">@{{ item.name }}</a>
                                        </div>
                                    </td>
                                    <td :style="{ borderTop: index == 0 ? '0' : '1px solid #ddd' }">
                                        <div class="d-flex" style="width: 100%; max-width: 450px;">
                                            <div class="preview-form"  style="width: 100%; max-width: 450px;">
                                                <input type="text" :value="'https://liff.line.me/{{$liff_id}}?unique_key='+item.unique_key+'&ts={{ time() }}'" class="form-control" :id="'short_url_'+item.unique_key" style="min-width: 200px;overflow: hidden">
                                                <a style="color:#51595C" href="#" :id="'url_preview'+item.unique_key" class="btn-copy-form" @click="copyToClipboard('https://liff.line.me/{{$liff_id}}?unique_key='+item.unique_key+'&ts={{ time() }}', event)" target="_blank" type="button"><i class="fal fa-copy"></i></a>
                                                <a style="color:#51595C" :href="'/basic/form-answer/form-render/'+item.unique_key+'?mode=preview'" class="btn-preview"  target="_blank"><i class="fal fa-eye"></i></a>
                                            </div>
                                        </div>
                                    </td>
                                    <td :style="{ borderTop: index == 0 ? '0' : '1px solid #ddd' }">
                                        <div style="display:flex; justify-content: space-around; align-items: center">
                                            <a :href="'/basic/form-answer/v2/result/'+item.id" class="text-right" style="display: inline-block; width: 50px;padding-right: 8px;text-decoration: underline;" v-bind:class="item.viewer == 0 ? 'disabled': '0'">@{{ item.viewer }}人</a>
                                            <a :href="'/ajax/download-answer/'+item.id" class="download_csv" v-bind:class="item.viewer == 0 ? 'disabled': '0'" style="margin-top: 0;">
                                                CSV <i class="fas fa-arrow-alt-to-bottom"></i>
                                            </a>
                                            @if($bot->google_sheet_access_token)
                                            <div v-if="item.google_sheet_id != null" class="icon-google-sheet" style="display: inline">
                                                <a class="download_google_sheet" :href="'https://docs.google.com/spreadsheets/d/'+item.google_sheet_id" target="_blank">
                                                    <img src="{{asset('images/google-sheet.png')}}" alt="" width="20px">Google
                                                </a>
                                            </div>
                                            @endif
                                        </div>
                                    </td>
                                    <td :style="{ borderTop: index == 0 ? '0' : '1px solid #ddd' }">
                                        <div class="btn-group" style="padding: unset;">
                                            <i class="far fa-ellipsis-h ic-menu" style="font-size: 22px"></i>
                                            <ul class="dropdown-menu action-broadcast" style=" min-width: 85px;left: -39px;top: 15px;text-align: center;">
                                                <li class="focus-pointer-item">
                                                    <a @if($flagNewFreePlan== 0 || ( $flagNewFreePlan==1 && $formAnswerNumber < 3)) @click="copyFormanswer(item.id)" @else onclick="showAlertNewFreePlan()" @endif style="padding: 8px; font-weight: bold;color: #51595C ;">
                                                        コピー
                                                    </a>
                                                </li>
                                                <li class="focus-pointer-item" v-on:click="deleteItem(item.id)">
                                                    <a style="cursor: pointer;color: #F44336 !important; padding: 8px; display: block;">
                                                        削除
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </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>

            </div>
        </div>

        <div class="modal fade" id="modalSortFolder" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false" aria-labelledby="chatSettingStatus">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" v-on:click="closeModalSortFolder()" aria-hidden="true" style="opacity: 1;font-size: 27px">
                            <i class="fas fa-times" ></i></button>
                        <h2 class="text-center"> 【 フォルダ並べ替え 】</h2>

                    </div>
                    <div class="modal-body scroll-modal">
                        <div class="row mt-item-fol" v-for="(item,index) in arrGroupSort" :data-id="item.id">
                            <div class="col-sm-9 col-sm-offset-1  ">
                                <div style="padding: 8px; border: 1px solid rgba(205,214,221,1); border-radius: 4px">@{{item.name}}</div>
                            </div>
                            <div class="col-sm-1">
                                <div class="box-ic-sort">
                                    <i class="far fa-chevron-up" v-on:click="onUpdateDefaultGroup(undefined, index, 'up')"></i>
                                    <i class="far fa-chevron-down " v-on:click="onUpdateDefaultGroup(undefined, index, 'down')"></i>
                                </div>

                            </div>
                        </div>
                        <input type="hidden" id="array_sort_fol" value="">
                        <input type="hidden" id="current_position_fol" value="">
                    </div>
                    <div class="text-center">
                        <button type="button" class="btn btn-success btn-choise-folder" v-on:click="sortedFolder">保存</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="sorter_modal_v1" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div id="" class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="opacity: 1;font-size: 27px" {{--                                    v-on:click="cancelSorted"--}}>
                            <i class="fas fa-times" ></i></button>
                        <h2 class="text-center"> 【 並べ替え 】</h2>

                    </div>
                    <div class="modal-body scroll-modal" id="sorter_modal_body">
                        <div class="row mt-item-fol" v-for="(item,index) in items" :data-id="item.id">
                            <div class="col-sm-9 col-sm-offset-1  ">
                                <div style="padding: 8px; border: 1px solid rgba(205,214,221,1); border-radius: 4px">@{{item.name}}</div>
                            </div>
                            <div class="col-sm-1">
                                <div class="box-ic-sort">
                                    <i class="far fa-chevron-up " v-on:click="onUpdate(undefined, index, 'up')"></i>
                                    <i class="far fa-chevron-down " v-on:click="onUpdate(undefined, index, 'down')"></i>
                                </div>
                            </div>
                        </div>
                        <input type="hidden" id="array_sort" value="">
                        <input type="hidden" id="current_position" value="">
                    </div>
                    <div class="text-center">
                        <button type="button" class="btn btn-success btn-choise-folder" v-on:click="sortedTemplate">保存</button>
                    </div>

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

        <div class="modal fade" id="modalMoveFolder" tabindex="-1" role="dialog" aria-labelledby="chatSettingStatus">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="opacity: 1;font-size: 27px">
                            <i class="fas fa-times"></i></button>
                        <h2 class="text-center font-weight-bold"> 【 一括フォルダ変更 】</h2>

                    </div>
                    <div class="modal-body">
                        <div class="row ">
                            <div class="col-sm-2 col-sm-offset-1 title-left font-weight-bold">
                                移行先選択
                            </div>
                            <div class="col-sm-8">
                                <div class="b-select">
                                    <select class="form-control font-weight-bold my_class" v-model="folder_move_id">
                                        <option value="0">未分類</option>
                                        <option v-for="(category, index) in sortedCategories" :value="category.id">@{{ category.name }}</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="text-center" style="margin: 15px 0;">
                        <button type="button" class="btn btn-sns-line-success btn-sns-line" v-on:click="moveItems()" v-bind:class="(folder_active == 0 && selected == false) || (folder_active != 0 && selected == false)?'disabled':''">登録</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="modalAlertGoogleSheetError" tabindex="-1" role="dialog" aria-labelledby="chatSettingStatus">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="opacity: 1;font-size: 27px">
                            <i class="fal fa-times" style="color: #888888"></i></button>
                    </div>
                    <div class="modal-body">
                        <div class="row ">
                            <div class="text-center">

                               <img src="/images/exclamation-triangle-regular.svg" width="80px" style="margin-bottom: 26px">
                            </div>

                            <div style="font-size: 20px; font-weight: 600; color: #F44336 ; margin-left: 37px">
                                Googleスプレッドシートの連携が解除されました
                            </div>
                            <div style="color: #222222; font-weight: 300; font-size: 14px; margin-left: 67px ">
                                連携が解除された状態では、正常にデータ連携が行われません。
                            </div>

                        </div>
                    </div>
                    <div class="text-center" style="padding: 15px ; padding-bottom: 30px">
                        <a href="{{ $google_sheet_auth_url_reconnect }}" type="button" class="btn btn-sns-line-success btn-sns-line" style="margin-bottom: 20px ; font-size: 14px !important; font-weight: 600; background: #08BF5A !important;width: 150px; height: 40px " >再連携する</a>
                        <br>
                        <a   data-dismiss="modal"  style="color:#888888 ;font-weight: 300; font-size: 14px; text-decoration: underline; cursor: pointer">再連携せずにこの画面を閉じる</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
</article>
<input type="hidden" id="folder_select" @if(!empty($folderId)) value="{{ $folderId }}" @endif>
@endsection
@push('js')
    <script>
        var google_sheet_status =  '{{ ($bot ? $bot->google_sheet_status : null)}}';
    </script>
<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