@extends('layouts.admin')

@section('title', isset($category) ? 'Edit Category' : 'Create Category')

@section('admin_content')
    <div class="max-w-4xl mx-auto">
        <div class="flex items-center space-x-4 mb-10">
            <a href="{{ route('admin.categories.index') }}" class="w-10 h-10 rounded-xl bg-white/5 flex items-center justify-center text-secondary hover:text-primary transition-all">
                <i class="fas fa-arrow-left"></i>
            </a>
            <div>
                <h3 class="text-2xl font-bold">{{ isset($category) ? 'Edit Category' : 'New Category' }}</h3>
                <p class="text-secondary text-sm">Please fill in the details below.</p>
            </div>
        </div>

        <div class="admin-card p-10 rounded-[2.5rem]">
            <form action="{{ isset($category) ? route('admin.categories.update', $category) : route('admin.categories.store') }}" method="POST" enctype="multipart/form-data" class="space-y-8">
                @csrf
                @if(isset($category))
                    @method('PUT')
                @endif

                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <div class="space-y-2">
                        <label class="text-xs uppercase tracking-widest font-bold text-secondary">Category Name</label>
                        <input type="text" name="name" value="{{ old('name', $category->name ?? '') }}" required class="w-full px-6 py-4 rounded-2xl bg-white/5 border border-white/10 text-white focus:border-primary outline-none transition-all" placeholder="Enter name">
                    </div>

                    <div class="space-y-2">
                        <label class="text-xs uppercase tracking-widest font-bold text-secondary">Status</label>
                        <select name="status" class="w-full px-6 py-4 rounded-2xl bg-white/5 border border-white/10 text-white focus:border-primary outline-none transition-all appearance-none cursor-pointer">
                            <option value="1" {{ old('status', $category->status ?? 1) == 1 ? 'selected' : '' }}>Active</option>
                            <option value="0" {{ old('status', $category->status ?? 1) == 0 ? 'selected' : '' }}>Inactive</option>
                        </select>
                    </div>
                </div>

                <div class="space-y-2">
                    <label class="text-xs uppercase tracking-widest font-bold text-secondary">Description</label>
                    <textarea name="description" rows="4" class="w-full px-6 py-4 rounded-2xl bg-white/5 border border-white/10 text-white focus:border-primary outline-none transition-all" placeholder="Tell us more about this category...">{{ old('description', $category->description ?? '') }}</textarea>
                </div>

                <div class="space-y-4">
                    <label class="text-xs uppercase tracking-widest font-bold text-secondary">Featured Image</label>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
                        <label class="flex flex-col items-center justify-center w-full h-40 border-2 border-white/5 border-dashed rounded-[1.5rem] cursor-pointer hover:bg-white/[0.02] transition-all">
                            <div class="flex flex-col items-center justify-center pt-5 pb-6">
                                <i class="fas fa-cloud-upload-alt text-3xl text-primary mb-4 opacity-50"></i>
                                <p class="text-xs text-secondary italic">Click to upload or drag and drop</p>
                            </div>
                            <input type="file" name="image" id="category-image-input" class="hidden" accept="image/*" />
                        </label>
                        <div class="space-y-2">
                            <label class="text-xs uppercase tracking-widest font-bold text-secondary">Image Preview</label>
                            <div id="category-image-preview" class="w-32 h-32 rounded-2xl overflow-hidden shadow-lg border-2 border-white/10 bg-white/5 {{ isset($category) && $category->image ? '' : 'hidden' }}">
                                <img src="{{ isset($category) && $category->image ? asset('storage/' . $category->image) : '' }}" class="w-full h-full object-cover">
                            </div>
                            <div id="category-preview-placeholder" class="w-32 h-32 rounded-2xl border-2 border-white/5 border-dashed flex items-center justify-center text-secondary/30 {{ isset($category) && $category->image ? 'hidden' : '' }}">
                                <i class="fas fa-image text-4xl"></i>
                            </div>
                            <p class="text-[10px] text-secondary mt-2 pl-1 italic">JPG, PNG or WEBP (Max: 2MB)</p>
                        </div>
                    </div>
                </div>

                <div class="pt-6">
                    <button type="submit" class="w-full py-5 bg-primary text-black font-black uppercase tracking-[0.2em] rounded-2xl hover:bg-primary/90 transition-all shadow-xl shadow-primary/20">
                        {{ isset($category) ? 'Update Category' : 'Create Category' }}
                    </button>
                </div>
            </form>
        </div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const imageInput = document.getElementById('category-image-input');
            const imagePreview = document.getElementById('category-image-preview');
            const previewImg = imagePreview.querySelector('img');
            const previewPlaceholder = document.getElementById('category-preview-placeholder');

            imageInput.addEventListener('change', function() {
                const file = this.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        previewImg.src = e.target.result;
                        imagePreview.classList.remove('hidden');
                        previewPlaceholder.classList.add('hidden');
                    };
                    reader.readAsDataURL(file);
                }
            });
        });
    </script>
@endsection