@csrf

<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
    <div class="sm:col-span-2">
        <label class="text-sm font-medium text-gray-700">Name</label>
        <input type="text" name="name" value="{{ old('name', $area->name ?? '') }}" required class="mt-1 w-full rounded-md border-gray-300 focus:border-gray-900 focus:ring-gray-900" />
        <x-input-error :messages="$errors->get('name')" class="mt-2" />
    </div>

    <div>
        <label class="text-sm font-medium text-gray-700">Sort order</label>
        <input type="number" name="sort_order" value="{{ old('sort_order', $area->sort_order ?? 0) }}" min="0" class="mt-1 w-full rounded-md border-gray-300 focus:border-gray-900 focus:ring-gray-900" />
        <x-input-error :messages="$errors->get('sort_order')" class="mt-2" />
    </div>

    <div class="flex items-center gap-2 pt-6">
        <input type="checkbox" name="is_active" value="1" class="rounded border-gray-300 text-gray-900 focus:ring-gray-900" @checked(old('is_active', $area->is_active ?? false)) />
        <span class="text-sm text-gray-700">Active</span>
    </div>
</div>

<div class="mt-6 flex items-center gap-3">
    <button type="submit" class="rounded-md bg-gray-900 px-5 py-2 text-white text-sm font-semibold hover:bg-black">Save</button>
    <a href="{{ route('admin.areas.index') }}" class="text-sm font-semibold text-gray-700 hover:underline">Cancel</a>
</div>