@extends('layouts.admin')

@section('title', 'Create Category')
@section('header', 'Create Category')
@section('subheader', 'Add a new engagement dimension')

@section('content')
<div class="max-w-2xl">
    <form action="{{ route('admin.categories.store') }}" method="POST">
        @csrf
        
        <div class="card">
            <div class="card-body space-y-6">
                <!-- Name -->
                <div class="form-group">
                    <label for="name" class="form-label">Category Name <span class="text-red-500">*</span></label>
                    <input type="text" id="name" name="name" value="{{ old('name') }}" class="form-input @error('name') border-danger @enderror" required placeholder="e.g., Leadership & Vision">
                    @error('name')
                        <p class="form-error">{{ $message }}</p>
                    @enderror
                </div>
                
                <!-- Description -->
                <div class="form-group">
                    <label for="description" class="form-label">Description</label>
                    <textarea id="description" name="description" rows="3" class="form-textarea @error('description') border-danger @enderror" placeholder="Brief description of what this category measures...">{{ old('description') }}</textarea>
                    @error('description')
                        <p class="form-error">{{ $message }}</p>
                    @enderror
                </div>
                
                <div class="grid grid-cols-2 gap-6">
                    <!-- Icon -->
                    <div class="form-group">
                        <label for="icon" class="form-label">Icon (Emoji)</label>
                        <input type="text" id="icon" name="icon" value="{{ old('icon', '📊') }}" class="form-input @error('icon') border-danger @enderror" placeholder="👁️">
                        <p class="form-help">Use an emoji as the category icon</p>
                        @error('icon')
                            <p class="form-error">{{ $message }}</p>
                        @enderror
                    </div>
                    
                    <!-- Color -->
                    <div class="form-group">
                        <label for="color" class="form-label">Color</label>
                        <div class="flex items-center space-x-2">
                            <input type="color" id="color" name="color" value="{{ old('color', '#a6cf45') }}" class="h-10 w-20 rounded border border-gray-300 cursor-pointer">
                            <input type="text" id="color_text" value="{{ old('color', '#a6cf45') }}" class="form-input flex-1" placeholder="#a6cf45">
                        </div>
                        @error('color')
                            <p class="form-error">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
                
                <div class="grid grid-cols-2 gap-6">
                    <!-- Sort Order -->
                    <div class="form-group">
                        <label for="sort_order" class="form-label">Sort Order</label>
                        <input type="number" id="sort_order" name="sort_order" value="{{ old('sort_order', 0) }}" class="form-input @error('sort_order') border-danger @enderror" min="0">
                        @error('sort_order')
                            <p class="form-error">{{ $message }}</p>
                        @enderror
                    </div>
                    
                    <!-- Active -->
                    <div class="form-group">
                        <label class="form-label">Status</label>
                        <label class="flex items-center mt-2">
                            <input type="checkbox" name="is_active" value="1" class="form-checkbox" {{ old('is_active', true) ? 'checked' : '' }}>
                            <span class="ml-2 text-sm text-gray-600">Active</span>
                        </label>
                    </div>
                </div>
            </div>
            
            <div class="card-footer flex items-center justify-between">
                <a href="{{ route('admin.categories.index') }}" class="btn-ghost">
                    <i class="fas fa-arrow-left mr-2"></i>
                    Back
                </a>
                <button type="submit" class="btn-primary">
                    <i class="fas fa-save mr-2"></i>
                    Create Category
                </button>
            </div>
        </div>
    </form>
</div>

@push('scripts')
<script>
    // Sync color picker with text input
    const colorPicker = document.getElementById('color');
    const colorText = document.getElementById('color_text');
    
    colorPicker.addEventListener('input', (e) => {
        colorText.value = e.target.value;
    });
    
    colorText.addEventListener('input', (e) => {
        if (/^#[0-9A-Fa-f]{6}$/.test(e.target.value)) {
            colorPicker.value = e.target.value;
        }
    });
</script>
@endpush
@endsection