@extends('layouts.admin')

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

@section('content')
<div class="container-fluid">
    <!-- Page Heading -->
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">Create New Permission</h1>
        <a href="{{ route('admin.permissions.index') }}" class="btn btn-secondary btn-sm shadow-sm">
            <i class="fas fa-arrow-left fa-sm me-2"></i> Back to List
        </a>
    </div>

    <!-- Error Display -->
    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <strong><i class="fas fa-exclamation-triangle me-2"></i>Please fix the following errors:</strong>
            <ul class="mb-0 mt-2">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <!-- Create Form Card -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Permission Information</h6>
        </div>
        <div class="card-body">
            <form action="{{ route('admin.permissions.store') }}" method="POST" id="createPermissionForm">
                @csrf

                <div class="row">
                    <div class="col-md-12">
                        <!-- Permission Name -->
                        <div class="mb-3">
                            <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') }}" 
                                   placeholder="e.g., view-users, create-posts, edit-settings"
                                   required>
                            @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="text-muted">
                                Use kebab-case format (e.g., view-users, manage-roles)
                            </small>
                        </div>

                        <!-- Guard Name -->
                        <div class="mb-3">
                            <label for="guard_name" class="form-label">Guard Name</label>
                            <select class="form-control @error('guard_name') is-invalid @enderror" 
                                    id="guard_name" 
                                    name="guard_name">
                                <option value="web" {{ old('guard_name') == 'web' ? 'selected' : '' }}>Web</option>
                                <option value="api" {{ old('guard_name') == 'api' ? 'selected' : '' }}>API</option>
                            </select>
                            @error('guard_name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Display Name (Optional) -->
                        <div class="mb-3">
                            <label for="display_name" class="form-label">Display Name (Optional)</label>
                            <input type="text" 
                                   class="form-control @error('display_name') is-invalid @enderror" 
                                   id="display_name" 
                                   name="display_name" 
                                   value="{{ old('display_name') }}" 
                                   placeholder="e.g., View Users">
                            @error('display_name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Description (Optional) -->
                        <div class="mb-3">
                            <label for="description" class="form-label">Description (Optional)</label>
                            <textarea class="form-control @error('description') is-invalid @enderror" 
                                      id="description" 
                                      name="description" 
                                      rows="3" 
                                      placeholder="Describe what this permission allows...">{{ old('description') }}</textarea>
                            @error('description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Common Permission Suggestions -->
                        <div class="mb-3">
                            <label class="form-label">Common Permissions</label>
                            <div class="row">
                                <div class="col-md-4">
                                    <button type="button" class="btn btn-outline-secondary btn-sm w-100 mb-2 suggestion-btn" data-value="view-users">View Users</button>
                                </div>
                                <div class="col-md-4">
                                    <button type="button" class="btn btn-outline-secondary btn-sm w-100 mb-2 suggestion-btn" data-value="create-users">Create Users</button>
                                </div>
                                <div class="col-md-4">
                                    <button type="button" class="btn btn-outline-secondary btn-sm w-100 mb-2 suggestion-btn" data-value="edit-users">Edit Users</button>
                                </div>
                                <div class="col-md-4">
                                    <button type="button" class="btn btn-outline-secondary btn-sm w-100 mb-2 suggestion-btn" data-value="delete-users">Delete Users</button>
                                </div>
                                <div class="col-md-4">
                                    <button type="button" class="btn btn-outline-secondary btn-sm w-100 mb-2 suggestion-btn" data-value="manage-roles">Manage Roles</button>
                                </div>
                                <div class="col-md-4">
                                    <button type="button" class="btn btn-outline-secondary btn-sm w-100 mb-2 suggestion-btn" data-value="manage-permissions">Manage Permissions</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Form Actions -->
                <div class="d-flex justify-content-end gap-2">
                    <button type="button" class="btn btn-secondary me-2" onclick="window.location.href='{{ route('admin.permissions.index') }}'">
                        <i class="fas fa-times me-2"></i>Cancel
                    </button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save me-2"></i>Create Permission
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .suggestion-btn {
        transition: all 0.3s;
    }
    .suggestion-btn:hover {
        background-color: #4e73df;
        color: white;
        border-color: #4e73df;
    }
    .gap-2 {
        gap: 0.5rem;
    }
</style>
@endpush

@push('scripts')
<script>
    $(document).ready(function() {
        // Auto-format permission name to kebab-case
        $('#name').on('input', function() {
            let value = $(this).val();
            // Convert to kebab-case: lowercase and replace spaces/special chars with hyphens
            value = value.toLowerCase()
                       .replace(/[^a-z0-9]+/g, '-')
                       .replace(/^-|-$/g, '');
            $(this).val(value);
        });

        // Suggestion buttons
        $('.suggestion-btn').click(function() {
            let value = $(this).data('value');
            $('#name').val(value);
            
            // Also set a nice display name
            let displayName = value.split('-').map(word => 
                word.charAt(0).toUpperCase() + word.slice(1)
            ).join(' ');
            $('#display_name').val(displayName);
        });

        // Form validation
        $('#createPermissionForm').submit(function(e) {
            let name = $('#name').val().trim();
            if (name === '') {
                e.preventDefault();
                alert('Permission name is required');
                $('#name').focus();
            }
        });
    });
</script>
@endpush