@extends('layouts.app')

@section('title', 'Group Permissions')

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="row mb-2">
        <div class="col-12">
            <div class="custom-card">
                <div class="custom-card-header py-2">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h4 class="mb-0">
                                <i class="fas fa-shield-alt me-1"></i>
                                Group Permissions: {{ $group->name }}
                            </h4>
                            <small class="text-muted">Manage permissions for this group</small>
                        </div>
                        <div class="d-flex gap-1">
                            <button class="btn btn-success btn-sm" onclick="savePermissions()">
                                <i class="fas fa-save me-1"></i>Save Changes
                            </button>
                            <a href="{{ route('groups.show', $group) }}" class="btn btn-secondary btn-sm">
                                <i class="fas fa-arrow-left me-1"></i>Back to Group
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Group Info -->
    <div class="row mb-2">
        <div class="col-12">
            <div class="custom-card">
                <div class="custom-card-body py-2">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="d-flex align-items-center">
                                <div class="rounded-circle me-2" 
                                     style="width: 30px; height: 30px; background-color: {{ $group->color }};">
                                    <i class="fas fa-layer-group text-white d-flex align-items-center justify-content-center h-100"></i>
                                </div>
                                <div>
                                    <strong>{{ $group->name }}</strong><br>
                                    <small class="text-muted">{{ $group->slug }}</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center">
                                <h5 class="mb-0 text-primary">{{ $group->users->count() }}</h5>
                                <small class="text-muted">Members</small>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center">
                                <h5 class="mb-0 text-success">{{ $group->groupPermissions->where('is_granted', true)->count() }}</h5>
                                <small class="text-muted">Granted Permissions</small>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center">
                                <h5 class="mb-0 text-danger">{{ $group->groupPermissions->where('is_granted', false)->count() }}</h5>
                                <small class="text-muted">Denied Permissions</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Permissions Tree -->
    <div class="row">
        <div class="col-12">
            <div class="custom-card">
                <div class="custom-card-header py-2">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">
                            <i class="fas fa-sitemap me-1"></i>
                            Permissions Tree
                        </h5>
                        <div class="btn-group btn-group-sm" role="group">
                            <button type="button" class="btn btn-outline-success btn-sm" onclick="grantAllPermissions()">
                                <i class="fas fa-check me-1"></i>Grant All
                            </button>
                            <button type="button" class="btn btn-outline-danger btn-sm" onclick="denyAllPermissions()">
                                <i class="fas fa-times me-1"></i>Deny All
                            </button>
                            <button type="button" class="btn btn-outline-secondary btn-sm" onclick="clearAllPermissions()">
                                <i class="fas fa-eraser me-1"></i>Clear All
                            </button>
                        </div>
                    </div>
                </div>
                <div class="custom-card-body">
                    <div id="permissionsTree">
                        <!-- Permissions will be loaded here -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Loading Spinner -->
<div id="loadingSpinner" class="text-center py-4" style="display: none;">
    <div class="spinner-border text-primary" role="status">
        <span class="visually-hidden">Loading...</span>
    </div>
    <p class="mt-2 text-muted">Loading permissions...</p>
</div>
@endsection

@section('scripts')
<script>
let permissionsData = @json($permissions);
let groupPermissions = @json($groupPermissions);

document.addEventListener('DOMContentLoaded', function() {
    renderPermissionsTree();
});

function renderPermissionsTree() {
    const container = document.getElementById('permissionsTree');
    container.innerHTML = '';
    
    permissionsData.forEach(permission => {
        if (!permission.parent_id) {
            const permissionElement = createPermissionElement(permission, 0);
            container.appendChild(permissionElement);
        }
    });
}

function createPermissionElement(permission, level) {
    const div = document.createElement('div');
    div.className = 'permission-item mb-2';
    div.style.marginLeft = level * 20 + 'px';
    
    const isGranted = groupPermissions[permission.id];
    const hasChildren = permission.children && permission.children.length > 0;
    
    div.innerHTML = `
        <div class="border rounded p-2 ${hasChildren ? 'bg-light' : ''}">
            <div class="d-flex justify-content-between align-items-start">
                <div class="flex-grow-1">
                    <div class="d-flex align-items-center mb-1">
                        <i class="fas fa-${hasChildren ? 'folder' : 'file'} me-2 text-${hasChildren ? 'warning' : 'info'}"></i>
                        <strong>${permission.permission_key}</strong>
                        ${hasChildren ? `<span class="badge bg-secondary ms-2">${permission.children.length} children</span>` : ''}
                    </div>
                    <small class="text-muted d-block">${permission.description || 'No description'}</small>
                </div>
                <div class="btn-group btn-group-sm" role="group">
                    <input type="radio" 
                           class="btn-check" 
                           name="permission_${permission.id}" 
                           id="permission_${permission.id}_grant" 
                           value="1"
                           ${isGranted === true ? 'checked' : ''}
                           autocomplete="off">
                    <label class="btn btn-outline-success btn-sm" for="permission_${permission.id}_grant">
                        <i class="fas fa-check"></i>
                    </label>

                    <input type="radio" 
                           class="btn-check" 
                           name="permission_${permission.id}" 
                           id="permission_${permission.id}_deny" 
                           value="0"
                           ${isGranted === false ? 'checked' : ''}
                           autocomplete="off">
                    <label class="btn btn-outline-danger btn-sm" for="permission_${permission.id}_deny">
                        <i class="fas fa-times"></i>
                    </label>
                </div>
            </div>
        </div>
    `;
    
    // Add children if they exist
    if (hasChildren) {
        permission.children.forEach(child => {
            const childElement = createPermissionElement(child, level + 1);
            div.appendChild(childElement);
        });
    }
    
    return div;
}

function grantAllPermissions() {
    document.querySelectorAll('input[name^="permission_"][value="1"]').forEach(radio => {
        radio.checked = true;
    });
}

function denyAllPermissions() {
    document.querySelectorAll('input[name^="permission_"][value="0"]').forEach(radio => {
        radio.checked = true;
    });
}

function clearAllPermissions() {
    document.querySelectorAll('input[name^="permission_"]').forEach(radio => {
        radio.checked = false;
    });
}

function savePermissions() {
    const permissions = {};
    let hasChanges = false;
    
    // Collect all permission values
    document.querySelectorAll('input[name^="permission_"]').forEach(radio => {
        if (radio.checked) {
            const permissionId = radio.name.replace('permission_', '');
            const isGranted = radio.value === '1';
            
            if (groupPermissions[permissionId] !== isGranted) {
                hasChanges = true;
            }
            
            permissions[permissionId] = isGranted;
        }
    });
    
    if (!hasChanges) {
        showAlert('info', 'No changes to save');
        return;
    }
    
    // Show loading
    document.getElementById('loadingSpinner').style.display = 'block';
    
    // Send to server
    fetch(`/groups/{{ $group->id }}/update-permissions`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ permissions: permissions })
    })
    .then(response => response.json())
    .then(data => {
        document.getElementById('loadingSpinner').style.display = 'none';
        
        if (data.success) {
            showAlert('success', data.message);
            // Update local data
            groupPermissions = { ...groupPermissions, ...permissions };
        } else {
            showAlert('error', data.message);
        }
    })
    .catch(error => {
        document.getElementById('loadingSpinner').style.display = 'none';
        console.error('Error:', error);
        showAlert('error', 'Error saving permissions');
    });
}

function showAlert(type, message) {
    const alertDiv = document.createElement('div');
    alertDiv.className = `alert alert-${type === 'success' ? 'success' : (type === 'error' ? 'danger' : 'info')} alert-dismissible fade show`;
    alertDiv.innerHTML = `
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;
    
    document.querySelector('.container-fluid').insertBefore(alertDiv, document.querySelector('.container-fluid').firstChild);
    
    setTimeout(() => {
        alertDiv.remove();
    }, 5000);
}
</script>
@endsection