@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">
    <style>
        [v-cloak] {
            display: none;
        }

        body {
            background-color: #F5F7FA;
        }

        #crossAnalysisRemoved input[type=checkbox] {
            margin: 0;
        }

        #crossAnalysisRemoved input[type=checkbox]:focus {
            outline: none;
            box-shadow: none;
        }

        #crossAnalysisRemoved input[type=checkbox]:checked {
            background-image: none;
            background-color: #08bf5a;
        }

        #crossAnalysisRemoved .relative {
            background-color: inherit;
        }

        #crossAnalysisRemoved .relative.active {
            background-color: inherit !important;
        }

        #crossAnalysisRemoved .relative.bg-\[\#F5F5F5\] {
            background-color: #F5F5F5;
        }

        #crossAnalysisRemoved input[type='text']:focus {
            outline: none;
        }

        #crossAnalysisRemoved table {
            background-color: white;
            table-layout: fixed;
        }

        #crossAnalysisRemoved table thead {
            background-color: white;
        }

        #crossAnalysisRemoved table thead th {
            background-color: #F5F5F5 !important;
            color: #222222;
            font-weight: 300;
            overflow: hidden;
        }

        #crossAnalysisRemoved table tbody tr {
            border-bottom: 1px solid #E0E0E0;
        }

        #crossAnalysisRemoved .open > .dropdown-menu {
            display: flex;
            flex-direction: column;
        }

        #crossAnalysisRemoved .active {
            background-color: white !important;
            border: 1px solid #5799DB;
        }

        #crossAnalysisRemoved .active button {
            color: #5799DB;
        }

        #crossAnalysisRemoved .dropdown-menu {
            min-width: 103px;
            top: -155px
        }

        .toastMessage::before {
            content: "";
            display: inline-block;
            width: 18px;
            height: 18px;
            background-image: url('/images/circle-check.svg');
            background-size: cover;
            margin-right: 3px;
        }
        table tr td {
            color: #222222;
        }
        /* table tr:hover td {
            background: #F4FBF2;
        } */
    </style>
@endpush
@section('content')
    <div id="crossAnalysisRemoved" class="w-[650px] text-[#222222] text-[14px] font-[300] my-[21px] mx-[21px]" v-cloak>
        <div class="">
            <div class="text-[#888888]">
                <a href="{{ route('index.crossAnalysis') }}"
                   class="font-[300] hover:text-[#888888] hover:opacity-70 underline hover:underline">TOP</a><span class="mr-[25px] ml-[5px]">><span class="ml-[5px]">削除済みリスト</span></span>
            </div>
            <div class="font-[600] text-[18px] mt-[13px]">
                削除済み分析リスト
            </div>
        </div>

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

        <div class="w-[650px] rounded-[10px] bg-[#FFFFFF] mt-[16px] px-[25px] py-[25px] overflow-y-auto" style="height: calc(100vh - 330px)">
            <table>
                <thead>
                <tr class="w-[600px] h-[40px]">
                    <th class="rounded-l-[5px] text-start flex items-center h-[40px] w-[200px]">
                        削除した日時
                        <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>
                    </th>
                    <th class="text-start w-[250px]">管理名</th>
                    <th class="rounded-r-[5px] w-[150px]"></th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item, index) in cross_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-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="cross_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 class="w-[650px] h-[70px] rounded-[10px] bg-[#FFFFFF] mt-[16px] px-[22px] py-[15px]">
            <div class="flex justify-content-between items-center">
                <a href="{{ route('index.crossAnalysis') }}"
                   class="w-[110px] h-[40px] border border-solid border-[#DDDDDD] rounded-[5px] flex items-center justify-center hover:text-[#222] hover:opacity-70">戻る</a>

                @include('basic.cross_analysis.v2.components.pagination')
            </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/cross_analysis/v2/pagination.js?v={{config("sns-line.version")}}"></script>
    <script src="/js/cross_analysis/v2/removed.js?v={{config("sns-line.version")}}"></script>
@endpush