@php
    use App\Enums\RoleEnum;
    use Illuminate\Support\Str;
    use Illuminate\Support\Number;
@endphp

<x-page :title="__('sellers')" :breadcrumbs="$breadcrumbs">
    <div class="mx-auto flex flex-col w-full items-stretch gap-4">
        <div class="flex items-center justify-end">

        </div>

        <x-table class="w-full">
            <x-table.head class="bg-gray-50">
                <x-table.row>
                    <th scope="col" class="relative pl-4 lg:pl-6">
                        <div class="flex h-6 items-center">
                            <label>
                                <input type="checkbox" wire:model.live="selectAll"
                                       class="h-4 w-4 rounded border-gray-300 shadow text-primary-600 focus:ring-primary-600">
                            </label>
                        </div>
                    </th>
                    <x-table.head-cell>{{ __('name') }}</x-table.head-cell>
                    <x-table.head-cell class="hidden md:table-cell">{{ __('email') }}</x-table.head-cell>
                    <x-table.head-cell class="hidden md:table-cell">{{ __('contact') }}</x-table.head-cell>
                    <x-table.head-cell class="text-center">{{ __('is_active') }}</x-table.head-cell>
                    <x-table.head-cell-action class="hidden sm:table-cell"/>
                </x-table.row>
            </x-table.head>
            <x-table.body>
                @forelse($this->sellers as $seller)
                    <x-table.row @class([
                        'bg-primary-50/80' => collect($this->selectedSellers)->contains($seller['uuid'])])
                    >
                        <x-table.columns.text class="relative pl-4 lg:pl-6">
                            @if(collect($this->selectedSellers)->contains($seller['uuid']))
                                <div class="absolute inset-y-0 left-0 w-0.5 bg-primary-600"></div>
                            @endif
                            <div class="flex h-6 items-center">
                                <label for="seller-{{ $seller['uuid'] }}"></label>
                                <input id="seller-{{ $seller['uuid'] }}"
                                       type="checkbox"
                                       value="{{ $seller['uuid'] }}"
                                       wire:model.live="selectedSellers"
                                       class="h-4 w-4 rounded border-gray-300 shadow text-primary-600 focus:ring-primary-600">
                            </div>
                        </x-table.columns.text>
                        <x-table.columns.text class="truncate">
                            {{ $seller['nom'] }} {{ $seller['prenom'] }}
                        </x-table.columns.text>
                        <x-table.columns.text class="hidden md:table-cell">
                            {{ $seller['email'] }}
                        </x-table.columns.text>
                        <x-table.columns.text class="hidden md:table-cell">
                            {{ $seller['contact1'] }}
                        </x-table.columns.text>
                        <x-table.columns.boolean :state="$seller['statut'] == 'Actif'"/>
                        <x-slot:actions class="hidden sm:table-cell" wire:key="{{ 'seller-'.$seller['uuid'] }}">
                            <x-filament-actions::group
                                :actions="[
                                    ($this->viewAction)(['sellerId' => $seller['uuid']]),
                                    ($this->viewShopsAction)(['sellerId' => $seller['uuid']])
                                ]"
                                label="Actions"
                                icon="heroicon-m-ellipsis-vertical"
                                color="primary"
                                size="md"
                                tooltip="Actions"
                                dropdown-placement="bottom-start"
                            />

                            <x-filament-actions::modals/>
                        </x-slot:actions>
                    </x-table.row>
                @empty
                @endforelse
            </x-table.body>
        </x-table>
    </div>
</x-page>