@extends('layouts.admin')

@section('title', trans('admin.tenant_show_title', ['name' => $tenant->name]))
@section('header_title', trans('admin.tenant_show_header', ['name' => $tenant->name]))

@section('content')
<div class="space-y-6 text-xs" x-data="{ activeTab: 'overview' }">

    <!-- Back button -->
    <div>
        <a href="{{ route('admin.tenants.index') }}" class="inline-flex items-center gap-1.5 text-slate-400 hover:text-white transition">
            <span>←</span>
            <span>{{ trans('admin.back_to_tenants') }}</span>
        </a>
    </div>

    <!-- Company 360 Header Profile Card -->
    <div class="p-6 rounded-2xl bg-navy-900 border border-slate-800 shadow-xl">
        <div class="flex flex-col lg:flex-row lg:items-center justify-between gap-6">
            <div>
                <div class="flex items-center gap-3">
                    <h2 class="text-xl font-black text-white">{{ $tenant->name }}</h2>
                    @if($tenant->name_en)
                        <span class="text-slate-400 text-sm font-medium">({{ $tenant->name_en }})</span>
                    @endif
                    @if($tenant->is_active)
                        <span class="px-2.5 py-0.5 rounded-full bg-emerald-500/10 text-emerald-400 text-[11px] font-bold">{{ trans('admin.active') }}</span>
                    @else
                        <span class="px-2.5 py-0.5 rounded-full bg-rose-500/10 text-rose-400 text-[11px] font-bold">{{ trans('admin.inactive') }}</span>
                    @endif
                    <span class="px-2.5 py-0.5 rounded-full text-[11px] font-bold {{ $tenant->is_sandbox ? 'bg-amber-500/10 text-amber-400' : 'bg-emerald-500/10 text-emerald-400' }}">
                        {{ $tenant->is_sandbox ? 'Sandbox' : 'Production Live' }}
                    </span>
                </div>

                <div class="flex flex-wrap items-center gap-x-6 gap-y-2 text-slate-400 mt-2 text-xs">
                    <div>{{ trans('admin.vat_label') }} <strong class="text-white code-font">{{ $tenant->vat_number }}</strong></div>
                    @if($tenant->cr_number)
                        <div>{{ trans('admin.cr_label') }} <strong class="text-white code-font">{{ $tenant->cr_number }}</strong></div>
                    @endif
                    <div>{{ trans('admin.email_label') }} <span class="text-slate-200">{{ $tenant->email }}</span></div>
                    @if($tenant->phone)
                        <div>{{ trans('admin.phone_label') }} <span class="text-slate-200 code-font">{{ $tenant->phone }}</span></div>
                    @endif
                    <div>{{ trans('admin.registered_at') }} <span class="text-slate-200 code-font">{{ $tenant->created_at->format('Y-m-d') }}</span></div>
                </div>
            </div>

            <!-- Quick Action Buttons for Super Admin -->
            <div class="flex flex-wrap items-center gap-2.5">
                <form action="{{ route('admin.tenants.impersonate', $tenant->uuid) }}" method="POST" class="inline">
                    @csrf
                    <button type="submit" class="px-4 py-2 rounded-xl bg-emerald-600 hover:bg-emerald-700 text-white font-bold transition shadow-md shadow-emerald-500/20 flex items-center gap-1.5">
                        <span>👤</span>
                        <span>{{ trans('admin.impersonate_tenant') }}</span>
                    </button>
                </form>

                <form action="{{ route('admin.tenants.toggle_status', $tenant->uuid) }}" method="POST" class="inline">
                    @csrf
                    <button type="submit" class="px-3.5 py-2 rounded-xl {{ $tenant->is_active ? 'bg-rose-500/10 hover:bg-rose-500/20 text-rose-300' : 'bg-emerald-500/10 hover:bg-emerald-500/20 text-emerald-300' }} font-bold transition flex items-center gap-1.5">
                        <span>{{ $tenant->is_active ? '⏸️' : '▶️' }}</span>
                        <span>{{ $tenant->is_active ? trans('admin.suspend_tenant') : trans('admin.activate_tenant') }}</span>
                    </button>
                </form>

                <form action="{{ route('admin.tenants.reset_usage', $tenant->uuid) }}" method="POST" class="inline" onsubmit="return confirm('{{ trans('admin.confirm_reset_quota') }}');">
                    @csrf
                    <button type="submit" class="px-3.5 py-2 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-300 font-bold transition flex items-center gap-1.5">
                        <span><i class="fa-solid fa-arrows-rotate"></i></span>
                        <span>{{ trans('admin.reset_quota') }}</span>
                    </button>
                </form>
            </div>
        </div>

        <!-- Metric Badges Row -->
        <div class="grid grid-cols-2 sm:grid-cols-5 gap-3 mt-6 pt-6 border-t border-slate-800">
            <div class="p-3 rounded-xl bg-navy-950/70 border border-slate-800">
                <span class="text-slate-400 block text-[11px]">{{ trans('admin.current_plan_badge') }}</span>
                <span class="font-black text-white text-sm uppercase">{{ $tenant->plan }}</span>
            </div>
            <div class="p-3 rounded-xl bg-navy-950/70 border border-slate-800">
                <span class="text-slate-400 block text-[11px]">{{ trans('admin.invoice_consumption') }}</span>
                <span class="font-black text-emerald-400 text-sm code-font">{{ $tenant->invoices_used_this_month }} / {{ $tenant->monthly_invoice_limit }}</span>
            </div>
            <div class="p-3 rounded-xl bg-navy-950/70 border border-slate-800">
                <span class="text-slate-400 block text-[11px]">{{ trans('admin.cleared_invoices_zatca') }}</span>
                <span class="font-black text-emerald-400 text-sm code-font">{{ $invoiceStats['cleared'] + $invoiceStats['reported'] }}</span>
            </div>
            <div class="p-3 rounded-xl bg-navy-950/70 border border-slate-800">
                <span class="text-slate-400 block text-[11px]">{{ trans('admin.pos_devices') }}</span>
                <span class="font-black text-indigo-400 text-sm code-font">{{ $tenant->devices_count }}</span>
            </div>
            <div class="p-3 rounded-xl bg-navy-950/70 border border-slate-800">
                <span class="text-slate-400 block text-[11px]">{{ trans('admin.total_sales_volume') }}</span>
                <span class="font-black text-emerald-400 text-sm code-font">{{ number_format($invoiceStats['total_sar'], 2) }} <span class="sar-symbol">﷼</span></span>
            </div>
        </div>
    </div>

    <!-- Navigation Tabs -->
    <div class="flex items-center gap-2 border-b border-slate-800 pb-1 overflow-x-auto">
        <button type="button" @click="activeTab = 'overview'" :class="activeTab === 'overview' ? 'border-emerald-500 text-emerald-400 bg-emerald-500/10' : 'border-transparent text-slate-400 hover:text-white'" class="px-4 py-2.5 rounded-xl border-b-2 font-bold transition whitespace-nowrap">
            <i class="fa-solid fa-building text-emerald-400"></i> {{ trans('admin.overview_tab') }}
        </button>
        <button type="button" @click="activeTab = 'invoices'" :class="activeTab === 'invoices' ? 'border-emerald-500 text-emerald-400 bg-emerald-500/10' : 'border-transparent text-slate-400 hover:text-white'" class="px-4 py-2.5 rounded-xl border-b-2 font-bold transition whitespace-nowrap">
            <i class="fa-solid fa-file-invoice text-emerald-400"></i> {{ trans('admin.invoices_tab', ['count' => $tenant->invoices_count]) }}
        </button>
        <button type="button" @click="activeTab = 'devices'" :class="activeTab === 'devices' ? 'border-emerald-500 text-emerald-400 bg-emerald-500/10' : 'border-transparent text-slate-400 hover:text-white'" class="px-4 py-2.5 rounded-xl border-b-2 font-bold transition whitespace-nowrap">
            <i class="fa-solid fa-shield-halved text-emerald-400"></i> {{ trans('admin.devices_tab', ['count' => $tenant->devices_count]) }}
        </button>
        <button type="button" @click="activeTab = 'apikeys'" :class="activeTab === 'apikeys' ? 'border-emerald-500 text-emerald-400 bg-emerald-500/10' : 'border-transparent text-slate-400 hover:text-white'" class="px-4 py-2.5 rounded-xl border-b-2 font-bold transition whitespace-nowrap">
            <i class="fa-solid fa-key text-emerald-400"></i> {{ trans('admin.apikeys_tab', ['count' => $tenant->api_keys_count]) }}
        </button>
        <button type="button" @click="activeTab = 'users'" :class="activeTab === 'users' ? 'border-emerald-500 text-emerald-400 bg-emerald-500/10' : 'border-transparent text-slate-400 hover:text-white'" class="px-4 py-2.5 rounded-xl border-b-2 font-bold transition whitespace-nowrap">
            <i class="fa-solid fa-users text-emerald-400"></i> {{ trans('admin.users_tab', ['count' => $tenant->users_count]) }}
        </button>
        <button type="button" @click="activeTab = 'timeline'" :class="activeTab === 'timeline' ? 'border-emerald-500 text-emerald-400 bg-emerald-500/10' : 'border-transparent text-slate-400 hover:text-white'" class="px-4 py-2.5 rounded-xl border-b-2 font-bold transition whitespace-nowrap">
            <i class="fa-solid fa-bolt text-emerald-400"></i> {{ trans('admin.timeline_tab') }}
        </button>
    </div>

    <!-- Tab 1: Overview & Edit Settings -->
    <div x-show="activeTab === 'overview'" class="space-y-6">
        <div class="bg-navy-900 border border-slate-800 rounded-2xl p-6 sm:p-8 shadow-xl">
            <h3 class="text-sm font-bold text-white mb-4">{{ trans('admin.edit_plan_heading') }}</h3>

            <form action="{{ route('admin.tenants.update', $tenant->uuid) }}" method="POST" class="space-y-5">
                @csrf
                @method('PUT')

                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                    <div>
                        <label class="block font-bold text-slate-300 mb-1">{{ trans('admin.company_name_ar') }} *</label>
                        <input type="text" name="name" value="{{ old('name', $tenant->name) }}" required class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-100 p-3 focus:border-emerald-500 focus:outline-none transition">
                    </div>

                    <div>
                        <label class="block font-bold text-slate-300 mb-1">{{ trans('admin.company_name_en') }}</label>
                        <input type="text" name="name_en" value="{{ old('name_en', $tenant->name_en) }}" class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-100 p-3 focus:border-emerald-500 focus:outline-none transition">
                    </div>

                    <div>
                        <label class="block font-bold text-slate-300 mb-1">{{ trans('admin.vat_number_15') }} *</label>
                        <input type="text" name="vat_number" value="{{ old('vat_number', $tenant->vat_number) }}" maxlength="15" required class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-100 p-3 code-font focus:border-emerald-500 focus:outline-none transition">
                    </div>

                    <div>
                        <label class="block font-bold text-slate-300 mb-1">{{ trans('admin.cr_number') }}</label>
                        <input type="text" name="cr_number" value="{{ old('cr_number', $tenant->cr_number) }}" class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-100 p-3 code-font focus:border-emerald-500 focus:outline-none transition">
                    </div>

                    <div>
                        <label class="block font-bold text-slate-300 mb-1">{{ trans('admin.email_address') }} *</label>
                        <input type="email" name="email" value="{{ old('email', $tenant->email) }}" required class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-100 p-3 focus:border-emerald-500 focus:outline-none transition">
                    </div>

                    <div>
                        <label class="block font-bold text-slate-300 mb-1">{{ trans('admin.phone_number') }}</label>
                        <input type="text" name="phone" value="{{ old('phone', $tenant->phone) }}" class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-100 p-3 code-font focus:border-emerald-500 focus:outline-none transition">
                    </div>

                    <div>
                        <label class="block font-bold text-slate-300 mb-1">{{ trans('admin.city') }}</label>
                        <input type="text" name="address_city" value="{{ old('address_city', $tenant->address_city) }}" class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-100 p-3 focus:border-emerald-500 focus:outline-none transition">
                    </div>

                    <div>
                        <label class="block font-bold text-slate-300 mb-1">{{ trans('admin.street_address') }}</label>
                        <input type="text" name="address_street" value="{{ old('address_street', $tenant->address_street) }}" class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-100 p-3 focus:border-emerald-500 focus:outline-none transition">
                    </div>

                    <div>
                        <label class="block font-bold text-slate-300 mb-1">{{ trans('admin.current_plan_select') }} *</label>
                        <select name="plan" class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-100 p-3 focus:border-emerald-500 focus:outline-none transition">
                            @foreach($plans as $p)
                                <option value="{{ $p->slug }}" {{ $tenant->plan === $p->slug ? 'selected' : '' }}>
                                    {{ $p->displayName() }} ({{ $p->formattedPrice() }})
                                </option>
                            @endforeach
                            @if(!$plans->pluck('slug')->contains($tenant->plan))
                                <option value="{{ $tenant->plan }}" selected>{{ ucfirst($tenant->plan) }}</option>
                            @endif
                        </select>
                    </div>

                    <div>
                        <label class="block font-bold text-slate-300 mb-1">{{ trans('admin.monthly_limit_label') }} *</label>
                        <input type="number" name="monthly_invoice_limit" value="{{ old('monthly_invoice_limit', $tenant->monthly_invoice_limit) }}" required class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-100 p-3 code-font focus:border-emerald-500 focus:outline-none transition">
                    </div>

                    <div>
                        <label class="block font-bold text-slate-300 mb-1">{{ trans('admin.expires_at') }}</label>
                        <input type="date" name="plan_expires_at" value="{{ $tenant->plan_expires_at ? $tenant->plan_expires_at->format('Y-m-d') : '' }}" class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-100 p-3 code-font focus:border-emerald-500 focus:outline-none transition">
                    </div>

                    <div>
                        <label class="block font-bold text-slate-300 mb-1">{{ trans('admin.account_status_label') }} *</label>
                        <select name="is_active" class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-100 p-3 focus:border-emerald-500 focus:outline-none transition">
                            <option value="1" {{ $tenant->is_active ? 'selected' : '' }}>{{ trans('admin.active_opt') }}</option>
                            <option value="0" {{ !$tenant->is_active ? 'selected' : '' }}>{{ trans('admin.inactive_opt') }}</option>
                        </select>
                    </div>

                    <div>
                        <label class="block font-bold text-slate-300 mb-1">{{ trans('admin.env_label') }} *</label>
                        <select name="is_sandbox" class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-100 p-3 focus:border-emerald-500 focus:outline-none transition">
                            <option value="1" {{ $tenant->is_sandbox ? 'selected' : '' }}>{{ trans('admin.sandbox_opt') }}</option>
                            <option value="0" {{ !$tenant->is_sandbox ? 'selected' : '' }}>{{ trans('admin.prod_opt') }}</option>
                        </select>
                    </div>

                    <div>
                        <label class="block font-bold text-slate-300 mb-1">{{ trans('admin.zatca_environment_label') }}</label>
                        <select name="zatca_environment" class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-100 p-3 focus:border-emerald-500 focus:outline-none transition">
                            <option value="sandbox" {{ ($tenant->zatca_environment?->value ?? '') === 'sandbox' ? 'selected' : '' }}>{{ trans('admin.sandbox_opt') }}</option>
                            <option value="simulation" {{ ($tenant->zatca_environment?->value ?? '') === 'simulation' ? 'selected' : '' }}>{{ trans('admin.simulation_opt') }}</option>
                            <option value="production" {{ ($tenant->zatca_environment?->value ?? '') === 'production' ? 'selected' : '' }}>{{ trans('admin.prod_opt') }}</option>
                        </select>
                    </div>
                </div>

                <div class="pt-4 border-t border-slate-800 flex justify-end">
                    <button type="submit" class="px-6 py-3 rounded-xl bg-emerald-600 hover:bg-emerald-700 text-white font-bold transition shadow-lg shadow-emerald-500/20">
                        {{ trans('admin.save_changes_btn') }}
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Tab 2: Invoices & Transactions -->
    <div x-show="activeTab === 'invoices'" class="space-y-4">
        <div class="bg-navy-900 border border-slate-800 rounded-2xl overflow-hidden shadow-xl">
            <div class="p-4 border-b border-slate-800 font-bold text-white flex items-center justify-between">
                <span>{{ trans('admin.invoices_heading') }} ({{ count($recentInvoices) }})</span>
                <span class="text-emerald-400 code-font">{{ number_format($invoiceStats['total_sar'], 2) }} <span class="sar-symbol">﷼</span></span>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full text-start">
                    <thead class="bg-navy-950/60 text-slate-400 border-b border-slate-800">
                        <tr>
                            <th class="p-3.5 text-start">{{ trans('dashboard.invoice_number') }}</th>
                            <th class="p-3.5 text-start">{{ trans('admin.th_type') }}</th>
                            <th class="p-3.5 text-start">{{ trans('admin.th_customer') }}</th>
                            <th class="p-3.5 text-start">{{ trans('admin.th_total_amount') }}</th>
                            <th class="p-3.5 text-start">{{ trans('admin.th_tax') }}</th>
                            <th class="p-3.5 text-start">{{ trans('dashboard.status_in_zatca') }}</th>
                            <th class="p-3.5 text-start">{{ trans('admin.th_issue_date') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-800/60 text-slate-300">
                        @forelse($recentInvoices as $inv)
                            <tr class="hover:bg-navy-950/40 transition">
                                <td class="p-3.5 font-bold text-white code-font">{{ $inv->invoice_number }}</td>
                                <td class="p-3.5">
                                    <span class="px-2 py-0.5 rounded bg-slate-800 text-slate-300 text-[10px] font-bold">
                                        {{ $inv->type?->clientLabel() ?? trans('admin.default_invoice_type') }}
                                    </span>
                                </td>
                                <td class="p-3.5 text-slate-300">{{ $inv->customer_name ?? '-' }}</td>
                                <td class="p-3.5 font-bold text-emerald-400 code-font">{{ number_format($inv->total, 2) }} <span class="sar-symbol">﷼</span></td>
                                <td class="p-3.5 code-font text-slate-400">{{ number_format($inv->tax_amount, 2) }} <span class="sar-symbol">﷼</span></td>
                                <td class="p-3.5">
                                    @if($inv->status->value === 'cleared')
                                        <span class="px-2 py-0.5 rounded-full bg-emerald-500/10 text-emerald-400 text-[10px] font-bold">{{ trans('dashboard.cleared_badge') }}</span>
                                    @elseif($inv->status->value === 'reported')
                                        <span class="px-2 py-0.5 rounded-full bg-sky-500/10 text-sky-400 text-[10px] font-bold">{{ trans('dashboard.reported_badge') }}</span>
                                    @elseif($inv->status->value === 'rejected' || $inv->status->value === 'failed')
                                        <span class="px-2 py-0.5 rounded-full bg-rose-500/10 text-rose-400 text-[10px] font-bold">{{ $inv->status->label() }}</span>
                                    @else
                                        <span class="px-2 py-0.5 rounded-full bg-amber-500/10 text-amber-400 text-[10px] font-bold">{{ $inv->status->label() }}</span>
                                    @endif
                                </td>
                                <td class="p-3.5 text-slate-400 code-font">{{ $inv->issued_at ? $inv->issued_at->format('Y-m-d H:i') : $inv->created_at->format('Y-m-d H:i') }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="text-center py-10 text-slate-500">{{ trans('admin.no_invoices') }}</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Tab 3: Devices & CSID -->
    <div x-show="activeTab === 'devices'" class="space-y-4">
        <div class="bg-navy-900 border border-slate-800 rounded-2xl overflow-hidden shadow-xl">
            <div class="p-4 border-b border-slate-800 font-bold text-white">
                {{ trans('admin.pos_devices_heading') }} ({{ $tenant->devices->count() }})
            </div>
            <div class="overflow-x-auto">
                <table class="w-full text-start">
                    <thead class="bg-navy-950/60 text-slate-400 border-b border-slate-800">
                        <tr>
                            <th class="p-3.5 text-start">{{ trans('admin.th_device_name') }}</th>
                            <th class="p-3.5 text-start">{{ trans('admin.th_serial_number') }}</th>
                            <th class="p-3.5 text-start">{{ trans('admin.th_csid_status') }}</th>
                            <th class="p-3.5 text-start">{{ trans('admin.th_registration_date') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-800/60 text-slate-300">
                        @forelse($tenant->devices as $d)
                            <tr class="hover:bg-navy-950/40 transition">
                                <td class="p-3.5 font-bold text-white">{{ $d->name }}</td>
                                <td class="p-3.5 code-font text-emerald-400">{{ $d->serial_number }}</td>
                                <td class="p-3.5">
                                    <span class="px-2 py-0.5 rounded-full text-[10px] font-bold {{ $d->onboarding_status === 'production_ready' ? 'bg-emerald-500/10 text-emerald-400' : 'bg-amber-500/10 text-amber-400' }}">
                                        {{ $d->onboarding_status }}
                                    </span>
                                </td>
                                <td class="p-3.5 text-slate-400 code-font">{{ $d->created_at->format('Y-m-d H:i') }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="text-center py-10 text-slate-500">{{ trans('admin.no_devices') }}</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Tab 4: API Keys -->
    <div x-show="activeTab === 'apikeys'" class="space-y-4">
        <div class="bg-navy-900 border border-slate-800 rounded-2xl overflow-hidden shadow-xl">
            <div class="p-4 border-b border-slate-800 font-bold text-white">
                {{ trans('admin.api_keys_heading') }} ({{ $tenant->apiKeys->count() }})
            </div>
            <div class="overflow-x-auto">
                <table class="w-full text-start">
                    <thead class="bg-navy-950/60 text-slate-400 border-b border-slate-800">
                        <tr>
                            <th class="p-3.5 text-start">{{ trans('admin.th_key_name') }}</th>
                            <th class="p-3.5 text-start">{{ trans('admin.th_prefix') }}</th>
                            <th class="p-3.5 text-start">{{ trans('admin.th_requests_count') }}</th>
                            <th class="p-3.5 text-start">{{ trans('admin.th_created_at') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-800/60 text-slate-300">
                        @forelse($tenant->apiKeys as $k)
                            <tr class="hover:bg-navy-950/40 transition">
                                <td class="p-3.5 font-bold text-white">{{ $k->name }}</td>
                                <td class="p-3.5 code-font text-emerald-400">{{ $k->key_prefix }}...</td>
                                <td class="p-3.5 code-font text-white">{{ number_format($k->requests_count) }}</td>
                                <td class="p-3.5 text-slate-400 code-font">{{ $k->created_at->format('Y-m-d') }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="text-center py-10 text-slate-500">{{ trans('admin.no_keys') }}</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Tab 5: Users & Team -->
    <div x-show="activeTab === 'users'" class="space-y-4">
        <div class="bg-navy-900 border border-slate-800 rounded-2xl overflow-hidden shadow-xl">
            <div class="p-4 border-b border-slate-800 font-bold text-white">
                {{ trans('admin.users_heading') }} ({{ $tenant->users->count() }})
            </div>
            <div class="overflow-x-auto">
                <table class="w-full text-start">
                    <thead class="bg-navy-950/60 text-slate-400 border-b border-slate-800">
                        <tr>
                            <th class="p-3.5 text-start">{{ trans('admin.th_user_name') }}</th>
                            <th class="p-3.5 text-start">{{ trans('admin.th_user_email') }}</th>
                            <th class="p-3.5 text-start">{{ trans('admin.th_user_role') }}</th>
                            <th class="p-3.5 text-start">{{ trans('admin.th_joined_date') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-800/60 text-slate-300">
                        @forelse($tenant->users as $u)
                            <tr class="hover:bg-navy-950/40 transition">
                                <td class="p-3.5 font-bold text-white">{{ $u->name }}</td>
                                <td class="p-3.5 text-slate-300">{{ $u->email }}</td>
                                <td class="p-3.5">
                                    <span class="px-2 py-0.5 rounded bg-slate-800 text-emerald-300 font-bold text-[10px] uppercase">
                                        {{ $u->role ?? 'member' }}
                                    </span>
                                </td>
                                <td class="p-3.5 text-slate-400 code-font">{{ $u->created_at->format('Y-m-d') }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="text-center py-10 text-slate-500">{{ trans('admin.no_users') }}</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Tab 6: Client Activity Timeline -->
    <div x-show="activeTab === 'timeline'" class="space-y-4">
        <div class="bg-navy-900 border border-slate-800 rounded-2xl p-6 shadow-xl">
            <h3 class="text-sm font-bold text-white mb-4">{{ trans('admin.client_activity_timeline') }}</h3>

            <div class="space-y-3">
                @forelse($clientActions as $action)
                    <div class="p-3.5 rounded-xl bg-navy-950/60 border border-slate-800/80 flex items-start gap-3">
                        <span class="text-base p-1.5 rounded-lg bg-slate-800/80">{{ $action['icon'] }}</span>
                        <div class="flex-1 min-w-0">
                            <div class="flex items-center justify-between gap-2">
                                <span class="font-bold text-white text-xs">{{ $action['title'] }}</span>
                                <span class="text-[10px] text-slate-500 code-font">
                                    {{ $action['timestamp'] ? $action['timestamp']->diffForHumans() : '' }}
                                </span>
                            </div>
                            <div class="text-[11px] text-slate-400 mt-0.5 code-font">{{ $action['subtitle'] }}</div>
                        </div>
                    </div>
                @empty
                    <div class="py-10 text-center text-slate-500">
                        {{ trans('admin.no_client_activities') }}
                    </div>
                @endforelse
            </div>
        </div>
    </div>

</div>

<!-- AlpineJS CDN if not already loaded -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
@endsection