@extends('layouts.backend.app')

@section('title','Users')

@section('content')
    <div class="app-page-title">
        <div class="page-title-wrapper">
            <div class="page-title-heading">
                <div class="page-title-icon">
                    <i class="pe-7s-users icon-gradient bg-mean-fruit">
                    </i>
                </div>
                <div>{{ __('All Users') }}</div>
            </div>

        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="main-card mb-3 card">
                <div class="table-responsive">
                    <table id="datatable" class="align-middle mb-0 table table-borderless table-striped table-hover left-sort-icon">
                        <thead>
                        <tr>
                            <th class="text-left">#</th>
                            <th>Name</th>
                            <th class="">Email</th>
                            <th class="">Role</th>
                            <th class="">Status</th>

                        </tr>
                        </thead>
                        <tbody>
                        @foreach($users as $key => $user)
                            <tr>
                                <td class="text-muted">#{{ $user->user_id }}</td>
                                <td class="text-muted">{{ $user->user_fullname }}</td>
                                <td class="">{{ $user->user_email }}</td>
                                <td class="">{{ optional($user->role)->name }}</td>
                                <td class="">
                                    @if ($user->status)
                                        <div class="badge bg-success">Active</div>
                                    @else
                                        <div class="badge bg-danger">Inactive</div>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')

    <script>
        $(document).ready(function() {
            // Datatable
            $("#datatable").DataTable();
        });
    </script>
@endpush