@extends('layout.admin.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="/_assets/commons/css/list.css?v={{config("sns-line.version")}}" type="text/css">
    <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="/_assets/commons/css/lme_custom.css?v={{config("sns-line.version")}}" type="text/css">
    <link rel="stylesheet" href="/_assets/modules/bill/css/disconnect_history.css?v={{config("sns-line.version")}}"
          type="text/css">
@endpush
@section('content')
    <div id="loading-clarity"></div>
    <section id="disconnect-history-page" v-cloak>
        <div id="header-page">
            <nav class="breadcrumb breadcrumb01">
                <ul>
                    <li><a href="/basic/point-settings">TOP</a></li>
                    <li>接続解除履歴</li>
                </ul>
            </nav>
            <div class="flex-align-items">
                <div class="title">接続解除履歴</div>
                <div class="sub-title">接続解除したLINE公式アカウントの復元はできません。</div>
            </div>
        </div>
        <div class="main-container">
            <div class="container-list" style="  height: calc(100vh - 361px);">
                <div class="table-data" >
                    <table id="disconnect-list">
                        <thead>
                        <tr>
                            <th style="width: 200px">接続解除日時</th>
                            <th>LINE公式アカウント名</th>
                            <th>操作したユーザー</th>
                        </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(item, index) in table_data">
                                <td class="disconnect-date">
                                    @{{ getDisconnectDate(item) }}
                                </td>
                                <td>
                                    <div class="flex-align-items contract-info">
                                        <img class="avatar" src="/images/8.png">

                                        <div class="view-name">
                                            <div class="name">
                                                @{{ getAccountName(item) }}
                                            </div>
                                            <div class="account-line">
                                                @{{ getLineId(item) }}
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div class="label-action-user">
                                        @{{ item.data?.operator_name }}
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="list-empty" style="margin-top: 14%;" v-if="table_data.length <= 0">
                        <div class="flex-center">
                            <svg width="114" height="82" viewBox="0 0 114 82" fill="none"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path d="M112.791 79.5121C112.34 80.1548 111.74 80.6792 111.043 81.0408C110.346 81.4024 109.572 81.5905 108.786 81.5892H4.94423C4.15886 81.5905 3.38477 81.4024 2.6876 81.0408C1.99043 80.6792 1.39076 80.1548 0.939453 79.5121L22.2523 32.1406H91.4796C97.7739 46.1167 93.1227 35.7927 112.791 79.5121Z"
                                      fill="#D6DBE0"/>
                                <path d="M22.2521 0V32.1418C15.9617 46.1178 20.6077 35.7991 0.93918 79.5132C0.319125 78.6867 -0.0109012 77.6786 0.000274773 76.6454V42.0265L22.2521 0Z"
                                      fill="#E7E9ED"/>
                                <path d="M113.73 42.0318V76.6506C113.741 77.6839 113.411 78.6919 112.791 79.5185L91.4785 32.1418V0L113.73 42.0318Z"
                                      fill="#E7E9ED"/>
                                <path d="M113.731 42.0312V76.6501C113.725 77.9597 113.202 79.2139 112.276 80.1399C111.35 81.0659 110.095 81.5889 108.786 81.5951H4.94499C3.63541 81.5889 2.38124 81.0659 1.45521 80.1399C0.529188 79.2139 0.00620665 77.9597 0 76.6501L0 42.0312H42.2508C42.8386 42.0366 43.4055 42.2504 43.8505 42.6346C44.2955 43.0189 44.5897 43.5485 44.6806 44.1294C45.1717 47.0052 46.6642 49.6146 48.8941 51.496C51.1239 53.3773 53.9473 54.4092 56.8648 54.4092C59.7822 54.4092 62.6056 53.3773 64.8355 51.496C67.0653 49.6146 68.5578 47.0052 69.0489 44.1294C69.1399 43.5483 69.4343 43.0185 69.8795 42.6342C70.3248 42.25 70.892 42.0363 71.4801 42.0312H113.731Z"
                                      fill="#F5F5F7"/>
                                <path d="M91.4792 0H22.252V32.366H91.4792V0Z" fill="#F0F2F4"/>
                            </svg>

                        </div>
                        <div class="line-1">
                            まだデータがありません
                        </div>
                    </div>
                </div>




            </div>
        </div>
        <div class="container-pagination">
            <button @click="backToList" type="button" class="button-ripple button05-back mr-3" style=" width: 100px !important; ">戻る</button>
            <pagination :pagination="pagination" @change_page="changePage"
                        @change_limit="changeLimit"></pagination>
        </div>
    </section>
@endsection

@push('script')
    <script src="/js/media/vue.min.js"></script>
    <script src="/js/moment.min.js"></script>
    <script src="/js/moment-with-locales.js"></script>
    
    <script src="/js/tailwindcss.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
    <script src="/_assets/commons/js/lme.js?v={{config("sns-line.version")}}"></script>
    <script src="/_assets/commons/js/pagination.js?v={{config("sns-line.version")}}"></script>

    <script src="/_assets/modules/bill/js/disconnect_history.js?v={{config("sns-line.version")}}"></script>
@endpush