@extends('admin.layouts.app')

@section('title', 'Add Category')

@section('content')
<div class="max-w-2xl mx-auto bg-white rounded-lg shadow p-8">
    <h3 class="text-2xl font-bold text-gray-900 mb-6">Create New Category</h3>

    <form action="{{ route('admin.categories.store') }}" method="POST" enctype="multipart/form-data">
        @csrf

        <div class="mb-6">
            <label for="name" class="block text-sm font-medium text-gray-900 mb-2">Category Name *</label>
            <input type="text" name="name" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent @error('name') border-red-500 @enderror" value="{{ old('name') }}" required>
            @error('name')
                <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
            @enderror
        </div>

        <div class="mb-6">
            <label for="parent_id" class="block text-sm font-medium text-gray-900 mb-2">Parent Category</label>
            <select name="parent_id" id="parent_id" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent @error('parent_id') border-red-500 @enderror">
                <option value="">No Parent (Top Level)</option>
                @foreach ($parentOptions as $id => $label)
                    <option value="{{ $id }}" {{ (string) old('parent_id') === (string) $id ? 'selected' : '' }}>{{ $label }}</option>
                @endforeach
            </select>
            @error('parent_id')
                <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
            @enderror
        </div>

        <div class="mb-6">
            <label for="description" class="block text-sm font-medium text-gray-900 mb-2">Description</label>
            <textarea name="description" id="description" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent @error('description') border-red-500 @enderror">{{ old('description') }}</textarea>
            @error('description')
                <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
            @enderror
        </div>

        <div class="mb-6">
            <label for="image" class="block text-sm font-medium text-gray-900 mb-2">Category Image</label>
            <input type="file" name="image" id="image" class="w-full px-4 py-2 border border-gray-300 rounded-lg" accept="image/*">
            @error('image')
                <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
            @enderror
        </div>

        <div class="mb-6">
            <label class="flex items-center">
                <input type="hidden" name="is_active" value="0">
                <input type="checkbox" name="is_active" value="1" class="rounded" checked>
                <span class="ml-2 text-sm text-gray-900">Active</span>
            </label>
        </div>

        <div class="flex gap-4">
            <button type="submit" class="px-6 py-2 bg-orange-500 hover:bg-orange-600 text-white rounded-lg transition">
                Create Category
            </button>
            <a href="{{ route('admin.categories.index') }}" class="px-6 py-2 bg-gray-300 hover:bg-gray-400 text-gray-900 rounded-lg transition">
                Cancel
            </a>
        </div>
    </form>
</div>
@endsection