@extends('layouts.admin_app')
@section('header')
@endsection
@section('content')
    <style>
        .table th,
        .table td {
            white-space: nowrap;
            /* 禁止文字換行 */
            text-align: center;
            /* 內容置中 */
            overflow: hidden;
            /* 隱藏超出內容 */
            text-overflow: ellipsis;
            /* 超出用省略號顯示 */
        }

        .table th {
            width: auto;
            /* 可根據內容自適應，但不要超出 */
        }

        .table {
            width: 100%;
            /* 撐滿父容器 */
        }
    </style>

    <div clas="content-wrapper">
        <div class="row">
            <div class="col-md-12">
                <div class="card-body">
                    <!-- Basic Breadcrumb -->
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item">
                                <a href="javascript:void(0);">首頁</a>
                            </li>
                            <li class="breadcrumb-item">
                                <a href="javascript:void(0);">設定</a>
                            </li>
                            <li class="breadcrumb-item active">優惠代碼</li>
                        </ol>
                    </nav>
                </div>
            </div>

            <!-- Content wrapper -->
            <div class="content-wrapper">

                <!-- Content  MemberList-->

                <div class="container-xxl flex-grow-1 container-p-y">
                    <div class="row g-6 mb-6">
                        <div class="col-sm-6 col-xl-3">
                            <div class="card">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between">
                                        <div class="me-1">
                                            <p class="text-heading mb-1">會員共計</p>
                                            <div class="d-flex align-items-center">
                                                <h4 class="mb-1 me-2">21,459</h4>
                                                <p class="text-success mb-1">(+29%)</p>
                                            </div>
                                            <small class="mb-0">Total Users</small>
                                        </div>
                                        <div class="avatar">
                                            <div class="avatar-initial bg-label-primary rounded-3">
                                                <div class="ri-group-line ri-26px"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-xl-3">
                            <div class="card">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between">
                                        <div class="me-1">
                                            <p class="text-heading mb-1">普通會員</p>
                                            <div class="d-flex align-items-center">
                                                <h4 class="mb-1 me-1">4,567</h4>
                                                <p class="text-success mb-1">(+18%)</p>
                                            </div>
                                            <small class="mb-0">Last week analytics</small>
                                        </div>
                                        <div class="avatar">
                                            <div class="avatar-initial bg-label-danger rounded-3">
                                                <div class="ri-user-add-line ri-26px"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-xl-3">
                            <div class="card">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between">
                                        <div class="me-1">
                                            <p class="text-heading mb-1">白銀會員</p>
                                            <div class="d-flex align-items-center">
                                                <h4 class="mb-1 me-1">19,860</h4>
                                                <p class="text-danger mb-1">(-14%)</p>
                                            </div>
                                            <small class="mb-0">Last week analytics</small>
                                        </div>
                                        <div class="avatar">
                                            <div class="avatar-initial bg-label-success rounded-3">
                                                <div class="ri-user-follow-line ri-26px"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-xl-3">
                            <div class="card">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between">
                                        <div class="me-1">
                                            <p class="text-heading mb-1">白金會員</p>
                                            <div class="d-flex align-items-center">
                                                <h4 class="mb-1 me-1">237</h4>
                                                <p class="text-success mb-1">(+42%)</p>
                                            </div>
                                            <small class="mb-0">Last week analytics</small>
                                        </div>
                                        <div class="avatar">
                                            <div class="avatar-initial bg-label-warning rounded-3">
                                                <div class="ri-user-search-line ri-26px"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <!-- Users List Table -->
                    <div class="card">
                        <div class="card-header border-bottom">
                            <h5 class="card-title mb-0">Filters</h5>
                            <div class="d-flex justify-content-between align-items-center row gx-5 pt-4 gap-5 gap-md-0">
                                <div class="col-md-4 user_role"></div>
                                <div class="col-md-4 user_plan"></div>
                                <div class="col-md-4 user_status"></div>
                            </div>
                        </div>
                        <div class="card-datatable table-responsive">
                            <table class="datatables-users table">
                                <thead>
                                    <tr>
                                        <th>會員id</th>
                                        <th>會員名稱</th>
                                        <th>手機號碼</th>
                                        <th>登入狀態</th>
                                        <th>操 作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($data as $item)
                                        <tr>
                                            <td>{{ $item->id }}</td>
                                            <td>{{ $item->name }}</td>
                                            <td>{{ $item->phone }}</td>
                                            <td>
                                                <a href="#">
                                                    <span id="status-{{ $item->id }}"
                                                        onclick="updateStatus({{ $item->id }}, {{ $item->can_login == 1 ? 0 : 1 }})"
                                                        class="badge rounded-pill {{ $item->can_login == 1 ? 'bg-label-primary' : 'bg-label-danger' }}">
                                                        {{ $item->can_login_status }}
                                                    </span>
                                                </a>
                                            </td>
                                            <td></td>
                                        </tr>
                                    @endforeach


                                </tbody>
                            </table>
                        </div>
                        <div style="padding-top: 5%;"></div>
                        <div class="alert alert-solid-info d-flex align-items-center" role="alert" s>
                            <span class="alert-icon rounded">
                                <i class="ri-information-line ri-22px"></i>
                            </span>
                            後台註冊後,得點登入狀態放行
                        </div>
                    </div>

                    <div class="content-backdrop fade"></div>
                    {{ $data->links() }}
                </div>
                <!-- Content wrapper -->
            </div>
            <!-- / Layout page -->
        </div>
    </div>
@endsection
@section('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    function updateStatus(id, status) {
        $.ajax({
            type: "PATCH",
            url: "{{ route('admin.canlogin.status') }}",
            data: {
                id: id,
                can_login: status,
                _token: "{{ csrf_token() }}" // 確保 CSRF token 被傳送
            },
            dataType: "json",
            success: function(response) {
                console.log('can_login status:', response.status);

                Swal.fire({
                    title: '成功',
                    text: response.msg,
                    icon: 'success',
                    confirmButtonText: '确定'
                });

                // 確保 HTML 元素存在
                const statusElement = document.getElementById(`status-${id}`);
                if (statusElement) {
                    // 更新顯示的文字
                    statusElement.textContent = response.can_login == 1 ? '允許' : '未允許';

                    // 正確設置 className
                    statusElement.className = 'badge rounded-pill ' + (response.can_login == 1 ? 'bg-label-primary' : 'bg-label-danger');

                    // 更新 onclick 事件
                    statusElement.setAttribute('onclick', `updateStatus(${id}, ${response.can_login == 1 ? 0 : 1})`);
                }
            },
            error: function(xhr) {
                Swal.fire({
                    title: '錯誤',
                    text: '更新失敗，請稍後再試。',
                    icon: 'error',
                    confirmButtonText: '确定'
                });
            }
        });
    }
</script>

@endsection