@extends('layouts.app')

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

@section('page-title', 'Create New Permission')

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="row mb-4">
        <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-plus-circle me-2"></i>
                                Create New Permission
                            </h3>
                            <p class="mb-0 opacity-75">Add a new permission to the system</p>
                        </div>
                        <div class="d-flex gap-2">
                            <a href="{{ route('permissions.index') }}" class="btn btn-light btn-custom">
                                <i class="fas fa-arrow-left me-2"></i>Back to Permissions
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Permission Form -->
    <div class="row">
        <div class="col-lg-8">
            <div class="custom-card">
                <div class="custom-card-header">
                    <h4 class="mb-0">
                        <i class="fas fa-edit me-2"></i>
                        Permission Details
                    </h4>
                </div>
                <div class="custom-card-body">
                    <form action="{{ route('permissions.store') }}" method="POST">
                        @csrf
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="permission_key" class="form-label">
                                    <i class="fas fa-key me-1"></i>
                                    Permission Key <span class="text-danger">*</span>
                                </label>
                                <input type="text" 
                                       class="form-control custom-form-control @error('permission_key') is-invalid @enderror" 
                                       id="permission_key" 
                                       name="permission_key" 
                                       value="{{ old('permission_key') }}" 
                                       placeholder="e.g., users.create"
                                       required>
                                @error('permission_key')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="form-text text-muted">
                                    Use dot notation (e.g., users.create, users.edit, users.delete)
                                </small>
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <label for="menu_id" class="form-label">
                                    <i class="fas fa-bars me-1"></i>
                                    Menu Select
                                </label>
                                <select class="form-select custom-form-control @error('menu_id') is-invalid @enderror" 
                                        id="menu_id" 
                                        name="menu_id">
                                    <option value="">No Menu</option>
                                    @foreach($menus as $menu)
                                        <option value="{{ $menu->id }}" 
                                                {{ old('menu_id') == $menu->id ? 'selected' : '' }}>
                                            {{ $menu->name }}
                                            @if($menu->route)
                                                ({{ $menu->route }})
                                            @endif
                                        </option>
                                        @if($menu->children && $menu->children->count() > 0)
                                            @foreach($menu->children as $child)
                                                <option value="{{ $child->id }}" 
                                                        {{ old('menu_id') == $child->id ? 'selected' : '' }}>
                                                    &nbsp;&nbsp;&nbsp;└─ {{ $child->name }}
                                                    @if($child->route)
                                                        ({{ $child->route }})
                                                    @endif
                                                </option>
                                            @endforeach
                                        @endif
                                    @endforeach
                                </select>
                                @error('menu_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="form-text text-muted">
                                    Select a menu to associate with this permission. Type to search.
                                </small>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="parent_id" class="form-label">
                                    <i class="fas fa-sitemap me-1"></i>
                                    Parent Permission
                                </label>
                                <select class="form-select custom-form-control @error('parent_id') is-invalid @enderror" 
                                        id="parent_id" 
                                        name="parent_id">
                                    <option value="">No Parent (Root Permission)</option>
                                    @foreach($parentPermissions as $permission)
                                        <option value="{{ $permission->id }}" 
                                                {{ old('parent_id') == $permission->id ? 'selected' : '' }}>
                                            {{ $permission->description }} ({{ $permission->permission_key }})
                                        </option>
                                    @endforeach
                                </select>
                                @error('parent_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="form-text text-muted">
                                    Leave empty to create a root permission. Type to search.
                                </small>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label for="description" class="form-label">
                                <i class="fas fa-align-left me-1"></i>
                                Description <span class="text-danger">*</span>
                            </label>
                            <textarea class="form-control custom-form-control @error('description') is-invalid @enderror" 
                                      id="description" 
                                      name="description" 
                                      rows="3" 
                                      placeholder="Describe what this permission allows users to do"
                                      required>{{ old('description') }}</textarea>
                            @error('description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="mb-3">
                            <div class="form-check">
                                <input class="form-check-input" 
                                       type="checkbox" 
                                       id="is_active" 
                                       name="is_active" 
                                       value="1" 
                                       {{ old('is_active', true) ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_active">
                                    <i class="fas fa-check-circle me-1"></i>
                                    Active Permission
                                </label>
                            </div>
                            <small class="form-text text-muted">
                                Inactive permissions cannot be assigned to users
                            </small>
                        </div>
                        
                        <div class="d-flex gap-2">
                            <button type="submit" class="btn btn-primary btn-custom">
                                <i class="fas fa-save me-2"></i>Create Permission
                            </button>
                            <a href="{{ route('permissions.index') }}" class="btn btn-light btn-custom">
                                <i class="fas fa-times me-2"></i>Cancel
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        
        <div class="col-lg-4">
            <!-- Naming Convention Guide -->
            <div class="custom-card mb-4">
                <div class="custom-card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-info-circle me-2"></i>
                        Naming Convention
                    </h5>
                </div>
                <div class="custom-card-body">
                    <div class="mb-3">
                        <h6 class="text-primary">Format: module.action</h6>
                        <p class="text-muted small">Use lowercase letters and dots to separate words</p>
                    </div>
                    
                    <div class="mb-3">
                        <h6 class="text-success">Examples:</h6>
                        <ul class="list-unstyled small">
                            <li><code>users.create</code> - Create users</li>
                            <li><code>users.edit</code> - Edit users</li>
                            <li><code>users.delete</code> - Delete users</li>
                            <li><code>clients.view</code> - View clients</li>
                            <li><code>billing.manage</code> - Manage billing</li>
                        </ul>
                    </div>
                    
                    <div class="mb-3">
                        <h6 class="text-warning">Best Practices:</h6>
                        <ul class="list-unstyled small">
                            <li>• Keep keys short and descriptive</li>
                            <li>• Use consistent naming patterns</li>
                            <li>• Group related permissions</li>
                            <li>• Avoid special characters</li>
                        </ul>
                    </div>
                </div>
            </div>
            
            <!-- Permission Hierarchy Info -->
            <div class="custom-card">
                <div class="custom-card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-sitemap me-2"></i>
                        Permission Hierarchy
                    </h5>
                </div>
                <div class="custom-card-body">
                    <div class="mb-3">
                        <h6 class="text-info">Root Permissions</h6>
                        <p class="text-muted small">Top-level permissions that don't depend on others</p>
                    </div>
                    
                    <div class="mb-3">
                        <h6 class="text-info">Child Permissions</h6>
                        <p class="text-muted small">Sub-permissions that inherit from parent permissions</p>
                    </div>
                    
                    <div class="alert alert-info custom-alert">
                        <i class="fas fa-lightbulb me-2"></i>
                        <strong>Tip:</strong> Use hierarchy to organize related permissions logically
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('styles')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet" />
<style>
    /* Form field text alignment */
    .form-control,
    .form-select,
    .custom-form-control {
        text-align: left !important;
        direction: ltr !important;
    }
    
    /* Select2 text alignment */
    .select2-container--bootstrap-5 {
        width: 100% !important;
    }
    .select2-container--bootstrap-5 .select2-selection {
        min-height: 38px;
        border: 1px solid #ced4da;
        text-align: left !important;
        display: flex !important;
        align-items: center !important;
    }
    .select2-container--bootstrap-5 .select2-selection--single {
        height: 38px !important;
    }
    .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
        line-height: 36px !important;
        padding-left: 12px !important;
        padding-right: 20px !important;
        text-align: left !important;
        direction: ltr !important;
        width: 100% !important;
        display: block !important;
    }
    .select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow {
        height: 36px !important;
        right: 8px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
    .select2-container--bootstrap-5 .select2-selection__placeholder {
        color: #6c757d !important;
        text-align: left !important;
    }
    
    /* Select2 dropdown results alignment */
    .select2-results__option {
        text-align: left !important;
        direction: ltr !important;
    }
    
    /* Textarea text alignment */
    textarea.form-control {
        text-align: left !important;
        direction: ltr !important;
        resize: vertical;
    }
    
    /* Input placeholder alignment */
    .form-control::placeholder,
    .form-select::placeholder {
        text-align: left !important;
    }
    
    /* Select2 search box alignment */
    .select2-search--dropdown .select2-search__field {
        text-align: left !important;
        direction: ltr !important;
    }
</style>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const permissionKeyField = document.getElementById('permission_key');
    const descriptionField = document.getElementById('description');
    
    // Initialize Select2 for Menu dropdown with search
    $('#menu_id').select2({
        theme: 'bootstrap-5',
        placeholder: 'Search or select a menu...',
        allowClear: true,
        width: '100%',
        language: {
            noResults: function() {
                return "No menu found";
            },
            searching: function() {
                return "Searching...";
            }
        }
    });
    
    // Initialize Select2 for Parent Permission dropdown with search
    $('#parent_id').select2({
        theme: 'bootstrap-5',
        placeholder: 'Search or select a parent permission...',
        allowClear: true,
        width: '100%',
        language: {
            noResults: function() {
                return "No parent permission found";
            },
            searching: function() {
                return "Searching...";
            }
        }
    });
    
    // Auto-generate permission key from description only if permission key field is empty
    descriptionField.addEventListener('input', function(e) {
        // Only auto-generate if permission key field is empty
        if (permissionKeyField.value.trim() === '') {
            const description = e.target.value;
            const permissionKey = generatePermissionKey(description);
            permissionKeyField.value = permissionKey;
        }
    });
});

function generatePermissionKey(description) {
    return description
        .toLowerCase()
        .replace(/[^a-z0-9\s]/g, '')
        .replace(/\s+/g, '.')
        .trim();
}
</script>
@endsection