@extends('admin.layouts.app')

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

@section('content')
<form method="POST" action="{{ route('admin.categories.store') }}" enctype="multipart/form-data" class="bg-white p-4 md:p-6 lg:p-8 rounded-2xl shadow-md border border-[#e8ddd0]">
    @csrf
    
    <div class="space-y-4 md:space-y-6">
        <div>
            <label for="name" class="block text-sm font-semibold mb-2 text-[#524438]">Category Name *</label>
            <input type="text" id="name" name="name" required value="{{ old('name') }}" 
                   class="w-full px-3 md:px-4 py-2 md:py-3 border-2 border-[#e8ddd0] rounded-xl focus:ring-2 focus:ring-[#9d8566] focus:border-[#9d8566] transition-all outline-none text-[#524438] text-sm md:text-base">
            @error('name')<p class="text-red-500 text-sm mt-1">{{ $message }}</p>@enderror
        </div>
        
        <div>
            <label for="description" class="block text-sm font-semibold mb-2 text-[#524438]">Description</label>
            <textarea id="description" name="description" rows="4" 
                      class="w-full px-3 md:px-4 py-2 md:py-3 border-2 border-[#e8ddd0] rounded-xl focus:ring-2 focus:ring-[#9d8566] focus:border-[#9d8566] transition-all outline-none text-[#524438] resize-none text-sm md:text-base">{{ old('description') }}</textarea>
            @error('description')<p class="text-red-500 text-sm mt-1">{{ $message }}</p>@enderror
        </div>
        
        <div>
            <label for="image" class="block text-sm font-semibold mb-2 text-[#524438]">Category Image</label>
            <input type="file" id="image" name="image" accept="image/*" 
                   class="w-full px-3 md:px-4 py-2 md:py-3 border-2 border-[#e8ddd0] rounded-xl focus:ring-2 focus:ring-[#9d8566] focus:border-[#9d8566] transition-all outline-none text-[#524438] text-sm md:text-base"
                   onchange="previewCategoryImage(this)">
            <p class="text-xs md:text-sm text-[#645443] mt-2">Optional. Maximum file size: 5MB</p>
            <div id="category-image-preview" class="mt-4"></div>
            @error('image')<p class="text-red-500 text-sm mt-1">{{ $message }}</p>@enderror
        </div>
    </div>
    
    <div class="mt-6 md:mt-8 flex flex-col sm:flex-row gap-3 md:gap-4">
        <button type="submit" class="w-full sm:w-auto bg-[#7d6a52] text-white px-6 md:px-8 py-2 md:py-3 rounded-full hover:bg-[#9d8566] transition-all font-semibold shadow-lg hover:shadow-xl transform hover:scale-105 text-sm md:text-base">
            Create Category
        </button>
        <a href="{{ route('admin.categories.index') }}" class="w-full sm:w-auto bg-[#e8ddd0] text-[#524438] px-6 md:px-8 py-2 md:py-3 rounded-full hover:bg-[#d4c4b0] transition-all font-semibold text-center text-sm md:text-base">
            Cancel
        </a>
    </div>
</form>
@endsection

@push('scripts')
<script>
function previewCategoryImage(input) {
    const preview = document.getElementById('category-image-preview');
    preview.innerHTML = '';
    
    if (input.files && input.files[0]) {
        const reader = new FileReader();
        reader.onload = function(e) {
            const img = document.createElement('img');
            img.src = e.target.result;
            img.className = 'w-24 h-24 md:w-32 md:h-32 object-cover rounded-lg border border-[#e8ddd0] shadow-sm';
            preview.appendChild(img);
        };
        reader.readAsDataURL(input.files[0]);
    }
}
</script>
@endpush