@extends('layouts.admin')

@section('header')
<div class="flex items-center justify-between">
    <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Edit Permission</h1>
    <a href="{{ route('admin.roles.index', ['tab' => 'permissions']) }}" class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded">
        Back to Permissions
    </a>
</div>
@endsection

@section('content')
<div class="max-w-2xl mx-auto">
    <x-ui.layout.card>
        <form method="POST" action="{{ route('admin.permissions.update', $permission) }}" class="space-y-6">
            @csrf
            @method('PUT')
            
            <!-- Permission Name -->
            <div>
                <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Permission Name</label>
                <input type="text" 
                       name="name" 
                       id="name" 
                       value="{{ old('name', $permission->name) }}"
                       class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
                       required>
                @error('name')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <!-- Permission Slug -->
            <div>
                <label for="slug" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Permission Slug</label>
                <input type="text" 
                       name="slug" 
                       id="slug" 
                       value="{{ old('slug', $permission->slug) }}"
                       class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
                       required>
                <p class="mt-1 text-sm text-gray-500">Used for internal identification (e.g., view-users, create-clients)</p>
                @error('slug')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <!-- Description -->
            <div>
                <label for="description" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Description</label>
                <textarea name="description" 
                          id="description" 
                          rows="3"
                          class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
                          placeholder="Describe what this permission allows users to do">{{ old('description', $permission->description) }}</textarea>
                @error('description')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <!-- Resource Type -->
            <div>
                <label for="resource_type" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Resource Type</label>
                <select name="resource_type" 
                        id="resource_type"
                        class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                    <option value="">Select Resource Type</option>
                    @foreach($resourceTypes as $key => $label)
                        <option value="{{ $key }}" {{ old('resource_type', $permission->resource_type) == $key ? 'selected' : '' }}>
                            {{ $label }}
                        </option>
                    @endforeach
                </select>
                @error('resource_type')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <!-- Permission Level -->
            <div>
                <label for="permission_level" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Permission Level</label>
                <select name="permission_level" 
                        id="permission_level"
                        class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                    <option value="">Select Permission Level</option>
                    <option value="view" {{ old('permission_level', $permission->permission_level) == 'view' ? 'selected' : '' }}>View</option>
                    <option value="create" {{ old('permission_level', $permission->permission_level) == 'create' ? 'selected' : '' }}>Create</option>
                    <option value="edit" {{ old('permission_level', $permission->permission_level) == 'edit' ? 'selected' : '' }}>Edit</option>
                    <option value="delete" {{ old('permission_level', $permission->permission_level) == 'delete' ? 'selected' : '' }}>Delete</option>
                    <option value="manage" {{ old('permission_level', $permission->permission_level) == 'manage' ? 'selected' : '' }}>Manage</option>
                </select>
                @error('permission_level')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <!-- Submit Buttons -->
            <div class="flex items-center justify-end space-x-4">
                <a href="{{ route('admin.roles.index', ['tab' => 'permissions']) }}" 
                   class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded">
                    Cancel
                </a>
                <button type="submit" 
                        class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                    Update Permission
                </button>
            </div>
        </form>
    </x-ui.layout.card>
</div>

<script>
// Auto-generate slug from name
document.getElementById('name').addEventListener('input', function() {
    const name = this.value;
    const slug = name.toLowerCase()
                    .replace(/[^a-z0-9\s-]/g, '')
                    .replace(/\s+/g, '-')
                    .replace(/-+/g, '-')
                    .trim('-');
    document.getElementById('slug').value = slug;
});

// Auto-generate permission name based on selections
function updatePermissionName() {
    const resourceType = document.getElementById('resource_type').value;
    const permissionLevel = document.getElementById('permission_level').value;
    
    if (resourceType && permissionLevel) {
        const resourceLabel = document.getElementById('resource_type').selectedOptions[0].text;
        const levelLabel = permissionLevel.charAt(0).toUpperCase() + permissionLevel.slice(1);
        
        const permissionName = `${levelLabel} ${resourceLabel}`;
        document.getElementById('name').value = permissionName;
        
        // Auto-generate slug
        const slug = `${permissionLevel}-${resourceType}`;
        document.getElementById('slug').value = slug;
    }
}

document.getElementById('resource_type').addEventListener('change', updatePermissionName);
document.getElementById('permission_level').addEventListener('change', updatePermissionName);
</script>
@endsection