@extends('layout.basic.main')
@section('title', 'リッチメニュー（削除済み）')
@push('css')
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.4/css/all.css"
          integrity="sha384-rqn26AG5Pj86AF4SO72RK5fyefcQ/x32DNQfChxWvbXIyXFePlEktwD18fEz+kQU" crossorigin="anonymous">
    <link rel="stylesheet" href="/_assets/commons/css/breadcrumbs.css?v={{config("sns-line.version")}}" type="text/css">
    <link rel="stylesheet" href="/_assets/commons/css/pagination.css?v={{config("sns-line.version")}}" type="text/css">
    <link rel="stylesheet" href="/css/menu_rich/v2/removed.css?v={{config("sns-line.version")}}" type="text/css">
@endpush
@section('content')
    <div id="richMenuRemoved" class="text-[#222222] text-[14px] font-[300] mx-[21px]" v-cloak>
        <div class="mt-5">
            <div class="!text-[#888888]">
{{--                <a href="{{ route('richMenu') }}"--}}
{{--                   class="font-[300] !hover:text-[#888888] hover:opacity-70 breadcrumb-del">TOP</a><span class="mr-[25px] ml-[5px]">><span class="ml-[5px] rm-font-16">削除済みリッチメニュー</span></span>--}}

                <nav class="breadcrumb breadcrumb01">
                    <ul>
                        <li><a href="/basic/rich-menu">TOP</a></li>
                        <li>削除済みリッチメニュー 編集</li>
                    </ul>
                </nav>
            </div>
            <div class="page-title">
                削除済みリッチメニュー
            </div>

        </div>

        <div class="w-[1000px] min-h-[70px] rounded-[10px] bg-[#FFFFFF] pl-[22px] py-[13px] mt-[17px] section-title">
            <p>このページでは削除したアイテムの復元ができます。</p>
            <p>アイテムは手動では削除することができず、削除した日時から90日後に自動で削除されます。</p>
        </div>

        <div class="w-[1000px] rounded-[10px] bg-[#FFFFFF] mt-[16px] px-[25px] py-[25px] " >
            <div class="overflow-y-auto boxTblRichRemoved" style="">
                <table class="table-striped">
                    <thead >
                    <tr class="w-[1000px] h-[40px]">
                        <th class="rounded-l-[5px] h-[40px] w-[200px]">
                            <div style="display: flex; align-items: center">
                                削除した日時
                                <div class="ml-[12px] flex flex-col cursor-pointer mt-[2px]" @click="toggleSortDeleted()">
                                    <i class="font-[700] fal fa-angle-up"></i>
                                    <i class="font-[700] fal fa-angle-down mt-[-5px]"></i>
                                </div>
                            </div>
                        </th>
                        <th class="text-start min-w-[300px]">管理名</th>
                        <th class="text-start min-w-[250px] ">操作者</th>
                        <th class="rounded-r-[5px] w-[150px]"></th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr  v-for="(item, index) in rich_removed" class="h-[50px]">
                        <td class="text-start pl-[20px]">@{{ moment(item.deleted_at, "YYYY-MM-DD HH:mm").format("YYYY.MM.DD(ddd) HH:mm") }}</td>
{{--                        <td class="text-start pl-[20px] truncate" :title="item.name">@{{ item.name }}</td>--}}
                        <td class="text-start pl-[20px] " >
                            <div class="lme-name-rich">
                                <div class="title-name-rich">
                                    @{{ item.name }}
                                </div>
                                <div class="hint i-tooltip">@{{ item.name }}</div>
                            </div></td>

                        <td class="text-start pl-[20px] truncate ">@{{ item.username_del ?? '' }}</td>
                        <td class="text-end pr-[14px]">
                            <button @click="restoreCross(index)"
                                    class="w-[70px] h-[30px] border border-solid border-[#5799DB] rounded-[3px] text-[#5799DB] text-[12px] hover:opacity-1 hover:bg-[#5799DB] hover:text-[#ffffff]">
                                復元する
                            </button>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <div v-if="rich_removed.length == 0" class="min-h-[132px] flex items-center justify-center w-full"
                     style="height: calc(100% - 65px)">
                    <div class="text-center">
                        <div class="flex justify-center" style="margin-bottom: 26px">
                            <img src="/images/group_4483.svg" alt="" />
                        </div>
                        <div class="mb-[17px]" style="color: #8C8C8C; font-weight: 400; font-size: 18px">まだデータがありません</div>
                    </div>
                </div>
            </div>

        </div>

        <div class="w-[1000px] rounded-[10px] bg-[#FFFFFF] mt-[16px] px-[22px] py-[15px]">
            <div class="flex justify-content-between items-center">
                <a href="{{ route('richMenu') }}"
                   class="rm-back w-[110px] h-[40px] border border-solid border-[#DDDDDD] rounded-[5px] flex items-center justify-center !text-[#222] hover:text-[#222] hover:opacity-70">戻る</a>

{{--                @include('basic.rich_menu.v2.components.pagination')--}}
                <div>
                    <pagination :pagination="pagination" @change_page="changePage" @change_limit="changeLimit" :arr_limit="arr_limit"></pagination>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        var token = "{!! csrf_token() !!}";
    </script>

    <script src="/js/tailwindcss.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
{{--    <script src="/js/menu_rich/v2/pagination.js?v={{config("sns-line.version")}}"></script>--}}
    <script src="/_assets/commons/js/pagination.js?v={{config("sns-line.version")}}"></script>
    <script src="/js/menu_rich/v2/removed.js?v={{config("sns-line.version")}}"></script>
@endpush