@extends('layouts.admin')

@section('title', 'Create Permission')

@section('content')
<div class="container mx-auto px-4 py-6">
    <div class="flex justify-between items-center mb-6">
        <div>
            <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Create Permission</h1>
            <p class="text-gray-600 dark:text-gray-400 mt-2">Add a new permission to the system</p>
        </div>
        <div class="flex space-x-3">
            <a href="{{ route('admin.permissions.index') }}" 
               class="inline-flex items-center px-4 py-2 bg-gray-500 hover:bg-gray-600 text-white font-medium rounded-lg transition-colors duration-200">
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                </svg>
                Back to Permissions
            </a>
        </div>
    </div>

    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
        <form action="{{ route('admin.permissions.store') }}" method="POST" class="p-6">
            @csrf
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Permission Name -->
                <div class="md:col-span-2">
                    <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Permission Name *
                    </label>
                    <input type="text" 
                           id="name" 
                           name="name" 
                           value="{{ old('name') }}"
                           placeholder="e.g., manage-users, view-analytics"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                           required>
                    @error('name')
                        <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                    @enderror
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                        Use lowercase letters, numbers, and hyphens only
                    </p>
                </div>

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

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

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

            <!-- Permission Examples -->
            <div class="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
                <h3 class="text-sm font-medium text-blue-800 dark:text-blue-200 mb-2">Permission Examples:</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-2 text-sm text-blue-700 dark:text-blue-300">
                    <div>• <strong>view-users</strong> - View user listings</div>
                    <div>• <strong>manage-clients</strong> - Full client management</div>
                    <div>• <strong>create-events</strong> - Create new events</div>
                    <div>• <strong>edit-assessments</strong> - Modify assessments</div>
                    <div>• <strong>delete-modules</strong> - Remove modules</div>
                    <div>• <strong>view-analytics</strong> - Access analytics</div>
                </div>
            </div>

            <!-- Form Actions -->
            <div class="flex justify-end space-x-3 mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
                <a href="{{ route('admin.permissions.index') }}" 
                   class="px-4 py-2 text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-lg transition-colors duration-200">
                    Cancel
                </a>
                <button type="submit" 
                        class="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors duration-200">
                    Create Permission
                </button>
            </div>
        </form>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const nameInput = document.getElementById('name');
    const resourceSelect = document.getElementById('resource_type');
    const levelSelect = document.getElementById('level');
    
    // Auto-generate permission name based on selections
    function updatePermissionName() {
        const resource = resourceSelect.value;
        const level = levelSelect.value;
        
        if (resource && level && !nameInput.value) {
            nameInput.value = level + '-' + resource;
        }
    }
    
    resourceSelect.addEventListener('change', updatePermissionName);
    levelSelect.addEventListener('change', updatePermissionName);
    
    // Validate permission name format
    nameInput.addEventListener('input', function() {
        const value = this.value;
        const validFormat = /^[a-z0-9-]+$/.test(value);
        
        if (value && !validFormat) {
            this.setCustomValidity('Permission name must contain only lowercase letters, numbers, and hyphens');
        } else {
            this.setCustomValidity('');
        }
    });
});
</script>
@endsection