@extends('layouts.app')

@section('title', 'Role Management')

@section('panel-actions')
    <a href="{{ route('roles.create') }}" class="btn btn-primary btn-sm shadow-sm">
        <i class="fas fa-plus-circle mr-1"></i> Create New Role
    </a>
@endsection

@section('content')
<div class="row">
    <div class="col-12">
        <div class="card card-primary card-outline shadow-sm border-0">
            <div class="card-header bg-white py-3">
                <h3 class="card-title font-weight-bold text-dark">
                    <i class="fas fa-user-shield mr-2 text-primary"></i>System Access Roles
                </h3>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover table-bordered table-striped w-100 mb-0" id="rolesTable">
                        <thead>
                            <tr class="bg-light">
                                <th>Role Name</th>
                                <th class="text-center">Assigned Users</th>
                                <th class="text-center">Permissions</th>
                                <th class="text-center">Actions</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    $(document).ready(function() {
        const table = $('#rolesTable').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ route('roles.data') }}",
            columns: [
                { data: 'name', name: 'name', render: function(data) {
                    return '<span class="font-weight-bold text-primary">' + data + '</span>';
                }},
                { data: 'users_count', name: 'users_count', className: 'text-center' },
                { data: 'permissions', name: 'permissions', render: function(data) {
                    if (!data || data.length === 0) return '<span class="badge badge-secondary">No Permissions</span>';
                    return '<span class="badge badge-info px-2 py-1">' + data.length + ' Menus Authorized</span>';
                }, className: 'text-center' },
                { data: 'action', name: 'action', orderable: false, searchable: false }
            ],
            language: {
                search: "_INPUT_",
                searchPlaceholder: "Search roles...",
                paginate: {
                    previous: '<i class="fas fa-chevron-left"></i>',
                    next: '<i class="fas fa-chevron-right"></i>'
                }
            }
        });

        $('body').on('click', '.delete-role', function() {
            const id = $(this).data('id');
            if (confirm('Are you sure you want to delete this role? This action cannot be undone.')) {
                $.ajax({
                    url: "{{ url('roles') }}/" + id,
                    type: 'DELETE',
                    data: { _token: "{{ csrf_token() }}" },
                    success: function(response) {
                        toastr.success(response.success);
                        table.ajax.reload();
                    },
                    error: function(xhr) {
                        toastr.error(xhr.responseJSON.error || 'Something went wrong');
                    }
                });
            }
        });
    });
</script>
@endpush