@extends('user::layouts.backend-master')
@section('breadcrumb_title', 'Roles List')
@section('content')


    <div class="card">

        <div class="flex justify-between items-center gap-3 mb-5">
            <h2 class="text-2xl font-semibold">Role List</h2>
            <div>
                <a href="{{ route('admin.roles.create') }}" class="btn btn-primary">
                    <i class="fas fa-plus mr-2"></i> Add New role
                </a>
            </div>
        </div>

        <x-backend::table-wrapper>
            <table class="min-w-full">
                <thead>
                    <tr>
                        <th class="whitespace-nowrap text-left">#</th>
                        <th class="whitespace-nowrap text-left">Role Name</th>
                        <th class="whitespace-nowrap text-left">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($roles as $role)
                        <tr class="border-b hover:bg-gray-50">
                            <td class="px-6 py-4 font-medium text-gray-900">{{ $loop->iteration }}</td>
                            <td class="px-6 py-4">{{ $role->name }}</td>
                            <td class="px-6 py-4">
                                <div class="flex items-center gap-2">
                                    @include('backend::components.edit-button', [
                                        'route' => route('admin.roles.edit', $role->id),
                                    ])
                                    @include('backend::components.delete-button', ['id' => $role->id])
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="px-4 py-2 text-center text-sm text-gray-500">No users found</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </x-backend::table-wrapper>
    </div>

@endsection


@push('scripts')
    <script>
        (function($) {
            "use strict"
            // Delete functionality
            $(document).on('click', '.delete-btn', function() {
                Swal.fire({
                    title: "Are you sure to delete?",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#3085d6",
                    cancelButtonColor: "#d33",
                    confirmButtonText: "Yes, Delete it!"
                }).then((result) => {
                    if (result.isConfirmed) {
                        var id = $(this).data('id');
                        $.ajax({
                            url: `{{ route('admin.roles.destroy', ':id') }}`
                                .replace(':id', id),
                            type: 'DELETE',
                            data: {
                                _token: '{{ csrf_token() }}'
                            },
                            success: function(response) {
                                if (response.success) {
                                    toastr.success(response.message);
                                    location.reload();
                                } else {
                                    toastr.error(response.message);
                                }
                            },
                            error: function() {
                                toastr.error("Server error.");
                            }
                        });
                    }
                });
            });

        })(jQuery);
    </script>
@endpush