@extends('admin.layouts.app')

@section('title', 'Edit Category')
@section('page-title', 'Edit Category')

@section('content')
<div class="bg-white dark:bg-gray-950 rounded-xl shadow-lg border border-gray-200 dark:border-gray-800 p-4 md:p-8">
    <div class="mb-4 md:mb-6 pb-4 border-b border-gray-200 dark:border-gray-800">
        <h3 class="text-xl md:text-2xl font-bold text-gray-900 dark:text-white">Edit Category</h3>
        <p class="text-gray-500 dark:text-gray-400 text-xs md:text-sm mt-1">Update the category information below</p>
    </div>
    
    <form method="POST" action="{{ route('admin.categories.update', $category) }}" enctype="multipart/form-data">
        @csrf
        @method('PUT')

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6">
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Category Name *</label>
                <input type="text" name="name" value="{{ old('name', $category->name) }}" required
                       class="w-full px-3 py-2 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg text-sm text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent">
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Category Name (Khmer)</label>
                <input type="text" name="name_km" value="{{ old('name_km', $category->name_km) }}"
                       class="w-full px-3 py-2 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg text-sm text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent">
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Code *</label>
                <input type="text" name="code" value="{{ old('code', $category->code) }}" required
                       class="w-full px-3 py-2 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg text-sm text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent">
            </div>

            <div class="md:col-span-2">
                <label class="block text-gray-700 text-sm font-semibold mb-2">Category Image</label>
                <div class="p-6 bg-gray-50 rounded-lg border-2 border-dashed border-gray-300 hover:border-blue-400 transition-colors">
                    @if($category->image)
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Current Image</label>
                            <img src="{{ $category->image }}" alt="Current" class="max-w-xs h-40 object-cover rounded-lg border-2 border-gray-200 dark:border-gray-800 shadow-md">
                        </div>
                    @endif
                    
                    <!-- Image Upload -->
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            <i class="fas fa-upload mr-2"></i>Upload New Image
                        </label>
                        <input type="file" name="image_upload" id="image_upload" accept="image/*"
                               class="block w-full text-sm text-gray-500 dark:text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-gray-900 dark:file:bg-white file:text-white dark:file:text-gray-900 hover:file:bg-gray-800 dark:hover:file:bg-gray-100 cursor-pointer"
                               onchange="previewImage(this, 'image_preview')">
                        <p class="text-xs text-gray-500 dark:text-gray-400 mt-2">
                            <i class="fas fa-info-circle mr-1"></i>Max size: 5MB. Formats: JPEG, PNG, JPG, GIF, WEBP
                        </p>
                    </div>
                    
                    <!-- Image Preview -->
                    <div id="image_preview_container" class="hidden mb-4">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">New Image Preview</label>
                        <div class="relative inline-block">
                            <img id="image_preview" src="" alt="Preview" class="max-w-xs h-40 object-cover rounded-lg border-2 border-gray-200 dark:border-gray-800 shadow-md">
                            <button type="button" onclick="clearImagePreview('image_preview', 'image_upload')" 
                                    class="absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-8 h-8 flex items-center justify-center text-sm hover:bg-red-600 shadow-lg transition-colors">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    </div>
                    
                    <!-- Or Image URL -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Or Enter Image URL</label>
                        <input type="text" name="image" id="image_url" value="{{ old('image', $category->image) }}"
                               class="w-full px-3 py-2 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg text-sm text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent"
                               placeholder="https://example.com/image.jpg"
                               onchange="previewImageUrl(this, 'image_preview')">
                    </div>
                </div>
            </div>

            @if($category->isSubcategory())
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Parent Category</label>
                    <select name="parent_id" class="w-full px-3 py-2 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent">
                        <option value="">None (Make it main category)</option>
                        @foreach($mainCategories as $mainCategory)
                            <option value="{{ $mainCategory->id }}" {{ old('parent_id', $category->parent_id) == $mainCategory->id ? 'selected' : '' }}>
                                {{ $mainCategory->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
            @endif

            <div class="md:col-span-2">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Description</label>
                <textarea name="description" rows="3"
                          class="w-full px-3 py-2 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg text-sm text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent resize-none">{{ old('description', $category->description) }}</textarea>
            </div>

            <div class="md:col-span-2">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Description (Khmer)</label>
                <textarea name="description_km" rows="3"
                          class="w-full px-3 py-2 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg text-sm text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent resize-none">{{ old('description_km', $category->description_km) }}</textarea>
            </div>
        </div>

        <div class="mt-6 md:mt-8 flex flex-col sm:flex-row items-stretch sm:items-center justify-end gap-3 sm:gap-4 pt-4 md:pt-6 border-t border-gray-200 dark:border-gray-800">
            <a href="{{ route('admin.categories.index') }}" class="px-4 md:px-6 py-2.5 md:py-3 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 font-semibold rounded-lg transition-colors text-center">
                <i class="fas fa-times mr-2"></i>Cancel
            </a>
            <button type="submit" class="px-6 md:px-8 py-2.5 md:py-3 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 text-gray-900 dark:text-white font-semibold rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-all duration-200">
                Update
            </button>
        </div>
    </form>
</div>

<script>
function previewImage(input, previewId) {
    if (input.files && input.files[0]) {
        const reader = new FileReader();
        reader.onload = function(e) {
            document.getElementById(previewId).src = e.target.result;
            document.getElementById('image_preview_container').classList.remove('hidden');
            document.getElementById('image_url').value = '';
        };
        reader.readAsDataURL(input.files[0]);
    }
}

function previewImageUrl(input, previewId) {
    if (input.value) {
        document.getElementById(previewId).src = input.value;
        document.getElementById('image_preview_container').classList.remove('hidden');
        document.getElementById('image_upload').value = '';
    }
}

function clearImagePreview(previewId, uploadId) {
    document.getElementById(previewId).src = '';
    document.getElementById('image_preview_container').classList.add('hidden');
    document.getElementById(uploadId).value = '';
    document.getElementById('image_url').value = '';
}
</script>
@endsection