@extends('layouts.admin')

@section('content')
@php
    $theme = request()->cookie('theme', 'dark-blue');
    $isLight = in_array($theme, ['light-blue', 'light-green']);
    $cardBg = $isLight ? 'bg-white' : 'bg-gray-800';
    $textPrimary = $isLight ? 'text-gray-900' : 'text-gray-200';
    $textSecondary = $isLight ? 'text-gray-600' : 'text-gray-400';
    $borderColor = $isLight ? 'border-gray-200' : 'border-gray-700';
    $thBg = $isLight ? 'bg-gray-50' : 'bg-gray-700';
@endphp
<div class="container mx-auto px-6 py-8">
    <h3 class="{{ $textPrimary }} text-3xl font-medium">會員列表</h3>

    <div class="mt-8">
        {{-- 搜尋與篩選 (預留空間) --}}
        
        <div class="flex flex-col mt-4">
            <div class="-my-2 py-2 overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
                <div class="align-middle inline-block min-w-full shadow overflow-hidden sm:rounded-lg border-b {{ $borderColor }}">
                    <table class="min-w-full">
                        <thead>
                            <tr>
                                <th class="px-6 py-3 border-b {{ $borderColor }} {{ $thBg }} text-left text-xs leading-4 font-medium {{ $textSecondary }} uppercase tracking-wider">
                                    UUID
                                </th>
                                <th class="px-6 py-3 border-b {{ $borderColor }} {{ $thBg }} text-left text-xs leading-4 font-medium {{ $textSecondary }} uppercase tracking-wider">
                                    姓名
                                </th>
                                <th class="px-6 py-3 border-b {{ $borderColor }} {{ $thBg }} text-left text-xs leading-4 font-medium {{ $textSecondary }} uppercase tracking-wider">
                                    Email
                                </th>
                                <th class="px-6 py-3 border-b {{ $borderColor }} {{ $thBg }} text-left text-xs leading-4 font-medium {{ $textSecondary }} uppercase tracking-wider">
                                    手機
                                </th>
                                <th class="px-6 py-3 border-b {{ $borderColor }} {{ $thBg }} text-left text-xs leading-4 font-medium {{ $textSecondary }} uppercase tracking-wider">
                                    狀態
                                </th>
                                <th class="px-6 py-3 border-b {{ $borderColor }} {{ $thBg }} text-left text-xs leading-4 font-medium {{ $textSecondary }} uppercase tracking-wider">
                                    註冊時間
                                </th>
                            </tr>
                        </thead>
                        <tbody class="{{ $cardBg }}">
                            @forelse ($members as $member)
                            <tr>
                                <td class="px-6 py-4 whitespace-no-wrap border-b {{ $borderColor }}">
                                    <div class="text-sm leading-5 font-medium {{ $textSecondary }}">{{ $member->uuid }}</div>
                                </td>
                                <td class="px-6 py-4 whitespace-no-wrap border-b {{ $borderColor }}">
                                    <div class="text-sm leading-5 font-bold {{ $textPrimary }}">{{ $member->name }}</div>
                                </td>
                                <td class="px-6 py-4 whitespace-no-wrap border-b {{ $borderColor }}">
                                    <div class="text-sm leading-5 {{ $textPrimary }}">{{ $member->email ?? '-' }}</div>
                                </td>
                                <td class="px-6 py-4 whitespace-no-wrap border-b {{ $borderColor }}">
                                    <div class="text-sm leading-5 {{ $textPrimary }}">{{ $member->phone ?? '-' }}</div>
                                </td>
                                <td class="px-6 py-4 whitespace-no-wrap border-b {{ $borderColor }}">
                                    @if($member->is_active)
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                            啟用
                                        </span>
                                    @else
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
                                            停用
                                        </span>
                                    @endif
                                </td>
                                <td class="px-6 py-4 whitespace-no-wrap border-b {{ $borderColor }} text-sm leading-5 {{ $textSecondary }}">
                                    {{ $member->created_at->format('Y-m-d H:i') }}
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="6" class="px-6 py-4 whitespace-no-wrap border-b {{ $borderColor }} text-center {{ $textSecondary }}">
                                    尚無會員資料
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="mt-4">
            {{ $members->links() }}
        </div>
    </div>
</div>
@endsection