@extends('layouts.app')
@section('content')

    <div>
        <!-- Blog Header -->
        <div class="panelHeader">
            <h3 class="panelHeaderTitle">Users</h3>

            @if(canAccess(['users create']))
                <a href="{{ route('admin.users.create') }}" class="panelHeaderBtn">
                    Create User
                    <i class="fa-solid fa-plus"></i>
                </a>
            @endif
        </div>
        <!-- User Table -->
        <div class="custom-data-table">
            <table id="dataTable">
                <thead>
                <tr>
                    <th>
                        Avatar
                    </th>
                    <th>
                        User name
                    </th>
                    <th>
                        Email
                    </th>
                    <th>
                        Mobile
                    </th>
                    <th>
                        Address
                    </th>
                    <th class="text-right">
                        Action
                    </th>
                </tr>
                </thead>
                <tbody>
                @if (!empty($results))
                    @foreach ($results as $key => $row)
                        @php($avatar = !empty($row->avatar) ? $row->avatar : 'public/images/chief-placeholder.webp')
                        <tr>
                            <td>
                                <img src="{{ asset($avatar) }}" class="w-14 h-auto object-contain" alt="User avatar"/>
                            </td>
                            <th scope="row" class="px-6 py-4 whitespace-nowrap">
                                {{ $row->name }}
                            </th>
                            <td class="px-6 py-4 whitespace-nowrap">
                                {{ $row->email }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                {{ $row->mobile }}
                            </td>
                            <td>
                                {{ $row->address }}
                            </td>
                            <td>
                                <div class="flex items-center justify-end gap-1">
                                    @if(canAccess(['users edit']))
                                        <a href="{{ route('admin.users.edit', $row->id) }}" class="edit-action-btn">
                                            <i class="fa-regular fa-pen-to-square"></i>
                                        </a>
                                    @endif

                                    @if(canAccess(['users destroy']))
                                        <a href="{{ route('admin.users.destroy', $row->id) }}"
                                           onclick="return confirm('Do you want to delete this data?')"
                                           class="delete-action-btn">
                                            <i class="fa-regular fa-trash-can"></i>
                                        </a>
                                    @endif
                                </div>

                            </td>
                        </tr>
                    @endforeach
                @endif
                </tbody>
            </table>
        </div>
    </div>

@endsection
@push('headerPartial')
    <link rel="stylesheet" href="https://cdn.datatables.net/2.0.1/css/dataTables.dataTables.css">
    <link rel="stylesheet" href="{{ asset('css/custom-data-table.css') }}">
@endpush
@push('footerPartial')
    <script src="https://cdn.datatables.net/2.0.1/js/dataTables.js"></script>
    <script>
        new DataTable('#dataTable', {
            scrollX: true
        });
    </script>
@endpush