@extends('layouts.app')


@section('title', 'All Users')

{{-- custom css --}}
@push('css')
@endpush

{{-- page connect --}}
@section('content')

<x-content-body>

    <x-breadcrumbs :breadcrumbs="$breadcrumbs" />

    <x-messages />

    <x-row-card>

        <x-slot:title>
            <h4 class="card-title">Manange Users</h4>
            <a type="button" href="{{ route('settings.user-management.users.create') }}"
                class="btn btn-rounded btn-primary btn-sm">New
                User</a>
        </x-slot:title>

        <div class="table-responsive">
            <table id="example3" class="display" style="min-width: 845px">
                <thead>
                    <tr>
                        <th></th>
                        <th>Name</th>
                        <th>Title</th>
                        <th>Role</th>
                        <th>Mobile</th>
                        <th>Email</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($users as $user)
                    <tr>
                        <td>
                            @if ($user['avatar'])
                            <img class="rounded-circle" width="35"
                                src="{{ config('app.api_assets_url') }}/avatar/{{ $user['avatar'] }}" alt="">
                            @else
                            <img class="rounded-circle" width="35" src="{{ asset('assets/images/profile/pic1.jpg') }}"
                                alt="">
                            @endif
                        </td>
                        <td>
                            {{ ($user['f_name'] ?? '') }} 
                            {{ ($user['m_name'] ?? '') }} 
                            {{ ($user['l_name'] ?? '') }}
                        </td>
                        <td>{{ $user['title'] ?? '-' }}</td>
                        <td>
                            @forelse ($user['roles'] ?? [] as $role )
                            <span class="badge bg-primary">{{ ucfirst($role['name']) }} </span>
                            @empty
                                {{ '-' }}
                            @endforelse
                        </td>
                        <td><a href="javascript:void(0);"><strong> {{ $user['cell_phone'] ?? '-' }} </strong></a></td>
                        <td><a href="javascript:void(0);"><strong>{{ $user['email'] }}</strong></a></td>
                        <td>
                            <div class="form-check form-switch">
                                <label class="form-check-label">
                                    <input class="form-check-input user-status"
                                        name="user-status"
                                        id="user-status-{{ $user['id'] }}"
                                      type="checkbox" role="switch"
                                        value="checkedValue"
                                        aria-label="Text for screen reader"
                                        data-id="{{ $user['id'] }}"
                                        @checked(isset($user['status']) && $user['status'] == 'active')
                                    />
                                </label>
                            </div>
                        </td>
                        <td>
                            <div class="d-flex">
                                <a href="{{ route('settings.user-management.users.show', ['user' => $user['id']]) }}"
                                    class="btn btn-warning shadow btn-xs sharp me-1"><i class="fa-solid fa-eye"></i></a>
                                <a href="{{ route('settings.user-management.users.edit', ['user' => $user['id']]) }}"
                                    class="btn btn-primary shadow btn-xs sharp me-1"><i class="fa fa-pencil"></i></a>
                                <button data-id="{{ $user['id'] }}" data-url="{{ route('settings.user-management.users.destroy', ['user' => $user['id']]) }}"
                                    class="btn btn-danger shadow btn-xs sharp deleteButton"><i
                                        class="fa fa-trash"></i></button>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </x-row-card>
</x-content-body>
@endsection


{{-- custom js --}}
@push('js')
<script>
    let userStatusChangRoute = @json(route('settings.user-management.users.change.status'));
  
</script>
<script src="{{ asset('assets/js/custom/user.js') }}"></script>
@endpush