@extends('backend.layouts.app')

@section('content')

<div class="container p-4 mx-auto">
    <h1 class="mb-4 h2 fw-bold">Users</h1>
    <a href="{{ route('users.create') }}" class="btn btn-primary"><i class='bx bx-add-to-queue'></i> Add New Users</a>
</div>

<section class="container px-4 mx-auto">
    <div class="table-responsive ">
        <table id="userTable" class="table table-bordered table-hover">
            <thead class="table-light">
                <tr>
                    <th scope="col">Id</th>
                    <th scope="col">Name</th>
                    <th scope="col">Email</th>
                    <th scope="col">Role</th>
                    <th scope="col" class="text-center">Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($user as $users)
                <tr>
                    <td>{{ $users->id }}</td>
                    <td>{{ $users->name }}</td>
                    <td>{{ $users->email }}</td>
                    <td>{{ $users->role }}</td>
                    <td>
                        <form method="GET" action="{{ route('users.edit', $users->id) }}">
                            <button class="btn btn-primary btn-block mb-2">Edit</button>
                        </form>
                        <form method="POST" action="{{ route('users.destroy', $users->id) }}">
                            @csrf
                            @method('DELETE')
                            <button class="btn btn-danger btn-block mb-2">Delete</button>
                        </form>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</section>



@endsection


@section('css')
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap4.min.css">
@endsection

@section('js')
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap4.min.js"></script>
<script>
    $(document).ready(function() {
        $('#userTable').DataTable({
            order: [
                [0, 'desc']
            ],
        });
    });
</script>
@endsection