@extends('layouts.modern')

@section('page-title', $permission->exists ? 'Edit Permission' : 'Create Permission')

@section('breadcrumb')
<nav class="breadcrumb-nav">
    <a class="breadcrumb-link" href="{{ route('dashboard') }}">Dashboard</a>
    <span class="breadcrumb-separator">/</span>
    <a class="breadcrumb-link" href="{{ route('permissions.index') }}">Permissions</a>
    <span class="breadcrumb-separator">/</span>
    <span class="breadcrumb-current">{{ $permission->exists ? 'Edit' : 'Create' }}</span>
</nav>
@endsection

@section('action-buttons')
<a href="{{ route('permissions.index') }}" class="btn btn-outline-secondary btn-sm">
    <i class="fas fa-arrow-left me-1"></i>Back to Permissions
</a>
@endsection

@section('content')
<div class="row">
    <div class="col-md-8">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white">
                <h5 class="card-title mb-0">{{ $permission->exists ? 'Edit Permission' : 'Create New Permission' }}</h5>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ $permission->exists ? route('permissions.update', $permission) : route('permissions.store') }}">
                    @csrf
                    @if($permission->exists)
                        @method('PUT')
                    @endif

                    <div class="row g-3">
                        <!-- Name -->
                        <div class="col-md-6">
                            <label for="name" class="form-label">Permission Name <span class="text-danger">*</span></label>
                            <input type="text" 
                                   class="form-control @error('name') is-invalid @enderror" 
                                   id="name" 
                                   name="name" 
                                   value="{{ old('name', $permission->name) }}" 
                                   required>
                            @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Slug -->
                        <div class="col-md-6">
                            <label for="slug" class="form-label">Slug <span class="text-danger">*</span></label>
                            <input type="text" 
                                   class="form-control @error('slug') is-invalid @enderror" 
                                   id="slug" 
                                   name="slug" 
                                   value="{{ old('slug', $permission->slug) }}" 
                                   required>
                            <div class="form-text">Unique identifier (e.g., users.create, users.edit)</div>
                            @error('slug')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Module -->
                        <div class="col-md-6">
                            <label for="module" class="form-label">Module</label>
                            <select class="form-select @error('module') is-invalid @enderror" 
                                    id="module" 
                                    name="module">
                                @foreach($moduleOptions as $value => $label)
                                    <option value="{{ $value }}" {{ old('module', $permission->module) === $value ? 'selected' : '' }}>
                                        {{ $label }}
                                    </option>
                                @endforeach
                            </select>
                            @error('module')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Visibility -->
                        <div class="col-md-6">
                            <label for="visibility" class="form-label">Visibility</label>
                            <select class="form-select @error('visibility') is-invalid @enderror" 
                                    id="visibility" 
                                    name="visibility">
                                <option value="system" {{ old('visibility', $permission->visibility ?? 'system') === 'system' ? 'selected' : '' }}>System Only</option>
                                <option value="business" {{ old('visibility', $permission->visibility ?? 'system') === 'business' ? 'selected' : '' }}>Business Only</option>
                                <option value="both" {{ old('visibility', $permission->visibility ?? 'system') === 'both' ? 'selected' : '' }}>Both</option>
                            </select>
                            <small class="form-text text-muted">
                                <strong>System Only:</strong> Only system admins can see this permission.<br>
                                <strong>Business Only:</strong> Only business users can see this permission.<br>
                                <strong>Both:</strong> Both system and business users can see this permission.
                            </small>
                            @error('visibility')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Status -->
                        <div class="col-md-6">
                            <label for="is_active" class="form-label">Status</label>
                            <select class="form-select @error('is_active') is-invalid @enderror" 
                                    id="is_active" 
                                    name="is_active">
                                <option value="1" {{ old('is_active', $permission->is_active ? '1' : '0') === '1' ? 'selected' : '' }}>Active</option>
                                <option value="0" {{ old('is_active', $permission->is_active ? '1' : '0') === '0' ? 'selected' : '' }}>Inactive</option>
                            </select>
                            @error('is_active')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Description -->
                        <div class="col-12">
                            <label for="description" class="form-label">Description</label>
                            <textarea class="form-control @error('description') is-invalid @enderror" 
                                      id="description" 
                                      name="description" 
                                      rows="3">{{ old('description', $permission->description) }}</textarea>
                            @error('description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="d-flex justify-content-end gap-2 mt-4">
                        <a href="{{ route('permissions.index') }}" class="btn btn-outline-secondary">Cancel</a>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save me-1"></i>{{ $permission->exists ? 'Update Permission' : 'Create Permission' }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    @if($permission->exists)
    <div class="col-md-4">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white">
                <h6 class="card-title mb-0">Permission Information</h6>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <label class="form-label text-muted">Created At</label>
                    <p class="mb-0">{{ $permission->created_at->format('M d, Y H:i') }}</p>
                </div>
                
                <div class="mb-3">
                    <label class="form-label text-muted">Last Updated</label>
                    <p class="mb-0">{{ $permission->updated_at->format('M d, Y H:i') }}</p>
                </div>
                
                <div class="mb-3">
                    <label class="form-label text-muted">Assigned Roles</label>
                    @if($permission->roles()->count() > 0)
                        @foreach($permission->roles as $role)
                            <span class="badge bg-primary-subtle text-primary me-1 mb-1">{{ $role->name }}</span>
                        @endforeach
                    @else
                        <p class="mb-0 text-muted">Not assigned to any roles</p>
                    @endif
                </div>
            </div>
        </div>

        <!-- Permission Examples -->
        <div class="card border-0 shadow-sm mt-3">
            <div class="card-header bg-white">
                <h6 class="card-title mb-0">Permission Examples</h6>
            </div>
            <div class="card-body">
                <small class="text-muted">
                    <strong>Common patterns:</strong><br>
                    • <code>users.view</code> - View users<br>
                    • <code>users.create</code> - Create users<br>
                    • <code>users.edit</code> - Edit users<br>
                    • <code>users.delete</code> - Delete users<br>
                    • <code>roles.permissions</code> - Manage role permissions<br>
                    • <code>dashboard.view</code> - Access dashboard
                </small>
            </div>
        </div>
    </div>
    @endif
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Auto-generate slug from name
    const nameInput = document.getElementById('name');
    const slugInput = document.getElementById('slug');
    
    nameInput.addEventListener('input', function() {
        if (!slugInput.dataset.userModified) {
            const slug = this.value
                .toLowerCase()
                .replace(/[^a-z0-9\s]/g, '')
                .replace(/\s+/g, '.');
            slugInput.value = slug;
        }
    });
    
    slugInput.addEventListener('input', function() {
        this.dataset.userModified = 'true';
    });
    
    // Focus on name field
    nameInput.focus();
});
</script>
@endpush