@extends('layouts.app')

@section('title', 'Admin Roles & Permissions - VPN Admin')

@section('content')
<!-- main page content body part -->
<div id="main-content">
    <div class="container-fluid">
        <div class="block-header">
            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <h2>Admin Roles & Permissions</h2>
                    <ul class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}"><i class="fa fa-dashboard"></i></a></li>
                        <li class="breadcrumb-item">Admin Roles</li>
                        <li class="breadcrumb-item active">Manage Roles & Permissions</li>
                    </ul>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <div class="d-flex flex-row-reverse">
                        <div class="page_action">
                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addRoleModal">
                                <i class="fa fa-plus"></i> Add New Role
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <strong>Success!</strong> {{ session('success') }}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        @endif

        @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <strong>Error!</strong> {{ session('error') }}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        @endif

        <div class="row clearfix">
            <div class="col-lg-12">
                <div class="card">
                    <div class="header">
                        <h2>Roles & Permissions Management</h2>
                        <small>Select a role and manage its permissions</small>
                    </div>
                    <div class="body">
                        <!-- Role Selection Dropdown -->
                        <div class="form-group">
                            <label for="roleSelect"><strong>Select Role</strong></label>
                            <select class="form-control" id="roleSelect" name="role_id" style="font-size: 16px;">
                                <option value="">-- Select a Role --</option>
                                @foreach($roles as $role)
                                <option value="{{ $role->id }}" data-role-name="{{ $role->name }}">
                                    {{ $role->name }}
                                    @if($role->name === 'Super Admin')
                                        <span class="text-muted">(Protected)</span>
                                    @endif
                                </option>
                                @endforeach
                            </select>
                        </div>

                        <!-- Permissions List (Loaded via AJAX) -->
                        <div id="permissionsContainer" style="display: none;">
                            <hr>
                            <h5>Permissions for: <strong id="selectedRoleName"></strong></h5>
                            <div id="permissionsList" class="mt-3">
                                <!-- Permissions will be loaded here via AJAX -->
                            </div>
                            <div class="mt-4">
                                <button type="button" class="btn btn-primary btn-lg" id="savePermissionsBtn">
                                    <i class="fa fa-save"></i> Save Permissions
                                </button>
                                <button type="button" class="btn btn-danger btn-lg ml-2" id="deleteRoleBtn" style="display: none;">
                                    <i class="fa fa-trash"></i> Delete Role
                                </button>
                            </div>
                        </div>

                        <!-- Loading Indicator -->
                        <div id="loadingIndicator" class="text-center" style="display: none;">
                            <i class="fa fa-spinner fa-spin fa-3x"></i>
                            <p class="mt-2">Loading permissions...</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Add Role Modal -->
<div class="modal fade" id="addRoleModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form action="{{ route('admin-roles.store') }}" method="POST">
                @csrf
                <div class="modal-header">
                    <h4 class="modal-title" id="addRoleModalLabel">Add New Role</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="role_name">Role Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="role_name" name="name" placeholder="Enter role name" required>
                        <small class="form-text text-muted">e.g., Manager, Support Staff, etc.</small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Create Role</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Delete Role Confirmation Modal -->
<div class="modal fade" id="deleteRoleModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form id="deleteRoleForm" method="POST">
                @csrf
                @method('DELETE')
                <div class="modal-header">
                    <h4 class="modal-title">Delete Role</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to delete the role <strong id="deleteRoleName"></strong>?</p>
                    <p class="text-danger"><small>This action cannot be undone. All users with this role will lose their permissions.</small></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-danger">Delete Role</button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
$(document).ready(function() {
    var currentRoleId = null;
    
    // Role selection change
    $('#roleSelect').on('change', function() {
        var roleId = $(this).val();
        var roleName = $(this).find('option:selected').data('role-name');
        
        if (!roleId) {
            $('#permissionsContainer').hide();
            $('#deleteRoleBtn').hide();
            return;
        }
        
        currentRoleId = roleId;
        $('#selectedRoleName').text(roleName);
        $('#permissionsContainer').hide();
        $('#loadingIndicator').show();
        
        // Show/hide delete button based on role
        if (roleName === 'Super Admin') {
            $('#deleteRoleBtn').hide();
        } else {
            $('#deleteRoleBtn').show();
        }
        
        // Load permissions via AJAX
        $.ajax({
            url: '{{ url("admin-roles") }}/' + roleId + '/permissions',
            method: 'GET',
            success: function(response) {
                $('#loadingIndicator').hide();
                renderPermissions(response.permissions, response.rolePermissions);
                $('#permissionsContainer').show();
            },
            error: function(xhr) {
                $('#loadingIndicator').hide();
                alert('Error loading permissions. Please try again.');
            }
        });
    });
    
    // Render permissions list
    function renderPermissions(allPermissions, rolePermissions) {
        var html = '<div class="row">';
        
        // Group permissions by module
        var grouped = {};
        allPermissions.forEach(function(perm) {
            var parts = perm.name.split(' ');
            var action = parts[0];
            var module = parts.slice(1).join(' ');
            
            if (!grouped[module]) {
                grouped[module] = [];
            }
            grouped[module].push({
                id: perm.id,
                name: perm.name,
                action: action
            });
        });
        
        // Render grouped permissions
        Object.keys(grouped).sort().forEach(function(module) {
            html += '<div class="col-md-6 mb-4">';
            html += '<h6 class="text-primary mb-3"><strong>' + capitalizeModule(module) + '</strong></h6>';
            html += '<div class="pl-3">';
            
            grouped[module].forEach(function(perm) {
                var isChecked = rolePermissions.includes(perm.id) ? 'checked' : '';
                html += '<div class="form-check mb-2">';
                html += '<input class="form-check-input permission-checkbox" type="checkbox" ';
                html += 'value="' + perm.id + '" id="perm_' + perm.id + '" ' + isChecked + '>';
                html += '<label class="form-check-label" for="perm_' + perm.id + '">';
                html += perm.name;
                html += '</label>';
                html += '</div>';
            });
            
            html += '</div>';
            html += '</div>';
        });
        
        html += '</div>';
        $('#permissionsList').html(html);
    }
    
    // Capitalize module name
    function capitalizeModule(module) {
        var replacements = {
            'app config': 'App Remote Config',
            'support tickets': 'Support Tickets',
            'admin roles': 'Admin Roles'
        };
        
        if (replacements[module.toLowerCase()]) {
            return replacements[module.toLowerCase()];
        }
        
        return module.split(' ').map(function(word) {
            return word.charAt(0).toUpperCase() + word.slice(1);
        }).join(' ');
    }
    
    // Save permissions
    $('#savePermissionsBtn').on('click', function() {
        if (!currentRoleId) {
            alert('Please select a role first.');
            return;
        }
        
        var permissions = [];
        $('.permission-checkbox:checked').each(function() {
            permissions.push($(this).val());
        });
        
        var btn = $(this);
        btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Saving...');
        
        $.ajax({
            url: '{{ url("admin-roles") }}/' + currentRoleId + '/permissions',
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                permissions: permissions
            },
            success: function(response) {
                btn.prop('disabled', false).html('<i class="fa fa-save"></i> Save Permissions');
                alert('Permissions saved successfully!');
                // Reload permissions to reflect changes
                $('#roleSelect').trigger('change');
            },
            error: function(xhr) {
                btn.prop('disabled', false).html('<i class="fa fa-save"></i> Save Permissions');
                alert('Error saving permissions. Please try again.');
            }
        });
    });
    
    // Delete role
    $('#deleteRoleBtn').on('click', function() {
        if (!currentRoleId) {
            return;
        }
        
        var roleName = $('#roleSelect option:selected').data('role-name');
        
        if (!confirm('Are you sure you want to delete the role "' + roleName + '"?\n\nThis action cannot be undone. All users with this role will lose their permissions.')) {
            return;
        }
        
        $.ajax({
            url: '{{ url("admin-roles") }}/' + currentRoleId,
            method: 'DELETE',
            data: {
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                alert('Role deleted successfully!');
                location.reload();
            },
            error: function(xhr) {
                if (xhr.status === 403 || xhr.responseJSON && xhr.responseJSON.message) {
                    alert(xhr.responseJSON.message);
                } else {
                    alert('Error deleting role. Please try again.');
                }
            }
        });
    });
});
</script>
@endpush
@endsection