@extends('layouts.app')

@section('title', 'Permission Tree - ISP ERP System')

@section('page-title', 'Permission Tree')

@section('content')
<!-- CSRF Token for API calls -->
<meta name="csrf-token" content="{{ csrf_token() }}">

<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-sitemap me-1"></i>
                                Permission Tree Structure
                            </h4>
                            <small class="text-muted">Hierarchical view of all permissions with their relationships</small>
                        </div>
                        <div class="d-flex gap-1">
                            <a href="{{ route('permissions.create') }}" class="btn btn-success btn-sm">
                                <i class="fas fa-plus me-1"></i>Add Permission
                            </a>
                            <a href="{{ route('permissions.index') }}" class="btn btn-light btn-sm">
                                <i class="fas fa-list me-1"></i>List View
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="row mb-2">
        <div class="col-xl-3 col-md-6 mb-2">
            <div class="custom-card">
                <div class="custom-card-body text-center py-2">
                    <div class="d-flex align-items-center justify-content-center">
                        <div class="bg-primary bg-opacity-10 rounded-circle p-2 me-2">
                            <i class="fas fa-sitemap text-primary fa-lg"></i>
                        </div>
                        <div>
                            <h5 class="mb-0 text-primary" id="totalPermissions">0</h5>
                            <small class="text-muted">Total Permissions</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-xl-3 col-md-6 mb-2">
            <div class="custom-card">
                <div class="custom-card-body text-center py-2">
                    <div class="d-flex align-items-center justify-content-center">
                        <div class="bg-success bg-opacity-10 rounded-circle p-2 me-2">
                            <i class="fas fa-star text-success fa-lg"></i>
                        </div>
                        <div>
                            <h5 class="mb-0 text-success" id="rootPermissions">0</h5>
                            <small class="text-muted">Root Permissions</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-xl-3 col-md-6 mb-2">
            <div class="custom-card">
                <div class="custom-card-body text-center py-2">
                    <div class="d-flex align-items-center justify-content-center">
                        <div class="bg-info bg-opacity-10 rounded-circle p-2 me-2">
                            <i class="fas fa-level-down-alt text-info fa-lg"></i>
                        </div>
                        <div>
                            <h5 class="mb-0 text-info" id="childPermissions">0</h5>
                            <small class="text-muted">Child Permissions</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-xl-3 col-md-6 mb-2">
            <div class="custom-card">
                <div class="custom-card-body text-center py-2">
                    <div class="d-flex align-items-center justify-content-center">
                        <div class="bg-warning bg-opacity-10 rounded-circle p-2 me-2">
                            <i class="fas fa-users text-warning fa-lg"></i>
                        </div>
                        <div>
                            <h5 class="mb-0 text-warning" id="activePermissions">0</h5>
                            <small class="text-muted">Active Permissions</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Search and Filter -->
    <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-6 mb-2">
                            <label for="searchInput" class="form-label mb-1">
                                <i class="fas fa-search me-1"></i>Search Permissions
                            </label>
                            <input type="text" 
                                   class="form-control custom-form-control" 
                                   id="searchInput" 
                                   placeholder="Search by key or description...">
                        </div>
                        <div class="col-md-3 mb-2">
                            <label for="statusFilter" class="form-label mb-1">
                                <i class="fas fa-filter me-1"></i>Status Filter
                            </label>
                            <select class="form-select custom-form-control" id="statusFilter">
                                <option value="">All Status</option>
                                <option value="active">Active Only</option>
                                <option value="inactive">Inactive Only</option>
                            </select>
                        </div>
                        <div class="col-md-3 mb-2">
                            <label for="typeFilter" class="form-label mb-1">
                                <i class="fas fa-sitemap me-1"></i>Type Filter
                            </label>
                            <select class="form-select custom-form-control" id="typeFilter">
                                <option value="">All Types</option>
                                <option value="root">Root Only</option>
                                <option value="child">Child Only</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Permission 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">
                        <h4 class="mb-0">
                            <i class="fas fa-tree me-1"></i>
                            Permission Hierarchy
                        </h4>
                        <div class="d-flex gap-1">
                            <button class="btn btn-outline-primary btn-sm" id="expandAll">
                                <i class="fas fa-expand-alt me-1"></i>Expand All
                            </button>
                            <button class="btn btn-outline-secondary btn-sm" id="collapseAll">
                                <i class="fas fa-compress-alt me-1"></i>Collapse All
                            </button>
                        </div>
                    </div>
                </div>
                <div class="custom-card-body py-2">
                    <div id="permissionTree" class="permission-tree">
                        <!-- Tree will be loaded here -->
                    </div>
                </div>
            </div>
        </div>
    </div>


</div>

<!-- Permission Details Modal -->
<div class="modal fade" id="permissionModal" tabindex="-1" aria-labelledby="permissionModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="permissionModalLabel">Permission Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="permissionModalBody">
                <!-- Permission details will be loaded here -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <a href="#" class="btn btn-primary" id="editPermissionBtn">
                    <i class="fas fa-edit me-2"></i>Edit Permission
                </a>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize with data passed from controller
    const permissionsData = @json($permissions);
    renderPermissionTree(permissionsData);
    updateStatistics(permissionsData);
    initializeEventListeners();
});

function initializeEventListeners() {
    // Search functionality
    document.getElementById('searchInput').addEventListener('input', function(e) {
        filterTree(e.target.value);
    });
    
    // Status filter
    document.getElementById('statusFilter').addEventListener('change', function(e) {
        filterTreeByStatus(e.target.value);
    });
    
    // Type filter
    document.getElementById('typeFilter').addEventListener('change', function(e) {
        filterTreeByType(e.target.value);
    });
    
    // Expand/Collapse all
    document.getElementById('expandAll').addEventListener('click', expandAllNodes);
    document.getElementById('collapseAll').addEventListener('click', collapseAllNodes);
}



function renderPermissionTree(permissions) {
    const treeContainer = document.getElementById('permissionTree');
    treeContainer.innerHTML = '';
    
    if (permissions.length === 0) {
        treeContainer.innerHTML = '<div class="alert alert-info">No permissions found.</div>';
        return;
    }
    
    permissions.forEach(permission => {
        const permissionCard = createPermissionCard(permission);
        treeContainer.appendChild(permissionCard);
    });
}

function createPermissionCard(permission) {
    const div = document.createElement('div');
    div.className = 'permission-item mb-2';
    div.setAttribute('data-permission-id', permission.id);
    div.setAttribute('data-permission-key', permission.permission_key);
    div.setAttribute('data-permission-status', permission.is_active ? 'active' : 'inactive');
    div.setAttribute('data-permission-type', permission.parent_id ? 'child' : 'root');
    
    // Create header div
    const header = document.createElement('div');
    header.className = 'permission-header d-flex justify-content-between align-items-center p-2 border rounded';
    header.style.backgroundColor = '#f8f9fa';
    
    // Create left section with icon, title and description
    const leftSection = document.createElement('div');
    leftSection.className = 'd-flex align-items-center';
    
    const icon = document.createElement('i');
    icon.className = `fas fa-${permission.children && permission.children.length > 0 ? 'folder' : 'file'} me-2`;
    icon.style.color = permission.children && permission.children.length > 0 ? '#ffc107' : '#6c757d';
    
    const title = document.createElement('span');
    title.className = 'fw-bold text-dark';
    title.textContent = permission.permission_key;
    
    const description = document.createElement('span');
    description.className = 'text-muted ms-2';
    description.textContent = `(${permission.description})`;
    
    leftSection.appendChild(icon);
    leftSection.appendChild(title);
    leftSection.appendChild(description);
    
    // Create right section with action buttons
    const rightSection = document.createElement('div');
    rightSection.className = 'd-flex gap-1';
    
    const buttons = [
        { class: 'btn-success', icon: 'fa-check', onclick: `togglePermission('${permission.id}', true)`, title: 'Grant' },
        { class: 'btn-danger', icon: 'fa-times', onclick: `togglePermission('${permission.id}', false)`, title: 'Deny' },
        { class: 'btn-info', icon: 'fa-eye', onclick: `viewPermission('${permission.id}')`, title: 'View' },
        { class: 'btn-warning', icon: 'fa-edit', onclick: `editPermission('${permission.id}')`, title: 'Edit' },
        { class: 'btn-secondary', icon: 'fa-trash', onclick: `deletePermission('${permission.id}')`, title: 'Delete' }
    ];
    
    buttons.forEach(btn => {
        const button = document.createElement('button');
        button.className = `btn ${btn.class} btn-sm`;
        button.onclick = btn.onclick;
        button.title = btn.title;
        button.innerHTML = `<i class="fas ${btn.icon}"></i>`;
        rightSection.appendChild(button);
    });
    
    // Assemble header
    header.appendChild(leftSection);
    header.appendChild(rightSection);
    div.appendChild(header);
    
    // Add children if they exist
    if (permission.children && permission.children.length > 0) {
        const childrenContainer = document.createElement('div');
        childrenContainer.className = 'children-container ms-4 mt-2';
        childrenContainer.style.borderLeft = '2px solid #dee2e6';
        childrenContainer.style.paddingLeft = '15px';
        
        permission.children.forEach(child => {
            const childDiv = createPermissionCard(child);
            childrenContainer.appendChild(childDiv);
        });
        
        div.appendChild(childrenContainer);
    }
    
    return div;
}

function renderChildren(children) {
    let html = '';
    
    children.forEach(child => {
        const hasGrandchildren = child.children && child.children.length > 0;
        
        html += `
            <div class="child-permission">
                <div class="permission-header d-flex justify-content-between align-items-center p-2 border rounded" style="background-color: #f8f9fa;">
                    <div class="d-flex align-items-center">
                        <i class="fas fa-${hasGrandchildren ? 'folder' : 'file'} me-2" style="color: ${hasGrandchildren ? '#ffc107' : '#6c757d'};"></i>
                        <span class="fw-bold text-dark">${child.permission_key}</span>
                        <span class="text-muted ms-2">(${child.description})</span>
                    </div>
                    <div class="d-flex gap-1">
                        <button class="btn btn-success btn-sm" onclick="togglePermission('${child.id}', true)" title="Grant">
                            <i class="fas fa-check"></i>
                        </button>
                        <button class="btn btn-danger btn-sm" onclick="togglePermission('${child.id}', false)" title="Deny">
                            <i class="fas fa-times"></i>
                        </button>
                        <button class="btn btn-info btn-sm" onclick="viewPermission('${child.id}')" title="View">
                            <i class="fas fa-eye"></i>
                        </button>
                        <button class="btn btn-warning btn-sm" onclick="editPermission('${child.id}')" title="Edit">
                            <i class="fas fa-edit"></i>
                        </button>
                        <button class="btn btn-secondary btn-sm" onclick="deletePermission('${child.id}')" title="Delete">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                </div>
                
                ${hasGrandchildren ? 
                    `<div class="grandchildren-container ms-4 mt-2" style="border-left: 2px solid #dee2e6; padding-left: 15px;">
                        ${renderGrandchildren(child.children)}
                    </div>` : ''
                }
            </div>
        `;
    });
    
    return html;
}

function renderGrandchildren(grandchildren) {
    let html = '';
    
    grandchildren.forEach(grandchild => {
        html += `
            <div class="grandchild-permission">
                <div class="permission-header d-flex justify-content-between align-items-center p-2 border rounded" style="background-color: #f8f9fa;">
                    <div class="d-flex align-items-center">
                        <i class="fas fa-file me-2" style="color: #6c757d;"></i>
                        <span class="fw-bold text-dark">${grandchild.permission_key}</span>
                        <span class="text-muted ms-2">(${grandchild.description})</span>
                    </div>
                    <div class="d-flex gap-1">
                        <button class="btn btn-success btn-sm" onclick="togglePermission('${grandchild.id}', true)" title="Grant">
                            <i class="fas fa-check"></i>
                        </button>
                        <button class="btn btn-danger btn-sm" onclick="togglePermission('${grandchild.id}', false)" title="Deny">
                            <i class="fas fa-times"></i>
                        </button>
                        <button class="btn btn-info btn-sm" onclick="viewPermission('${grandchild.id}')" title="View">
                            <i class="fas fa-eye"></i>
                        </button>
                        <button class="btn btn-warning btn-sm" onclick="editPermission('${grandchild.id}')" title="Edit">
                            <i class="fas fa-edit"></i>
                        </button>
                        <button class="btn btn-secondary btn-sm" onclick="deletePermission('${grandchild.id}')" title="Delete">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                </div>
            </div>
        `;
    });
    
    return html;
}

function updateStatistics(data) {
    let total = 0;
    let root = 0;
    let child = 0;
    let active = 0;
    
    function countPermissions(permissions) {
        permissions.forEach(permission => {
            total++;
            if (permission.parent_id) {
                child++;
            } else {
                root++;
            }
            if (permission.is_active) {
                active++;
            }
            if (permission.children && permission.children.length > 0) {
                countPermissions(permission.children);
            }
        });
    }
    
    countPermissions(data);
    
    document.getElementById('totalPermissions').textContent = total;
    document.getElementById('rootPermissions').textContent = root;
    document.getElementById('childPermissions').textContent = child;
    document.getElementById('activePermissions').textContent = active;
}

function filterTree(searchTerm) {
    const cards = document.querySelectorAll('.permission-item');
    const searchLower = searchTerm.toLowerCase();
    
    cards.forEach(card => {
        const key = card.getAttribute('data-permission-key').toLowerCase();
        const description = card.querySelector('.permission-header span:last-child').textContent.toLowerCase();
        
        if (key.includes(searchLower) || description.includes(searchLower)) {
            card.style.display = 'block';
        } else {
            card.style.display = 'none';
        }
    });
}

function filterTreeByStatus(status) {
    const cards = document.querySelectorAll('.permission-item');
    
    cards.forEach(card => {
        const cardStatus = card.getAttribute('data-permission-status');
        
        if (status === '' || cardStatus === status) {
            card.style.display = 'block';
        } else {
            card.style.display = 'none';
        }
    });
}

function filterTreeByType(type) {
    const cards = document.querySelectorAll('.permission-item');
    
    cards.forEach(card => {
        const cardType = card.getAttribute('data-permission-type');
        
        if (type === '' || cardType === type) {
            card.style.display = 'block';
        } else {
            card.style.display = 'none';
        }
    });
}

function expandAllNodes() {
    // Implementation for expanding all nodes
    console.log('Expand all nodes');
}

function collapseAllNodes() {
    // Implementation for collapsing all nodes
    console.log('Collapse all nodes');
}

function viewPermission(permissionId) {
    // Find permission data from the already loaded data
    const permissionsData = @json($permissions);
    const permission = findPermissionById(permissionsData, permissionId);
    
    if (permission) {
        document.getElementById('permissionModalLabel').textContent = `Permission: ${permission.permission_key}`;
        document.getElementById('permissionModalBody').innerHTML = `
            <div class="row">
                <div class="col-md-6">
                    <h6>Permission Key</h6>
                    <p><code class="text-primary">${permission.permission_key}</code></p>
                    
                    <h6>Description</h6>
                    <p>${permission.description}</p>
                    
                    <h6>Status</h6>
                    <span class="badge bg-${permission.is_active ? 'success' : 'warning'}">
                        ${permission.is_active ? 'Active' : 'Inactive'}
                    </span>
                </div>
                <div class="col-md-6">
                    <h6>Parent</h6>
                    <p>${permission.parent_id ? 'Has Parent' : 'No Parent (Root)'}</p>
                    
                    <h6>Children</h6>
                    <p>${permission.children ? permission.children.length : 0} child permissions</p>
                    
                    <h6>Created</h6>
                    <p>${new Date(permission.created_at).toLocaleDateString()}</p>
                </div>
            </div>
        `;
        document.getElementById('editPermissionBtn').href = `/permissions/${permissionId}/edit`;
        
        const modal = new bootstrap.Modal(document.getElementById('permissionModal'));
        modal.show();
    }
}

function findPermissionById(permissions, id) {
    for (let permission of permissions) {
        if (permission.id === id) {
            return permission;
        }
        if (permission.children) {
            for (let child of permission.children) {
                if (child.id === id) {
                    return child;
                }
                if (child.children) {
                    for (let grandchild of child.children) {
                        if (grandchild.id === id) {
                            return grandchild;
                        }
                    }
                }
            }
        }
    }
    return null;
}

function addChildPermission(parentId) {
    window.location.href = `/permissions/create?parent_id=${parentId}`;
}
</script>

<style>
.permission-tree {
    max-height: 800px;
    overflow-y: auto;
}

.permission-item {
    transition: all 0.3s ease;
    margin-bottom: 0.8rem;
}

.permission-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.permission-header {
    background: #f8f9fa !important;
    color: #212529 !important;
    border-bottom: 1px solid #e9ecef;
}

.permission-header .btn {
    border-radius: 50%;
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.permission-header .btn i {
    font-size: 0.8rem;
}

.children-container {
    border-left: 2px solid #e9ecef;
    padding-left: 12px;
    margin-left: 12px;
}

.grandchildren-container {
    border-left: 1px solid #dee2e6;
    padding-left: 8px;
    margin-left: 8px;
}

.child-permission {
    margin-bottom: 0.5rem;
}

.grandchild-permission {
    margin-bottom: 0.3rem;
}

@media (max-width: 768px) {
    .children-grid,
    .grandchildren-grid {
        grid-template-columns: 1fr;
    }
    
    .children-container,
    .grandchildren-container {
        margin-left: 10px;
        padding-left: 15px;
    }
}
</style>
@endsection