@extends('layout.basic.main')
@section('title','QRコードアクション（削除済み）')
@push('css')
    <meta name="_token" content="{{csrf_token()}}" />
    <link rel="stylesheet" href="{{asset('css/qr_code/qrs_removed.css')}}?v={{config("sns-line.version")}}">
@endpush
@section('content')
    <div class="" id="qr_removed" v-cloak>
        <div class="content-result">
            <div class="" style="width: 100%;">
                <div class="notice">
                    <div class="notice-header">
                        <a href="{{ route('landingIndex') }}">TOP</a> > 削除済みQRコードアクション
                    </div>
                    <hr>
                    <p class="font-s14 font-w-normal color-text">このページでは削除したQRコードアクションの復元ができます。</p>
                    <p class="font-s14 font-w-normal color-text">手動では削除することができず、削除した日時から90日後に自動で削除されます。</p>
                </div>
                <div class="box-main mb-3">
                    <div  class="mt-2 tb-content">
                        <div class="table scrollable" style="height: calc(-353px + 100vh);    margin-bottom: 0;">
                            <table>
                                <thead>
                                <tr>
                                    <th style="width: 190px">
                                        <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>管理名</th>
                                    <th>操作者</th>
                                    <th></th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="item in items">
                                    <td style="padding-left: 20px">@{{ moment(item.deleted_at, "YYYY-MM-DD HH:mm").format("YYYY.MM.DD(ddd) HH:mm") }}</td>
                                    <td style="padding-left: 20px">
                                        <span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; display: block">@{{ item.name }}</span></td>
                                    <td style="padding-left: 20px">
                                        <span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; display: block">@{{ item.operator?.username }}</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 class="text-center centered-box" style="margin: 29px auto" v-if="items.length <= 0">
                                <div style="margin-bottom: 19px">
                                    <img src="/images/group_4483.svg" alt="...">
                                </div>
                                <div style="color: #8C8C8C; font-weight: 400; font-size: 16px">まだデータがありません</div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="boxPaginate">
                    <div class="tb-footer d-flex justify-content-between align-items-center" :class="{ 'show-box-pagination': pagination.last_page > 1 }">
                        <button class="font-s14 font-w-normal color-text btn-back" @click="window.location.href = '{{route('landingIndex')}}'">戻る</button>
                        <pagination :pagination="pagination" @change_page="changePage" @change_limit="changeLimit"></pagination>
                    </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/qr_code/v2/qrs_removed.js?v={{config("sns-line.version")}}"></script>
    <script src="/js/qr_code/v2/pagination.js?v={{config("sns-line.version")}}"></script>
@endpush