<?php

use App\Models\User;
use Livewire\Volt\Component;
use Livewire\WithPagination; // Wichtig für Paginierung


new class extends Component {
    use WithPagination;

    // Optional: Such- und Filter-Properties
    public string $search = '';
    public string $statusFilter = '';
    public string $roleFilter = '';

    // Optional: Sortierung
    public $sortBy = 'name';
    public $sortDirection = 'asc';


      /**
     * Mount the component.
     */
     public function mount(): void
     {
         // Standardwerte für Sortierung setzen
         $this->sortBy = 'name';
         $this->sortDirection = 'asc';
     }


     public function sort($column) {
        if ($this->sortBy === $column) {
            $this->sortDirection = $this->sortDirection === 'asc' ? 'desc' : 'asc';
        } else {
            $this->sortBy = $column;
            $this->sortDirection = 'asc';
        }
    }


    /*public function orders()
    {
        return \App\Models\Order::query()
            ->tap(fn ($query) => $this->sortBy ? $query->orderBy($this->sortBy, $this->sortDirection) : $query)
            ->paginate(5);
    }*/


    // Die Hauptmethode, um Daten zu laden
    #[\Livewire\Attributes\Computed]
    public function users()
    {
        return User::query()
            ->when($this->search, fn($query, $search) =>
                $query->where('name', 'like', '%' . $search . '%')
                      ->orWhere('email', 'like', '%' . $search . '%')
            )
            ->when($this->statusFilter, fn($query, $status) =>
                $query->where('status', $status)
            )
            ->when($this->roleFilter, fn($query, $role) =>
                $query->where('role', $role) // oder 'role_id' wenn du IDs verwendest
            )
            ->orderBy($this->sortBy, $this->sortDirection)
            ->paginate(10); // 10 Einträge pro Seite
    }

    // Optional: Lifecycle hook für das Zurücksetzen der Paginierung bei Suche/Filterung
    public function updatedSearch() { $this->resetPage(); }
    public function updatedStatusFilter() { $this->resetPage(); }
    public function updatedRoleFilter() { $this->resetPage(); }

    // Wird für die Paginierung mit Tailwind benötigt (Standard in Livewire 3)
    // Wenn FluxUI Bootstrap-basierte Paginierung braucht, musst du das anpassen
    // public function paginationView()
    // {
    //     return 'vendor.livewire.tailwind'; // oder 'livewire::bootstrap'
    // }

    // Wenn du mit Relationen arbeitest (z.B. user->role->name)
    // public function with(): array
    // {
    //     return [
    //         'users' => User::with(['role', 'group']) // Eager loading
    //             // ... deine Query-Logik von oben ...
    //             ->paginate(10),
    //     ];
    // }
}; ?>
<flux:table :paginate="$this->users">
    <flux:table.columns>
        <flux:table.column>Customer</flux:table.column>
        <flux:table.column sortable :sorted="$sortBy === 'date'" :direction="$sortDirection" wire:click="sort('date')">Date</flux:table.column>
        <flux:table.column sortable :sorted="$sortBy === 'status'" :direction="$sortDirection" wire:click="sort('status')">Status</flux:table.column>
        <flux:table.column sortable :sorted="$sortBy === 'amount'" :direction="$sortDirection" wire:click="sort('amount')">Amount</flux:table.column>
    </flux:table.columns>

    <flux:table.rows>
        @foreach ($this->users as $user)
            <flux:table.row :key="$user->id">
                <flux:table.cell class="flex items-center gap-3">
                    <flux:avatar size="xs" src="{{ $user->avatar }}" />

                    {{ $user->name }}
                </flux:table.cell>

                <flux:table.cell class="whitespace-nowrap">{{ $user->email }}</flux:table.cell>

                <flux:table.cell>
                    <flux:badge size="sm" color="lime" inset="top bottom">RTest</flux:badge>
                </flux:table.cell>

                <flux:table.cell variant="strong">{{ $user->role }}</flux:table.cell>

                <flux:table.cell>
                    <flux:dropdown>
                        <flux:button variant="ghost" size="sm" icon="ellipsis-horizontal" inset="top bottom"></flux:button>
                        <flux:menu>
                            <flux:menu.item icon="plus">New post</flux:menu.item>
                            <flux:menu.separator />
                            <flux:menu.submenu heading="Sort by">
                                <flux:menu.radio.group>
                                    <flux:menu.radio checked>Name</flux:menu.radio>
                                    <flux:menu.radio>Date</flux:menu.radio>
                                    <flux:menu.radio>Popularity</flux:menu.radio>
                                </flux:menu.radio.group>
                            </flux:menu.submenu>
                            <flux:menu.submenu heading="Filter">
                                <flux:menu.checkbox checked>Draft</flux:menu.checkbox>
                                <flux:menu.checkbox checked>Published</flux:menu.checkbox>
                                <flux:menu.checkbox>Archived</flux:menu.checkbox>
                            </flux:menu.submenu>
                            <flux:menu.separator />
                            <flux:menu.item variant="danger" icon="trash">Delete</flux:menu.item>
                        </flux:menu>
                    </flux:dropdown>
                </flux:table.cell>
            </flux:table.row>
        @endforeach
    </flux:table.rows>
</flux:table>