<?php

namespace App\Livewire;

use App\Models\Utilisateur;
use Livewire\Attributes\Url;
use Livewire\Component;
use Livewire\WithPagination;

class ListUtilisateurs extends Component
{
    use WithPagination;

    public int $parPage = 10;
    public string $search = '';
    public string $filtreRole = '';
    public string $sortBy = 'id';

    #[Url()]
    public string $sortDir = 'ASC';

    public function delete(Utilisateur $utilisateur)
    {
        $utilisateur->delete();
    }

    public function setSortBy($sortBy)
    {
        if ($this->sortBy == $sortBy) {
            $this->sortDir = $this->sortDir == 'ASC' ? 'DESC' : 'ASC';
            return;
        };
        $this->sortBy = $sortBy;
        $this->sortDir = 'ASC';
    }

    public function render()
    {
        return view('livewire.list-utilisateurs',
            [
                'utilisateurs' => Utilisateur::search($this->search)
                    ->when($this->filtreRole !== '', function ($query) {
                        $query->where('is_admin', $this->filtreRole);
                    })
                    ->orderBy($this->sortBy, $this->sortDir)
                    ->paginate($this->parPage)
            ]
        );
    }
}

<div>
    <x-header title="Utilisateurs"
              subtitle="Affichage des utilisateurs. La table contient 100 000 enregistrements."
              separator/>


    <div class="mx-auto max-w-screen-xl px-4 lg:px-2">
        <!-- Start coding here -->
        <div class="bg-white relative shadow-md sm:rounded-lg overflow-hidden">
            <div class="flex items-center justify-between d p-4">
                <div class="flex">
                    <div class="relative w-full">
                        <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                            <svg aria-hidden="true" class="w-5 h-5 text-gray-500 "
                                 fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd"
                                      d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
                                      clip-rule="evenodd"/>
                            </svg>
                        </div>
                        <input
                            wire:model.live.debounce.300ms="search"
                            type="text"
                            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full pl-10 p-2 "
                            placeholder="Chercher" required="">
                    </div>
                </div>
                <div class="flex space-x-3">
                    <div class="flex space-x-3 items-center">
                        <label class="w-40 text-sm font-medium text-gray-900">Role :</label>
                        <select
                            wire:model.live="filtreRole"
                            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 ">
                            <option value="">Tous</option>
                            <option value="0">Membre</option>
                            <option value="1">Admin</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
                    <thead class="text-xs text-gray-700 bg-gray-50">
                    <tr>
                        @include('livewire.includes.table-sortable-th', ['fieldName'=> 'id', 'displayName'=> '#'])
                        @include('livewire.includes.table-sortable-th', ['fieldName'=> 'nom', 'displayName'=> 'Nom'])
                        @include('livewire.includes.table-sortable-th', ['fieldName'=> 'prenom', 'displayName'=> 'Prenom'])
                        @include('livewire.includes.table-sortable-th', ['fieldName'=> 'email', 'displayName'=> 'Email'])
                        <th scope="col" class="px-4 py-3">Role</th>
                        @include('livewire.includes.table-sortable-th', ['fieldName'=> 'ville', 'displayName'=> 'Ville'])
                        <th scope="col" class="px-4 py-3">Créé le</th>
                        <th scope="col" class="px-4 py-3">
                            <span class="sr-only">Actions</span>
                        </th>
                    </tr>
                    </thead>
                    <tbody>

                    @foreach($utilisateurs as $utilisateur)
                        <tr wire:key="{{$utilisateur->id}}" class="border-b dark:border-gray-700">
                            <td class="px-4 py-3">{{ $utilisateur->id }}</td>
                            <th scope="row"
                                class="px-4 py-3 font-medium text-gray-900 whitespace-nowrap ">
                                {{ $utilisateur->nom }}
                            </th>
                            <td class="px-4 py-3">{{ $utilisateur->prenom }}</td>
                            <td class="px-4 py-3">{{ $utilisateur->email }}</td>
                            <td class="px-4 py-3 {{ $utilisateur->is_admin ? 'text-green-500' : 'text-blue-500' }}">
                                {{ $utilisateur->is_admin ? 'Admin' : 'Membre' }}
                            </td>
                            <td class="px-4 py-3">{{$utilisateur->ville}}</td>
                            <td class="px-4 py-3">{{$utilisateur->created_at}}</td>
                            <td class="px-4 py-3 flex items-center justify-end">
                                <x-button
                                    onClick="confirm('Etes-vous sur de vouloir supprimer {{$utilisateur->prenom}} {{$utilisateur->nom}} ? ') ? '' : event.stopImmediatePropagation()"
                                    wire:click="delete({{$utilisateur->id}})" icon="o-trash"
                                    class="btn btn-xs btn-error  text-white"/>

                            </td>
                        </tr>
                    @endforeach

                    </tbody>
                </table>
            </div>

            <div class="py-4 px-3">
                <div class="flex justify-between ">
                    <div class="flex space-x-4 items-center mb-3">
                        <select
                            wire:model.live='parPage'
                            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 ">
                            <option value="5">5</option>
                            <option value="10">10</option>
                            <option value="20">20</option>
                            <option value="50">50</option>
                            <option value="100">100</option>
                        </select>
                        <label class="w-32 text-sm font-medium text-gray-900">par page</label>

                    </div>
                    <div class="flex space-x-4 items-center mb-3">
                        Affichage de  &nbsp; <x-badge value=" {{ $utilisateurs->firstItem() }}" class="badge bg-gray-100" /> &nbsp;  à
                        <x-badge value=" {{ $utilisateurs->lastItem() }}" class="badge bg-gray-100"/>  &nbsp; sur un total
                        de<x-badge value=" {{ number_format($utilisateurs->total(),0,'.', ' ') }}" class="badge bg-gray-100"/>
                    </div>

                    <div class="flex justify-end">
                        {{$utilisateurs->links()}}
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>