@extends('layouts.app')

@section('title', 'Permissions - ISP ERP System')

@section('page-title', 'Permissions Management')

@section('styles')
<style>
    /* Make cards smaller */
    .custom-card {
        margin-bottom: 0.75rem !important;
    }
    
    .custom-card-header {
        padding: 0.5rem 0.75rem !important;
    }
    
    .custom-card-header h3 {
        font-size: 1.15rem !important;
        margin-bottom: 0.25rem !important;
    }
    
    .custom-card-header p {
        font-size: 0.8rem !important;
        margin-bottom: 0 !important;
    }
    
    .custom-card-body {
        padding: 0.5rem 0.75rem !important;
    }
    
    .btn-custom {
        padding: 0.4rem 0.75rem !important;
        font-size: 0.85rem !important;
    }
    
    .btn-custom i {
        font-size: 0.85rem !important;
    }
    
    /* Statistics cards smaller */
    .custom-card .bg-primary.bg-opacity-10,
    .custom-card .bg-success.bg-opacity-10,
    .custom-card .bg-warning.bg-opacity-10,
    .custom-card .bg-info.bg-opacity-10 {
        display: none !important;
    }
    
    /* Make statistics cards smaller */
    .custom-card.h-100 {
        min-height: auto !important;
    }
    
    .custom-card-body.text-center {
        padding: 0.4rem 0.5rem !important;
    }
    
    .custom-card .fa-2x {
        font-size: 1.3rem !important;
    }
    
    .custom-card h2 {
        font-size: 1.15rem !important;
        margin-bottom: 0.15rem !important;
    }
    
    .custom-card p.text-muted {
        font-size: 0.75rem !important;
        margin-bottom: 0 !important;
    }
    
    /* Quick actions smaller */
    .custom-card-body h6 {
        font-size: 0.9rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Card header h4 smaller */
    .custom-card-header h4 {
        font-size: 1rem !important;
    }
    
    /* Table bigger */
    .custom-table {
        font-size: 1rem !important;
    }
    
    .custom-table th {
        padding: 0.65rem 0.75rem !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
    }
    
    .custom-table td {
        padding: 0.65rem 0.75rem !important;
        font-size: 1rem !important;
    }
    
    .custom-table .badge {
        font-size: 0.9rem !important;
        padding: 0.4rem 0.65rem !important;
    }
    
    .custom-table code {
        font-size: 0.9rem !important;
    }
    
    .custom-table small {
        font-size: 0.85rem !important;
    }
    
    .custom-table .btn-sm {
        padding: 0.4rem 0.65rem !important;
        font-size: 0.9rem !important;
    }
    
    /* Header bigger */
    .custom-card-header h4 {
        font-size: 1.2rem !important;
        margin-bottom: 0 !important;
    }
    
    /* Input group bigger */
    .input-group {
        font-size: 1rem !important;
    }
    
    .input-group-text {
        padding: 0.6rem 0.8rem !important;
        font-size: 1rem !important;
    }
    
    .form-control,
    .form-select {
        padding: 0.6rem 0.8rem !important;
        font-size: 1rem !important;
    }
    
    /* Modal bigger */
    .modal-header {
        padding: 0.85rem 1rem !important;
    }
    
    .modal-title {
        font-size: 1.2rem !important;
    }
    
    .modal-body {
        padding: 0.85rem 1rem !important;
        font-size: 1rem !important;
    }
    
    .modal-footer {
        padding: 0.75rem 1rem !important;
    }
    
    .form-label {
        font-size: 1rem !important;
        margin-bottom: 0.35rem !important;
    }
    
    /* Margins smaller - reduce gaps between sections */
    .row.mb-4 {
        margin-bottom: 0.5rem !important;
    }
    
    .row.mb-2 {
        margin-bottom: 0.25rem !important;
    }
    
    .mb-3 {
        margin-bottom: 0.35rem !important;
    }
    
    .mb-2 {
        margin-bottom: 0.2rem !important;
    }
    
    /* Reduce gap between header, cards, and filters */
    .container-fluid > .row {
        margin-bottom: 0.25rem !important;
    }
    
    /* Reduce margin between card columns */
    .col-lg-3.col-md-6.mb-3,
    .col-md-6.mb-3 {
        margin-bottom: 0.25rem !important;
    }
    
    /* Reduce gap for all rows in permissions page */
    .container-fluid .row {
        margin-bottom: 0.25rem !important;
    }
    
    /* Override for last row if needed */
    .container-fluid .row:last-child {
        margin-bottom: 0 !important;
    }
    
    /* Empty state bigger */
    .text-center.py-5 {
        padding: 2rem 0 !important;
    }
    
    /* Container padding */
    .container-fluid {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    
    /* Alert padding */
    .alert {
        padding: 0.5rem 0.75rem !important;
    }
    
    /* Form padding */
    form {
        padding: 0 !important;
    }
    
    .text-center .fa-3x {
        font-size: 2.5rem !important;
    }
    
    .text-center h5 {
        font-size: 1.2rem !important;
    }
    
    .text-center p {
        font-size: 1rem !important;
    }
    
    /* Icon sizes bigger */
    .fa-lg {
        font-size: 1.3rem !important;
    }
    
    /* Gap bigger */
    .gap-2 {
        gap: 0.6rem !important;
    }
    
    /* Pagination bigger */
    .pagination {
        font-size: 1rem !important;
    }
    
    .pagination .page-link {
        padding: 0.5rem 0.8rem !important;
    }
    
    /* Alert bigger */
    .alert {
        padding: 0.75rem 1rem !important;
        font-size: 1rem !important;
    }
    
    /* Empty state bigger */
    .text-center.py-5 {
        padding: 2.5rem 0 !important;
    }
    
    /* Container padding bigger */
    .container-fluid {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    .alert {
        padding: 0.35rem 0.5rem !important;
        font-size: 0.75rem !important;
    }
</style>
@endsection

@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">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h3 class="mb-0">
                                <i class="fas fa-shield-alt me-2"></i>
                                System Permissions
                            </h3>
                            <p class="mb-0 opacity-75">Manage user permissions and access control</p>
                        </div>
                        <div class="d-flex gap-2">
                            <a href="{{ route('permissions.create') }}" class="btn btn-primary btn-custom">
                                <i class="fas fa-plus me-2"></i>Add Permission
                            </a>
                            <a href="{{ route('permissions.tree') }}" class="btn btn-info btn-custom">
                                <i class="fas fa-sitemap me-2"></i>View Tree
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="row mb-2">
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="custom-card h-100">
                <div class="custom-card-body text-center">
                    <div class="d-flex align-items-center justify-content-center mb-2">
                        <i class="fas fa-shield-alt text-primary fa-lg me-2"></i>
                        <div>
                            <h2 class="mb-0 text-primary">{{ $permissions->count() }}</h2>
                            <p class="mb-0 text-muted">Total Permissions</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="custom-card h-100">
                <div class="custom-card-body text-center">
                    <div class="d-flex align-items-center justify-content-center mb-2">
                        <i class="fas fa-check-circle text-success fa-lg me-2"></i>
                        <div>
                            <h2 class="mb-0 text-success">{{ $permissions->where('is_active', true)->count() }}</h2>
                            <p class="mb-0 text-muted">Active Permissions</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="custom-card h-100">
                <div class="custom-card-body text-center">
                    <div class="d-flex align-items-center justify-content-center mb-2">
                        <i class="fas fa-exclamation-triangle text-warning fa-lg me-2"></i>
                        <div>
                            <h2 class="mb-0 text-warning">{{ $permissions->where('is_active', false)->count() }}</h2>
                            <p class="mb-0 text-muted">Inactive Permissions</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="custom-card h-100">
                <div class="custom-card-body text-center">
                    <div class="d-flex align-items-center justify-content-center mb-2">
                        <i class="fas fa-users text-info fa-lg me-2"></i>
                        <div>
                            <h2 class="mb-0 text-info">{{ $permissions->where('parent_id', null)->count() }}</h2>
                            <p class="mb-0 text-muted">Root Permissions</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="row mb-2">
        <div class="col-12">
            <div class="custom-card">
                <div class="custom-card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h6 class="mb-3">
                                <i class="fas fa-user-cog me-2"></i>
                                User Permission Management
                            </h6>
                            <div class="d-flex gap-2">
                                <a href="{{ route('permissions.user-permissions') }}" class="btn btn-outline-primary btn-custom">
                                    <i class="fas fa-users me-2"></i>Manage User Permissions
                                </a>
                                <button class="btn btn-outline-success btn-custom" onclick="showBulkUpdateModal()">
                                    <i class="fas fa-edit me-2"></i>Bulk Update
                                </button>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <h6 class="mb-3">
                                <i class="fas fa-sitemap me-2"></i>
                                Permission Structure
                            </h6>
                            <div class="d-flex gap-2">
                                <a href="{{ route('permissions.tree') }}" class="btn btn-outline-info btn-custom">
                                    <i class="fas fa-tree me-2"></i>View Hierarchy
                                </a>
                                <button class="btn btn-outline-warning btn-custom" onclick="exportPermissions()">
                                    <i class="fas fa-download me-2"></i>Export
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Permissions List -->
    <div class="row">
        <div class="col-12">
            <div class="custom-card">
                <div class="custom-card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h4 class="mb-0">
                            <i class="fas fa-list me-2"></i>
                            All Permissions
                        </h4>
                        <div class="d-flex gap-2">
                            <div class="input-group" style="width: 300px;">
                                <span class="input-group-text bg-transparent border-end-0">
                                    <i class="fas fa-search text-muted"></i>
                                </span>
                                <input type="text" class="form-control border-start-0" id="searchInput" placeholder="Search permissions...">
                            </div>
                            <select class="form-select" id="filterSelect" style="width: 150px;">
                                <option value="all">All</option>
                                <option value="active">Active</option>
                                <option value="inactive">Inactive</option>
                                <option value="root">Root</option>
                                <option value="child">Child</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="custom-card-body">
                    @if($permissions->count() > 0)
                        <div class="table-responsive">
                            <table class="table custom-table">
                                <thead>
                                    <tr>
                                        <th>Menu</th>
                                        <th>Permission Key</th>
                                        <th>Description</th>
                                        <th>Parent</th>
                                        <th>Status</th>
                                        <th>Created</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($permissions as $permission)
                                        <tr>
                                            <td>
                                                @if($permission->menu)
                                                    <span class="badge bg-info custom-badge">
                                                        <i class="fas fa-bars me-1"></i>
                                                        {{ $permission->menu->name }}
                                                    </span>
                                                @else
                                                    <span class="text-muted">
                                                        <i class="fas fa-minus-circle me-1"></i>
                                                        No Menu
                                                    </span>
                                                @endif
                                            </td>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <i class="fas fa-shield-alt text-primary me-2"></i>
                                                    <code class="text-primary">{{ $permission->permission_key }}</code>
                                                </div>
                                            </td>
                                            <td>
                                                <div>
                                                    <strong>{{ $permission->description }}</strong>
                                                    @if($permission->parent_id)
                                                        <br>
                                                        <small class="text-muted">
                                                            <i class="fas fa-level-up-alt me-1"></i>
                                                            Child of: {{ $permission->parent->permission_key ?? 'Unknown' }}
                                                        </small>
                                                    @endif
                                                </div>
                                            </td>
                                            <td>
                                                @if($permission->parent_id)
                                                    <span class="badge bg-info custom-badge">
                                                        <i class="fas fa-level-down-alt me-1"></i>
                                                        Child
                                                    </span>
                                                @else
                                                    <span class="badge bg-primary custom-badge">
                                                        <i class="fas fa-star me-1"></i>
                                                        Root
                                                    </span>
                                                @endif
                                            </td>
                                            <td>
                                                @if($permission->is_active)
                                                    <span class="badge bg-success custom-badge">
                                                        <i class="fas fa-check-circle me-1"></i>
                                                        Active
                                                    </span>
                                                @else
                                                    <span class="badge bg-warning custom-badge">
                                                        <i class="fas fa-exclamation-triangle me-1"></i>
                                                        Inactive
                                                    </span>
                                                @endif
                                            </td>
                                            <td>
                                                <small class="text-muted">
                                                    {{ $permission->created_at->format('M d, Y') }}
                                                </small>
                                            </td>
                                            <td>
                                                <div class="d-flex gap-2">
                                                    <a href="{{ route('permissions.edit', $permission) }}" 
                                                       class="btn btn-sm btn-outline-primary" 
                                                       data-bs-toggle="tooltip" title="Edit Permission">
                                                        <i class="fas fa-edit"></i>
                                                    </a>
                                                    <button class="btn btn-sm btn-outline-danger" 
                                                            onclick="deletePermission({{ $permission->id }})"
                                                            data-bs-toggle="tooltip" title="Delete Permission">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="text-center py-5">
                            <div class="text-muted mb-3">
                                <i class="fas fa-shield-alt fa-3x"></i>
                            </div>
                            <h5 class="text-muted">No permissions found</h5>
                            <p class="text-muted">Start by creating your first permission.</p>
                            <a href="{{ route('permissions.create') }}" class="btn btn-primary btn-custom">
                                <i class="fas fa-plus me-2"></i>Create Permission
                            </a>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Bulk Update Modal -->
<div class="modal fade" id="bulkUpdateModal" tabindex="-1" aria-labelledby="bulkUpdateModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="bulkUpdateModalLabel">Bulk Update User Permissions</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <label for="userSelect" class="form-label">Select User</label>
                        <select class="form-select" id="userSelect">
                            <option value="">Choose a user...</option>
                            <!-- Users will be loaded here -->
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label for="permissionSelect" class="form-label">Select Permission</label>
                        <select class="form-select" id="permissionSelect">
                            <option value="">Choose a permission...</option>
                            <!-- Permissions will be loaded here -->
                        </select>
                    </div>
                </div>
                <div class="row mt-3">
                    <div class="col-12">
                        <label class="form-label">Permission Status</label>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="permissionStatus" id="grantPermission" value="1" checked>
                            <label class="form-check-label" for="grantPermission">
                                Grant Permission
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="permissionStatus" id="revokePermission" value="0">
                            <label class="form-check-label" for="revokePermission">
                                Revoke Permission
                            </label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="updateBulkPermission()">Update Permission</button>
            </div>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title text-danger" id="deleteModalLabel">
                <i class="fas fa-exclamation-triangle me-2"></i>
                Confirm Deletion
            </h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            <p>Are you sure you want to delete this permission?</p>
            <p class="text-muted">This action cannot be undone and may affect user access.</p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
            <form id="deleteForm" method="POST" style="display: inline;">
                @csrf
                @method('DELETE')
                <button type="submit" class="btn btn-danger">Delete Permission</button>
            </form>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    setupEventListeners();
    initializeTooltips();
});

function setupEventListeners() {
    // Search functionality
    document.getElementById('searchInput').addEventListener('input', function(e) {
        filterTable(e.target.value);
    });

    // Filter functionality
    document.getElementById('filterSelect').addEventListener('change', function(e) {
        applyFilter(e.target.value);
    });
}

function filterTable(searchTerm) {
    const rows = document.querySelectorAll('tbody tr');
    const term = searchTerm.toLowerCase();
    
    rows.forEach(row => {
        const text = row.textContent.toLowerCase();
        row.style.display = text.includes(term) ? '' : 'none';
    });
}

function applyFilter(filterType) {
    const rows = document.querySelectorAll('tbody tr');
    
    rows.forEach(row => {
        let show = true;
        
        switch(filterType) {
            case 'active':
                show = row.querySelector('.badge.bg-success') !== null;
                break;
            case 'inactive':
                show = row.querySelector('.badge.bg-warning') !== null;
                break;
            case 'root':
                show = row.querySelector('.badge.bg-primary') !== null;
                break;
            case 'child':
                show = row.querySelector('.badge.bg-info') !== null;
                break;
            default:
                show = true;
        }
        
        row.style.display = show ? '' : 'none';
    });
}

function showBulkUpdateModal() {
    const modal = new bootstrap.Modal(document.getElementById('bulkUpdateModal'));
    modal.show();
    loadUsersAndPermissions();
}

function loadUsersAndPermissions() {
    // Load users
    fetch('{{ route("permissions.user-permissions") }}')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                populateUserSelect(data.users);
            }
        });
    
    // Load permissions
    fetch('{{ route("permissions.index") }}')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                populatePermissionSelect(data.permissions);
            }
        });
}

function populateUserSelect(users) {
    const select = document.getElementById('userSelect');
    select.innerHTML = '<option value="">Choose a user...</option>';
    
    users.forEach(user => {
        const option = document.createElement('option');
        option.value = user.id;
        option.textContent = `${user.name} (${user.email})`;
        select.appendChild(option);
    });
}

function populatePermissionSelect(permissions) {
    const select = document.getElementById('permissionSelect');
    select.innerHTML = '<option value="">Choose a permission...</option>';
    
    permissions.forEach(permission => {
        const option = document.createElement('option');
        option.value = permission.id;
        option.textContent = `${permission.description} (${permission.permission_key})`;
        select.appendChild(option);
    });
}

function updateBulkPermission() {
    const userId = document.getElementById('userSelect').value;
    const permissionId = document.getElementById('permissionSelect').value;
    const status = document.querySelector('input[name="permissionStatus"]:checked').value;
    
    if (!userId || !permissionId) {
        alert('Please select both user and permission');
        return;
    }
    
    const data = {
        user_id: userId,
        permission_id: permissionId,
        is_granted: status
    };
    
    fetch('{{ route("permissions.bulk-update") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('Permission updated successfully');
            bootstrap.Modal.getInstance(document.getElementById('bulkUpdateModal')).hide();
        } else {
            alert('Error updating permission: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error updating permission');
    });
}

function deletePermission(permissionId) {
    const modal = new bootstrap.Modal(document.getElementById('deleteModal'));
    const form = document.getElementById('deleteForm');
    
    form.action = `{{ route('permissions.index') }}/${permissionId}`;
    modal.show();
}

function exportPermissions() {
    // Implement export functionality
    alert('Export functionality will be implemented here');
}

function initializeTooltips() {
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
}
</script>
@endsection