@php
    $users = [
        [
            'name' => 'John Doe',
            'email' => 'john.doe@company.com',
            'role' => 'Admin',
            'department' => 'Engineering',
            'status' => 'active',
            'joined' => 'Jan 15, 2026',
            'initials' => 'JD',
        ],
        [
            'name' => 'Sarah Martinez',
            'email' => 'sarah.martinez@company.com',
            'role' => 'Manager',
            'department' => 'Product',
            'status' => 'active',
            'joined' => 'Dec 20, 2025',
            'initials' => 'SM',
        ],
        [
            'name' => 'Emily Wilson',
            'email' => 'emily.wilson@company.com',
            'role' => 'Developer',
            'department' => 'Engineering',
            'status' => 'active',
            'joined' => 'Mar 10, 2025',
            'initials' => 'EW',
        ],
        [
            'name' => 'Michael Johnson',
            'email' => 'michael.j@company.com',
            'role' => 'Analyst',
            'department' => 'Analytics',
            'status' => 'pending',
            'joined' => 'Feb 01, 2025',
            'initials' => 'MJ',
        ],
        [
            'name' => 'Amanda Lee',
            'email' => 'amanda.lee@company.com',
            'role' => 'Designer',
            'department' => 'Design',
            'status' => 'inactive',
            'joined' => 'Dec 05, 2023',
            'initials' => 'AL',
        ],
        [
            'name' => 'David Chen',
            'email' => 'david.chen@company.com',
            'role' => 'Developer',
            'department' => 'Engineering',
            'status' => 'active',
            'joined' => 'May 12, 2024',
            'initials' => 'DC',
        ],
        [
            'name' => 'Lisa Rodriguez',
            'email' => 'lisa.rodriguez@company.com',
            'role' => 'Manager',
            'department' => 'Marketing',
            'status' => 'active',
            'joined' => 'Jun 08, 2024',
            'initials' => 'LR',
        ],
        [
            'name' => 'Robert Kim',
            'email' => 'robert.kim@company.com',
            'role' => 'Support',
            'department' => 'Customer Success',
            'status' => 'pending',
            'joined' => 'Jul 15, 2024',
            'initials' => 'RK',
        ],
    ];
@endphp

<div class="w-full max-w-7xl px-1 sm:px-4 mx-auto">
    <x-ui.card size="custom" class="[--card-padding:0px]">
        <div class="p-4 flex items-center justify-between gap-4">
            <x-ui.input.group class="flex-1 max-w-xs md:h-9">
                <x-ui.input.leading absolute>
                    <x-ui.icon name="ph--magnifying-glass" />
                </x-ui.input.leading>
                <x-ui.input variant="unstyled" placeholder="Search users..." class="ps-10" />
            </x-ui.input.group>
            <div class="flex items-center gap-2">
                <x-ui.button size="none" variant="outline" class="gap-1 sm:btn-md max-sm:btn-icon-sm">
                    <x-ui.icon size="sm" name="ph--funnel" />
                    <span class="hidden sm:inline">Filter</span>
                </x-ui.button>
                <x-ui.button size="sm" class="sm:btn-md">
                    <x-ui.icon size="xs" name="ph--plus" class="mr-1" />
                    New user
                </x-ui.button>
            </div>
        </div>

        <x-ui.table class="text-left">
            <x-ui.table.columns
                wrapper="bg-bg-surface border-y border-border-input/60 [--gutter-x:--spacing(4)] [--gutter-y:--spacing(3)]">
                <x-ui.table.column class="pr-0 text-xs uppercase tracking-wider w-8">
                    <x-ui.checkbox />
                </x-ui.table.column>
                <x-ui.table.column class="text-xs uppercase tracking-wider">
                    Name
                </x-ui.table.column>
                <x-ui.table.column class="text-xs uppercase tracking-wider">
                    Email
                </x-ui.table.column>
                <x-ui.table.column class="text-xs uppercase tracking-wider">
                    Role
                </x-ui.table.column>
                <x-ui.table.column class="text-xs uppercase tracking-wider">
                    Department
                </x-ui.table.column>
                <x-ui.table.column class="text-xs uppercase tracking-wider">
                    Status
                </x-ui.table.column>
                <x-ui.table.column class="text-xs uppercase tracking-wider">
                    Joined
                </x-ui.table.column>
                <x-ui.table.column class="w-10"></x-ui.table.column>
            </x-ui.table.columns>
            <x-ui.table.rows class="divide-y divide-border [--gutter-x:--spacing(4)] [--gutter-y:--spacing(3)]">
                @foreach ($users as $user)
                    <x-ui.table.row>
                        <x-ui.table.cell class="pr-0">
                            <x-ui.checkbox />
                        </x-ui.table.cell>
                        <x-ui.table.cell>
                            <div class="flex items-center gap-3">
                                <x-ui.avatar-placeholder size="sm" text="{{ $user['initials'] }}" variant="solid"
                                    intent="neutral" />
                                <span class="font-medium text-fg">{{ $user['name'] }}</span>
                            </div>
                        </x-ui.table.cell>
                        <x-ui.table.cell>
                            <span class="text-fg-muted">{{ $user['email'] }}</span>
                        </x-ui.table.cell>
                        <x-ui.table.cell>
                            <span class="text-fg">{{ $user['role'] }}</span>
                        </x-ui.table.cell>
                        <x-ui.table.cell>
                            <span class="text-fg-muted">{{ $user['department'] }}</span>
                        </x-ui.table.cell>
                        <x-ui.table.cell>
                            @if ($user['status'] === 'active')
                                <x-ui.badge variant="soft" intent="success" size="sm"
                                    class="inline-flex items-center gap-x-1 font-medium">
                                    <span class="size-2 rounded-full bg-current"></span>
                                    Active
                                </x-ui.badge>
                            @elseif($user['status'] === 'pending')
                                <x-ui.badge variant="soft" intent="warning" size="sm"
                                    class="inline-flex items-center gap-x-1 font-medium">
                                    <span class="size-2 rounded-full bg-current"></span>
                                    Pending
                                </x-ui.badge>
                            @else
                                <x-ui.badge variant="soft" intent="danger" size="sm"
                                    class="inline-flex items-center gap-x-1 font-medium">
                                    <span class="size-2 rounded-full bg-current"></span>
                                    Inactive
                                </x-ui.badge>
                            @endif
                        </x-ui.table.cell>
                        <x-ui.table.cell>
                            <span class="text-fg-muted text-sm">{{ $user['joined'] }}</span>
                        </x-ui.table.cell>
                        <x-ui.table.cell>
                            <x-ui.button size="xs" variant="ghost" icon-only>
                                <span aria-hidden="true" class="iconify ph--dots-three-vertical"></span>
                            </x-ui.button>
                        </x-ui.table.cell>
                    </x-ui.table.row>
                @endforeach
            </x-ui.table.rows>
        </x-ui.table>

        <div class="p-4 flex items-center md:justify-between border-t border-border">
            <div class="text-sm text-fg-muted">
                Showing 1 to {{ count($users) }} of {{ count($users) }} users
            </div>
            <div class="flex-1 md:justify-center flex">
                <x-ui.input.group class="sm:max-w-38">
                    <x-ui.input.leading class="text-xs text-fg-muted px-3 border-r border-border-input">
                        Per Page
                    </x-ui.input.leading>
                    <x-ui.select class="ps-3 pe-4" variant="unstyled" :indicator="false">
                        <x-ui.select.option value="10" selected label="10" />
                        <x-ui.select.option value="20" selected label="20" />
                        <x-ui.select.option value="50" selected label="50" />
                        <x-ui.select.option value="100" selected label="100" />
                        <x-ui.select.option value="200" selected label="200" />
                    </x-ui.select>
                    <x-ui.input.trailing absolute>
                        <span class="flex iconify ph--caret-up-down text-sm"></span>
                    </x-ui.input.trailing>
                </x-ui.input.group>
            </div>
            <div class="flex items-center gap-2">
                <x-ui.button size="sm" variant="ghost" icon-only aria-label="Go prev"
                    class="border border-border-input" disabled>
                    <span aria-hidden="true" class="iconify size-3.5 ph--caret-left"></span>
                </x-ui.button>
                <x-ui.button size="sm" variant="ghost" icon-only aria-label="Go next"
                    class="border border-border-input">
                    <span aria-hidden="true" class="iconify size-3.5 ph--caret-right"></span>
                </x-ui.button>
            </div>
        </div>
    </x-ui.card>
</div>

@php
    $organizations = [
        [
            'id' => 1,
            'name' => 'TechCorp Solutions',
            'industry' => 'Technology',
            'contact' => 'John Smith',
            'email' => 'john@techcorp.com',
            'phone' => '+1 (555) 123-4567',
            'status' => 'active',
            'revenue' => '$2.5M',
            'employees' => 150,
            'initials' => 'TC',
            'industryIcon' => 'ph--cpu',
            'lastActivity' => '2 hours ago',
        ],
        [
            'id' => 2,
            'name' => 'Global Marketing Inc',
            'industry' => 'Marketing',
            'contact' => 'Sarah Johnson',
            'email' => 'sarah@globalmarketing.com',
            'phone' => '+1 (555) 234-5678',
            'status' => 'prospect',
            'revenue' => '$1.2M',
            'employees' => 45,
            'initials' => 'GM',
            'industryIcon' => 'ph--megaphone',
            'lastActivity' => '1 day ago',
        ],
        [
            'id' => 3,
            'name' => 'FinanceHub LLC',
            'industry' => 'Finance',
            'contact' => 'Michael Chen',
            'email' => 'michael@financehub.com',
            'phone' => '+1 (555) 345-6789',
            'status' => 'active',
            'revenue' => '$5.8M',
            'employees' => 200,
            'initials' => 'FH',
            'industryIcon' => 'ph--bank',
            'lastActivity' => '5 hours ago',
        ],
        [
            'id' => 4,
            'name' => 'Healthcare Plus',
            'industry' => 'Healthcare',
            'contact' => 'Emily Davis',
            'email' => 'emily@healthcareplus.com',
            'phone' => '+1 (555) 456-7890',
            'status' => 'churned',
            'revenue' => '$800K',
            'employees' => 25,
            'initials' => 'HP',
            'industryIcon' => 'ph--heart',
            'lastActivity' => '1 week ago',
        ],
        [
            'id' => 5,
            'name' => 'Retail Dynamics',
            'industry' => 'Retail',
            'contact' => 'Robert Wilson',
            'email' => 'robert@retaildynamics.com',
            'phone' => '+1 (555) 567-8901',
            'status' => 'active',
            'revenue' => '$3.2M',
            'employees' => 85,
            'initials' => 'RD',
            'industryIcon' => 'ph--shopping-bag',
            'lastActivity' => '3 hours ago',
        ],
    ];
@endphp

<div class="w-full max-w-7xl px-1 sm:px-4 mx-auto">
    <!-- Header with Search and Filter -->
    <div class="flex items-center justify-between gap-4 pb-8">
        <div>
            <h2 class="text-xl font-semibold text-fg mb-1">Organizations</h2>
            <p class="text-fg-muted text-sm">Manage your customer relationships and track organization details.</p>
        </div>
        <div class="flex items-center gap-2">
            <x-ui.button size="sm">
                New organization
            </x-ui.button>
        </div>
    </div>

    <x-ui.table class="text-left">
        <x-ui.table.columns class="font-semibold">
            <x-ui.table.column class="uppercase tracking-wider min-w-48 pl-0">
                Organization
            </x-ui.table.column>
            <x-ui.table.column class="uppercase tracking-wider">
                Industry
            </x-ui.table.column>
            <x-ui.table.column class="uppercase tracking-wider min-w-40">
                Contact
            </x-ui.table.column>
            <x-ui.table.column class="uppercase tracking-wider">
                Status
            </x-ui.table.column>
            <x-ui.table.column class="uppercase tracking-wider">
                Revenue
            </x-ui.table.column>
            <x-ui.table.column class="uppercase tracking-wider">
                Employees
            </x-ui.table.column>
            <x-ui.table.column class="uppercase tracking-wider">
                Last Activity
            </x-ui.table.column>
            <x-ui.table.column class="w-10"></x-ui.table.column>
        </x-ui.table.columns>
        <x-ui.table.rows class="divide-y divide-border [--gutter-x:--spacing(4)] [--gutter-y:--spacing(4)]">
            @foreach ($organizations as $organization)
                <x-ui.table.row hoverable class="group">
                    <x-ui.table.cell class="pl-0">
                        <div class="flex items-center gap-3">
                            <x-ui.avatar-placeholder size="sm" text="{{ $organization['initials'] }}"
                                variant="solid" intent="neutral" />
                            <div>
                                <div class="font-medium text-fg">{{ $organization['name'] }}</div>
                                <div class="text-xs text-fg-muted">{{ $organization['email'] }}</div>
                            </div>
                        </div>
                    </x-ui.table.cell>
                    <x-ui.table.cell>
                        <div class="flex items-center gap-2">
                            <x-ui.icon name="{{ $organization['industryIcon'] }}" size="sm"
                                class="text-fg-muted" />
                            <span class="text-sm text-fg">{{ $organization['industry'] }}</span>
                        </div>
                    </x-ui.table.cell>
                    <x-ui.table.cell>
                        <div>
                            <div class="text-sm font-medium text-fg">{{ $organization['contact'] }}</div>
                            <div class="text-xs text-fg-muted">{{ $organization['phone'] }}</div>
                        </div>
                    </x-ui.table.cell>
                    <x-ui.table.cell>
                        @if ($organization['status'] === 'active')
                            <span
                                class="ui-soft ui-soft-success inline-flex items-center gap-x-1 rounded-md px-2 py-1 text-xs font-medium">
                                <span class="size-2 rounded-full bg-success"></span>
                                Active
                            </span>
                        @elseif($organization['status'] === 'prospect')
                            <span
                                class="ui-soft ui-soft-warning inline-flex items-center gap-x-1 rounded-md px-2 py-1 text-xs font-medium">
                                <span class="size-2 rounded-full bg-warning"></span>
                                Prospect
                            </span>
                        @else
                            <span
                                class="ui-soft ui-soft-danger inline-flex items-center gap-x-1 rounded-md px-2 py-1 text-xs font-medium">
                                <span class="size-2 rounded-full bg-danger"></span>
                                Churned
                            </span>
                        @endif
                    </x-ui.table.cell>
                    <x-ui.table.cell>
                        <span class="text-sm font-semibold text-fg">{{ $organization['revenue'] }}</span>
                    </x-ui.table.cell>
                    <x-ui.table.cell>
                        <span class="text-sm text-fg">{{ $organization['employees'] }}</span>
                    </x-ui.table.cell>
                    <x-ui.table.cell>
                        <span class="text-xs text-fg-muted">{{ $organization['lastActivity'] }}</span>
                    </x-ui.table.cell>
                    <x-ui.table.cell class="pr-0.5">
                        <x-ui.button size="xs" variant="outline" intent="warning">
                            Edit
                        </x-ui.button>
                    </x-ui.table.cell>
                </x-ui.table.row>
            @endforeach
        </x-ui.table.rows>
    </x-ui.table>
    <div class="pt-6 flex items-center md:justify-between border-t border-border">
        <div class="text-sm text-fg-muted">
            Showing 1 to {{ count($organizations) }} of {{ count($organizations) }} organizations
        </div>
        <div class="flex items-center gap-2">
            <x-ui.button size="sm" variant="ghost" icon-only aria-label="Go prev"
                class="border border-border-input" disabled>
                <x-ui.icon name="ph--caret-left" />
            </x-ui.button>
            <x-ui.button size="sm" variant="ghost" icon-only aria-label="Go next"
                class="border border-border-input">
                <x-ui.icon name="ph--caret-right" />
            </x-ui.button>
        </div>
    </div>
</div>

@php
    $organizations = [
        [
            'id' => 1,
            'name' => 'TechCorp Solutions',
            'industry' => 'Technology',
            'contact' => 'John Smith',
            'email' => 'john@techcorp.com',
            'phone' => '+1 (555) 123-4567',
            'status' => 'active',
            'revenue' => '$2.5M',
            'employees' => 150,
            'initials' => 'TC',
            'industryIcon' => 'ph--cpu',
            'lastActivity' => '2 hours ago',
        ],
        [
            'id' => 2,
            'name' => 'Global Marketing Inc',
            'industry' => 'Marketing',
            'contact' => 'Sarah Johnson',
            'email' => 'sarah@globalmarketing.com',
            'phone' => '+1 (555) 234-5678',
            'status' => 'prospect',
            'revenue' => '$1.2M',
            'employees' => 45,
            'initials' => 'GM',
            'industryIcon' => 'ph--megaphone',
            'lastActivity' => '1 day ago',
        ],
        [
            'id' => 3,
            'name' => 'FinanceHub LLC',
            'industry' => 'Finance',
            'contact' => 'Michael Chen',
            'email' => 'michael@financehub.com',
            'phone' => '+1 (555) 345-6789',
            'status' => 'active',
            'revenue' => '$5.8M',
            'employees' => 200,
            'initials' => 'FH',
            'industryIcon' => 'ph--bank',
            'lastActivity' => '5 hours ago',
        ],
        [
            'id' => 4,
            'name' => 'Healthcare Plus',
            'industry' => 'Healthcare',
            'contact' => 'Emily Davis',
            'email' => 'emily@healthcareplus.com',
            'phone' => '+1 (555) 456-7890',
            'status' => 'churned',
            'revenue' => '$800K',
            'employees' => 25,
            'initials' => 'HP',
            'industryIcon' => 'ph--heart',
            'lastActivity' => '1 week ago',
        ],
        [
            'id' => 5,
            'name' => 'Retail Dynamics',
            'industry' => 'Retail',
            'contact' => 'Robert Wilson',
            'email' => 'robert@retaildynamics.com',
            'phone' => '+1 (555) 567-8901',
            'status' => 'active',
            'revenue' => '$3.2M',
            'employees' => 85,
            'initials' => 'RD',
            'industryIcon' => 'ph--shopping-bag',
            'lastActivity' => '3 hours ago',
        ],
    ];
@endphp

<div class="w-full max-w-7xl px-1 sm:px-4 mx-auto">
    <x-ui.card size="none" class="rounded-ui">
        <!-- Header with Search and Filter -->
        <div class="p-4 flex items-center justify-between gap-4">
            <div>
                <h2 class="text-xl font-semibold text-fg mb-1">Organizations</h2>
                <p class="text-fg-muted text-sm">Manage your customer relationships and track organization details.</p>
            </div>
            <div class="flex items-center gap-2">
                <x-ui.button size="sm">
                    New organization
                </x-ui.button>
            </div>
        </div>

        <x-ui.table class="text-left">
            <x-ui.table.columns
                wrapper="bg-bg-surface border-y border-border-input/60 [--gutter-x:--spacing(4)] [--gutter-y:--spacing(4)]">
                <x-ui.table.column class="pr-0 text-xs uppercase tracking-wider w-8">
                    <x-ui.checkbox />
                </x-ui.table.column>
                <x-ui.table.column class="text-xs uppercase tracking-wider min-w-48">
                    Organization
                </x-ui.table.column>
                <x-ui.table.column class="text-xs uppercase tracking-wider">
                    Industry
                </x-ui.table.column>
                <x-ui.table.column class="text-xs uppercase tracking-wider min-w-40">
                    Contact
                </x-ui.table.column>
                <x-ui.table.column class="text-xs uppercase tracking-wider">
                    Status
                </x-ui.table.column>
                <x-ui.table.column class="text-xs uppercase tracking-wider">
                    Revenue
                </x-ui.table.column>
                <x-ui.table.column class="text-xs uppercase tracking-wider">
                    Employees
                </x-ui.table.column>
                <x-ui.table.column class="text-xs uppercase tracking-wider">
                    Last Activity
                </x-ui.table.column>
                <x-ui.table.column class="w-10"></x-ui.table.column>
            </x-ui.table.columns>
            <x-ui.table.rows class="divide-y divide-border [--gutter-x:--spacing(4)] [--gutter-y:--spacing(4)]">
                @foreach ($organizations as $organization)
                    <x-ui.table.row hoverable class="group">
                        <x-ui.table.cell class="pr-0">
                            <x-ui.checkbox />
                        </x-ui.table.cell>
                        <x-ui.table.cell>
                            <div class="flex items-center gap-3">
                                <x-ui.avatar-placeholder size="sm" text="{{ $organization['initials'] }}"
                                    variant="solid" intent="neutral" />
                                <div>
                                    <div class="font-medium text-fg">{{ $organization['name'] }}</div>
                                    <div class="text-xs text-fg-muted">{{ $organization['email'] }}</div>
                                </div>
                            </div>
                        </x-ui.table.cell>
                        <x-ui.table.cell>
                            <div class="flex items-center gap-2">
                                <x-ui.icon name="{{ $organization['industryIcon'] }}" size="sm"
                                    class="text-fg-muted" />
                                <span class="text-sm text-fg">{{ $organization['industry'] }}</span>
                            </div>
                        </x-ui.table.cell>
                        <x-ui.table.cell>
                            <div>
                                <div class="text-sm font-medium text-fg">{{ $organization['contact'] }}</div>
                                <div class="text-xs text-fg-muted">{{ $organization['phone'] }}</div>
                            </div>
                        </x-ui.table.cell>
                        <x-ui.table.cell>
                            @if ($organization['status'] === 'active')
                                <span
                                    class="ui-soft ui-soft-success inline-flex items-center gap-x-1 rounded-md px-2 py-1 text-xs font-medium">
                                    <span class="size-2 rounded-full bg-success"></span>
                                    Active
                                </span>
                            @elseif($organization['status'] === 'prospect')
                                <span
                                    class="ui-soft ui-soft-warning inline-flex items-center gap-x-1 rounded-md px-2 py-1 text-xs font-medium">
                                    <span class="size-2 rounded-full bg-warning"></span>
                                    Prospect
                                </span>
                            @else
                                <span
                                    class="ui-soft ui-soft-danger inline-flex items-center gap-x-1 rounded-md px-2 py-1 text-xs font-medium">
                                    <span class="size-2 rounded-full bg-danger"></span>
                                    Churned
                                </span>
                            @endif
                        </x-ui.table.cell>
                        <x-ui.table.cell>
                            <span class="text-sm font-semibold text-fg">{{ $organization['revenue'] }}</span>
                        </x-ui.table.cell>
                        <x-ui.table.cell>
                            <span class="text-sm text-fg">{{ $organization['employees'] }}</span>
                        </x-ui.table.cell>
                        <x-ui.table.cell>
                            <span class="text-xs text-fg-muted">{{ $organization['lastActivity'] }}</span>
                        </x-ui.table.cell>
                        <x-ui.table.cell>
                            <x-ui.button size="sm" variant="ghost" icon-only>
                                <x-ui.icon name="ph--dots-three-vertical" />
                            </x-ui.button>
                        </x-ui.table.cell>
                    </x-ui.table.row>
                @endforeach
            </x-ui.table.rows>
        </x-ui.table>

        <div class="p-4 flex items-center md:justify-between border-t border-border">
            <div class="text-sm text-fg-muted">
                Showing 1 to {{ count($organizations) }} of {{ count($organizations) }} organizations
            </div>
            <div class="flex items-center gap-2">
                <x-ui.button size="sm" variant="ghost" icon-only aria-label="Go prev"
                    class="border border-border-input" disabled>
                    <x-ui.icon name="ph--caret-left" />
                </x-ui.button>
                <x-ui.button size="sm" variant="ghost" icon-only aria-label="Go next"
                    class="border border-border-input">
                    <x-ui.icon name="ph--caret-right" />
                </x-ui.button>
            </div>
        </div>
    </x-ui.card>
</div>