<div class="row">
    <x-content-header title="page" />

    <div class="col-12">
        <x-card>

            <div class="row mb-2">
                <div class="col-sm-9">
                    <div class="d-md-flex">
                        <div class="search-box mr-2 mb-2 d-inline-block">
                            <div class="position-relative">
                                <input type="search" wire:model.debonce.500ms="s" class="form-control"
                                    placeholder="Search...">
                                <i class="bx bx-search-alt search-icon"></i>
                            </div>
                        </div>
                        <div class="d-flex align-self-center">
                            <span class="align-self-center mr-2">Show</span>
                            <select wire:model="limited" aria-controls="post_table" class="custom-select custom-select-sm form-control td-pointer" {{ $total_item <= $show_limit[0] ?'disabled':'' }}>
                                @foreach ($show_limit as $item)
                                    <option value="{{ $item }}">{{ $item }}</option>
                                @endforeach
                            </select>
                            <span class="align-self-center ml-2">entries</span>
                        </div>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="float-right">
                        <livewire:admin.partcials.user-form modal-id="item_create" />
                    </div>
                </div>
            </div>

            <x-table class="position-relative" wire:init="loadingItem">
                <x-table.loading wire:target="nextPage" />
                <x-table.loading wire:target="previousPage" />
                <x-table.loading wire:target="gotoPage" />
                <x-table.loading wire:target="s" />
                <x-table.loading wire:target="limited" />
                <x-table.loading wire:target="sortBy" />
                <x-table.loading wire:target="destroy" />

                <thead class="thead-light">
                    <tr>
                        <th>ID</th>
                        <th>Profile</th>
                        <th class="td-pointer" wire:click="sortBy('name')">
                            Name
                            <i class="fas {{ $sortDirection === 'asc' ? 'fa-sort-alpha-down' : 'fas fa-sort-alpha-up-alt' }}  my-opacity float-right font-20 {{ $sortBy === 'name' ? 'd-block' : 'd-none' }}">
                        </th>
                        <th class="td-pointer" wire:click="sortBy('email')">
                            Email
                            <i class="fas {{ $sortDirection === 'asc' ? 'fa-sort-alpha-down' : 'fas fa-sort-alpha-up-alt' }}  my-opacity float-right font-20 {{ $sortBy === 'email' ? 'd-block' : 'd-none' }}">
                        </th>
                        <th>Gender</th>
                        <th>Phone</th>
                        <th>Description</th>
                        <th class="td-pointer" wire:click="sortBy('created_at')">
                            Created At
                            <i class="fas {{ $sortDirection === 'asc' ? 'fa-sort-alpha-down' : 'fas fa-sort-alpha-up-alt' }}  my-opacity float-right font-20 {{ $sortBy === 'created_at' ? 'd-block' : 'd-none' }}">
                        </th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($users as $key => $user)
                        <tr>
                            <td class="text-center">{{ ++$key }}</td>
                            <td class="td-pointer avatar-md profile-user-wid">
                                <img src="{{ $user->feature_image != null ? asset($user->feature_image) : asset('backend/images/avatar.jpg') }}" alt="thumbnail" class="rounded-circle avatar-sm my-object-fit">
                            </td>
                            <td>{{ $user->name }}</td>
                            <td>{{ $user->email }}</td>
                            <td class="text-center">{{ $user->gender }}</td>
                            <td class="text-center">{{ $user->phone }}</td>
                            <td>{{ Str::limit($user->desc, 40, '...') }}</td>
                            <td>
                                @isset($user->created_at)
                                    {{ date_format($user->created_at, 'd-M-Y H:i a') }}
                                @endisset
                            </td>
                            <td class="text-center">
                                <livewire:admin.partcials.user-form :modal-id="'item_'.$user->id" :user="$user" wire:key="{{ $user->id }}" />
                                
                                <a href="#" wire:click="destroy({{$user}})" class="text-danger">
                                    <i class="mdi mdi-trash-can-outline font-size-18"></i>
                                </a>
                            </td>
                        </tr>
                    @empty
                    <x-table.none-loading :ready="$readyLoadingItem" :limited="$limited" :item="$users" colspan="9" rows="9" />
                    @endforelse
                </tbody>
            </x-table>
            @empty(!$users)
                {{ $users->links() }}
            @endempty
        </x-card>
    </div>
</div>

@push('scripts')
<script>
    window.addEventListener('closeModal', event => {
        $('#' + event.detail.modalId).modal('hide');
    })
</script>
@endpush