@extends('layouts.admin.app')

@section('title', __('pages/admin/components.nav.basic_table'))

@section('content')
<x-layouts.admin.component-demo
    :title="__('pages/admin/components.nav.basic_table')"
    :section="__('pages/admin/components.section.tables')"
    :fullWidth="true"
>
    <x-tables.data-table
        class="w-full border-0"
        :columns="$columns"
    >
        <x-slot:tbody>
            @php
                $tr = 'border-t border-border bg-card transition-colors duration-150 hover:bg-muted/60 dark:hover:bg-muted/40';
                $td = 'px-6 py-4 text-foreground';
                $emptyMessage = __('pages/admin/components.tables.empty.no_records');
            @endphp

            @forelse($rows as $row)
                <tr class="{{ $tr }}">
                    <td class="px-4 py-3">
                        <input type="checkbox" name="selected[]" value="{{ $row->id ?? '' }}"
                               class="row-checkbox h-4 w-4 rounded border-input text-primary-600 focus:ring-primary-500"/>
                    </td>
                    @foreach($columns as $col)
                        <td @class([$td, $col['class'] ?? ''])>
                            @switch($col['type'] ?? 'text')
                                @case('user')
                                    <div class="flex items-center gap-3">
                                        <x-utility.avatar :name="data_get($row, 'name', '')" size="sm" :status="data_get($row, 'status') === 'active' ? 'online' : 'offline'" />
                                        <div class="min-w-0">
                                            <p class="truncate font-medium text-foreground">{{ data_get($row, 'name') }}</p>
                                            <p class="truncate text-xs text-muted-foreground">{{ data_get($row, 'email') }}</p>
                                        </div>
                                    </div>
                                    @break

                                @case('badge')
                                    @php
                                        $badgeValue = data_get($row, $col['key']);
                                        $badgeVariant = match ($badgeValue) {
                                            'active' => 'success',
                                            'inactive' => 'danger',
                                            'pending' => 'warning',
                                            default => 'surface',
                                        };
                                    @endphp
                                    <x-utility.badge :variant="$badgeVariant" :dot="true">
                                        {{ match ($badgeValue) {
                                            'active' => __('pages/common.status.active'),
                                            'inactive' => __('pages/common.status.inactive'),
                                            'pending' => __('statuses.pending'),
                                            default => ucfirst((string) $badgeValue),
                                        } }}
                                    </x-utility.badge>
                                    @break

                                @case('role')
                                    @php
                                        $roleValue = data_get($row, $col['key']);
                                        $roleVariant = match ($roleValue) {
                                            'Admin' => 'primary',
                                            'Editor' => 'warning',
                                            default => 'surface',
                                        };
                                    @endphp
                                    <x-utility.badge :variant="$roleVariant" size="sm">
                                        {{ match ($roleValue) {
                                            'Admin' => __('pages/admin/components.tables.roles.admin'),
                                            'Editor' => __('pages/admin/components.tables.roles.editor'),
                                            'Viewer' => __('pages/admin/components.tables.roles.viewer'),
                                            default => $roleValue,
                                        } }}
                                    </x-utility.badge>
                                    @break

                                @case('actions')
                                    <div class="flex items-center justify-end gap-1">
                                        <x-utility.tooltip :text="__('pages/admin/components.tables.actions.view_details')" position="top">
                                            <x-buttons.icon variant="ghost" size="sm" :title="__('buttons.view')">
                                                <x-heroicon-o-eye class="h-4 w-4" />
                                            </x-buttons.icon>
                                        </x-utility.tooltip>

                                        <x-utility.tooltip :text="__('pages/admin/components.tables.actions.edit_record')" position="top">
                                            <x-buttons.icon variant="ghost" size="sm" :title="__('buttons.edit')">
                                                <x-heroicon-o-pencil class="h-4 w-4" />
                                            </x-buttons.icon>
                                        </x-utility.tooltip>

                                        <x-utility.dropdown align="right" width="w-44">
                                            <x-slot:trigger>
                                                <x-buttons.icon variant="ghost" size="sm" :title="__('pages/admin/components.tables.actions.more_options')">
                                                    <x-heroicon-o-ellipsis-vertical class="h-4 w-4" />
                                                </x-buttons.icon>
                                            </x-slot:trigger>
                                            <x-slot:items>
                                                <a href="#" class="block px-4 py-2 text-sm text-foreground transition-colors hover:bg-muted">{{ __('pages/admin/components.tables.actions.view_profile') }}</a>
                                                <a href="#" class="block px-4 py-2 text-sm text-foreground transition-colors hover:bg-muted">{{ __('pages/admin/components.tables.actions.duplicate') }}</a>
                                                <a href="#" class="block px-4 py-2 text-sm text-foreground transition-colors hover:bg-muted">{{ __('pages/admin/components.tables.actions.archive') }}</a>
                                                <hr class="my-1 border-border" />
                                                <a href="#" class="block px-4 py-2 text-sm text-destructive transition-colors hover:bg-destructive/10">{{ __('buttons.delete') }}</a>
                                            </x-slot:items>
                                        </x-utility.dropdown>
                                    </div>
                                    @break

                                @default
                                    {{ data_get($row, $col['key']) }}
                            @endswitch
                        </td>
                    @endforeach
                </tr>
            @empty
                <tr data-cb-filtered-empty>
                    <td colspan="{{ count($columns) + 1 }}">
                        <x-tables.empty-state :message="$emptyMessage" />
                    </td>
                </tr>
            @endforelse
        </x-slot:tbody>
    </x-tables.data-table>
</x-layouts.admin.component-demo>
@endsection