@extends('layouts.modern')

@section('title', $pageTitle)

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header" style="background-color: var(--card-bg); border-bottom: 1px solid var(--border-color);">
                    <h5 class="mb-0" style="color: var(--text-primary);">
                        <i class="fas fa-key" style="color: var(--primary-color);"></i>
                        {{ $pageTitle }}
                    </h5>
                    <small style="color: var(--text-muted);">Assign permissions to {{ $role->name }} role</small>
                </div>
                <div class="card-body" style="background-color: var(--card-bg);">
                    <form id="rolePermissionsForm" method="POST" action="{{ url('roles/' . $role->id . '/permissions') }}">
                        @csrf
                        
                        <div class="row">
                            <div class="col-md-4">
                                <h6 style="color: var(--text-primary); margin-bottom: 1rem;">Role Information</h6>
                                <div class="role-info p-3 rounded" style="background-color: var(--card-bg); border: 1px solid var(--border-color);">
                                    <p><strong style="color: var(--text-primary);">Name:</strong> <span style="color: var(--text-muted);">{{ $role->name }}</span></p>
                                    @if($role->description)
                                        <p><strong style="color: var(--text-primary);">Description:</strong> <span style="color: var(--text-muted);">{{ $role->description }}</span></p>
                                    @endif
                                    <p><strong style="color: var(--text-primary);">Status:</strong> 
                                        @if($role->is_active)
                                            <span class="badge bg-success">Active</span>
                                        @else
                                            <span class="badge bg-danger">Inactive</span>
                                        @endif
                                    </p>
                                    <p><strong style="color: var(--text-primary);">Users:</strong> <span style="color: var(--text-muted);">{{ $role->users()->count() }}</span></p>
                                </div>
                                
                                <div class="mt-3">
                                    <button type="button" id="selectAll" class="btn btn-sm btn-outline-primary">
                                        <i class="fas fa-check-square"></i> Select All
                                    </button>
                                    <button type="button" id="deselectAll" class="btn btn-sm btn-outline-secondary">
                                        <i class="fas fa-square"></i> Deselect All
                                    </button>
                                </div>
                            </div>
                            
                            <div class="col-md-8">
                                <h6 style="color: var(--text-primary); margin-bottom: 1rem;">Available Permissions</h6>
                                
                                @if($groupedPermissions->isEmpty())
                                    <div class="alert alert-info">
                                        <i class="fas fa-info-circle"></i>
                                        No permissions available. Please create some permissions first.
                                    </div>
                                @else
                                    <div class="permissions-container">
                                        @foreach($groupedPermissions as $module => $permissions)
                                            <div class="module-group mb-4">
                                                <h6 class="module-header p-2 rounded" style="background-color: var(--primary-color); color: white;">
                                                    <i class="fas fa-cube"></i>
                                                    {{ $module ? ucfirst($module) : 'General' }} Permissions
                                                    <small class="float-end">({{ $permissions->count() }})</small>
                                                </h6>
                                                
                                                <div class="permissions-list p-3" style="border: 1px solid var(--border-color); border-top: none; border-radius: 0 0 0.375rem 0.375rem;">
                                                    <div class="row">
                                                        @foreach($permissions as $permission)
                                                            <div class="col-md-6 mb-2">
                                                                <div class="form-check">
                                                                    <input class="form-check-input permission-checkbox" 
                                                                           type="checkbox" 
                                                                           name="permissions[]" 
                                                                           value="{{ $permission->id }}" 
                                                                           id="permission_{{ $permission->id }}"
                                                                           {{ in_array($permission->id, $rolePermissions) ? 'checked' : '' }}>
                                                                    <label class="form-check-label" for="permission_{{ $permission->id }}" style="color: var(--text-primary);">
                                                                        <strong>{{ $permission->name }}</strong>
                                                                        <br><small style="color: var(--text-muted);">{{ $permission->slug }}</small>
                                                                        @if($permission->description)
                                                                            <br><small style="color: var(--text-muted);">{{ $permission->description }}</small>
                                                                        @endif
                                                                    </label>
                                                                </div>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                @endif
                            </div>
                        </div>
                        
                        <div class="mt-4">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i> Update Permissions
                            </button>
                            <a href="{{ url('roles') }}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left"></i> Back to Roles
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.permissions-container {
    max-height: 600px;
    overflow-y: auto;
}

.module-group {
    margin-bottom: 1.5rem;
}

.module-header {
    margin-bottom: 0;
}

.permissions-list {
    background-color: var(--card-bg);
}

.form-check {
    padding: 0.5rem;
    border-radius: 0.25rem;
    transition: background-color 0.2s;
}

.form-check:hover {
    background-color: var(--hover-bg);
}

.role-info p {
    margin-bottom: 0.5rem;
}

.role-info p:last-child {
    margin-bottom: 0;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const selectAllBtn = document.getElementById('selectAll');
    const deselectAllBtn = document.getElementById('deselectAll');
    const checkboxes = document.querySelectorAll('.permission-checkbox');
    
    selectAllBtn.addEventListener('click', function() {
        checkboxes.forEach(checkbox => checkbox.checked = true);
    });
    
    deselectAllBtn.addEventListener('click', function() {
        checkboxes.forEach(checkbox => checkbox.checked = false);
    });
    
    document.getElementById('rolePermissionsForm').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        
        fetch(this.action, {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('Permissions updated successfully!');
                if (window.parent && window.parent.refreshPage) {
                    window.parent.refreshPage();
                }
            } else {
                alert('Error updating permissions. Please try again.');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error updating permissions. Please try again.');
        });
    });
});
</script>
@endsection