@extends('admin.layouts.default')
@section('page_title', 'Edit Category' . config('default.page_title_delimiter') . config('default.app_name'))
@section('content')
<div class="w-full max-w-2xl mx-auto px-4 md:px-6 py-6 md:py-8">
    
    <div class="mb-8 flex items-center gap-3">
        <div class="p-2.5 bg-primary-50 dark:bg-primary-500/10 rounded-xl text-primary-600 shadow-sm">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6"><path d="M12 20h9"></path><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"></path></svg>
        </div>
        <div>
            <h1 class="text-2xl md:text-3xl font-bold text-secondary-900 dark:text-white tracking-tight">Edit Category</h1>
            <p class="text-xs text-secondary-400 mt-0.5">Modify properties of: <span class="font-bold text-primary-600 dark:text-primary-400">{{ $category->name }}</span></p>
        </div>
    </div>

    <div class="bg-white dark:bg-secondary-900 border border-secondary-200 dark:border-secondary-800 rounded-3xl shadow-sm p-6 md:p-8">
        <form action="{{ route('admin.categories.update', $category->id) }}" method="POST">
            @csrf
            @method('PUT') {{-- التوجيه الإجباري للارافل في الـ Edit 🚀 --}}

            <div class="space-y-6 mb-8">
                <div>
                    <label class="block text-[10px] font-black text-secondary-500 dark:text-secondary-400 uppercase tracking-widest mb-2">Category Name</label>
                    <input type="text" name="name" value="{{ old('name', $category->name) }}" required
                           class="w-full bg-secondary-50 dark:bg-secondary-800 border border-transparent dark:border-transparent rounded-xl p-3.5 text-sm outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white dark:focus:bg-secondary-800/80 text-secondary-900 dark:text-white transition-all placeholder:text-secondary-400 @error('name') border-red-500 dark:border-red-500/50 @enderror"
                           placeholder="e.g. Sports, Technology...">
                    @error('name') 
                        <p class="text-red-500 text-xs mt-2 font-medium">{{ $message }}</p> 
                    @enderror
                </div>

                <div class="p-4 bg-secondary-50 dark:bg-secondary-800/40 border border-secondary-100 dark:border-secondary-800 rounded-2xl flex items-center justify-between">
                    <div>
                        <label for="is_active" class="text-sm font-bold text-secondary-900 dark:text-white block cursor-pointer">Mark as Active</label>
                        <span class="text-xs text-secondary-400 block mt-0.5">Active categories will be visible publicly on the platform</span>
                    </div>
                    <input id="is_active" name="is_active" type="checkbox" value="1" {{ $category->is_active ? 'checked' : '' }} 
                           class="w-4 h-4 rounded border-secondary-300 text-primary-600 focus:ring-primary-500 cursor-pointer">
                </div>
            </div>

            <div class="flex gap-3 border-t dark:border-secondary-800 pt-6">
                <a href="{{ route('admin.categories.index') }}" 
                   class="flex-1 text-center px-4 py-3.5 rounded-xl bg-secondary-100 dark:bg-secondary-800 text-secondary-600 dark:text-secondary-400 font-bold hover:bg-secondary-200 dark:hover:bg-secondary-700 transition-all">
                    Cancel
                </a>
                <button type="submit" 
                        class="bg-secondary-900 hover:bg-secondary-800 dark:bg-white dark:hover:bg-secondary-100 text-white dark:text-secondary-900 font-bold text-xs px-4 py-2 rounded-xl transition-all cursor-pointer">
                    Update Category
                </button>
            </div>
        </form>
    </div>
</div>
@endsection