@extends('adminlte::page')

@section('content')
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Roles</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{route('admin.home')}}">Home</a></li>
                    <li class="breadcrumb-item">Role & permission</li>
                    <li class="breadcrumb-item active">Roles</li>
                </ol>
            </div>
        </div>
    </div>
</section>

<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">List Of Roles</h3>
                    </div>
                    <div class="filter-group pl-4 pt-4">
                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-add-role">
                            Add Role
                        </button>
                    </div>

                    <div class="card-body table-responsive">
                        <table id="example" class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Name</th>
                                    <th>Permissions</th>
                                    <th>Users</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if(isset($roles))
                                @foreach($roles as $role)
                                <tr>
                                    <td>{{ $role->id }}</td>
                                    <td>{{ $role->name }}</td>
                                    <td>
                                        @foreach($role->permissions as $permission)
                                        <span class="badge badge-info">{{ $permission->name }}</span>
                                        @endforeach
                                    </td>
                                    <td>{{ $role->users->count() }}</td>
                                    <td class="text-center py-0 align-middle">
                                        <div class="btn-group btn-group-sm">
                                            <!-- Edit Button -->
                                            <a href="javascript:void(0);"
                                                class="edit_role"
                                                data-id="{{ $role->id }}"
                                                data-name="{{ $role->name }}"
                                                data-permissions="{{ $role->permissions->pluck('name')->join(',') }}"
                                                data-toggle="modal"
                                                data-target="#modal-edit-role">
                                                <i class="fas fa-edit"></i>
                                            </a> &nbsp; &nbsp;
                                            <a href="{{ route('admin.deleteRole', $role->id) }}" class="btn btn-sm btn-danger" onclick="return confirm('Are you sure you want to delete this role?');"><i class="fas fa-trash"></i></a>
                                        </div>
                                    </td>
                                </tr>
                                @endforeach
                                @endif
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th>ID</th>
                                    <th>Name</th>
                                    <th>Permissions</th>
                                    <th>Users</th>
                                    <th>Actions</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-add-role" tabindex="-1" aria-labelledby="modal-add-role-label" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h4 class="modal-title" id="modal-add-role-label">Add New Role</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <form id="add_role_form" action="{{ route('admin.saveRole') }}" method="POST">
                    @csrf
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="role_name">Role Name <span class="text-danger">*</span></label>
                            <input type="text" name="name" id="role_name" class="form-control @error('name') is-invalid @enderror" placeholder="Enter Role Name" required>
                            @error('name')
                            <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label>Assign Permissions</label>
                            <input type="text" class="form-control permission-search mb-3" data-target="#add-permissions-list" placeholder="Search permissions...">
                            <div class="row permission-list" id="add-permissions-list">
                                @foreach($permissions as $permission)
                                <div class="col-md-4 permission-item" data-permission-name="{{ strtolower($permission->name) }}">
                                    <div class="form-check">
                                        <input type="checkbox" name="permissions[]" value="{{ $permission->name }}" class="form-check-input" id="perm_{{ $permission->id }}">
                                        <label class="form-check-label" for="perm_{{ $permission->id }}">{{ ucwords(str_replace(['-', '_'], ' ', $permission->name)) }}</label>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                            @error('permissions')
                            <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>
                    </div>

                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save"></i> Save Role
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-edit-role" tabindex="-1" aria-labelledby="modal-edit-role-label" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h4 class="modal-title" id="modal-edit-role-label">Edit Role</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <form id="edit_role_form" action="{{ route('admin.updateRole', ':id') }}" data-action-template="{{ route('admin.updateRole', ':id') }}" method="POST">
                    @csrf
                    @method('PUT')
                    <div class="modal-body">
                        <!-- Role Name -->
                        <div class="form-group">
                            <label for="role_name">Role Name <span class="text-danger">*</span></label>
                            <input type="text" name="name" id="role_name" @if(isset($role)) value="{{ old('name', $role->name) }}" @endif class="form-control @error('name') is-invalid @enderror" placeholder="Enter Role Name" required>
                            @error('name')
                            <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>

                        <!-- Permissions Checkboxes -->
                        <div class="form-group">
                            <label>Assign Permissions</label>
                            <input type="text" class="form-control permission-search mb-3" data-target="#edit-permissions-list" placeholder="Search permissions...">
                            <div class="row permission-list" id="edit-permissions-list">
                                @foreach($permissions as $permission)
                                <div class="col-md-4 permission-item" data-permission-name="{{ strtolower($permission->name) }}">
                                    <div class="form-check">
                                        <input type="checkbox" name="permissions[]" value="{{ $permission->name }}" class="form-check-input" id="perm_{{ $permission->id }}"
                                            @if(isset($role)) @if(in_array($permission->name, old('permissions', $role->permissions->pluck('name')->toArray()))) checked @endif @endif>
                                        <label class="form-check-label" for="perm_{{ $permission->id }}">{{ ucwords(str_replace(['-', '_'], ' ', $permission->name)) }}</label>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                            @error('permissions')
                            <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>

                    </div>

                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save"></i> Update Role
                        </button>
                    </div>
                </form>


            </div>
        </div>
    </div>


</section>
@stop

@section('js')
<script>
    $(document).ready(function() {
        $('#example').DataTable();
        $('.summernote').summernote();

        $('.permission-search').on('input', function() {
            var query = $(this).val().toLowerCase().trim();
            var target = $($(this).data('target'));

            target.find('.permission-item').each(function() {
                var permissionName = $(this).data('permission-name');
                $(this).toggle(permissionName.indexOf(query) !== -1);
            });
        });

        $('#modal-edit-role').on('show.bs.modal', function(event) {
            var button = $(event.relatedTarget); // Button that triggered the modal
            var roleId = button.data('id');
            var roleName = button.data('name');
            var permissionsData = button.data('permissions');
            var permissions = permissionsData ? permissionsData.split(',') : [];

            var modal = $(this);

            // Set the role name
            modal.find('.modal-body #role_name').val(roleName); // Set role name

            // Uncheck all checkboxes first (to avoid leftovers)
            modal.find('input[name="permissions[]"]').prop('checked', false);

            // Check the appropriate permissions
            permissions.forEach(function(permission) {
                // Ensure that the checkbox corresponding to the permission is checked
                modal.find('input[name="permissions[]"][value="' + permission.trim() + '"]').prop('checked', true);
            });

            // Update the form action URL with the correct role ID
            var form = modal.find('form');
            var formAction = form.data('action-template').replace(':id', roleId);
            modal.find('form').attr('action', formAction);
            modal.find('.permission-search').val('').trigger('input');
        });

        $('#modal-add-role').on('show.bs.modal', function() {
            $(this).find('.permission-search').val('').trigger('input');
        });
    });
</script>
@stop