@extends('layout.basic.main')
@section('title','フォーム作成（削除済みフォーム）')
@push('css')
    <meta name="_token" content="{{csrf_token()}}" />
    <link rel="stylesheet" href="{{asset('css/form_answer/form_result_v3.css')}}?v={{config("sns-line.version")}}">
@endpush
@section('content')
    <div class="container-fluid" id="form_answer_removed" v-cloak>
        <div class="content-result">
            <div class="content-remove-left" style="">
                <div class="title-header">
                    <div class="d-flex justify-content-between">
                        <h3 class=" font-s18 font-w-bold color-text">削除済みフォーム</h3>
                        <div class="font-s14 font-w-normal color-gray1" >
                            <a href="{{ route('form_answer.index') }}" class="font-s14 font-w-normal color-gray1"  style="text-decoration: underline">フォーム一覧</a> > 削除済みフォーム
                        </div>

                    </div>
                </div>
                <div class="box-main">

                    <div class="mb-3">
                        <p class="font-s14 font-w-normal color-text" style="line-height: 22px;">このページでは削除したフォームの復元ができます。</p>
                        <p class="font-s14 font-w-normal color-text" style="line-height: 22px;">フォームは手動では削除することができず、削除した日時から90日後に自動で削除されます。</p>
                    </div>
                    <div  class="mt-2 tb-content">
                        <div class="table scrollable" style="height: calc(-353px + 100vh);    margin-bottom: 0;">
                            <table>
                                <thead>
                                <tr>
                                    <th style="width: 181px">
                                        <div style="position: relative; display: inline-block;">
                                            <span>削除した日時</span>
                                            <i class="fas fa-chevron-up" @click="sort('ASC')"></i>
                                            <i class="fas fa-chevron-down" @click="sort('DESC')"></i>
                                        </div>
                                    </th>
                                    <th style="width: 175px">フォーム名</th>
                                    <th>削除したユーザー名</th>
                                    <th></th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="item in items">
                                    <td>@{{ moment(item.deleted_at, "YYYY-MM-DD HH:mm").format("YYYY.MM.DD(ddd) HH:mm") }}</td>
                                    <td>@{{ (item.system_name ?? item.name)|shortContent }}</td>
                                    <td><span class="name_format">@{{ item.username_del ?? '-' }}</span></td>
                                    <td>
                                        <button class="font-s12 font-w-normal color-text" style="color: var(--blue); border: 1px solid var(--blue)" @click="restore(item.id)">復元する</button>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                </div>
                <div class="boxPaginate">
                    <div class="tb-footer d-flex justify-content-between align-items-center">
                        <button class="font-s14 font-w-normal color-text btn-back" @click="window.location.href = '{{route('form_answer.index')}}'">戻る</button>
                        <pagination :pagination="pagination" @change_page="changePage" @change_limit="changeLimit"></pagination>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal" id="limit-form" tabindex="-1" role="dialog" style="overflow: hidden; background: #b7b5b996">
            <div class="modal-dialog" role="document" style="width: 100%; height: 100%;">
                <div class="modal-content" style="width: 500px; height: 220px; border-radius: 10px; padding: 10px; top: 40%; left: 50%; transform: translate(-50%, -50%);">
                    <div class="d-flex align-items-center justify-content-between" style="padding: 15px">
                        <div class="modal-title d-flex align-items-center" style="justify-content: start">
                            <i class="far fa-info-circle" style="margin-right: 10px; color: #F44336; font-size: 18px"></i>
                            <span style="font-size: 18px; font-weight: 600; color: #222222">フォーム作成上限に達しています。</span>
                        </div>
                        <button type="button" data-dismiss="modal" aria-hidden="true" class="close" style="opacity: 1; font-size: 27px;">
                            <i class="fal fa-times hover-icon-action" style="color: #2B2F36; padding: 5px 10px; border-radius: 4px; font-size: 24px;"></i>
                        </button>
                    </div>
                    <div class="modal-body" style="font-weight: 300; font-size: 14px; color: #222222; padding: 0 15px;">
                        <p>フリープランで作成できるフォームは3つまでとなります。</p>
                        <p>フォームを復元するには、有料プランにアップグレートするか</p>
                        <p>削除されていないフォームが2つ以下である必要があります。</p>
                    </div>
                    <div class="d-flex justify-content-between" style="padding: 25px 15px">
                        <button type="button" data-dismiss="modal" class="btn-close">閉じる</button>
                        <button type="button" class="btn-detail-plan" @click="window.location.href = '/admin/bot-add'">有料プラン詳細へ</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('js')
    <script src="/plugins/vuejs/vue-resource@1.3.4.js"></script>
    <script src="/plugins/loadingoverlay/loadingoverlay.min.js"></script>
    <script>
    </script>
    <script src="/js/form_answer/form_answer_removed.js?v={{config("sns-line.version")}}"></script>
    <script src="/js/form_answer/pagination.js?v={{config("sns-line.version")}}"></script>
@endpush