@extends('layouts.admin')

@section('title', 'Edit Category')
@section('header', 'Edit Category')
@section('subheader', $category->name)

@section('content')
<div class="max-w-2xl">
    <form action="{{ route('admin.categories.update', $category) }}" method="POST">
        @csrf
        @method('PUT')
        
        <div class="card">
            <div class="card-body space-y-6">
                <!-- Preview -->
                <div class="flex items-center p-4 bg-gray-50 rounded-lg">
                    <span class="text-4xl mr-4">{{ $category->icon }}</span>
                    <div>
                        <h3 class="font-semibold text-lg text-secondary-900">{{ $category->name }}</h3>
                        <p class="text-sm text-gray-500">{{ $category->slug }}</p>
                    </div>
                    <div class="ml-auto">
                        <span class="w-8 h-8 rounded-full inline-block" style="background-color: {{ $category->color }}"></span>
                    </div>
                </div>
                
                <!-- 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', $category->name) }}" class="form-input @error('name') border-danger @enderror" required>
                    @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">{{ old('description', $category->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', $category->icon) }}" class="form-input @error('icon') border-danger @enderror">
                        @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', $category->color) }}" class="h-10 w-20 rounded border border-gray-300 cursor-pointer">
                            <input type="text" id="color_text" value="{{ old('color', $category->color) }}" class="form-input flex-1">
                        </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', $category->sort_order) }}" 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', $category->is_active) ? '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>
                    Update Category
                </button>
            </div>
        </div>
    </form>
</div>

@push('scripts')
<script>
    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