@extends('admin.layouts.app')

@section('title', 'Add New Category')
@section('header_title', 'Create Category')

@section('content')
<div class="max-w-2xl mx-auto space-y-6">

    <!-- Header Breadcrumb & Back Link -->
    <div class="flex items-center justify-between">
        <div>
            <h2 class="font-serif text-2xl font-bold text-slate-900">Add New Category</h2>
            <p class="text-xs text-slate-500">Create a product category for organizing jewellery items.</p>
        </div>
        <a href="{{ route('admin.categories.index') }}" class="px-4 py-2 bg-slate-100 text-slate-600 rounded-xl text-xs font-bold hover:bg-slate-200 transition-colors">
            ← BACK TO CATEGORIES
        </a>
    </div>

    <!-- FORM CARD -->
    <form action="{{ route('admin.categories.store') }}" method="POST" class="bg-white rounded-3xl p-6 lg:p-8 border border-amber-900/10 shadow-xs space-y-6">
        @csrf

        <!-- Category Name -->
        <div>
            <label for="category_name" class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-2">
                Category Name <span class="text-red-500">*</span>
            </label>
            <input 
                type="text" 
                id="category_name" 
                name="name" 
                value="{{ old('name') }}" 
                placeholder="e.g. Impon Products" 
                required 
                class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-xs lg:text-sm text-slate-900 focus:outline-none focus:border-gold-500 focus:bg-white transition-all"
            >
            @error('name')<p class="text-[11px] text-red-500 mt-1">{{ $message }}</p>@enderror
        </div>

        <!-- Slug -->
        <div>
            <label for="category_slug" class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-2">
                Slug <span class="text-slate-400 font-normal text-[11px]">(Auto-generated if left blank)</span>
            </label>
            <input 
                type="text" 
                id="category_slug" 
                name="slug" 
                value="{{ old('slug') }}" 
                placeholder="e.g. impon-products" 
                class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-xs lg:text-sm text-slate-900 focus:outline-none focus:border-gold-500 focus:bg-white transition-all font-mono"
            >
            @error('slug')<p class="text-[11px] text-red-500 mt-1">{{ $message }}</p>@enderror
        </div>

        <!-- Category Image URL -->
        <div>
            <label for="category_image" class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-2">
                Category Image URL <span class="text-slate-400 font-normal text-[11px]">(Optional image URL for category display)</span>
            </label>
            <input 
                type="text" 
                id="category_image" 
                name="image" 
                value="{{ old('image') }}" 
                placeholder="https://images.unsplash.com/... or /images/category.jpg" 
                class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-xs lg:text-sm text-slate-900 focus:outline-none focus:border-gold-500 focus:bg-white transition-all font-mono"
            >
            @error('image')<p class="text-[11px] text-red-500 mt-1">{{ $message }}</p>@enderror
        </div>

        <!-- Description -->
        <div>
            <label for="category_description" class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-2">
                Description
            </label>
            <textarea 
                id="category_description" 
                name="description" 
                rows="4" 
                placeholder="Brief description of products under this category..." 
                class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-xs lg:text-sm text-slate-900 focus:outline-none focus:border-gold-500 focus:bg-white transition-all"
            >{{ old('description') }}</textarea>
            @error('description')<p class="text-[11px] text-red-500 mt-1">{{ $message }}</p>@enderror
        </div>

        <!-- Status -->
        <div>
            <label for="category_status" class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-2">
                Status <span class="text-red-500">*</span>
            </label>
            <select 
                id="category_status" 
                name="status" 
                required 
                class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-xs lg:text-sm text-slate-900 font-bold focus:outline-none focus:border-gold-500 focus:bg-white transition-all"
            >
                <option value="active" {{ old('status', 'active') == 'active' ? 'selected' : '' }}>Active</option>
                <option value="inactive" {{ old('status') == 'inactive' ? 'selected' : '' }}>Inactive</option>
            </select>
            @error('status')<p class="text-[11px] text-red-500 mt-1">{{ $message }}</p>@enderror
        </div>

        <!-- Form Actions -->
        <div class="pt-4 border-t border-slate-100 flex items-center justify-end gap-3">
            <a 
                href="{{ route('admin.categories.index') }}" 
                class="px-5 py-3 rounded-xl bg-slate-100 text-slate-700 font-bold text-xs hover:bg-slate-200 transition-colors"
            >
                Cancel
            </a>
            <button 
                type="submit" 
                class="px-6 py-3 rounded-xl gold-gradient-bg text-obsidian-900 font-bold text-xs shadow-md hover:scale-105 transition-transform"
            >
                Save Category
            </button>
        </div>

    </form>
</div>

<!-- Auto-generate Slug JS -->
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const nameInput = document.getElementById('category_name');
        const slugInput = document.getElementById('category_slug');
        let userEditedSlug = false;

        slugInput.addEventListener('input', function () {
            userEditedSlug = slugInput.value.trim().length > 0;
        });

        nameInput.addEventListener('input', function () {
            if (!userEditedSlug) {
                slugInput.value = nameInput.value
                    .toLowerCase()
                    .trim()
                    .replace(/[^a-z0-9\s-]/g, '')
                    .replace(/[\s_]+/g, '-')
                    .replace(/^-+|-+$/g, '');
            }
        });
    });
</script>
@endsection