@extends('admin.layouts.app')

@section('title', 'Edit Category')
@section('header_title', 'Edit 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">Edit Category</h2>
            <p class="text-xs text-slate-500">Update category details for "{{ $category->name }}".</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.update', $category) }}" method="POST" class="bg-white rounded-3xl p-6 lg:p-8 border border-amber-900/10 shadow-xs space-y-6">
        @csrf
        @method('PUT')

        <!-- 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', $category->name) }}" 
                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
            </label>
            <input 
                type="text" 
                id="category_slug" 
                name="slug" 
                value="{{ old('slug', $category->slug) }}" 
                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>

        <!-- 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" 
                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', $category->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', $category->status) == 'active' ? 'selected' : '' }}>Active</option>
                <option value="inactive" {{ old('status', $category->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-between">
            <button 
                type="button" 
                onclick="if(confirm('Are you sure you want to delete this category?')) document.getElementById('delete-category-form').submit();"
                class="px-4 py-2 rounded-xl text-red-600 hover:bg-red-50 text-xs font-bold transition-colors"
            >
                Delete Category
            </button>

            <div class="flex items-center 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"
                >
                    Update Category
                </button>
            </div>
        </div>

    </form>

    <form id="delete-category-form" action="{{ route('admin.categories.destroy', $category) }}" method="POST" class="hidden">
        @csrf
        @method('DELETE')
    </form>
</div>
@endsection